Wie kann ich die Kompatibilitätsliste auf der Website aktualisieren?

Hallo zusammen,

Die Integrationen-Seite der Website hilft neuen Nutzern zu verstehen, welche Geräte mit Gladys kompatibel sind.

Diese Liste wird von euch, der Gladys-Community, über eine Online-Tabelle gepflegt!

Bisher ist diese Seite noch nicht vollständig, aber mit eurer Hilfe kann sich das ändern :slight_smile:

Wie kann ich die Kompatibilitätsliste der Website aktualisieren?

  1. Treten Sie der Airtable-Liste über diesen Link bei, um zum Beitragenden dieses geteilten Dokuments zu werden.

  1. Durchsuchen Sie die Liste und vergleichen Sie sie mit den Geräten, die Sie zu Hause haben und die mit Gladys funktionieren. Wenn Geräte fehlen, ist jetzt der richtige Zeitpunkt, sie zur Liste hinzuzufügen!

  2. Ein Gerät hinzuzufügen ist sehr einfach.

Klicken Sie auf « + » unten auf der Seite, um eine Zeile hinzuzufügen:

Jede Zeile hat mehrere Felder, die wie folgt ausgefüllt werden müssen:

Am Ende der Tabelle gibt es eine Spalte « Valid », die Ihnen anzeigt, ob Ihre Zeile gültig ist (Ist die Beschreibung zu kurz? Ist der Titel zu lang?)

Das Feld « Dokumentations-ID » entspricht Folgendem:

Es wird verwendet, um den Weiterleitungslink zur Dokumentation zu erstellen.

Für das Bild nehmen Sie ein Bild im Querformat, in guter Qualität, wenn möglich das Bild auf der Website des Herstellers, um es so sauber wie möglich zu halten :slight_smile:

Das Feld « Tags » wird derzeit nicht verwendet, Sie müssen sich also nicht damit beschäftigen.

Für den Kauf-Link fügen Sie einen Link zu dem hinzu, was für Sie am meisten Sinn ergibt (bestes Preis-Leistungs-Verhältnis). Das Projekt ist Partner von domadoo.fr und amazon.fr, daher ist es besser, wenn der Artikel bei diesen Händlern verfügbar ist, aber das ist nicht zwingend erforderlich ^^ Aus meiner Erfahrung ist Domadoo in der Regel sehr gut im Preis, liefert sehr schnell und ihr Kundenservice ist Spitze.

Für unsere Partner müssen keine speziellen Tags in der URL hinzugefügt werden, sie werden automatisch auf der Website hinzugefügt.

  1. Das Register « FR » füttert die Kompatibilitätsseite auf der französischen Website, und die Seite « EN » füttert die englische Website. Denken Sie daran, beide zu füttern :wink: Für die englische Seite denken Sie daran, Links zu US-Websites (z. B. amazon.com, das sich von amazon.fr unterscheidet) hinzuzufügen.

Vielen Dank an alle, die sich die Zeit nehmen, diese Listen zu aktualisieren :pray:

Website mit der Airtable-Liste synchronisieren

Der erste Teil dieses Tutorials richtet sich an ein « All-Public-Publikum », der zweite Teil ist etwas technischer, aber nicht sehr kompliziert.

Die Website gladysassistant.com ist eine statische Website, die von Docusaurus generiert und auf Cloudflare gehostet wird.

Um die Website mit der Airtable-Liste zu synchronisieren, habe ich einen kleinen Helper im Repository der Website (GitHub - GladysAssistant/v4-website: Gladys Assistant website · GitHub) codiert, der die Synchronisation der beiden ermöglicht.

  1. Klonen Sie das Repository der Website
git clone https://github.com/GladysAssistant/v4-website
cd v4-website
  1. Installieren Sie die Abhängigkeiten

(Setzt voraus, dass Sie Node LTS + Yarn auf Ihrem Computer installiert haben)

yarn
  1. Erstellen Sie einen « personal access token » auf Airtable

Gehen Sie zu https://airtable.com/create/tokens

Klicken Sie auf « Create token » und füllen Sie das Formular wie folgt aus:

Sie sollten einen API-Schlüssel erhalten haben!

  1. Erstellen Sie eine Datei .env im Stammverzeichnis des lokal geklonten Repositorys mit folgendem Inhalt:
AIRTABLE_API_KEY=IHR_API_SCHLÜSSEL
  1. Führen Sie den Befehl aus:
npm run load-integrations

Dieses Skript wird über die Airtable-API den gesamten Inhalt der Tabelle abrufen und alle Bilder herunterladen.

  1. Änderungen lokal anzeigen

Um die französische Website lokal anzuzeigen:

npm run start-fr

Um die englische Website lokal anzuzeigen:

npm start
  1. Änderungen auf die Live-Website integrieren?

Wenn Sie möchten, dass die Änderungen in die Produktionswebsite integriert werden, dann:

  • Benachrichtigen Sie mich hier, damit ich die beiden selbst synchronisiere
  • Machen Sie einen PR mit dem obigen Tutorial :slight_smile:

Fragen / Feedback?

Vielen Dank an alle, die sich die Mühe machen, diese Liste zu aktualisieren.

Zögern Sie nicht, wenn Sie Fragen haben.

Wenn Sie denken, dass diese Seite/dieser Prozess verbessert werden könnte, zögern Sie nicht, denn es ist weit davon entfernt, ein perfekter Prozess zu sein, und alles ist Open-Source :slight_smile:

Schade, Airtable ist nicht erreichbar… Service nicht verfügbar :confused:

Schade, normalerweise sind sie eigentlich stabil :stuck_out_tongue:

Es war nach 20 Minuten wieder da!

@pierre-gilles ich habe gerade die Manipulation auf meiner Seite durchgeführt, wobei ich 2 Geräte hinzugefügt habe.

Leider erhalte ich viel zu viele Unterschiede, die nichts mit meinen Änderungen zu tun haben:

  • Geräte in einer anderen Reihenfolge
  • Geräte, die nicht in Airtable vorhanden sind
  • Geräte, die nicht „meine“ sind (v4-website noch nicht aktualisiert)
  • ein „bmp“-Bild für eines der Geräte (in Airtable korrigiert)
  • Geräte nur in einer der Sprachen
  • Duplikate (Titel case-sensitive)

Ich habe gerade diesen PR erstellt, um die Geräte nach Titel zu sortieren (und die Beschriftungen zu trimmen / doppelte Leerzeichen zu entfernen). So wird es bei der Generierung der Listen aus Airtable übersichtlicher.

Für die Zukunft:

  • ich werde einen weiteren PR erstellen, um die fehlenden Geräte zu generieren
  • ich werde wahrscheinlich Warnungen hinzufügen, wenn die Geräte nicht in beiden Sprachen sind.
  • eine Prüfung auf die Bilddateiendung hinzufügen (nur png oder jpg erlauben)

Danke für den PR @AlexTrovato! :pray:

Tatsächlich gab es Änderungen in Airtable, die nicht nur deine sind (dieser Post könnte dafür verantwortlich sein!), wenn du mit Airtable synchronisierst, wird alles synchronisiert, also nicht nur deine Ergänzungen.

Ah, gut aufgepasst, vielleicht sollten wir hier noch eine Validierung hinzufügen. Ich dachte, Airtable würde automatisch in JPEG umwandeln (sie skalieren bereits z. B. Bilder).

+1

Bisher sah die Anzeige so aus:

Ich habe einige Anpassungen im CSS vorgenommen, damit es optisch besser aussieht:

  • Bild immer in der gleichen Größe
  • Karte immer in der gleichen Größe.

Ich denke, wir könnten einige der Beschreibungen überarbeiten, die entweder zu lang und redundant mit dem Titel sind oder zu kurz.

Bei den URLs gibt es viele URLs im Dokument, die 404 sind.

Ich denke, wir könnten die Erkennung von 404-Fehlern automatisieren (abhängig von den Websites, einige Websites wie Amazon blockieren automatische Crawler).

Ich habe einen PR mit deinem PR + den stilistischen Verbesserungen erstellt:

Ich werde vielleicht noch eine kleine Überprüfung der 404-Fehler vor dem Merge durchführen, denn momentan ist das erste Gerät der Liste ein 404-Fehler, das sieht nicht gut aus :stuck_out_tongue:

Ich habe mich mit Puppeteer beschäftigt, um URLs automatisch zu validieren

Ich habe Puppeteer verwendet, um nicht als Scraper von diesen E-Commerce-Websites erkannt zu werden, die in der Regel gut geschützt sind:

Bisher funktioniert es gut, aber es dauert etwas länger, weil ich 500 ms zwischen jeder URL warte, um nicht zu schnell zu sein:

Ich habe gute Fortschritte gemacht!

  • Die Filterung der „toten“ URLs funktioniert gut. Ich habe das Skript gestartet und viele Produkte bereinigt. Jetzt müssen sie in Airtable mit einem gültigen Link aktualisiert werden. Jetzt müssen wir sehen, ob wir eine Spalte in Airtable hinzufügen können, in der das Skript „Gültig/Ungültig“ + einen Grund schreibt, damit wir die Zeilen, die Probleme bereiten, überprüfen können.
  • Ich habe oben auf der Seite einen Link zu diesem Tutorial hinzugefügt
  • Ich habe die englische Version dieses Tutorials im englischen Forum geschrieben: https://en-community.gladysassistant.com/t/how-to-feed-the-compatibility-list-on-the-site/77

Demo-Version unter dieser Adresse gebaut: https://atrovato-sort-and-clean-inte.v4-website.pages.dev/

Jetzt müssen wir noch eine Menge Produkte hinzufügen, denn die Liste sieht traurig aus :smiley: Ich werde einen umfassenderen Beitrag erstellen, um die Leute zu motivieren, beizutragen.

Ich habe es gerade getestet

Auf dem Handy ist es komisch, es fehlt etwas, denke ich (Titel? Beschreibung?)

Die Bilder sind zu groß

@VonOx Ja, ich bestätige, es gibt einen kleinen Bug mit dem letzten Build, ich schaue mal :+1:

Das ist auf der Startseite, bei den Integrationen ist es okay (Titel, Beschreibung).

Ich habe verstanden, dass sich das von mir verwendete « Image »-Component in der lokalen Umgebung (dev) anders verhält als in der Build-Version (prod). Daher funktioniert es auf dem Build CF nicht, während es lokal einwandfrei lief. Ich korrigiere das.

Das ist korrigiert!

FR-Seite: Intégrations | Gladys Assistant
EN-Seite: Integrations | Gladys Assistant

Entschuldigung, ich habe keinen PC, nur ein Handy zum Testen.

Der Abstand ist zu groß

Ich werde das auf mobilen Geräten deaktivieren. Auf dem PC habe ich eine feste Kartengröße eingestellt, damit die Ausrichtung immer gleich bleibt, unabhängig von der Länge der Beschreibungen. Aber auf mobilen Geräten macht das wirklich keinen Sinn.

Ich finde, die Bilder sind zu „hoch“, und deshalb werden sie zu stark abgeschnitten…
Aber das hängt vom Bild ab.
Vielleicht kann man mit etwas CSS-Zauberei eine bessere Lösung finden… vielleicht

Links vorher, rechts nachher

Auf welchem Bildschirm bist du?

Tatsächlich, wenn man an der Grenze des mobilen Breakpoints ist, wirkt es auf einigen Fotos etwas vertikal:

Aber ich finde, dass es für 80% der Bilder auch bei dieser Bildschirmgröße gut aussieht:

Ich denke, man sollte eher ein bestimmtes Bildverhältnis empfehlen, auch mit CSS-Magie kann man keine Wunder wirken :stuck_out_tongue:

19" mit 2560 x 1440.

Um den Screenshot zu machen, habe ich die Größe meiner Fenster reduziert, aber selbst im Vollbildmodus finde ich, dass die neue Bildschirmanzeige die Bilder zu stark abschneidet.

Aber wo es gerade wirklich hässlich ist, ist, wenn man gerade den mobilen Breakpoint passiert hat (meiner Meinung nach muss das auf einigen großen Tablets so sein):

Da ist es wirklich eklig

Ich habe gerade die PR von @AlexTrovato + meine Korrekturen zur Verbesserung der Anzeige gemerged.

Dabei habe ich die Gelegenheit genutzt, um Airtable mit den letzten Änderungen zu synchronisieren.

Es ist live auf der Website!

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