How to Build a Backend for Ionic?

イントロダクション このチュートリアルでは、back4appを使用してionicアプリの完全なバックエンドを構築する方法を学びます。 データベース管理、cloud code functions、restおよびgraphql api、ユーザー認証、ファイル処理などをカバーします。 私たちの目標は、 ionicのバックエンドを構築する方法 を示すことです。それは安全で、スケーラブルで、メンテナンスが容易です。 back4appの直感的な環境を使用して、サーバーサイドのセットアップを簡素化し、手動でサーバーやデータベースを構成する手間を省きます。 cloud jobsを使用したタスクのスケジューリング、高度なセキュリティルールの適用、他のサービスとのwebhookの統合など、必須のツールを学びます。 最後には、この基盤となるバックエンドをionicアプリの本番環境に適したシステムに拡張する準備が整います。 前提条件 back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成し、上記のガイドに従ってプロジェクトを設定してください。 基本的なionic開発環境 ionic cli https //ionicframework com/docs/intro/cli がインストールされており、ionicアプリを作成して実行できることを確認してください。 node js（バージョン14以上）がインストールされていること node jsをダウンロード https //nodejs org/en/download/ して、依存関係を管理し、プロジェクトを構築します。 javascript/typescriptおよびionicの概念に精通していること ionic公式ドキュメント https //ionicframework com/docs ionicの構造、コンポーネント、およびライフサイクルフックをよく理解していると役立ちます。 ステップ1 – back4appで新しいプロジェクトを作成し、接続する back4appアカウントにログインする 。 新しいアプリを作成する back4appダッシュボードの「新しいアプリ」ボタンを使用して。 アプリに名前を付ける （例：「ionic backend tutorial」）。 このback4appプロジェクトは、バックエンドの基盤です。クライアントサイドのparse sdkを使用するのとは異なり、このチュートリアルでは、ionicアプリからrestおよびgraphqlを介して呼び出しを行う方法を示します。 資格情報の取得 back4appのダッシュボードで、 アプリ設定 または セキュリティとキー に移動します。 あなたの アプリケーションid , rest apiキー , および graphqlエンドポイント これらは、ionicアプリからリクエストを送信するために必要です。 ステップ2 – データベースの設定 適切に構造化されたデータベースは、すべてのアプリの基盤です。back4appのダッシュボードは、データモデルの設計と関係の管理を簡単にします。 1\ データモデルの作成 back4appのダッシュボードの データベース セクションに移動します。 新しいクラス（例えば、「todo」）を作成し、カラムを追加します（例： タイトル を文字列として、 iscompleted をブール値として）。 2\ aiエージェントを使用したデータモデルの作成 あなたの back4app ダッシュボードから ai エージェント を開いてください。 「タイトル（string）と iscompleted（boolean）のフィールドを持つ todo クラスを作成する」など、希望するスキーマを説明してください。 ai エージェントがスキーマを自動的に生成します。 3\ rest apiを使用したデータの読み書き あなたの ionic コードから、http リクエストを実行できます。例えば、 todoを作成する には 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 groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo すべての todo を 取得する には curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo これらの呼び出しを統合することができます fetch , axios , またはあなたのionicアプリのサービスやコンポーネントファイル内の任意のhttpクライアントライブラリを使用して。 4\ graphql apiを使用したデータの読み書き 同様に、ionicアプリからgraphqlのミューテーションやクエリを送信できます。例えば、 create 新しいtodoを作成するには mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 例 restまたはgraphqlの呼び出しは、ionic構造のプロバイダー/サービスファイルに配置でき、そこからページで呼び出すことができます。 5\ ライブクエリの使用（オプション） ライブクエリは、アプリのデータにリアルタイムの更新を提供しますが、parse sdkまたは特別なサブスクリプションアプローチが必要です。リアルタイムデータが必要な場合は、back4appサーバー設定から ライブクエリ を有効にできます。通常、クラスの変更を監視するためにwebsocket接続を使用します。ただし、標準のhttpベースの呼び出しの場合は、restまたはgraphqlのエンドポイントを定期的にクエリできます。 ステップ3 – aclとclpを使用したセキュリティの適用 簡単な概要 acl（アクセス制御リスト） を使用すると、個々のオブジェクトに対して読み取り/書き込みの権限を設定できます。 clp（クラスレベルの権限） を使用すると、クラスレベルでの広範なアクセスを管理できます。これらの機能は、プライベートデータを保護し、認可されたユーザーのみが情報を変更できるようにするために重要です。 クラスレベルの権限の設定 back4appダッシュボードで、 データベース > クラスレベルの権限 に移動します。 クラスのデフォルトを設定します（例：認証されたユーザーのみが新しいtodoを作成できる）。 aclの設定 レコードを作成または更新する際に、 acl フィールドをrestを通じて渡すことができます 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 '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo 詳細については、 アプリセキュリティガイドライン https //www back4app com/docs/security/parse security を参照してください。 ステップ4 – クラウドコード関数の作成 クラウドコードの理由 クラウドコードを使用すると、データ検証、トリガー、または統合などのタスクのためにサーバーサイドjavascriptを実行できます。ロジックを集中させるためにカスタムエンドポイントを作成でき、特にクライアントからコードを排除したい場合に便利です。 例の関数とトリガー サーバー側の main js に次のように記述できます // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); これを back4app cli https //www back4app com/docs/local development/parse cli を介してデプロイするか、 cloud code ダッシュボードのセクションで行います。 ionicからクラウドコードを呼び出す postリクエストを送信できます 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 '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); これを back4app cli https //www back4app com/docs/local development/parse cli を介してデプロイするか、 cloud code ダッシュボードのセクションで行います。 ionicからクラウドコードを呼び出す postリクエストを送信できます 返されたデータまたはエラーメッセージを含むjsonレスポンスが得られます。 npmモジュール サードパーティサービスを統合するために、cloud code環境に axios のようなパッケージをインストールできます。これらを main js に含めます。 const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); それをデプロイし、他のcloud code関数と同じ方法で呼び出します。 ステップ5 – 認証の設定 ユーザー認証の有効化 ユーザーのサインアップとログインは、 user クラスへのrest呼び出しで行うことができます。例えば、 サインアップ するには 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 '{ "username" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users ログイン curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login 成功すると、 sessiontoken を受け取ります。それを安全に保管し、認証された操作のために今後のリクエストのヘッダーに含めてください。 ソーシャルログイン back4appを通じてoauthフローを設定するか、外部プロバイダーを使用して、googleやfacebookのようなソーシャルログインを構成できます。詳細な手順については、 ソーシャルログインのドキュメント https //www back4app com/docs/platform/sign in with apple を参照してください。 ステップ 6 – ファイルストレージの取り扱い ファイルストレージの設定 back4appは安全なファイルストレージを提供します。オブジェクトにファイルを添付するか、独立して保存できます。例えば curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png レスポンスには、クラスに保存できるファイルurlが含まれます 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 '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo セキュリティに関する考慮事項 back4appの サーバー設定 でファイルセキュリティルールを有効にして、認証を要求したり、特定の役割にファイルアップロードを制限したりできます。 ステップ 7 – メール確認とパスワードリセット 確認が重要な理由 メール確認はユーザーのメールの正当性を保証します。パスワードリセットは、失われた認証情報を回復するための安全な方法を提供します。これにより、ionicアプリでの信頼と適切なユーザー管理が維持されます。 back4appダッシュボードの設定 「 アプリ設定 > メール設定 」に移動します。 「 メール確認 」を有効にします。 確認およびパスワードリセットのメールテンプレートをカスタマイズします。 step 8 – scheduling tasks with cloud jobs what cloud jobs do cloud jobs allow you to schedule recurring tasks like data cleanup or sending summary emails you write them in your main js parse cloud job('cleanupoldtodos', async (request) => { const query = new parse query('todo'); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); after deployment go to app settings > server settings > background jobs schedule cleanupoldtodos to run daily ステップ 9 – webhookの統合 webhookを使用すると、back4appプロジェクト内で特定のイベントが発生したときに外部サービスにデータを送信できます。ionicアプリが新しいレコードを作成した後にstripeやslackでアクションをトリガーする必要がある場合、webhookを使用してそれを自動化できます。 「 もっと見る 」に移動します > webhook をback4appダッシュボードで選択します。 新しいwebhookを追加 し、そのエンドポイントを設定します（例： https //your service com/webhook endpoint )。 「 イベント 」を選択します（例：「保存後」 todo クラス）。 標準のhttpライブラリを使用して、 main js 内のcloud codeトリガーから外部リクエストを開始することもできます。 ステップ 10 – back4app管理パネルの探索 この back4app admin app は、非技術的な利害関係者のためのシンプルなインターフェースです。メインのparse dashboardに入らずに、クラスに対してcrud操作を簡単に行う方法を提供します。 管理アプリの有効化 ダッシュボードで、 more > admin app に移動します。 「 enable admin app 」をクリックして、管理ユーザーを作成します。 管理インターフェースにアクセスするためのサブドメインを選択します。 このパネルは、クエリを書くことなくデータを管理するのに役立ち、グラフィカルインターフェースを好むクライアントやチームメンバーに最適です。 結論 このガイドを完成させることで、あなたは ionicのバックエンドを構築する方法 を学びました 安全なバックエンドを作成しました back4app上で、堅牢なデータモデルと関係を持つものです。 restおよびgraphql apiと統合しました ionicアプリからデータを読み書きするために。 セキュリティを実装しました aclとclpを使用して。 カスタムロジックとトリガーのためにcloud codeをデプロイしました ユーザー認証とファイルストレージを設定しました タスクをスケジュールするためにcloud jobsを設定しました 外部統合のためにwebhooksを活用しました データ管理を簡素化するためにadmin panelを探求しました この基盤を持って、あなたの ionicアプリ は生産準備が整ったプラットフォームに進化できます。さらにロジックを追加したり、サードパーティapiに接続したり、使用ケースに合わせてセキュリティルールを微調整したりしてください。 次のステップ キャッシング、ロールベースのアクセス、パフォーマンスモニタリングを実装することで、プロダクションビルドを強化してください リアルタイムのライブクエリや多要素認証などの高度な機能を統合してください 分析、ログ、パフォーマンスチューニングの詳細な探求のためにback4appの公式ドキュメントを参照してください back4appの堅牢なバックエンドサービスと組み合わせたチャットアプリケーション、iot統合、または位置情報ベースの機能を示す他のチュートリアルを探求してください