只需5分钟，轻松打造超火AI手办生图APP：Qoder + ADB Supabase的神奇组合！

视频效果：

一、前言

在如今这个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代码

作为一款AI驱动的IDE助手，Qoder能够根据需求自动生成高质量的Flutter代码。创建一个空项目后，你只需描述所需的核心功能，再经过几轮调试和调校，就能得到一个可以运行的移动应用。

你可以参考本文的源代码[8]，在此基础上进行二次创作哦！

五、后端即服务 – ADB Supabase配置

5.1 获取API配置

首先，打开ADB Supabase的仪表盘页面，复制API_URL和API_KEY。接着，通过dotenv的方式把这些API信息配置到项目的根目录。

SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net 
SUPABASE_SERVICE_KEY=xxxxxxxx

5.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()
 );

5.3 对象存储桶创建

在ADB Supabase的Storage页面上，创建一个名为images的存储桶，用以存放用户上传的图片数据，这将作为图片文件的持久化存储解决方案。

六、AI服务集成 – Edge Function部署

6.1 Edge Function核心逻辑部署

打开ADB Supabase的仪表盘，在Edge Functions页面点击“Via Editor Deploy a new 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桶 → 生成签名URL
调用编辑	前端将签名URL和提示词传送给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

[2]https://help.aliyun.com/zh/model-studio/access-model-studio-through-privatelink

[3]https://vpc.console.aliyun.com/nat/cn-beijing/nats

[4]https://bailian.console.aliyun.com/

[5]https://qoder.com/

[6]https://marketplace.visualstudio.com/items

[7]https://docs.flutter.dev/install/with-vs-code

探索Flutter与Supabase的完美结合

想了解一下Flutter和Supabase的结合吗？不妨看看这个有趣的项目吧！只需点击这里，就能深入了解如何将这两者搭配在一起，打造出惊艳的应用。无论你是开发新手还是老手，这里都有值得你学习的内容哦！