How to Develop a CRUD Application with Deno? A Comprehensive Guide

概要 このガイドでは、denoを使用してシンプルなcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を示します。 私たちは、信頼できるデータベースソリューションとして機能するように構成されたバックエンド管理プラットフォームとしてback4appを活用し、バックエンドサービスと対話するためにapiアプローチを採用します。 このチュートリアルでは、あなたは 「 basic crud app deno 」という名前のback4appプロジェクトを設定します。 crud操作に合わせたコレクションとフィールドを持つデータベーススキーマを設計し、構成します。 back4app管理アプリを利用して、直感的なドラッグアンドドロップインターフェースでコレクションを管理します。 rest/graphql呼び出しを使用して、denoフロントエンドをback4appに接続します。 堅牢なアクセス制御手段でバックエンドを保護します。 このガイドの終わりまでに、基本的なデータ操作とユーザー認証をサポートする本番環境向けのwebアプリケーションを構築することができます。 重要な洞察 データを効率的に処理するためにcrud機能をマスターします。 denoベースのフロントエンドと統合されたスケーラブルなバックエンドを設計する方法を学びます。 シームレスなデータ管理のためにback4app管理アプリを使用します。 dockerによるコンテナ化を含むデプロイメント戦略を発見します。 前提条件 開始する前に、次のことを確認してください back4appアカウントと初期化されたプロジェクト。 必要に応じて、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 deno開発環境。 denoがインストールされ、更新されていることを確認してください（バージョン1 10以上を推奨）。 javascript/typescript、deno、およびrest apiの概念に精通していること。 さらなる読み物として、 denoマニュアル https //deno land/manual を参照してください。 ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの立ち上げ back4appアカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンをクリックします。 プロジェクトに名前を付けます basic crud app deno と画面の指示に従います。 新しいプロジェクトを作成 プロジェクトが作成されると、ダッシュボードに表示され、バックエンドの設定の基盤が整います。 ステップ 2 – データベーススキーマの作成 データモデルの構造化 このcrudアプリケーションでは、複数のコレクションを定義します。以下は、基本的な操作を容易にするための推奨フィールドを持つサンプルコレクションです。 1\ コレクション アイテム このコレクションは各アイテムの詳細を保持しています。 フィールド タイプ 目的 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な概要。 作成日時 日付 アイテムが追加された時刻。 更新日時 日付 最新の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザープロフィールと認証データを保存します。 フィールド タイプ 目的 id オブジェクトid 自動生成された主キー。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全にハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最終更新のタイムスタンプ。 これらのコレクションは、back4appダッシュボードで手動で作成できます。各コレクションの新しいクラスを作成し、各フィールドを定義するための列を追加します。 新しいクラスを作成 フィールドを追加するには、タイプを選択し、名前を付け、デフォルトを設定し、必須としてマークすることもできます。 カラムを作成 back4app aiエージェントを使用したスキーマ作成 back4app aiエージェントは、説明的なプロンプトを入力することでスキーマ生成を簡素化し、必要なコレクションとフィールドを自動的に作成します。 aiエージェントの使用手順 aiエージェントにアクセスする back4appダッシュボードを開き、aiエージェントオプションを見つけます。 データモデルの説明を入力する コレクションとフィールドをリストした詳細なプロンプトを提供します。 レビューと適用 生成されたスキーマの提案を確認し、プロジェクトに実装します。 サンプルプロンプト create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) このアプローチは、バックエンドスキーマの設定における一貫性と効率を確保します。 ステップ3 – 管理インターフェースとcrud機能の有効化 管理インターフェースの概要 back4app管理アプリは、バックエンドデータを扱うためのノーコードインターフェースを提供します。その直感的なドラッグアンドドロップデザインは、crud操作の簡単な管理を促進します。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 をクリックして 「管理アプリを有効にする。」 管理者資格情報を設定 初期の管理者ユーザーを作成することで、役割も設定されます（例： b4aadminuser ) とシステムコレクション。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてコレクションを簡単に管理します。 管理アプリダッシュボード 管理アプリを通じたcrud操作の管理 管理アプリでは、次のことができます レコードを追加 新しいエントリを作成するには、任意のコレクション（例：アイテム）で「レコードを追加」をクリックします。 レコードを表示/編集 詳細を確認または修正するためにレコードを選択します。 レコードを削除 もはや必要のないエントリを削除します。 このシンプルなツールは、基本的なデータ操作を効率化します。 ステップ4 – denoとback4appの接続 バックエンドが設定されたら、restまたはgraphql apiを使用してdenoフロントエンドをリンクする時です。 オプション rest/graphql api呼び出しの使用 back4appと対話するためにapi呼び出しに依存します。 例 denoでrestを介してデータを取得 モジュールを作成します（例： fetchitems ts ) 次のコードを使用します const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); 必要に応じて、denoアプリケーションにapi呼び出しを統合します。 ステップ5 – バックエンドセキュリティの強化 アクセス制御リスト（acl）の実装 各オブジェクトにaclを割り当ててデータを保護します。たとえば、アイテムをプライベートにするには async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを調整してデフォルトのアクセスポリシーを定義し、認証されたユーザーまたは権限のあるユーザーのみが機密データにアクセスまたは変更できるようにします。 ステップ6 – ユーザー認証の管理 ユーザーアカウントの作成 back4appは認証のためにparse userクラスを使用します。denoアプリケーション内で、rest api呼び出しを介してユーザー登録とログインを管理します。 例：denoでのユーザー登録 async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key" }, body json stringify({ username, password, email }) }); const data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); このアプローチは、ログインおよびセッション管理にも同様に適用できます。 ステップ7 – webデプロイメントによるdenoフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリから直接コードをデプロイすることで、denoベースのフロントエンドをホストできます。 7 1 – プロダクションバージョンのビルド ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します たとえば、esbuildのようなバンドラーを使用する場合 deno run allow read allow write build script ts ビルド出力を確認します 出力ディレクトリ（例 dist ）に index html , バンドルされたjavascript、css、および画像などの必要な静的ファイルが含まれていることを確認します。 7 2 – コードの整理とコミット あなたのリポジトリには、denoフロントエンドのすべてのソースファイルが含まれている必要があります。例の構造は次のようになります basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md サンプルファイル deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; サンプルファイル src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); githubにコードをコミットする gitを初期化する git init すべてのファイルをステージする git add 変更をコミットする git commit m "deno crudフロントエンドの初期コミット" githubにプッシュする リポジトリを作成する（例 basic crud app deno ) そしてプッシュする git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – githubとback4appのwebデプロイメントのリンク back4appにログインし、プロジェクトに移動します。 webデプロイメント機能をクリックします。 githubアカウントを接続します プロンプトに従って。 リポジトリとブランチを選択します (例 main ) denoコードを保持している。 7 4 – デプロイメント設定の構成 指定 ビルドコマンド 事前にビルドされた dist フォルダーが存在しない場合、コマンドを設定します（例 deno run allow read allow write build script ts )。 出力ディレクトリ 出力フォルダーを定義します。例えば dist 。 環境変数 必要な環境変数を追加します（例 apiキー）。 7 5 – denoアプリケーションのdocker化 dockerでデプロイするには、プロジェクトに dockerfile を含めます \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] コンテナ化を希望する場合は、back4appでdockerデプロイメントオプションを選択してください。 7 6 – アプリケーションの起動 デプロイを開始する back4appダッシュボードの deploy ボタンをクリックします。 プロセスを監視する back4appがコードを取得し、ビルドステップを実行し、アプリをデプロイします。 サイトにアクセスする デプロイ後、denoアプリケーションがライブであるurlが提供されます。 7 7 – デプロイ成功の確認 提供されたurlを訪問する ブラウザでurlを開きます。 アプリケーションをテストする すべてのルート、静的アセット、およびapiエンドポイントが正しく機能することを確認します。 トラブルシューティング 問題が発生した場合は、デプロイログを確認し、設定を検証します。 ステップ8 – まとめと今後の方向性 おめでとうございます！あなたはdenoを使用してback4appをバックエンドとして基本的なcrudアプリケーションを成功裏に構築しました。 プロジェクトを設定し、 basic crud app deno を構築し、データベースを構造化し、admin appを通じてデータを管理し、api呼び出しを介してdenoフロントエンドを接続し、aclとclpでデータを保護しました。 今後の改善点： フロントエンドの拡張： 詳細ビュー、検索フィルター、リアルタイム更新などの機能を追加します。 高度なバックエンドロジック： クラウドファンクションや追加のapi統合を統合します。 セキュリティの強化： 役割ベースのアクセスやさらなる認証手段を探ります。 詳細については、 back4appのドキュメント https //www back4app com/docs を確認し、追加のリソースを探索してください。 コーディングを楽しんで、スケーラブルなdeno crudアプリケーションの構築を楽しんでください！