Quickstarters
Blazorのバックエンドを構築する方法?

34min
はじめに
このチュートリアルでは、Back4appを使用してBlazorアプリケーションの完全なバックエンドを構築する方法を学びます。
データベース管理、Cloud Code Functions、RESTおよびGraphQL API、ユーザー認証、リアルタイムクエリ（ライブクエリ）など、Back4appの重要な機能を統合する方法を説明し、Blazorフロントエンドとシームレスに通信する安全でスケーラブル、かつ堅牢なバックエンドを作成します。
C#を使用してインタラクティブなWeb UIを構築するためのASP.NET CoreフレームワークであるBlazorとBack4appの堅牢なバックエンドサービスを活用することで、開発者はバックエンド開発を加速できます。
Blazor ServerアプリまたはBlazor WebAssemblyアプリを構築している場合でも、Back4appとのシームレスな統合により、開発時間を大幅に短縮しながら、高品質なサーバーサイドビジネスロジックを確保できます。
このチュートリアルの終わりまでに、Blazorを使用したフルスタックWebアプリケーションに合わせた安全なバックエンド構造を構築することができます。
データ操作の処理、セキュリティコントロールの適用、クラウド機能の実装方法についての洞察を得ることで、Blazor Webアプリケーションを堅牢でスケーラブルにします。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウントと新しいBack4appプロジェクト
Back4appの始め方。
アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。
基本的なBlazor開発環境
最新の.NET SDKをインストールすることでこれを設定できます。Microsoftを使用して、dotnet new blazorserverまたはdotnet new blazorwasmのようなテンプレートを使用して新しいBlazorプロジェクトを作成します。
.NET SDK（バージョン6以上）がインストールされていること
Blazorアプリを構築および実行するための.NET SDKが必要です。
C#とBlazorの概念に精通していること
Blazor公式ドキュメント。
Blazorが初めての場合は、公式ドキュメントや初心者向けのチュートリアルを確認してから始めてください。
スムーズなチュートリアル体験を確保するために、始める前にこれらの前提条件を確認してください。
ステップ 1 – Back4app プロジェクトの設定
新しいプロジェクトを作成する
Back4app で Blazor バックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください:
Back4app アカウントにログインする.
Back4app ダッシュボードの「新しいアプリ」ボタンをクリックする.
アプリに名前を付ける（例：「Blazor-Backend-Tutorial」）。
﻿
この設定により、BlazorアプリケーションでParseを使用するたびに、特定のBack4appインスタンスに接続するように事前設定されます。
このステップを完了することで、BlazorフロントエンドとBack4appバックエンドの間に安全な接続が確立され、データベース操作、ユーザー管理などを行う道が開かれました。
ステップ2 – データベースの設定
データの保存とクエリ
Back4appプロジェクトが設定され、Parse SDKがBlazorアプリに統合されたので、データの保存と取得を開始できます。レコードを作成する最も簡単な方法は、ParseObjectクラスを使用することです:
SomeDataService.cs
using Parse;
using System.Threading.Tasks;

public class SomeDataService {
    public async Task<ParseObject> CreateTodoItemAsync(string title, bool isCompleted) {
        var todo = new ParseObject("Todo");
        todo["title"] = title;
        todo["isCompleted"] = isCompleted;

        try {
            await todo.SaveAsync();
            Console.WriteLine("Todo saved successfully: " + todo.ObjectId);
            return todo;
        } catch (Exception ex) {
            Console.WriteLine("Error saving Todo: " + ex.Message);
            return null;
        }
    }

    public async Task<IList<ParseObject>> FetchTodosAsync() {
        var query = new ParseQuery<ParseObject>("Todo");
        try {
            var results = await query.FindAsync();
            Console.WriteLine("Fetched Todo items: " + results.Count);
            return results;
        } catch (Exception ex) {
            Console.WriteLine("Error fetching Todos: " + ex.Message);
            return null;
        }
    }
}
using Parse;
using System.Threading.Tasks;

public class SomeDataService {
    public async Task<ParseObject> CreateTodoItemAsync(string title, bool isCompleted) {
        var todo = new ParseObject("Todo");
        todo["title"] = title;
        todo["isCompleted"] = isCompleted;

        try {
            await todo.SaveAsync();
            Console.WriteLine("Todo saved successfully: " + todo.ObjectId);
            return todo;
        } catch (Exception ex) {
            Console.WriteLine("Error saving Todo: " + ex.Message);
            return null;
        }
    }

    public async Task<IList<ParseObject>> FetchTodosAsync() {
        var query = new ParseQuery<ParseObject>("Todo");
        try {
            var results = await query.FindAsync();
            Console.WriteLine("Fetched Todo items: " + results.Count);
            return results;
        } catch (Exception ex) {
            Console.WriteLine("Error fetching Todos: " + ex.Message);
            return null;
        }
    }
}
﻿
また、操作のためにBack4appのREST APIエンドポイントを使用することもできます。
スキーマ設計とデータ型
デフォルトでは、Parseは スキーマを動的に作成することを許可しますが、より多くの制御のためにBack4appダッシュボードでクラスとデータ型を定義することもできます。
「データベース」セクションに移動します あなたのBack4appダッシュボードで。
新しいクラスを作成します（例：「Todo」）を作成し、タイトル（String）やisCompleted（Boolean）などの関連する列を追加します。
新しいクラスを作成
﻿
クエリを実行する際は、ポインタデータを含めてください:
SomeDataService.cs (continuation)
public async Task<IList<ParseObject>> FetchTodosWithCategoryAsync() {
    var query = new ParseQuery<ParseObject>("Todo").Include("category");
    try {
        var todosWithCategory = await query.FindAsync();
        return todosWithCategory;
    } catch (Exception ex) {
        Console.WriteLine("Error fetching todos with category: " + ex.Message);
        return null;
    }
}
public async Task<IList<ParseObject>> FetchTodosWithCategoryAsync() {
    var query = new ParseQuery<ParseObject>("Todo").Include("category");
    try {
        var todosWithCategory = await query.FindAsync();
        return todosWithCategory;
    } catch (Exception ex) {
        Console.WriteLine("Error fetching todos with category: " + ex.Message);
        return null;
    }
}
﻿
ライブクエリ
Blazor Serverアプリでリアルタイム更新を行うには、SignalR接続をライブクエリに使用することを検討してください。Parse .NET SDKはライブクエリをサポートしていますが、Blazorアプリケーション内で直接統合するには、リアルタイム通信のためにSignalRとの追加設定が必要になる場合があります。
ライブクエリを有効にするには、アプリのサーバー設定の下でBack4appダッシュボードを使用します。「ライブクエリ」がオンになっていることを確認してください。
必要に応じて.NETでライブクエリクライアントを構成する。ただし、Blazorアプリの場合、SignalRを利用する方がサーバー側接続においてより慣用的かもしれません。
Blazor内でライブクエリを設定する複雑さと、Blazor WebAssemblyにおけるParse .NET SDKの潜在的な制限のため、ParseライブクエリとSignalRクライアントを橋渡しするサーバー側サービスを実装する必要があるかもしれません。
ステップ3 – ACLとCLPによるセキュリティの適用
Back4appのセキュリティメカニズム
Back4appは、アクセス制御リスト（ACL）とクラスレベルの権限（CLP）を提供することで、セキュリティを真剣に考えています。これらの機能により、オブジェクトまたはクラスごとにデータの読み取りや書き込みを制限でき、認可されたユーザーのみがデータを変更できるようにします。
﻿
アクセス制御リスト (ACL)
「ACL」は、どのユーザー、役割、または一般の人々が読み書き操作を行うことができるかを決定するために、個々のオブジェクトに適用されます。例えば:
SomeDataService.cs (ACL example)
public async Task<ParseObject> CreatePrivateTodoAsync(string title, ParseUser ownerUser) {
    var todo = new ParseObject("Todo");
    todo["title"] = title;

    // Create an ACL granting read/write access only to the owner
    var acl = new ParseACL(ownerUser);
    acl.PublicReadAccess = false;
    acl.PublicWriteAccess = false;
    todo.ACL = acl;

    try {
        await todo.SaveAsync();
        return todo;
    } catch (Exception ex) {
        Console.WriteLine("Error saving private todo: " + ex.Message);
        return null;
    }
}
public async Task<ParseObject> CreatePrivateTodoAsync(string title, ParseUser ownerUser) {
    var todo = new ParseObject("Todo");
    todo["title"] = title;

    // Create an ACL granting read/write access only to the owner
    var acl = new ParseACL(ownerUser);
    acl.PublicReadAccess = false;
    acl.PublicWriteAccess = false;
    todo.ACL = acl;

    try {
        await todo.SaveAsync();
        return todo;
    } catch (Exception ex) {
        Console.WriteLine("Error saving private todo: " + ex.Message);
        return null;
    }
}
﻿
オブジェクトを保存すると、それには指定されたユーザー以外の誰も読み取りまたは変更できないACLが設定されます。
クラスレベルの権限 (CLP)
CLPは、クラス全体のデフォルトの権限を管理します。たとえば、クラスが一般に読み取り可能または書き込み可能か、特定の役割のみがアクセスできるかどうかです。
Back4appダッシュボードに移動, アプリを選択し、データベースセクションを開きます。
クラスを選択（例: “Todo”）。
クラスレベルの権限タブを開きます。
「読み取りまたは書き込みに認証が必要」や「一般の人にはアクセス不可」など、デフォルトを設定します。
これらの権限は基本を設定し、ACLは個々のオブジェクトの権限を微調整します。堅牢なセキュリティモデルは通常、CLP（広範な制限）とACL（オブジェクトごとの細かい制限）を組み合わせます。詳細については、アプリセキュリティガイドライン。﻿
ステップ 4 – クラウドファンクションの作成とデプロイ
Cloud Codeは、サーバーやインフラを管理することなく、サーバーサイドでカスタムJavaScriptコードを実行できるParse Server環境の機能です。
Cloud Codeを書くことで、Back4appのバックエンドに追加のビジネスロジック、バリデーション、トリガー、そしてParse Server上で安全かつ効率的に実行される統合を拡張できます。
動作の仕組み
Cloud Codeを書くときは、通常、JavaScript関数、トリガー、および必要なNPMモジュールを main.js (または app.js) ファイルに配置します。
このファイルは、Back4appプロジェクトにデプロイされ、Parse Server環境内で実行されます。
これらの関数とトリガーはサーバー上で実行されるため、機密ロジックを処理したり、敏感なデータを処理したり、バックエンド専用のAPI呼び出しを行ったりすることを信頼できます - クライアントに直接公開したくないプロセスです。
あなたのBack4appアプリのすべてのCloud Codeは、Back4appによって管理されているParse Server内で実行されるため、サーバーのメンテナンス、スケーリング、またはプロビジョニングについて心配する必要はありません。
main.jsファイルを更新してデプロイするたびに、実行中のParse Serverは最新のコードで更新されます。
main.jsファイル構造
典型的な main.js には次のような内容が含まれる場合があります:
必要なモジュールのための Require ステートメント（NPMパッケージ、組み込みNodeモジュール、または他のクラウドコードファイル）。
クラウド関数の定義 を使用して Parse.Cloud.define().
トリガー 例えば Parse.Cloud.beforeSave(), Parse.Cloud.afterSave(), など。
インストールしたNPMモジュール（必要な場合）。
main.js
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
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;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
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;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
NPMモジュールをインストールして使用する能力により、Cloud Codeは非常に柔軟になり、外部APIとの統合、データ変換の実行、または複雑なサーバーサイドロジックの実行が可能になります。
典型的な使用例
ビジネスロジック: 例えば、分析のためにデータを集約したり、データベースに保存する前に計算を行ったりします。
データ検証: 特定のフィールドが存在することや、ユーザーがレコードを保存または削除する前に正しい権限を持っていることを確認します。
トリガー: データが変更されたときにアクションを実行します（例：ユーザーがプロフィールを更新したときに通知を送信します）。
統合: サードパーティのAPIやサービスと接続します。
セキュリティ強化: 機密操作を実行する前に、入力を検証およびサニタイズしてセキュリティを強化します。
関数をデプロイする
以下は、クライアントから送信されたテキスト文字列の長さを計算するシンプルなCloud Code関数です。
main.js
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
デプロイするには Back4app CLI:
1 - CLIをインストールする：
Linux/MacOSの場合:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Windowsの場合:
リリースページから b4a.exe ファイルをダウンロードします。
2 - アカウントキーを設定する:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - クラウドコードをデプロイする：
Bash
b4a deploy
b4a deploy
﻿
ダッシュボードからデプロイする：
アプリのダッシュボードで、 Cloud Code > Functions に移動します。
関数を main.js エディタにコピー/ペーストします。
「デプロイ」をクリックします。
関数を呼び出す
Parse .NET SDKを使用してBlazorから:
SomeDataService.cs (calling function)
public async Task<int?> GetTextLengthAsync(string text) {
    try {
        var result = await ParseCloud.CallFunctionAsync<Dictionary<string, object>>("calculateTextLength", 
            new Dictionary<string, object> { { "text", text } });
        if(result != null && result.ContainsKey("length"))
            return Convert.ToInt32(result["length"]);
        return null;
    } catch(Exception ex) {
        Console.WriteLine("Error calling cloud function: " + ex.Message);
        return null;
    }
}
public async Task<int?> GetTextLengthAsync(string text) {
    try {
        var result = await ParseCloud.CallFunctionAsync<Dictionary<string, object>>("calculateTextLength", 
            new Dictionary<string, object> { { "text", text } });
        if(result != null && result.ContainsKey("length"))
            return Convert.ToInt32(result["length"]);
        return null;
    } catch(Exception ex) {
        Console.WriteLine("Error calling cloud function: " + ex.Message);
        return null;
    }
}
﻿
ReactJSチュートリアルに示されているように、RESTまたはGraphQL経由でも呼び出すことができます。
ステップ5 – ユーザー認証の設定
Back4appにおけるユーザー認証
Back4appは、Parse Userクラスを認証の基盤として活用しています。デフォルトでは、Parseはパスワードのハッシュ化、セッショントークン、セキュアストレージを処理します。これは、複雑なセキュリティフローを手動で設定する必要がないことを意味します。
ユーザー認証の設定
Blazorアプリケーションでは、次のように新しいユーザーを作成できます:
AuthService.cs
using Parse;
using System.Threading.Tasks;

public class AuthService {
    public async Task SignUpUserAsync(string username, string password, string email) {
        var user = new ParseUser() {
            Username = username,
            Password = password,
            Email = email
        };

        try {
            await user.SignUpAsync();
            Console.WriteLine("User signed up successfully!");
        } catch (Exception ex) {
            Console.WriteLine("Error signing up user: " + ex.Message);
        }
    }

    public async Task LogInUserAsync(string username, string password) {
        try {
            var user = await ParseUser.LogInAsync(username, password);
            Console.WriteLine("User logged in: " + user.Username);
        } catch (Exception ex) {
            Console.WriteLine("Error logging in user: " + ex.Message);
        }
    }
}
using Parse;
using System.Threading.Tasks;

public class AuthService {
    public async Task SignUpUserAsync(string username, string password, string email) {
        var user = new ParseUser() {
            Username = username,
            Password = password,
            Email = email
        };

        try {
            await user.SignUpAsync();
            Console.WriteLine("User signed up successfully!");
        } catch (Exception ex) {
            Console.WriteLine("Error signing up user: " + ex.Message);
        }
    }

    public async Task LogInUserAsync(string username, string password) {
        try {
            var user = await ParseUser.LogInAsync(username, password);
            Console.WriteLine("User logged in: " + user.Username);
        } catch (Exception ex) {
            Console.WriteLine("Error logging in user: " + ex.Message);
        }
    }
}
﻿
セッション管理
成功したログインの後、Parseはユーザーオブジェクトに保存されるセッショントークンを作成します。Blazorアプリでは、現在ログインしているユーザーにアクセスできます:
SomeComponent.razor.cs
var currentUser = ParseUser.CurrentUser;
if (currentUser != null) {
    Console.WriteLine("Currently logged-in user: " + currentUser.Username);
} else {
    Console.WriteLine("No user is logged in");
}
var currentUser = ParseUser.CurrentUser;
if (currentUser != null) {
    Console.WriteLine("Currently logged-in user: " + currentUser.Username);
} else {
    Console.WriteLine("No user is logged in");
}
﻿
Parseはバックグラウンドでトークンベースのセッションを自動的に処理しますが、手動で管理または取り消すこともできます。ログアウトするには:
AuthService.cs (logout)
public async Task LogOutAsync() {
    await ParseUser.LogOutAsync();
    Console.WriteLine("User logged out");
}
public async Task LogOutAsync() {
    await ParseUser.LogOutAsync();
    Console.WriteLine("User logged out");
}
﻿
ソーシャルログイン統合
Back4appとParseは、GoogleやFacebookなどの人気のあるOAuthプロバイダーと統合できます。
設定は異なる場合があり、サーバー側の設定や追加のパッケージが必要になることがよくあります。詳細な手順については、ソーシャルログインドキュメントを参照してください。
Blazor ServerアプリはASP.NET Core上で実行されるため、ParseとともにASP.NET Core Identityプロバイダーを使用してソーシャルログインを統合することができます。
メール確認とパスワードリセット
メール確認とパスワードリセットを有効にするには:
メール設定に移動し、Back4appダッシュボードで設定します。
メール確認を有効にすることで、新しいユーザーが自分のメールアドレスの所有権を確認できるようにします。
送信元アドレスを設定, メールテンプレート、および必要に応じてカスタムドメインを設定します。
これらの機能は、ユーザーのメールの所有権を確認し、安全なパスワード回復方法を提供することで、アカウントのセキュリティとユーザーエクスペリエンスを向上させます。
ステップ 6 – ファイルストレージの取り扱い
ファイルのアップロードと取得
Parse には、ファイルのアップロードを処理するための ParseFile クラスが含まれており、Back4app が安全に保存します:
FileService.cs
using Parse;
using System;
using System.Threading.Tasks;

public class FileService {
    public async Task<string> UploadImageAsync(byte[] fileData, string fileName) {
        var parseFile = new ParseFile(fileName, fileData);
        try {
            await parseFile.SaveAsync();
            Console.WriteLine("File saved: " + parseFile.Url);
            return parseFile.Url;
        } catch (Exception ex) {
            Console.WriteLine("Error uploading file: " + ex.Message);
            return null;
        }
    }
}
using Parse;
using System;
using System.Threading.Tasks;

public class FileService {
    public async Task<string> UploadImageAsync(byte[] fileData, string fileName) {
        var parseFile = new ParseFile(fileName, fileData);
        try {
            await parseFile.SaveAsync();
            Console.WriteLine("File saved: " + parseFile.Url);
            return parseFile.Url;
        } catch (Exception ex) {
            Console.WriteLine("Error uploading file: " + ex.Message);
            return null;
        }
    }
}
﻿
ファイルをオブジェクトに添付するには:
FileService.cs (continued)
public async Task<ParseObject> CreatePhotoObjectAsync(byte[] fileData, string fileName) {
    var photo = new ParseObject("Photo");
    var parseFile = new ParseFile(fileName, fileData);
    photo["imageFile"] = parseFile;

    try {
        await photo.SaveAsync();
        return photo;
    } catch (Exception ex) {
        Console.WriteLine("Error creating photo object: " + ex.Message);
        return null;
    }
}
public async Task<ParseObject> CreatePhotoObjectAsync(byte[] fileData, string fileName) {
    var photo = new ParseObject("Photo");
    var parseFile = new ParseFile(fileName, fileData);
    photo["imageFile"] = parseFile;

    try {
        await photo.SaveAsync();
        return photo;
    } catch (Exception ex) {
        Console.WriteLine("Error creating photo object: " + ex.Message);
        return null;
    }
}
﻿
ファイルのURLを取得するには:
SomeComponent.razor.cs
var imageFile = photo.Get<ParseFile>("imageFile");
var imageUrl = imageFile.Url;
var imageFile = photo.Get<ParseFile>("imageFile");
var imageUrl = imageFile.Url;
﻿
この imageUrl を Blazor コンポーネントで表示するには、<img> タグのソースとして設定します。
ファイルセキュリティ
Parse Server はファイルアップロードのセキュリティを管理するための柔軟な構成を提供します。ParseFiles に ACL を使用するか、必要に応じてサーバーレベルの構成を設定します。
ステップ 7 – クラウドジョブによるタスクのスケジューリング
クラウドジョブ
クラウドジョブ は Back4app で、バックエンド上でルーチンタスクをスケジュールして実行することができます - 古いデータのクリーンアップや、毎日の要約メールの送信などです。典型的なクラウドジョブは次のようになります:
main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  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);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  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);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
クラウドコードをデプロイする 新しいジョブと共に（CLI またはダッシュボード経由で）。
Back4app ダッシュボードに移動する > アプリ設定 > サーバー設定 > バックグラウンドジョブ.
ジョブをスケジュールする 毎日またはニーズに合った間隔で実行されるように。
﻿
クラウドジョブを使用すると、手動での介入なしにバックグラウンドメンテナンスやその他の定期的なプロセスを自動化できます。
ステップ8 – Webhookの統合
Webhookを使用すると、特定のイベントが発生するたびに、Back4appアプリが外部サービスにHTTPリクエストを送信できます。
これは、決済ゲートウェイ、メールマーケティングツール、または分析プラットフォームなどのサードパーティシステムと統合するために強力です。
Webhookの設定に移動し、Back4appダッシュボード > その他 > WebHooksに進み、Add Webhookをクリックします。
エンドポイントを設定（例： https://your-external-service.com/webhook-endpoint）。
トリガーを設定して、Back4appのクラスやCloud Code関数内のどのイベントがWebhookを発火させるかを指定します。
例えば、新しいTodoが作成されるたびにSlackチャンネルに通知したい場合：
受信Webhookを受け入れるSlackアプリを作成します。
SlackのWebhook URLをコピーします。
Back4appダッシュボードで、「Todoクラスの新しいレコード」というイベントのために、そのSlack URLをエンドポイントとして設定します。
必要に応じて、カスタムHTTPヘッダーやペイロードを追加することもできます。
Cloud Code内で、beforeSaveやafterSaveのトリガーでカスタムHTTPリクエストを行うことでWebhookを定義することもできます。
ステップ9 – Back4app管理パネルの探索
「Back4app管理アプリ」は、非技術的なユーザーがCRUD操作を行い、コードを書くことなく日常的なデータタスクを処理するために設計されたウェブベースの管理インターフェースです。
それは、モデル中心で、ユーザーフレンドリーなインターフェースを提供し、データベース管理、カスタムデータ管理、エンタープライズレベルの操作を効率化します。
管理アプリの有効化
「管理アプリ」を有効にするには、「アプリダッシュボード > その他 > 管理アプリ」に移動し、「管理アプリを有効にする」ボタンをクリックします。
最初の管理ユーザーを作成（ユーザー名/パスワード）し、これにより新しい役割（B4aAdminUser）とクラス（B4aSetting、B4aMenuItem、B4aCustomField）がアプリのスキーマに自動的に生成されます。
管理インターフェースにアクセスするためのサブドメインを選択し、セットアップを完了します。
作成した管理者の資格情報を使用して、ログインし、新しい管理アプリダッシュボードにアクセスします。
有効化されると、Back4app管理アプリは、Parseダッシュボードやバックエンドコードを直接使用することなく、データベースのレコードを簡単に表示、編集、または削除することができます。
結論
この包括的なチュートリアルに従うことで、あなたは:
安全なバックエンドをBack4app上のBlazorアプリのために作成しました。
データベースを構成しました クラススキーマ、データ型、関係を使用して。
リアルタイムクエリを統合しました 適用可能な場合に即時データ更新のために。
セキュリティ対策を適用しました ACLとCLPを使用してデータアクセスを保護および管理。
Cloud Codeを実装しました サーバー側でカスタムビジネスロジックを実行するための関数。
ユーザー認証を設定しました メール確認とパスワードリセットをサポート。
ファイルのアップロードを管理しました オプションのファイルセキュリティコントロール付きで。
Cloud Jobsをスケジュールしました 自動化されたバックグラウンドタスクのために。
Webhookを使用しました 外部サービスと統合するために。
Back4app管理パネルを探索しました データ管理のために。
堅牢なBack4appバックエンドと堅固なBlazorフロントエンドを持つことで、機能豊富でスケーラブルかつ安全なWebアプリケーションを開発するための十分な準備が整いました。
より高度な機能を探求し、ビジネスロジックを統合し、Back4appの力を活用して、サーバーとデータベースの管理にかかる無数の時間を節約しましょう。コーディングを楽しんでください！
次のステップ
本番環境に適したBlazorアプリを構築する このバックエンドを拡張して、より複雑なデータモデル、キャッシング戦略、パフォーマンス最適化を処理します。
高度な機能を統合する 専門的な認証フロー、役割ベースのアクセス制御、または外部APIなど。
Back4appの公式ドキュメントをチェックする 高度なセキュリティ、パフォーマンス調整、ログ分析についての詳細を深く掘り下げるために。
他のチュートリアルを探る リアルタイムチャットアプリケーション、IoTダッシュボード、または位置情報サービスに関するもの。ここで学んだ技術をサードパーティのAPIと組み合わせて、複雑な実世界のアプリケーションを作成します。
﻿
更新日 11 Feb 2025
このページは役に立ちましたか？
ReactJSでCRUDアプリを作成する方法は？
htmxのバックエンドを構築する方法は？