案例介绍

本案例基于华为云码道 + Supabase MCP，快速开发学生管理系统，使用两种模式(前端页面和自然语言)操作Supabase平台上的项目。

案例内容

一、概述

1.1 案例介绍

华为云码道（CodeArts）代码智能体是基于智能生成、智能问答两大核心能力构建起一套全方位、多层次的智能开发体系。在智能生成方面，它能够依据开发者输入的需求描述，准确且高效地生成高质量代码；智能问答功能则如同开发者身边的专属技术顾问。

Supabase MCP 是一个由 Supabase 官方推出的工具，它就像一个“翻译官”，能让你的AI助手直接“看懂”并操作你在Supabase上的项目。简单来说，它通过模型上下文协议（Model Context Protocol，MCP）这个标准接口，把你的AI工具和Supabase平台连接了起来。连接之后，你就可以直接用自然语言给AI下指令，让它帮你完成各种数据库和项目管理任务。

本案例基于华为云码道 + Supabase MCP，快速开发学生管理系统，使用两种方式(界面和自然语言)，操作Supabase平台上的项目。

1.2 适用对象

• 企业
• 个人开发者
• 高校学生

1.3 案例时间

本案例总时长预计60分钟。

1.4 案例流程

说明：

1. 开发者下载安装华为云码道AI IDE;
2. 使用华为云码道配置Gitcode MCP Server；
3. 华为云码道创建学生管理系统，最终实现前端页面和自然语言两种模式操作Supabase平台上的数据库项目。

1.5 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）
华为云码道（CodeArts）代码智能体	体验版	免费

二、基础环境与资源准备

2.1 Windows版AI IDE华为云码道安装部署

参考案例《Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。

2.2 安装Python环境

参考案例《SKILL快速构建你的Java、Python和Node.js开发环境》一键配置Python开发环境。

三、Supabase MCP配置

3.1 获取Access Tokens

输入邮箱和密码，登录Supabase官网。

注意：若没有账号，请先注册账号。

点击右上角个人默认头像，点击Account preferences。

点击Access Tokens -> Generate new token。

创建完成后，请妥善保存token。

3.2 创建Supabase项目

创建项目之前，首先新建组织，点击New organization，创建组织。

输入组织名称，选择类型和付费方案，创建组织。

注意：类型选择个人，方案选择免费。

组织创建完成后，在当前组织下新建项目。输入项目名称、设置数据库密码，区域选择亚太，勾选Enable Data API和Enable automatic RLS。

项目创建成功。

3.3 配置Supabase MCP

打开华为云码道(CodeArts)代码智能体，点击右上角MCP图标，配置Supabase MCP。

点击MCP工具 -> 配置MCP服务器，mcp_settings.json中输入以下内容。

复制代码

{
  "mcpServers": {
    "supabase": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--access-token",
        "access-token"
      ]
    }
  }
}

注意：access-token替换成步骤“3.1 获取Access Tokens”中获取的token。

按下Ctrl+S，保存配置，Supabase MCP配置成功。

四、学生管理系统项目实践

开始项目实践之前，请确保本地已安装配置了Python开发环境。本地环境请提前自行安装，这里不再赘述讲解。

4.1 创建学生管理系统项目

在华为云码道对话框中，输入以下提示词：

复制代码

使用python+flask，构建学生管理系统，要求如下：
1、UI布局合理，界面美观；
2、使用本地json数据，字段包括ID、姓名、年龄、性别、电话、邮箱、专业。
3、实现对学生添加、编辑、删除等功能；
4、代码可直接运行。

几分钟后，华为云码道帮助我们生成了完整的代码。

注意：当发生文件变更时，我们点击全部接受。

浏览器输入：http://127.0.0.1:5000/，运行代码。

4.2 自然语言操作数据库

在对话框中输入以下提示词，查看当前项目信息。

复制代码

调用supabase mcp查看当前项目信息

华为云码道调用MCP，获取了项目信息。

在对话框中输入以下提示词，创建数据库表student。

复制代码

调用supabase mcp创建数据库表，字段包括ID、姓名、年龄、性别、电话、邮箱、专业，添加5条测试数据。

成功创建了数据库表并添加了5条测试数据。

输入以下提示词，查询数据库表。

复制代码

调用supabase mcp查询数据库表

可以看到刚添加的5条测试数据。

4.3 本地项目与Supabase数据库连接

完成本地项目与Supabase数据库连接之前，我们首先获取Supabase项目的url和秘钥。

在对话框中输入以下提示词，获取Supabase项目的url。

复制代码

调用supabase mcp的get_project_url工具获取url

注意：请妥善保存url，留作后面步骤使用。

在对话框中输入以下提示词，获取项目的访问秘钥。

复制代码

调用supabase mcp的get_publishable_keys工具获取key

成功获取了访问秘钥。

注意：请妥善保存访问秘钥(传统匿名秘钥)，留作后面步骤使用。

使用Supabase REST API连接Supabase服务。在对话框中输入以下提示词。

复制代码

在当前项目中，使用Supabase REST API连接到Supabase服务，不再使用本地json数据。
url：替换成您项目的url
秘钥：替换成您项目的访问秘钥

注意：url和访问秘钥要替换成您自己的。

几分钟后，华为云码道帮助我们完成了代码修改。

注意：文件发生变更时，点击全部接受。

浏览器输入：http://127.0.0.1:5000/，再次运行代码。

前端访问的数据来自Supabase平台上的数据库。

4.4 验证体验学生管理系统

我们在前端页面添加一名学生。

学生添加成功。

在华为云码道中，输入以下提示词，使用自然语言查询数据库。

复制代码

调用supabase mcp查询数据库表

可以看到Flask应用已经成功连接到Supabase，并且新增了一条测试记录。最终实现两种模式(前端页面和自然语言)操作Supabase平台上的数据库。

至此，云码无界 - 自然语言驱动的高效学生管理系统构建的案例已全部完成。

五、反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！