How to Build a Backend for NativeScript?

はじめに このチュートリアルでは、 nativescriptのバックエンドを構築する方法 を学びます。これは、モバイルアプリのバックエンド開発を簡素化するオープンソースプラットフォームであるback4appを使用します。 データベース管理、cloud code functions、restおよびgraphql apiエンドポイント、ユーザー認証、リアルタイムクエリ（ライブクエリ）など、back4appの重要な機能を統合する方法を説明し、nativescriptアプリのための安全でスケーラブルなバックエンドを作成します。 また、back4appが手動のサーバーおよびデータベース構成と比較して、セットアップ時間を大幅に短縮する方法を発見します。 高度なセキュリティメカニズム、cloud jobsを使用したタスクのスケジューリング、サードパーティサービスとの接続にwebhookを使用する方法を探ります。 このガイドの終わりまでに、nativescriptのクロスプラットフォームモバイルソリューションを支えるnativescript coreを活用した柔軟なバックエンドを持つことができます。 この基盤をもとに、必要に応じて独自のカスタムロジックや外部apiを統合する準備が整います。これは、プロダクション準備が整ったnativescriptアプリを開発するための大きなステップとなります。 前提条件 back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なnativescript開発環境 nativescript cliまたは他の好みのワークフローを使用してこれを設定できます。 nativescriptの始め方ガイド。 https //docs nativescript org/environment setup node js（バージョン14以上）がインストールされていること npmパッケージをインストールし、nativescript cliを実行するためにnode jsが必要です。 node jsのインストール https //nodejs org/en/download/ javascriptとnativescript coreに対する理解 nativescript公式ドキュメント。 https //docs nativescript org/ nativescriptが初めての場合は、始める前に公式ドキュメントや初心者向けのチュートリアルを確認してください。 始める前に、これらの前提条件がすべて整っていることを確認してください。back4appプロジェクトを設定し、ローカルのnativescript環境を準備しておくことで、より簡単に進めることができます。 ステップ 1 – back4app プロジェクトの設定 新しいプロジェクトを作成する nativescript バックエンドを back4app で構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください back4app アカウントにログインする 「新しいアプリ」ボタンをクリックする back4app ダッシュボードで。 アプリに名前を付ける （例 「nativescript backend tutorial」）。 プロジェクトを作成した後、back4app ダッシュボードにリスト表示されます。このプロジェクトは、このチュートリアルでカバーされるすべてのバックエンド設定の基盤となります。 parse sdk を接続する back4app は、データの管理、リアルタイム機能、ユーザー認証などを処理するために parse プラットフォームを使用します。nativescript アプリを back4app に接続するには、 parse npm パッケージをインストールし、back4app ダッシュボードから取得した資格情報で初期化します。 parse キーを取得する back4app ダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動します。次の項目を探します アプリケーション id , javascript キー , および parse サーバー url （形式は https //parseapi back4app com )。 parse sdkをインストールする npm install parse 次に、 parse を設定ファイルまたはメインエントリファイル（例： app js )で初期化します。例えば、 parseconfig js というファイルをnativescriptベースのプロジェクトで作成することができます src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; nativescriptアプリでparseにアクセスする必要があるときは、単にこのファイルをインポートしてください。このステップを完了することで、nativescriptフロントエンドとback4appバックエンドの間に安全な接続が確立され、データ操作が簡素化されます。 ステップ2 – データベースの設定 データの保存とクエリ back4appプロジェクトが準備でき、parse sdkが統合されたら、nativescriptアプリからデータを保存およびクエリできます。以下は、 parse object クラスを使用してアイテムのリストを保存および取得する例です // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } 直接http呼び出しを好む場合は、back4appのrest apiを使用することもできます 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 supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task またはgraphqlを使用します mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } この柔軟性により、parse sdk、rest、またはgraphql apiエンドポイントを通じてnativescriptアプリのバックエンド機能を構築するのが便利になります。 スキーマ設計とデータ型 デフォルトでは、parseは自動的にスキーマを即座に作成できますが、back4appダッシュボードでクラスとデータ型を定義することもできます 「データベース」セクションに移動します あなたのback4appダッシュボードで。 新しいクラスを作成します （例：「タスク」）を作成し、タイトル（string）やiscompleted（boolean）などの列を追加します。 back4appは次のデータ型をサポートしています string , number , boolean , object , date , file , pointer , array , relation , geopoint , そして polygon オブジェクトを最初に保存するときにparseにこれらの列を作成させるか、より多くの制御のためにそれらを定義することができます。 back4appのaiエージェントを使用する ことで、スキーマを自動生成することもできます aiエージェントを開く あなたのアプリダッシュボードで。 希望するデータモデルを説明する （例：「モバイルアプリ用にiscompletedとduedateフィールドを持つ新しいタスククラスを作成してください。」）。 エージェントにスキーマを作成させる 自動的に。 リレーショナルデータ リレーショナルデータが必要な場合—複数の カテゴリ オブジェクトが複数の タスク アイテムを指す場合— ポインタ または リレーション をparseで使用します // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); このアプローチは、単一のクエリで タスク とその関連する カテゴリ の完全なデータを取得するのに役立ちます。 ライブクエリ リアルタイムの更新のために、back4appダッシュボードの サーバー設定 で ライブクエリ を有効にします。nativescript開発者は特定のクラスの変更を購読できます。ライブクエリサーバーurlを含めるようにparse設定を更新してください src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; そして、リアルタイムイベントにサブスクライブします import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } このサブスクリプションは、タスクが追加、変更、または削除されるたびに自動的にuiを更新します—ライブで共同作業を行うnativescriptアプリに最適です。 ステップ3 – aclとclpによるセキュリティの適用 back4appのセキュリティメカニズム back4appは、 アクセス制御リスト (acl) と クラスレベルの権限 (clp) を組み込んでデータを保護します。これらのセキュリティモデルにより、クラスおよびオブジェクトレベルでの読み取り/書き込みアクセスを制御できます。 アクセス制御リスト (acl) aclは各オブジェクトの権限を設定します。たとえば、所有者にのみ読み取りおよび書き込みアクセスを付与するには async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } これにより、指定されたユーザーのみがオブジェクトを変更または読み取ることができます。 クラスレベルの権限 (clp) clpは、クラス全体のデフォルトの権限を設定します データベースを開く back4appで関連するクラスを選択します。 クラスレベルの権限 タブにアクセスします。 必要に応じて、一般公開、認証されたユーザー、または特定の役割の権限を調整します。 aclとclpを組み合わせることで、nativescriptアプリの強力なセキュリティモデルを提供します。詳細については、 アプリセキュリティガイドライン https //www back4app com/docs/security/parse security をご覧ください。 ステップ4 – クラウド関数の作成とデプロイ クラウドコードを使用すると、サーバー側でカスタムjavascriptコードを実行できるため、自分でインフラを維持する必要がありません。これは、nativescriptバックエンドに高度なロジックやサーバー専用の統合を追加するのに最適です。 仕組み 通常、cloud code（javascript関数、トリガー、および必要なnpmモジュール）を main js ファイルに配置します。それをback4appにデプロイすると、追加のサーバー構成なしでparse server環境で実行されます。 例 main js 構造 const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); httpリクエストのために axios のようなnpmパッケージをインストールして使用できます。このアプローチにより、支払いゲートウェイから外部apiまで、すべてback4appアプリのセキュリティの背後で広範な統合が可能になります。 典型的な使用例 ビジネスロジック 自動計算、データ変換、またはステータス更新。 データ検証 保存前に必須フィールドが存在することを確認します。 トリガー データが作成、更新、または削除されたときにコードを実行します。 統合 支払い、分析、またはメッセージングのために外部サービスと接続します。 セキュリティ強制 続行する前に、受信データまたはユーザーロールを検証します。 関数をデプロイする テキストの長さを計算するシンプルな関数は次のとおりです main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); デプロイするには https //www back4app com/docs/local development/parse cli cliをインストールする curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash windowsの場合は、 b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe ファイルを リリースページ https //github com/back4app/parse cli/releases からダウンロードします。 アカウントキーを設定する b4a configure accountkey クラウドコードをデプロイする b4a deploy ダッシュボードを通じてデプロイする ダッシュボードの cloud code > functions に移動します。 関数コードを main js に貼り付けます。 デプロイ をクリックします。 関数の呼び出し nativescriptアプリからparse sdkを使用して import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } restまたはgraphqlを使用して呼び出すこともできます 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 '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength mutation { calculatetextlength(input { text "hello graphql" }) { result } } これにより、nativescriptベースのモバイルアプリにサーバーサイドのロジックを統合する柔軟な方法が提供されます。 ステップ5 – ユーザー認証の設定 back4appにおけるユーザー認証 back4appは、ユーザーアカウントの管理に関連する複雑さを大幅に排除する、 parse user クラスを使用して認証を処理します。これには、パスワードのハッシュ化、セッショントークンなどが含まれます。 ユーザー認証の設定 nativescriptアプリで新しいユーザーを作成できます import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } 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=secret123' \\ https //parseapi back4app com/login セッション管理 ログイン後、parseはユーザーに セッショントークン を割り当てます。現在ログインしているユーザーを確認するには const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } ログアウトは簡単です await parse user logout(); ソーシャルログイン統合 parseは、 google や facebook のようなoauthプロバイダーとも統合されています。プロバイダーごとに設定が異なるため、詳細については appleおよびその他のサインイン https //www back4app com/docs/platform/sign in with apple を参照してください。例えば、facebookを使用する場合 const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; メール確認とパスワードリセット これらの機能をback4appダッシュボードで有効にします メール設定に移動する あなたのback4appアプリで。 メール確認を有効にする と パスワードリセット を有効にします。 メールテンプレートと「from」アドレスを設定します。 ステップ6 – ファイルストレージの取り扱い ファイルのアップロードと取得 back4appは、 parse file クラスを通じてファイル管理をサポートしています。nativescriptでは、画像やドキュメントを同様にアップロードできます import parse from ' /parseconfig'; async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } 保存されたオブジェクトからファイルのurlを取得できます const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components ファイルのセキュリティ parse serverでは、ファイルアップロードのセキュリティを設定できます { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } これにより、セキュリティの設定に基づいてファイルのアップロードを制限または許可できます。 ステップ7 – クラウドジョブによるタスクのスケジューリング クラウドジョブ クラウドジョブ は、古いレコードの削除や通知の送信など、ルーチン作業を自動化するのに役立ちます。例えば // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); 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 oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); このジョブをcliまたはダッシュボードを介してデプロイします。 「 back4appダッシュボード > サーバー設定 > バックグラウンドジョブ 」で、毎日またはお好みの間隔で実行されるようにスケジュールします。 ステップ8 – ウェブフックの統合 ウェブフック は、アプリ内で特定のイベントが発生したときに外部サービスにhttpリクエストを送信できるようにします。たとえば、新しいレコードやユーザーのサインアップなどです。これを使用して、slack、決済ゲートウェイ、または分析プラットフォームと統合できます。 back4appダッシュボードのウェブフック設定に移動し、 ウェブフックを追加 を選択します。 エンドポイント のurlを追加します（例： https //your service com/webhook ）。 特定のクラスやイベントのためにトリガーを設定します。 また、クラウドコード内でウェブフックを定義したり、「 beforesave 」や「 aftersave 」のようなトリガー内で外部apiを直接呼び出したりすることもできます。 ステップ9 – back4app管理パネルの探索 「 back4app admin app 」は、データ管理のためのモデル中心でユーザーフレンドリーなインターフェースです。これにより、チームや非技術的なユーザーはcrud操作を実行し、カスタムダッシュボードを作成し、コードを書くことなくエンタープライズレベルのタスクを管理できます。 管理アプリの有効化 あなたの app dashboard で、「 more > admin app 」をクリックします。 管理アプリを有効化 します。 最初の管理ユーザー（ユーザー名/パスワード）を作成します。この設定により、「 b4aadminuser 」ロールと関連するクラス（ b4asetting , b4amenuitem , など）がスキーマに追加されます。 サブドメインを選択し、新しい管理者の資格情報でログインします このポータルは、グラフィカルインターフェースを離れることなく迅速なデータ操作を可能にします。これは、コーディングに不慣れなチームメンバーとのコラボレーションにとって素晴らしいソリューションです。 結論 このガイドに従うことで、あなたは nativescriptのバックエンドを構築する方法 を学びました。 安全なバックエンドを作成しました あなたのnativescriptアプリのために。 クラス、スキーマ、関係を持つデータベースを構成しました 。 リアルタイムクエリを実装しました ライブ更新のために。 aclとclpでデータを保護しました 。 cloud codeで機能を拡張しました 。 ユーザーのサインアップ、ログイン、セッショントークンのための認証を設定しました 。 parse fileを介してファイルのアップロードと取得を管理しました 。 自動化された定期的なタスクのためにcloud jobsをスケジュールしました 。 サードパーティ統合のためにwebhooksを作成しました 。 コードなしでデータ管理を行うためにback4app管理パネルを使用しました 。 これらのステップは、nativescript coreを使用してオープンソースのクロスプラットフォームモバイルアプリを構築するための堅牢な基盤を形成します。高度な機能を探求し、より多くのapiエンドポイントを組み込むか、独自のカスタムロジックを統合して、バックエンドをアプリの正確なニーズに合わせて調整してください。 次のステップ nativescriptアプリをスケールアップする パフォーマンス、キャッシング、セキュリティルールを最適化することによって。 高度なユーザー管理を探求する ロールベースの権限のような。 公式のback4appドキュメントをチェックする セキュリティ、ログ、パフォーマンスに関する詳細なガイドのために。 実世界の統合を試してみる 支払いまたは分析ツールのような。 コーディングを楽しんで、back4appが提供する効率的な開発ワークフローを楽しんでください！