NativeScriptのバックエンドを構築する方法は?
このチュートリアルでは、NativeScriptのバックエンドを構築する方法を学びます。これは、モバイルアプリのバックエンド開発を簡素化するオープンソースプラットフォームであるBack4appを使用します。
データベース管理、Cloud Code Functions、RESTおよびGraphQL APIエンドポイント、ユーザー認証、リアルタイムクエリ(ライブクエリ)など、Back4appの重要な機能を統合する方法を説明し、NativeScriptアプリのための安全でスケーラブルなバックエンドを作成します。
また、Back4appが手動のサーバーおよびデータベース構成と比較して、セットアップ時間を大幅に短縮する方法を発見します。
高度なセキュリティメカニズム、Cloud Jobsを使用したタスクのスケジューリング、サードパーティサービスとの接続にWebhookを使用する方法を探ります。
このガイドの終わりまでに、NativeScript Coreを活用した柔軟なバックエンドを持つことができ、これがNativeScriptのクロスプラットフォームモバイルソリューションを支えています。
この基盤をもとに、必要に応じて独自のカスタムロジックや外部APIを統合する準備が整います。これは、製品準備が整ったNativeScriptアプリを開発するための大きなステップとなります。
- Node.js(バージョン14以上)がインストールされていること npmパッケージをインストールし、NativeScript CLIを実行するためにNode.jsが必要です。 Node.jsのインストール
- JavaScriptとNativeScript Coreに対する理解 NativeScript公式ドキュメント。 NativeScriptが初めての場合は、始める前に公式ドキュメントや初心者向けのチュートリアルを確認してください。
始める前に、これらの前提条件がすべて整っていることを確認してください。Back4appプロジェクトを設定し、ローカルのNativeScript環境を準備しておくことで、より簡単に進めることができます。
Back4app で NativeScript バックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください:
- Back4app アカウントにログインする.
- 「新しいアプリ」ボタンをクリックする Back4app ダッシュボードで。
- アプリに名前を付ける(例:「NativeScript-Backend-Tutorial」)。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/drXO0UqsgxhFvRDiVmsMb_image.png?format=webp)
プロジェクトを作成した後、Back4app ダッシュボードにリスト表示されます。このプロジェクトは、このチュートリアルでカバーされるすべてのバックエンド設定の基盤となります。
Back4app は、データの管理、リアルタイム機能、ユーザー認証などを処理するために Parse プラットフォームを使用します。NativeScript アプリを Back4app に接続するには、parse npm パッケージをインストールし、Back4app ダッシュボードから取得した資格情報で初期化します。
Parse キーを取得する: Back4app ダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動します。次の情報を探します:アプリケーション ID, JavaScript キー, および Parse サーバー URL, (形式は https://parseapi.back4app.com) です。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/F9teHXd_M8ERn1OPGirbi_image.png?format=webp)
Parse SDKをインストールする:
次に、Parseを設定ファイルまたはメインエントリファイル(例:app.js)で初期化します。例えば、parseConfig.jsというファイルをNativeScriptベースのプロジェクトで作成することができます:
NativeScriptアプリでParseにアクセスする必要があるときは、単にこのファイルをインポートしてください。このステップを完了することで、NativeScriptフロントエンドとBack4appバックエンドの間に安全な接続が確立され、データ操作が簡素化されます。
Back4appプロジェクトが準備でき、Parse SDKが統合されたら、NativeScriptアプリからデータを保存およびクエリできます。以下は、Parse.Objectクラスを使用してアイテムのリストを保存および取得する例です:
直接HTTP呼び出しを好む場合は、Back4appのREST APIを使用することもできます:
またはGraphQLを使用します:
この柔軟性により、Parse SDK、REST、またはGraphQL APIエンドポイントを通じてNativeScriptアプリのバックエンド機能を構築するのが便利になります。
デフォルトでは、Parseは自動的にスキーマを即座に作成できますが、Back4appダッシュボードでクラスとデータ型を定義することもできます:
- 「データベース」セクションに移動します あなたのBack4appダッシュボードで。
- 新しいクラスを作成します(例:「タスク」)を作成し、タイトル(String)やisCompleted(Boolean)などの列を追加します。
![新しいクラスを作成 新しいクラスを作成](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/iaZ_P-7epc_LSMFIPlaZV_image.png?format=webp)
Back4appは次のデータ型をサポートしています String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, そして Polygon. オブジェクトを最初に保存するときにParseにこれらの列を作成させるか、より多くの制御のためにそれらを定義することができます。
![カラムを作成 カラムを作成](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/DEh9vyxdBTZcslXxkVQMA_image.png?format=webp)
Back4appのAIエージェントを使用することで、スキーマを自動生成することもできます:
- AIエージェントを開く アプリダッシュボードで。
- 希望するデータモデルを説明する(例:「モバイルアプリ用にisCompletedとdueDateフィールドを持つ新しいタスククラスを作成してください。」)。
- エージェントにスキーマを作成させる 自動的に。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/0snNZwHWzxuXlNu30n7IA_image.png?format=webp)
リレーショナルデータが必要な場合—複数の カテゴリ オブジェクトが タスク アイテムを指す場合—ポインタ または リレーション をParseで使用します:
このアプローチは、単一のクエリで タスク とその関連する カテゴリ の完全なデータを取得するのに役立ちます。
リアルタイムの更新を行うには、Back4appダッシュボードの サーバー設定 で ライブクエリ を有効にします。NativeScript開発者は特定のクラスの変更を購読できます。ライブクエリサーバーURLを含めるようにParse設定を更新してください:
そして、リアルタイムイベントにサブスクライブします:
このサブスクリプションは、タスクが追加、変更、または削除されるたびにUIを自動的に更新します—ライブで共同作業を行うNativeScriptアプリに最適です。
Back4appは、アクセス制御リスト (ACL)とクラスレベルの権限 (CLP)を組み込んでデータを保護します。これらのセキュリティモデルにより、クラスおよびオブジェクトレベルでの読み取り/書き込みアクセスを制御できます。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/PdAyrw1nqA1QQJFuCc-4t_image.png?format=webp)
ACLは各オブジェクトの権限を設定します。たとえば、所有者にのみ読み取りおよび書き込みアクセスを与えるには:
これにより、指定されたユーザーのみがオブジェクトを変更または読み取ることができます。
![ACLを編集 ACLを編集](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/3YNfxEcv7CKdLC6ca8my6_image.png?format=webp)
CLPは、クラス全体のデフォルトの権限を設定します:
- データベースを開く Back4appで関連するクラスを選択します。
- クラスレベルの権限 タブにアクセスします。
- 必要に応じて、一般公開、認証されたユーザー、または特定の役割の権限を調整します。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/MF1Uf7HSJF03Xg6djap9m_image.png?format=webp)
ACLとCLPを組み合わせることで、NativeScriptアプリの強力なセキュリティモデルを提供します。詳細については、アプリセキュリティガイドラインをご覧ください。
クラウドコードを使用すると、サーバー側でカスタムJavaScriptコードを実行できるため、インフラストラクチャを自分で維持する必要がありません。これは、NativeScriptバックエンドに高度なロジックやサーバー専用の統合を追加するのに最適です。
通常、Cloud Code(JavaScript関数、トリガー、および必要なNPMモジュール)を main.js ファイルに配置します。それをBack4appにデプロイすると、追加のサーバー構成なしでParse Server環境で実行されます。
例 main.js 構造:
HTTPリクエストのために axios のようなNPMパッケージをインストールして使用できます。このアプローチにより、支払いゲートウェイから外部APIまで、すべてBack4appアプリのセキュリティの背後で広範な統合が可能になります。
- ビジネスロジック: 自動計算、データ変換、またはステータス更新。
- データ検証: 保存前に必須フィールドが存在することを確認します。
- トリガー: データが作成、更新、または削除されたときにコードを実行します。
- 統合: 支払い、分析、またはメッセージングのために外部サービスと接続します。
- セキュリティ強制: 続行する前に、受信データまたはユーザーロールを検証します。
テキストの長さを計算するシンプルな関数は次のとおりです:
デプロイするには Back4app CLI:
- CLIをインストールする:
- アカウントキーを設定する:
- クラウドコードをデプロイする:
ダッシュボードを通じてデプロイする:
- ダッシュボードの Cloud Code > Functions に移動します。
- あなたの関数コードを main.js に貼り付けます。
- デプロイ をクリックします。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/pGxBQFBhk4prMc8Ub-uho_image.png?format=webp)
NativeScriptアプリからParse SDKを使用して:
RESTまたはGraphQLを使用して呼び出すこともできます:
これにより、NativeScriptベースのモバイルアプリにサーバーサイドのロジックを統合する柔軟な方法が提供されます。
Back4appは、ユーザーアカウントの管理に関連する複雑さを大幅に排除する、Parse Userクラスを使用して認証を処理します。これには、パスワードのハッシュ化、セッショントークンなどが含まれます。
NativeScriptアプリで新しいユーザーを作成できます:
RESTの例は次のようになります:
ログイン後、Parseはユーザーにセッショントークンを割り当てます。現在ログインしているユーザーを確認するには:
ログアウトは簡単です:
Parseは、 Google や Facebook のようなOAuthプロバイダーとも統合されています。プロバイダーごとに設定が異なるため、詳細については Appleおよびその他のサインイン を参照してください。例えば、Facebookの場合:
これらの機能をBack4appダッシュボードで有効にしてください:
- メール設定に移動する あなたのBack4appアプリで。
- メール確認を有効にする と パスワードリセット を有効にする。
- メールテンプレートと「From」アドレスを設定する。
Back4appは、Parse.Fileクラスを通じてファイル管理をサポートしています。NativeScriptでは、画像やドキュメントを同様にアップロードできます:
保存されたオブジェクトからファイルのURLを取得できます:
Parse Serverでは、ファイルアップロードのセキュリティを設定できます:
これにより、セキュリティの設定に基づいてファイルのアップロードを制限または許可できます。
クラウドジョブは、古いレコードの削除や通知の送信など、ルーチン作業を自動化するのに役立ちます。例えば:
- このジョブをCLIまたはダッシュボードを介してデプロイします。
- 「Back4appダッシュボード > サーバー設定 > バックグラウンドジョブ」で、毎日またはお好みの間隔で実行されるようにスケジュールします。
![クラウドジョブのスケジューリング クラウドジョブのスケジューリング](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/5wG60YnWIST74erryTb-u_image.png?format=webp)
ウェブフックは、アプリ内で特定のイベントが発生したときに外部サービスにHTTPリクエストを送信できるようにします。たとえば、新しいレコードやユーザーのサインアップなどです。これを使用して、Slack、決済ゲートウェイ、または分析プラットフォームと統合できます。
- ウェブフックの設定に移動します Back4appダッシュボードで、「ウェブフックを追加」を選択します。
- エンドポイントのURLを追加します(例:https://your-service.com/webhook)。
- 特定のクラスやイベントのためにトリガーを設定します
![ウェブフックの追加 ウェブフックの追加](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/morUMdwsAbVQ1EmBfUfAA_image.png?format=webp)
また、クラウドコード内でウェブフックを定義したり、「beforeSave」や「afterSave」のようなトリガー内で外部APIを直接呼び出したりすることもできます。
![BeforeSave WebHook BeforeSave WebHook](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/fXvy4eRzabyWmN80OMyqW_image.png?format=webp)
「Back4app Admin App」は、データ管理のためのモデル中心でユーザーフレンドリーなインターフェースです。これにより、チームや非技術的なユーザーはCRUD操作を実行し、カスタムダッシュボードを作成し、コードを書くことなくエンタープライズレベルのタスクを管理できます。
- あなたのアプリダッシュボードで、「その他 > 管理アプリ」をクリックします。
- 管理アプリを有効化します。
![管理アプリを有効化 管理アプリを有効化](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/5BTk1ntDh9JLXurObmm_o_image.png?format=webp)
最初の管理ユーザー(ユーザー名/パスワード)を作成します。この設定により、「B4aAdminUser」ロールと関連するクラス(B4aSetting, B4aMenuItem, など)がスキーマに追加されます。
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/u-pU1yBJJxa9KEM2psjXS_image.png?format=webp)
サブドメインを選択し、新しい管理者の資格情報でログインします:
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/_2b71RLDTlQW468017saY_image.png?format=webp)
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/jOFU8C0qiFm6wiVZXS9l0_image.png?format=webp)
このポータルは、グラフィカルインターフェースを離れることなく迅速なデータ操作を可能にします。これは、コーディングに不慣れなチームメンバーとのコラボレーションにとって素晴らしいソリューションです。
このガイドに従うことで、あなたは NativeScriptのバックエンドを構築する方法 を学びました。
- 安全なバックエンドを作成しました あなたのNativeScriptアプリのために。
- クラス、スキーマ、関係を持つデータベースを構成しました。
- リアルタイムクエリを実装しました ライブ更新のために。
- ACLとCLPでデータを保護しました。
- Cloud Codeで機能を拡張しました。
- ユーザーのサインアップ、ログイン、セッショントークンのための認証を設定しました。
- ファイルのアップロードと取得を管理しました Parse Fileを介して。
- 自動化された定期的なタスクのためにCloud Jobsをスケジュールしました。
- サードパーティ統合のためにWebhooksを作成しました。
- コードなしでデータ管理を行うためにBack4app管理パネルを使用しました。
これらのステップは、NativeScript Coreを使用してオープンソースのクロスプラットフォームモバイルアプリを構築するための堅牢な基盤を形成します。高度な機能を探求し、より多くのAPIエンドポイントを組み込むか、独自のカスタムロジックを統合して、バックエンドをアプリの正確なニーズに合わせて調整してください。
- NativeScriptアプリをスケールアップする パフォーマンス、キャッシング、セキュリティルールを最適化することによって。
- 高度なユーザー管理を探求する ロールベースの権限のような。
- 公式のBack4appドキュメントをチェックする セキュリティ、ログ、パフォーマンスに関する詳細なガイドのために。
- 実世界の統合を試してみる 支払いまたは分析ツールなど。
コーディングを楽しんで、Back4appが提供する効率的な開発ワークフローを楽しんでください!
![Doc contributor](https://s3.amazonaws.com/archbee-animals/cat.png)