How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

概要 このガイドでは、stenciljsを使用して基本的なcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を学びます。 このチュートリアルでは、データを効果的に管理するための基本的な操作を実行するウェブアプリを構築する手順を説明します。まず、「 basic crud app stenciljs 」というback4appプロジェクトを立ち上げます。これがあなたの堅牢なバックエンドとして機能します。 その後、コレクションとフィールドを手動で定義するか、back4app aiエージェントの支援を受けて、スケーラブルなデータベースを設計します。このステップにより、すべてのcrud操作を信頼性高くサポートするようにデータベースが調整されます。 次に、back4app admin appを利用して、直感的なドラッグアンドドロップインターフェースでコレクションをシームレスに管理します。このノーコードツールはcrudアクションの処理を簡素化します。 最後に、stenciljsフロントエンドをrest/graphql apiを介してback4appに接続します。parse sdkも利用可能ですが、stenciljsに最適なapi統合に焦点を当て、バックエンドが高度なアクセス制御を通じて安全であることを保証します。 このチュートリアルの終わりまでに、基本的なcrud機能とユーザー認証、堅牢なデータ管理をサポートする本番環境向けのウェブアプリケーションを持つことができます。 重要な洞察 信頼できるバックエンドシステムを使用してcrudアプリを構築するプロセスをマスターします。 スケーラブルなバックエンドを設計し、それをstenciljsフロントエンドに接続する方法を理解します。 効率的なデータ操作のために、ノーコードの管理ツール（back4app管理アプリ）を使用する方法を学びます。 ウェブアプリケーションを迅速に立ち上げるためのデプロイメント戦略、特にdockerコンテナ化を発見します。 前提条件 始める前に、次のものを用意してください アクティブなプロジェクトを持つback4appアカウント。 サポートが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 stenciljsの開発環境。 公式の stenciljsドキュメント https //stenciljs com/docs/introduction を使用して環境を設定します。node js（v14以降）がインストールされていることを確認してください。 javascript、ウェブコンポーネント、rest apiの基本知識。 必要に応じて、 stenciljsの概念 https //stenciljs com/docs を復習してください。 ステップ1 – プロジェクトを開始する 新しいback4appプロジェクトを立ち上げる back4appアカウントにサインインします。 ダッシュボードから「新しいアプリ」オプションを選択します。 プロジェクトに名前を付けます： basic crud app stenciljs そして、画面の指示に従ってセットアップを完了します。 新しいプロジェクトを作成 セットアップが完了すると、プロジェクトはダッシュボードに表示され、バックエンド構成のための堅実な基盤を提供します。 ステップ2 – データベーススキーマの作成 データモデルの定義 このcrudアプリケーションでは、複数のコレクションを設定する必要があります。以下は、効率的なcrud操作のためにデータベースを構造化するのに役立つフィールドとデータ型を含むサンプルコレクションです。 1\ コレクション アイテム このコレクションは各アイテムの詳細を保持しています。 フィールド データ型 詳細 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 最後の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザープロフィールと認証を管理します。 フィールド データ型 詳細 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 ユーザーアカウントの最終更新タイムスタンプ。 back4appダッシュボードで新しいクラスを作成し、適切なデータ型の列を追加することで、これらのコレクションを手動で追加できます。 新しいクラスを作成 プロンプトに従ってデータタイプを選択し、フィールド名を指定し、デフォルト値を設定し、フィールドが必須かどうかをマークします。 列を作成 スキーマ作成のためのback4app aiエージェントの活用 back4app aiエージェントは、シンプルなプロンプトに基づいてデータベーススキーマの生成を自動化するダッシュボード内の革新的なツールです。この機能はプロジェクトのセットアップを迅速化し、スキーマがアプリケーションのニーズに合致することを保証します。 aiエージェントを活用する方法 aiエージェントにアクセス back4appダッシュボードを開き、メニューまたはプロジェクト設定の下にあるaiエージェントを見つけます。 スキーマ要件を入力 必要なコレクションとフィールドを詳しく説明するプロンプトを提供します。 レビューと確認 aiエージェントがプロンプトを処理したら、生成されたスキーマの提案をレビューし、それをプロジェクトに適用します。 サンプルプロンプト create these collections in my back4app project 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 – stenciljsをback4appにリンクする バックエンドが管理アプリを通じて構成されているので、次のステップはstenciljsフロントエンドをback4appに接続することです。 オプションa restまたはgraphql apiを使用する stenciljsでは、シンプルに保つためにapi統合に焦点を当てます。 例 restを介してデータを取得する // example rest api call to retrieve items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items retrieved ', data results); } catch (error) { console error('error retrieving items ', error); } }; fetchitems(); 必要に応じて、これらのapi呼び出しをstenciljsコンポーネントに統合してください。 オプションb parse sdkの利用（必要に応じて） parse sdkを使用することを好む場合でも、javascriptライブラリであるため、stenciljsプロジェクト内で統合できます。ただし、ここでの例はapi呼び出しに焦点を当てています。 ステップ5 – バックエンドの強化 アクセス制御リスト（acl）の実装 オブジェクトにaclを設定してデータのセキュリティを確保します。たとえば、プライベートアイテムを作成するには async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを設定して、認可されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証の管理 ユーザーアカウントの確立 back4appは、認証管理のためにparseのuserクラスを使用します。stenciljsプロジェクト内で、ユーザー登録とログインを次のように実装します // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } ログインとセッション管理にも同様の構造を適用できます。また、back4appダッシュボードから直接ソーシャルログイン、メール確認、パスワードリセットなどの機能を有効にすることもできます。 ステップ7 – webデプロイメントでのstenciljsフロントエンドの起動 back4appのwebデプロイメント機能を使用すると、githubリポジトリから直接コードをデプロイしてstenciljsアプリケーションをホストできます。 7 1 プロダクションバンドルの構築 ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的アセットを含む www フォルダーが生成されます。 ビルドを確認します www フォルダーに必要なcss、js、画像ファイルとともに index html が含まれていることを確認してください。 7 2 ソースコードの整理とアップロード あなたのリポジトリには、stenciljsアプリケーションのすべてのソースファイルが含まれている必要があります。例としての構造は次のようになります basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md 例のソースファイル src/parseconfig ts // src/parseconfig ts import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 例のソースファイル src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } コードをgithubにコミットする gitリポジトリを初期化する プロジェクトディレクトリ内で（まだ行っていない場合）： git init ファイルをステージする： git add 変更をコミットする： git commit m "stenciljsフロントエンドコードの初期コミット" 新しいgithubリポジトリを作成する： 名前を basic crud app stenciljs frontend のように付ける。 コードをgithubにプッシュする： git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 リポジトリをウェブデプロイメント経由で接続する ウェブデプロイメントにアクセスする： back4appダッシュボードにログインし、プロジェクト（ basic crud app stenciljs ）を選択し、 ウェブデプロイメント セクションをクリックします。 githubを統合する： 提供された指示に従ってgithubアカウントを接続します。これにより、back4appがリポジトリにアクセスできるようになります。 リポジトリとブランチを選択する： リポジトリ（例： basic crud app stenciljs frontend ）を選択し、適切なブランチ（例： main ）を選びます。 7 4 デプロイメントの設定 追加のデプロイメント詳細を入力してください ビルドコマンド リポジトリに事前にビルドされた www フォルダが含まれていない場合は、ビルドコマンドを指定してください（例 npm run build )。back4appはデプロイ中にこれを実行します。 出力ディレクトリ 出力ディレクトリを www に設定して、back4appが静的ファイルをどこに配置するかを知ることができるようにします。 環境変数 デプロイメント設定に必要な環境変数（例 apiキー）を追加してください。 7 5 dockerを使用したstenciljsプロジェクトのコンテナ化 デプロイメントにdockerを好む場合は、リポジトリに次のような dockerfile を含めてください \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] このファイルをリポジトリに含め、back4appでdockerデプロイメントを選択してください。 7 6 アプリケーションのデプロイ デプロイを開始 設定を構成した後、「 デプロイ 」ボタンをクリックします。 ビルドプロセスを監視 back4appはgithubからコードを取得し、ビルドコマンド（設定されている場合）を実行し、コンテナ化されたアプリケーションをデプロイします。 アプリケーションにアクセス デプロイが完了すると、back4appはあなたのstenciljsアプリがライブであるurlを提供します。 7 7 デプロイの検証 urlを訪問 提供されたurlをウェブブラウザで開きます。 機能をテスト アプリケーションが正しく読み込まれ、ルートが正しく機能し、すべてのアセット（css、js、画像）が問題なく提供されることを確認します。 必要に応じてデバッグ ブラウザの開発者ツールを使用してエラーを検査します。問題が発生した場合は、back4appのログを確認し、githubおよびビルド設定を検証します。 ステップ8 – 概要と今後の方向性 よくやりました！あなたはstenciljsとback4appを使用して完全なcrudアプリケーションを成功裏に構築しました。 「 basic crud app stenciljs 」というタイトルのプロジェクトを設定し、アイテムとユーザーのためのコレクションを設計し、admin appでデータを管理しました。 さらに、あなたはstenciljsのフロントエンドをバックエンドに接続し、堅牢なセキュリティ対策を実装しました。 次のステップ： フロントエンドを強化する： 詳細なアイテムビュー、検索機能、リアルタイム通知などの高度な機能を持つstenciljsアプリを拡張することを検討してください。 さらなる機能を追加する： 複雑なバックエンドロジック（例：cloud functions）、サードパーティapiの統合、または役割ベースの権限を実装してください。 知識を深める： back4appのドキュメント https //www back4app com/docs や他のチュートリアルを探求して、パフォーマンスチューニングやカスタム統合に関するさらなる洞察を得てください。 このチュートリアルに従うことで、あなたは堅牢なアプリケーションを作成するために必要なスキルを習得しました。