Die ersten Schritte, die ich auf meiner Reise zur Entwicklung meiner ersten progressiven Web App gemacht habe, waren also noch nicht so schwierig, wie ich es erwartet hatte. Ich finde, wenn ein Projekt ein wenig überwältigend oder neu erscheint, ist es am besten, es Schritt für Schritt anzugehen und nur das zu erreichen, was du an diesem Tag erreichen wolltest. Genau diese Einstellung wird von Marco bei der Entwicklung dieser App kontinuierlich unterstützt.
Da ich es bisher nur gewohnt war, Websites zu erstellen, musste ich meine bisherigen Methoden für dieses neue Projekt anpassen. Normalerweise erstelle ich eine Website, die bereits alle nötigen Funktionen enthält. Zum Beispiel voll integrierte Kontaktformulare und Karten, coole JavaScript-Tricks für interaktive Bewegungen und alle Styling-Elemente durchgängig konsistent. Natürlich wollte ich auch die App genauso bauen, aber durch praktisches Lernen und einige schlaue Anleitungen habe ich gelernt, dass es besser ist, eine erste Version der App zu erstellen und darauf Schicht für Schicht zu bauen.
Der erste Schritt war die Erstellung eines HTML Wrap Ups auf Basis meines Adobe XD Entwurfs. Während dieses Prozesses war ich in der Lage, Probleme der Seitenreihenfolge und CSS Styling-Elemente, die nicht ganz richtig vom Entwurf bis zum Wrap Up übersetzt wurden, zu korrigieren und außerdem neue Seiten hinzuzufügen, die mir vorher nicht aufgefallen waren. Diese Änderungen waren nur möglich, weil ich durch das Wrap Up einige der Funktionen der App testen konnte, insbesondere die Seitenreihenfolge.
Ich habe den Schaltflächen auf jeder Seite a Dummy-Tag hinzugefügt, um die Sequenz physisch durchlaufen zu können. Ich bemerkte, dass ich zu einigen Seiten zurückkehren und zu anderen Seiten navigieren wollte, die einfach noch nicht existierten. Mir wurde schnell klar, dass solche Änderungen nur durch die eigentliche Nutzung der App bemerkbar sind. Die Erstellung eines HTML Wrap Ups ermöglichte es mir, diese Situationen zu erleben, ohne die gesamte App in einer komplexeren Sprache wie Angular erstellen zu müssen.
Letztendlich spart dieser Schritt langfristig Zeit und deckt viele Probleme auf, die du in Zukunft haben könntest. Folge meiner Reise und schau dir an, wie wir mit der Entwicklung der App mit Angular beginnen.