PostgreSQLデータベースを使ってWebアプリケーションを構築し、デプロイするには？

この記事では、AI技術を使用してPostgresデータベースを持つWebアプリケーションを構築し、デプロイする方法を学びます。

開発ワークフローにAIを加えることは、生産性向上に有益です。繰り返し作業を自動化し、コード生成などのAI機能を利用することで、開発時間を短縮し、コストを削減することができる。

ウェブ開発におけるAI活用のメリット

ウェブ開発にAIを組み込むメリットには、以下のようなものがある。

反復作業の自動化

開発ワークフローにAIを導入することで、ダミーデータや定型コードの生成などの反復作業を自動化することができる。

また、ユニットテストや統合テストを生成するためのテストにも役立つ。

しかし、AIは多くのタスクを自動化することができるが、完全なソリューションではなく、依然として人間の監視が必要であることに注意する必要がある。

AIツールの出力が正確であることを常に確認し、検証する。

コード生成

AIツールは、コード・スニペット、あるいは関数全体の記述を支援することができる。この自動化によってコーディング・プロセスがスピードアップし、より高度な設計や問題解決に集中できるようになる。

しかし、AIが生成したコードは誤解を招き、ソフトウェア開発ライフサイクルのさらに下流で見つけにくいバグにつながる可能性があるため、コードを本番環境に投入する前に吟味する必要がある。

コード最適化の改善

AIツールは、より効率的で保守性の高いソリューションを生成するために書き直したりリファクタリングしたりできるコードの部分を提案することで、スピードのためにコードを最適化する手助けをしてくれる。

これには、複雑なロジックを単純化したり、冗長なコードを削除したり、言語機能をよりよく利用したりすることが含まれる。

AIツールは、より効率的なアルゴリズムやデータ構造を選択し、コードの全体的なパフォーマンスやデータに対する操作の効率を向上させるのにも役立つ。

バグの検出と修正

AIツールは、エラーを分析し、エラーに対する実行可能な解決策を提供することで、コードのデバッグを高速化するのに役立つ。

例えば、Back4appのコンテナを使用してアプリケーションをデプロイすると、Back4appのAIがDockerファイルのミスによって発生したエラーを分析し、エラーを解決してアプリケーションのデプロイを成功させるための提案を行います。

Back4app AI AgentとPostgreSQLを使ったバックエンドの構築

このチュートリアルでは、ライブラリAPIを構築します。以下のテーブルを持つ PostgreSQL データベースとやり取りします：Book、Author、BookCheckout およびLibraryMember です。

データベースの構造と設計

Bookテーブルには、タイトル、著者、出版年、総部数、利用可能部数など、書籍に関する最も多くの情報が含まれています。

AuthorテーブルはBookテーブルと一対多のリレーションを持ちます。つまり、一人の著者が多くの本を持つことはできますが、それぞれの本は一人の著者しか持つことができません。また、著者のフルネームなど、著者に関する詳細な情報が格納されています。

LibraryMemeberテーブルには、名前、Eメール、電話番号など、ライブラリーのメンバーに関する情報が含まれています。

BookCheckoutテーブルは、BookテーブルとLibraryMemeberテーブルの間に多対多のリレーションシップを確立するための接合テーブルとして機能する。

つまり、1人の会員が複数の本を借りたり、複数の会員が1冊の本を借りたりすることができます。これは、本とそれを借りたメンバー、checkout_date、due_date、return_dateを参照します。

これはデータベースのモデル図です。

Back4appでデータベースを作成する

back4app.comにアクセスし、ログイン（アカウントをお持ちでない場合は作成）して、画面右上の「New App」ボタンをクリックします。

下の画像のように、Backend as a Serviceオプションを選択する。

下の画像のように、アプリに名前を付け、PostgreSQLオプションを選択する。

Back4app AI Agentに移動し、以下のプロンプトを入力します：

"I need you to create database tables in my Back4app app; what do you need me to provide?"

このAIエージェントは、あなたのためにデータベース・テーブルを作成するために必要なもののリストを返します。これには、アプリケーションキーとスキーマ定義が含まれます。

前のセクションのデータベース設計に基づくと、スキーマ定義は以下のコードブロックのようになるはずです：

1. **Authors Class:**
    - Class Name: `Authors`
    - Fields:
        - `authorId` (Auto-generated, Primary Key)
        - `authorName` (String, Required)
2. **Books Class:**
    - Class Name: `Books`
    - Fields:
        - `bookId` (Auto-generated, Primary Key)
        - `title` (String, Required)
        - `author` (Pointer to the `Authors` class)
        - `publicationYear` (Number)
        - `availableCopies` (Number)
        - `totalCopies` (Number)
3. **LibraryMembers Class:**
    - Class Name: `LibraryMembers`
    - Fields:
        - `memberId` (Auto-generated, Primary Key)
        - `name` (String, Required)
        - `email` (String, Required)
        - `phoneNumber` (String)
4. **BookCheckouts Class:**
    - Class Name: `BookCheckouts`
    - Fields:
        - `checkoutId` (Auto-generated, Primary Key)
        - `book` (Pointer to the `Books` class)
        - `member` (Pointer to the `LibraryMembers` class)
        - `checkoutDate` (Date)
        - `dueDate` (Date)
        - `returnDate` (Date)

上記のコードブロックは、データ型とリレーションシップを正しく記述することで、AIがデータベースを正確に作成できるように、データベーススキーマを記述します。

AIエージェントに詳細を提供し、エージェントがデータベースの作成に成功したことを確認したら、アプリケーションのダッシュボードを確認してデータベースが作成されたことを確認できます。

次に、以下のプロンプトを使用して、AIエージェントにデータベースにテストデータを入力するように依頼します。

Populate my database with test data for the Authors, their books, 
and some library members who have checked out books from the library.

これで、データベース上に作業用のテストデータができました。

クラウド・コードの作成

テストデータができたので、図書館管理システムの機能を実装する必要があります。

このチュートリアルでは、アプリに以下の機能を持たせます。

• 図書館にある本を全部手に入れる。
• 図書館で特定の本を見る
• 特定の著者のすべての書籍を表示します。
• 図書館で本を借りる。
• 借りた本を図書館に返す。

この機能を実装するには、Back4appのクラウドコード関数を使用します。この関数を使用すると、HTTPリクエストによってトリガーされたイベントに応じて、アプリケーションがBack4app上でJavaScript関数を実行することができます。

Back4app AIエージェントを使用して、カスタムクラウドコード関数を作成し、開発プロセスを簡素化することができます。

Back4app AIエージェントに以下のプロンプトを与え、図書館にあるすべての本を取得するためのクラウド・コードを生成させる。

Create a cloud code function called `getAllBooks` 
that will return all the books in the database with their respective authors.

次に、Back4appのAIエージェントに以下のプロンプトを与え、IDの本をフェッチするためのクラウドコードを生成させる。

Create a cloud code function called `viewBook(bookId)`
that allows me to provide a book ID and return a book with the matching ID.

次に、Back4appのAIエージェントに以下のプロンプトを与え、特定の著者のすべての書籍を取得するためのクラウドコードを生成させる。

Create a cloud code function called `getByAuthor(authorName)` that allows me to provide an author name and return all the books by the author.

次に、Back4appのAIエージェントに以下のプロンプトを与え、図書館から本を借りるためのクラウド・コードを生成させる。

Create a cloud code function called `borrowBookFromLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID  and records a book checkout for the member with the due date and return date set to a month from the current date. 

The function should also check if the book is available (ie `availableCopies` != 0). The book should display a proper error message if it is unavailable.

最後に、Back4appのAIエージェントに以下のプロンプトを与え、図書館に本を返却するためのクラウド・コードを生成させる。

Create a cloud code function called `returnBookToLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID. 

The function should fetch the BookCheckout record  with the libraryMemberId and bookId provided and update  the return date of the BookCheckout record to the current date. 

The function should also increment the book's `availableCopies` by 1.

AIエージェントがクラウド関数を正しく作成したかどうかは、Back4appのダッシュボード → クラウドコード → 関数とウェブホスティング → cloud → main.jsで確認することができます。

これで、いくつかのプロンプトから機能的なバックエンドを作成できました。次に、バックエンドとやりとりするためのUIを作ります。

Back4app AIエージェントでフロントエンドを構築する

このセクションでは、Reactを使ってWebアプリケーションのUIを構築します。

まず、AIエージェントに以下のプロンプトを与え、アプリケーションのUIを作成するために必要なステップの概要を説明します。

Describe the steps required to build a React Frontend for my backend. I want the app to have the following routes
1. `/books` to display all the books in the library
2. `/books/:bookId` to view a specific book
3. `/books/authors/:authorName` to view all books by a specific author
4. `/books/:bookId/borrow` allows a member to borrow a book
5. `/books/:bookId/return-to-library` allows a member to return a book to the library
I also want the app to be created using vite

エージェントは、以下のステップとは異なるかもしれませんが、最終的には同じ結果につながるいくつかのステップを回答するはずです。AIによって説明されたステップのいずれかが十分に明確でない場合は、別のプロンプトで明確にするようAIに求めることができます。

ステップ 1: 新しい Vite プロジェクトの初期化と依存関係のインストール

ターミナルで以下のコマンドを実行し、Viteを使って新しいReactアプリをscaffoldします：

npm create vite@latest library-app -- --template react

プロジェクト・ディレクトリに移動し、以下のコマンドを実行して依存関係をインストールする：

cd library-app && npm install

以下のコマンドを実行し、ルーティング用のReact RouterとBack4appとやり取りするためのParse SDKをインストールします：

npm install react-router-dom parse

ステップ2：JavaScript Parse SDKの初期化

以下のコードブロックをmain.jsxファイルに追加し、アプリケーションでParseを初期化します。

import Parse from "parse";

const PARSE_APPLICATION_ID = "YOUR_APPLICATION_ID";
const PARSE_HOST_URL = "<https://parseapi.back4app.com/>";
const PARSE_JAVASCRIPT_KEY = "YOUR_JAVASCRIPT_KEY";

Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

YOUR_APPLICATION_ID “と “YOUR_JAVASCRIPT_KEY “は、Back4appのダッシュボード → アプリの設定 → セキュリティとキーで確認できます。

ステップ3：ルーティングの設定

App.jsxファイルのコードを以下のコードブロックに置き換える：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Books from './components/Books';
import BookDetails from './components/BookDetails';
import BooksByAuthor from './components/BooksByAuthor';
import BorrowBook from './components/BorrowBook';
import ReturnBook from './components/ReturnBook';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/books" element={<Books />} />
        <Route path="/books/:bookId" element={<BookDetails />} />
        <Route path="/books/authors/:authorName" element={<BooksByAuthor />} />
        <Route path="/books/:bookId/borrow" element={<BorrowBook />} />
        <Route path="/books/:bookId/return-to-library" element={<ReturnBook />} />
      </Routes>
    </Router>
  );
};

export default App;

ステップ4：コンポーネントの構築とスタイル

AIエージェントによれば、あなたのアプリは5つの要素で構成されている必要がある：

• 書籍部門
• BooksDetailsコンポーネント
• BooksByAuthorコンポーネント
• BorrowBookコンポーネント
• ReturnBookコンポーネント

まず、プロジェクト・ディレクトリに “components “フォルダを作成し、各コンポーネントのファイルを作成します。次に、”components “フォルダ内にCSSフォルダを作成し、各コンポーネントのCSSファイルを作成します。

componentsフォルダは下の画像のようになっているはずです：

次に、以下のプロンプトをAIに与えて、Booksコンポーネントを作成し、スタイルを設定します：

Create the component for the `books` route. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked. 

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header like "Books".

AIは、Books.cssファイルのスタイルシートとBooks.jsxの jsxコードスニペットで応答するはずです。

コードブロックをそれぞれのファイルに追加し、Books.cssを main.jsxファイルにインポートします。

こんな感じだ：

//main.jsx
import "./components/css/Books.css";

注: スタイルがカスタム・スタイルを上書きしないように、index.cssファイルを 無効にしてください。

AIに以下のプロンプトを与えて、BookDetailsコンポーネントを作成し、スタイルを設定します。

Create a component for the `books/:bookId` route. The component should have a button that takes you to the `books/:bookId/borrow` route to allow the user to borrow the book. 

The component should also have a button that takes you to the `books/:bookId/return-to-library` route that allows a user to return a book.  

The component should also include a link to the author names of the book that takes the user to the `/books/authors/:authorName` route, allowing them to view books from other authors. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).

AIは、BookDetails.cssファイルのスタイルシートとBookDetails.jsxの jsxコード・スニペットで応答するはずです。コードブロックをそれぞれのファイルに追加してください。

AIに以下のプロンプトを与えて、BooksByAuthorコンポーネントを作成させます：

Create a component for the `books/authors/:authorName` route. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).  

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked.

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header, such as `AuthorName's Books` for example "Jane Austen's Books".

生成されたコードを適切なファイルに追加する。

AIに以下のプロンプトを与え、BorrowBookコンポーネントを作成させます：

Create a component for the `/books/:bookId/borrow`. 

The component should display a form that allows users to enter their `libraryMemberId` and borrow the book. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

For the styling, the elements should be properly spaced and have a proper header like "Borrow <NAME_OF_BOOK>". 
The form should be at the center of the webpage, taking the full width of the browser. 

The component should also display the number of remaining books.

生成されたコードを適切なファイルに追加する。

AIに以下のプロンプトを与え、ReturnBookコンポーネントを作成します：

Create a component for the `/books/:bookId/return-to-library`.

The component should display a form that allows users to enter their `libraryMemberId` and `bookId` of the book they want to return. 

For the styling, the elements should be properly spaced and have a proper header like "Return Book". 

The form should be at the center of the webpage, taking the full width of the browser.

生成されたコードを適切なファイルに追加する。

WebアプリをBack4appコンテナにデプロイする

アプリケーションのビルドが完了したら、デプロイして一般に公開する必要があります。このチュートリアルでは、Back4appコンテナを使ってアプリケーションをデプロイします。

AIエージェントに以下のプロンプトを与える：

What steps do I need to follow to deploy my app on Back4app containers?

AIは以下のような手順で対応する：

1. Dockerファイルを作成する
2. コードを公開リポジトリにプッシュする
3. 公開リポジトリをback4appに接続する
4. デプロイ

AIエージェントにプロンプトを与える：

Generate a dockerfile for my application

アプリケーションのルート・ディレクトリにDockerfileファイルを作成し、生成されたコードを追加する。

次に、コードをパブリック・リポジトリにプッシュし、AIエージェントに以下のプロンプトを与える：

Connect to my "YOUR_REPOSITORY_URL" repository on GitHub and deploy it to Back4app Containers.

上記のプロンプトが機能するためには、Back4appのGitHubアプリがGitHubアカウントと適切に統合されている必要があります。あるいは、Back4appのコンテナを使ってReactアプリを手動でデプロイすることもできます。

結論

Back4app AI Agentは、データベーステーブルの作成からクラウドコード関数の生成、ReactフロントエンドUIの構築、さらにはアプリケーションのデプロイまで、開発ライフサイクル全体を効率化します。

このアプローチでは、アプリのバックエンドとフロントエンドの両方を最小限の手作業で開発できる。

しかし、AIツールの出力をレビューし、正確性を確保し、潜在的な問題に対処することが重要である。