How to Build a Backend for Blazor?

はじめに このチュートリアルでは、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の始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なblazor開発環境 最新の net sdkをインストールすることでこれを設定できます。 microsoft https //dotnet microsoft com/download を使用して、 dotnet new blazorserver または dotnet new blazorwasm のようなテンプレートを使用して新しいblazorプロジェクトを作成します。 net sdk（バージョン6以上）がインストールされていること blazorアプリを構築および実行するための net sdkが必要です。 c#およびblazorの概念に精通していること blazor公式ドキュメント。 https //docs microsoft com/en us/aspnet/core/blazor/?view=aspnetcore 6 0 blazorが初めての場合は、公式ドキュメントまたは初心者向けのチュートリアルを確認してから始めてください。 スムーズなチュートリアル体験を確保するために、始める前にこれらの前提条件を確認してください。 ステップ 1 – back4app プロジェクトの設定 新しいプロジェクトを作成する back4app で blazor バックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください back4app アカウントにログインする back4app ダッシュボードの「新しいアプリ」ボタンをクリックする アプリに名前を付ける （例：「blazor backend tutorial」）。 プロジェクトが作成されると、back4appダッシュボードにリスト表示されます。このプロジェクトは、このチュートリアルで説明するすべてのバックエンド設定の基盤となります。 parse sdkを接続する back4appは、データを管理し、リアルタイム機能を提供し、ユーザー認証を処理するためにparseプラットフォームに依存しています。blazorアプリケーションをback4appに接続するには、 net用のparse sdkをインストールし、back4appダッシュボードの資格情報で初期化する必要があります。 parseキーを取得する back4appダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動して、 アプリケーションid と netキー を見つけます。また、 parseサーバーurl （通常は https //parseapi back4app com )を見つけることができます。 blazorプロジェクトにparse sdkをインストールする dotnet add package parse blazorアプリケーションでparseを初期化する： 通常、初期化は program cs または専用のサービスクラスで設定します： program cs using parse; var builder = webapplication createbuilder(args); // parseを初期化 parseclient initialize(new parseclient configuration { applicationid = "your application id", windowskey = "your dotnet key", server = "https //parseapi back4app com" }); var app = builder build(); // 残りの設定 この設定により、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; } } } また、操作のためにback4appのrest apiエンドポイントを使用することもできます。 スキーマ設計とデータ型 デフォルトでは、parseは スキーマを動的に作成することを許可します , しかし、より多くの制御のためにback4appダッシュボードでクラスとデータ型を定義することもできます。 「データベース」セクションに移動します あなたのback4appダッシュボードで。 新しいクラスを作成します （例：「todo」）を作成し、タイトル（string）やiscompleted（boolean）などの関連する列を追加します。 back4appはさまざまなデータ型をサポートしています 文字列 , 数値 , ブール値 , オブジェクト , 日付 , ファイル , ポインタ、配列、リレーション , ジオポイント , および ポリゴン 各フィールドに適切な型を選択できます。希望する場合は、blazorアプリからオブジェクトを最初に保存するときに、parseが自動的にこれらの列を作成することもできます。 back4appはデータモデルを設計するのに役立つaiエージェントを提供しています aiエージェントを開く アプリダッシュボードまたはメニューから。 データモデルを説明する 簡単な言葉で（例 “新しいtodoアプリをback4appで完全なクラススキーマで作成してください。”）。 aiエージェントにスキーマを作成させる aiエージェントを使用することで、データアーキテクチャの設定にかかる時間を節約し、アプリケーション全体での一貫性を確保できます。 リレーショナルデータ リレーショナルデータがある場合 例えば、複数の カテゴリ オブジェクトが複数の todo アイテムを指している場合 ポインタ または リレーション をparseで使用できます。プロセスはreactjsに似ていますが、 netオブジェクトを使用します somedataservice cs (続き) public async task\<parseobject> createtaskforcategoryasync(string categoryobjectid, string title) { var todo = new parseobject("todo"); // カテゴリへのポインタを作成 var categorypointer = parseobject createwithoutdata("category", categoryobjectid); todo\["title"] = title; todo\["category"] = categorypointer; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("カテゴリ関係のタスク作成中にエラーが発生しました " + ex message); return null; } } クエリを実行する際は、ポインタデータを含めてください 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; } } ライブクエリ 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; } } オブジェクトを保存すると、それには指定されたユーザー以外の誰も読み取りまたは変更できないaclがあります。 クラスレベルの権限 (clp) clp は、クラス全体のデフォルトの権限を管理します。たとえば、クラスが一般に読み取り可能または書き込み可能か、特定の役割のみがアクセスできるかどうかです。 back4appダッシュボードに移動 , アプリを選択し、 データベース セクションを開きます。 クラスを選択 （例 “todo”）。 クラスレベルの権限 タブを開きます。 「読み取りまたは書き込みに認証が必要」や「一般の人々にアクセス不可」など、デフォルトを設定します。 これらの権限は基本を設定し、aclは個々のオブジェクトの権限を微調整します。堅牢なセキュリティモデルは通常、clp（広範な制限）とacl（オブジェクトごとの細かい制限）を組み合わせます。詳細については、 アプリセキュリティガイドライン。 https //www back4app com/docs/security/parse security ステップ 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 には次のような内容が含まれる場合があります 必要なモジュール（npmパッケージ、組み込みnodeモジュール、または他のクラウドコードファイル）の require ステートメント。 クラウド関数の定義 を使用して 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'); } }); 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 }; }); デプロイするには back4app cli https //www back4app com/docs/local development/parse cli を使用します 1 cliをインストールします linux/macosの場合 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 ファイルをダウンロードします。 2 アカウントキーを設定します https //www back4app com/docs/local development/parse cli#f cxi b4a configure accountkey 3 クラウドコードをデプロイする： b4a deploy ダッシュボードからデプロイする ： アプリのダッシュボードで、 cloud code > functions に移動します。 関数を main js エディタにコピー/ペーストします。 「 deploy 」をクリックします。 関数を呼び出す blazorを使用してparse net sdkから呼び出す： 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; } } 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); } } } セッション管理 ログインに成功すると、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"); } parseはバックグラウンドでトークンベースのセッションを自動的に処理しますが、手動で管理または取り消すこともできます。ログアウトするには authservice cs (logout) public async task logoutasync() { await parseuser logoutasync(); console writeline("user logged out"); } ソーシャルログイン統合 back4appとparseは、googleやfacebookなどの人気のあるoauthプロバイダーと統合できます。 設定は異なる場合があり、サーバー側の設定や追加のパッケージが必要になることがよくあります。詳細な手順については、 ソーシャルログインドキュメント https //www back4app com/docs/platform/sign in with apple を参照してください。 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; } } } ファイルをオブジェクトに添付するには 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; } } ファイルのurlを取得するには somecomponent razor cs 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); } }); クラウドコードをデプロイする 新しいジョブと共に（cli またはダッシュボード経由で）。 back4app ダッシュボードに移動する > アプリ設定 > サーバー設定 > バックグラウンドジョブ ジョブをスケジュールする 毎日またはニーズに合った間隔で実行されるように。 クラウドジョブを使用すると、手動介入なしでバックグラウンドメンテナンスやその他の定期的なプロセスを自動化できます。 ステップ8 – ウェブフックの統合 ウェブフック を使用すると、特定のイベントが発生するたびに、back4appアプリが外部サービスにhttpリクエストを送信できます。 これは、決済ゲートウェイ、メールマーケティングツール、または分析プラットフォームなどのサードパーティシステムと統合するために強力です。 ウェブフックの設定に移動 し、back4appダッシュボード > その他 > ウェブフックに進み、次に「ウェブフックを追加」をクリックします。 エンドポイントを設定 （例、 https //your external service com/webhook endpoint https //your external service com/webhook endpoint ）。 トリガーを設定 して、back4appのクラスやクラウドコード関数内のどのイベントがウェブフックを発火させるかを指定します。 たとえば、新しいtodoが作成されるたびにslackチャンネルに通知したい場合 受信ウェブフックを受け入れるslackアプリを作成します。 slackのウェブフックurlをコピーします。 back4appダッシュボードで、「todoクラスの新しいレコード」というイベントのために、そのslack urlにエンドポイントを設定します。 必要に応じて、カスタムhttpヘッダーやペイロードを追加することもできます。 cloud code内で、beforesaveやaftersaveのようなトリガーでカスタムhttpリクエストを行うことで、ウェブフックを定義することもできます。 ステップ9 – back4app管理パネルの探索 「 back4app管理アプリ 」は、非技術的なユーザーがcrud操作を行い、コードを書くことなく日常的なデータタスクを処理するために設計されたウェブベースの管理インターフェースです。 それは、 モデル中心 で、 ユーザーフレンドリー なインターフェースを提供し、データベース管理、カスタムデータ管理、エンタープライズレベルの操作を効率化します。 管理アプリの有効化 「 管理アプリ 」を有効にするには、「 アプリダッシュボード > その他 > 管理アプリ 」に移動し、「管理アプリを有効にする」ボタンをクリックします。 最初の管理ユーザーを作成 （ユーザー名/パスワード）し、これにより新しい役割（b4aadminuser）とクラス（b4asetting、b4amenuitem、b4acustomfield）がアプリのスキーマに自動的に生成されます。 管理インターフェースにアクセスするための サブドメインを選択 し、セットアップを完了します。 作成した管理者の資格情報を使用して、 ログイン し、新しい管理アプリダッシュボードにアクセスします。 有効化されると、back4app管理アプリは、parseダッシュボードやバックエンドコードを直接使用することなく、データベースのレコードを表示、編集、または削除することを容易にします。 結論 この包括的なチュートリアルに従うことで、あなたは 安全なバックエンド をback4app上のblazorアプリのために作成しました。 データベースを構成しました クラススキーマ、データ型、関係を使用して。 リアルタイムクエリを統合しました 適用可能な場合に即時データ更新のために。 セキュリティ対策を適用しました aclとclpを使用してデータアクセスを保護および管理。 cloud codeを実装しました サーバー側でカスタムビジネスロジックを実行するための関数。 ユーザー認証を設定しました メール確認とパスワードリセットのサポートを含む。 ファイルのアップロードを管理しました および取得、オプションのファイルセキュリティコントロール付き。 cloud jobsをスケジュールしました 自動化されたバックグラウンドタスクのために。 webhookを使用しました 外部サービスと統合するために。 back4app管理パネルを探索しました データ管理のために。 堅牢なblazorフロントエンドと強力なback4appバックエンドを持つことで、機能豊富でスケーラブルかつ安全なwebアプリケーションを開発するための十分な準備が整いました。 より高度な機能を探求し、ビジネスロジックを統合し、back4appの力を活用して、サーバーとデータベースの管理にかかる無数の時間を節約しましょう。コーディングを楽しんでください！ 次のステップ 本番環境に適したblazorアプリを構築する このバックエンドを拡張して、より複雑なデータモデル、キャッシング戦略、パフォーマンス最適化を処理します。 高度な機能を統合する 専門的な認証フロー、役割ベースのアクセス制御、または外部apiなど。 back4appの公式ドキュメントをチェックする 高度なセキュリティ、パフォーマンス調整、ログ分析についての詳細を深く掘り下げるために。 他のチュートリアルを探る リアルタイムチャットアプリケーション、iotダッシュボード、または位置情報サービスに関するもの。ここで学んだ技術をサードパーティのapiと組み合わせて、複雑な実世界のアプリケーションを作成します。