Quickstarters
CRUD Samples
How to Develop a CRUD App with TypeScript?
33 分
概要 このウォークスルーでは、typescriptを使用してcrud(作成、読み取り、更新、削除)アプリケーションを構築する方法を学びます。 データ管理を簡単にするために、バックエンドプラットフォームとしてback4appを利用します。このガイドでは、back4appプロジェクトの設定、データのモデル化、およびtypescriptアプリケーションへのcrud機能の統合について説明します。 最初に、柔軟なnosqlストレージソリューションを提供する basic crud app typescript という名前のプロジェクトをback4appで作成します。 back4appのaiエージェントの助けを借りて、手動または自動でクラスとフィールドを定義することで、データ構造を設計します。 次に、使いやすいインターフェースを介してデータ操作を簡素化するために、バックエンド管理のためにback4app admin appを使用します。 最後に、parse javascript sdkを使用してtypescriptアプリケーションをback4appに接続し、安全なアクセスと認証を確保します。 このチュートリアルの終わりまでに、ユーザー認証やデータ管理を含む基本的なcrudタスクを処理できる完全に機能するtypescriptアプリケーションを持つことができます。 学べること nosqlバックエンドを使用したtypescriptベースのcrudアプリケーションの構築方法。 typescriptフロントエンドと統合されたスケーラブルなバックエンドを設計するための方法。 back4appのadmin appを活用して、データを簡単に管理する方法。 dockerコンテナ化を含むデプロイメント戦略、typescriptアプリをスムーズに起動するための方法。 前提条件 始める前に、次のものを用意してください 設定されたプロジェクトを持つback4appアカウント。 助けが必要ですか? back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 typescript開発環境。 visual studio codeのようなエディタを使用し、node jsがインストールされていることを確認してください。 typescript、オブジェクト指向プログラミング、restful apiの基本的な知識。 必要に応じて、 typescriptのドキュメント https //www typescriptlang org/docs/ を参照してください。 ステップ 1 – プロジェクトの初期化 新しい back4app プロジェクトの設定 back4app アカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンをクリックします。 プロジェクト名を入力します: basic crud app typescript そして、プロジェクト作成を完了するための手順に従います。 新しいプロジェクトを作成 プロジェクトが確立されると、ダッシュボードに表示され、バックエンドの基盤となります。 ステップ 2 – データスキーマの作成 データ構造の定義 このアプリケーションでは、back4appにいくつかのコレクション(クラス)を作成します。以下は、crud操作を容易にするフィールドを持つ基本的なクラスの例です。 1\ アイテムコレクション フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザーコレクション フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニークな名前。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 ログイン用の安全にハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 これらのコレクションとフィールドをback4appダッシュボードで手動で作成できます。 新しいクラスを作成 フィールドを追加する際は、データ型を選択し、フィールドに名前を付け、必要に応じてデフォルト値を設定し、必須かどうかを示します。 カラムを作成 back4app aiエージェントを使用したスキーマ設定 back4appの統合aiエージェントは、説明からデータスキーマを自動的に生成できます。これにより、セットアップが簡素化され、crud操作のためにモデルが準備されます。 aiエージェントの使用方法 aiエージェントを開く back4appダッシュボードにログインし、プロジェクト設定でaiエージェントを見つけます。 スキーマを説明する 必要なコレクションとフィールドの詳細な説明を提供します。 レビューと確認 aiエージェントがスキーマを提案します。それをレビューし、変更を適用するために確認します。 例のプロンプト create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection 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 – typescript アプリを back4app に接続する バックエンドが準備できたら、次のステップは typescript アプリケーションを back4app にリンクすることです。 オプション a parse javascript sdk を使用する parse javascript sdk をインストールする npm を使用して、次のコマンドを実行します npm install parse typescript アプリケーションで parse を初期化する 設定ファイル(例: parseconfig ts ) を作成します // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } オプションb restまたはgraphqlの利用 parse sdkを使用したくない場合は、restを介してcrud操作を実行できます。例えば、restを使用してアイテムを取得するには import fetch from 'node fetch'; export async function getitemsviarest() { try { const response = await fetch('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' } }); const data = await response json(); console log('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } 必要に応じて、これらのapi呼び出しをtypescriptモジュール内に統合してください。 ステップ 5 – バックエンドのセキュリティを確保する アクセス制御リスト (acl) の設定 オブジェクトにaclを適用してデータを保護します。たとえば、所有者のみがアクセスできるアイテムを作成するには import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } クラスレベルの権限 (clp) の管理 back4appダッシュボードを介してclpを調整し、認証されたユーザーのみが特定のコレクションと対話できるようにアクセス制限を強制します。 ステップ 6 – ユーザー認証の実装 ユーザーアカウントの管理 back4appは、認証を処理するためにparseの組み込みユーザークラスを活用します。typescriptアプリケーションで、ユーザー登録とログインを次のように実装します import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } このアプローチは、セッション管理、パスワードリセット、その他の認証機能に拡張できます。 ステップ 7 – typescript アプリケーションのデプロイ back4app はデプロイプロセスを簡素化します。docker コンテナ化などの方法を使用して、typescript アプリケーションをデプロイできます。 7 1 typescript アプリのビルド コンパイルとバンドル ビルドツール(webpack や tsc など)を使用して、アプリケーションをコンパイルおよびバンドルします。 たとえば、tsc でコンパイルするには tsc 出力を確認 生成されたファイルに必要なすべてのアセットとモジュールが含まれていることを確認します。 7 2 プロジェクト構造の整理 典型的な typescript プロジェクトは次のようになります basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md 例 parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 typescript アプリケーションの docker 化 コンテナ化を選択した場合は、 dockerfile をプロジェクトのルートに追加します \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 back4app ウェブデプロイメントによるデプロイ github リポジトリをリンクする typescript プロジェクトが github にホストされていることを確認します。 デプロイ設定を行う back4app ダッシュボードで、 web deployment オプションを使用してリポジトリ(例 basic crud app typescript )を接続し、適切なブランチを選択します。 ビルドおよび出力コマンドを定義する ビルドコマンド(例えば、 npm run build )を指定し、出力ディレクトリを示します。 アプリケーションをデプロイする 「デプロイ」をクリックし、アプリケーションがライブになるまでログを追跡します。 ステップ 8 – 最終的な考えと今後の改善 おめでとうございます!あなたはback4appと統合されたtypescriptベースのcrudアプリケーションを成功裏に作成しました。 「 basic crud app typescript 」という名前のプロジェクトを設定し、アイテムとユーザーのためのコレクションを設計し、back4app管理アプリを使用してデータを管理しました。 さらに、parse javascript sdk(またはrest/graphql)を介してtypescriptアプリを接続し、堅牢なセキュリティ対策を実装しました。 次は何ですか? アプリケーションを拡張する: 高度なフィルタリング、詳細なアイテムビュー、またはリアルタイムデータ更新などの追加機能を統合します。 バックエンド機能を強化する: クラウド機能を探求し、サードパーティapiを統合するか、役割ベースの権限を実装します。 さらなる学習: 「 back4appのドキュメント https //www back4app com/docs を訪れて、アプリケーションを最適化するための追加ガイドをチェックしてください。 コーディングを楽しんで、typescript crudアプリケーションの構築を楽しんでください!