AI原生应用开发，近年来势头愈发强劲，一个显著的趋势是：传统后端架构正被新一代工具链重新定义。今天，我们通过一个实战案例来拆解——利用Qoder、阿里云ADB Supabase与通义千问图像编辑模型，构建一个可运行的AI手办生图Flutter应用。整个流程无需自建传统后端，真正体验Vibe Coding的核心理念，节奏紧凑、落地高效。
一、总体思路
先搭建整体框架：前端采用Qoder自动生成的Flutter代码负责交互界面，后端能力由ADB Supabase提供——数据存储和对象存储均交由它承担，扮演BaaS角色。AI模型则通过ADB Supabase的Edge Function接入通义千问，处理图片编辑请求并返回结果。整体架构极为轻量，迭代速度快，从原型到线上均可沿用此方案。
二、环境与准备
开工前，需要准备以下资源：
- 开通一个阿里云ADB Supabase实例，目前有限时免费的1C2G套餐，足够使用。如需调用百炼API，请确保实例通过终端节点私网访问百炼平台（免费），或配置公网NAT网关（收费）。
- 前往百炼获取DashScope API Key，用于调用通义千问图像编辑模型。
- 本地安装Qoder及Flutter插件，并配置好Flutter环境——Android和iOS的SDK均需就绪，具体可参考VSCode中安装Flutter的教程。
三、AI驱动开发——Qoder自动生成Flutter代码
Qoder本质上是一个AI驱动的IDE Agent，只需清晰描述核心功能，它便能自动生成高质量的Flutter代码。使用其Flutter插件新建一个空项目，然后描述需求，经过几轮调试与debug，一个可运行的移动端应用便迅速成型。
可参考本文提供的源代码，在此基础上进行二次创作。
四、后端即服务——ADB Supabase配置
4.1 获取API配置
首先进入ADB Supabase控制台，复制API_URL和API_KEY。采用dotenv方式，将这两个参数配置到项目根目录，具体格式如下：
SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net
SUPABASE_SERVICE_KEY=xxxxxxxx4.2 数据库表结构设计
在ADB Supabase控制台中，创建一张表用来保存用户编辑过的图片记录。该表需包含原始图片URL、编辑后图片URL、用户输入的提示词等信息：
CREATE TABLE public.edited_images (
id TEXT PRIMARY KEY,
prompt TEXT NOT NULL,
original_image_url TEXT NOT NULL,
edited_image_url TEXT NOT NULL,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);4.3 对象存储桶创建
在Storage页面创建一个名为images的存储桶，用于存放用户上传的图片。该桶作为图片文件的持久化存储方案，简洁直接。
五、AI服务集成——Edge Function部署
5.1 Edge Function核心逻辑部署
打开ADB Supabase控制台，在Edge Functions页面点击“Via Editor Deploy a new function”，将以下代码填入，命名为wan，然后部署。代码的核心逻辑是：接收图片URL和提示词，调用通义千问图像编辑模型，返回编辑后的结果。
有一点需要注意：若通过终端节点私网访问百炼平台（免费），BASE_URL需设为https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1；若走公网NAT网关（收费），则设为https://dashscope.aliyuncs.com/api/v1。
const DASHSCOPE_API_KEY = Deno.env.get('BAILIAN_API_KEY');
const BASE_URL = 'https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1';
async function callImageEditAPI(image_url, prompt){
const messages = [
{
role: "user",
content: [
{
image: image_url
},
{
text: prompt
}
]
}
];
const payload = {
model: "qwen-image-edit",
input: {
messages
},
parameters: {
negative_prompt: "",
watermark: false
}
};
try {
const response = await fetch(`${BASE_URL}/services/aigc/multimodal-generation/generation`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${DASHSCOPE_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
if (!response.ok) {
console.error(`Request failed: ${response.status} ${response.statusText}`);
return null;
}
const data = await response.json();
return data.output?.choices?.[0]?.message?.content ?? null;
} catch (error) {
console.error("Request error:", error.message);
return null;
}
}
Deno.serve(async (req)=>{
try {
const { image_url, prompt } = await req.json();
if (!image_url || !prompt) {
return new Response(JSON.stringify({
error: "Missing image_url or prompt"
}), {
status: 400,
headers: {
'Content-Type': 'application/json'
}
});
}
const result = await callImageEditAPI(image_url, prompt);
return new Response(JSON.stringify({
message: result
}), {
headers: {
'Content-Type': 'application/json',
'Connection': 'keep-alive'
}
});
} catch (error) {
console.error("Server error:", error);
return new Response(JSON.stringify({
error: "Internal server error"
}), {
status: 500,
headers: {
'Content-Type': 'application/json'
}
});
}
});该函数的作用是接收图片URL和提示词，调用模型，并将生成的结果返回。
5.2 安全密钥管理配置
ADB Supabase提供原生Edge Function Secrets配置功能，可将AI API Token（如DashScope的Key）安全地存储在函数运行环境的密钥库中。通过Deno.env.get读取，密钥不会下发到客户端，也不会进入代码仓库或构建产物。具体操作：在Edge Functions的Secrets页面配置BAILIAN_API_KEY，然后在函数内用Deno.env.get('BAILIAN_API_KEY')读取，从而避免密钥硬编码。
六、总体流程及原理
原图上传 | 用户选择图片 → 前端上传至Supabase Storage的images bucket → 生成签名URL |
调用编辑 | 前端将签名URL与prompt传给Edge Function → Edge Function利用BAILIAN_API_KEY调用Qwen Image Edit模型 → 获取生成图的URL |
写入历史记录 | 前端将original_image_url、edited_image_url、prompt写入edited_images表 |
七、测试与验证
提示词示例：
“绘制图中角色的1/7比例的商业化手办，写实风格，真实环境，手办放在电脑桌上，电脑屏幕里的内容为该手办的C4D建模过程，电脑屏幕旁放着印有原画的BANDAI风格的塑料玩具包装盒，电脑桌上还有制作手办的工具，如画笔，颜料，小刀等。”
八、结语
回顾整个过程，Qoder + ADB Supabase + 通义千问图像编辑模型这一组合拳，确实能在没有传统后端的条件下，快速搭建出一个可用的AI手办生图Flutter应用。从前端到后端，从数据到模型，全链路都极为轻量，既适合快速验证原型，也能在需要时平滑升级至生产环境。实际应用中，可根据业务场景在安全与性能方面做进一步优化，将Vibe Coding的快感真正落地到具体项目里。