vaadin kotlin pwa
1.0.0
Une démo PWA très simple basée sur Vaadin-on-Kotlin. Associé aux développeurs Android qui veulent utiliser un langage familier fortement typé et ne se sentent pas chez eux avec tous ces trucs de navigateur JavaScript. Le modèle de développement de cette application se concentre sur la rédaction de votre logique dans le code Kotlin côté serveur; Aucun développement JavaScript n'est requis. Nécessite Java 17+.
L'application est une application de liste de tâches très simple, conçue pour présenter les fonctionnalités suivantes:
Voir la démo en ligne.
L'application Web progressive est une page Web que le navigateur de téléphone mobile peut télécharger et peut ensuite fonctionner hors ligne, dans une certaine mesure. PWA permet également à l'utilisateur d'enregistrer un raccourci d'application comme icône à son écran d'accueil; Lorsqu'elle est lancée à partir de cette icône, l'application lance complètement un écran complet, sans aucune barre d'URL, imitant complètement une application native.
Étant donné que nous allons implémenter le côté du serveur logique pour éviter JavaScript, le mode hors ligne ne fonctionnera évidemment pas. Nous allons donc rendre l'application progressive juste assez - nous inclurons toutes les choses nécessaires comme les travailleurs manifest.json et les services, mais ils afficheront simplement la page "Vous êtes hors ligne" lorsque vous êtes hors ligne. Cependant, il y a un effort en cours dans ce domaine, alors attendons et voyons.
Les PWA ont également tendance à s'adapter à la taille de l'écran (soi-disant réactivité), généralement avec des règles CSS. Vous pouvez consulter ce que sont les PWA, dans les applications Web Vaadin Progressive.
Nous utiliserons le cadre Vaadin. La raison derrière cela est que Vaadin Framework est un framework Web basé sur Java axé sur les composants. Pour cette raison, le modèle de programmation de Vaadin ressemble étroitement et se sent familier aux développeurs Android. Vous basculez simplement de vos vues Android en composants Vaadin et vous continuez à nicher vos boutons en un tas de verticaux / horizontallayouts - exactement comme vous le feriez avec le développement Android, mais sans les douleurs d'utilisation du modèle de développement Android.
Vaadin emballe une énorme quantité de composants prédéfinis, vous n'aurez donc pas à développer vos propres composants. Vous orchestrez simplement un côté du serveur de composants pré-fait, avec un code Java / Kotlin pur.
Vous pouvez en savoir plus sur les avantages du développement de Vaadin sur Android.
Veuillez consulter la documentation de démarrage Vaadin sur la façon dont vous exécutez, développez et emballez cette application basée sur Vaadin-Boot.
sw.js ? Le sw.js , tous les manifestes et la page hors ligne sont maintenant générés automatiquement par Vaadin, via l'annotation @pwa. Voir Création de PWA avec le flux pour plus de détails.
Vaadin utilise bien sûr différents algorithmes qu'Android pour effectuer la mise en page. Heureusement, Vaadin (ou, plutôt CSS) connaît une disposition assez similaire à LinearLayout d'Android - le Flexbox. Veuillez lire la disposition du côté serveur Vaadin 10 pour l'article des développeurs Vaadin 8 et Android sur la façon d'utiliser VerticalLayout et HorizontalLayout qui utilisent Flexbox sous le capot, mais arbore une API qui peut être familière aux développeurs Android.
Vous pouvez télécharger et installer l'Intellij Idea Community Edition, puis importer ce projet. Android Studio est basé sur la communauté Intellij Idea, vous devriez donc vous sentir immédiatement chez vous.
Pour lancer votre application, ouvrez simplement Main.kt et exécutez la fonction main() . Ouvrez simplement votre navigateur et appuyez sur http: // localhost: 8080.
La viande principale de l'interface utilisateur est située dans TaskListView.kt - n'hésitez pas à modifier ce fichier et à expérimenter par vous-même. Il y a beaucoup de composants Vaadin préexistants; Vous pouvez consulter l'application Budge Buddy Exemple pour plus d'exemples d'utilisation des composants. Vous devez également lire la documentation complète de Vaadin.
Le navigateur est un IDE très puissant qui peut vous aider à déboguer le problème lié au CSS et à la disposition. Prenez votre temps et lisez lentement les didacticiels suivants, pour vous être réunis avec les outils du développeur du navigateur:
Il est très facile de tester les applications basées sur Vaadin - tout ce dont vous avez besoin pour rechercher les composants par des sélecteurs, par exemple un bouton avec la légende de "cliquez sur moi". Le fichier de test TaskListViewTest.kt affiche un test simple qui teste l'écran principal. Lisez la documentation du projet de test sans navigateur concernant le contexte de cette approche de test.
Sans la base de données, nous pourrions stocker la liste des tâches en session uniquement, ce qui aurait ensuite disparu lorsque le serveur a redémarré. Nous utiliserons la prise en charge de la base de données SQL de Vaadin-on-Kotlin. Pour faciliter les choses, nous utiliserons la base de données H2 en mémoire qui aura disparu lorsque le serveur sera redémarré - Touche :-D
Nous utiliserons la voie de pulvérisation pour la migration de la base de données. Consultez Bootstrap.kt sur la façon dont les scripts de migration sont exécutés lorsque l'application est initialisée.
L'entité de tâche sera mappée à la base de données; L'héritage de l'entité et du DAO le fera hériter d'un tas de méthodes utiles telles que findAll() et save() . Il gagnera également des moyens de fournir toutes ses instances via un DataProvider . Voir la configuration de la grille TaskListView.kt pour plus de détails.
Voir l'article Back to Base sur la façon dont les méthodes Finder sont attachées à l'entité et le fonctionnement de la recherche et de la sauvegarde.
Cette application n'est plus qu'un projet zip simple avec un script d'exécution. Il peut simplement être exécuté à partir d'une ligne de commande (nous emballons la jetée intégrée).
Pour produire une image Docker à partir de cette application, il suffit d'exécuter
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .Pour exécuter l'image, il suffit de courir
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaTerminé - Votre application fonctionne maintenant sur LocalHost: 8080.
Pour exécuter cette application dans Google Cloud Kubernetes et Google Cloud SQL avec MySQL, suivez simplement le déploiement de votre application Vaadin sur Google Cloud Kubernetes.
Voir exécution de l'application Vaadin-on-Kotlin dans Microk8 pour plus de détails.
