How to Develop a Basic CRUD Mobile App with NativeScript?

概要 このガイドでは、nativescriptを使用してフル機能のcrud（作成、読み取り、更新、削除）モバイルアプリケーションを作成します。 このチュートリアルでは、プロジェクトの設定、back4app上での堅牢なバックエンドの構成、データをシームレスに管理・更新するためのnativescriptフロントエンドの統合を行います。 まず、データ操作の基盤となる basic crud app ns という新しいback4appプロジェクトを立ち上げます。その後、コレクションとフィールドを手動で設定するか、back4app aiエージェントを活用して柔軟なデータベーススキーマを定義します。 次に、データ操作を簡単に行うために設計されたノーコードインターフェースであるback4app admin appを利用して、crudタスクを効率的に実行します。 最後に、rest apiを使用してnativescriptモバイルアプリをback4appと統合し、高度なアクセス制御でバックエンドのセキュリティを確保します。 このチュートリアルの終わりには、基本的なcrud操作を実行するだけでなく、ユーザー認証と安全なデータ処理を組み込んだ、商用利用可能なモバイルアプリケーションが完成します。 主な洞察 信頼性の高いバックエンドを使用してデータを効率的に管理するcrudモバイルアプリの構築技術を習得します。 スケーラブルなデータベースを設計し、nativescriptフロントエンドとシームレスに統合する方法を学びます。 データ管理を簡素化するために、ドラッグアンドドロップの管理インターフェース（back4app admin app）を使用する方法を発見します。 aclとクラスレベルの権限を使用してバックエンドを保護するためのベストプラクティスを理解します。 前提条件 新しいプロジェクトが設定されたback4appアカウント。 支援が必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 nativescript開発環境。 nativescript cliをインストールし、 nativescriptのドキュメント https //docs nativescript org/start/quick setup に従って環境を設定します。 javascript/typescript、nativescript、およびrestful apiの基本知識。 必要に応じて、 nativescriptガイド https //docs nativescript org/ に慣れてください。 始める前に、次のことを確認してください ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの設立 back4appダッシュボードにログインします。 「新しいアプリ」オプションを選択します。 プロジェクトに名前を付けます basic crud app ns と入力し、指示に従って作成します。 新しいプロジェクトを作成 プロジェクトが設定されると、ダッシュボードに表示され、バックエンドの設定と管理の準備が整います。 ステップ2 – データベーススキーマの設計 データモデルの作成 このcrudモバイルアプリでは、主要なコレクションを作成します。以下は、スキーマを設定するためのサンプルコレクションと、基本的な操作を実行するために必要なフィールドとデータ型です。データの作成、読み取り、更新、削除を可能にします。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保持しています。 フィールド データ型 説明 id オブジェクトid 自動生成された主識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの短い要約。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 アイテムが最後に変更されたタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報と詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された主識別子。 ユーザー名 文字列 ユーザーのユニークなユーザー名。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 安全にハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 ユーザープロファイルの最終更新タイムスタンプ。 これらのコレクションは、back4appダッシュボードで新しいクラスを追加し、それぞれの列を定義することで手動で作成できます。 新しいクラスを作成 各フィールドをデータ型を選択し、名前を付け、デフォルト値や要件を指定することで定義します。 カラムを作成 back4app aiエージェントを利用したスキーマ設定 back4app aiエージェントは、希望するコレクションとフィールドを説明するプロンプトに基づいてデータベーススキーマを自動生成できる、ダッシュボード内の効率的なツールです。この機能はプロセスを簡素化し、一貫性を確保します。 aiエージェントを活用する方法 aiエージェントを起動する back4appのダッシュボードまたはプロジェクト設定からアクセスします。 データモデルを詳細に説明する 必要なコレクションとフィールドを概説するプロンプトを入力します。 レビューと確認 生成されたスキーマの提案を確認し、プロジェクトに適用します。 サンプルプロンプト create these collections for my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) このプロセスは時間を節約し、スキーマが一貫して最適化されていることを保証します。 ステップ 3 – 管理アプリの有効化とcrud操作の実行 管理アプリの紹介 back4app管理アプリは、バックエンドデータを簡単に管理するためのノーコードインターフェースを提供します。ドラッグアンドドロップのデザインにより、迅速かつ効果的なcrud操作が可能です。 管理アプリを有効にする方法 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 そして、次にクリックします 「管理アプリを有効にする」。 管理者の資格情報を設定 最初の管理者ユーザーを作成することで、役割（例： b4aadminuser ) とシステムコレクションを確立します。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてコレクションの管理を開始します。 管理アプリダッシュボード 管理アプリでのcrud操作の実行 管理アプリ内で、あなたは レコードを作成 任意のコレクション（例えば、アイテム）内の「レコードを追加」オプションを使用して、新しいエントリを挿入します。 レコードを読み取り/修正 任意のレコードをクリックして、その詳細を表示したり、情報を編集したりします。 レコードを削除 不要になったレコードを削除するオプションを選択します。 この直感的なツールは、データ管理タスクを簡素化することでユーザーエクスペリエンスを向上させます。 ステップ4 – nativescriptとback4appの接続 バックエンドを設定し、admin appを通じてデータを管理した後、次のステップはnativescriptモバイルアプリをback4appにリンクすることです。 統合のためのrest apiの使用 このシナリオではsdk統合がnativescriptに最適でない可能性があるため、crud操作を実行するためにrest apiを利用できます。 例：restを使用したデータの取得 以下は、nativescriptサービスファイルでrest呼び出しを使用してback4appデータベースからアイテムを取得する方法の例です。 // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function fetchitems() { try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = response content tojson(); return data results; } catch (error) { console error('error fetching items ', error); throw error; } } nativescriptコンポーネント内で同様のrest api呼び出しを統合して、作成、更新、削除操作を処理します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の実装 各オブジェクトにaclを設定してデータを保護します。たとえば、プライベートアイテムを作成するには、次のアプローチを使用します // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function createprivateitem(itemdata { title string; description string }, ownerid string) { const payload = { title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }; try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('error creating item ', error); throw error; } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを調整してデフォルトのアクセス権を定義します。これにより、認可されたユーザーのみが機密データにアクセスまたは変更できることが保証されます。 ステップ6 – ユーザー認証 アカウント管理の設定 back4appはparseのユーザークラスを利用して認証を管理します。nativescriptアプリで、以下のように登録およびログインプロセスを実装します。 例 ユーザー登録 // app/services/auth service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function signup(username string, password string, email string) { const payload = { username, password, email }; try { const response = await http request({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('sign up error ', error); throw error; } } ログインやユーザーセッションの管理には、同様の方法を使用できます。ソーシャルログイン、メール確認、パスワードリセットなどの追加機能は、back4appダッシュボードを通じて設定できます。 ステップ7 – 結論と今後の方向性 よくできました！これで、nativescriptとback4appを使用して完全な基本crudモバイルアプリケーションを作成しました。 あなたのプロジェクト、 basic crud app ns には、アイテムとユーザーのコレクションを持つ明確に定義されたバックエンドが含まれており、admin appを介してシームレスに管理されています。 また、nativescriptフロントエンドをrest apiを通じてback4appと統合し、堅牢なaclとclpでデータを保護しました。 次のステップ： モバイルアプリを強化する： 詳細ビュー、検索機能、プッシュ通知などの機能を追加します。 機能を拡張する： cloud functionsやサードパーティapiサービスなどの高度なバックエンド機能を統合します。 さらなる学習： スキルを磨くために、 back4appのドキュメント https //www back4app com/docs や追加のnativescriptリソースを探求します。 コーディングを楽しんで、今後のモバイルアプリプロジェクトに幸運を祈ります！