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アカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料でサインアップしてください。その後、ガイドに従ってプロジェクトを準備します。 基本的なreact native開発環境 「 react native cliクイックスタート https //reactnative dev/docs/environment setup 」または「 expo cli https //docs expo dev/get started/installation/ 」を使用できます。node jsがインストールされていることを確認してください。 node js（バージョン14以上）がインストールされていること npmパッケージをインストールし、ローカル開発サーバーを実行するためにnode jsが必要です。 node jsのインストール https //nodejs org/en/download/ javascriptと基本的なreact nativeの概念に慣れていること react native公式ドキュメント。 https //reactnative dev/ react native開発が初めての場合は、まずドキュメントや初心者向けのチュートリアルを確認してください。 始める前に、これらの前提条件が整っていることを確認してください。back4appプロジェクトを作成し、ローカルのreact native環境を設定しておくことで、スムーズなプロセスが確保されます。 ステップ1 – back4appで新しいプロジェクトを作成し、接続する 新しいプロジェクトを作成する react nativeアプリのモバイルバックエンドを構築する最初のステップは、back4appで新しいプロジェクトを作成することです。次の手順に従ってください back4appアカウントにログインする 。 back4appダッシュボードで「新しいアプリ」ボタンをクリックする 。 アプリに名前を付ける （例：「reactnative backend tutorial」）。 プロジェクトが作成されると、back4appダッシュボードに表示されます。この新しいプロジェクトを使用して、react nativeアプリのデータを管理し、セキュリティを構成します。 アプリケーションキーの取得 ウェブベースのreactアプリとは異なり、react native開発ではデータの取得と操作のために直接httpリクエストが必要になることがよくあります。私たちは rest api （または graphql api ）に焦点を当てているため、parse sdkの代わりに、認証されたリクエストを送信するためにback4appキーが必要です。 parseキーを取得する back4appダッシュボードで、アプリの アプリ設定 または セキュリティとキー セクションを開いて、 アプリケーションid , rest apiキー , および graphqlエンドポイント （通常は https //parseapi back4app com/graphql )を見つけます。 rest apiキーをメモする react nativeの fetch または axios ヘッダーに含めて、各リクエストを認証します。 このステップは、モバイルアプリケーションがback4appと安全に通信できることを保証します。 ステップ2 – データベースの設定 back4appは、堅牢なデータ管理機能を含むreact nativeアプリのための幅広いバックエンドオプションを提供します。ダッシュボードを通じてクラスを作成し、フィールドを追加し、関係を定義できます。リアルタイムアプリケーションを構築する場合でも、よりシンプルなcrudアプリを作成する場合でも、back4appのダッシュボードはデータを簡単に保存し、整理するのに役立ちます。 データモデルの作成 「データベース」セクションに移動します あなたのback4appダッシュボードで。 新しいクラスを作成します （例：「todo」）および関連するカラムを追加します title （文字列）および iscompleted （ブール値）。 back4appはさまざまなデータ型をサポートしています 文字列 , 数値 , ブール値 , オブジェクト , 日付 , ファイル , ポインタ , 配列 , 関係 , ジオポイント , および ポリゴン 新しいデータを送信するときに、parseにフィールドを自動作成させることもできます。 aiエージェントを使用したデータモデルの作成 希望する場合は、back4app aiエージェントを使用できます aiエージェントを開く あなたのアプリダッシュボードから。 データモデルを説明する 簡単な言葉で（例：「タイトルとiscompletedフィールドを持つtodoクラスを作成します。」）。 aiエージェントにスキーマを作成させる あなたのために。 これにより、react nativeプロジェクトの初期段階で時間を節約できます。 rest apiを使用したデータの読み取りと書き込み 一般的なreact native開発では、ネイティブの fetch apiや、 axios のようなサードパーティライブラリを使用してrest apiを処理できます。以下はcurlを使用した例で、これを fetch に適応できます。 post（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 get（todosを取得）： curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo あなたのreact nativeアプリでは、 fetch を使って同じことができます async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } graphql apiを使用したデータの読み取りと書き込み graphqlを好む場合、back4appはgraphqlエンドポイントを提供します。以下は新しいレコードを作成するためのミューテーションの例です mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } graphqlクエリは、 apollo client のようなライブラリや、単純な fetch 呼び出しを使用して実行できます async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } ライブクエリの使用（オプション） リアルタイムデータのために、back4appにはライブクエリがありますが、通常はparse sdkが必要です。このチュートリアルではrest呼び出しに焦点を当てているため、後で使用する予定がある場合は、アプリのサーバー設定でライブクエリを有効にできます。リアルタイムデータは、react nativeアプリでユーザーを即座に更新するのに役立ちます。よりシンプルなアプローチとしては、自分の間隔でサーバーをポーリングするか、サードパーティのツールに依存することができます。 ステップ3 – aclとclpによるセキュリティの適用 簡単な概要 back4appは、あなたのバックエンドを acl（アクセス制御リスト） と clp（クラスレベルの権限） で保護します。これにより、オブジェクトとクラスの両方のレベルでデータを保護できます。これは、商用グレードのモバイルアプリ開発における安全なユーザー権限を実装するために重要です。 ステップバイステップ クラスレベルの権限（clp） アプリの データベース セクションに移動し、任意のクラスを開いて「セキュリティと権限」に切り替えます。さまざまなユーザー役割や公開アクセスのために読み取り/書き込み権限を調整します。 acl（アクセス制御リスト） restリクエストに acl フィールドを含めることで、オブジェクトごとのアクセス制御を適用できます。例えば 詳細については、次を確認してください アプリセキュリティガイドライン https //www back4app com/docs/security/parse security ステップ4 – クラウドコード関数の作成 なぜクラウドコードなのか クラウドコードを使用すると、back4app上でサーバーサイドスクリプトを実行して、バリデーション、トリガー、外部api呼び出しの処理などのタスクを行うことができます。クライアントから隠しておくべきロジックを制御できるため、react nativeプロジェクトのセキュリティが向上します。 例の関数 以下は、サーバーサイドの main js に書く例です。restを通じてreact nativeアプリから呼び出すことができます // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); デプロイメント back4app cli cliをインストールし、アカウントキーを設定して、 b4a deploy を実行します。 ダッシュボード また、 cloud code > functions に移動し、コードを main js に貼り付けて、 デプロイ をクリックします。 関数の呼び出し（rest経由） react nativeアプリからrest apiを直接使用します async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } この柔軟性により、クライアントに機密情報を公開することなくビジネスロジックを統合できるため、より効率的なフルスタック開発者になります。 ステップ5 – 認証の設定 ユーザー認証を有効にするまたは設定する back4appは、 parse user クラスを使用してユーザー認証を管理します。react nativeでparse sdkを使用していなくても、直接httpリクエストを使用して登録、ログイン、またはログアウトできます。 ユーザーをサインアップする（rest）： curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users ログインする（rest）： curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login これらのリクエストは、ユーザーセッションを管理するためにreact nativeアプリに保存できるセッショントークンを返します。これにより、行う各リクエストが認証され、セキュアなモバイル体験を構築できます。 ソーシャルログイン back4appは、特化したフローを通じてソーシャルログイン（google、facebook、apple）をサポートしています。oauthアプリを構成するには、 ソーシャルログインのドキュメント https //www back4app com/docs/platform/sign in with apple を参照し、適切なトークンをback4appに送信する必要があります。 ステップ6 – ファイルストレージの取り扱い ファイルストレージの設定 back4appは、react nativeアプリのファイルを保存できます。オブジェクトに添付するか、直接アップロードできます。restを使用しているため、以下はファイルをアップロードする例です（base64エンコード）： curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png レスポンスには、データベースに保存できるurlが返されます。react nativeアプリからは、 fetch を使用して、ファイルをblobまたはフォームデータとして送信できます。 セキュリティに関する考慮事項 不正なアップロードを防ぐために、 fileupload オプションを parse server settings で構成してください。たとえば、認証されたユーザーからのみアップロードを許可することができます。これにより、ファイルストレージを含むサービスが保護されます。 ステップ7 – メール確認とパスワードリセット 概要 メールの所有権を確認することは、安全なユーザーフローを実装するための鍵です。back4appは、メール確認とパスワードリセットのための組み込みツールを提供しています。 back4appダッシュボードの設定 アプリ設定を開く 。 メール設定の下で メール確認を有効にします。 パスワードリセットと確認メッセージのための テンプレートをカスタマイズします。 コード/実装 パスワードを忘れたユーザーは、リセットリクエストをトリガーできます： curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset back4appはユーザーにパスワードリセットのメールを送信します。この便利さは、react nativeアプリで別のメールサーバーを設定する手間を省いてくれます。 ステップ8 – クラウドジョブを使ったタスクのスケジューリング クラウドジョブの役割 クラウドジョブは、データのクリーンアップや日次レポートの送信など、定期的なタスクを自動化するのに役立ちます。以下は、 main 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); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); このコードをデプロイしたら、 サーバー設定 > バックグラウンドジョブ に移動してスケジュールします。これにより、手動での介入なしに、iosおよびandroidプラットフォーム全体でデータが新鮮に保たれます。 ステップ 9 – webhookの統合 定義 webhookは、イベントが発生するたびにバックエンドが外部サービスに通知することを可能にします。たとえば、新しいtodoを作成した際にslackや決済ゲートウェイに通知することができます。 設定 back4appダッシュボードの more > webhooks に移動します。 希望する外部エンドポイントを指す新しいwebhookを追加します。 react nativeアプリのデータ変更がwebhookをトリガーするタイミングを定義するためにトリガーを設定します。 cloud codeトリガー内でwebhookをコーディングすることもでき、httpリクエストを投稿したり、サードパーティapiと統合したりできます。これにより、バックエンドの機能が幅広い外部サービスに拡張されます。 ステップ10 – back4app管理パネルの探索 どこで見つけるか 「 back4app管理パネル 」は、非技術者がデータを管理するためのユーザーフレンドリーなインターフェースです。特に、データモデルに直接アクセスする必要がある製品オーナー、クライアントの代表者、またはサポートスタッフにとって便利です。 機能 管理アプリを有効にする には、 アプリダッシュボード > その他 > 管理アプリ を選択します。 管理ユーザーを作成する （ユーザー名/パスワード）。 サブドメインを選択する ことで、迅速でコード不要のデータベースアクセスが可能になります。 ログインすると、ユーザーやチームはコードを書くことなく、レコードを表示、編集、または削除できます。このアプローチは、データ管理とコラボレーションを迅速にサポートします。 結論 このガイドでは、 react native アプリケーションのバックエンドをback4appを使用して構築する方法を学びました。これには次の内容が含まれます react nativeアプリのために、安全なバックエンドを作成し、クロスプラットフォームの互換性を実装すること。 restおよびgraphql apiを使用したデータ管理の設定。 機密データを保護するためのaclとclpの設定。 サーバーサイドロジックのためのcloud codeの記述。 ユーザー認証とメール確認の処理。 直接アップロードによるファイルストレージの管理。 cloud jobsを使用したバックグラウンドタスクのスケジューリング。 外部サービスを統合するためのwebhooksの使用。 簡単なデータベース管理のためのback4app管理パネルの探索。 これらのツールと機能を使用することで、あなたのreact nativeプロジェクトは信頼性が高くスケーラブルなフルスタックソリューションに成長できます。リアルタイムデータ、ユーザーセキュリティ、モバイルアプリケーションの他の重要な側面を扱う準備が整いました。スキルを磨き、iosおよびandroidプラットフォーム全体で強力なモバイル体験を作成するために、 back4appドキュメント https //www back4app com/docs/ を引き続き探索してください。 次のステップ react nativeアプリを強化する 高度なセキュリティと役割ベースのアクセス制御を使用して。 リアルタイム更新を試す リアルタイムアプリケーションのためのライブクエリを使用して（必要に応じて）。 外部apiを統合する 支払いゲートウェイやソーシャルログインを含むサービス。 パフォーマンスを向上させる キャッシングやクラウドファンクションの最適化を通じて。 さらに深く掘り下げる back4appの公式ドキュメント https //www back4app com/docs/ を参照して追加機能をアンロックする。