基于Qoder和AnalyticDB Supabase快速构建AI原生移动端APP-云原生数据仓库AnalyticDB(AnalyticDB)-阿里云帮助中心

本文介绍如何利用Qoder、云原生数据仓库 AnalyticDB PostgreSQL 版Supabase和通义千问图像编辑模型（Qwen Image Edit），快速搭建一个无需传统后端的AI手办生图Flutter应用。内容涵盖从前端代码自动生成、后端即服务（BaaS）配置，到AI模型集成，适合希望快速验证AI原生应用原型并实现敏捷开发的开发者。

概述

在AI原生应用开发的时代，传统的后端架构正在被重新定义。本方案采用轻量、敏捷的架构，通过组合以下核心技术，实现全程无需自建传统后端，即可快速构建AI手办生图Flutter应用。

前端：由Qoder根据需求自动生成Flutter代码，负责界面与交互。Qoder作为AI驱动的IDE Agent，能够根据需求自动生成高质量的Flutter代码。使用Flutter插件创建Empty Project后，您只需描述核心功能，配合几轮调试，就能得到可运行的移动端应用。
后端即服务（BaaS）：AnalyticDB Supabase提供数据存储、对象存储和边缘函数能力，简化了传统后端开发的复杂性。
AI能力集成：AnalyticDB Supabase Edge Function接入通义千问图像编辑模型，实现图片编辑。

前提条件

已创建Supabase项目。
已为云原生数据仓库AnalyticDB PostgreSQL版Supabase项目开通公网访问。
已获取阿里云百炼API Key，用于调用通义千问图像编辑模型。

操作步骤

步骤一：生成Flutter应用代码

环境准备。
1. 安装Qoder与Flutter插件。
2. 安装Flutter环境。
创建Flutter项目。
在VS Code中使用快捷键Command + Shift + P（Mac）或Ctrl + Shift + P（Windows/Linux），搜索“flutter”，选择Flutter: New Project。
使用Qoder生成代码。
向Qoder描述功能需求，并调试生成代码。本文源代码示例请参见adb-supabase-flutter-demo。
功能需求描述示例如下：
```
build a flutter image edit app, powered by supabase, using edge function invoke image model to edit image by uploaded by users
```

步骤二：配置AnalyticDB Supabase

配置API访问。
在项目根目录下新增.env文件，复制以下信息并将相关配置替换为实际值。配置信息获取请参见获取API Keys。
```
SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net
SUPABASE_SERVICE_KEY=xxxxxxxx
```

设计数据库表结构。

登录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()
);

创建对象存储桶。
1. 在Supabase Dashboard侧边栏，单击Storage。
2. 创建一个名为images的存储桶，用于存储用户上传的图片数据。

步骤三：集成AI服务

配置安全密钥。
说明
在AnalyticDB Supabase中，阿里云提供原生的Edge Function Secrets配置与集中管理能力，可将AI API Token（如DashScope和百炼）安全地存放在函数运行环境的密钥库中，通过Deno.env.get读取，避免硬编码或客户端暴露。
1. 在Supabase Dashboard侧边栏，单击Edge Function>Secrets。
2. 配置BAILIAN_API_KEY，其值为前提条件中获取的阿里云百炼API Key。

部署Edge Function。

在Supabase Dashboard侧边栏，单击Edge Function>Functions。
单击页面右上角的Deploy a new function，在下拉选项中选择Via Editor。

创建并部署名为wan的function。

代码示例如下，请根据网络访问方式替换BASE_URL。私网访问，请参见通过终端节点私网访问阿里云百炼平台；公网访问，请参见图像编辑-通义千问。

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) {
      return new Response(JSON.stringify({
        error: "Missing image_url or prompt"
      }), {
        status: 400,
        headers: {
          'Content-Type': 'application/json'
        }
      });
    }
    const result = await callImageEditAPI(image_url, prompt);
    return new Response(JSON.stringify({
      message: result
    }), {
      headers: {
        'Content-Type': 'application/json',
        'Connection': 'keep-alive'
      }
    });
  } catch (error) {
    console.error("Server error:", error);
    return new Response(JSON.stringify({
      error: "Internal server error"
    }), {
      status: 500,
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
});

工作流程

上传原图：用户选择图片后，前端将其上传至Supabase Storage的images存储桶，并生成签名URL。
调用编辑：前端将签名URL与编辑指令（prompt）发送给Edge Function。Edge Function利用BAILIAN_API_KEY调用通义千问图像编辑模型，处理图片并获取生成图的URL。
写入历史记录：前端将原始图片URL、编辑后图片URL及prompt等信息写入edited_images数据库表，作为历史记录。

测试与验证

依次执行以下命令，安装依赖并启动应用。
```
flutter pub get
flutter run
```

启动应用后，您可在设备或模拟器上体验AI手办生图功能。

提示词示例

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

测试示例	效果示例