How to Build a Backend for Flutter?

はじめに このチュートリアルでは、 flutterのバックエンドを構築する方法 を学びます。back4appは、オープンソースで信頼性の高いバックエンドサービス（baas）です。 データベース管理、クラウドファンクション、restful api、graphql api、ユーザー認証など、back4appの重要な機能をflutterプロジェクトに統合する方法を説明します。 リアルタイム更新をlive queriesを使用して処理する方法も発見できます。back4appの強力なバックエンドサーバーを使用することで、多くの手動設定を省略し、動的なflutterアプリの作成に集中できます。 このガイドでは、flutter開発者がクライアント側と簡単に通信できる安全でスケーラブル、かつ堅牢なバックエンド構造を設定する方法を示します。 また、ホスティング、ユーザー認証、サーバーロジックなどの重い作業をback4appに任せる利点を強調します。これにより、自動スケーリング、高度なセキュリティ、簡素化されたメンテナンスなどの機能を利用できます。 flutterプロジェクトがあり、バックエンドの設定に無数の時間を節約したい場合、ここが始めるのに最適な場所です。 このチュートリアルの終わりまでに、back4appで作成できるバックエンドの種類を理解し、プロダクション準備が整ったアプリケーションのためにバックエンドサービスを拡張したり、外部apiや高度なユーザー認証などのより複雑な機能を統合する準備が整います。 始めましょう！ 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントをお持ちでない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なflutter開発環境 flutter sdk がインストールされ、設定されていることを確認してください。また、flutter用に設定されたide（android studioやvs codeなど）があることを確認してください。 https //docs flutter dev/get started/install dart（プログラミング言語）環境 通常、これはflutterと一緒にインストールされます。エラーなしで dart パッケージをインポートできることを確認してください。 flutterの基本に精通していること flutter公式ドキュメント。 https //docs flutter dev flutterが初めての場合は、始める前に公式ドキュメントや初心者向けのチュートリアルを確認してください。 これらの前提条件がすべて整っていることを確認してください。back4appプロジェクトが設定され、ローカルのflutter環境が構成されていると、より簡単に進めることができます。 ステップ1 – back4appで新しいプロジェクトを作成し、接続する 新しいプロジェクトを作成する back4appでflutterバックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください back4appアカウントにログインする 。 back4appダッシュボードの「新しいアプリ」ボタンをクリックする 。 アプリに名前を付ける （例：「flutter backend tutorial」）。 プロジェクトが作成されると、back4appダッシュボードにリスト表示されます。このプロジェクトは、私たちが議論するすべてのバックエンド設定の基盤となります。 flutterアプリにparse sdkをインストールして初期化する back4appは、データの管理、リアルタイム更新、ユーザー認証などを行うためにparseプラットフォームに依存しています。flutterプロジェクトをback4appに接続するには、次の手順に従ってください parse flutter sdkを アプリに追加します dependencies parse server sdk flutter ^4 0 0 parseパッケージを あなたの main dart にインポートします（またはアプリを初期化する場所に） import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } あなたのback4appダッシュボードで、アプリの security & keys セクションに移動して、あなたの application id , client key , および parse server url 上記のプレースホルダーをあなた自身の資格情報に置き換えてください。この初期化により、flutterアプリからのすべてのリクエストが安全にback4appインスタンスにルーティングされます。 マスターキーは、flutterアプリのクライアント側で使用してはいけないことを覚えておいてください。マスターキーが必要な場合は、サーバーまたは安全な環境に保管してください。 ステップ2 – データベースの設定 データモデルの作成 flutterアプリがback4appに接続されたら、データベーススキーマの設計を開始できます。これをback4appダッシュボードから手動で行うことができます ダッシュボードの “database” セクションに移動します。 新しいクラスを作成します。 （例 “todo”）を作成し、関連するカラムを追加します（例 title, iscompleted）。 back4appは、スキーマの自動作成を支援する aiエージェント も提供しています。 aiエージェントを開く あなたのアプリダッシュボードまたはメニューから。 データモデルを説明する 簡単な言葉で（例：「完全なクラススキーマを持つ新しいtodoアプリを作成します。」）。 aiエージェントにスキーマを作成させる あなたのために。 これにより、データアーキテクチャのセットアップが簡素化されます。フィールドを自動的に作成したい場合は、アプリからオブジェクトの保存を開始するだけで、parseはスキーマの作成を即座にサポートします。 aiエージェントを使用してデータモデルを作成する back4app aiエージェントを使用することを選択した場合は、短い説明を提供するだけで、スキーマを構築または提案してくれます。これは、flutterプロジェクトの初期データモデリングフェーズを加速する優れた方法です。 flutter parse sdkを使用したデータの読み書き 以下は、parse flutter sdkを使用してオブジェクトを作成および取得する方法を示す簡単な例です。 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } これを使えば、flutterアプリから直接back4appデータベースと対話できます。単に createtodoitem('feed the cat', false) または fetchtodos() を呼び出してデータの読み書きを行います。 rest apiを使用したデータの読み書き 他のサービスと統合する必要がある場合や、より従来のアプローチを好む場合は、back4app rest apiを使用することもできます curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo graphql apiを使用したデータの読み書き back4appはgraphqlエンドポイントも提供しています mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } これにより、flutterアプリに最適なアプローチを構築する柔軟性が得られます。 ライブクエリの利用 back4appは ライブクエリ を提供しており、データのリアルタイム更新を受け取ることができます。back4appのダッシュボード（サーバー設定）でライブクエリを有効にし、その後parse livequery flutterクライアントを使用します。 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } このサブスクリプションを使用すると、データの変更をリアルタイムでリスニングできます。これは、複数のユーザーがライブデータの更新を確認できるコラボレーティブアプリを構築するのに最適です。ホットリロードがトリガーされると、アプリが再起動しない限り、サブスクリプションは維持されます。 ステップ3 – aclとclpによるセキュリティの適用 aclとclpとは何ですか？ back4appは acl（アクセス制御リスト） と clp（クラスレベルの権限） を使用して、オブジェクトおよびクラスレベルでデータの読み取りや書き込みを制限します。このレイヤーは、データが不正アクセスから保護されることを保証します。 クラスレベルの権限の設定 あなたの back4app ダッシュボードで、 database に移動し、クラスを選択します（例：「todo」）。 に移動します class level permissions デフォルトを設定します（例：認証されたユーザーのみが新しいオブジェクトを作成できます）。 コードでの acl の設定 flutter コードからオブジェクトレベルで acl を適用することもできます。 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } clp と acl を組み合わせることで、特定のデータにアクセスまたは変更できるのは正しい人や役割だけであることを保証できます。 ステップ 4 – クラウド コード関数の作成 なぜクラウド コードなのか？ cloud codeを使用すると、バックエンドサーバーを手動で設定することなく、サーバーサイドのロジックを実行できます。これは、データの検証、外部サービスとの統合、またはバックエンドサービス（baas）で特定のルールを強制するのに最適です。 例の関数 テキストの長さを計算するcloud functionの例を示します // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); このコードは、back4app cliを介して、またはアプリのダッシュボードの cloud code でデプロイできます。 デプロイメント back4app cliを使用する b4a configure accountkey b4a deploy ダッシュボードを使用する アプリのダッシュボードで、 cloud code > functions に移動します。 javascriptコードを貼り付けます。 「 デプロイ 」をクリックします。 flutterからcloud codeを呼び出す import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } この安全なアプローチにより、機密ロジックがサーバーに留まり、flutterアプリは単にリクエストを行うだけで済みます。 ステップ5 – 認証の設定 ユーザー認証を有効にする back4appは、ユーザーのサインアップとログインを処理するために parse user クラスを使用します。デフォルトでは、parseはパスワードのハッシュ化、セッショントークン、および安全なストレージを処理します。 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } ソーシャルログイン back4appは、google、apple、facebookなどとの統合をサポートしています。各プロバイダーには特定のアプローチがあり、追加のライブラリ（例：facebookまたはgoogleサインイン用）が必要な場合があります。その後、次のように呼び出すことができます await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); プロバイダーのドキュメントに従ってパラメータを調整してください。 ステップ6 – ファイルストレージの処理 ファイルストレージの設定 画像、文書、またはその他のメディアファイルを parsefile を使用して保存できます。back4appはこれらのファイルを保護し、取得用のurlを提供します。 import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } セキュリティの考慮事項 ファイルレベルのセキュリティとaclを組み合わせることで、誰がファイルにアクセスできるか（公開、認証されたユーザー、または制限されたユーザー）を定義できます。これにより、ファイルデータが安全に保たれます。 ステップ7 – メール確認とパスワードリセット なぜそれが重要なのか メール確認は、ユーザーが提供したメールアドレスを所有していることを確認し、パスワードリセットの流れはユーザーエクスペリエンスとセキュリティを向上させます。 ダッシュボードの設定 アプリの email settings に移動します。 email verification と password reset を有効にします。 必要に応じて、メールテンプレートやカスタムドメインを設定します。 これらの設定により、flutterアプリが自動的にユーザーの所有権チェックとパスワード回復を処理できるようになります。 flutterでの実装 final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } ステップ8 – クラウドジョブによるタスクのスケジューリング クラウドジョブ 定期的なタスク（古いデータのクリーンアップや定期的なメールの送信など）をスケジュールしたい場合があります。クラウドジョブを使用すると、まさにそれができます。 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); このコードをデプロイしたら、 アプリ設定 > サーバー設定 > バックグラウンドジョブ に移動してスケジュールを設定します。 ステップ9 – ウェブフックの統合 ウェブフックとは？ ウェブフックを使用すると、特定のイベントが発生したとき（新しいオブジェクトを保存するなど）に、back4appアプリが外部サービスにhttpリクエストを送信できます。これは、サードパーティツールとの統合に最適です。 back4appダッシュボードの その他 > ウェブフック に移動し、 ウェブフックを追加 します。 エンドポイントとトリガーを設定します（例：「todoに新しいレコード」）。 cloud codeでbeforesaveまたはaftersaveトリガーを使用して、ウェブフックを手動で構成することもできます。 ステップ10 – back4app管理パネルの探索 どこで見つけるか 「 back4app admin app 」は、非技術的なチームメンバーがparse dashboardを開くことなくデータ（crud操作、データタスクなど）を管理できるユーザーフレンドリーなインターフェースです。 「 app dashboard > more > admin app 」に移動します。 「 enable admin app 」をクリックします。 管理ユーザーを作成し、サブドメインを選択し、新しく作成した資格情報でログインします。admin appは迅速なデータレビューと修正を支援します。 結論 このチュートリアルでは、 flutterのバックエンドを構築する方法 をback4appとparse flutter sdkを使用して学びました。 クラスを作成し、データを保存し、リアルタイムクエリを設定し、aclとclpでセキュリティを適用し、cloud functionsを書き、タスクをスケジュールし、webhookを統合し、back4app管理パネルを探索しました。 このアプローチは、複雑なサーバー設定ではなく、flutterクライアント側に集中できるようにすることで、開発を加速します。 現在持っている最終的な文字列は、restful api、ユーザー認証、および簡単なデータ操作を活用した機能的で安全なバックエンドです。 追加のcloud functions、外部api呼び出し、またはカスタムロールなど、いつでもより高度な機能を統合できます。 次のステップ 本番環境に準備する 高度なキャッシング、分析、またはロールベースのアクセス制御を実装します。 アプリを拡張する サードパーティサービスを統合するか、特化したビジネスロジックのためにさらにcloud functionsを構築します。 back4appのドキュメントを参照する 高度なセキュリティ、パフォーマンスチューニング、ログ分析などを探ります。 もっと学ぶ ライブチャットアプリ、位置情報サービス、またはより複雑なデータ構造のチュートリアルをチェックしてください。それらをflutterプロジェクトと組み合わせて、実際のユースケースに活用します。 この設定を継続的に洗練させることで、flutterアプリを強力でスケーラブルなソリューションに変えることができます。コーディングを楽しんでください！