我要投稿

Qoder + ADB Supabase ：5分钟GET超火AI手办生图APP

发布日期：2025-10-13 18:06:30 浏览次数： 1525

作者：阿里云开发者

微信搜一搜，关注“阿里云开发者”

视频效果：

一、前言

在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.netSUPABASE_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#df2c7d06b6752?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