vaadin kotlin pwa
1.0.0
Uma demonstração PWA de Vaadin-on-Kotlin muito simples. Adaptado para os desenvolvedores do Android que desejam usar o idioma familiar fortemente tipado e não se sentem em casa com todo o material do navegador JavaScript. O modelo de desenvolvimento deste aplicativo se concentra em escrever sua lógica no código Kotlin do lado do servidor; Nenhum desenvolvimento de JavaScript é necessário. Requer Java 17+.
O aplicativo é um aplicativo de lista de tarefas muito simples, projetado para mostrar os seguintes recursos:
Veja a demonstração online.
O Progressive Web App é uma página da web que o navegador de telefones móveis pode baixar e pode funcionar offline, até certo ponto. A PWA também permite ao usuário salvar um atalho de aplicativo como um ícone na tela inicial; Quando lançado a partir desse ícone, o aplicativo é lançado completamente em tela cheia, sem qualquer barra de URL, imitando completamente um aplicativo nativo.
Como vamos implementar o lado do servidor lógico para evitar JavaScript, o modo offline obviamente não funcionará. Então, vamos tornar o aplicativo progressivo apenas o suficiente - incluiremos todas as coisas necessárias como o manifest.json e os trabalhadores de serviço, mas eles apenas mostrarão a página "Você está offline" quando offline. No entanto, há um esforço em andamento nesta área, então vamos esperar e ver.
Os PWAs também tendem a se adaptar ao tamanho da tela (a chamada capacidade de resposta), normalmente com as regras CSS. Você pode conferir o que são os PWAs, nos aplicativos da Web Progressive Vaadin.
Usaremos a estrutura Vaadin. A razão por trás disso é que a estrutura do Vaadin é uma estrutura da web baseada em Java orientada a componente. Por causa disso, o modelo de programação de Vaadin se assemelha e parece familiar aos desenvolvedores do Android. Você apenas alterna suas visualizações do Android para os componentes do Vaadin e continua aninhando seus botões em um monte de vertical/horizontallayouts - exatamente como faria com o desenvolvimento do Android, mas sem as dores no uso do modelo de desenvolvimento do Android.
Os pacotes de Vaadin enorme quantidade de componentes predefinidos, para que você normalmente não precise desenvolver seus próprios componentes. Você simplesmente orquestrará um servidor de componentes pré-fabricados, com um código puro Java/Kotlin.
Você pode ler mais sobre os benefícios do desenvolvimento de Vaadin sobre o Android.
Consulte a documentação da inicialização do Vaadin sobre como você executa, desenvolve e empacote este aplicativo baseado em Vaadin-Boot.
sw.js ? O sw.js , todos os manifestos e a página offline agora são gerados automaticamente pela Vaadin, através da anotação @pwa. Consulte a criação de PWA com fluxo para obter mais detalhes.
O Vaadin, é claro, usa algoritmos diferentes do que o Android para executar o layouting. Felizmente, o Vaadin (ou, em vez disso, CSS) conhece um layout bastante semelhante ao LinearLayout do Android - o Flexbox. Leia o artigo do Vaadin 10 Server, no artigo Vaadin 8 e Android Developers, sobre como usar VerticalLayout e HorizontalLayout , que usam o Flexbox sob o capô, mas ostentam uma API que pode estar familiarizada com os desenvolvedores do Android.
Você pode baixar e instalar o Intellij Idea Community Edition e importar este projeto para ele. O Android Studio é baseado na comunidade Intellij Idea, então você deve se sentir imediatamente em casa.
Para iniciar seu aplicativo, basta abrir Main.kt e executar a função main() . Basta abrir o navegador e acertar http: // localhost: 8080.
A carne principal da interface do usuário está localizada no TaskListView.kt - fique à vontade para editar esse arquivo e experimentar por si mesmo. Existem muitos componentes de vaadina pré-existentes; Você pode conferir o aplicativo Exemplo de Buddy de Bebida para obter mais exemplos de uso de componentes. Você também deve ler a documentação completa do Vaadin.
O navegador é um IDE muito poderoso que pode ajudá-lo a depurar o problema relacionado ao CSS e do layout. Aceite seu tempo e leia lentamente os seguintes tutoriais, para ser adquirido com as ferramentas de desenvolvedor do navegador:
É muito fácil testar aplicativos baseados em vaadin - tudo o que você precisa para procurar os componentes dos seletores, por exemplo, um botão com a legenda de "Click Me". O arquivo de teste de amostra do TaskListViewTest.kt mostra um teste simples que testa a tela principal. Leia a documentação do projeto de teste sem navegação sobre os antecedentes desta abordagem de teste.
Sem o banco de dados, poderíamos armazenar a lista de tarefas apenas na sessão, o que desapareceria quando o servidor reiniciou. Usaremos o suporte ao banco de dados SQL do Vaadin-on-Kotlin. Para facilitar as coisas, usaremos o banco de dados H2 na memória que desaparecerá quando o servidor for reiniciado- Touche :-D
Usaremos o Flyway para migração de banco de dados. Confira o bootstrap.kt sobre como os scripts de migração são executados quando o aplicativo é inicializado.
A entidade da tarefa será mapeada para o banco de dados; A herdeira da entidade e Dao fará com que isso herdeá vários métodos úteis, como findAll() e save() . Também ganhará meios de fornecer todas as suas instâncias por meio de um DataProvider . Consulte a configuração da grade da ListView.kt para detalhes.
Consulte o artigo de volta à base sobre como os métodos do localizador são anexados à entidade e como a pesquisa e a salvamento funcionam.
Este aplicativo não passa de um projeto ZIP simples com um script de execução. Ele pode simplesmente ser executado a partir de uma linha de comando (embalamos o cais embutido).
Para produzir uma imagem do Docker a partir deste aplicativo, basta executar
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .Para executar a imagem, basta correr
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaFeito - seu aplicativo agora é executado no localhost: 8080.
Para executar este aplicativo no Google Cloud Kubernetes e Google Cloud SQL com o MySQL, basta seguir o aplicativo Vaadin no Google Cloud Kubernetes Tutorial.
Consulte a execução do aplicativo Vaadin-on-Kotlin no microk8s para obter mais detalhes.
