|
在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 配置 首先，打开ADB Supabase的dashboard页面，复制API_URL和API_KEY。通过 dotenv 的方式将 ADB Supabase 实例的API_URL和API_KEY（Service Role Key）配置到项目根目录。 SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.netSUPABASE_SERVICE_KEY=xxxxxxxx 在ADB Supabase dashboard 中创建如下所示的数据库表来存储历史数据，此表用于存储用户编辑图片的记录，包括原始图片URL、编辑后图片URL、用户输入的提示词等关键信息。 CREATETABLEpublic.edited_images(idTEXTPRIMARYKEY,promptTEXTNOTNULL,original_image_urlTEXTNOTNULL,edited_image_urlTEXTNOTNULL,created_atTIMESTAMPTZNOTNULLDEFAULTNOW()); 在ADB Supabase dashboard上的 Storage页面创建名为 images 的存储桶，用来存储用户上传的图片数据。这个存储桶将作为图片文件的持久化存储解决方案。 六、AI服务集成 - 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。 constDASHSCOPE_API_KEY=Deno.env.get('BAILIAN_API_KEY');constBASE_URL='https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1';asyncfunctioncallImageEditAPI(image_url, prompt){constmessages = [ { role:"user", content: [ { image: image_url }, { text: prompt } ] } ];constpayload = { model:"qwen-image-edit", input: { messages }, parameters: { negative_prompt:"", watermark:false } };try{ constresponse =awaitfetch(`${BASE_URL}/services/aigc/multimodal-generation/generation`, { method:' OST', 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}`); returnnull; } constdata =awaitresponse.json(); returndata.output?.choices?.[0]?.message?.content??null; }catch(error) { console.error("Request error:", error.message); returnnull; }}Deno.serve(async(req)=>{try{ const{ image_url, prompt } =awaitreq.json(); if(!image_url || !prompt) { returnnewResponse(JSON.stringify({ error:"Missing image_url or prompt" }), { status:400, headers: { 'Content-Type':'application/json' } }); } constresult =awaitcallImageEditAPI(image_url, prompt); returnnewResponse(JSON.stringify({ message: result }), { headers: { 'Content-Type':'application/json', 'Connection':'keep-alive' } }); }catch(error) { console.error("Server error:", error); returnnewResponse(JSON.stringify({ error:"Internal server error" }), { status:500, headers: { 'Content-Type':'application/json' } }); }});
该函数接收图片 URL 与提示词，调用通义千问图像编辑模型，返回生成结果。
在 ADB Supabase 中，我们提供原生的 Edge FunctionSecrets 配置与集中管理能力，可将 AI API Token（如 DashScope/百炼）安全地存放在函数运行环境的密钥库中，通过 Deno.env.get 读取，绝不下发到客户端，也不进入代码仓库或构建产物。 原图上传 | 用户选择图片 → 前端上传到 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 的快感真正落地到真实应用。
| 
