Vanilla JS → Next.js on Cloudflare: sitio experimental "Liberogic Office Green"

¿Conocen el sitio "Office Green"...?

Todo el contenido que publicamos en Liberogic, incluido nuestro sitio web corporativo, es en realidad un campo de pruebas. (Exceptuando la aplicación de accesibilidad de Futamata-san, ¡por supuesto! Y sí, este sitio todavía no cumple con WCAG 😭)

Todo comenzó hace unos 5 o 6 años, durante la época de la COVID, cuando nuestro presidente, con algo de tiempo libre, decidió hacer él mismo un proyecto de jardinería en la oficina. (https://yurulog.liberogic.jp/posts/qx9nibr59)

La primera propuesta descabellada @2023

Requisitos

• Había un cliente interesado en crear un sitio de afiliados, así que pensamos: ¿por qué no hacer un pequeño experimento? (Ese cliente desistió, así que el experimento se quedó en nada más que eso).
• ¿Y si probamos a indexar las páginas que se muestran dentro de un modal, sin crear páginas propias, para ver si pasamos la cuenta de Afiliados de Amazon? (Como ya habíamos comprado muchos materiales para la jardinería de la oficina, ¡pensamos usarlos como material para el proyecto!)
• Rara vez tenemos la oportunidad de trabajar con cosas como hacer girar panorámicas de 360°, pero en realidad parece sencillo gracias a las bibliotecas que existen. ¡Probemos!
• No nos importan los ingresos, así que si podemos combinarlo con experimentar y aprender, lo publicaremos.
• ¿Nuestro sitio es un campo de pruebas para nuestros clientes? ¿Me entiendes? (❓)

Estos fueron los requisitos que me asignaron poco después de incorporarme a la empresa.

La implementación comenzó en febrero de 2023. A continuación, documentamos el historial de modificaciones y las adiciones de contenido hasta la fecha.
¡Liberogic Office Green por fin ve la luz! ☀️

Stack tecnológico

• Vanilla JS (ES Modules) — sin framework, con división de módulos propios mediante import/export
• Pannellum - biblioteca visor de panorámicas de 360 grados (instalada localmente como carpeta pannellum/, autoalojada en lugar de usar CDN)
• HTML / Sass - marcado y estilos

APIs y servicios externos

Lo más importante de este sitio es el contenido de 360° que gira en pantalla. Las oficinas se fotografían con la cámara "THETA SC2" de RICOH.

Esta es la fotografía original tomada.

La implementación de 360° utiliza la biblioteca Pannellum. Basta con configurar la imagen capturada para poder verla girando 360°.

Para poder personalizarla en detalle, descargamos la propia biblioteca en lugar de usar un CDN.

Personalización

En los productos destacados se coloca un marcador "i", y al pasar el ratón por encima se muestra el nombre del producto en un globo emergente.

Al hacer clic, se muestra un modal con la presentación del producto, que enlaza con un enlace de afiliado de Amazon. En el plano de la oficina, en la parte inferior derecha, aparece un marcador en forma de estrella que indica la ubicación.

Presentación de productos sin rodeos, con una reseña honesta del presidente.

Además, con el interruptor de la esquina superior izquierda puedes cambiar a una vista con las luces apagadas, y al hacer clic en las flechas puedes moverte hasta el escritorio del presidente.

La gestión de los productos se realiza en una hoja de cálculo en lugar de un CMS, para que sea más fácil editarlos y corregirlos.

El motivo es el siguiente:

"Al cliente le conviene una operación más sencilla, ¿verdad? ¡Pruébalo con una hoja de cálculo!"

Los datos de la hoja de cálculo se obtienen con fetch e se insertan en el modal... Pero, una vez hecho, bueno...

"Vaya, este sitio va lento..."

…………

La API se basó en la fuente de hotspots personalizados. La referencia original solo muestra texto al pasar el cursor sobre marcas colocadas en cualquier punto, pero nosotros añadimos varios elementos propios, como abrir modales o cambiar de vista.

Al final, está terminado 🎊
¡Cuando quedó listo, di vueltas por el sitio de pura alegría!

Amazon Associates

Es el conocido servicio de afiliados para productos de Amazon.

El proceso es el siguiente:

• El contenido del sitio web debe ser reciente (generalmente actualizado en los últimos 60 días, y debe notarse que el sitio está bien mantenido).
• Debe contar con 10 o más artículos o contenidos.
• Una vez que puedas publicar enlaces a productos, incluye en la página de política de privacidad la indicación de operación de Amazon Associates.
• Se requieren 3 ventas en los 180 días posteriores al registro (no se permiten cuentas duplicadas ni de familiares).
• La URL introducida debe ser correcta y el sitio debe poder verificarse.

Etcétera.

Una vez logradas 3 ventas dentro de los 180 días, comienza la revisión; si se aprueba, podrás obtener comisiones como Asociado.

No han publicado los criterios de evaluación, así que no obtendremos respuesta aunque preguntemos. Parece que su proceso de revisión es más estricto que el de otros programas de afiliados.

Y también pasamos con éxito el programa de afiliados de Amazon㊗️
¡Y así nació un sitio de afiliados de compras cuyas ventas principales vienen de mi madre y del presidente!💥

※ Comprar a través de familiares no está bien, lo sé... Si esto hace que nos den de baja del programa de afiliados de Amazon, lo siento mucho m(_ _;)m

Por ahora las ventas avanzan a paso de tortuga, pero al revisar el resumen y las tasas de conversión resulta bastante interesante.

Próxima misión @2024

Tras dejarlo parado un tiempo, se nos abrió un hueco de trabajo. Y en ese momento llegó la siguiente misión...

Requisitos

• ¿No es un poco flojo el índice de indexación de las páginas?
• ¡También deberíamos añadir un espacio de oficina!
• Ya que estamos, ¿por qué no lo migramos a Next.js?

¡Otra vez un encargo imposible!

Stack tecnológico

Hemos estado colocando los archivos js y css de Pannellum en public para usarlos, pero ¿importarlos mediante npm es lo más habitual?
Parece que recientemente salió una biblioteca para Next.js; si hubiera existido al implementarlo, habría sido mucho más sencillo..

Además, teniendo en cuenta la accesibilidad web, también hice que se pudiera operar con el teclado.

Para que Google indexe el modal en SEO, se añadió el parámetro /item/{num} y se implementó con Parallel Routes de Next.js para que cuente como una sola página.

¿Al pasar de CSR a ISR también mejorará el SEO?

Las órdenes siguen llegando

Requisitos

• Perdón, nos regañaron por seguridad, así que quiten el espacio de oficina. (Completado: aunque lo acabábamos de añadir, le puse la marca de 🈲.)
• Está demasiado pesado... ¿No será que el renderizado está raro? (Casi completado)
• Ya que tenemos LLM, ¿no deberíamos automatizar algo? ¡Me gustaría incorporar un concepto totalmente distinto! (Estado actual: ¿qué quiere decir?)
• Podríamos añadir productos, ¿no?

Tras ir acumulando actualizaciones poco a poco, nos convertimos en el sitio de afiliados experimental Liberogic office green !

¡Me encantan la lluvia de confeti de la pantalla de apertura, que parece una pequeña tienda de barrio, y el modal con la ilustración del presidente! Suelo añadir pequeñas mejoras de este tipo en mis ratos libres, con pensamientos como "¡Qué divertido sería si hubiera esto!". Seguramente seguirá evolucionando en el futuro.

¿Conclusión?

Al principio, cuando lo desarrollé con Vanilla JS, lo implementé en gran medida por mi cuenta, pero a medida que se hicieron numerosas revisiones, el anidamiento de funciones se volvió más complejo. Quizás habría sido más fácil si la IA hubiera avanzado tanto como hoy cuando lo rehice con Next.js, pero, a cambio, se fue acumulando conocimiento, y creo que eso ha permitido "usar la IA sabiendo lo que hace".

Personalmente es un sitio que me encanta, pero ¿qué opinan ustedes??

¡Por favor, date una vuelta y visita la oficina!