Pragmatische Entwicklung-2: Frontend / Sudo Null IT-News

Mehr Cafés an einem TagMehr Cafés an einem Tag

Fortsetzung der Entwicklung eines einfachen Projekts über Spezialitätenkaffeehäuser in Zypern. Im ersten Teil habe ich über die Microservice-API gesprochen, jetzt werde ich über die Front-End-Site und im letzten Artikel über den Telegram-Bot sprechen.

Projektnummer offen, willkommen bei Pull-Anfragen. Die Website-Adresse befindet sich am Ende des Artikels.

Die Architektur

Es gibt nur 2 Seiten auf der Website – eine Karte mit Coffeeshop-Markierungen und About. Eigentlich braucht man zum Start nicht mehr, aber es gibt Telegram und Mail für Feedback.

Die Implementierung ist modular Vanilla JavaScript und Google Maps in der immer kostenlosen Stufe, die immer durch Mapbox, Mapquest usw. ersetzt werden kann.

Die Karte und Daten aus der REST-API werden gleichzeitig geladen, wenn sie fertig sind, werden Markierungen aus dem GeoJson-Datenarray zur Karte hinzugefügt, die in Clustern gesammelt werden. Durch Klicken auf die Markierung wird eine Anfrage an die Google Places-API gesendet, um eine Firmen-ID (Säure) und eine kleine Beschreibung (Infofenster) öffnet sich mit einem Link zur Organisationskarte in einem großen Google Maps mit der Möglichkeit, eine Route zu erstellen, Bewertungen anzuzeigen usw. Zur Bildung dieser Verbindung wird verwendet Säure.

Wenn Google Maps nicht verfügbar ist, wird ein Stub mit einer Fehlermeldung angezeigt, die Seitennavigation bleibt jedoch funktionsfähig.

Alles ganz trivial und dank asynchroner Ausführung schnell.

Um das Projekt zu erstellen, verwende ich Vit – es ist auch sehr schnell und einfach.

Für die Analyse und das „Verstehen“ der Seitenbesucher wird statt Google Tag Manager Google Analytics mit einer direkten Verbindung verwendet (also etwas weniger Traffic). In der Analyse werden die Öffnungen des Infofensters als Zielerreichung zur Berechnung der Conversion der Seite erfasst. Zum Verbinden verwendet vite-Plugin-Radar.

Zwei weitere Plugins vite-plugin-html-purgecss und vite-plugin-minify – ermöglichen es Ihnen, den gesamten nicht verwendeten Code aus der endgültigen Assemblierung zu entfernen. Es dauerte 15 Minuten, sie aufzubauen – also ok.

Aufbau

Allgemeine Parameter und geheime Namen – in .env, lokale Überschreibungen – in .env.local

Überwachung

Derselbe Postenin .env reicht es aus, einen leeren Wert VITE_SENTRY_DSN (aus Gründen der Übersichtlichkeit) anzugeben und den tatsächlichen Wert in ein Geheimnis zu schreiben.

Einsetzen

Gleiche Plattform Fliegen.io mit von Firecracker verwalteten microVMs. Hier ist alles viel einfacher als das Hosten der Microservice-API und ein Dockerfile von zwei Zeilen reicht aus:

VON pierrezemb/gostatic KOPIE ./dist/ /srv/http/

CI/CD

Hier ist es etwas komplizierter: Erstens Github-Aktion baut den Build mit Vite zusammen, und dann erstellt flyctl einen Container daraus und stellt ihn auf der Produktions-VM bereit. In diesem Fall werden alle Geheimnisse in der GitHub-Produktionsumgebung gespeichert.

In diesem Stadium funktioniert die Website, wird in einer Produktionsumgebung gehostet und steht allen Benutzern zur Verfügung. Tatsächlich ist das Projekt abgeschlossen 🙂

Frontend-RepositoryWebseite https://specialtycoffee.cy/

Im dritten Teil werde ich über die Erstellung eines Telegram-Bots sprechen.

Similar Posts

Leave a Reply

Your email address will not be published.