How to Build a Backend for React Native?

このチュートリアルでは、 React Nativeのバックエンドを構築する方法を学びます。

私たちはクロスプラットフォームの互換性に焦点を当て、データ管理、ユーザー認証、リアルタイムデータのためにBack4Appの重要な機能を統合する方法を示します。

RESTおよびGraphQL APIを活用することで、iOSおよびAndroidプラットフォームの両方で動作するReact Nativeプロジェクトを開発でき、ネイティブコンポーネントとモバイルアプリケーション全体でシームレスな体験を保証します。

安全なユーザーログインの実装、タスクのスケジューリング、リアルタイムアプリケーションの使用により、フルスタック開発者の旅が容易になります。

また、Back4Appの環境がホスティング、データベース、セキュリティレイヤーを含むサービスのセットアップに必要な時間を短縮できることもわかります。

最後には、あなたのReact Nativeアプリをサポートし、大規模なモバイルソリューションの構築への道を開く堅牢なバックエンド構造を持つことになります。

このガイドを完了すると、アプリを高度な機能で拡張したり、サードパーティサービスを統合したり、プロジェクトを生産準備が整ったプラットフォームに変えたりする準備が整います。

Back4AppとReact Nativeを使って、現代のモバイルアプリ開発に飛び込んでみましょう！

始める前に、これらの前提条件が整っていることを確認してください。Back4Appプロジェクトを作成し、ローカルのReact Native環境を設定しておくことで、スムーズなプロセスが確保されます。

React Nativeアプリのモバイルバックエンドを構築する最初のステップは、Back4Appで新しいプロジェクトを作成することです。次の手順に従ってください:

プロジェクトが作成されると、Back4Appダッシュボードに表示されます。この新しいプロジェクトを使用して、React Nativeアプリのデータを管理し、セキュリティを構成します。

ウェブベースのReactアプリとは異なり、React Native開発ではデータの取得と操作のために直接HTTPリクエストが必要になることがよくあります。私たちはREST API（またはGraphQL API）に焦点を当てているため、Parse SDKの代わりに、認証されたリクエストを送信するためにBack4Appキーが必要です。

このステップは、モバイルアプリケーションがBack4Appと安全に通信できることを保証します。

Back4Appは、堅牢なデータ管理機能を含むReact Nativeアプリのための幅広いバックエンドオプションを提供します。ダッシュボードを通じてクラスを作成し、フィールドを追加し、関係を定義できます。リアルタイムアプリケーションを構築する場合でも、よりシンプルなCRUDアプリを作成する場合でも、Back4Appのダッシュボードはデータを簡単に保存し、整理するのに役立ちます。

Back4Appはさまざまなデータ型をサポートしています: 文字列, 数値, ブール値, オブジェクト, 日付, ファイル, ポインタ, 配列, 関係, ジオポイント, および ポリゴン. 新しいデータを送信するときに、Parseにフィールドを自動作成させることもできます。

希望する場合は、Back4App AIエージェントを使用できます:

これにより、React Nativeプロジェクトの初期段階で時間を節約できます。

一般的なReact Native開発では、ネイティブの fetch APIや、 axios のようなサードパーティライブラリを使用してREST APIを処理できます。以下はcURLを使用した例で、これを fetch に適応できます。

POST（Todoを作成）：

GET（Todosを取得）：

あなたのReact Nativeアプリでは、fetchを使って同じことができます:

GraphQLを好む場合、Back4AppはGraphQLエンドポイントを提供します。以下は新しいレコードを作成するためのミューテーションの例です:

GraphQLクエリは、apollo-clientのようなライブラリや、単純なfetch呼び出しを使用して実行できます:

リアルタイムデータのために、Back4Appにはライブクエリがありますが、通常はParse SDKが必要です。このチュートリアルではREST呼び出しに焦点を当てているため、後で使用する予定がある場合は、アプリのサーバー設定でライブクエリを有効にできます。リアルタイムデータは、React Nativeアプリでユーザーを即座に更新するのに役立ちます。よりシンプルなアプローチとしては、自分の間隔でサーバーをポーリングするか、サードパーティのツールに依存することができます。

Back4Appは、あなたのバックエンドを ACL（アクセス制御リスト） と CLP（クラスレベルの権限） で保護します。これにより、オブジェクトとクラスの両方のレベルでデータを保護できます。これは、商用グレードのモバイルアプリ開発における安全なユーザー権限を実装するために重要です。

詳細については、次を確認してください アプリセキュリティガイドライン.

クラウドコードを使用すると、Back4App上でサーバーサイドスクリプトを実行して、バリデーション、トリガー、外部API呼び出しの処理などのタスクを行うことができます。クライアントから隠しておくべきロジックを制御できるため、React Nativeプロジェクトのセキュリティが向上します。

以下は、サーバーサイドの main.js に書く例です。RESTを通じてReact Nativeアプリから呼び出すことができます:

React NativeアプリからREST APIを直接使用します:

この柔軟性により、クライアントに機密情報を公開することなくビジネスロジックを統合できるため、より効率的なフルスタック開発者になります。

Back4Appは、Parse Userクラスを使用してユーザー認証を管理します。React NativeでParse SDKを使用していなくても、直接HTTPリクエストを使用して登録、ログイン、またはログアウトできます。

ユーザーをサインアップする（REST）：

ログインする（REST）：

これらのリクエストは、ユーザーセッションを管理するためにReact Nativeアプリに保存できるセッショントークンを返します。これにより、行う各リクエストが認証され、セキュアなモバイル体験を構築できます。

Back4Appは、特化したフローを通じてソーシャルログイン（Google、Facebook、Apple）をサポートしています。OAuthアプリを構成するには、ソーシャルログインのドキュメントを参照し、適切なトークンをBack4Appに送信する必要があります。

Back4Appは、React Nativeアプリのファイルを保存できます。オブジェクトに添付するか、直接アップロードできます。RESTを使用しているため、以下はファイルをアップロードする例です（Base64エンコード）：

レスポンスには、データベースに保存できるURLが返されます。React Nativeアプリからは、fetchを使用して、ファイルをblobまたはフォームデータとして送信できます。

不正なアップロードを防ぐために、fileUploadオプションをParse Server Settingsで構成してください。たとえば、認証されたユーザーからのみアップロードを許可することができます。これにより、ファイルストレージを含むサービスが保護されます。

メールの所有権を確認することは、安全なユーザーフローを実装するための鍵です。Back4Appは、メール確認とパスワードリセットのための組み込みツールを提供しています。

パスワードを忘れたユーザーは、リセットリクエストをトリガーできます：

Back4Appはユーザーにパスワードリセットのメールを送信します。この便利さは、React Nativeアプリで別のメールサーバーを設定する手間を省いてくれます。

クラウドジョブは、データのクリーンアップや日次レポートの送信など、定期的なタスクを自動化するのに役立ちます。以下は、main.jsの例です。

このコードをデプロイしたら、サーバー設定 > バックグラウンドジョブに移動してスケジュールします。これにより、手動での介入なしに、iOSおよびAndroidプラットフォーム全体でデータが新鮮に保たれます。

Webhookは、イベントが発生するたびにバックエンドが外部サービスに通知することを可能にします。たとえば、新しいTodoを作成した際にSlackや決済ゲートウェイに通知することができます。

Cloud Codeトリガー内でWebhookをコーディングすることもでき、HTTPリクエストを投稿したり、サードパーティAPIと統合したりできます。これにより、バックエンドの機能が幅広い外部サービスに拡張されます。

「Back4App管理パネル」は、非技術者がデータを管理するためのユーザーフレンドリーなインターフェースです。特に、データモデルに直接アクセスする必要がある製品オーナー、クライアントの代表者、またはサポートスタッフにとって便利です。

ログインすると、ユーザーやチームはコードを書くことなく、レコードを表示、編集、または削除できます。このアプローチは、データ管理とコラボレーションを迅速にサポートします。

このガイドでは、React NativeアプリケーションのバックエンドをBack4Appを使用して構築する方法を学びました。これには次の内容が含まれます:

これらのツールと機能を使用することで、あなたのReact Nativeプロジェクトは信頼性が高くスケーラブルなフルスタックソリューションに成長できます。リアルタイムデータ、ユーザーセキュリティ、モバイルアプリケーションの他の重要な側面を扱う準備が整いました。スキルを磨き、iOSおよびAndroidプラットフォーム全体で強力なモバイル体験を作成するために、Back4Appドキュメントを引き続き探索してください。