How to Create a CRUD App with jQuery?

はじめに このガイドでは、jqueryを使用して完全なcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を説明します。 データ管理を簡素化するために、バックエンドサービスとしてback4appを使用します。このチュートリアルでは、back4appプロジェクトの設定方法、柔軟なスキーマの設計方法、rest api呼び出しを通じてjqueryでcrud機能を実装する方法を探ります。 まず、 basic crud app jquery というタイトルのback4appプロジェクトを設定します。このプロジェクトは、スケーラブルな非関係データストレージソリューションを提供します。データモデルは、back4app内でクラスとフィールドを手動で作成するか、back4appのaiエージェントの助けを借りて定義します。 その後、使いやすいドラッグアンドドロップインターフェースであるback4app admin appを使用してデータを管理する方法を学びます。 最後に、jqueryを使用したフロントエンドをrest api呼び出しを介してback4appに接続し、安全なアクセスが維持されることを確認します。 このチュートリアルの終わりまでに、基本的なcrud操作と安全なユーザー認証およびデータ管理を実行できる、製品準備が整ったjqueryアプリケーションを持つことになります。 重要なポイント 堅牢なローコードバックエンドを使用して、jqueryベースのcrudアプリケーションを構築します。 スケーラブルなバックエンドを設計し、それをjqueryフロントエンドと統合する方法を理解します。 効率的なデータ操作のために、直感的なback4app管理アプリを使用する方法を学びます。 アプリケーションをスムーズに起動するためのコンテナ化を含むデプロイメント戦略を発見します。 前提条件 始める前に、次のことを確認してください back4appアカウントと新しいプロジェクトの設定。 ガイダンスが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 動作するウェブ開発環境。 vscode、sublime textなどのコードエディタを使用し、テスト用の最新のブラウザを用意してください。 jquery、javascript、およびrest apiの基本的な知識。 リフレッシャーとして、次の jqueryドキュメント https //api jquery com/ を確認してください。 ステップ1 – プロジェクト設定 新しいback4appプロジェクトの作成 back4appアカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンをクリックします。 プロジェクトに名前を付けます： basic crud app jquery そして、画面の指示に従って設定を完了します。 新しいプロジェクトを作成 作成後、プロジェクトはダッシュボードに表示され、バックエンド構成の基盤を築きます。 ステップ2 – データモデルの設計 データ構造の定義 このcrudアプリケーションでは、back4appにいくつかのクラス（コレクション）を作成します。以下は、crud操作に必要な主要なクラスとそのフィールドです。 1\ アイテムクラス このクラスは各アイテムに関する情報を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが追加された時刻。 更新日時 日付 最後の変更のタイムスタンプ。 2\ ユーザークラス このクラスはユーザーの資格情報と認証の詳細を処理します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのメールアドレス。 パスワードハッシュ 文字列 安全なログインのための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 back4appダッシュボードを介して、これらのクラスとフィールドを手動で追加できます。 新しいクラスを作成 フィールドを追加するには、データタイプを選択し、フィールド名を入力し、必要に応じてデフォルト値を設定し、必要に応じて必須としてマークします。 カラムを作成 back4app aiエージェントを利用したスキーマ生成 統合されたback4app aiエージェントは、簡単な説明に基づいてスキーマを自動的に生成できます。これにより、プロジェクトの初期化が簡素化され、モデルがcrud操作をサポートすることが保証されます。 aiエージェントの使い方 aiエージェントを開く back4appダッシュボードにサインインし、プロジェクト設定の下にあるaiエージェントセクションに移動します。 スキーマを説明する 必要なクラスとフィールドに関する詳細情報を提供します。 レビューと確認 aiエージェントが入力を処理すると、スキーマを提案します。それをレビューし、承認して設定を確定します。 例のプロンプト create these classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) このai支援プロセスは、時間を節約するだけでなく、一貫性のある最適化されたデータスキーマを確保します。 ステップ3 – 管理アプリの有効化とcrud操作の処理 管理アプリの使い始め back4app管理アプリは、効率的なバックエンドデータ管理のためのノーコードソリューションを提供します。直感的なドラッグアンドドロップインターフェースにより、レコードの追加、表示、編集、削除などのcrud操作を簡素化します。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 をクリックし、 「管理アプリを有効にする」。 管理者資格情報を設定 初期の管理者アカウントを作成することで、役割（例えば、 b4aadminuser )やシステムクラスも確立されます。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてアプリケーションデータを管理します。 管理アプリダッシュボード crud操作のための管理アプリの使用 管理アプリ内で、あなたは レコードの挿入 クラス内で「レコードを追加」をクリックして新しいデータを追加します。 レコードの表示と編集 レコードを選択してその詳細を確認したり、フィールドを修正します。 レコードの削除 もはや必要のないエントリを削除します。 この簡素化されたツールはデータ管理を簡単にし、フロントエンドロジックに集中できるようにします。 ステップ4 – jqueryアプリケーションをback4appにリンクする バックエンドの設定が完了したので、jqueryベースのアプリケーションをback4appに接続する時が来ました。 jqueryを使ったajax呼び出し parse sdkを使用する代わりに、jqueryのajaxメソッドを使用して直接rest api呼び出しを行います。以下はcrud操作を実行する方法の例です。 アイテムの取得 $ ajax({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { console log('items retrieved ', response results); }, error function(error) { console error('error fetching items ', error); } }); アイテムの作成 $ ajax({ url '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' }, data json stringify({ title 'new item', description 'a brief description of the new item ' }), success function(response) { console log('item created ', response); }, error function(error) { console error('error creating item ', error); } }); アイテムの更新 $ ajax({ url 'https //parseapi back4app com/classes/items/your item id', method 'put', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ title 'updated title', description 'updated description ' }), success function(response) { console log('item updated ', response); }, error function(error) { console error('error updating item ', error); } }); アイテムの削除 $ ajax({ url 'https //parseapi back4app com/classes/items/your item id', method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { console log('item deleted ', response); }, error function(error) { console error('error deleting item ', error); } }); これらのajax呼び出しを必要に応じてjqueryスクリプトに統合し、アプリケーション内でcrud操作を管理します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト (acl) の設定 オブジェクトのためにaclを設定してデータを保護します。たとえば、所有者のみが読み書きできるアイテムを作成するには var acl = { " " { "read" false, "write" false }, "owner user id" { "read" true, "write" true } }; $ ajax({ url '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' }, data json stringify({ title 'private item', description 'this item is only accessible by its owner ', acl acl }), success function(response) { console log('private item created ', response); }, error function(error) { console error('error creating private item ', error); } }); クラスレベルの権限設定 (clp) back4appダッシュボードを使用してclpを設定し、認証されたユーザーのみが機密クラスにアクセスできるようにします。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの管理 back4appは、認証を処理するために組み込みのユーザークラスを使用します。jqueryアプリでは、rest api呼び出しを使用してユーザーのサインアップとログインを管理できます。 新しいユーザーの登録 $ ajax({ url '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' }, data json stringify({ username 'newuser', password 'securepassword', email 'newuser\@example com' }), success function(response) { console log('user registered ', response); }, error function(error) { console error('registration error ', error); } }); ユーザーのログイン $ ajax({ url 'https //parseapi back4app com/login', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, data { username 'newuser', password 'securepassword' }, success function(response) { console log('user logged in ', response); }, error function(error) { console error('login error ', error); } }); これらの方法を拡張して、セッション管理、パスワードリセット、その他の認証機能を管理できます。 ステップ 7 – jquery アプリケーションのデプロイ back4app は簡単なデプロイプロセスを提供します。静的サイトホスティングやコンテナ化など、さまざまなアプローチを使用して jquery アプリケーションをデプロイできます。 7 1 アプリケーションの準備 ビルドとミニファイ webpack や gulp などのツールを使用して、jquery スクリプトをバンドルおよびミニファイします。 アセットの確認 すべての html、css、および javascript ファイルが正しくコンパイルされていることを確認します。 7 2 プロジェクト構造の整理 典型的なプロジェクトレイアウトは次のようになります basic crud app jquery/ \| index html \| css/ \| | styles css \| js/ \| | app js \| | jquery min js \| assets/ \| | images/ \| | logo png \| readme md 例 ajax crud in app js $(document) ready(function() { // fetch and display items function loaditems() { $ ajax({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { $('#itemscontainer') empty(); $ each(response results, function(index, item) { $('#itemscontainer') append('\<div>' + '\<h3>' + item title + '\</h3>' + '\<p>' + item description + '\</p>' + '\</div>'); }); }, error function(error) { console error('error loading items ', error); } }); } // call the function on page load loaditems(); }); 7 3 アプリケーションのデプロイ 静的ホスティング プロジェクトファイルをgithub pages、netlify、またはvercelなどの静的ホスティングプロバイダーにアップロードします。 アプリケーションのdocker化 コンテナ化を好む場合は、プロジェクトのルートに dockerfile を含めます \# use an official node image to serve static files from node 14 alpine \# set the working directory workdir /app \# copy your project files into the container copy \# install a simple static server run npm install g serve \# expose the port used by the static server expose 3000 \# command to run the server cmd \["serve", " s", " "] docker環境を設定した後、back4appダッシュボードの web deployment セクションでgithubリポジトリをリンクし、必要に応じてビルドコマンドを設定し、アプリケーションをデプロイします。 ステップ8 – 結論と次のステップ おめでとうございます！back4appと統合されたjqueryベースのcrudアプリケーションを成功裏に構築しました。 このチュートリアルでは、 basic crud app jquery というプロジェクトを設定し、アイテムとユーザーのデータスキーマを定義し、back4app管理アプリを通じてデータを管理しました。 さらに、jqueryフロントエンドをrest api呼び出しを介して接続し、基本的なセキュリティ対策を実装しました。 次のステップ アプリケーションを拡張する 高度なフィルタリング、詳細ビュー、またはライブ更新などの機能を追加します。 バックエンド機能を強化する クラウド関数を探求したり、サードパーティapiを統合したり、役割ベースのアクセスを実装します。 スキルをさらに向上させる back4appのドキュメント https //www back4app com/docs に飛び込んで、より高度な機能のための追加チュートリアルを探求します。 コーディングを楽しんで、jquery crudアプリケーションの成功を祈っています！