Umbau der Webapp

[marians]

Ziele

Die Webapp soll deutlich benutzer*innenfreundlicher werden! Einige Dinge, die ich gerne erreichen möchte:

• Die Anwendung soll sich schnell laden.
• Jeder soll seine Site schnell und einfach finden und wiederfinden können.
• Die Anwendung soll auch auf dem Smartphone bedienbar sein.
• Prüfkriterien und Empfehlungen für Verbesserungen sollen verständlich und nachvollziehbar sein.

Entwurf

Hier gibt es einen Prototypen:

https://xd.adobe.com/view/a929adc4-e8b2-4c29-54f0-479fd9cf699b-df18/

Und hier noch mal zur Ansicht:

TODO

Die Umsetzung soll in überschaubaren Schritten erfolgen. Hier eine mögliche Reihenfolge:

• Umsetzung einer Navigationsstruktur von Liste (etwa wie 2 Suchergebnis, noch ohne Suche) zur Detailseite (3 Website Detailseite) - Siehe Inhalte auf zwei Seitentypen aufteilen green-spider-webapp#11
• Suchfunktion und Startseiten-Inhalte - Siehe Suche auf Startseite green-spider-webapp#13
• Umbau des Datenexports:
  • Export einer JSON-Datei für die Liste (Startseite) bzw. Suche.
  • Export einer JSON-Datei für jede Site mit allen Details.
• Favoriten-Funktion mit Auflistung von Favoriten auf der Startseite
• Erstellung der Textinhalte zu den Kriterien (siehe 4 Empfehlung Detailseite) - siehe Erläuterungstexte für Prüfkriterien #86
• Verlinkung von 3 Website Detailseite zu 4 Empfehlung Detailseite

[marians]

netzbegruenung/green-spider-webapp#11 ist gemerged. Damit ändert sich:

• Die Startseite zeigt nur wenige Details je Site, weitere Details gibt es auf der Detailseite.
• Um das umzusetzen, wird nun React Router eingesetzt. Damit die Anwendung auch über beliebige Detailseiten-URLs aufgerufen werden kann, kann die Site nicht mehr über Github Pages gehostet werden. Sie läuft nun, immer noch als statische Site, aber mit entsprechener Server-Konfiguration, auf Hetzner Cloud.
• Screenshots werden direkt auf der Detailseite angezeigt.
• Der Punktestand der Site wird in Bezug zu anderen Sites gesetzt (alle Sites, alle des gleichen Gliederungs-Typs.

[marians]

netzbegruenung/green-spider-webapp#13 ist gemerged. Damit verschwindet die vollständige Liste aller Sites von der Startseite und wird durch eine Suche ersetzt.

[marians]

netzbegruenung/green-spider-webapp#15 ist gemerged. Damit ist die Veröffentlichung der Spider-Ergebnisse nicht mehr von einem statischen Export abhängig. Stattdessen gibt es nun eine API, die Daten live aus Google Cloud Datastore liest. Der Webserver (NGINX) reicht die Anfragen als Reverse Proxy durch und cached die Ergebnisse für eine Weile.

Das Ladeverhalten ist grob so:

• Beim Aufruf der Anwendung wird eine Liste aller Sites mit Metadaten geladen, die für die Suche und die Listenansicht (Suchergebnis) benötigt werden.
• Beim Aufruf einer Detailseite werden alle Details zur Site sowie die Screenshot-Metadaten dazu abgerufen.
• Diese Daten werden gecached, bis es neuere Daten gibt, was regelmäßig überprüft wird. Gibt es neuere Daten, werden diese automatisch geladen und die aktuelle Ansicht angepasst.