最新案例动态，请查阅【案例共创】基于MaaS结合开发者空间Astro低代码平台完成学生成绩评价系统。小伙伴们快来领取华为开发者空间进行实操吧！
本案例由开发者：风吹雨提供
一、概述
1. 案例介绍
通过实际操作，了解如何利用 Astro 低代码平台开发应用。在这个过程中，学习从模型集成、界面操作、页面布置到逻辑实现以及应用打包一系列关键步骤，从而掌握 Astro 低代码平台的基本使用方法及与大模型的结合，体验其在应用开发中的优势。
开发者空间Astro低代码开发平台通过平台提供的界面、逻辑、对象等可视化编排工具，以“拖、拉、拽”的方式来快速构建应用，从而实现所见即所得的应用开发构建体验。
华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台云主机、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等华为各项根技术的开发工具资源，并提供配套案例指导开发者从开发编码到应用调测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。
ModelArts Studio（MaaS）平台是华为云推出的一款大模型即服务平台，可以一站式的对业界主流开源大模型进行部署托管，同时开放大模型 API 服务，可以结合业界主流 Agent 开发框架，轻松构建 AI Agent 应用。
2. 适用对象
3. 案例时间
本案例总时长预计 90 分钟。
4. 案例流程
说明：
领取华为开发者空间，登录华为开发者空间-低代码应用开发平台；
新建低代码应用，进入 Astro 轻应用服务控制台主页，开发应用。
二、环境准备
1. 领取注册开发者空间
开发者空间是开发者专属的云上成长空间，预置免费华为根技术工具和资源，为开发者提供从学习、开发到部署的全旅程支持。
点击免费领取，立即领取开发者空间。
注意：领取开发者空间，需要登录华为账号，如果没有，请注册华为账号并完成实名认证。
2. 领取百万 tokens 代金券
参考案例《Versatile Agent中自定义接入大模型配置华为云Maas指导》中的“一、 领取”章节内容，领取华为开发者空间百万token代金券福利，购买 ModelArts Studio DeepSeek-V3 轻量体验包（¥3.50）。开通商用模型服务，最后获取模型名称和 API Key 的参数值。
注意：记录 API Key、模型名称留作后面步骤使用。
三、学生成绩评价系统构建
1. 新建低代码应用
点击新建低代码应用：
点击标准应用，点击确定：
输入命名空间：
输入应用名称：score，标签：人工智能，分类：AI，点击确认按钮。
点击新建页面，弹窗中输入标签：学生分数统计，名称：statistics：
点击上一步添加按钮：
2. 数据对象建立
点击数据->对象旁边的“＋”：
输入对象名称：学生成绩，唯一标识：StudentScore
点击确定后，点击以下图标，对学生成绩对象进行编辑：
添加语文字段：
显示名称：语文，唯一标识：yuwen，字段类型：数字，数据长度：10，小数位数：1
添加数学字段：
添加外语字段：
添加历史字段：
添加生物字段：
添加化学字段：
添加建议字段：
点击数据->结构体旁边的“＋”，创建结构体：AImessage
编辑添加结构体 AImessage，用于后续大模型 AI 调用。
保存结构体详情：
3. 学生分数统计界面开发
拖入表单：
表单与对象模型建立连接：
新建相关模型 scoreData：
配置相关模型：
完成模型新增：
选择相关模型(只绑定模型)：
拖入表单标题：学生成绩评估。
配置姓名输入框：
姓名字段与数据模型中的 name 绑定：
配置语文成绩输入框：
语文成绩与数据模型中 Astro_Project_yuwen_CST 绑定：
其他科目配置方式及绑定方式和语文类似：
拖入容器用于容纳提交按钮：
拖入按钮组件：
为按钮添加事件：
添加自定义 JS 代码并保存：
JS 代码需要自行编写，可参考下面，该代码包含 json 数据处理，大模型提示词生成，新界面调用等。
完整代码如下：
// 序列化表单数据var model = context.$model.ref("scoreData").getData();var modelCopy = JSON.parse(JSON.stringify(model));
// 处理非字符串字段Object.keys(modelCopy).forEach(item => { if (modelCopy[item] && typeof modelCopy[item] !== "string") { modelCopy[item] = JSON.stringify(modelCopy[item]); }});
// 提取问题字段值var questionCodes = [];var subjects = ["name","yuwen", "shuxue", "waiyu", "lishi", "shengwu", "huaxue"];
subjects.forEach(function(subject) { var fieldName = "Astro_Project__" + subject + "__CST"; questionCodes.push(modelCopy[fieldName] || "");});
// 构建提示文本var suggestionText = `学生${questionCodes[0]}的各科成绩如下：- 语文：${questionCodes[1]}/150分- 数学：${questionCodes[2]}/150分 - 外语：${questionCodes[3]}/150分- 历史：${questionCodes[4]}/100分- 生物：${questionCodes[5]}/100分- 化学：${questionCodes[6]}/100分
请根据以上成绩情况分析该学生的学习特点，并给出针对性的学习建议，200字以内。`.replace(/"/g, "'");
//modelCopy.Astro_Test__questionCode7__CST = suggestionText;// 初始化Flowvar _flow = context.flow("Astro_Project__process");// 调用AI服务获取建议try { // 提示信息 context.$message.info("信息分析中，正在生成建议。。。。。。");
const resp = await _flow.run({ input: suggestionText }); const reader = resp.body.getReader(); const decoder = new TextDecoder();
let buffer = ''; let msg = '';
while (true) { const { done, value } = await reader.read(); if (done) break;
buffer += decoder.decode(value); const lines = buffer.split('\n');
// 保留最后一行（可能不完整） buffer = lines.pop() || '';
for (const line of lines) { if (!line.trim()) continue;
try { const jsonStr = line.startsWith('data: ') ? line.substring(6) : line; if (jsonStr.trim() === '[DONE]') continue;
const obj = JSON.parse(jsonStr); const newMsg = obj?.choices[0]?.delta?.content || ''; if (newMsg) msg += newMsg; } catch (err) { console.warn('解析JSON失败，保留到下一轮处理:', err.message); buffer = line + '\n' + buffer; } } } // 最终保存结果 modelCopy.Astro_Project__suggestions__CST = msg; context.$model.ref("scoreData").setData(modelCopy);
// 提交数据 const saveResult = await context.$model.ref("scoreData").save(); if (saveResult.resCode == 0) { const recordId = saveResult.result[0]?.id; if (recordId) { context.$page.loadStdPage('Astro_Project__result', "recordId=" + recordId); // 成功消息 context.$message.success('生成成功'); } }} catch (error) { console.error("AI服务调用失败:", error); // 可以添加错误处理逻辑，如显示错误信息}
复制代码
注意：代码中涉及到的命名空间(Astro_Project)，需要修改为您自己项目工程的命名空间。
4. 集成大模型
点击集成->连接器实例->MaaS 云平台，点击“＋”添加大模型：
填写基本信息：
标签：AI，名称：Score_AI，模型名称和 API Key。
注意：模型名称和 API Key 要替换成步骤“二、 环境准备中的 2.领取百万 tokens 代金券”获取的模型名称和 API Key。
测试大模型：
5. 建立服务编排
创建新的服务编排：
点击逻辑->编排旁边的“＋”，添加编排服务，标签为 process
配置输入输出变量：
点击全局上下文->变量旁边的“＋”，配置输入输出变量。
配置对象变量：
配置出参、入参：
拖入赋值图标，添加连接线：
赋值模块配置：
messages[0].role 的值为 user。
大模型连接器配置：
配置相关大模型参数：
按照以下顺序保存：
6. 学生成绩结果页面开发
新建结果页：
拖入表单：
同样引入模型：
模型名称：resultForm，来源：对象，点击下一步。
选择学生成绩对象，勾选所有字段：
选择只绑定模型：
拖入多行输入框，标签：根据您的成绩，提供以下建议，行数：15 行。
多行输入框数据绑定，绑定 Astro_Project_suggestions_CST 字段。
多行输入框事件绑定：
点击事件->加载旁边的“＋”，添加事件绑定。
编写 JS 代码并保存：
JS 完整代码如下：
// json化方法function parseJSON(str) { var flag = false; try { JSON.parse(str); flag = true } catch (err) { flag = false; } return flag;}
console.log('start')
var recordId = context.$page.params.recordId;if (!recordId) return;console.log('middle')
try { // 获取Object对象 var _object = context.object('Astro_Project__StudentScore__CST'); console.log(_object)
// 查询满足条件数据 var _condition = { conjunction: 'AND', conditions: [{ field: 'id', operator: 'eq', value: recordId }] };
const res = await _object.query(_condition);
if (res.resCode !== '0' || !res.result || res.result.length === 0) return;
const data = res.result[0];
// 解析JSON字符串字段 Object.keys(data).forEach(item => { if (data[item] && parseJSON(data[item])) { try { const parsed = JSON.parse(data[item]); data[item] = parsed; } catch (e) { // 不是有效JSON，保持原值 } } }); $model.ref("resultForm").setData(data);} catch (err) { console.error("数据查询或处理失败:", err);}
复制代码
注意：代码中涉及到的命名空间(Astro_Project)，需要修改为您自己项目工程的命名空间。
7. 测试体验学生成绩评价系统
点击以下预览图标：
输入相关内容：
点击提交按钮后，大模型会对数据进行分析并返回相关建议：
至此，基于 MaaS 结合开发者空间 Astro 低代码平台完成学生成绩评价系统的案例已全部完成。
评论