vaadin kotlin pwa
1.0.0
การสาธิต PWA ที่ใช้ Vaadin-on-Kotlin ง่ายมาก ปรับให้เหมาะกับนักพัฒนา Android ที่ต้องการใช้ภาษาที่มีการพิมพ์อย่างยิ่งที่คุ้นเคยและไม่รู้สึกเหมือนอยู่บ้านกับเบราว์เซอร์ JavaScript ทั้งหมด รูปแบบการพัฒนาของแอพนี้มุ่งเน้นไปที่การเขียนตรรกะของคุณในรหัส Kotlin ฝั่งเซิร์ฟเวอร์ ไม่จำเป็นต้องมีการพัฒนาจาวาสคริปต์ ต้องใช้ Java 17+
แอพนี้เป็นแอพรายการงานที่ง่ายมากที่ออกแบบมาเพื่อแสดงคุณสมบัติต่อไปนี้:
ดูการสาธิตออนไลน์
Progressive Web App เป็นหน้าเว็บที่เบราว์เซอร์โทรศัพท์มือถือสามารถดาวน์โหลดได้และสามารถทำงานออฟไลน์ได้ในระดับหนึ่ง PWA ยังอนุญาตให้ผู้ใช้บันทึกทางลัดแอพเป็นไอคอนไปยังหน้าจอหลักของเขา/เธอ เมื่อเปิดตัวจากไอคอนนั้นแอปจะเปิดหน้าจอเต็มหน้าจออย่างสมบูรณ์โดยไม่มีแถบ URL ใด ๆ
เนื่องจากเรากำลังจะใช้ฝั่งเซิร์ฟเวอร์ลอจิกเพื่อหลีกเลี่ยง JavaScript โหมดออฟไลน์จึงไม่ทำงาน ดังนั้นเราจะทำให้แอพก้าวหน้าพอ - เราจะรวมสิ่งที่จำเป็นทั้งหมดเช่น manifest.json และพนักงานบริการ แต่พวกเขาจะแสดงหน้า "คุณออฟไลน์" เมื่อออฟไลน์ อย่างไรก็ตามมีความพยายามอย่างต่อเนื่องในพื้นที่นี้ดังนั้นเรามารอดู
PWAs ยังมีแนวโน้มที่จะปรับให้เข้ากับขนาดหน้าจอ (เรียกว่าการตอบสนอง) โดยทั่วไปจะมีกฎ CSS คุณสามารถตรวจสอบว่า PWAs คืออะไรที่ Vaadin Progressive Web Apps
เราจะใช้เฟรมเวิร์ก Vaadin เหตุผลที่อยู่เบื้องหลังนี้คือกรอบ Vaadin เป็นกรอบเว็บที่เน้นการใช้งานของ Java ด้วยเหตุนี้รูปแบบการเขียนโปรแกรมของ Vaadin จึงมีลักษณะคล้ายกันอย่างใกล้ชิดและรู้สึกคุ้นเคยกับนักพัฒนา Android คุณเพียงแค่เปลี่ยนมุมมอง Android ของคุณเป็นส่วนประกอบ Vaadin และคุณทำรังนกของคุณต่อไปเป็นพวงของแนวตั้ง/แนวนอน - ตรงตามที่คุณทำกับการพัฒนา Android แต่ไม่มีความเจ็บปวดในการใช้รูปแบบการพัฒนา Android
แพ็คเกจ Vaadin จำนวนมากของส่วนประกอบที่กำหนดไว้ล่วงหน้าจำนวนมหาศาลดังนั้นโดยทั่วไปแล้วคุณจะไม่ต้องพัฒนาส่วนประกอบของคุณเอง คุณจะจัดการกับเซิร์ฟเวอร์ส่วนประกอบที่ทำไว้ล่วงหน้าด้วยรหัส Java/Kotlin บริสุทธิ์
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับประโยชน์ของการพัฒนา Vaadin เหนือ Android
โปรดดูเอกสารประกอบการบูต Vaadin เกี่ยวกับวิธีการเรียกใช้พัฒนาและจัดทำแพ็คเกจแอพที่ใช้ Vaadin-Boot
sw.js คนงานบริการอยู่ที่ไหน sw.js ทั้งหมดปรากฏตัวและหน้าออฟไลน์ถูกสร้างขึ้นโดย Vaadin โดยอัตโนมัติผ่านคำอธิบายประกอบ @PWA ดูการสร้าง PWA ด้วย Flow สำหรับรายละเอียดเพิ่มเติม
แน่นอนว่า Vaadin ใช้อัลกอริทึมที่แตกต่างจาก Android เพื่อทำการจัดวาง โชคดีที่ Vaadin (หรือค่อนข้าง CSS) รู้เลย์เอาต์ค่อนข้างคล้ายกับ LinearLayout ของ Android - The Flexbox โปรดอ่านการจัดวางฝั่งเซิร์ฟเวอร์ Vaadin 10 สำหรับบทความ Vaadin 8 และ Android นักพัฒนาเกี่ยวกับวิธีการใช้ VerticalLayout และ HorizontalLayout ซึ่งใช้ FlexBox ภายใต้ประทุน แต่กีฬา API ซึ่งอาจคุ้นเคยกับนักพัฒนา Android
คุณสามารถดาวน์โหลดและติดตั้ง Intellij Idea Community Edition จากนั้นนำเข้าโครงการนี้ Android Studio ตั้งอยู่บนชุมชน Intellij Idea ดังนั้นคุณควรรู้สึกเหมือนอยู่บ้านทันที
ในการเปิดแอปของคุณเพียงเปิด Main.kt และเรียกใช้ฟังก์ชั่น main() เพียงเปิดเบราว์เซอร์ของคุณและกด http: // localhost: 8080
เนื้อหลักของ UI อยู่ใน TaskListView.kt - อย่าลังเลที่จะแก้ไขไฟล์และการทดลองนั้นด้วยตัวคุณเอง มีส่วนประกอบ Vaadin ที่มีอยู่แล้วมากมาย คุณสามารถตรวจสอบแอพตัวอย่าง Buddy Buddy สำหรับตัวอย่างเพิ่มเติมของการใช้งานส่วนประกอบ คุณควรอ่านเอกสาร Vaadin เต็มรูปแบบ
เบราว์เซอร์เป็น IDE ที่ทรงพลังมากซึ่งสามารถช่วยคุณแก้ไขปัญหา CSS- และปัญหาที่เกี่ยวข้องกับเลย์เอาต์ ใช้เวลาของคุณและอ่านอย่างช้าๆผ่านบทเรียนต่อไปนี้เพื่อรับการซื้อด้วยเครื่องมือนักพัฒนาเบราว์เซอร์:
มันง่ายมากที่จะทดสอบแอพที่ใช้ Vaadin - สิ่งที่คุณต้องค้นหาส่วนประกอบด้วยตัวเลือกเช่นปุ่มด้วยคำบรรยายภาพของ "Click Me" ไฟล์ทดสอบตัวอย่าง TaskListViewTest.kt แสดงการทดสอบอย่างง่ายซึ่งทดสอบหน้าจอหลัก อ่านเอกสารโครงการทดสอบแบบไม่มีเบราว์เซอร์เกี่ยวกับพื้นหลังของวิธีการทดสอบนี้
หากไม่มีฐานข้อมูลเราสามารถจัดเก็บรายการงานลงในเซสชันเท่านั้นซึ่งจะหายไปเมื่อเซิร์ฟเวอร์รีบูต เราจะใช้การสนับสนุนฐานข้อมูล SQL ของ Vaadin-on-Kotlin เพื่อให้สิ่งต่าง ๆ ง่ายขึ้นเราจะใช้ฐานข้อมูล H2 ในหน่วยความจำซึ่งจะหายไปเมื่อเซิร์ฟเวอร์ถูกรีบูต -touche : -d
เราจะใช้ Flyway สำหรับการย้ายฐานข้อมูล ตรวจสอบ bootstrap.kt ว่าสคริปต์การย้ายถิ่นถูกเรียกใช้เมื่อแอปเริ่มต้น
เอนทิตีงานจะถูกแมปกับฐานข้อมูล การสืบทอดจากเอนทิตีและ DAO จะทำให้มันได้รับวิธีการที่เป็นประโยชน์เช่น findAll() และ save() นอกจากนี้ยังจะได้รับวิธีการจัดหาอินสแตนซ์ทั้งหมดผ่าน DataProvider ดูการกำหนดค่า TaskListView.kt Grid สำหรับรายละเอียด
ดูบทความด้านหลังไปยังฐานเกี่ยวกับวิธีการค้นหาวิธีการที่แนบมากับเอนทิตีและวิธีการค้นหาและบันทึกการทำงาน
แอพนี้ไม่มีอะไรเพิ่มเติมนอกจากโครงการซิปธรรมดาที่มีสคริปต์เรียกใช้ มันสามารถเรียกใช้ได้จากบรรทัดคำสั่ง (เราแพ็คเกจท่าเทียบเรือในตัว)
ในการสร้างอิมเมจนักเทียบท่าจากแอพนี้เพียงแค่เรียกใช้
$ 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 เพียงติดตามการปรับใช้แอพ Vaadin ของคุณไปยังการสอน Google Cloud Kubernetes
ดูแอป Vaadin-On-Kotlin ใน Microk8s สำหรับรายละเอียดเพิ่มเติม
