vaadin kotlin pwa
1.0.0
Demo PWA berbasis Vaadin-on-Kotlin yang sangat sederhana. Disesuaikan dengan pengembang Android yang ingin menggunakan bahasa yang diketik kuat dan tidak merasa betah dengan semua hal browser JavaScript. Model pengembangan aplikasi ini berfokus pada penulisan logika Anda dalam kode Kotlin sisi server; Tidak diperlukan pengembangan JavaScript. Membutuhkan Java 17+.
Aplikasi ini adalah aplikasi daftar tugas yang sangat sederhana, dirancang untuk menampilkan fitur -fitur berikut:
Lihat demo online.
Progressive Web App adalah halaman web yang dapat diunduh oleh browser ponsel dan kemudian dapat bekerja secara offline, sampai tingkat tertentu. PWA juga memungkinkan pengguna untuk menyimpan pintasan aplikasi sebagai ikon ke layar beranda; Saat diluncurkan dari ikon itu, aplikasi meluncurkan layar penuh, tanpa bar URL, meniru aplikasi asli sepenuhnya.
Karena kita akan menerapkan sisi server logika untuk menghindari JavaScript, mode offline jelas tidak akan berfungsi. Jadi kami akan membuat aplikasi progresif cukup - kami akan memasukkan semua hal yang diperlukan seperti manifest.json dan pekerja layanan, tetapi mereka hanya akan menampilkan halaman "You're Offline" saat offline. Namun, ada upaya yang sedang berlangsung di bidang ini, jadi mari kita tunggu dan lihat.
PWAS juga cenderung beradaptasi dengan ukuran layar (yang disebut responsif), biasanya dengan aturan CSS. Anda dapat melihat apa itu PWAS, di Vaadin Progressive Web Apps.
Kami akan menggunakan kerangka kerja Vaadin. Alasan di balik ini adalah bahwa Vaadin Framework adalah kerangka web berbasis Java yang berorientasi komponen. Karena itu, model pemrograman Vaadin sangat mirip dan terasa akrab bagi pengembang Android. Anda hanya mengganti tampilan Android Anda ke komponen Vaadin dan Anda terus menyaring tombol Anda menjadi sekelompok vertikal/horizontallayouts - persis seperti yang Anda lakukan dengan pengembangan Android, tetapi tanpa rasa sakit menggunakan model pengembangan Android.
Paket Vaadin dalam jumlah besar komponen yang telah ditentukan sehingga Anda biasanya tidak harus mengembangkan komponen Anda sendiri. Anda hanya akan mengatur sisi server komponen pra-buatan, dengan kode Java/Kotlin murni.
Anda dapat membaca lebih lanjut tentang manfaat pengembangan Vaadin melalui Android.
Silakan lihat dokumentasi boot Vaadin tentang cara Anda menjalankan, mengembangkan, dan mengemas aplikasi berbasis vaadin-boot ini.
sw.js ? sw.js , semua manifes dan halaman offline sekarang dihasilkan secara otomatis oleh Vaadin, melalui anotasi @pwa. Lihat Membuat PWA dengan aliran untuk detail lebih lanjut.
Vaadin tentu saja menggunakan algoritma yang berbeda dari Android untuk melakukan tata letak. Untungnya, Vaadin (atau, lebih tepatnya CSS) mengetahui tata letak yang sangat mirip dengan LinearLayout Android - flexbox. Harap baca tata letak sisi server Vaadin 10 untuk artikel Vaadin 8 dan Android Developers tentang cara menggunakan VerticalLayout dan HorizontalLayout yang menggunakan flexbox di bawah kap, tetapi olahraga API yang mungkin akrab bagi pengembang Android.
Anda dapat mengunduh dan menginstal Edisi Komunitas IntelliJ Idea, lalu mengimpor proyek ini ke dalamnya. Android Studio didasarkan pada komunitas Ide IntelliJ, jadi Anda harus segera merasa di rumah.
Untuk meluncurkan aplikasi Anda, cukup buka Main.kt dan jalankan fungsi main() . Cukup buka browser Anda dan tekan http: // localhost: 8080.
Daging utama UI terletak di TaskListView.kt - jangan ragu untuk mengedit file itu dan bereksperimen untuk diri sendiri. Ada banyak komponen Vaadin yang sudah ada sebelumnya; Anda dapat memeriksa aplikasi Contoh Buddy Minuman untuk lebih banyak contoh penggunaan komponen. Anda juga harus membaca dokumentasi Vaadin lengkap.
Browser adalah ide yang sangat kuat yang dapat membantu Anda men-debug masalah CSS dan tata letak. Luangkan waktu Anda dan baca perlahan melalui tutorial berikut, untuk diakuint dengan alat pengembang browser:
Sangat mudah untuk menguji aplikasi berbasis Vaadin - semua yang Anda butuhkan untuk mencari komponen oleh pemilih, misalnya tombol dengan judul "Klik Saya". File uji sampel TaskListViewTest.KT menunjukkan tes sederhana yang menguji layar utama. Baca dokumentasi proyek pengujian tanpa browser mengenai latar belakang pendekatan pengujian ini.
Tanpa database, kami dapat menyimpan daftar tugas hanya ke dalam sesi, yang kemudian akan hilang ketika server reboot. Kami akan menggunakan dukungan database SQL Vaadin-on-Kotlin. Untuk membuat segalanya mudah, kita akan menggunakan database H2 dalam memori yang akan hilang saat server di-reboot- Touche :-D
Kami akan menggunakan jalan terbang untuk migrasi basis data. Lihat bootstrap.kt tentang bagaimana skrip migrasi dijalankan saat aplikasi diinisialisasi.
Entitas tugas akan dipetakan ke database; Mewarisi dari entitas dan DAO akan membuatnya mewarisi banyak metode yang berguna seperti findAll() dan save() . Ini juga akan mendapatkan cara untuk menyediakan semua contohnya melalui DataProvider . Lihat Konfigurasi Grid TaskListView.KT untuk detailnya.
Lihat artikel Back to Base tentang bagaimana metode pencari melekat pada entitas, dan bagaimana pencarian dan simpan berfungsi.
Aplikasi ini tidak lebih dari proyek zip polos dengan skrip yang dijalankan. Ini dapat dengan mudah dijalankan dari baris perintah (kami mengemas dermaga bawaan).
Untuk menghasilkan gambar Docker dari aplikasi ini, jalankan saja
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .Untuk menjalankan gambar, jalankan saja
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaSelesai - Aplikasi Anda sekarang berjalan di LocalHost: 8080.
Untuk menjalankan aplikasi ini di Google Cloud Kubernetes dan Google Cloud SQL dengan MySQL, cukup ikuti penyebaran aplikasi Vaadin Anda ke tutorial Google Cloud Kubernetes.
Lihat menjalankan aplikasi Vaadin-on-Kotlin di Microk8s untuk lebih jelasnya.
