Clever Geek Handbook

ダーツサービス：フラッターウェブページ

目次
  1. 1.
  2. 2. Backend
  3. 2.1. .
  4. 2.2. . SSL
  5. 2.3.
  6. ...
  7. 3. Web
  8. 3.1. FlutterWeb ( )
  9. ...
  10. 4. Mobile
  11. ...




トレーニング



前回我々はWebサーバがドメイン名を受信し、クライアントとの安全な接続を確立することを学んだという事実に終わりました。ただし、将来のユーザーに示すものはまだありません。スタートアップのアイデアを共有し、MVPのリリース日を発表することはできますが。このタスクには、情報Webページが適しています。FlutterWebフレームワークを使用してDartで記述しましょう。サービスのすべてのクライアントアプリケーションは、この特定のページの拡張になります。必要なプラットフォーム（web-android-iOS）の開発とアセンブリが単なるルーチンになるように、可能な限り適応性と構造化された開発を行うように努めます。







Flutterをインストールすることから始めましょう：



  • gitをインストールする
  • コマンドを使用して、Flutterのベータ版でリポジトリのクローンを作成します
    git clone https://github.com/flutter/flutter.git -b beta
  • コマンドラインからフラッターコマンドを実行するには、オペレーティングシステム内の実行可能ファイルへのパスを指定する必要があります。OS変数を開いてみましょう。







    このために、検索バーに「現在のユーザーの環境変数の変更」と入力し始めます。ウィンドウで、パス変数を選択し、[変更]をクリックします。開いたリストで、ファイルシステム内のフラッター実行可能ファイルのアドレスを使用して新しい行を作成します（例：C：\ flutter \ bin）。
  • フラッター用のVScode拡張機能をインストールする
  • VScodeを再起動し（新しいOS変数が適用されるように）、ターミナルでコマンドを使用してフラッターの状態を確認します 



    flutter doctor






    ここで最も重要なことは、フラッターがベータ版でインストールされていることです（Web開発サポート付き）
  • 今、私たちはチームと一緒にウェブ開発を活性化します 



    flutter config --enable-web


新しいプロジェクトを作成し、デバッグを開始します



チームで新しいプロジェクトを作成します 



flutter create < >


次のコマンドですぐにVScodeで開きましょう 



code < >


libフォルダー内のmain.dart ファイルを開き、F5コマンドでデバッグを開始しましょう。 おそらく最初にデバッグを開始するときに、デバッグ用のデバイスとしてChromeを選択する必要があります。main.dart ファイルの内容を削除します。空のmainメソッドとアプリケーションのルートクラスを追加します。これにより、build（）メソッドでMaterialAppのインスタンスが返されます。 次に、次のプロジェクトサブフォルダーのセットを作成します。 それぞれの目的を簡単に説明します。



































  • diは、アプリケーションコンポーネント間の通信のメカニズムです。アプリケーションが機能するために必要なすべてのサービス、リポジトリ、ネットワーククライアントがここで作成され、登録されます。GetItライブラリを使用します
  • ドメイン-データオブジェクト。データプレゼンテーションクラス
  • res-色、線、画像とフォントへのパスのインポート。静的リソースに関連するもの
  • サービス-データを操作するためのサービス
  • ui-インターフェース
  • utils-ユーティリティクラス


必要な依存関係をpubspec.yamlファイルに追加します。







UI要素をスケーリングする準備



このページは、クライアントデバイスの画面サイズとその場所（ポートレートモードまたはランドスケープモード）に応じて調整する必要があると想定されています。



背景の写真から始めましょう。それらの準備は記事の範囲を超えているので、これらの2つのリンクをここに残しておきます。





完成した画像を/ assets / imagesフォルダーに配置し、このパスをpubspec.yamlファイルのリソースに追加







します。パラメーター付きのツリー形式でリソースにアクセスすることをお勧めします。この場合、スタブの背景画像へのパス： 



images.background(bool isPortrait).stub


これを行うには、resフォルダーに、イメージアドレスクラスを使用してimages.dartファイルを作成







します。インターフェイスとフォントサイズをスケーリングするために、ScreenUtilライブラリが含まれています。その機能は2つに要約されます。



  • 「ベース」画面サイズの登録。ここでは、メインレイアウトが実行される画面の幅と高さ、およびフォントを拡大縮小する必要性を設定する必要があります。
  • スケーリング係数を数値（num）に適用するための拡張機能のセット。たとえば、100.wは、この式の結果が1920dp画面=> 100dpの場合、および幅414dp => 100x（414/1920）= 21.6dpのiPhone8画面の場合であることを意味します。つまり、5分の1になります。フォントの高さとサイズの拡張機能もあります。


ファイル/utils/screen_util_ext.dartとその中に静的初期化メソッドを作成しましょう：ルートウィジェット







のbuild（）メソッドにズーム初期化メソッドの呼び出しを追加し







ます：/utils/screen_util_ext.dartファイルにいくつかの追加の拡張子を付けてズームライブラリの機能を拡張します：















依存性注入



GetIt ライブラリを使用してアプリケーションコンポーネントを作成および登録するためのメカニズムを実装するときが来ました。lib / DI /フォルダーに、di_container.dartファイルを作成します。その中で、静的メソッドgetItInit（）を記述し、GetItコンテナのインスタンスを初期化します。最初のコンポーネントを登録しましょう-Imagesクラスのインスタンス：main（）に







初期化メソッドへの呼び出しを追加します：Images コンポーネントへのアクセスは次のようになります： 同様に、文字列を持つリソースでクラスを登録しましょう。



















スタブページ



次に、UIフォルダーで、StubScreenスタブページクラスを使用してstub.dartファイルを作成し、StatelessWidget基本クラスを拡張して、その抽象build（）メソッドをオーバーライドします。私たちのページは、画面の向きに応じて配置された、背景の写真とその前の2つの情報ブロックです。















リポジトリとサービス



リリースまでの残り時間を動的に表示するには、次のことを行う必要があります。



  1. 開発の開始日とリリース日を含む設定をサーバーから取得します
  2. 残り時間変更のイベントストリームを作成します
  3. このデータを出力ストリームに渡して結合し、UIに表示します


このデータのドメインオブジェクト（POJO）について説明しましょう。











設定を受信して​​イベントフローを作成するためのリポジトリ：











イベントロジックのサービス：







これらのコンポーネントをDIコンテナに登録します。







残り時間ウィジェット



リリースまでの残り時間は、日、時間、分、秒の4つの数値で表すことができます。これらのパラメータを列挙として表現しましょう。







拡張機能を使用してパラメータに機能を追加しましょう。







ダイヤル、番号、署名を表示するウィジェットがアニメーション化されます。このために、StatefulWidgetクラスを拡張します。その特徴は、要素（構築および表示されたビュー）がウィジェット自体ではなく、その状態（State）に対応していることです。ウィジェットとは異なり、状態は変更可能です。つまり、インスタンスを完全に再作成しなくても、そのフィールドを変更できます。











ここで、Animation、AnimationController、TickerProviderStateMixinとは何かを明確にする必要があります。..。したがって、AnimationControllerは、単純なdouble値パラメーターのラッパーです。このパラメーターの値は、0.0から1.0の範囲で直線的に変化します（反対方向に変更したり、0.0にリセットしたりすることもできます）。ただし、このパラメーターを変更するには、特別なTickerProviderStateMixinオブジェクトを使用します。これはAnimationControllerの必須パラメーターであり、グラフィックエンジンが新しいフレームを作成する準備ができていることを通知します。このような信号を受信すると、AnimationControllerは前のフレームから経過した時間を計算し、その値の値を変更する量を計算します。アニメーションオブジェクトはに加入AnimationControllerそして、AnimationController値の線形（時間内）変化に対する出力値の依存性の関数が含まれています。



状態初期化メソッドinitState（）は作成







時に1回呼び出されます：ウィジェットの状態が破棄されると、dispose（）メソッドが呼び出されます：











ウィジェットはスタック（Stack）で表され、数値とスケールのAnimatedBuilderが配置されます：







アークの形でグラフィックプリミティブを実装するために残ります：







Add 4画面上のそのようなウィジェットはスタブです：







ビルドしてリリース



アプリケーションをビルドする前に、。/ web / index.html ./web/manifest.jsonファイルとpubspec.yamlファイルで、アプリケーションの名前と説明を置き換える必要があります。



コマンドを使用して、デバッグを停止し、アプリケーションリリースをビルドします 



flutter build web


完成したアプリケーションは、。/ build / web /ディレクトリにあります。ファイル.last_build_idおよびmain.dart.js.mapはサービスファイルであり、削除できることに注意してください。

前の記事で準備したサーバーにアプリケーションを配置しましょう。これを行うには、ちょうどの内容をコピー./build/web/ディレクトリをする上/公共/私たちのサーバー： 

scp -r ./* root@91.230.60.120:/public/




結果



ソースコードgithub



質問やコメントは大歓迎です。Telegramチャンネルで作者とチャットできます。



結論の代わりに



クライアントアプリケーションは、サーバーから最初のデータ（リリース日に関する情報）を受信する準備ができています。これを行うために、4番目の記事では、スケルトンサーバーアプリケーションを作成してサーバーに配置します。


More articles:


All Articles