How to Build a CRUD App with React Native?

概要 このチュートリアルでは、back4appをクラウドバックエンドとして使用し、基本的なcrud（作成、読み取り、更新、削除）操作を実行するreact nativeアプリケーションを作成する方法を学びます。 このガイドでは、back4appでプロジェクトを作成し、柔軟なデータモデルを設定し、restful apiを使用してreact nativeアプリをバックエンドと統合する方法を説明します。 最初に、バックエンドとして機能する「 basic crud app reactnative 」というタイトルのback4appプロジェクトを作成します。その後、back4appダッシュボードでクラスとフィールドを手動で定義するか、統合されたaiエージェントを使用してデータスキーマを設計します。 バックエンドの設定が完了したら、データを管理するための使いやすいドラッグアンドドロップインターフェースを提供するback4app管理アプリを使用し、crud操作を簡単に実行できるようにします。 このガイドの終わりまでには、レコードの作成、読み取り、更新、削除ができる完全に機能するreact nativeアプリケーションが完成し、安全なユーザー認証とデータ処理もサポートされます。 主な利点 モバイルアプリの構築： react native crudアプリケーションを堅牢なバックエンドで開発する方法を学びます。 バックエンド統合： back4appを使用してスケーラブルなデータモデルを設計し、統合する方法を理解します。 簡単なデータ管理： back4appの管理アプリを使用して、アプリケーションのデータを迅速に管理します。 安全な操作： 安全なユーザー認証とデータプライバシー対策を実装します。 前提条件 始める前に、次のものを用意してください 新しいプロジェクトが設定されたアクティブなback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 react native開発環境。 node js、npm（またはyarn）、react native cliなどのツールをインストールします。expoも迅速なプロトタイピングに使用できます。 react、javascript、およびrest apiに関する知識。 リフレッシャーが必要な場合は、 react nativeのドキュメント https //reactnative dev/docs/getting started を参照してください。 ステップ 1 – back4app プロジェクトの設定 back4app プロジェクトの作成 back4app アカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンをクリックします。 プロジェクトに名前を付けます： basic crud app reactnative と入力し、セットアップを完了するための指示に従います。 新しいプロジェクトを作成 プロジェクトが作成されると、ダッシュボードに表示され、バックエンド構成の基盤が築かれます。 ステップ 2 – データモデルの作成 データの構造化 この crud アプリでは、back4app プロジェクト内にいくつかのコレクションを定義します。以下は、コア crud 機能をサポートするために必要な主要なコレクションとフィールドの例です。 1\ コレクション アイテム このコレクションは各アイテムの詳細を保存します。 フィールド タイプ 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが追加された時刻。 更新日時 日付 最新の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザーの資格情報と認証情報を管理します。 フィールド タイプ 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーの一意の識別子。 メール 文字列 ユーザーのメールアドレス（ユニークである必要があります）。 パスワードハッシュ 文字列 安全なログインのためのハッシュ化されたパスワード。 作成日時 日付 アカウントが作成された時間。 更新日時 日付 アカウントの詳細が最後に更新された時間。 これらのコレクションとそのフィールドは、back4appダッシュボードを介して定義できます。 新しいクラスを作成 データタイプを選択し、フィールド名を入力し、デフォルト値を設定し、それが必須かどうかをマークすることで、新しいフィールドを追加できます。 列を作成 スキーマ生成のためのback4app aiエージェントの使用 back4appに統合されたaiエージェントは、簡単な説明からデータスキーマを自動的に構築できます。このツールはプロジェクトのセットアップを効率化し、データモデルが必要なcrud操作をサポートすることを保証します。 aiエージェントの使い方 aiエージェントを開く back4appダッシュボードのプロジェクト設定に移動し、aiエージェントを選択します。 スキーマを説明する 必要なコレクションとフィールドの詳細な説明を入力します。 レビューと確認 aiエージェントがスキーマを提案します。それをレビューし、設定を適用するために確認します。 サンプルプロンプト create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) この方法は時間を節約し、データモデルの一貫性を確保します。 ステップ3 – データ管理のための管理アプリの使用 管理アプリの概要 back4app管理アプリは、バックエンドデータ管理を簡素化するノーコードインターフェースを提供します。そのドラッグアンドドロップ機能により、複雑なクエリを書くことなく、crud操作（レコードの追加、表示、更新、削除）を実行できます。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」をクリック そして次に選択します 「管理アプリを有効にする。」 管理者資格情報を設定： 初期の管理者アカウントを作成し、 b4aadminuser のようなシステムロールも設定します。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてアプリケーションデータを管理します。 管理アプリダッシュボード 管理アプリを通じたcrud操作の管理 管理アプリ内で、あなたは： 新しいレコードを挿入： どのコレクション（例：アイテム）でも「レコードを追加」機能を使用して新しいデータを導入します。 レコードを確認/修正： 詳細を確認するためにレコードを選択するか、そのフィールドを更新します。 レコードを削除： もはや必要のないエントリを削除します。 この簡素化されたツールは、データ管理を簡単にすることでワークフローを改善します。 ステップ4 – react nativeアプリをback4appと統合する バックエンドの設定が完了したら、react nativeアプリケーションをback4appに接続する時です。 rest apiを使用した統合 javascript用のparse sdkが利用可能ですが、react native環境では柔軟性のために標準のrest api呼び出しを使用することを選択できます。以下は、javascriptの fetch apiを使用してcrud操作を実行する方法の例です。 例：アイテムの取得 async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } export default fetchitems; 例：新しいアイテムの作成 async function createitem(title, description) { try { const response = await fetch('https //parseapi back4app com/classes/items', { 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({ title, description }) }); const data = await response json(); console log('item created ', data); } catch (error) { console error('error creating item ', error); } } export { createitem }; 同様に、適切なhttpメソッド（更新にはput/post、削除にはdelete）を使用してアイテムの更新および削除のための関数を実装できます。 これらの関数を必要に応じてreact nativeコンポーネントに統合して、crud操作を完了させてください。 ステップ5 – バックエンドセキュリティの強化 アクセス制御リスト（acl）の設定 aclを設定して記録を保護します。たとえば、アイテムが所有者のみがアクセスできるようにするには async function createprivateitem(title, description, ownerid) { try { const acl = { " " { "read" false, "write" false }, \[ownerid] { "read" true, "write" true } }; const response = await fetch('https //parseapi back4app com/classes/items', { 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({ title, description, acl acl }) }); const data = await response json(); console log('private item created ', data); } catch (error) { console error('error creating private item ', error); } } export { createprivateitem }; クラスレベルの権限設定 (clp) back4appダッシュボードを通じてコレクションのデフォルト権限を調整します。これにより、認証されたユーザーのみが特定のデータタイプと対話できるようになります。 ステップ6 – ユーザー認証の実装 ユーザー管理の設定 back4appは、認証を処理するために組み込みのユーザーコレクションを活用します。react nativeアプリでは、rest api呼び出しを使用してユーザー登録とログインを管理できます。 例 ユーザー登録 async function signup(username, password, email) { try { const response = await fetch('https //parseapi back4app com/users', { 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({ username, password, email }) }); const data = await response json(); console log('user registered successfully ', data); } catch (error) { console error('error during sign up ', error); } } export { signup }; 例 ユーザーログイン async function login(username, password) { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('logged in user ', data); } catch (error) { console error('login failed ', error); } } export { login }; このアプローチは、パスワードのリセット、セッション管理、追加の認証機能を含むように拡張できます。 結論と次のステップ 素晴らしい仕事です！あなたは、back4appと統合されたreact native crudアプリケーションを成功裏に構築しました。 このガイドでは、 basic crud app reactnative という名前のプロジェクトを設定し、アイテムとユーザーのデータスキーマを設計し、back4app管理アプリでバックエンドを管理しました。 さらに、あなたはrest apiを介してアプリを接続し、重要なセキュリティ対策とユーザー認証を実装しました。 次は何ですか？ アプリを拡張する： 高度なフィルタリング、詳細なアイテムビュー、またはリアルタイムデータ更新などの機能を追加します。 バックエンド機能を強化する： クラウド機能、サードパーティの統合、またはアクセス制御ポリシーの微調整を探ります。 学び続ける： back4appのドキュメント https //www back4app com/docs や追加のチュートリアルをチェックして、スキルをさらに磨きましょう。 コーディングを楽しんで、react nativeプロジェクトの成功を祈っています！