vaadin kotlin pwa
1.0.0
Una muy simple demostración de PWA con sede en Vaadin-on-Kotlin. A la medida de los desarrolladores de Android que desean usar un lenguaje familiar y no se sienten como en casa con todo lo que JavaScript Browser. El modelo de desarrollo de esta aplicación se centra en escribir su lógica en el código Kotlin del lado del servidor; No se requiere desarrollo de JavaScript. Requiere Java 17+.
La aplicación es una aplicación de lista de tareas muy simple, diseñada para mostrar las siguientes características:
Vea la demostración en línea.
Progressive Web App es una página web que el navegador de teléfonos móviles puede descargar y luego puede funcionar fuera de línea, en cierto grado. PWA también permite al usuario guardar un atajo de aplicación como un icono en su pantalla de inicio; Cuando se lanza desde ese ícono, la aplicación se inicia completamente en pantalla completa, sin ninguna barra de URL, imitando por completo una aplicación nativa.
Dado que vamos a implementar el lado del servidor lógico para evitar JavaScript, el modo fuera de línea obviamente no funcionará. Así que haremos que la aplicación sea progresiva lo suficiente: incluiremos todas las cosas necesarias como los trabajadores de manifest.json y Service, pero solo mostrarán la página "No está fuera de línea" cuando fuera de línea. Sin embargo, hay un esfuerzo en curso en esta área, así que esperemos y veamos.
Los PWA también tienden a adaptarse al tamaño de la pantalla (la llamada capacidad de respuesta), típicamente con las reglas CSS. Puede ver qué son PWA, en Vaadin Progressive Web Apps.
Usaremos el marco Vaadin. La razón detrás de esto es que Vaadin Framework es un marco web basado en Java orientado a componentes. Debido a eso, el modelo de programación de Vaadin se parece mucho y se siente familiar para los desarrolladores de Android. Simplemente cambie sus vistas de Android a los componentes de Vaadin y continúa anidando sus botones en un montón de verticales/horizontallayouts, exactamente como lo haría con el desarrollo de Android, pero sin los dolores de usar el modelo de desarrollo de Android.
Vaadin empaqueta una enorme cantidad de componentes predefinidos, por lo que no tendrá que desarrollar sus propios componentes. Simplemente orquestará un lado del servidor de componentes prefabricados, con un código Java/Kotlin puro.
Puede leer más sobre los beneficios del desarrollo de Vaadin sobre Android.
Consulte la documentación de Vaadin Boot sobre cómo se ejecuta, desarrolla y empaqueta esta aplicación basada en Vaadin-Boot.
sw.js ? El sw.js , todos los manifiestos y la página fuera de línea ahora se generan automáticamente por Vaadin, a través de la anotación @PWA. Vea la creación de PWA con flujo para más detalles.
Vaadin, por supuesto, utiliza diferentes algoritmos que Android para realizar el diseño. Afortunadamente, Vaadin (o, más bien CSS) conoce un diseño bastante similar al LinearLayout de Android: el FlexBox. Lea el diseño del lado del servidor Vaadin 10 para el artículo de Vaadin 8 y los desarrolladores de Android sobre cómo usar VerticalLayout y HorizontalLayout que usan Flexbox debajo del capó, pero luce una API que puede ser familiar para los desarrolladores de Android.
Puede descargar e instalar la edición de la comunidad Idea IntelliJ, luego importar este proyecto en ella. Android Studio se basa en la comunidad Idea IntelliJ, por lo que debe sentirse inmediatamente en casa.
Para iniciar su aplicación, simplemente abra Main.kt y ejecute la función main() . Simplemente abra su navegador y presione http: // localhost: 8080.
La carne principal de la interfaz de usuario se encuentra en TaskListView.kt: no dude en editar ese archivo y experimentar por usted mismo. Hay muchos componentes de Vaadin preexistentes; Puede consultar la aplicación de ejemplo de Beverage Buddy para obtener más ejemplos de uso de componentes. También debe leer la documentación completa de Vaadin.
El navegador es un IDE muy poderoso que puede ayudarlo a depurar CSS y un tema relacionado con el diseño. Tómese su tiempo y lea lentamente a través de los siguientes tutoriales, para adquirir con las herramientas de desarrollador del navegador:
Es muy fácil probar aplicaciones basadas en Vaadin, todo lo que necesita para buscar los componentes por selectores, por ejemplo, un botón con el título de "Click Me". El archivo de prueba de muestra TaskListViewTest.kt muestra una prueba simple que prueba la pantalla principal. Lea la documentación del proyecto de prueba sin navegador sobre los antecedentes sobre este enfoque de prueba.
Sin la base de datos, podríamos almacenar la lista de tareas solo en sesión, lo que luego desaparecería cuando el servidor se reiniciara. Usaremos el soporte de la base de datos SQL de Vaadin-on-Kotlin. Para facilitar las cosas, usaremos una base de datos H2 en memoria que desaparecerá cuando se reinicie el servidor- Touche :-D
Usaremos Flyway para la migración de la base de datos. Consulte Bootstrap.kt sobre cómo se ejecutan los scripts de migración cuando se inicializa la aplicación.
La entidad de la tarea se asignará a la base de datos; Heredar de Entity y Dao hará que herede un montón de métodos útiles como findAll() y save() . También obtendrá medios para proporcionar todas sus instancias a través de un DataProvider . Consulte la configuración de la cuadrícula TaskListView.kt para más detalles.
Vea el artículo Back to Base sobre cómo se adjuntan los métodos del buscador a la entidad y cómo funciona la búsqueda y el salvamento.
Esta aplicación no es más que un proyecto de cremallera simple con un script de ejecución. Simplemente se puede ejecutar desde una línea de comandos (empaquetamos el embarcadero incorporado).
Para producir una imagen de Docker de esta aplicación, solo ejecute
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .Para ejecutar la imagen, solo ejecuta
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaHecho: su aplicación ahora se ejecuta en Localhost: 8080.
Para ejecutar esta aplicación en Google Cloud Kubernetes y Google Cloud SQL con MySQL, simplemente siga la aplicación de implementación de su Vaadin en el tutorial de Google Cloud Kubernetes.
Consulte la aplicación de Vaadin-on-Kotlin en MicroK8s para obtener más detalles.
