Qoder + ADB Supabase ：5分鐘GET超火AI手辦生圖APP Detail - 數據庫,mysql,sql,資訊,後端數據庫知識分享者 Blog

視頻效果：

一、前言

在AI原生應用開發的時代，傳統的後端架構正在被重新定義。本文將帶你體驗如何使用 Qoder、阿里雲ADB Supabase 和通義千問圖像編輯模型（Qwen Image Edit），快速搭建一個完整的 AI 手辦生圖 Flutter 移動端應用。全程無需自建傳統後端，真實體驗一次 Vibe Coding 的極速開發。

二、總體思路

前端由 Qoder 根據需求自動生成 Flutter 代碼，負責界面與交互。
數據與對象存儲由 ADB Supabase 提供，承擔 BaaS 能力。
AI 能力通過 ADB Supabase Edge Function 接入通義千問圖像編輯模型，實現圖片編輯。
整體架構輕量、迭代快，適合從原型到上線的快速推進。

三、環境與準備

開通阿里雲 ADB Supabase[1] 實例（限時免費1C2G），為了能夠調用百鍊 API，您需要配置ADB Supabase 實例的 vpc 通過終端節點私網訪問阿里雲百鍊平台[2]（免費），或配置公網NAT網關[3]（收費）；
百鍊 DashScope API Key[4]（調用通義千問圖像編輯模型）；
安裝 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.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') 讀取，避免將密鑰硬編碼或暴露到客户端。

七、總體流程及原理

八、測試與驗證

提示詞示例：繪製圖中角色的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-t...

[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