非常にシンプルなVaadin-on-KotlinベースのPWAデモ。おなじみの強くタイプの言語を使用したいAndroid開発者に合わせて、JavaScriptブラウザのすべてを自宅に感じないようにします。このアプリの開発モデルは、サーバー側のKotlinコードでロジックの作成に焦点を当てています。 JavaScriptの開発は必要ありません。 Java 17+が必要です。
このアプリは、次の機能を紹介するように設計された非常にシンプルなタスクリストアプリです。
オンラインデモを参照してください。
Progressive Webアプリは、携帯電話ブラウザーがダウンロードできるWebページであり、オフラインである程度動作できます。また、PWAを使用すると、ユーザーはアプリのショートカットをホーム画面にアイコンとして保存することもできます。そのアイコンから起動すると、アプリはURLバーなしで完全にフルスクリーンを起動し、ネイティブアプリを完全に模倣します。
JavaScriptを回避するためにロジックサーバー側を実装するため、オフラインモードは明らかに機能しません。そのため、アプリは十分に進歩的になります。 manifest.jsonやサービスワーカーのような必要なものをすべて含めますが、オフラインのときは「Outfline」ページを表示するだけです。ただし、この分野では努力が進行中ですので、待って見てみましょう。
PWAは、通常、CSSルールを使用して、画面サイズ(いわゆる応答性)に適応する傾向があります。 Vaadin Progressive Webアプリでは、PWAが何であるかを確認できます。
Vaadinフレームワークを使用します。この背後にある理由は、Vaadinフレームワークがコンポーネント指向のJavaベースのWebフレームワークであるためです。そのため、Vaadinのプログラミングモデルは、Android開発者によく似ており、馴染みがあります。 AndroidビューをVaadinコンポーネントに切り替えるだけで、Android開発モデルを使用することの痛みはありませんが、Android開発とまったく同じように、ボタンを垂直/Horizontallayoutsの束にネストし続けます。
Vaadinパッケージでは、膨大な量の事前定義されたコンポーネントがあるため、通常、独自のコンポーネントを開発する必要はありません。純粋なJava/Kotlinコードを使用して、事前に作成されたコンポーネントサーバー側を調整するだけです。
Androidを介したVaadin Developmentの利点については、詳細をご覧ください。
このVaadin-Bootベースのアプリの実行方法、開発、パッケージ化については、Vaadin Bootドキュメントをご覧ください。
sw.jsはどこにありますか? sw.js 、すべてのマニフェスト、およびオフラインページは、@PWAアノテーションを介してVaadinによって自動的に生成されるようになりました。詳細については、Flowを使用したPWAの作成を参照してください。
もちろん、VaadinはAndroidとは異なるアルゴリズムを使用してレイアウトを実行します。幸いなことに、Vaadin(またはむしろCSS)は、AndroidのLinearLayoutであるFlexBoxと非常によく似たレイアウトを知っています。 Vaadin 8のVaadin 10サーバー側のレイアウトと、フードの下でFlexBoxを使用するVerticalLayoutとHorizontalLayoutの使用方法に関するAndroid Developersの記事をお読みください。
Intellij Idea Community Editionをダウンロードしてインストールしてから、このプロジェクトをインポートできます。 Android StudioはIntellij Idea Communityに基づいているため、すぐに自宅にいると感じる必要があります。
アプリを起動するには、 Main.ktを開き、 main()関数を実行します。ブラウザを開いて、http:// localhost:8080を押してください。
UIの主な肉はTaskListView.ktにあります - そのファイルを編集して自分で実験してください。既存のヴァーディンコンポーネントがたくさんあります。コンポーネントの使用例については、Beverage Buddyの例アプリをご覧ください。また、Vaadinの完全なドキュメントを読む必要があります。
ブラウザは、CSSおよびレイアウト関連の問題をデバッグするのに役立つ非常に強力なIDEです。時間をかけて、次のチュートリアルをゆっくりと読んで、ブラウザ開発者ツールを取得します。
Vaadinベースのアプリをテストするのは非常に簡単です。たとえば、「Click Me」のキャプションを備えたボタンなど、セレクターごとにコンポーネントを検索する必要があります。 TaskListViewTest.ktサンプルテストファイルには、メイン画面をテストする簡単なテストが表示されます。このテストアプローチの背景に関するブラウザーレステストプロジェクトのドキュメントをお読みください。
データベースがなければ、タスクリストをセッションのみに保存することができ、サーバーが再起動したときに消えます。 Vaadin-on-KotlinのSQLデータベースサポートを使用します。物事を簡単にするために、サーバーが再起動されたときに消えないメモリーH2データベースを使用します-Touche :D
データベースの移行にはフライウェイを使用します。アプリが初期化されたときの移行スクリプトの実行方法については、bootstrap.ktをチェックしてください。
タスクエンティティはデータベースにマッピングされます。エンティティとDAOから継承すると、 findAll()やsave()などの有用な方法を継承します。また、 DataProviderを介してすべてのインスタンスを提供する手段を獲得します。詳細については、tasklistview.ktグリッド構成を参照してください。
Finderメソッドがエンティティにどのように添付されているか、およびルックアップと保存がどのように機能するかについてのBack to Baseの記事を参照してください。
このアプリは、実行されたスクリプトを備えたプレーンZIPプロジェクトに過ぎません。コマンドラインから単純に実行できます(内蔵の桟橋をパッケージ化します)。
このアプリから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で実行するには、Google Cloud KubernetesチュートリアルにVaadinアプリの展開をフォローしてください。
詳細については、Microk8sでVaadin-on-Kotlinアプリの実行を参照してください。