クイックスターターズ
Ionicのためのバックエンドを構築する方法は？

33min
イントロダクション
このチュートリアルでは、Back4Appを使用してIonicアプリの完全なバックエンドを構築する方法を学びます。
データベース管理、Cloud Code Functions、RESTおよびGraphQL API、ユーザー認証、ファイル処理などについて説明します。
私たちの目標は、Ionicのバックエンドを構築する方法を示すことです。それは安全で、スケーラブルで、メンテナンスが容易です。
Back4Appの直感的な環境を使用して、サーバーサイドのセットアップを簡素化し、手動でサーバーやデータベースを構成する手間を省きます。
Cloud Jobsを使用したタスクのスケジューリング、高度なセキュリティルールの適用、他のサービスとのWebhookの統合など、必須のツールを学びます。
最後には、この基盤となるバックエンドをIonicアプリの本番環境に適したシステムに拡張する準備が整います。
前提条件
Back4Appアカウントと新しいBack4Appプロジェクト
Back4Appの始め方。
アカウントを持っていない場合は、無料で作成し、上記のガイドに従ってプロジェクトを設定してください。
基本的なIonic開発環境
Ionic CLIがインストールされており、Ionicアプリを作成して実行できることを確認してください。
Node.js（バージョン14以上）がインストールされていること
Node.jsをダウンロードして、依存関係を管理し、プロジェクトを構築します。
JavaScript/TypeScriptおよびIonicの概念に精通していること
Ionic公式ドキュメント.
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」）を作成し、カラムを追加します（例：titleをStringとして、isCompletedをBooleanとして）。
新しいクラスを作成
﻿
2. AIエージェントを使用したデータモデルの作成
あなたの Back4App ダッシュボードから AI エージェント を開きます。
「タイトル（String）と isCompleted（Boolean）のフィールドを持つ Todo クラスを作成する」といった、希望するスキーマを説明します。
AI エージェントがスキーマを自動的に生成します。
﻿
3. REST API を使用したデータの読み取りと書き込み
あなたの Ionic コードから、HTTP リクエストを実行できます。例えば、Todoを作成するには:
Bash
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
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 を 取得するには:
Bash
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
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のミューテーションやクエリを送信できます。例えば、新しいTodoを作成するには:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
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を通じて渡すことができます:
Bash
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
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
﻿
詳細については、アプリセキュリティガイドラインをご覧ください。
ステップ4 – クラウドコード関数の作成
クラウドコードの理由
クラウドコードを使用すると、データ検証、トリガー、または統合などのタスクのためにサーバーサイドJavaScriptを実行できます。ロジックを集中させるためにカスタムエンドポイントを作成でき、特にクライアントからコードを排除したい場合に便利です。
例の関数とトリガー
サーバー側のmain.jsに次のように記述できます:
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.';
  }
});
// 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を介してデプロイするか、Cloud Codeダッシュボードのセクションで行います。
Ionicからクラウドコードを呼び出す
POSTリクエストを送信できます:
Bash
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
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
﻿
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.';
  }
});
// 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を介してデプロイするか、Cloud Codeダッシュボードのセクションで行います。
Ionicからクラウドコードを呼び出す
POSTリクエストを送信できます:
返されたデータまたはエラーメッセージを含むJSONレスポンスが得られます。
NPMモジュール
サードパーティサービスを統合するために、Cloud Code環境に axios のようなパッケージをインストールできます。これらを main.js: に含めてください。
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;
});
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呼び出しで行うことができます。例えば、サインアップするには:
Bash
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": "[email protected]"
  }' \
  https://parseapi.back4app.com/users
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
﻿
ログイン
Bash
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
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のようなソーシャルログインを構成できます。詳細な手順については、ソーシャルログインのドキュメントを参照してください。
ステップ 6 – ファイルストレージの取り扱い
ファイルストレージの設定
Back4Appは安全なファイルストレージを提供します。オブジェクトにファイルを添付するか、独立して保存できます。例えば:
Bash
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
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が含まれます:
Bash
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
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:
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.`;
});
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.
Scheduling a Cloud Job
﻿
ステップ 9 – Webhookの統合
Webhookを使用すると、Back4Appプロジェクト内で特定のイベントが発生したときに外部サービスにデータを送信できます。Ionicアプリが新しいレコードを作成した後にStripeやSlackでアクションをトリガーする必要がある場合、Webhookを使用してそれを自動化できます。
「もっと見る」に移動します > WebhookをBack4Appダッシュボードで選択します。
新しいWebhookを追加し、そのエンドポイントを設定します（例：https://your-service.com/webhook-endpoint)。
「イベント」を選択します（例：「保存後」Todoクラス）。
Webhookの追加
﻿
標準のHTTPライブラリを使用して、main.js内のCloud Codeトリガーから外部リクエストを開始することもできます。
ステップ 10 – Back4App管理パネルの探索
この Back4App Admin App は、非技術的な利害関係者のためのシンプルなインターフェースです。主要なParseダッシュボードに入ることなく、クラスに対して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の公式ドキュメントを参照してください。
チャットアプリケーション、IoT統合、またはBack4Appの堅牢なバックエンドサービスと組み合わせた位置情報ベースの機能を示す 他のチュートリアルを探索してください。
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
Symfonyのバックエンドを構築する方法は？
Dartのバックエンドを構築する方法は？