资源
正文
基于 ChatGPT 的 FAST 后端
Tip
用 FastAPI 写一个五子棋对战的后端,能够接受当前棋局状况并返回下一步的走法。
创建一个项目 gomoku 里面放上 main.py:
1 | |
用 uv 管理这个项目:
1 | |
运行这个服务器:
1 | |
1 | |

Important
上述这个命令只能通过 http://127.0.0.1:8000 访问服务器,要让服务器监听所有网卡(0.0.0.0)则:
1 | |
1 | |
创建一个 gomoku.json,试试看后端能不能用:
1 | |
| 字段 | 类型 | 说明 |
|---|---|---|
board |
int\[15][15] |
0 = 空,1 = 玩家 1,2 = 玩家 2 |
ai_player |
int |
AI 执子(1 或 2) |
使用 curl.exe:
1 | |
得到 AI 给出的下一步走法:
1 | |
| 字段 | 类型 | 说明 |
|---|---|---|
row |
int |
行坐标(0-based) |
col |
int |
列坐标(0-based) |
基于 Claude 的 Mermaid 流程图
sequenceDiagram
participant Frontend as 前端 (游戏界面)
participant CORS as CORS中间件
participant API as FastAPI路由
participant Validator as 数据验证层
participant AI as AI引擎
Note over Frontend,AI: 用户下棋后,请求AI落子
Frontend->>+API: POST /next_move
Note right of Frontend: 请求体:
{
board: [[0,1,2,...], ...],
ai_player: 1
}
API->>CORS: 跨域检查
CORS-->>API: 允许请求
API->>+Validator: 验证GameState模型
alt 验证失败
Validator-->>API: 422 验证错误
API-->>Frontend: 返回错误响应
end
Validator->>Validator: 检查ai_player (1或2)
Validator->>Validator: 检查board尺寸 (15x15)
Validator-->>-API: 验证通过
API->>+AI: find_best_move(board, ai_player)
AI->>AI: 遍历所有空位 (15x15)
loop 每个空位(r, c)
AI->>AI: 计算进攻分数
score_position(board, r, c, ai_player)
Note right of AI: 检查四个方向:
垂直、水平、
对角线、反对角线
AI->>AI: 计算防守分数
score_position(board, r, c, opponent)
AI->>AI: 总分 = 进攻 + 防守×0.9
AI->>AI: 更新最佳落子位置
end
alt 无有效落子
AI-->>API: 抛出RuntimeError
API-->>Frontend: 500 服务器错误
end
AI-->>-API: 返回最佳位置 (row, col)
API->>API: 构造MoveResponse
API-->>-Frontend: 200 OK
Note right of API: 响应体:
{
row: 7,
col: 8
}
Frontend->>Frontend: 在棋盘上放置AI棋子
Frontend->>Frontend: 更新游戏状态
基于 Gemini 的 提示词生成和基于 Stitich 界面设计
Tip
如果我想让 Google Stitich 帮我设计一个前端,我该如何写提示词,需求如下:
设计一个五子棋 APP 的客户端界面,要求能够连接 http://127.0.0.1:8000 的后端:(python 后端代码)
Tip
我需要你为一个五子棋(Gomoku)项目编写一个 React 前端应用(使用 Tailwind CSS)。
- 基础 UI 要求:
设计一个 15x15 的棋盘,风格要求极简、现代(Zen 风格)。
棋盘格线要清晰,背景使用淡木色。
棋子为黑白圆片,需有细腻的阴影效果(看上去像实体棋子)。
侧边栏显示当前回合(玩家 vs AI)、计时器和落子历史。
- 核心逻辑:
初始化: 棋盘状态为一个 15x15 的二维数组,0 代表空,1 代表玩家(黑子),2 代表 AI(白子)。
交互: 玩家点击交叉点落子,前端需验证该位置是否为空。
API 集成: 玩家落子后,前端需立即向 http://127.0.0.1:8000/next_move 发送 POST 请求。
Request Payload: {“board”: number[][], “ai_player”: 2}
Response Format: {“row”: number, “col”: number}
AI 回合: 收到后端返回的坐标后,在棋盘上自动更新 AI 的落子。
- 技术栈建议:
使用 React + Hooks (useState, useEffect)。
使用 Fetch API 处理异步请求。
增加胜负判断逻辑(五连珠即胜利),并弹出精美的模态框提示。
- 附加功能:
包含“悔棋”和“重新开始”按钮。
响应式设计,适配桌面端和移动端浏览器。

在 Stitch 上生成好之后,导出至 AI Studio:

基于 AI Studio 的前端开发
Tip
使用这个前端界面构建一个网页应用。能够连接 http://127.0.0.1:8000 的后端。通过
1 | |
与后端通信
gomoku.json 的示例:
1 | |
后端代码:
1 | |
Build 之:

调教完下载之。
安装必要库:
1 | |
1 | |
1 | |
测试到成功与后端对接。

基于 Capacitor 的 Android APK 打包
安装 Capacitor:
1 | |
找到 constants.ts,将服务器地址改成手机能连上的服务器地址:
1 | |
打包之:
1 | |
1 | |
初始化 Capacitor:
1 | |
一路回车也可以。
1 | |
Note
- App name →
MyViteApp(随便起) - App package id →
com.example.myviteapp(必须唯一)
1 | |
1 | |
Important
每次改完前端:
1 | |
sync会把dist里的文件拷贝到android/app/src/main/assets/public/- 同步 Capacitor 插件
用 Android Studio 打开并运行:
1 | |
1 | |
Android 9+ 默认禁止 HTTP(明文)请求。项目中修改 android/app/src/main/AndroidManifest.xml,添加 android:usesCleartextTraffic="true"。让打包的 APK 能够允许 HTTP 明文流量:
1 | |
修改 android/app/java/com.example.app/MainActivity:
1 | |
设置好 SDK 和 JDK,在 Android Studio 中打包一个 Debug 版本 APK:

Note
在 Capacitor + Android 项目里,生成的 APK 默认会在 Android 项目的 build 输出目录,路径一般是:
1 | |
详细位置:
- Debug 版本 APK:
1 | |
- Release 版本 APK(需要签名):
1 | |

Android 调试
手机连接电脑,开启 USB 调试。在 Chrome/Edge 地址栏输入:
1 | |
找到设备和 App,点击 Inspect:
