04. 数据之源：使用 FreeAPI 连接世界
课时信息
📅 时间：10:40 - 11:25 🎯 目标：学会寻找并调用公共 API，让 App 拥有“千里眼”
1. 什么是 API？
API (Application Programming Interface) 是 App 与世界对话的窗口。
- 你的 App 是 服务员 (Frontend)。
- API 是 厨师 (Backend)。
- 你递进去菜单 (Request)，厨师递出来菜品 (Response JSON)。
2. 宝藏之地：FreeAPI
在没有自己写后端之前，我们可以利用互联网上现成的免费资源。 访问 Free API (www.free-api.com)，这里收集了各种有趣的接口：
- 工具类: 天气、汇率、快递查询。
- 内容类: 每日一言、随机笑话、新闻头条。
- 娱乐类: 随机图片、星座运势。
3. 实战：调用 "一言" (Hitokoto)
我们将使用 一言 API 为 App 增加随机格言功能。
3.1 准备工作 (Dio)
Flutter 原生 http 库较弱，我们使用 Dio。
AI 指令: "请在
pubspec.yaml中添加dio依赖，并执行安装。"
3.2 步骤一：分析数据
先在浏览器打开 API 地址：https://v1.hitokoto.cn/ 看到 JSON：
{
"id": 123,
"hitokoto": "生活明朗，万物可爱。",
"from": "微博"
}3.3 步骤二：生成模型 (Model)
AI 指令: "这是 API 返回的 JSON：
{...}(粘贴上面的 JSON)。请帮我写一个 Dart 类Hitokoto，包含fromJson方法。"
3.4 步骤三：发送请求
AI 指令: "写一个异步函数
fetchHitokoto。使用 Dio 发起 GET 请求https://v1.hitokoto.cn/。成功返回Hitokoto对象，失败抛出异常。"
3.5 步骤四：UI 展示
AI 指令: "在界面中心显示获取到的
hitokoto文字。添加一个刷新按钮，点击时重新调用接口。"
4. 调试小技巧
如果请求失败：
- 检查网络: 模拟器是否连网？
- HTTPS: 现在的 API 几乎都强制 HTTPS。
- 打印日志: 让 AI 在
catch块里print(e)，看看具体报什么错。
5. 进阶：Supabase 云后端 (BaaS)
5.1 全栈开发的"最后一公里"
在 Day 2 的课程中，我们使用了公共 API (如一言)。但如果你想做一个 "记账 App" 或 "待办清单"，数据必须存下来。 传统做法是：买服务器 -> 装 Linux -> 装 MySQL -> 写 Node.js/Java 接口 -> 部署。 这对初学者太难了。
Supabase (BaaS - Backend as a Service) 完美解决了这个问题。
5.2 什么是 Supabase？
把它想象成一个 "云端大管家"。 你只需要在网页上点几下，它就自动为你提供：
- Postgres 数据库: 世界上最强大的开源关系型数据库。
- Authentication: 登录系统 (支持 Google/GitHub/手机号登录)。
- Auto API: 建好表，增删改查的 API 自动生成。
- Storage: 存头像、存文件的对象存储。
最重要的是：它对个人开发者有很宽松的免费额度。
5.3 五分钟上手实战
Step 1: 创建项目
- 访问 supabase.com 并使用 GitHub 登录。
- 点击 "New Project"。
- 输入 Project Name (如
my-first-app) 和 Database Password。 - Region 选择离你近的 (如 Singapore 或 Tokyo)。
Step 2: 创建数据表 (Table Editor)
- 进入 Dashboard，点击左侧表格图标 (Table Editor)。
- 点击 "New Table"。
- Name 填
notes(笔记)。 - 添加列 (Columns):
id: int8, Primary Key (默认已有)content: text (存笔记内容)created_at: timestamptz (默认已有)
- 点击 Save。
Step 3: 体验 API (API Docs)
Supabase 已经自动为你生成了 API！
- 点击左侧 "API Docs"。
- 在 "Tables and Views" 里找到
notes。 - 点击 "Javascript" 或 "Bash"。
- 你会看到如下代码示例：
// 插入数据
const { data, error } = await supabase
.from('notes')
.insert([
{ content: '学会 Supabase 真是太棒了！' },
])5.4 在 Flutter/Web 中集成
让 AI 帮你写代码：
Prompt: "我要在 Flutter 项目中接入 Supabase。
- 请帮我添加
supabase_flutter依赖。- 这是我的 URL:
https://xyz.supabase.co和 Anon Key:eyJ...。- 请写一个 Service 类，实现对
notes表的增删改查。"
5.5 Supabase 与 AI
Supabase 完美支持 pgvector。这意味着你可以用它来存储文本的 Embedding (向量)，是构建 RAG (知识库问答) 应用的首选数据库。
替代方案
国内由于网络原因，访问 Supabase 可能会慢。 国内类似的替代品有：
- MemFire Cloud: 基于 Supabase 的国内托管版。
- LeanCloud: 老牌的 BaaS 服务商。
- 腾讯云开发 (CloudBase): 微信小程序原生支持。
任务
浏览 FreeAPI，挑选一个你感兴趣的接口（比如查询你所在城市的天气），尝试让 AI 帮你接入。