vaadin kotlin pwa
1.0.0
Eine sehr einfache Vaadin-on-Kotlin-Basis-PWA-Demo. Auf Android-Entwickler zugeschnitten, die eine vertraute, stark typische Sprache verwenden möchten und sich nicht mit all dem JavaScript-Browser-Zeug zu Hause fühlen. Das Entwicklungsmodell dieser App konzentriert sich auf das Schreiben Ihrer Logik im serverseitigen Kotlin-Code. Es ist keine JavaScript -Entwicklung erforderlich. Benötigt Java 17+.
Die App ist eine sehr einfache Aufgabenliste -App, mit der die folgenden Funktionen vorgestellt wurden:
Siehe die Online -Demo.
Progressive Web App ist eine Webseite, die der Mobiltelefonbrowser herunterladen kann und das dann bis zu einem gewissen Grad offline funktionieren kann. Mit PWA kann der Benutzer auch eine App -Abkürzung als Symbol auf seinem Startbildschirm speichern. Wenn die App aus diesem Symbol gestartet wird, startet sie ohne URL-Leiste einen vollständig vollständigen Bildschirm und ahmt eine native App vollständig nach.
Da wir die logische Serverseite implementieren, um JavaScript zu vermeiden, funktioniert der Offline-Modus offensichtlich nicht. Also werden wir die App gerade genug progressiv machen - wir werden alle notwendigen Dinge wie das manifest.json und Dienstangestellte einbeziehen, aber sie zeigen nur die Seite "Du bist offline", wenn sie offline sind. In diesem Bereich gibt es jedoch eine Anstrengung, also warten wir.
Die PWAs neigen auch dazu, sich an die Bildschirmgröße (sogenannte Reaktionsfähigkeit) anzupassen, typischerweise mit CSS-Regeln. Sie können sich ansehen, was PWAs bei Vaadin Progressive Web Apps sind.
Wir werden das Vaadin -Framework verwenden. Der Grund dafür ist, dass Vaadin Framework ein komponentenorientiertes Java-basierter Web-Framework ist. Aus diesem Grund ähnelt Vaadins Programmiermodell Android -Entwicklern eng und fühlt sich vertraut an. Sie wechseln einfach Ihre Android -Ansichten in Vaadin -Komponenten und nisten Ihre Schaltflächen weiter in eine Reihe vertikaler/horizontaler Schaltflächen - genau wie Sie mit der Android -Entwicklung, aber ohne die Schmerzen, das Android -Entwicklungsmodell zu verwenden.
Vaadin -Pakete enorme Menge an vordefinierten Komponenten, sodass Sie normalerweise keine eigenen Komponenten entwickeln müssen. Sie werden einfach einen vorgefertigten Komponenten-Server mit einem reinen Java/Kotlin-Code orchestrieren.
Sie können mehr über die Vorteile der Vaadin -Entwicklung gegenüber Android erfahren.
In der Vaadin-Boot-Dokumentation finden Sie, wie Sie diese Vaadin-Boot-basierte App ausführen, entwickeln und verpacken.
sw.js ? Die sw.js , alle Manifests und die Offline -Seite werden jetzt automatisch von Vaadin über die @PWA -Annotation generiert. Weitere Informationen finden Sie unter Fluss PWA mit Fluss.
Vaadin verwendet natürlich verschiedene Algorithmen als Android, um das Layout durchzuführen. Glücklicherweise kennt Vaadin (oder eher CSS) ein Layout, das Androids LinearLayout ziemlich ähnlich ist - der Flexbox. Bitte lesen Sie das serverseitige Layout von Vaadin 10 für Vaadin 8 und Android Developers-Artikel über die Verwendung VerticalLayout und HorizontalLayout , die Flexbox unter der Haube verwenden.
Sie können die Intellij Idea Community Edition herunterladen und installieren und dieses Projekt dann in sie importieren. Android Studio basiert auf der Intellij -Ideengemeinschaft, sodass Sie sich sofort zu Hause fühlen sollten.
Um Ihre App zu starten, öffnen Sie einfach Main.kt und führen Sie die main() -Funktion aus. Öffnen Sie einfach Ihren Browser und klicken Sie auf http: // localhost: 8080.
Das Hauptfleisch der Benutzeroberfläche befindet sich in der TaskListView.KT - Sie können diese Datei bearbeiten und selbst experimentieren. Es gibt viele bereits bestehende Vaadin-Komponenten; Weitere Beispiele für die Verwendung von Komponenten finden Sie in der Getränkebuddy -Beispiel -App. Sie sollten auch die vollständige Vaadin -Dokumentation lesen.
Der Browser ist eine sehr leistungsstarke IDE, die Ihnen helfen kann, CSS- und Layoutprobleme zu debuggen. Nehmen Sie sich Zeit und lesen Sie langsam die folgenden Tutorials durch, um mit den Browser -Entwickler -Tools zu erwerben:
Es ist sehr einfach, Vaadin -basierte Apps zu testen - alles, was Sie mit den Komponenten nach Selektoren nachschlagen müssen, z. B. eine Schaltfläche mit der Bildunterschrift "Klicken Sie mich". Die TaskListViewTest.KT -Beispiel -Testdatei zeigt einen einfachen Test, in dem der Hauptbildschirm getestet wird. Lesen Sie die dokumentation ohne browserlose Testprojekt zum Hintergrund zu diesem Testansatz.
Ohne die Datenbank könnten wir die Aufgabenliste nur in Sitzung speichern, die dann verschwunden wäre, wenn der Server neu gestartet wurde. Wir werden den SQL-Datenbankunterstützung von Vaadin-on-Kotlin verwenden. Um die Dinge einfach zu machen, werden wir die H2-Datenbank in der Memory verwenden, die beim Neustart des Servers verschwunden ist- Touch :-D
Wir werden Flyway für die Datenbankmigration verwenden. Schauen Sie sich Bootstrap.kt an, wie die Migrationsskripte bei der Initialisierung der App ausgeführt werden.
Die Aufgabenentität wird der Datenbank zugeordnet. Wenn Sie von Entity und DAO erben, werden es eine Reihe nützlicher Methoden wie findAll() und save() erben. Es wird auch Mittel erhalten, um alle seine Instanzen über einen DataProvider bereitzustellen. Weitere Informationen finden Sie in der Konfiguration von TaskListView.kt Grid.
Siehe den Artikel von Back to Base, wie die Findermethoden an die Entität angeschlossen sind und wie die Suche und das Speichern funktioniert.
Diese App ist nichts mehr als ein einfaches Zip -Projekt mit einem Run -Skript. Es kann einfach von einer Befehlszeile ausgeführt werden (wir packen ein integriertes Steg).
Um ein Docker -Bild aus dieser App zu erstellen, laufen Sie einfach aus
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .Um das Bild auszuführen, laufen Sie einfach aus
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaFertig - Ihre App läuft jetzt auf Localhost: 8080.
Um diese App in Google Cloud Kubernetes und Google Cloud SQL mit MySQL auszuführen, folgen Sie einfach der Bereitstellung Ihrer Vaadin -App im Google Cloud Kubernetes -Tutorial.
Weitere Informationen finden Sie unter MicroK8S-App-App-App-App-App-App-App.
