Quickstarters

Flutterのためのバックエンドを構築する方法は？

36min

はじめに
このチュートリアルでは、Flutterのバックエンドを構築する方法を学びます。Back4appは、オープンソースで信頼性の高いバックエンドサービス（BaaS）です。
データベース管理、クラウドファンクション、RESTful API、GraphQL API、ユーザー認証など、Back4appの重要な機能をFlutterプロジェクトに統合する方法を説明します。
リアルタイム更新をLive Queriesを使用して処理する方法も発見できます。Back4appの強力なバックエンドサーバーを使用することで、多くの手動設定を省略し、動的なFlutterアプリの作成に集中できます。
このガイドでは、Flutter開発者がクライアント側と簡単に通信できる安全でスケーラブル、かつ堅牢なバックエンド構造を設定する方法を示します。
また、ホスティング、ユーザー認証、サーバーロジックなどの重い作業をBack4appに任せる利点を強調します。これにより、自動スケーリング、高度なセキュリティ、簡素化されたメンテナンスなどの機能を利用できます。
Flutterプロジェクトがあり、バックエンドの設定に無数の時間を節約したい場合、ここが始めるのに最適な場所です。
このチュートリアルの終わりまでに、Back4appで作成できるバックエンドの種類を理解し、プロダクション準備が整ったアプリケーションのためにバックエンドサービスを拡張したり、外部APIや高度なユーザー認証などのより複雑な機能を統合する準備が整います。
始めましょう！
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウントと新しいBack4appプロジェクト
 Back4appの始め方。
アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。
基本的なFlutter開発環境
 Flutter SDKがインストールされ、設定されていることを確認してください。また、Flutter用に設定されたIDE（Android StudioやVS Codeなど）があることを確認してください。﻿
Dart（プログラミング言語）環境
通常、これはFlutterと一緒にインストールされます。エラーなしでdartパッケージをインポートできることを確認してください。
Flutterの基本に精通していること
 Flutter公式ドキュメント。
Flutterが初めての場合は、始める前に公式ドキュメントや初心者向けのチュートリアルを確認してください。
これらの前提条件がすべて整っていることを確認してください。Back4appプロジェクトが設定され、ローカルのFlutter環境が構成されていると、より簡単に進めることができます。
ステップ1 – Back4Appで新しいプロジェクトを作成し、接続する
新しいプロジェクトを作成する
Back4appでFlutterバックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください:
Back4appアカウントにログインする。
Back4appダッシュボードで「新しいアプリ」ボタンをクリックする。
アプリに名前を付ける（例：「Flutter-Backend-Tutorial」）。
﻿
プロジェクトが作成されると、Back4appダッシュボードにリストされます。このプロジェクトは、私たちが議論するすべてのバックエンド設定の基盤となります。
FlutterアプリにParse SDKをインストールして初期化する
Back4appは、データの管理、リアルタイム更新、ユーザー認証などを行うためにParseプラットフォームに依存しています。FlutterプロジェクトをBack4appに接続するには、次の手順に従ってください:
Parse Flutter SDKをアプリに追加します:
YAML
dependencies:
  parse_server_sdk_flutter: ^4.0.0
dependencies:
  parse_server_sdk_flutter: ^4.0.0
﻿
Parseパッケージをあなたのmain.dart（またはアプリを初期化する場所）にインポートします:
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!'),
        ),
      ),
    );
  }
}
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ダッシュボードから手動で行うことができます:
ダッシュボードの「データベース」セクションに移動します。
新しいクラスを作成します。（例：「Todo」）を作成し、関連するカラム（例：タイトル、isCompleted）を追加します。
新しいクラスを作成
﻿
Back4appは、スキーマの自動作成を支援する AIエージェント も提供しています。
AIエージェントを開く あなたのアプリダッシュボードまたはメニューから。
データモデルを説明する 簡単な言葉で（例：「完全なクラススキーマを持つ新しいToDoアプリを作成します。」）。
AIエージェントにスキーマを作成させる あなたのために。
﻿
これにより、データアーキテクチャのセットアップが簡素化されます。フィールドを自動的に作成したい場合は、アプリからオブジェクトの保存を開始するだけで、Parseはスキーマの作成を即座にサポートします。
AIエージェントを使用してデータモデルを作成する
Back4app AIエージェントを使用することを選択した場合は、短い説明を提供するだけで、スキーマを構築または提案してくれます。これは、Flutterプロジェクトの初期データモデリングフェーズを加速する優れた方法です。
Flutter Parse SDKを使用したデータの読み書き
以下は、Parse Flutter SDKを使用してオブジェクトを作成および取得する方法を示す簡単な例です。
Dart
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;
  }
}
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を使用できます:
Bash
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
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エンドポイントも提供しています:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
これにより、Flutterアプリに最適なアプローチを構築する柔軟性が得られます。
ライブクエリの利用
Back4appは ライブクエリ を提供しており、データのリアルタイム更新を受け取ることができます。Back4appのダッシュボード（サーバー設定）でライブクエリを有効にし、その後Parse LiveQuery Flutterクライアントを使用します。
Dart
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');
  });
}
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 を適用することもできます:
Dart
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}');
  }
}
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の例を示します:
JS
// 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 };
});
// 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を使用する:
Bash
b4a configure accountkey
b4a deploy
b4a configure accountkey
b4a deploy
﻿
ダッシュボードを使用する:
アプリのダッシュボードで、 Cloud Code > Functions に移動します。
JavaScriptコードを貼り付けます。
「 デプロイ 」をクリックします。
﻿
FlutterからCloud Codeを呼び出す
Dart
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}');
  }
}
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はパスワードのハッシュ化、セッショントークン、および安全なストレージを処理します。
Dart
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}');
  }
}
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サインイン用）が必要な場合があります。その後、次のように呼び出すことができます:
Dart
await ParseUser.loginWith('facebook', <String, dynamic>{
  'id': 'USER_FACEBOOK_ID',
  'access_token': 'FACEBOOK_ACCESS_TOKEN',
  'expiration_date': 'DATE'
});
await ParseUser.loginWith('facebook', <String, dynamic>{
  'id': 'USER_FACEBOOK_ID',
  'access_token': 'FACEBOOK_ACCESS_TOKEN',
  'expiration_date': 'DATE'
});
﻿
プロバイダーのドキュメントに従ってパラメータを調整してください。
ステップ6 – ファイルストレージの処理
ファイルストレージの設定
画像、文書、またはその他のメディアファイルを使用して保存できます ParseFile. Back4appはこれらのファイルを保護し、取得用のURLを提供します。
Dart
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}');
  }
}
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での実装
Dart
final user = ParseUser('testuser', 'password123', '[email protected]');
final signUpResponse = await user.signUp();
if (signUpResponse.success) {
  // The user will receive a verification email
}

// For password reset
final resetResponse = await ParseUser.requestPasswordReset('[email protected]');
if (resetResponse.success) {
  print('Reset email sent successfully!');
}
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 – クラウドジョブによるタスクのスケジューリング
クラウドジョブ
定期的なタスク（古いデータのクリーンアップや定期的なメールの送信など）をスケジュールしたい場合があります。クラウドジョブを使用すると、まさにそれが可能です。
JS
// 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.`;
});
// 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トリガーを使用して、ウェブフックを手動で構成することもできます。
BeforeSave WebHook
﻿
ステップ10 – Back4App管理パネルの探索
どこで見つけるか
「Back4app Admin App」は、非技術的なチームメンバーがParse Dashboardを開くことなくデータ（CRUD操作、データタスクなど）を管理できるユーザーフレンドリーなインターフェースです。
「App Dashboard > More > Admin App」に移動します。
「Enable 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アプリを強力でスケーラブルなソリューションに変えることができます。コーディングを楽しんでください！

更新日 24 Jan 2025

このページは役に立ちましたか？

Objective-Cのためのバックエンドの構築方法は？

Gatsbyのバックエンドを構築する方法は？

Flutterのためのバックエンドを構築する方法は？

はじめに

前提条件

ステップ1 – Back4Appで新しいプロジェクトを作成し、接続する

新しいプロジェクトを作成する

FlutterアプリにParse SDKをインストールして初期化する

ステップ2 – データベースの設定

データモデルの作成

AIエージェントを使用してデータモデルを作成する

Flutter Parse SDKを使用したデータの読み書き

REST APIを使用したデータの読み書き

GraphQL APIを使用したデータの読み書き

ライブクエリの利用

ステップ3 – ACLとCLPによるセキュリティの適用

ACLとCLPとは何ですか？

クラスレベルの権限の設定

コードでの ACL の設定

ステップ 4 – クラウドコード関数の作成

なぜクラウドコードなのか？

例の関数

デプロイメント

FlutterからCloud Codeを呼び出す

ステップ5 – 認証の設定

ユーザー認証を有効にする

ソーシャルログイン

ステップ6 – ファイルストレージの処理

ファイルストレージの設定

セキュリティの考慮事項

ステップ7 – メール確認とパスワードリセット

なぜそれが重要なのか

ダッシュボードの設定

Flutterでの実装

ステップ8 – クラウドジョブによるタスクのスケジューリング

クラウドジョブ

ステップ9 – ウェブフックの統合

ウェブフックとは？

ステップ10 – Back4App管理パネルの探索

どこで見つけるか

結論

次のステップ

Flutterのためのバックエンドを構築する方法は？

はじめに

前提条件

ステップ1 – Back4Appで新しいプロジェクトを作成し、接続する

新しいプロジェクトを作成する

FlutterアプリにParse SDKをインストールして初期化する

ステップ2 – データベースの設定

データモデルの作成

AIエージェントを使用してデータモデルを作成する

Flutter Parse SDKを使用したデータの読み書き

REST APIを使用したデータの読み書き

GraphQL APIを使用したデータの読み書き

ライブクエリの利用

ステップ3 – ACLとCLPによるセキュリティの適用

ACLとCLPとは何ですか？

クラスレベルの権限の設定

コードでの ACL の設定

ステップ 4 – クラウド コード関数の作成

なぜクラウド コードなのか？

例の関数

デプロイメント

FlutterからCloud Codeを呼び出す

ステップ5 – 認証の設定

ユーザー認証を有効にする

ソーシャルログイン

ステップ6 – ファイルストレージの処理

ファイルストレージの設定

セキュリティの考慮事項

ステップ7 – メール確認とパスワードリセット

なぜそれが重要なのか

ダッシュボードの設定

Flutterでの実装

ステップ8 – クラウドジョブによるタスクのスケジューリング

クラウドジョブ

ステップ9 – ウェブフックの統合

ウェブフックとは？

ステップ10 – Back4App管理パネルの探索

どこで見つけるか

結論

次のステップ

ステップ 4 – クラウドコード関数の作成

なぜクラウドコードなのか？