Building a Basic CRUD Application with Lit?

概要 このガイドでは、litを使用して完全に機能するcrud（作成、読み取り、更新、削除）アプリケーションを作成します。 データを動的に管理する方法を示すために、これらの基本的な操作を実行するアプリケーションを構築します。最初に、 basic crud app lit というback4appプロジェクトを設定し、堅牢なバックエンドとして機能させます。 プロジェクトを確立した後、コレクションとフィールドを手動で定義するか、back4app aiエージェントの助けを借りて、柔軟なデータベーススキーマを設計します。このステップは、システムがcrud操作を信頼性高く処理できるようにするために重要です。 次に、back4app admin appを利用して、コレクションを効率的に管理します。これは、使いやすいドラッグアンドドロップインターフェースです。 最後に、rest/graphqlを使用してlitフロントエンドをback4appと統合し、適切なアクセス制御を行ってバックエンドのセキュリティを確保します。 このチュートリアルの終わりまでに、基本的なcrud機能を実行するだけでなく、ユーザー認証と安全なデータ処理を含む、商用利用可能なwebアプリケーションを持つことになります。 重要なポイント 信頼できるバックエンドでデータを効果的に管理するcrudアプリケーションの開発をマスターする。 スケーラブルなデータベースを設計し、litベースのフロントエンドとシームレスに統合する方法を学ぶ。 crud操作を簡素化するために、ドラッグアンドドロップの管理ツール（back4app管理アプリ）を利用する。 dockerを使用したコンテナ化を含むデプロイメント戦略を理解し、ウェブアプリケーションを効率的に立ち上げる。 前提条件 始める前に、次のことを確認してください 新しいプロジェクトを持つback4appアカウント。 サポートが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app をご覧ください。 lit開発環境。 好みのスターターキットを使用してプロジェクトを設定し、node js（v14以降）がインストールされていることを確認してください。 javascript、lit、およびrest apiの基本的な知識。 必要に応じて、 litのドキュメント https //lit dev/docs/ を参照してください。 ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの設立 back4appアカウントにサインインします。 ダッシュボードから「新しいアプリ」オプションを選択します。 プロジェクトに名前を付けます： basic crud app lit と入力し、指示に従って作成します。 新しいプロジェクトを作成 プロジェクトが作成されると、ダッシュボードに表示され、バックエンドの設定とプロジェクト管理の基盤を提供します。 ステップ2 – データベーススキーマの作成 データモデルの構築 このcrudアプリケーションでは、いくつかのコレクションを定義します。以下は、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 primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) このai機能を使用することで、貴重な時間を節約し、データベースが最適に構造化されることを保証します。 ステップ3 – 管理アプリとcrud機能の有効化 管理アプリの紹介 back4app管理アプリは、手間のかからないバックエンドデータ管理のためのノーコードインターフェースを提供します。直感的なドラッグアンドドロップ機能により、crud操作（作成、読み取り、更新、削除）を簡単に実行できます。 管理アプリを有効にする方法 back4appダッシュボードの「もっと見る」セクションにアクセスします。 「管理アプリ」を選択し、 「管理アプリを有効にする」をクリックします。 初期管理ユーザーを作成して管理資格情報を設定します。これにより、役割（例えば、 b4aadminuser ）やシステムコレクションが構成されます。 管理者アプリを有効にする アクティベーション後、管理者アプリにログインしてコレクションを管理します。 管理者アプリのダッシュボード 管理者アプリを通じてcrud操作を実行する 管理者アプリ内で、あなたは エントリを作成する コレクション内の「レコードを追加」ボタンをクリックして、新しいエントリを生成します。 レコードを読み取り/修正する レコードをクリックして、その詳細を確認したり、フィールドを修正したりします。 レコードを削除する 削除機能を使用して、もはや必要のないエントリを排除します。 このシンプルなインターフェースは、データ管理を効率化することでユーザーエクスペリエンスを大幅に向上させます。 ステップ 4 – lit を back4app に接続する バックエンドが設定され、管理されているので、lit フロントエンドを back4app と統合する時が来ました。 オプション a parse sdk を使用する（該当する場合） parse sdk をインストールする npm install parse lit アプリで parse を設定する 設定ファイルを作成します（例 src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // ここに back4app の資格情報を挿入します parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; lit コンポーネントで parse を実装する アイテムを取得して表示する lit コンポーネントを作成します // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { 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); } } render() { return html` \<h2>アイテム\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; オプション b rest または graphql を利用する parse sdk がプロジェクトに適していない場合は、rest または graphql を使用して crud 操作を実行します。たとえば、rest を介してアイテムを取得するには // example rest request to get 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 fetching items ', error); } }; fetchitems(); 必要に応じて、これらのapi呼び出しをlitコンポーネント内に統合してください。 ステップ5 – バックエンドの保護 アクセス制御リスト（acl）の実装 aclを設定することでオブジェクトを保護します。たとえば、プライベートアイテムを作成するには async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } クラスレベルの権限（clp）の設定 back4appのダッシュボード内で、各コレクションのclpを調整してデフォルトのアクセスルールを適用します。これにより、認証されたユーザーまたは権限のあるユーザーのみが機密情報にアクセスできるようになります。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの作成 back4appはparseのuserクラスを利用して認証を管理します。あなたのlitアプリケーションで、以下のようにユーザー登録とログインを実装してください // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e 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 registration successful!'); } catch (error) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; 同様に、ログインとセッション管理を実装できます。ソーシャル認証、メール確認、パスワードリセットなどの追加機能は、back4appのダッシュボードを通じて設定できます。 ステップ 7 – web デプロイメントを介して lit フロントエンドをデプロイする back4app の web デプロイメント機能を使用すると、github リポジトリからコードをデプロイすることで lit アプリケーションをホストできます。これらの手順に従って、プロダクションビルドを準備し、コードを github にプッシュし、サイトをデプロイします。 7 1 プロダクションビルドの作成 ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的アセットを含む build フォルダーが作成されます。 ビルドを確認します build フォルダーに必要なサブディレクトリとともに index html ファイルが含まれていることを確認します。 7 2 コードの整理とアップロード あなたの github リポジトリには、lit フロントエンドの完全なソースコードが格納されている必要があります。典型的なプロジェクト構造は次のようになります basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 例の設定ファイル src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 例のメインアプリケーションファイル src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); 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("failed to load 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); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; githubにコードをプッシュする プロジェクトディレクトリでgitを初期化します： git init すべてのファイルを追加します： git add 変更をコミットします： git commit m "初期litフロントエンドコミット" githubに新しいリポジトリを作成します （例： basic crud app lit frontend ）です。 コードをプッシュします： git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 back4appウェブデプロイメントとgithubリポジトリの接続 ウェブデプロイメントにアクセス： back4appダッシュボードにログインし、プロジェクト（basic crud app lit）を選択し、 ウェブデプロイメント オプションを選択します。 githubアカウントをリンク： プロンプトに従ってgithubアカウントを接続し、back4appがリポジトリにアクセスできるようにします。 リポジトリとブランチを選択： リポジトリ（例： basic crud app lit frontend ）とブランチ（例： main ）を選択します。 7 4 デプロイメント設定の構成 ビルド設定を指定してください ビルドコマンド プリビルドの build フォルダーがない場合は、次のようなコマンドを使用します npm run build back4appはデプロイ中にこのコマンドを実行します。 出力ディレクトリ これを build に設定して、back4appが静的ファイルを見つけられるようにします。 環境変数 必要なapiキーやその他の環境固有の値を含めてください。 7 5 dockerを使用してlitアプリケーションをコンテナ化する dockerを好む場合は、リポジトリに dockerfile を含めてください \# use a lightweight node image for building the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining source code and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] back4appのデプロイ設定で、アプリをコンテナ化するためにdockerデプロイオプションを選択してください。 7 6 アプリケーションの起動 デプロイを開始する 設定を最終決定した後、「 デプロイ 」ボタンをクリックします。 プロセスを監視する back4appがあなたのgithubコードを取得し、ビルドコマンドを実行し、コンテナをデプロイします。 ライブurlを取得する デプロイが完了すると、あなたのlitアプリケーションがホストされているurlが提供されます。 7 7 デプロイの検証 urlを訪問する 提供されたリンクをブラウザで開きます。 機能をテストする アプリケーションが正しく読み込まれ、ナビゲーションが機能し、すべてのアセットが正しく提供されていることを確認します。 必要に応じてデバッグする ブラウザの開発者ツールを使用して問題を検査します。問題が発生した場合は、back4appのデプロイログを確認してください。 ステップ8 – 最終的な考えと今後の改善点 素晴らしい仕事です！あなたはlitとback4appを使用して基本的なcrudアプリケーションを成功裏に開発しました。 あなたは「 basic crud app lit 」というプロジェクトを設定し、アイテムとユーザーのための詳細なデータベーススキーマを定義し、admin appでデータを管理しました。 さらに、あなたはlitのフロントエンドをバックエンドと統合し、堅牢なセキュリティ対策を実装しました。 次のステップ： フロントエンドを改善する： 詳細なアイテムページ、検索機能、リアルタイム更新などの機能を追加します。 バックエンドの機能を拡張する： cloud functions、外部apiサービス、または役割ベースのアクセス制御などの高度な機能を統合します。 さらなるリソースを探る： 「 back4appのドキュメント https //www back4app com/docs 」や他のチュートリアルを訪れて、パフォーマンスやカスタマイズに関する深い洞察を得てください。 このガイドに従うことで、あなたはback4appを使用してlitアプリケーションのためのスケーラブルで安全なcrudバックエンドを作成するスキルを持っています。コーディングを楽しんで、革新を続けてください！