Vanilla JS → Next.js sur Cloudflare, site expérimental « Liberogic Office Green »

Connaissez-vous le site « Office Green » ?

Tous les contenus que nous publions, y compris notre site web institutionnel, sont en réalité des terrains d'expérimentation. (À l'exception de l'application a11y de M. Futamata, bien sûr ! Soit dit en passant, ce site n'est pas encore conforme aux WCAG 😭)

Tout a commencé il y a 5 à 6 ans, à l'époque de la COVID, quand notre président, qui avait du temps libre, a décidé de végétaliser lui-même les bureaux en mode bricolage. (https://yurulog.liberogic.jp/posts/qx9nibr59)

Le premier défi déraisonnable @2023

Exigences

• Un client souhaitait lancer un site d'affiliation, alors pourquoi ne pas tenter une petite expérience ! (Ce client a finalement renoncé, l'expérience est donc restée à l'état de simple test.)
• Et si nous essayions de faire passer la validation du programme Amazon Associates sans créer de page, en indexant les pages affichées dans une modale ? (Comme nous avions acheté beaucoup de plantes pour la végétalisation des bureaux, pourquoi ne pas s'en servir comme matière première !)
• Ce n'est pas si fréquent de faire tourner des matériaux à 360°. Il y a des bibliothèques, ça a l'air simple, alors essayons !
• Les revenus, ce n'est pas le plus important : si ça peut servir à la fois d'expérimentation et d'apprentissage, on le publiera !
• Notre site sert de terrain d'expérimentation à nos clients, tu te rends compte ? (❓)

Voici les spécifications qui m'ont été confiées peu après mon arrivée dans l'entreprise.

L'implémentation a débuté en février 2023. Nous allons détailler ci-dessous l'historique des modifications et ajouts de contenu jusqu'à aujourd'hui !
Liberogic Office Green enfin à la lumière du jour ! ☀️

Stack technique

• Vanilla JS (ES Modules) — sans framework, découpage des modules maison avec import/export
• Pannellum - bibliothèque de visionneuse panoramique à 360 degrés (installée localement dans le dossier pannellum/, auto-hébergée et non via CDN)
• HTML / Sass - balisage et styles

API et services externes

Le point clé de ce site est un contenu en rotation à 360°. Nous avons photographié le bureau avec l'appareil « THETA SC2 » de RICOH.

Voici la photo originale prise.

L'affichage à 360° repose sur la bibliothèque Pannellum. Il suffit de définir l'image capturée pour permettre une visualisation à 360° complète.

Afin de pouvoir personnaliser le rendu, nous avons téléchargé la bibliothèque elle-même plutôt que d'utiliser un CDN.

Personnalisation

Un marqueur « i » est placé sur les produits présentés ; lorsque la souris survole ce marqueur, le nom du produit s'affiche dans une bulle.

Un clic affiche une fenêtre modale de présentation du produit, avec un lien vers le lien d'affiliation Amazon. Sur le plan du bureau en bas à droite, une étoile indique l'emplacement de chaque produit.

Présentations produits sans complaisance, accompagnées de l'avis honnête du président !!

Vous pouvez également basculer vers une vue où la lumière de la pièce est éteinte grâce à l'interrupteur en haut à gauche, ou cliquer sur la flèche pour vous rendre au bureau du président !

Les produits sont gérés dans une feuille de calcul plutôt que dans un CMS, afin de faciliter leur édition et leur mise à jour.

La raison en est simple :

« Les clients préfèrent une exploitation légère, non ? Essaie de connecter ça avec une feuille de calcul ! »

Les données de la feuille de calcul sont récupérées via fetch puis injectées dans la modale... Une fois que ça a fonctionné, eh bien...

« Il est lent, ce site, hein~ »

…………

L'API a été utilisée à partir de la source de Custom Hotspot. La référence affiche à l'origine simplement un texte au survol d'un marqueur placé à un endroit précis, mais nous avons ajouté plusieurs éléments originaux, comme l'ouverture de fenêtres modales et le changement de vues.

Au final, c'est terminé 🎊
Quand le site a été enfin prêt, j'étais tellement content que je n'arrêtais pas de le parcourir en boucle !

Amazon Associates

Le programme d'affiliation de produits Amazon, bien connu de tous.

La procédure est la suivante :

• Le contenu du site doit être récent (généralement mis à jour dans les 60 derniers jours, et le site doit montrer qu'il est géré activement).
• Le site doit compter au moins 10 articles ou contenus.
• Une fois que vous pouvez publier des liens vers des produits, ajoutez la mention d'utilisation du programme Amazon Associates sur la page de politique de confidentialité.
• Trois ventes doivent être réalisées dans les 180 jours suivant l'inscription (les comptes identiques ou appartenant à des membres de la même famille ne sont pas acceptés).
• L'URL saisie doit être correcte et le site doit être accessible.

Etc.

Une fois que trois ventes ont été réalisées dans les 180 jours, la demande est examinée. Si elle est approuvée, vous pourrez percevoir des commissions via Amazon Associates.

Ils ne communiquent pas leurs critères d'évaluation, donc poser la question ne sert à rien. Apparemment, le processus d'approbation est plus strict que chez les autres programmes d'affiliation !

Et j'ai aussi réussi à faire valider mon compte Amazon Associates 🎉
Un site d'affiliation shopping dont les revenus proviennent principalement de ma mère et du président vient donc de voir le jour 💥

Remarque : Ce n'est pas très correct d'acheter par le biais de proches... Désolé, si cela entraîne la suspension de notre compte Amazon Associates. m(_ _;)m

Pour le moment, les ventes avancent à petits pas, mais en regardant le récapitulatif et le taux de conversion, c'est plutôt intéressant !

La prochaine mission @2024

Comme j'ai laissé le site de côté un moment, mon emploi du temps s'est libéré. Et c'est là que la prochaine mission est arrivée...

Cahier des charges

• L'indexation des pages n'est-elle pas un peu faible ?
• Et si on ajoutait aussi un espace de bureaux ?
• Et si on en profitait pour migrer vers Next.js ?

Encore une demande impossible !

Pile technique

Nous avons placé les fichiers js et css de Pannellum dans le dossier public pour les utiliser, mais est-ce que l'import via npm est devenu la norme ?
Il semble qu'une bibliothèque pour Next.js soit sortie récemment, ça aurait rendu l'implémentation bien plus simple..

Tout en tenant compte de l'accessibilité web, j'ai également fait en sorte que le site puisse être utilisé au clavier.

Pour que la modale soit indexée par le SEO de Google, j'ai ajouté le paramètre /item/{num} et implémenté le tout avec les Parallel Routes de Next.js, afin qu'elle soit comptabilisée comme une page à part entière.

Le passage de CSR à ISR devrait aussi améliorer le SEO, non ?

Les ordres continuent

Cahier des charges

• Désolé, on s'est fait réprimander pour des raisons de sécurité, alors on a retiré l'espace de bureau ! (Terminé : j'ai pourtant pris la peine de l'ajouter, mais je l'ai marqué 🈲.)
• Ça pèse vraiment trop lourd... Le rendu déconne, non ? (Presque terminé)
• Puisqu'on a un LLM, on pourrait automatiser un truc, non ? On pourrait aussi intégrer un concept totalement différent, ça serait cool ! (Où on en est : ça veut dire quoi ?)
• Ajoute des produits, par exemple...

Après plusieurs mises à jour discrètes, le site d'affiliation expérimental est devenu Liberogic office green !

J'aime particulièrement l'animation de confettis à l'ouverture, qui rappelle une petite boutique de quartier, ainsi que la fenêtre modale avec l'illustration du président ! Ce sont de petites améliorations que j'ajoute parfois pendant mes moments libres en me disant « Ce serait amusant d'avoir ça ! ». Je pense que le site continuera d'évoluer !

Bilan ?

Au début, lorsque nous l'avons développé en Vanilla JS, nous avons pu l'implémenter assez facilement par nos propres moyens. Mais à mesure que nous le révisions, l'imbrication des fonctions est devenue plus complexe. Si l'IA avait été aussi avancée qu'aujourd'hui lors de la refonte en Next.js, cela nous aurait peut-être facilité la tâche, mais en contrepartie, nous avons pu accumuler davantage de savoir-faire, et je me demande si nous sommes aujourd'hui capables de « utiliser l'IA en en comprenant le fonctionnement ».

Personnellement, c'est un site que j'apprécie beaucoup, mais qu'en pensez-vous ??

N'hésitez pas à faire un tour et à visiter notre bureau virtuel !