¿Cómo alimentar la lista de compatibilidades en el sitio?

Hola a todos,

La página Integraciones del sitio permite a los recién llegados saber qué dispositivos son compatibles con Gladys.

Esta lista está alimentada por ustedes, la comunidad Gladys, a través de una hoja de cálculo en línea.

Por el momento, esta página no es en absoluto exhaustiva, pero gracias a ustedes esto puede cambiar :slight_smile:

¿Cómo alimentar la lista de compatibilidades del sitio?

  1. Únete a la lista de Airtable a través de este enlace que permite convertirse en contribuidor de este documento compartido.

  1. Recorre la lista y compárala con el material que tienes en casa y que funciona con Gladys. Si faltan dispositivos, ¡es el momento de añadirlos a la lista!

  2. Para añadir un dispositivo, es muy sencillo.

Haz clic en « + » en la parte inferior de la página para añadir una fila:

Cada fila tiene varios campos que deben rellenarse de la siguiente manera:

Al final de la tabla, hay una columna « Valid » que te indica si tu fila es válida (¿Es la descripción demasiado corta? ¿El título demasiado largo?)

El campo « ID de la documentación » corresponde a esto:

Se utilizará para crear el enlace de redirección a la documentación.

Para la imagen, toma una imagen en formato paisaje, de buena calidad, si es posible la imagen del sitio del fabricante para que sea lo más limpia posible :slight_smile:

El campo « tags » actualmente no se utiliza, no te molestes en rellenarlo por el momento.

Para el enlace de compra, pon un enlace a lo que tenga más sentido para ti (mejor relación calidad/precio). El proyecto es socio de domadoo.fr y amazon.fr, por lo que si el artículo está disponible en estos vendedores, es mejor, pero no es obligatorio ^^ De mi experiencia, Domadoo suele estar muy bien posicionado en cuanto a precio, entrega muy rápido y su servicio de atención al cliente es excelente.

Para nuestros socios, no es necesario añadir etiquetas especiales en la URL, se añaden automáticamente en el sitio.

  1. La pestaña « FR » alimenta la página de compatibilidad en el sitio francés, y la página « EN » alimenta el sitio en inglés. Asegúrate de alimentar las dos :wink: Para la página en inglés, recuerda poner enlaces a sitios estadounidenses (por ejemplo, amazon.com, que es diferente de amazon.fr)

Gracias a aquellos que tomen el tiempo de alimentar estas listas :pray:

Sincronizar el sitio con la lista de Airtable

La primera parte de este tutorial es para un público « general », la segunda parte es más técnica pero no es muy complicada.

El sitio gladysassistant.com es un sitio estático generado por Docusaurus y alojado en Cloudflare.

Para sincronizar el sitio con la lista de Airtable, he codificado un pequeño helper en el repositorio del sitio (GitHub - GladysAssistant/v4-website: Gladys Assistant website · GitHub) que permite sincronizar los dos.

  1. Clonar el repositorio del sitio
git clone https://github.com/GladysAssistant/v4-website
cd v4-website
  1. Instalar las dependencias

(Se asume que tienes Node LTS + Yarn instalado en tu máquina)

yarn
  1. Crear un « personal access token » en Airtable

Ve a https://airtable.com/create/tokens

Haz clic en « Create token » y rellena el formulario de la siguiente manera:

Deberías obtener una clave de API.

  1. Crear un archivo .env en la raíz del repositorio clonado localmente, con el siguiente contenido:
AIRTABLE_API_KEY=TU_CLAVE_API
  1. Ejecuta el comando:
npm run load-integrations

Este script recuperará a través de la API de Airtable todo el contenido de la hoja de cálculo y descargará todas las imágenes.

  1. Ver los cambios localmente

Para ver el sitio francés localmente:

npm run start-fr

Para ver el sitio EN localmente:

npm start
  1. Integrar los cambios en el sitio en vivo?

Si quieres que los cambios se integren en el sitio de producción, entonces:

  • Notifícame aquí para que yo sincronice los dos
  • Hacer una PR con el tutorial de arriba :slight_smile:

¿Preguntas / comentarios?

Gracias a todos los que se tomen el tiempo de alimentar esta lista.

No dudes en preguntar si tienes alguna pregunta.

Si crees que esta página/proceso podría mejorarse, no dudes en hacerlo, está lejos de ser un proceso perfecto y todo es de código abierto :slight_smile:

Qué mala suerte, airtable no está accesible… Servicio no disponible :confused:

Qué mala suerte, normalmente son bastante estables :stuck_out_tongue:

¡Se recuperó en 20 minutos!

@pierre-gilles acabo de hacer la manipulación por mi parte, habiendo añadido 2 dispositivos.

Desafortunadamente, obtengo demasiadas diferencias que no tienen nada que ver con mis cambios:

  • dispositivos en un orden diferente
  • dispositivos no presentes en airtable
  • dispositivos que no son « míos » (v4-website aún no actualizado)
  • una imagen « bmp » para uno de los dispositivos (corregido en airtable)
  • dispositivos en un solo idioma
  • duplicados (título en mayúsculas/minúsculas)

Acabo de hacer este PR para ordenar los dispositivos por título (y recortar las etiquetas / eliminar espacios dobles). Así tendremos más claridad al generar las listas desde airtable.

Para seguir:

  • haré otro PR para generar los dispositivos faltantes
  • probablemente añadiré alertas si los dispositivos no están en los 2 idiomas.
  • poner un check en la extensión de la imagen (solo permitir png o jpg)

¡Gracias por la PR @AlexTrovato! :pray:

Efectivamente, ha habido cambios en Airtable que no son solo los tuyos (¡este post debe tener algo que ver!), cuando sincronizas con Airtable, sincroniza todo, no solo tus añadidos.

hmm, bien visto, quizá habría que añadir una validación al respecto. Pensaba que Airtable hacía una conversión sistemática a jpeg (ya hacen un redimensionamiento, por ejemplo).

+1

Por ahora, el resultado era este en cuanto a la visualización:

He hecho algunos ajustes en el CSS para que se vea mejor:

  • La imagen siempre tiene el mismo tamaño
  • La tarjeta siempre tiene el mismo tamaño.

Creo que podríamos revisar algunas de las descripciones que son demasiado largas y redundantes con el título, o demasiado cortas.

En cuanto a las URLs, hay muchas URLs en el documento que están en 404.

Creo que podríamos automatizar la detección de los 404 (dependiendo de los sitios, algunos sitios como Amazon bloquean los crawlers automáticos).

He hecho una PR con tu PR + las mejoras de estilo:

Quizá haga una pequeña revisión de los 404 antes de hacer el merge, porque ahora mismo el primer dispositivo de la lista está en 404, no mola mucho :stuck_out_tongue:

Me he divertido con puppeteer para validar automáticamente las URLs

Usé puppeteer para no ser detectado como un scraper por estos sitios de comercio electrónico que suelen estar bien protegidos:

Por ahora funciona bien, aunque lleva un poco de tiempo porque espero 500 ms entre cada URL para no ir demasiado rápido:

¡He avanzado mucho!

  • El filtrado de URLs « muertas » funciona bien. He lanzado el script y he limpiado muchos productos. Ahora hay que actualizarlos en Airtable con un enlace válido. Ahora veremos si podríamos añadir una columna en Airtable donde el script escribiría « Válido/Inválido » + una razón para que podamos ver las filas que presentan problemas.
  • He añadido un enlace a este tutorial en la parte superior de la página
  • He escrito la versión en inglés de este tutorial en el foro en inglés: https://en-community.gladysassistant.com/t/how-to-feed-the-compatibility-list-on-the-site/77

Versión de demostración construida en esta dirección: https://atrovato-sort-and-clean-inte.v4-website.pages.dev/

Ahora, habrá que añadir un montón de productos porque la lista da pena :smiley: Voy a hacer una publicación más global para animar a la gente a contribuir.

Acabo de probar

En móvil es raro, falta algo, creo (¿título? ¿Descripción?)

Las imágenes son demasiado grandes

@VonOx Sí, confirmo que hay un pequeño error con el último build, lo estoy revisando :+1:

Está en la página de inicio, en las integraciones está bien (título descripción)

He entendido, en realidad el componente « Image » que estoy usando se comporta de manera diferente en el entorno local (dev) y en la versión compilada (prod), por lo que hace cosas raras en el build CF, mientras que en local funcionaba perfectamente. Lo voy a corregir

¡Está corregido!

Página FR: Intégrations | Gladys Assistant
Página EN: Integrations | Gladys Assistant

Lo siento, no tengo una computadora, solo móvil para probar.

El relleno/margen es demasiado grande

Voy a desactivarlo en móviles, en PC había puesto un tamaño fijo de tarjetas para que el alineamiento siempre sea el mismo independientemente del tamaño de las descripciones, pero en móviles no tiene sentido, es cierto

Yo creo que las imágenes son demasiado « altas », y por eso están demasiado cortadas…
Pero depende de la imagen.
Quizás con un poco de CSS mágico podamos hacerlo mejor… quizás

A la izquierda antes, a la derecha después

¿En qué tamaño de pantalla estás?

Efectivamente, al estar en el límite del punto de interrupción móvil, algunas fotos quedan un poco verticales:

Después, creo que queda bien para el 80% de las imágenes, incluso en este tamaño de pantalla:

Creo que sería mejor recomendar un cierto ratio de imágenes, incluso con magia CSS no se pueden hacer milagros :stuck_out_tongue:

19" en 2560 x 1440.

Para hacer la captura, reduje el tamaño de mis ventanas, pero incluso en pantalla completa, me parece que la nueva visualización de las imágenes las recorta demasiado.

Pero donde realmente está feo actualmente es cuando acabamos de pasar el punto de interrupción móvil (en mi opinión, en algunas tabletas grandes debe pasar esto):

Ahí, la verdad es que está asqueroso

Acabo de fusionar la PR de @AlexTrovato + mis correcciones para mejorar la visualización.

Aproveché para sincronizar con Airtable con los últimos cambios.

¡Ya está en vivo en el sitio web!

https://gladysassistant.com/fr/integrations/