Qoder联手ADB Supabase，5分钟打造AI手办生图APP，告别传统后端瓶颈，体验AI极速开发！
原文标题：Qoder + ADB Supabase ：5分钟GET超火AI手办生图APP
原文作者：阿里云开发者
冷月清谈：
开发流程高度简化：Qoder作为AI驱动的IDE Agent，能够根据需求快速生成高质量的Flutter前端代码，极大提升了界面与交互的开发效率。紧接着，ADB Supabase承担了所有后端职责，包括建立用于存储用户编辑记录的数据库表，以及创建用于持久化图片数据的对象存储桶。此外，所有关键的AI能力集成都通过Supabase Edge Function完成。开发者只需将调用Qwen Image Edit模型的逻辑部署到函数中，并通过Edge Function的加密密钥管理能力，安全地存储和调用百炼API Key，杜绝了密钥暴露风险。
整体架构轻量、迭代迅速，从用户上传原图、通过Edge Function调用AI模型进行编辑，到最终将生成图片URL及相关信息写入数据库，形成了一个流畅的闭环。这种开发模式不仅适合快速验证原型，也能平滑扩展至生产环境，使开发者能够专注于核心业务逻辑，而非繁琐的基础设施搭建与维护。
怜星夜思：
2、AI 模型替换的自由度: 文中用了通义千问，如果我想换成别的 AI 模型，比如我更习惯用别的厂商API，或者我想自己部署一个开源模型，在这个 Qoder + Supabase 的架构里，替换的难度大吗？是只需要改改 Edge Function 的代码就行，还是需要动筋骨？
3、Qoder 的“不智能”时刻: Qoder 自动生成代码听着很爽，但实际开发中，AI 肯定也有搞不定的时候吧？比如那些特别花哨的 UI 动画，或者超复杂的业务逻辑，Qoder 会不会就“卡壳”了？咱们开发者遇到这种情况，除了 Debug，还需要点啥技能才能把它驯服得更好呢？
原文内容
视频效果：
一、前言
在AI原生应用开发的时代，传统的后端架构正在被重新定义。本文将带你体验如何使用 Qoder、阿里云ADB Supabase 和通义千问图像编辑模型（Qwen Image Edit），快速搭建一个完整的 AI 手办生图 Flutter 移动端应用。全程无需自建传统后端，真实体验一次 Vibe Coding 的极速开发。
二、总体思路
-
前端由 Qoder 根据需求自动生成 Flutter 代码，负责界面与交互。
-
数据与对象存储由 ADB Supabase 提供，承担 BaaS 能力。
-
AI 能力通过 ADB Supabase Edge Function 接入通义千问图像编辑模型，实现图片编辑。
-
整体架构轻量、迭代快，适合从原型到上线的快速推进。
三、环境与准备
1. 开通阿里云 ADB Supabase[1] 实例（限时免费1C2G），为了能够调用百炼 API，您需要配置ADB Supabase 实例的 vpc 通过终端节点私网访问阿里云百炼平台[2]（免费），或配置公网NAT网关[3]（收费）；
2. 百炼 DashScope API Key[4]（调用通义千问图像编辑模型）；
3. 安装 Qoder[5] 与 Flutter[6] 插件，并安装Flutter 环境（Android/iOS SDK），具体可参考使用 VS Code 安装 Flutter[7]。
四、AI 驱动开发 - Qoder 自动生成 Flutter 代码
Qoder 作为AI驱动的IDE Agent，能够根据需求自动生成高质量的 Flutter 代码。使用 Flutter 插件创建Empty Project 后，你只需描述核心功能，配合几轮调试与 Debug，就能得到可运行的移动端应用。
可以参考本文源代码[8]，并在此基础上进行二创！
五、后端即服务 - ADB Supabase 配置
5.1 获取 API 配置
首先，打开ADB Supabase的dashboard页面，复制API_URL和API_KEY。通过 dotenv 的方式将 ADB Supabase 实例的API_URL和API_KEY（Service Role Key）配置到项目根目录。
SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net
SUPABASE_SERVICE_KEY=xxxxxxxx
5.2 数据库表结构设计
在ADB Supabase dashboard 中创建如下所示的数据库表来存储历史数据，此表用于存储用户编辑图片的记录，包括原始图片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()
);
5.3 对象存储桶创建
在ADB Supabase dashboard上的 Storage页面创建名为 images 的存储桶，用来存储用户上传的图片数据。这个存储桶将作为图片文件的持久化存储解决方案。
六、AI服务集成 - Edge Function 部署
6.1 Edge Function核心逻辑部署
打开 ADB Supabase Dashboard，在 Edge Functions 页面点击 "Via Editor Deploy a new function"，在编辑器中键入如下所示的function，将function命名为wan，然后部署。
注意：如果您选择通过终端节点私网访问阿里云百炼平台[2]（免费），BASE_URL需要设置为 https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1，若通过配置公网NAT网关[3]（收费）访问，BASE_URL 需要设置为 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) { returnnew Response(JSON.stringify({ error: "Missing image_url or prompt" }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const result = await callImageEditAPI(image_url, prompt); returnnew Response(JSON.stringify({ message: result }), { headers: { 'Content-Type': 'application/json', 'Connection': 'keep-alive' } }); } catch (error) { console.error("Server error:", error); returnnew Response(JSON.stringify({ error: "Internal server error" }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } });
该函数接收图片 URL 与提示词，调用通义千问图像编辑模型，返回生成结果。
6.2 安全密钥管理配置
在 ADB Supabase 中，我们提供原生的 Edge Function Secrets 配置与集中管理能力，可将 AI API Token（如 DashScope/百炼）安全地存放在函数运行环境的密钥库中，通过 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 的快感真正落地到真实应用。
参考链接：
[1]https://gpdbnext.console.aliyun.com/gpdb/cn-beijing/supabase?utm_content=g_1000407324
[2]https://help.aliyun.com/zh/model-studio/access-model-studio-through-privatelink?utm_content=g_1000407325
[3]https://vpc.console.aliyun.com/nat/cn-beijing/nats?utm_content=g_1000407326
[4]https://bailian.console.aliyun.com/?tab=model#/api-key&utm_content=g_1000407327
[5]https://qoder.com/
[6]https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[7]https://docs.flutter.dev/install/with-vs-code
[8]https://github.com/fffzlfk/adb-supabase-flutter-demo