Dart Service: Flattern Webseite

Ausbildung

Das letzte Mal haben wir festgestellt, dass unser Webserver einen Domainnamen erhält und gelernt hat, eine sichere Verbindung mit dem Client herzustellen. Wir haben unserem zukünftigen Benutzer jedoch noch absolut nichts zu zeigen. Obwohl wir bereits die Idee eines Startups teilen und das Erscheinungsdatum des MVP bekannt geben können . Für diese Aufgabe ist eine Informationswebseite geeignet. Schreiben wir es in Dart mit dem FlutterWeb-Framework. Alle unsere Kundenanwendungen des Dienstes werden zu einer Erweiterung dieser speziellen Seite. Wir werden versuchen, die Entwicklung so anpassungsfähig und strukturiert wie möglich durchzuführen, damit Entwicklung und Assemblys für die erforderlichen Plattformen (Web-Android-iOS) zur Routine werden.







Beginnen wir mit der Installation von Flutter:

• Git installieren
• Wir klonen das Repository mit der Beta- Version von Flutter mit dem Befehl

  git clone https://github.com/flutter/flutter.git -b beta

• Um Flatterbefehle über die Befehlszeile auszuführen, müssen Sie den Pfad zu den ausführbaren Dateien im Betriebssystem angeben. Öffnen wir die Betriebssystemvariablen. Dazu geben wir in der Suchleiste "Änderung der Umgebungsvariablen des aktuellen Benutzers" ein.
  
  
  
  
  
  
  
  Wählen Sie im Fenster die Pfadvariable aus und klicken Sie auf Ändern . Erstellen Sie in der sich öffnenden Liste eine neue Zeile mit der Adresse der ausführbaren Dateien von flutter im Dateisystem, z. B. C: \ flutter \ bin
• Installieren Sie die VScode- Erweiterung für Flattern
• Starten Sie VScode neu (damit die neuen Betriebssystemvariablen angewendet werden) und überprüfen Sie im Terminal den Flatterzustand mit dem Befehl
  
  
  
  

  flutter doctor

  
  
  
  
  
  
  Das Wichtigste dabei ist, dass das Flattern in der Beta-Version installiert ist (mit Unterstützung für die Webentwicklung).
• Jetzt aktivieren wir die Webentwicklung mit dem Team
  
  
  
  

  flutter config --enable-web

Erstellen Sie ein neues Projekt und starten Sie das Debuggen

Wir erstellen ein neues Projekt mit einem Team

flutter create < >

Öffnen wir es sofort in VScode mit dem Befehl

code < >

Öffnen Sie die Datei main.dart im Ordner lib und starten Sie das Debuggen mit dem Befehl F5 :







Wenn Sie das Debuggen zum ersten Mal starten, müssen Sie möglicherweise Chrome als Gerät zum Debuggen auswählen:







Löschen Sie den Inhalt der Datei main.dart . Hinzufügen ein leeres Hauptverfahren und die Wurzel - Klasse der Anwendung, die eine zurücke Instanz MaterialApp im build () Methode : Als nächstes erzeugt den folgenden Satz von Projekt Unterordner: Kurz gesagt , den Zweck eines jeden von ihnen beschreiben:

• di ist ein Mechanismus für die Kommunikation zwischen Anwendungskomponenten. Hier werden alle erforderlichen Dienste, Repositorys und Netzwerkclients erstellt und registriert, damit die Anwendung funktioniert. Ich werde die GetIt- Bibliothek verwenden
• Domäne - Datenobjekte. Datenpräsentationsklassen
• res - Farben, Linien, Importe von Pfaden zu Bildern und Schriftarten. Alles, was mit statischen Ressourcen zu tun hat
• Service - Services für die Arbeit mit Daten
• UI - Schnittstelle
• utils - Dienstprogrammklassen

Fügen Sie die erforderlichen Abhängigkeiten in die Datei pubspec.yaml ein:

Vorbereiten der Skalierung von UI-Elementen

Es wird davon ausgegangen, dass sich unsere Seite abhängig von der Bildschirmgröße des Clientgeräts und seiner Position (Hoch- oder Querformat) anpassen sollte.



Beginnen wir mit den Hintergrundbildern. Ihre Vorbereitung geht über den Rahmen des Artikels hinaus, daher lasse ich diese beiden Links hier:

• Pixabay.com - Repository für Inhaltsfotos
• Paint.net - Grafikeditor

Legen Sie die fertigen Bilder in den Ordner / assets / images und fügen Sie diesen Pfad zu den Ressourcen in der Datei pubspec.yaml hinzu:







Ich bevorzuge den Zugriff auf Ressourcen in Form eines Baums mit Parametern. In diesem Fall der Pfad zum Hintergrundbild des Stubs:

images.background(bool isPortrait).stub

Erstellen Sie dazu im Ordner res die Datei images.dart mit den Bildadressklassen :







Um die Benutzeroberfläche und die Schriftgrößen zu skalieren, haben wir die ScreenUtil- Bibliothek hinzugefügt . Seine Funktionalität besteht aus zwei Dingen:

• Registrierung der "Basis" -Bildschirmgröße. Hier müssen Sie die Breite und Höhe des Bildschirms einstellen, für den das Hauptlayout ausgeführt wird, und die Schriftarten skalieren.
• Eine Reihe von Erweiterungen zum Anwenden eines Skalierungsfaktors auf Zahlen (num). Zum Beispiel bedeutet 100.w , dass das Ergebnis dieses Ausdrucks für einen 1920dp-Bildschirm => 100dp und für einen iPhone8-Bildschirm mit einer Breite von 414dp => 100x (414/1920) = 21,6dp ist. Das heißt, fünfmal weniger. Es gibt auch Erweiterungen für Schrifthöhe und -größe.

Erstellen wir eine Datei /utils/screen_util_ext.dart und eine statische Initialisierungsmethode: Fügen Sie







der build () -Methode des Root-Widgets einen Aufruf der Zoom-Initialisierungsmethode hinzu :







Erweitern Sie die Funktionalität der Zoom-Bibliothek um mehrere zusätzliche Erweiterungen in der Datei /utils/screen_util_ext.dart :

Abhängigkeitsspritze

Es ist Zeit, einen Mechanismus zum Erstellen und Registrieren von Anwendungskomponenten mithilfe der GetIt- Bibliothek zu implementieren . Erstellen Sie im Ordner lib / DI / die Datei di_container.dart . Darin schreiben wir eine statische Methode getItInit () und initialisieren eine Instanz des GetIt- Containers . Registrieren wir die erste Komponente - eine Instanz der Images- Klasse :







Fügen Sie den Aufruf der Initialisierungsmethode zu main () hinzu : Der







Zugriff auf die Images- Komponente sieht folgendermaßen aus:







Registrieren Sie auf die gleiche Weise eine Klasse mit Ressourcen mit Zeichenfolgen.

Stichseite

Erstellen Sie nun im UI- Ordner eine stub.dart- Datei mit der StubScreen- Stub- Seitenklasse , erweitern Sie die StatelessWidget- Basisklasse und überschreiben Sie die abstrakte build () -Methode . Unsere Seite ist ein Bild im Hintergrund und zwei Informationsblöcke davor, die je nach Bildschirmausrichtung platziert werden.

Repositories und Service

Um die verbleibende Zeit vor der Veröffentlichung dynamisch anzuzeigen, müssen Sie:

1. Rufen Sie die Einstellungen mit dem Datum des Beginns der Entwicklung und Veröffentlichung vom Server ab
2. Erstellen Sie einen Ereignisstrom für die verbleibende Zeitänderung
3. Kombinieren Sie diese Daten, indem Sie sie zur Anzeige auf der Benutzeroberfläche an den Ausgabestream übergeben

Beschreiben wir Domänenobjekte (POJOs) für diese Daten:











Repositorys zum Empfangen von Einstellungen und Erstellen eines Ereignisstroms:











Dienst für Ereignislogik:







Registrieren Sie diese Komponenten in einem DI-Container:

Verbleibendes Zeit-Widget

Die verbleibende Zeit vor der Veröffentlichung kann in 4 Zahlen dargestellt werden: Tage, Stunden, Minuten, Sekunden. Stellen wir diese Parameter als Aufzählung dar: Fügen







wir den Parametern mithilfe der Erweiterung Funktionen hinzu: Das







Widget zur Anzeige von Zifferblatt, Nummer und Signatur wird animiert. Dazu erweitern wir die StatefulWidget- Klasse . Seine Besonderheit ist, dass das Element (die konstruierte und angezeigte Ansicht) nicht dem Widget selbst entspricht, sondern seinem Zustand ( Zustand ). Der Status ist im Gegensatz zum Widget veränderbar. Das heißt, seine Felder können geändert werden, ohne die Instanz vollständig neu zu erstellen.











Hier muss geklärt werden, was Animation , AnimationController und TickerProviderStateMixin sind... So AnimationController ist ein Wrapper über einen einfachen doppelten Wert Parameter . Der Wert dieses Parameters ändert sich linear im Bereich von 0,0 bis 1,0 (er kann auch in die entgegengesetzte Richtung geändert oder auf 0,0 zurückgesetzt werden). Um diesen Parameter zu ändern, wird jedoch ein spezielles TickerProviderStateMixin- Objekt verwendet. Dies ist ein erforderlicher Parameter für den AnimationController und teilt ihm mit, dass die Grafik-Engine bereit ist, einen neuen Frame zu erstellen. Nachdem AnimationController ein solches Signal empfangen hat, berechnet es, wie viel Zeit vom vorherigen Frame vergangen ist und wie viel der Wert seines Werts geändert werden muss . Animation Objekte abonnieren Sie AnimationControllerund enthalten eine Funktion der Abhängigkeit des Ausgabewerts von der linearen (zeitlichen) Änderung des AnimationController- Werts .



Die Statusinitialisierungsmethode initState () wird beim Erstellen einmal aufgerufen:







Wenn der Status des Widgets zerstört wird, wird die dispose () -Methode aufgerufen :











Das Widget wird durch einen Stapel ( Stack ) dargestellt, in dem der AnimatedBuilder die Nummer und den Maßstab enthält:







Das grafische Grundelement muss noch in Form eines Bogens implementiert werden:







Add 4 Ein solches Widget auf dem Bildschirm ist ein Stub:

Erstellen und freigeben

Vor dem Erstellen der Anwendung müssen Sie den Namen und die Beschreibung der Anwendung in den Dateien ./web/index.html ./web/manifest.json und pubspec.yaml ersetzen .



Beenden Sie das Debuggen und erstellen Sie die Anwendungsversion mit dem Befehl

flutter build web

Die fertige Anwendung befindet sich im Verzeichnis ./build/web/ . Bitte beachten Sie, dass die Dateien .last_build_id und main.dart.js.map Servicedateien sind und gelöscht werden können.

Platzieren wir die Anwendung auf dem Server, der im vorherigen Artikel vorbereitet wurde. Kopieren Sie dazu einfach den Inhalt des Verzeichnisses ./build/web/ nach / public / auf unserem Server:

scp -r ./* root@91.230.60.120:/public/

Ergebnis



Quellcode github



Fragen und Kommentare sind willkommen. Sie können mit dem Autor im Telegrammkanal chatten .

Anstelle einer Schlussfolgerung

Unsere Client-Anwendung ist bereits bereit, die ersten Daten vom Server zu empfangen - Informationen zum Veröffentlichungsdatum. Zu diesem Zweck erstellen wir im vierten Artikel eine Skeleton-Serveranwendung und hosten sie auf dem Server.