Back4appを使用したFlutter DevTools拡張機能の構築と使用

はじめに flutter devtoolsは、flutterアプリのデバッグ、検査、プロファイリングのための強力なスイートです。dartとflutter devtools拡張フレームワークを使用することで、開発者はデバッグと開発のワークフローを強化するカスタム拡張を作成できます。これらの拡張はflutterウェブアプリとして構築され、devtoolsスイートにシームレスに統合できます。 このチュートリアルでは、flutter devtools拡張を作成し、バックエンドサービスにback4appを使用するflutterアプリと統合し、カスタム拡張を使用してアプリケーションをデバッグする方法を探ります。これにより、開発プロセスを効率化し、アプリの動作に関する深い洞察を提供するカスタマイズされた開発者ツールを構築するのに役立ちます。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウント。 back4app com https //www back4app com で無料アカウントにサインアップしてください。 ローカルマシンにflutter開発環境をセットアップしてください。まだセットアップしていない場合は、 flutterインストールガイド https //flutter dev/docs/get started/install を参照してください。 dart、flutterウィジェット、およびflutter devtoolsの基本的な知識。 ステップ 1 – back4app バックエンドの設定 back4app プロジェクトを作成 あなたの back4app アカウント https //www back4app com/ にログインし、新しいプロジェクトを作成します。 parse クラスを作成 このチュートリアルでは、flutter アプリのテーマ設定データを保存するために themesettings という名前の parse クラスを作成します themename (string) テーマの名前。 primarycolor (string) テーマの主要な色。 accentcolor (string) テーマのアクセントカラー。 サンプルデータでクラスを埋める flutter アプリが使用するテーマ設定をシミュレートするために、 themesettings クラスにいくつかのレコードを追加します。 back4app 認証情報を取得 プロジェクト設定に移動して、flutter アプリを back4app に接続するために必要なアプリケーション id とクライアントキーを取得します。 ステップ 2 – flutter devtools 拡張の作成 新しい flutter プロジェクトを作成 ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します flutter create theme builder extension 拡張機能ディレクトリの設定 プロジェクトのルートディレクトリに移動し、devtools拡張機能用の新しいディレクトリを作成します mkdir devtools extension このディレクトリ内に、devtoolsに必要なメタデータを保存するための config yaml ファイルを作成します package name theme builder extension version 1 0 0 issue tracker https //github com/yourusername/theme builder extension/issues material icon assets/icon png 依存関係の追加 pubspec yaml を開き、次の依存関係を追加します dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version 実行する flutter pub get これらの依存関係をインストールします。 devtools拡張機能の作成 lib/main dart , デフォルトの内容を以下のコードに置き換えて、flutterウェブアプリを devtoolsextension ウィジェットでラップします import 'package\ flutter/material dart'; import 'package\ devtools extensions/devtools extensions dart'; import 'package\ devtools app shared/devtools app shared dart'; void main() { runapp(devtoolsextension(child themebuilderapp())); } class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child elevatedbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } これにより、アプリが devtoolsextension ウィジェットでラップされ、テーマ設定とdevtoolsスイートとの統合が処理されます。 devtools統合の追加 アプリを修正して、通常の elevatedbutton の代わりに devtoolsbutton を使用するなど、devtools特有の機能を統合します。 class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child devtoolsbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } この変更により、拡張機能のuiがdevtoolsスイートの他の部分とシームレスに統合されることが保証されます。 ステップ3 – back4appとの統合 拡張機能でparseを初期化 この拡張機能はback4appと対話するため、拡張機能でparseを初期化します import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(devtoolsextension(child themebuilderapp())); } テーマデータを取得して使用する 拡張機能でback4appからデータを使用してテーマを生成し適用します class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body futurebuilder\<list\<parseobject>>( future fetchthemes(), builder (context, snapshot) { if (!snapshot hasdata) { return circularprogressindicator(); } final themes = snapshot data!; return listview\ builder( itemcount themes length, itembuilder (context, index) { final theme = themes\[index]; return listtile( title text(theme get\<string>('themename') ?? 'no name'), subtitle text('primary color ${theme get\<string>('primarycolor')}'), ontap () { // apply theme logic }, ); }, ); }, ), ); } future\<list\<parseobject>> fetchthemes() async { final query = querybuilder\<parseobject>(parseobject('themesettings')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load themes'); } } } このコードはback4appからテーマ設定を取得し、それらをリストに表示します。テーマを選択すると、それを適用するための追加のロジックがトリガーされる可能性があります。 ステップ4 – シミュレーション環境での拡張機能のテスト シミュレーション環境で拡張機能を実行する 拡張機能を毎回コンパイルせずにテストするには、シミュレーションされたdevtools環境を使用します flutter run d chrome dart define=use simulated environment=true 接続されたアプリをシミュレートする 拡張機能が接続する別のflutterアプリを起動します。接続されたアプリのvmサービスuriとdtdサービスuriをシミュレーション環境にコピーして貼り付けます。 ステップ5 – 拡張機能の構築と公開 拡張機能を構築する 拡張機能に満足したら、プロダクション用に構築します flutter pub get flutter build web output=devtools extension/build 拡張機能を検証する devtoolsの検証コマンドを使用して、拡張機能が正しく構成されていることを確認します dart run devtools extensions validate 拡張機能を公開する 他の開発者が使用できるように、拡張機能を pub dev に公開します flutter pub publish 結論 このチュートリアルでは、flutter devtools拡張機能を作成し、バックエンドサービスのためにback4appと統合し、シミュレーション環境でテストする方法を学びました。devtoolsを拡張することで、生産性を向上させ、アプリの動作に関する新しい洞察を提供するカスタムツールを構築できます。拡張機能が準備できたら、 pub dev に公開することで、他の開発者があなたの成果を利用できるようになります。 back4appを使用したflutterに関する詳細情報は、 back4appのドキュメント https //www back4app com/docs と flutter devtoolsのドキュメント https //flutter dev/docs/development/tools/devtools/overview をご覧ください。コーディングを楽しんでください!