AIを使ってフルスタックプロジェクトを完成させた記録研究室で、データセットを公開ダウンロードできるようにしつつ、ダウンロード数などの情報も記録したいという要件があり、このプロジェクトが生まれました。CITE Lab MoCap and Humanoid Group Download Centerダウンロード画面管理画面最初は、使い慣れた FastAPI + SQLite で実装しようと考え、以下のプロンプトをそのまま AI(Claude 3.7 Sonnet)に与えたところ、かなり使えるものが出来上がりました。主に2つのバグが発生しました。1つは SMTP メール送信に暗号化が使われていなかったこと、もう1つは NJU Box のバージョンが古すぎたため、結局手動で対応する Seafile API を探す必要があったことです。MD请帮我使用fastapi, JavaScript等技术栈构建一个实验室下载中心的网页。网页应该包含以下功能: 1. 后端使用seafile API获取存储库中有哪些文件,前端第一行使用下拉框显示各个文件,供用户选中对应的文件。 2. 前端第二行需要用户填写邮箱,要求必须为教育邮箱或学术邮箱,输入框右侧有一个发送验证码的按钮。用户点击后,后端使用smtp服务器发送验证码到用户邮箱。前后端都要判断邮箱格式是否正确,并且发送邮件每个IP地址每分钟只能发送一次。 3. 前端第三行需要用户填写验证码。 4. 第四行要求填写学校/单位。 5. 第五行要求填写姓名。 6. 所有输入框都不能为空,前后端都进行判断,防止用户恶意提交。 7. 最后一行有一个提交按钮,点击后,后端判断验证码正确的话,使用seafile API将给对应的文件生成一个共享链接,并将链接发送到用户邮箱,同时前端自动调整至该链接。 8. 同时后端向sqlite数据库中插入一条记录,记录包括文件名称、邮箱、学校/单位、姓名、共享链接、提交时间。 9. 界面使用英文。 10. 页面尽可能美观。 11. 最后写一个dockerfile将整个项目打包成一个镜像。 しかし、この方法ではインターフェースが平凡で、多くの機能の拡張も不便だったため、より先進的な Next.js などを使ってプロジェクトをリファクタリングしようと考えました。ところが、AI に既存のコードを参考にリファクタリングさせても、ゼロからプロンプトを与えても、出来はひどく、実行時エラーではなくコンパイルエラーさえ発生しました。最新の AI IDE もいくつか試しましたが、満足のいく結果は得られませんでした。結局は手作業に頼るしかありませんでした。私は1日かけてまずフレームワークを組み、その後、以前 FastAPI で実装したプロジェクトのファイルを1つずつ AI に与え、それを参考に現在の Next.js プロジェクトの対応機能を完成させるよう指示しました。そして、少しずつ小さな機能の改善を実装させ、手動でバグを修正しながら、最終的に上の2つの画像のような結果を得ました。現在の特徴:技術スタック:Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redisフロントエンドはダウンロード画面を提供し、ユーザーはファイルを選択してダウンロードできます(複数選択対応)。教育機関・学術機関のメールアドレスのみダウンロード可能で、メール認証が正しく完了した後にのみダウンロードできます。ダウンロード規約を提示し、必ず読んでから先に進む必要があります。バックエンドはユーザーのダウンロード記録(ユーザー名、ファイル名、ダウンロード時間など)を記録し、管理画面で確認できるようにします。ファイルは Seafile(NJU Box)上に保存され、このプロジェクトはユーザーに一時的なリンクを生成してダウンロードさせることで、ファイルリンクの直接公開を避け、サーバーのトラフィックを節約します。Seafile 内の readme.md ファイルを解析し、ダウンロード画面にファイルの説明として表示します。サブパスの設定をサポートし、既存のウェブサイトにデプロイしやすくします。ダークモード対応。メールアドレスに基づき、AI を使って組織名を解析します。@阙:「使いにくいAIなんていない、ただ頑固さが足りない人間がいるだけだ。」
AIを使ってフルスタックプロジェクトを完成させた記録
AIを使ってフルスタックプロジェクトを完成させた記録
研究室で、データセットを公開ダウンロードできるようにしつつ、ダウンロード数などの情報も記録したいという要件があり、このプロジェクトが生まれました。
CITE Lab MoCap and Humanoid Group Download Center
最初は、使い慣れた FastAPI + SQLite で実装しようと考え、以下のプロンプトをそのまま AI(Claude 3.7 Sonnet)に与えたところ、かなり使えるものが出来上がりました。主に2つのバグが発生しました。1つは SMTP メール送信に暗号化が使われていなかったこと、もう1つは NJU Box のバージョンが古すぎたため、結局手動で対応する Seafile API を探す必要があったことです。
しかし、この方法ではインターフェースが平凡で、多くの機能の拡張も不便だったため、より先進的な Next.js などを使ってプロジェクトをリファクタリングしようと考えました。ところが、AI に既存のコードを参考にリファクタリングさせても、ゼロからプロンプトを与えても、出来はひどく、実行時エラーではなくコンパイルエラーさえ発生しました。最新の AI IDE もいくつか試しましたが、満足のいく結果は得られませんでした。
結局は手作業に頼るしかありませんでした。私は1日かけてまずフレームワークを組み、その後、以前 FastAPI で実装したプロジェクトのファイルを1つずつ AI に与え、それを参考に現在の Next.js プロジェクトの対応機能を完成させるよう指示しました。そして、少しずつ小さな機能の改善を実装させ、手動でバグを修正しながら、最終的に上の2つの画像のような結果を得ました。
現在の特徴:
@阙:「使いにくいAIなんていない、ただ頑固さが足りない人間がいるだけだ。」