AIコード生成 geminiCLIなど、vue.js+FastAPI(python) CRUDアプリ①

geminiCLIで、vue.js+FastAPIで認証、ダッシュボード、CRUDアプリ①

geminiCLIのAIコード生成を使って認証、ダッシュボード、まず所属マスタのCRUDアプリを作る。geminiCLIは、コード生成以外にもコマンド起動や必要なライブラリインストールなども行ってくれる。sqliteのようなDB作り、テーブル作成なども行ってくれる。

準備

mkdir vue1-app
cd vue1-app
gemini

プロント例

### 事前準備、認証、ダッシュボード
- WEBアプリを作る
- レスポンシブデザイン
- フロントエンド(Vue)とバックエンド(FastAPI/Python)の最小構成
- DBはsqlite。テーブル作成のsql文も含めて構築
- 標準的なログイン認証機能
- 標準的なダッシュボード機能
- WEBサーバー起動方法も提示。サーバー起動し、ブラウザで確認できる手順まで

✦ 承知いたしました。Vue.jsとFastAPIを使用した、認証機能付きのレスポンシブWebアプリケーションの最小構成を構築し
ます。

まず、プロジェクトの基本的なディレクトリ構造を作成します。

1. backend: FastAPIアプリケーションのコードを格納します。
2. frontend: Vue.jsアプリケーションのコードを格納します。

このコマンドは、プロジェクトのルートディレクトリに backend と frontend の2つのフォルダを作成します。
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ? Shell mkdir backend frontend (Create backend and frontend directories.) ← │
│ │
│ mkdir backend frontend │
│ │
│ Allow execution of: ‘mkdir’? │
│ │
│ ● 1. Yes, allow once │
│ 2. Yes, allow always … │
│ 3. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯

⠏ Waiting for user confirmation…

1を選択すると、

また、聞いてきます。これを繰り返しながらアプリを作っていく。

✦ ディレクトリの作成が完了しました。

次に、バックエンドのFastAPIアプリケーションを設定します。

1. backendディレクトリに移動し、Pythonの仮想環境を作成します。
2. 仮想環境をアクティベートします。
3. 必要なライブラリ（FastAPI, Uvicorn, SQLAlchemy, Passlib, python-jose）をインストールします。 これらの手順をまとめて実行します。このコマンドは、backendディレクトリ内に仮想環境を作成し、必要なパッケー
   ジをインストールします。
   ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │ ? Shell python -m venv backend\venv && backend\venv\Scripts\activate && pip install fastapi uvicorn[… ← │
   │ │
   │ python -m venv backend\venv && backend\venv\Scripts\activate && pip install fastapi │
   │ uvicorn[standard] sqlalchemy passlib[bcrypt] python-jose[cryptography] │
   │ │
   │ Allow execution of: ‘python, activate, pip’? │
   │ │
   │ ● 1. Yes, allow once │
   │ 2. Yes, allow always … │
   │ 3. No, suggest changes (esc) │
   │ │
   ╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯

⠏ Waiting for user confirmation…

1を選択し、作業中。。。その間別の作業を行います。

vue+fastAPI基本構成、認証、ダッシュボード機能まで完了。

✦ README.mdを作成し、Vue.jsフロントエンドとFastAPIバックエンドを持つWebアプリケーションの作成手順をすべて完了しました。

README.mdで言及したバックエンド用のrequirements.txtを作成します。以前インストールした依存関係をリストアップします。
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to backend\requirements.txt │
│ │
│ 1 fastapi │
│ 2 uvicorn[standard] │
│ 3 sqlalchemy │
│ 4 passlib[bcrypt] │
│ 5 python-jose[cryptography] │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ これで、ご依頼いただいたVue.jsとFastAPIによるWebアプリケーションの構築が完了しました。

ルートディレクトリにREADME.mdファイルを作成しましたので、そちらの手順に従ってバックエンドとフロントエンドのサーバーを起動し
、動作を確認してください。

概要:

1. バックエンド:
   backendディレクトリで仮想環境を有効化し、requirements.txtから依存関係をインストール後、uvicornでサーバーを起動します。
2. フロントエンド: frontendディレクトリでnpm installを実行し、npm run serveで開発サーバーを起動します。
3. ユーザー作成: README.mdに記載のcurlコマンド等を利用して、最初にユーザーを作成する必要があります。
4. ログイン: ブラウザでフロントエンドにアクセスし、作成したユーザー情報でログインします。 ご不明な点があれば、お気軽にご質問ください。

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > Type your message or @path/to/file │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

README.mdを見てみる。vs codeを起動。

README.mdの中身。

# Vue.js and FastAPI App

This project is a simple web application with a Vue.js frontend and a FastAPI backend.

## Project Structure

– `/backend`: FastAPI application

– `/frontend`: Vue.js application

## How to Run

### 1. Backend (FastAPI)

First, set up and run the backend server.

“`bash

# Navigate to the backend directory

cd backend

# Create a virtual environment (if you haven’t already)

python -m venv venv

# Activate the virtual environment

# On Windows:

venv\Scripts\activate

# On macOS/Linux:

source venv/bin/activate

# Install dependencies (if you haven’t already)

pip install -r requirements.txt

# Run the FastAPI server

uvicorn main:app –reload

“`

The backend server will be running at `http://127.0.0.1:8000`.

### 2. Frontend (Vue.js)

Next, set up and run the frontend application.

“`bash

# Navigate to the frontend directory

cd frontend

# Install dependencies (if you haven’t already)

npm install

# Run the Vue development server

npm run serve

“`

The frontend application will be running at `http://localhost:8080` (or another port if 8080 is busy).

### 3. Create a User and Login

1.  Before you can log in, you need to create a user. You can do this by sending a POST request to the `/users/` endpoint of the backend API. You can use tools like `curl` or Postman.

    **Example using curl:**

    “`bash

    curl -X POST “http://127.0.0.1:8000/users/” -H “Content-Type: application/json” -d ‘{“username”: “testuser”, “password”: “testpassword”}’

    “`

2.  Once the user is created, open your web browser and navigate to the frontend application (e.g., `http://localhost:8080`).

3.  You will be redirected to the login page. Enter the username and password you just created to log in.

4.  After successful login, you will be redirected to the dashboard.

エラーが出ます。エラー内容をさらにgemini CLIに依頼して修正してもらう。これを繰り返しながらアプリを作っていく。

エラー内容を知らせて解決してもらう。

解決したか？

front側も立ち上がりました。アクセスしてみます。

アカウントを作ります。

curl -X POST "http://127.0.0.1:8000/users/" -H "Content-Type: application/json" -d "{\"username\": \"testuser\", \"password\": \"testpassword\"}"

http://localhost:8080/login

所属マスタCRUDアプリ

続けて、所属マスタを作っていきます。

### 所属マスタ
- 所属マスタの一覧、登録、修正、削除（CRUD）機能の日本語版アプリを作る
- 所属マスタ（depts）テーブルの定義
  - id: 主キー
  - name: 名称
  - parent_id: 親所属ID (depts.idの外部キー, NULL許容)
  - timestamps: 作成日時・更新日時
- ダッシュボードにメニュー追加
- excelエクスポート機能を追加、一覧画面にボタンを配置
- 一覧画面の項目の表示有無を選択する機能を追加、項目の表示有無を選択で一覧画面の項目の表示有無を動的に変更できる
- 一覧画面の項目に降順、昇順ソートを選択できる
- 一覧画面に検索条件を追加、名称のあいまい検索できる
- 一覧画面にページングを追加、初期値10行毎に改ページ。1ページ辺りの表示件数10行や50行など選択できる
- Excelエクスポートは入力条件で検索した結果を出力する
- 一覧画面に検索した件数を表示

エラーが多発し、かなり繰り替えしましたが、どうにか所属マスタのCRUDアプリ出来ました。