vaadin kotlin pwa
1.0.0
Очень простой демонстрация PWA на основе Ваадин-на-Котлина. Приспособленные к разработчикам Android, которые хотят использовать знакомый язык, и не чувствуют себя как дома со всеми этими вещами браузера JavaScript. Модель разработки этого приложения фокусируется на написании вашей логики в коде котлина на стороне сервера; Разработка JavaScript не требуется. Требуется Java 17+.
Приложение представляет собой очень простое приложение для списка задач, предназначенное для демонстрации следующих функций:
Смотрите онлайн -демонстрацию.
Progressive Web App - это веб -страница, которую может загрузить браузер мобильных телефонов, а затем может работать в автономном режиме в определенной степени. PWA также позволяет пользователю сохранять ярлык приложения в качестве значка на своем домашнем экране; При запуске с этого значка приложение запускается полностью полноэкранным, без каких-либо URL-панели, полностью имитируя нативное приложение.
Поскольку мы собираемся реализовать логическую сторону сервера, чтобы избежать JavaScript, автономный режим, очевидно, не сработает. Таким образом, мы сделаем приложение прогрессивным достаточно - мы включим все необходимые вещи, такие как manifest.json и Service Workings, но они просто покажут страницу «Вы офлайн» в автономном режиме. Тем не менее, в этой области предпринимаются усилия, так что давайте подождем и посмотрим.
PWA также имеют тенденцию адаптироваться к размеру экрана (так называемая отзывчивость), как правило, с правилами CSS. Вы можете проверить, что такое PWA, в Vaadin Progressive Web Apps.
Мы будем использовать структуру Ваадин. Причина этого заключается в том, что Vaadin Framework-это компонентная веб-структура на основе Java. Из -за этого модель программирования Ваадина очень напоминает и чувствует себя знакомым разработчикам Android. Вы просто переключаете свои виды на Android на компоненты Ваадин и продолжаете гнездовать свои кнопки в кучу вертикальных/горизонталлеи - точно так же, как и с разработкой Android, но без болей при использовании модели разработки Android.
Ваадиновые пакеты огромное количество предопределенных компонентов, поэтому вам обычно не нужно разрабатывать свои собственные компоненты. Вы просто организуете предварительно изготовленную сторону сервера компонентов с чистым кодом Java/Kotlin.
Вы можете прочитать больше о преимуществах разработки Ваадина по сравнению с Android.
Пожалуйста, смотрите документацию по загрузке Ваадин о том, как вы запускаете, разрабатываете и упаковываете это приложение на основе Ваадин-Бут.
sw.js ? sw.js , все манифесты и автономная страница теперь автоматически генерируется Ваадином через аннотацию @pwa. См. Создание PWA с потоком для более подробной информации.
Ваадин, конечно, использует разные алгоритмы, чем Android для выполнения макета. К счастью, Ваадин (или, скорее CSS) знает макет, очень похожий на Android's LinearLayout - Flexbox. Пожалуйста, прочитайте статью Vaadin 10 Server Side для Vaadin 8 и Android Developers о том, как использовать VerticalLayout и HorizontalLayout , которые используют Flexbox под капотом, но оснащен API, который может быть знаком разработчикам Android.
Вы можете скачать и установить Intellij Idea Community Edition, а затем импортировать этот проект. Android Studio основана на сообществе Intellij Idea, поэтому вам следует сразу же чувствовать себя дома.
Чтобы запустить ваше приложение, просто откройте Main.kt и запустите функцию main() . Просто откройте свой браузер и нажмите http: // localhost: 8080.
Основное мясо пользовательского интерфейса находится в TaskListView.kt - не стесняйтесь редактировать этот файл и экспериментировать для себя. Есть много ранее существовавших компонентов ваадина; Вы можете проверить пример примера Beverage Buddy для получения дополнительных примеров использования компонентов. Вы также должны прочитать полную документацию Vaadin.
Браузер- очень мощный IDE, который может помочь вам отладить проблему CSS и макета. Не торопитесь и читайте медленно через следующие учебные пособия, чтобы получить приобретение с инструментами разработчика браузера:
Очень легко проверить приложения на основе ваадина - все, что вам нужно для поиска компонентов селекторами, например, кнопкой с надписью «Нажмите меня». В образце файла TaskListViewTest.kt тестовый файл показывает простой тест, который проверяет основной экран. Прочитайте документацию по тестированию без браузера, касающуюся фона в этом подходе к тестированию.
Без базы данных мы могли бы сохранить список задач только в сеансе, который затем исчезнет при перезагрузке сервера. Мы будем использовать поддержку базы данных Vaadin-on-Kotlin. Чтобы облегчить ситуацию, мы будем использовать базу данных H2 в памяти, которая будет исчезла, когда сервер будет перезагружен- Touche :-d
Мы будем использовать Flyway для миграции базы данных. Проверьте Bootstrap.kt о том, как запускаются сценарии миграции при инициализировании приложения.
Сущность задачи будет сопоставлена с базой данных; Унаследование от сущности и DAO заставит его унаследовать кучу полезных методов, таких как findAll() и save() . Он также получит средства предоставления всех своих экземпляров через DataProvider . Для получения подробной информации см. Конфигурацию сетки TaskListView.kt.
Смотрите обратную статью о том, как методы поиска прикреплены к сущности, и как работает поиск и сохранение.
Это приложение - не что иное, кроме простого Zip Project с сценарием Run. Его можно просто запустить из командной линии (мы упаковываем встроенную пристани).
Чтобы создать изображение Docker из этого приложения, просто запустите
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .Чтобы запустить изображение, просто запустите
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaГотово - Ваше приложение теперь работает на Localhost: 8080.
Чтобы запустить это приложение в Google Cloud Kubernetes и Google Cloud SQL с MySQL, просто следуйте приложению Deploy Your Vaadin в учебник Google Cloud Kubernetes.
См. Запуск приложения Vaadin-on-Kotlin в Microk8s для получения более подробной информации.
