Quickstarters

NativeScriptのバックエンドを構築する方法は?

43min

はじめに

このチュートリアルでは、NativeScriptのバックエンドを構築する方法を学びます。これは、モバイルアプリのバックエンド開発を簡素化するオープンソースプラットフォームであるBack4appを使用します。

データベース管理、Cloud Code Functions、RESTおよびGraphQL APIエンドポイント、ユーザー認証、リアルタイムクエリ(ライブクエリ)など、Back4appの重要な機能を統合する方法を説明し、NativeScriptアプリのための安全でスケーラブルなバックエンドを作成します。

また、Back4appが手動のサーバーおよびデータベース構成と比較して、セットアップ時間を大幅に短縮する方法を発見します。

高度なセキュリティメカニズム、Cloud Jobsを使用したタスクのスケジューリング、サードパーティサービスとの接続にWebhookを使用する方法を探ります。

このガイドの終わりまでに、NativeScript Coreを活用した柔軟なバックエンドを持つことができ、これがNativeScriptのクロスプラットフォームモバイルソリューションを支えています。

この基盤をもとに、必要に応じて独自のカスタムロジックや外部APIを統合する準備が整います。これは、製品準備が整ったNativeScriptアプリを開発するための大きなステップとなります。

前提条件

  • Back4appアカウントと新しいBack4appプロジェクト Back4appの始め方。 アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。
  • 基本的なNativeScript開発環境 NativeScript CLIまたは他の好みのワークフローを使用してこれを設定できます。 NativeScriptの始め方ガイド。
  • Node.js(バージョン14以上)がインストールされていること npmパッケージをインストールし、NativeScript CLIを実行するためにNode.jsが必要です。 Node.jsのインストール
  • JavaScriptとNativeScript Coreに対する理解 NativeScript公式ドキュメント。 NativeScriptが初めての場合は、始める前に公式ドキュメントや初心者向けのチュートリアルを確認してください。

始める前に、これらの前提条件がすべて整っていることを確認してください。Back4appプロジェクトを設定し、ローカルのNativeScript環境を準備しておくことで、より簡単に進めることができます。

ステップ 1 – Back4app プロジェクトの設定

新しいプロジェクトを作成する

Back4app で NativeScript バックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください:

  1. Back4app アカウントにログインする.
  2. 「新しいアプリ」ボタンをクリックする Back4app ダッシュボードで。
  3. アプリに名前を付ける(例:「NativeScript-Backend-Tutorial」)。
Document image


プロジェクトを作成した後、Back4app ダッシュボードにリスト表示されます。このプロジェクトは、このチュートリアルでカバーされるすべてのバックエンド設定の基盤となります。

Parse SDK を接続する

Back4app は、データの管理、リアルタイム機能、ユーザー認証などを処理するために Parse プラットフォームを使用します。NativeScript アプリを Back4app に接続するには、parse npm パッケージをインストールし、Back4app ダッシュボードから取得した資格情報で初期化します。

Parse キーを取得する: Back4app ダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動します。次の情報を探します:アプリケーション ID, JavaScript キー, および Parse サーバー URL, (形式は https://parseapi.back4app.com) です。

Document image


Parse SDKをインストールする:

Bash


次に、Parseを設定ファイルまたはメインエントリファイル(例:app.js)で初期化します。例えば、parseConfig.jsというファイルをNativeScriptベースのプロジェクトで作成することができます:

src/parseConfig.js


NativeScriptアプリでParseにアクセスする必要があるときは、単にこのファイルをインポートしてください。このステップを完了することで、NativeScriptフロントエンドとBack4appバックエンドの間に安全な接続が確立され、データ操作が簡素化されます。

ステップ2 – データベースの設定

データの保存とクエリ

Back4appプロジェクトが準備でき、Parse SDKが統合されたら、NativeScriptアプリからデータを保存およびクエリできます。以下は、Parse.Objectクラスを使用してアイテムのリストを保存および取得する例です:

JS


直接HTTP呼び出しを好む場合は、Back4appのREST APIを使用することもできます:

Bash


またはGraphQLを使用します:

GraphQL


この柔軟性により、Parse SDK、REST、またはGraphQL APIエンドポイントを通じてNativeScriptアプリのバックエンド機能を構築するのが便利になります。

スキーマ設計とデータ型

デフォルトでは、Parseは自動的にスキーマを即座に作成できますが、Back4appダッシュボードでクラスとデータ型を定義することもできます:

  1. 「データベース」セクションに移動します あなたのBack4appダッシュボードで。
  2. 新しいクラスを作成します(例:「タスク」)を作成し、タイトル(String)やisCompleted(Boolean)などの列を追加します。
新しいクラスを作成
新しいクラスを作成


Back4appは次のデータ型をサポートしています String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, そして Polygon. オブジェクトを最初に保存するときにParseにこれらの列を作成させるか、より多くの制御のためにそれらを定義することができます。

カラムを作成
カラムを作成


Back4appのAIエージェントを使用することで、スキーマを自動生成することもできます:

  1. AIエージェントを開く アプリダッシュボードで。
  2. 希望するデータモデルを説明する(例:「モバイルアプリ用にisCompletedとdueDateフィールドを持つ新しいタスククラスを作成してください。」)。
  3. エージェントにスキーマを作成させる 自動的に。
Document image


リレーショナルデータ

リレーショナルデータが必要な場合—複数の カテゴリ オブジェクトが タスク アイテムを指す場合—ポインタ または リレーション をParseで使用します:

JS


このアプローチは、単一のクエリで タスク とその関連する カテゴリ の完全なデータを取得するのに役立ちます。

ライブクエリ

リアルタイムの更新を行うには、Back4appダッシュボードの サーバー設定ライブクエリ を有効にします。NativeScript開発者は特定のクラスの変更を購読できます。ライブクエリサーバーURLを含めるようにParse設定を更新してください:

src/parseConfig.js


そして、リアルタイムイベントにサブスクライブします:

JS


このサブスクリプションは、タスクが追加、変更、または削除されるたびにUIを自動的に更新します—ライブで共同作業を行うNativeScriptアプリに最適です。

ステップ3 – ACLとCLPによるセキュリティの適用

Back4appのセキュリティメカニズム

Back4appは、アクセス制御リスト (ACL)クラスレベルの権限 (CLP)を組み込んでデータを保護します。これらのセキュリティモデルにより、クラスおよびオブジェクトレベルでの読み取り/書き込みアクセスを制御できます。

Document image


アクセス制御リスト (ACL)

ACLは各オブジェクトの権限を設定します。たとえば、所有者にのみ読み取りおよび書き込みアクセスを与えるには:

JS


これにより、指定されたユーザーのみがオブジェクトを変更または読み取ることができます。

ACLを編集
ACLを編集


クラスレベルの権限 (CLP)

CLPは、クラス全体のデフォルトの権限を設定します:

  1. データベースを開く Back4appで関連するクラスを選択します。
  2. クラスレベルの権限 タブにアクセスします。
  3. 必要に応じて、一般公開、認証されたユーザー、または特定の役割の権限を調整します。
Document image


ACLとCLPを組み合わせることで、NativeScriptアプリの強力なセキュリティモデルを提供します。詳細については、アプリセキュリティガイドラインをご覧ください。

ステップ4 – クラウド関数の作成とデプロイ

クラウドコードを使用すると、サーバー側でカスタムJavaScriptコードを実行できるため、インフラストラクチャを自分で維持する必要がありません。これは、NativeScriptバックエンドに高度なロジックやサーバー専用の統合を追加するのに最適です。

仕組み

通常、Cloud Code(JavaScript関数、トリガー、および必要なNPMモジュール)を main.js ファイルに配置します。それをBack4appにデプロイすると、追加のサーバー構成なしでParse Server環境で実行されます。

例 main.js 構造:

JS


HTTPリクエストのために axios のようなNPMパッケージをインストールして使用できます。このアプローチにより、支払いゲートウェイから外部APIまで、すべてBack4appアプリのセキュリティの背後で広範な統合が可能になります。

典型的な使用例

  • ビジネスロジック: 自動計算、データ変換、またはステータス更新。
  • データ検証: 保存前に必須フィールドが存在することを確認します。
  • トリガー: データが作成、更新、または削除されたときにコードを実行します。
  • 統合: 支払い、分析、またはメッセージングのために外部サービスと接続します。
  • セキュリティ強制: 続行する前に、受信データまたはユーザーロールを検証します。

関数をデプロイする

テキストの長さを計算するシンプルな関数は次のとおりです:

main.js


デプロイするには Back4app CLI:

  1. CLIをインストールする:
Bash


Windowsの場合は、 b4a.exe ファイルを リリースページ からダウンロードします。

  1. アカウントキーを設定する:
Bash

  1. クラウドコードをデプロイする:
Bash


ダッシュボードを通じてデプロイする:

  1. ダッシュボードの Cloud Code > Functions に移動します。
  2. あなたの関数コードを main.js に貼り付けます。
  3. デプロイ をクリックします。
Document image


関数の呼び出し

NativeScriptアプリからParse SDKを使用して:

JS


RESTまたはGraphQLを使用して呼び出すこともできます:

Bash

GraphQL


これにより、NativeScriptベースのモバイルアプリにサーバーサイドのロジックを統合する柔軟な方法が提供されます。

ステップ5 – ユーザー認証の設定

Back4appにおけるユーザー認証

Back4appは、ユーザーアカウントの管理に関連する複雑さを大幅に排除する、Parse Userクラスを使用して認証を処理します。これには、パスワードのハッシュ化、セッショントークンなどが含まれます。

ユーザー認証の設定

NativeScriptアプリで新しいユーザーを作成できます:

JS


RESTの例は次のようになります:

Bash


セッション管理

ログイン後、Parseはユーザーにセッショントークンを割り当てます。現在ログインしているユーザーを確認するには:

JS


ログアウトは簡単です:

JS


ソーシャルログインの統合

Parseは、 GoogleFacebook のようなOAuthプロバイダーとも統合されています。プロバイダーごとに設定が異なるため、詳細については Appleおよびその他のサインイン を参照してください。例えば、Facebookの場合:

JS


メール確認とパスワードリセット

これらの機能をBack4appダッシュボードで有効にしてください:

  1. メール設定に移動する あなたのBack4appアプリで。
  2. メール確認を有効にするパスワードリセット を有効にする。
  3. メールテンプレートと「From」アドレスを設定する。

ステップ6 – ファイルストレージの取り扱い

ファイルのアップロードと取得

Back4appは、Parse.Fileクラスを通じてファイル管理をサポートしています。NativeScriptでは、画像やドキュメントを同様にアップロードできます:

JS


保存されたオブジェクトからファイルのURLを取得できます:

JS


ファイルのセキュリティ

Parse Serverでは、ファイルアップロードのセキュリティを設定できます:

JSON


これにより、セキュリティの設定に基づいてファイルのアップロードを制限または許可できます。

ステップ7 – クラウドジョブによるタスクのスケジューリング

クラウドジョブ

クラウドジョブは、古いレコードの削除や通知の送信など、ルーチン作業を自動化するのに役立ちます。例えば:

JS

  1. このジョブをCLIまたはダッシュボードを介してデプロイします。
  2. Back4appダッシュボード > サーバー設定 > バックグラウンドジョブ」で、毎日またはお好みの間隔で実行されるようにスケジュールします。
クラウドジョブのスケジューリング
クラウドジョブのスケジューリング


ステップ8 – ウェブフックの統合

ウェブフックは、アプリ内で特定のイベントが発生したときに外部サービスにHTTPリクエストを送信できるようにします。たとえば、新しいレコードやユーザーのサインアップなどです。これを使用して、Slack、決済ゲートウェイ、または分析プラットフォームと統合できます。

  1. ウェブフックの設定に移動します Back4appダッシュボードで、「ウェブフックを追加」を選択します。
  2. エンドポイントのURLを追加します(例:https://your-service.com/webhook)。
  3. 特定のクラスやイベントのためにトリガーを設定します
ウェブフックの追加
ウェブフックの追加


また、クラウドコード内でウェブフックを定義したり、「beforeSave」や「afterSave」のようなトリガー内で外部APIを直接呼び出したりすることもできます。

BeforeSave WebHook
BeforeSave WebHook


ステップ9 – Back4app管理パネルの探索

Back4app Admin App」は、データ管理のためのモデル中心でユーザーフレンドリーなインターフェースです。これにより、チームや非技術的なユーザーはCRUD操作を実行し、カスタムダッシュボードを作成し、コードを書くことなくエンタープライズレベルのタスクを管理できます。

管理アプリの有効化

  1. あなたのアプリダッシュボードで、「その他 > 管理アプリ」をクリックします。
  2. 管理アプリを有効化します。
管理アプリを有効化
管理アプリを有効化


最初の管理ユーザー(ユーザー名/パスワード)を作成します。この設定により、「B4aAdminUser」ロールと関連するクラス(B4aSetting, B4aMenuItem, など)がスキーマに追加されます。

Document image


サブドメインを選択し、新しい管理者の資格情報でログインします:

Document image

Document image


このポータルは、グラフィカルインターフェースを離れることなく迅速なデータ操作を可能にします。これは、コーディングに不慣れなチームメンバーとのコラボレーションにとって素晴らしいソリューションです。

結論

このガイドに従うことで、あなたは NativeScriptのバックエンドを構築する方法 を学びました。

  • 安全なバックエンドを作成しました あなたのNativeScriptアプリのために。
  • クラス、スキーマ、関係を持つデータベースを構成しました
  • リアルタイムクエリを実装しました ライブ更新のために。
  • ACLとCLPでデータを保護しました
  • Cloud Codeで機能を拡張しました
  • ユーザーのサインアップ、ログイン、セッショントークンのための認証を設定しました
  • ファイルのアップロードと取得を管理しました Parse Fileを介して。
  • 自動化された定期的なタスクのためにCloud Jobsをスケジュールしました
  • サードパーティ統合のためにWebhooksを作成しました
  • コードなしでデータ管理を行うためにBack4app管理パネルを使用しました

これらのステップは、NativeScript Coreを使用してオープンソースのクロスプラットフォームモバイルアプリを構築するための堅牢な基盤を形成します。高度な機能を探求し、より多くのAPIエンドポイントを組み込むか、独自のカスタムロジックを統合して、バックエンドをアプリの正確なニーズに合わせて調整してください。

次のステップ

  • NativeScriptアプリをスケールアップする パフォーマンス、キャッシング、セキュリティルールを最適化することによって。
  • 高度なユーザー管理を探求する ロールベースの権限のような。
  • 公式のBack4appドキュメントをチェックする セキュリティ、ログ、パフォーマンスに関する詳細なガイドのために。
  • 実世界の統合を試してみる 支払いまたは分析ツールなど。

コーディングを楽しんで、Back4appが提供する効率的な開発ワークフローを楽しんでください!