当前位置: 首页 > news >正文

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

视频效果:
1

一、前言

在AI原生应用开发的时代,传统的后端架构正在被重新定义。本文将带你体验如何使用 Qoder、阿里云ADB Supabase 和通义千问图像编辑模型(Qwen Image Edit),快速搭建一个完整的 AI 手办生图 Flutter 移动端应用。全程无需自建传统后端,真实体验一次 Vibe Coding 的极速开发。

二、总体思路

  • 前端由 Qoder 根据需求自动生成 Flutter 代码,负责界面与交互。
  • 数据与对象存储由 ADB Supabase 提供,承担 BaaS 能力
  • AI 能力通过 ADB Supabase Edge Function 接入通义千问图像编辑模型,实现图片编辑。
  • 整体架构轻量、迭代快,适合从原型到上线的快速推进。
    image

三、环境与准备

  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,就能得到可运行的移动端应用。
2

可以参考本文源代码[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') 读取,避免将密钥硬编码或暴露到客户端。

七、总体流程及原理

image

八、测试与验证

提示词示例:绘制图中角色的1/7比例的商业化手办,写实风格,真实环境,手办放在电脑桌上,电脑屏幕里的内容为该手办的C4D建模过程,电脑屏幕旁放着印有原画的BANDAI风格的塑料玩具包装盒,电脑桌上还有制作手办的工具,如画笔,颜料,小刀等。
1

九、结语

通过 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

[8]https://github.com/fffzlfk/adb-supabase-flutter-demo

http://www.hskmm.com/?act=detail&tid=30873

相关文章:

  • 深入解析:站内信设计分析
  • 实验报告2
  • Agentic RAG对比传统RAG的优势
  • 实验二
  • linux系统查看磁盘过程
  • 2025-10-14 闲话
  • ftp多用户多目录配置
  • 芋道框架怎么样
  • 神级掩护软件!老板路过我电脑在“系统更新中”
  • 超真实“电脑崩溃模拟器”:蓝屏、重启、FBI警告一应俱全!
  • (20)ASP.NET Core2.2 EF创建模型(必需属性和可选属性、最大长度、并发标记、阴影属性) - 指南
  • (在构造函数中)调用super(props)的目的是什么?
  • 温故知新,机器人进化论,机器人分类与全球格局
  • Zemax:初学者的混合模式 - 指南
  • 西门子博图软件TIA V18使用PLCSIM Advanced V5.0进行仿真与其他程序进行通讯
  • MyEclipse 2017/2018 安装与破解 图文教程
  • 面向对象初级
  • 【文章目录】
  • Excel DDE 教學:即時資料交換的詳細指南 - 指南
  • 子网掩码基础知识
  • AI元人文构想基础理论体系研究
  • 微信机器人框架
  • 数论学习笔记
  • 实用指南:JavaWeb 课堂笔记 —— 24 AOP 面向切面编程
  • 微信机器人接口开发
  • 2025年7款与Jira数据同步的实用国产优秀项目管理软件对比
  • ESP8266 PMW使用的简单介绍
  • DevEco Testing全面解析:HarmonyOS测试框架与实战指南 - 教程
  • 本周第一单 多晶硅
  • 加州新规要求AI必须表明其AI身份