Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

概要 このガイドでは、polymerを使用して完全に機能するcrud（作成、読み取り、更新、削除）アプリケーションを開発する方法を学びます。 このウォークスルーでは、データを管理および変更するための基本的な操作を実行する方法を示します。最初に、アプリケーションのバックエンドとして機能する basic crud app polymer というタイトルのback4appプロジェクトを設定します。 次に、正確なコレクションとフィールドを手動またはback4app aiエージェントの支援を受けて概説することにより、スケーラブルなデータモデルを作成します。これにより、crud操作に最適化されたデータベースが確保されます。 次に、データ操作を簡素化するために、使いやすいドラッグアンドドロップ管理インターフェースであるback4app admin appを活用します。 最後に、rest/graphql apiを使用してpolymerフロントエンドをback4appと統合し、洗練されたアクセス制御でバックエンドのセキュリティを強化します。 このチュートリアルの終わりまでに、コアcrud操作をサポートし、ユーザー認証と堅牢なデータ管理機能を含む、商用利用可能なwebアプリケーションを構築することができます。 学ぶこと 信頼性の高いバックエンドでデータを効率的に管理するcrudアプリケーションを開発します。 スケーラブルなバックエンドを設計し、polymerベースのフロントエンドと接続します。 データ操作を容易にするために、ドラッグアンドドロップの管理インターフェース（back4app admin app）を利用します。 dockerを使用したコンテナ化を含む最新の技術を使用してアプリケーションをデプロイします。 前提条件 始める前に、次のことを確認してください アクティブなプロジェクトを持つback4appアカウント。 サポートが必要な場合は、 https //www back4app com/docs/get started/new parse app を確認してください。 polymer開発環境。 polymer cliまたは同様のツールを使用し、node js（v14以降）がインストールされていることを確認してください。 javascript、polymer、およびrest apiの基本的な理解。 詳細については、 https //www polymer library polymer project org/3 0/docs/devguide/feature overview を参照できます。 ステップ1 – プロジェクトの設定 新しいback4appプロジェクトの開始 back4appアカウントにアクセスします。 ダッシュボードから「新しいアプリ」オプションを選択します。 プロジェクト名を割り当てます： basic crud app polymer とプロジェクト作成を完了するための指示に従います。 新しいプロジェクトを作成 これらのステップを完了すると、プロジェクトはback4appダッシュボードに表示され、バックエンド構成の基盤を形成します。 ステップ2 – データベーススキーマの作成 データモデルの構造化 このcrudアプリには、いくつかのコレクションが必要です。以下は、フィールドとそれぞれのタイプを含む例のコレクションであり、crud操作を処理できる堅牢なデータベーススキーマを設計するのに役立ちます。 1 アイテムコレクション true left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type 2 ユーザーコレクション true left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type back4appのダッシュボードで新しいクラスを作成し、対応するカラムを追加することで、これらのコレクションを手動で作成できます。 新しいクラスを作成 データ型を選択し、フィールドに名前を付け、デフォルト値や必須パラメータを指定することで、新しいフィールドを簡単に追加できます。 カラムを作成 スキーマ作成のためのback4app aiエージェントの活用 ダッシュボードからアクセスできるback4app aiエージェントは、コレクションとフィールドの詳細を含むプロンプトに基づいてデータベーススキーマを自動生成します。この機能は大幅な時間の節約になり、バックエンドがcrud操作に正確に合わせられます。 aiエージェントの利用方法 aiエージェントを起動する back4appダッシュボードのプロジェクト設定またはメインメニューからアクセスします。 スキーマの詳細を入力する 必要なコレクションとフィールドをリストした説明的なプロンプトを提供します。 レビューと確認 aiエージェントがリクエストを処理した後、生成されたスキーマを確認し、プロジェクトに適用します。 例のプロンプト create the following 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) aiエージェントを使用することで、スキーマが一貫性があり、アプリケーションの要件に最適化されていることが保証されます。 ステップ3 – 管理アプリの有効化とcrud操作の実行 管理アプリの概要 back4app管理アプリは、バックエンド管理のためのノーコードインターフェースを提供します。その直感的なドラッグアンドドロップデザインにより、crud操作が簡素化され、レコードの作成、表示、更新、削除が容易に行えます。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理者アプリ」を選択 そしてクリックします 「管理者アプリを有効にする。」 管理者資格情報を設定 初期の管理者ユーザーを作成することで、役割（例えば b4aadminuser ) とシステムコレクションを確立します。 管理者アプリを有効にする アクティベーション後、管理者アプリにサインインしてバックエンドデータを管理します。 管理者アプリダッシュボード 管理者アプリを使用したデータ管理 管理者アプリ内で、あなたは レコードを追加 どのコレクション（例 アイテム）でも「レコードを追加」ボタンを使用して新しいエントリを作成します。 レコードを表示/修正 レコードをクリックしてその詳細を確認したり、フィールドを編集したりします。 レコードを削除 不要なデータを削除するために削除機能を利用します。 このインターフェースは、すべてのcrud機能を簡素化することで、使いやすさを大幅に向上させます。 ステップ4 – polymerをback4appに接続する 管理者アプリを介してバックエンドが設定されたので、polymerフロントエンドをback4appにリンクする時が来ました。 オプションa rest/graphql apiを利用する crud操作を実行するためにrestまたはgraphql apiを使用します。例えば、restを使用してアイテムを取得するには // example rest call 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 fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 必要に応じて、polymer要素に類似のapi呼び出しを統合します。 ステップ5 – バックエンドセキュリティの強化 アクセス制御リスト（acl）の実装 aclをオブジェクトに適用してデータを保護します。たとえば、制限されたアイテムを作成するには async function createrestricteditem(data, owner) { const itemdata = { title data title, description data description }; // configure acl to permit only the owner access const acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ itemdata, acl acl }) }); const result = await response json(); console log('restricted item created ', result); } catch (error) { console error('error creating item ', error); } } クラスレベルの権限 (clp) の設定 back4app ダッシュボード内で、各コレクションの clp を設定してデフォルトのアクセスルールを定義します。この設定により、認可されたユーザーのみが機密データにアクセスできるようになります。 ステップ 6 – polymer におけるユーザー認証 ユーザーアカウントの確立 back4app は parse のユーザークラスを使用して認証を管理します。あなたの polymer プロジェクトでは、以下のようにユーザーのサインアップとログインを実装します // example function for user registration using rest api async function signupuser(username, password, email) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('user registered successfully!'); console log(result); } catch (error) { alert('registration error ' + error message); } } ログインとセッション管理に対しても同様のアプローチを採用でき、back4appダッシュボードを通じてメール確認やパスワードリセットなどの追加機能を設定できます。 ステップ7 – webデプロイメントによるポリマーフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリをリンクすることでポリマーアプリケーションをシームレスにホストできます。アプリをデプロイするための手順は以下の通りです。 7 1 プロダクションバージョンのビルド ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します polymer build このコマンドは、すべての最適化された静的ファイルを含む build フォルダーを生成します。 ビルドを確認します build フォルダーに index html ファイルと必要なアセットディレクトリが含まれていることを確認します。 7 2 ソースコードの整理とアップロード あなたのリポジトリには、polymerフロントエンドの完全なソースコードが含まれている必要があります。サンプルのディレクトリ構造は次のようになります basic crud app polymer frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── my app js │ ├── api config js │ └── components/ │ ├── items list js │ └── auth form js ├── polymer json └── readme md 例 src/api config js // src/api config js export const app id = 'your application id'; export const rest api key = 'your rest api key'; export const api url = 'https //parseapi back4app com'; 例 src/my app js import { polymerelement, html } from '@polymer/polymer/polymer element js'; class myapp extends polymerelement { static get template() { return html` \<style> / your css styles here / \</style> \<h1>item manager\</h1> \<items list>\</items list> \<auth form>\</auth form> `; } } customelements define('my app', myapp); コードをgithubにコミットする gitリポジトリを初期化する （まだ行っていない場合） ファイルをステージする： git add 変更をコミットする： git commit m "polymerフロントエンドの初期コミット" githubリポジトリを作成する： 名前を basic crud app polymer frontend にする。 コードをgithubにプッシュする： git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 次の詳細を指定してください ビルドコマンド もし build フォルダーが事前にビルドされていない場合、コマンドを設定してください（例 polymer build )。back4appはデプロイ中にこれを実行します。 出力ディレクトリ back4appがあなたの静的サイトファイルを識別できるように build に設定してください。 環境変数 デプロイメント設定に必要な変数（apiキーなど）を含めてください。 7 5 dockerを使用したpolymerアプリケーションのコンテナ化 dockerがデプロイメントの選択肢である場合、次のようにリポジトリに dockerfile を含めてください # use an official node image for building from node 16 alpine as builder \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy the project files copy \# build the polymer app run polymer build \# use nginx to serve the built files from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] このdockerfileをプロジェクトに統合し、back4appでデプロイメントオプションとしてdockerを選択してください。 7 6 アプリケーションのデプロイ デプロイボタンをクリック 設定が確認されたら、「 デプロイ 」を押します。 ビルドプロセスを確認 back4appがコードを取得し、ビルドコマンドを実行し、コンテナ化されたアプリをデプロイします。 urlを取得 デプロイ後、polymerアプリケーションにアクセスできるurlが送信されます。 7 7 デプロイのテスト urlを訪問 提供されたリンクをブラウザで開きます。 機能を確認 すべてのルートが正しく読み込まれ、css、javascript、画像などのアセットが期待通りに表示されることを確認します。 トラブルシューティング 問題が発生した場合は、デプロイメントログとback4appのgithub統合設定を確認してください。 ステップ8 – まとめと今後の方向性 素晴らしい仕事です！あなたはpolymerとback4appを使用して完全なcrudアプリケーションを成功裏に構築しました。 あなたのプロジェクト、 basic crud app polymer は、アイテムとユーザーのための明確に定義されたコレクションを備え、admin appを通じてシームレスに管理され、セキュアで統合されたpolymerフロントエンドを持っています。 次のステップ： フロントエンドの強化： 詳細なアイテムビュー、検索機能、またはリアルタイム更新などの機能を追加します。 機能の拡張： cloud functionsやサードパーティapiを使用して追加のバックエンドロジックを統合します。 さらに探求： より高度な設定やパフォーマンスの最適化については、 https //www back4app com/docs をチェックしてください。 これらのスキルを持って、スケーラブルなcrudバックエンドを構築し、polymerとback4appを使用して堅牢なwebアプリケーションを展開する準備が整いました。楽しいコーディングを！