vaadin kotlin pwa
1.0.0
PWA DEMO مقرها Vaadin-on-Kotlin. مصممة تجاه مطوري Android الذين يرغبون في استخدام لغة مألوفة بقوة ولا تشعر بأنها في المنزل مع كل ما يتواجد في متصفح JavaScript. يركز نموذج تطوير هذا التطبيق على كتابة منطقك في رمز Kotlin من جانب الخادم ؛ لا مطلوب تطوير جافا سكريبت. يتطلب java 17+.
التطبيق هو تطبيق قائمة مهام بسيط للغاية ، مصمم لعرض الميزات التالية:
انظر العرض التوضيحي عبر الإنترنت.
تطبيق الويب التدريجي هو صفحة ويب يمكن لمتصفح الهاتف المحمول تنزيله ويمكنه بعد ذلك العمل في وضع عدم الاتصال ، إلى حد ما. تسمح PWA أيضًا للمستخدم بحفظ اختصار التطبيق كرمز لشاشته الرئيسية ؛ عند إطلاقه من هذا الرمز ، يقوم التطبيق بإطلاق شاشة كاملة تمامًا ، دون أي شريط عنوان URL ، يحاكي تطبيقًا أصليًا تمامًا.
نظرًا لأننا سنقوم بتنفيذ جانب الخادم المنطقي لتجنب JavaScript ، فمن الواضح أن الوضع غير المتصل بالإنترنت لن يعمل. لذلك سنجعل التطبيق تقدميًا بما فيه الكفاية - سنقوم بتضمين جميع الأشياء الضرورية مثل manifest.json وعمال الخدمة ، لكنهم سيعرضون فقط صفحة "أنت غير متصل" عند عدم الاتصال بالإنترنت. ومع ذلك ، هناك جهد مستمر في هذا المجال ، لذلك دعونا ننتظر ونرى.
تميل PWAs أيضًا إلى التكيف مع حجم الشاشة (ما يسمى بالاستجابة) ، عادةً مع قواعد CSS. يمكنك التحقق من ماهية PWAs ، في تطبيقات الويب Faadin Progressive.
سنستخدم إطار عمل فادين. والسبب وراء ذلك هو أن Faadin Framework هو إطار الويب الموجه نحو Java. ولهذا السبب ، يشبه نموذج برمجة فادين عن كثب ويشعر بأنه مألوف لمطوري Android. يمكنك فقط تبديل طرق عرض Android إلى مكونات Vaadin وتستمر في تعشيش أزرارك إلى مجموعة من الأذرع العمودية/horizontallayouts - تمامًا كما تفعل مع تطوير Android ، ولكن دون آلام استخدام نموذج تطوير Android.
حزم الفادين كمية هائلة من المكونات المحددة مسبقًا ، لذا لن تضطر عادة إلى تطوير مكوناتك الخاصة. سوف تقوم ببساطة بتنظيم خادم مكونات مسبقًا ، مع رمز Java/Kotlin نقي.
يمكنك قراءة المزيد حول فوائد تطوير الفادين عبر Android.
يرجى الاطلاع على وثائق Boot Vaadin حول كيفية تشغيل وتطوير وتعبئة هذا التطبيق القائم على Vaadin-Boot.
sw.js ؟ يتم إنشاء sw.js ، كل ما يتجلى ، والصفحة غير المتصلة بالإنترنت الآن بواسطة Vaadin ، عبر التعليق التوضيحي لـ PWA. انظر إنشاء PWA مع التدفق لمزيد من التفاصيل.
يستخدم Vaadin بالطبع خوارزميات مختلفة عن Android لأداء التصميم. لحسن الحظ ، يعرف Vaadin (أو ، بالأحرى CSS) تخطيطًا مشابهًا تمامًا لـ Android's LinearLayout - The FlexBox. يرجى قراءة تخطيط Vaadin 10 من جانب الخادم لـ Vaadin 8 و Android Developers حول كيفية استخدام VerticalLayout و HorizontalLayout التي تستخدم Flexbox تحت الغطاء ، ولكنها تتميز بآبار واجهة برمجة التطبيقات التي قد تكون مألوفة لمطوري Android.
يمكنك تنزيل وتثبيت إصدار Intellij Idea Community ، ثم استيراد هذا المشروع فيه. يعتمد Android Studio على مجتمع Idea Intellij ، لذلك يجب أن تشعر فورًا في المنزل.
لبدء تطبيقك ، ببساطة افتح Main.kt وتشغيل الوظيفة main() . فقط افتح متصفحك واضغط على http: // localhost: 8080.
يوجد اللحوم الرئيسية في واجهة المستخدم في TaskListView.kt - لا تتردد في تحرير هذا الملف والتجربة لنفسك. هناك الكثير من مكونات الفادين الموجودة مسبقًا ؛ يمكنك الاطلاع على تطبيق مثال Beverage Buddy لمزيد من الأمثلة على استخدام المكون. يجب عليك أيضًا قراءة وثائق الفادين الكاملة.
المتصفح هو IDE قوي للغاية يمكن أن تساعدك على تصحيح قضية CSS- ومرتبطة التخطيط. خذ وقتك وقراءة ببطء من خلال البرامج التعليمية التالية ، للاستحواذ مع أدوات مطور المتصفح:
من السهل جدًا اختبار التطبيقات المستندة إلى Vaadin - كل ما تحتاجه للبحث عن المكونات بواسطة المحددات ، على سبيل المثال زر مع تعليق "Click Me". يعرض ملف TaskListViewTest.KT نموذج اختبار نموذج اختبار بسيط يختبر الشاشة الرئيسية. اقرأ وثائق مشروع اختبار المستعرض فيما يتعلق بالخلفية حول نهج الاختبار هذا.
بدون قاعدة البيانات ، يمكننا تخزين قائمة المهام في الجلسة فقط ، والتي ستختفي عند إعادة تشغيل الخادم. سوف نستخدم دعم قاعدة بيانات Vaadin-on-Kotlin SQL. لتسهيل الأمور ، سنستخدم قاعدة بيانات H2 في الذاكرة والتي ستختفي عند إعادة تشغيل الخادم- Touche : D
سوف نستخدم Flyway لترحيل قاعدة البيانات. تحقق من bootstrap.kt حول كيفية تشغيل البرامج النصية للترحيل عند تهيئة التطبيق.
سيتم تعيين كيان المهمة إلى قاعدة البيانات ؛ إن الوراثة من الكيان و DAO ستجعلها ترث مجموعة من الأساليب المفيدة مثل findAll() و save() . كما ستحصل على وسائل لتوفير جميع مثيلاتها عبر DataProvider . راجع تكوين شبكة TaskListView.kt للحصول على التفاصيل.
راجع المقالة الخلف إلى الأساس حول كيفية إرفاق أساليب Finder بالكيان ، وكيف يعمل البحث والحفظ.
هذا التطبيق ليس أكثر من مشروع zip عادي مع نص تشغيل. يمكن ببساطة تشغيله من سطر الأوامر (نقوم بتعبئة رصيف مدمج).
لإنتاج صورة Docker من هذا التطبيق ، ما عليك سوى تشغيل
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .لتشغيل الصورة ، فقط تشغيل
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaتم القيام به - يعمل تطبيقك الآن على مضيف محلي: 8080.
لتشغيل هذا التطبيق في Google Cloud Kubernetes و Google Cloud SQL مع MySQL ، ما عليك سوى اتباع تطبيق Vaadin الخاص بك على Google Cloud Kubernetes Tutorial.
انظر تشغيل تطبيق Vaadin-on-Kotlin في Microk8s لمزيد من التفاصيل.
