Comment alimenter la liste de compatibilités sur le site?

Salut à tous,

La page Intégrations du site permet aux nouveaux arrivants de savoir quels appareils sont compatibles Gladys.

Cette liste est alimentée par vous, la communauté Gladys via une spreadsheet en ligne !

Pour l’instant, cette page n’est pas du tout exhaustive, mais grâce à vous cela peut changer :slight_smile:

Comment alimenter la liste de compatibilités du site ?

  1. Rejoindre la liste Airtable via ce lien qui permet de devenir contributeur sur ce document partagé.

  1. Parcourez la liste, et comparez avec le matériel que vous avez chez vous et qui marche avec Gladys. Si il manque des appareils, c’est le moment de les ajouter à la liste !

  2. Pour ajouter un appareil, c’est très simple.

Cliquez sur « + » en bas de la page pour ajouter une ligne:

Chaque ligne a plusieurs champs, qu’il faut remplir de cette manière :

A la fin de la table, il y une colonne « Valid » qui vous indique si votre ligne est valide ( Est-ce que la description est trop courte? Le titre trop long? )

Le champ « ID de la documentation », correspond à ça:

Il sera utilisé pour créer le lien de redirection vers la doc.

Pour l’image, prenez une image en format paysage, de bonne qualité, si possible l’image sur le site du fabricant pour être le plus propre possible :slight_smile:

Le champ « tags » n’est actuellement pas utilisé, ne vous embêtez pas à le remplir pour l’instant.

Pour le lien d’achat, mettez un lien vers ce qui fait le plus de sens pour vous ( meilleur rapport qualité/prix ). Le projet est partenaire avec domadoo.fr, et amazon.fr, donc si l’article est disponible chez ces vendeurs, c’est mieux, mais ce n’est pas obligatoire ^^ De mon expérience, Domadoo est en général très bien positionné niveau prix, livre très vite, et leur SAV est au top.

Pour nos partenaires, pas besoin de rajouter de tag spéciaux dans l’URL, ils sont rajoutés automatiquement sur le site.

  1. L’onglet « FR » alimente la page de compatibilité sur le site français, et la page « EN » alimente le site en anglais. Pensez à alimenter les deux :wink: Pour la page en anglais, pensez à mettre des liens vers des sites US (amazon.com par exemple, qui est différent de amazon.fr)

Merci à ceux qui prendront le temps d’alimenter ces listes :pray:

Synchroniser le site avec la liste Airtable

La première partie de ce tutoriel est pour un public « tout public », la deuxième partie est plus tech mais n’est pas très compliquée.

Le site gladysassistant.com est un site statique généré par Docusaurus et hébergé sur Cloudflare.

Pour synchroniser le site avec la liste Airtable, j’ai codé un petit helper dans le repo du site ( GitHub - GladysAssistant/v4-website: Gladys Assistant website ) qui permet de synchroniser les deux.

  1. Cloner le repo du site
git clone https://github.com/GladysAssistant/v4-website
cd v4-website
  1. Installer les dépendances

( Présuppose que vous avez Node LTS + Yarn d’installé sur votre machine )

yarn
  1. Créez un « personal access token » sur Airtable

Rendez-vous sur https://airtable.com/create/tokens

Cliquez sur « Create token », et remplissez le formulaire comme ça :

Vous devriez récupérer une clé d’API !

  1. Créer un fichier .env à la racine du repo cloné localement, avec le contenu suivant :
AIRTABLE_API_KEY=VOTRE_CLE_API
  1. Lancez la commande:
npm run load-integrations

Ce script va récupérer via l’API Airtable tout le contenu du spreadsheet, et va télécharger toutes les images.

  1. Voir les changements en local

Pour voir le site français en local :

npm run start-fr

Pour voir le site EN en local :

npm start
  1. Intégrer les changements au site live ?

Si vous voulez que les changements soient intégrés au site de production, soit:

  • Me notifier ici pour que je synchronise les deux moi même
  • Faire une PR avec le tuto ci-dessus :slight_smile:

Des questions / retours ?

Merci à tous ceux qui feront l’effort d’alimenter cette liste.

N’hésitez pas si vous avez des questions.

Si vous pensez que cette page/ce process pourrait être amélioré, n’hésitez pas non plus, c’est loin d’être un process parfait, et tout est open-source :slight_smile:

2 « J'aime »

Pas de bol, airtable n’est pas accessible… Service unavailable :confused:

Pas de chance, ils sont plutôt stable normalement :stuck_out_tongue:

C’est revenu en 20 minutes !

@pierre-gilles je viens de faire la manipulation de mon côté, ayant ajouté 2 devices.

Malheureusement j’obtiens beaucoup trop de différences qui n’ont rien à voir avec mes changements :

  • des devices dans un ordre différent
  • des devices non présent dans airtable
  • des devices qui ne sont pas « les miens » (v4-website pas encore up-to-date)
  • une image « bmp » pour un des devices (corrigé dans airtable)
  • des devices dans une seule des langues
  • des doublons (title en case sensitive)

Je viens de faire cette PR pour trier les devices par title (et trim les libellés / remove double spaces). Ainsi on y verra plus clair lors de la génération des listes depuis airtable.

Pour la suite :

  • je ferais une autre PR afin de générer les devices manquants
  • j’ajouterai certainement des alertes si les devices ne sont pas dans les 2 langues.
  • mettre un check sur l’extension de l’image (n’autoriser que png ou jpg)
2 « J'aime »

Merci pour la PR @AlexTrovato ! :pray:

Effectivement, il y a eu des changements sur Airtable qui ne sont pas juste les tiens (ce post doit y être pour quelque chose!), quand tu synchronise avec Airtable ça synchronise tout donc c’est pas juste tes ajouts.

ah bien vu, il faudrait peut-être une validation là dessus en plus. Je pensais que Airtable faisait une conversion systématiquement vers jpeg (ils font déjà du resize par exemple).

+1

Pour l’instant ça donnait ça du coup l’affichage:

J’ai fais quelques ajustements dans le CSS pour que ça soit mieux visuellement :

  • Image toujours à la même taille
  • Card toujours à la même taille.

Je pense qu’on pourrait revoir certaines des descriptions qui sont soient trop longue et redondante avec le titre, soit trop courte.

Pour les URLs, il y a beaucoup d’URL dans le document qui sont en 404.

Je pense qu’on pourrait automatiser la détection des 404 (à voir selon les sites, certains sites genre Amazon bloquent les crawler automatique).

J’ai fais une PR avec ta PR + les améliorations de style :

Je vais peut-être faire une petite passe sur les 404 avant de merge, parce que là le premier device de la liste est en 404, ça fait pas dingue :stuck_out_tongue:

1 « J'aime »

Je me suis amusé avec puppeteer à valider les URLs automatiquement

J’ai pris puppeteer pour pas se faire détecter comme un scrapper par ces sites de e-commerce qui sont en général bien protégé:

Pour l’instant ça marche bien, par contre ça prend un peu de temps car j’attend 500ms entre chaque URL pour pas aller trop vite:

1 « J'aime »

J’ai bien avancé !

  • Le filtrage des URLs « mortes » fonctionne bien. J’ai lancé le script et cleané pas mal de produits. Il faut maintenant les mettre à jour dans Airtable avec un lien valide. A voir maintenant si on pourrait ajouter une colonne dans Airtable ou le script écrirait « Valid/Invalid » + une raison pour qu’on puisse aller voir les rows qui posent soucis.
  • J’ai rajouté en haut de la page le lien vers ce tutoriel
  • J’ai écris la version anglaise de ce tutoriel sur le forum en anglais: How to feed the compatibility list on the site? - Tutorials - Gladys Community (EN)

Version démo buildée à cette adresse: https://atrovato-sort-and-clean-inte.v4-website.pages.dev/

Maintenant, il va falloir rajouter un paquet de produits car la liste fait triste mine :smiley: Je vais faire un post plus global pour inciter les gens à contribuer.

Je viens de tester

Sur mobile c’est bizarre il manque des trucs je penses ( titre ? Description ?)

Les images sont trop grosses

@VonOx Euh je confirme il y a un petit bug avec le dernier build, je regarde ça :+1:

C’est en page d’accueil, sur les intégrations c’est ok ( titre description)

J’ai compris, en fait le component « Image » que j’utilise se comporte différemment en environnement local (dev) et en version build (prod), donc ça fait n’importe quoi sur le build CF, alors qu’en local ça marchait nickel. Je corrige

C’est corrigé !

Page FR: Intégrations | Gladys Assistant
Page EN: Integrations | Gladys Assistant

Désolé j’ai pas de pc que du mobile pour test.

Le padding/margin est trop important

Je vais le désactiver sur mobile, sur PC j’avais mis une taille fix de cards pour que l’alignement soit toujours le même quel que soit la taille des descriptions, mais sur mobile ça fait pas sens c’est vrai

Moi je trouve que les images sont trop « hautes », et du coup elles sont trop coupées…
Mais ça dépend de l’image.
Peut-être qu’avec un peu de CSS magique on peut faire mieux… peut-être

A gauche avant, à droite après

1 « J'aime »

T’es sur quelle taille d’écran ?

Effectivement, en étant à la limite du breakpoint mobile, ça fait un peu vertical sur certaines photos:

Après, je trouve que ça rend bien pour 80% des images même à cette taille d’écran :

Je pense qu’il faudrait plutôt recommander un certain ratio d’images, même avec de la magie CSS on fera pas de miracle :stuck_out_tongue:

19" en 2560 x 1440.

Pour faire la capture, j’ai réduit la tailler de mes fenêtres, mais même en plein écran, je trouve que le nouvel affichage des images les tronque trop.

1 « J'aime »

Par contre, là ou c’est vraiment moche actuellement, c’est quand on vient de passer le breakpoint mobile (à mon avis sur certaines tablettes large ça doit faire ça):

Là pour le coup c’est degeu

Je viens de merger la PR de @AlexTrovato + mes corrections pour améliorer l’affichage.

J’en ai profité pour synchroniser avec Airtable avec les dernières modifications.

C’est live sur le site!