Building a Flutter Development Environment with VSCode and Useful Extensions
0 likes430 views
VS Code Meetup #19 - フロントエンド開発Night (2022/4/11) LT1 "VS Code による Flutter 開発環境構築 と便利な拡張機能について" https://vscode.connpass.com/event/241975/
Building a Flutter Development Environment with VSCode and Useful Extensions
- 1. VSCode による Flutter 開発環境構築 と 便利な拡張機能について 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト
- 2. Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務グループ ソリューションアーキテクト 元 Microsoft Technical Evangelist Twitter : @shosuz Shotaro Suzuki MS Eva 時代は、フロントエンドも担当。 WPF → Silverlight → Azure Mobile Apps/Xamarin, HoloLens (初代)…etc.
- 3. l Flutter の開発・デバッグ環境構築 l おすすめの拡張機能 l まとめ アジェンダ
- 5. Flutter とは︖ • Flutter 特⻑ • 開発⾔語は Dart • フロントエンド業務⽤ • Google 開発による Dart ⾔語 フレームワーク • iOS と Android アプリを1⾔語で 同時に開発 •VSCode と Android Studio が 公式エディタ • OS 依存のネイティブ機能へのア クセスも、パッケージ管理ツールが 読み込む YAML にパッケージ名 指定コードを書くだけで可能 • 例︓ ・ ファイルフォルダにアクセス • カメラ起動 • Push Notification 受信 • GPS 情報取得 • 機種情報取得 • 構築には、ビルドツールとして XCode と Android Studio が必要 https://docs.flutter.dev/get-started/install
- 6. flutter doctor コマンドで環境設定の状況をチェック • flutter doctor • flutter doctor –v で詳細 • ⾜りないものはサジェストされる • エラーが出たら修正を⾏う https://docs.flutter.dev/get-started/install
- 9. Flutter ではすべてが Widget • Widget • 使⽤するすべてのクラス • 画⾯にレンダリングするすべてのテキスト • および Flutter アプリ全体 • Widget は Stateless Widget と Stateful Widgetに分類 • Stateless Widget は状態を変更しない • Stateful Widget は、ユーザーが対話したときに状態を変更 • Stateless Widget クラスから継承するクラスを作成する • このクラスに MyApp という名前を付ける（任意の名前） • クラスの名前が⼤⽂字で始まることに注意 class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return ; } }
- 10. Flutter Tree https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree • コードを書く前に UI の実装イメージ が固まっているのが前提 • わずか1⾏で複雑なレイアウトを⼀気 に書ける
- 11. Flutter Widget Snippets https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets • よく使う Widget を⾼速で挿⼊可能 • Column とか Row 等、よく使うものの Children…と続けるのは⾯倒
- 12. Dart Data Class Generator https://marketplace.visualstudio.com/items?itemName=dotup.dart-data-class-generator • ジェネレーターは、クラスのプロパティ ま たは⽣のJSON に基づいて、クラスの コンストラクター、copyWith、toMap、 fromMap、toJson、fromJson、 toString、operator==、および hashCode メソッドを⽣成できる • その他開発プロセスをスピードアップする ための便利なクイックフィックスがいくつか あり ボイラープレートを記述したりコード⽣成を実⾏したりすることなく、Dart Data Class を簡単かつ迅速に作成
- 13. Awsome Flutter Snippets https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets • Widget の作成に関連するボイラープレート コードのほとんどを排除することにより、開発 の速度を向上 • 例︓ • StreamBuilder → streamBldr • SingleChildScrollView → singleChildSV ⼀般的に使⽤される Flutter 関数とクラスのコレクションスニペットとショートカット --------------------------------------------------------
- 14. Todo Tree https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree • ripgrep を使⽤してワークスペースで TODO や FIXME などのコメントタグを すばやく検索、アクティビティバーのツリー ビューに表⽰。 • ビューは、アクティビティバーからエクスプロー ラーペイン（または他の任意の場所）に ドラッグできる • ツリー内の TODO をクリックで、ファイルが 開き、TODOを含む⾏にカーソルが移動 • ⾒つかった TODO は、開いているファイル でも強調表⽰できる • 構成例については、 wikiを参照
- 15. Flutter Coverage https://marketplace.visualstudio.com/items?itemName=Flutterando.flutter-coverage • ツリービューをテストビューコンテナに追加 • ファイル/フォルダごとのカバレッジを⽰す flutter test --coverage テストビューでフォルダ/ファイルごとのコードカバレッジを表⽰する flutter test --coverage
- 17. GistPad https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs • 快適に GitHubGists とリポジトリーを編 集できる拡張機能 • 要旨とリポジトリを開いたり、作成したり、 削除したり、フォークしたり、スターしたりして、 クローンを作成したり、プッシュしたり、プル したりすることなく、ファイルがローカルに あるかのようにシームレスに編集可能 • コードスニペット、⼀般的に使⽤される構 成/スクリプト、プログラミング関連のメモ、 ナレッジベース、およびインタラクティブな サンプルを構築および参照するための独⾃ の開発者ライブラリのようなもの GitHub Gists とリポジトリを使⽤して、コードスニペットと開発者向けメモを管理
- 18. 参考︓pub.dev Dart ⽤ライブラリよりご紹介 Dart/Flutter package for using Elastic App Search through a simple API returning easy to handle objects https://pub.dev/packages/elastic_app_search • Elastic App Search ⽤のすぐに使⽤できる API • Elastic Cloud にデプロイされたインスタンス が必要 • Elastic App Search をすでに理解している ことを前提としつつ、クエリ作成と結果の操作 を容易にすることを⽬的 • ドキュメントの任意のフィールドに公園を含む 公園をクエリ • フラグ world_heritage_site が true に設 定された、カリフォルニアに拠点を置く公園を フィルタリング • 公園の説明のタイトルと140⽂字のスニペット のみがクエリによって返される • 最初のページをリクエスト • 50ドキュメントに制限
- 19. Flutter x Firebase サンプルアプリ構成 (CQRS) Cloud Function Firebase Firestore Elastic Cloud プロジェクト northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 https://google-cloud-day- digital-2021.es.asia- northeast1.gcp.cloud.es.io :9243 Cloud Function で同期 Firebase/Firestore ⽤ Elastic App Search 統合拡張機能 でノンコーディングで実現︕ Elastic エンタープライズサーチ 検索結果 全⽂検索クエリ データ保存 VSCode iOS Mobile App Flutter Android Mobile App Flutter
- 20. まとめ l Flutter の開発・デバッグ環境構築 l おすすめの拡張機能
- 23. Jaguʻeʼr Cloud Native #5 クラウドネイティブ設計コンペバトル 2022/4/28 13:00-15:00 https://jaguer-cloud-native.connpass.com/event/244567/ Jaguʼeʼr 会員企業所属のみです。ごめんなさい︕
- 24. Thank you for your attention!
- 25. Appendix
- 26. The Elasticsearch Platform Enterprise Search Observability Security Kibana Explore, Visualize, Engage Elasticsearch Store, Search, Analyze Integrations Connect, Collect, Alert Public cloud Hybrid On-premises In a world where endless data creates endless possibility, search helps people and organizations thrive.
- 27. 3 Solutions, 1 Stack, Deploy Anywhere Elastic Stack Kibana Elasticsearch Beats Logstash Elastic エンタープライズサーチ Elastic セキュリティ Elastic オブザーバビリティ 3 つのソリューション SaaS (AWS/Azure/GCP) IaaS (クラウド & オンプレ） Elastic Cloud on Kubernetes Elastic Cloud Elastic Cloud Enterprise 豊富なデプロイ選択肢 Kubernetes (クラウド & オンプレ） 蓄積、検索、分析 可視化 & 管理 収集
- 29. Elastic App Search • Elastic App Search は Elastic のエンタープライズサーチソリューションの⼀部 • お客様の Web サイトやアプリケーションにパワフルでスケーラブルな検索体験を追加するのに 必要なすべてのツールを提供
- 30. Elastic ＆ Google Cloud、強化されたデータ統合機能について (BigQuery, Firestore, DataFlow, GCS, PubSub) https://qiita.com/shosuz/items/9e375fea6f5016e4fc8f
- 31. Kotlin x Firebase サンプルアプリ構成 (CQRS) Cloud Function Firebase Firestore Elastic Cloud プロジェクト northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 https://google-cloud-day- digital-2021.es.asia- northeast1.gcp.cloud.es.io :9243 検索結果 全⽂検索クエリ データ保存 Cloud Function で同期 VSCode Android Mobile App Kotlin Elastic APM Agent Elastic Search UI React Web App Elastic APM Agent
- 32. Firebase 全⽂検索 https://firebase.google.com/docs/firestore/solutions/search?provider=elastic 全⽂検索 ほとんどのアプリでは、ユーザーがアプリのコンテンツを検索できるようになっています。たとえば、特定の単語を含む投稿や、特定のトピックに ついて書いたメモを検索する、といったケースが考えられます。 Cloud Firestore では、ネイティブ インデックスの作成やドキュメント内のテキスト フィールドの検索をサポートしていません。 さらに、コレクション全体をダウンロードして、クライアントサイドでフィールドを検索することは現実的ではありません。 Cloud Firestore データの全⽂検索を有効にするには、専⽤のサードパーティの検索サービスを使⽤します。これらのサービスは、単純なデ ータベース クエリで実現できる機能をはるかに上回る、⾼度なインデックス作成と検索の機能を提供します。 続⾏する前に、調査して以下の検索プロバイダのいずれかを選択してください。 ● Elastic ● Algolia ● Typesense
- 33. Kotlin x Firebase サンプルアプリ構成 (CQRS) Cloud Function Firebase Firestore Elastic Cloud プロジェクト northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 https://google-cloud-day- digital-2021.es.asia- northeast1.gcp.cloud.es.io :9243 検索結果 全⽂検索クエリ データ保存 Cloud Function で同期 VSCode Android Mobile App Kotlin Elastic APM Agent Elastic Search UI React Web App Elastic APM Agent コーディングして Firebase Deploy する必要あり 検索⽤アプリを新たに作る必要あり
- 34. Firebase/Firestore ⽤ Elastic App Search 統合 https://www.elastic.co/jp/blog/accelerate-search-experiences-with-elastic-app-search-and-google-firebase Firebase 統合 なぜこれが重要なのか - アプリケーション内で効果的な検索エクスペリエンスを 構築することは困難 - ユーザーは、ストアで商品を検索する場合も、サポート サイトの記事を検索する場合も、会社のブログに投稿 する合でも、迅速な結果を期待 - 拡張機能を使⽤して⾼速でスケーラブルで関連性の ⾼い検索エクスペリエンスを Firebase モバイルおよび Web ベースのアプリケーションに簡単に組み込める - アプリケーションに検索を追加する⽅法と、数回クリック するだけで開始する⽅法の詳細 Google Firebase 拡張機能ディレクトリ の Elastic App Search 拡張機能 Elastic App Search エンジン作成と Firebase からのドキュメント受信の設定 https://firebase.google.com/products/extensions/firestore-elastic-app-search/ Elastic 7.15 からの新機能
- 35. Kotlin x Firebase サンプルアプリ構成 (CQRS) Cloud Function Firebase Firestore Elastic Cloud プロジェクト northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 https://google-cloud-day- digital-2021.es.asia- northeast1.gcp.cloud.es.io :9243 検索結果 全⽂検索クエリ データ保存 Cloud Function で同期 VSCode Android Mobile App Kotlin Elastic APM Agent Elastic Search UI React Web App Elastic APM Agent Firebase/Firestore ⽤ Elastic App Search 統合拡張機能 でノンコーディングで実現︕ App Search 内蔵の Reference UI で Web 版 React アプリの雛形⾃動⽣成 Elastic エンタープライズサーチ