GPT-4oで簡単なWebアプリを作成

Posted at 2024-06-02

はじめに

GPT-4はプロンプトの応答が遅かったのですが、GPT-4oになってだいぶ早くなったというのを目にしていました。出力の精度も確認したかったので、簡単なWebアプリを作成してみようと思いました。

アプリケーションの概要

Node.jsでTodo管理するWebアプリケーション
ユーザ登録、ログイン、トークン認証あり
プロジェクトと、プロジェクトごとのTodoの追加

　※あくまでサンプル的なものなのであまり期待せずでお願いします。

GPT-4o　プロンプト入力

プロンプトは以下で入力

GPT-4o　プロンプト応答

出力されたプロジェクト構造

my-todo-app/
│
├── node_modules/
├── app.js
├── config.js
├── database.js
├── routes/
│   ├── auth.js
│   ├── projects.js
│   └── todos.js
└── models/
    ├── user.js
    ├── project.js
    └── todo.js

その後にそれぞれのソースを出力してくれます。全てのソースを出力しますが、一部のみ記載します。

app.js

const express = require('express');
const bodyParser = require('body-parser');
const authRoutes = require('./routes/auth');
const projectRoutes = require('./routes/projects');
const todoRoutes = require('./routes/todos');

const app = express();
const PORT = process.env.PORT || 3000;

// ミドルウェア設定
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
.
.
.
(省略)

最後にプロジェクトの起動コマンドを出力して終わります。

npm install
npm start

アプリケーションの起動

npm start

Server is running on port 3000

起動してみたはよいのですが、画面がありません。追加してもらいましょう。

publicフォルダ下の3ファイルが追加されました。

my-todo-app/
│
├── node_modules/
├── public/
│   ├── index.html ・・・追加
│   ├── style.css  ・・・追加
│   └── app.js     ・・・追加
├── app.js
├── config.js
├── database.js
├── package.json
├── routes/
│   ├── auth.js
│   ├── projects.js
│   └── todos.js
└── models/
    ├── user.js
    ├── project.js
    └── todo.js

動かしてみましょう。
localhost:3000