GPT Engineerを使って日記アプリを爆速開発！！データベース連携も！！

今回は、AIとのチャットのみで高度なWebアプリを開発できる「GPT Engineer」について紹介していきます。

実際に「日記アプリ」を作っていく様子を一緒に見ていきましょう。

この内容をハンズオンでやるイベントを開催します。9/18(水) 19:00～です。
ぜひご参加ください。

GPT Engineer で爆速開発ハンズオン (2024/09/18 19:00〜)

GPT Engineerの紹介

GPT Engineerは、チャットで対話しながらフロントエンドのコーディングを行ってWebアプリを作成してくれます。

特徴

• Github連携

• デプロイ機能

• Supabase連携

などの、開発者にとっても嬉しい機能が満載です。

使い方

１．https://gptengineer.app/ にアクセスし、アカウントを作成します。

２．画面中央の入力欄に、作りたい日記アプリの説明を入力します。

例えば：

「シンプルな日記アプリを作成してください。ユーザーが日付、タイトル、本文を入力でき、過去の日記を一覧表示できる機能が欲しいです。」

３．GPT Engineerがコードを生成し、右側のプレビュー画面にUIが表示されます。

プロジェクトの公開設定

プロジェクト作成時に、プロジェクトをPublicにするかPrivateにするかを選択できます。Privateは有料プラン（PRO）のユーザーのみ利用可能です。

Publicにした場合、チャットの履歴なども公開されるため、チャットで機密情報（APIKey)などを渡している場合は要注意です。

公開されているプロジェクト。左側にチャット履歴がある

GitHub連携

GitHubと連携が可能で、バージョン管理が容易に行えます。

１．右上のGitHubボタンをクリック

２．GitHubログイン
３．リポジトリを作成するアカウントを選択

これだけで選択したアカウントにPrivateリポジトリが作成され、その時点のコードがPushされます。

実際に作成されたリポジトリです。

GitHubと連携可能ということは、ローカルに持ってこれるということです。
ローカルに持ってこれるということは、Cursorでの開発が可能ということです。

デプロイ機能

 １．右上のPublishボタンをクリックするとDeployメニューが出てきます。

Public or Privateの選択肢が出てくる

２．緑色の Deployボタン をクリック

３．デプロイ完了！！

published!!

Supabase連携でデータベースを持った日記アプリを開発する

では、Supabaseと連携して、データベースを利用した日記アプリを開発してみましょう。