一、概述

1. 案例介绍

开发者空间Astro低代码开发平台通过平台提供的界面、逻辑、对象等可视化编排工具，以“拖、拉、拽”的方式来快速构建应用，从而实现所见即所得的应用开发构建体验。

本案例开发一个大学生就业问卷调查应用，针对往届生和应届生设置问题，并根据问卷调查的结果，基于人工智能大模型DeepSeek智能输出就业择业建议。

通过实际操作，让大家深入了解如何利用Astro低代码平台开发应用。在这个过程中，大家将学习到从模型集成、界面操作、页面布置到逻辑实现以及应用打包一系列关键步骤，从而掌握Astro低代码平台的基本使用方法及于大模型的结合，体验其在应用开发中的优势。

华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台云主机、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等华为各项根技术的开发工具资源，并提供配套案例指导开发者 从开发编码到应用调测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。

2. 适用对象

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

3. 案例时间

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

4. 案例流程

说明：

  1. 领取华为开发者空间，登录华为开发者空间-低代码应用开发平台；
  2. 新建低代码应用，进入Astro轻应用服务控制台主页，开发应用；

5. 资源总览

本案例预计花费0元。

资源名称 规格 单价（元） 时长（分钟）
MaaS 平台商用模型 DeepSeek-R1 轻量体验包（¥7.00）/ DeepSeek-V3 轻量体验包（¥3.50） 领券免费 90
华为开发者空间 - 低代码应用开发平台 系统标配 免费 90

体验完整案例请点这里👉️👉️👉️基于MaaS结合开发者空间Astro低代码平台完成求职咨询

二、华为开发者空间-低代码应用开发平台

1. 登录华为开发者空间-低代码应用开发平台

华为开发者空间-低代码应用开发平台是华为云推出的一款可视化应用开发平台，旨在通过"拖拽式"组件和模板化设计，降低开发门槛，提升企业数字化应用构建效率。平台主要特点包括：

  • 可视化开发：通过图形化界面和预置组件，无需编写复杂代码即可快速搭建应用；
  • 全场景支持：覆盖Web、移动端、大屏等多终端应用开发；
  • 高效集成：内置连接器可快速对接华为云及其他主流企业系统；
  • 智能辅助：提供AI辅助开发能力，如智能表单生成、流程自动化等；
  • 企业级能力：具备权限管理、数据安全、高可用等企业所需特性。

Astro平台特别适合业务人员与开发者协同创新，能大幅缩短应用交付周期，典型适用于OA审批、数据看板、轻量级业务系统等场景。

登录华为开发者空间，在左侧菜单列表选择华为开发者空间 -> 开发平台 -> Astro 低代码开发，进入华为开发者空间-低代码应用开发平台。

2. 创建低代码应用

  1. 华为开发者空间-低代码应用开发平台页面点击新建低代码应用，在弹出的新建低代码应用对话框中，选择标准应用，点击确定按钮。
注：命名空间为租户数据唯一标识，为免重复，首次创建或使用工程时需定义命名空间。请务必慎重，一旦定义，不可修改，推荐使用公司前缀。本案例中使用 Astro_Test作为命名空间。

  1. 在右侧弹出的新建空白应用配置页签中，配置应用名称和标签均为Job。

  2. 点击右下角确认按钮，平台会自动打开一个新的页面：Astro轻应用服务控制台。

    注：在点击确认后，在Astro轻应用管理页会同时新增一条刚才创建的名称为Astro_Test__Job的应用，点击编辑同样可以进入Astro轻应用服务控制台。

3. 添加调查表记录对象和全局结构体

  1. 创建调查表记录对象：进入问卷调查项目应用设计器界面，在左侧导航栏中，选择“数据”；单击对象后的“新建对象”图标，进入创建新对象页面；设置对象基本信息：填写对象名称为“智能就业建议报告”，唯一标识为“suggestion”，单击“确定”按钮。

  2. 创建字段
    2.1 单击对象中的编辑图标，进入对象详情页：

    2.2 点击“添加”，添加字段：显示名称“受访者姓名”，唯一标识：“Label”，点击字段类型，选择“文本”类型，点击“确定”：

    2.3 相同的操作，添加显示名称“智能就业建议”，唯一标识“suggestion”，类型“文本区”：

    2.4 批量创建。剩下的字段使用批量创建的方式，单击批量创建后的向下箭头图标，选择“下载模板”，将模板下载到本地：

    2.5 编辑“import-fields-template .xlsm”模版，设置字段信息：

    2.6 返回对象详情页面，在字段页签，选择“批量创建” - “批量导入字段”：

    • 选择已创建的字段模板，单击“确定”：
    • 导入完成后，在字段列表中，可查看到导入的数据：

  3. 创建全局结构体：
    3.1 点击左侧菜单栏数据，选择结构体新增，输入名称和唯一标识（可自定义，这里选择message为例）:

    创建结构体：

    创建完成后点击结构，选择结构体编辑按钮，新增role和content，保存：

    添加的字段：

4. 开发调查问卷页面

  1. 创建调查问卷页面：在新版应用设计器的“界面”中，单击页面后的添加图标，设置页面标签为“调查问卷”、名称为“questionnaires”，单击“添加”，即可创建一个标准页面：

  2. 添加表单：从左侧“组件”区域，将“表单”组件拖拽到页面中间，元数据表单配置向导点击“取消”：

  3. 设置表单属性：如设置布局为宽“800px”和高“1024px”、居中对齐，设置字体大小为“16px”、行高为“23”等。（可自定义）

  4. 设置数据绑定
    4.1 点击数据绑定后的“设置”图标，点击“新增模型”：

    4.2 设置模型名称为“formData”，来源选择“对象”，单击“下一步”

    4.3 “选择对象”下拉框选择“智能就业建议报告 (xxx__suggestion__CST)”，“选择字段”勾选全部字段，单击“下一步”：

    单击“确定”：

    4.4 勾选“formData”，单击“确定”：

    注：在弹出框中，选择“只绑定模型”

  5. 添加大标题。
    5.1 从左侧“组件”区域，将“标题”组件拖拽到表单中间：

    在配置使用组件前，可以将光标放在每个组件上，单击组件右上角的问号图标，可查看组件的详细介绍：

    5.2 设置标题属性：点击标题，在右侧菜单栏点击基本属性，设置标题内容为“调查问卷应用”：

    点击下方字体，如设置字体颜色为“#147AEC”、字体大小为“28px”、上下间距为“50”、位置为“center”。（可自定义）

    当前配置会生成对应的css样式，可以查看高级设置（无具体操作，供查看学习使用）。

  6. 添加图片
    6.1 从左侧“组件”区域，将“图片”组件拖拽到标题下方：

    6.2 设置图片属性：单击“图片地址”后的“选择图片”图标，在选择图片界面，选中一张图片，单击“确定”，或者单击“上传图片”按钮，从本地电脑中选择一张图片上传即可：

    6.3 设置图片宽度为“100%”

    注：选择或上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，图片大小不超过1MB

  7. 参考步骤5，设置小标题，设置标题内容为“为了研究大学生就业形势，探讨如何完善各项指导，特做此次调查，希望您能把真实想法告诉我们！”（可自定义），标题类型为“Hending2”；

  8. 添加问题1：
    8.1在标准页面设计界面，从“基本组件 > 表单”中，拖拽“输入框”组件至表单工作区域：

    8.2设置输入框属性：点击输入框，点击右侧菜单栏“数据绑定”中的“设置”图标，勾选“xxx__Label__CST”，单击“确定”：

    8.3点击基本属性，设置标签内容输入“1，您的姓名是？”，在表单校验中，打开必填开关，设置必填错误信息为“请您输入姓名”：

  9. 添加问题2：
    9.1 在标准页面设计界面，从“基本组件 - 表单”中，拖拽“单选按钮”组件至表单工作区域。

    9.2 设置单选按钮属性。设置标签为“2，您的性别是？”，选项为“男 - 男”和“女 - 女”，在表单校验中，打开必填开关，设置必填错误信息为“请您选择性别”。

    9.3 点击数据绑定中的设置图标，勾选“xxx__questionCode1__CST”，单击“确定”。

  10. 添加问题3：仿照前面步骤，进行问题3设置：
    10.1 在标准页面设计界面，从“基本组件 - 表单”中，拖拽“下拉框”组件至表单工作区域（问题2下方）。
    10.2 设置下拉框属性：设置标签为“3、您的专业类型是？”，配置选项“机械类、电子信息类、计算机类、土木类、其他”，表单校验打开“必填”，设置必填错误信息为“请选择您的专业”。
    10.3 单击“数据绑定”后的“设置”图标，勾选“xxx__questionCode2__CST”，单击“确定”。

  11. 添加问题4：仿照前面步骤，进行问题4设置：
    11.1 在标准页面设计界面，从“基本组件 - 表单”中，拖拽“单选按钮”组件至页面工作区域（问题3下方）。
    11.2 设置单选按钮属性。设置排列方式为“横排”，标签为“4、你进入毕业时期的去向？”，选项为“求职、考研、出国、创业、其他”，在表单校验中，打开必填开关，设置必填错误信息为“请选择毕业时期的去向”。
    11.3 点击数据绑定中的设置图标，勾选“xxx__questionCode3__CST”，单击“确定”。

  12. 添加问题5：仿照前面步骤，进行问题5设置：
    12.1 在标准页面设计界面，从“基本组件 - 表单”中，拖拽“复选按钮”组件至表单工作区域（问题4下方）。
    12.2 设置复选按钮属性。设置排列方式为“横排”，标签为“5、就业时，下列哪些因素对你有影响？”，选项为“薪酬、保险福利、工作氛围环境、晋升空间、其他”，在表单校验中，打开必填开关，设置必填错误信息为“请选择就业因素影响”。
    12.3 点击数据绑定中的设置图标，勾选“xxx__questionCode4__CST”，单击“确定”。

  13. 添加问题6：仿照前面步骤，进行问题6设置：
    13.1 在标准页面设计界面，从“基本组件 > 表单”中，拖拽“评分”组件至页面工作区域（问题5下方）。
    13.2 设置评分属性：设置标签为“6、您的专业对您找工作的帮助评分？”，星星总数输入“10”
    13.3 点击数据绑定中的设置图标，勾选“xxx__questionCode5__CST”，单击“确定”。

  14. 添加问题7：仿照前面步骤，进行问题7设置：
    14.1 在标准页面设计界面，从“基本组件 - 表单”中，拖拽“多行输入框”组件至表单工作区域（问题6下方）。
    14.2 设置多行输入框属性：设置标签为“7、在日常实习，工作，生活中希望提升哪些方面的能力？”，打开“自适应高度”开关，设置最小行数为“2”、最大行数为“10”以及最大字符长度为“500”。
    14.3 点击数据绑定中的设置图标，勾选“xxx__questionCode6__CST”，单击“确定”。

（说明：可以根据实际需求修改、增加就业相关问题，让问卷内容更加丰富、实际，也可以让最后输出的就业报告更加有针对性）

  1. 添加容器：在标准页面设计界面，从“基本组件 > 布局”中，拖拽“容器”组件至表单工作区域（问题7下方）。

  2. 添加提交按钮：在标准页面设计界面，从“基本组件 > 基本”中，拖拽“按钮”组件至容器区域：
    16.1 设置按钮属性：设置显示名称为“提交”，大小选择“默认”。

16.2设置按钮事件：
首先切换到“事件”标签，单击加号，在“添加动作 > 自定义动作（名称可自定义） > 动作名称”代码区域中，输入代码，单击“保存”。

代码部分如下：
其中代码中“formData”表示表单的对象模型名称，Astro_Test__ds是绑定的MaaS大模型的实例连接器在后面会进行配置，Astro_Test__xxx_xxx的字段名前面的部分需要更改为用户自己的命名空间。

// 表单校验
var _form = context.$component.form;
var validFlag = _form.formValidateUnPromise();
if (!validFlag) return false;

// 序列化表单数据
var model = context.$model.ref("formData").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 = [];
for (var i = 1; i <= 6; i++) {
    var fieldName = "Astro_Test__questionCode" + i + "__CST";
    questionCodes.push(modelCopy[fieldName] || "");
}

// 构建提示文本
var suggestionText = `该学生性别为 ${questionCodes[0]}，专业是 ${questionCodes[1]}，毕业时期去向为 ${questionCodes[2]}，就业时主要受到以下因素影响：${questionCodes[3]}，其专业对于找工作时的自我评分为 ${questionCodes[4]} 分，日常实习工作中希望得到以下方面的提升：${questionCodes[5]}。请根据以上信息给出该学生的职业规划建议，200字以内。`.replace(/"/g, "'");

modelCopy.Astro_Test__questionCode7__CST = suggestionText;
// 初始化Flow
var _flow = context.flow("Astro_Test__ds");
// 调用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_Test__suggestion__CST = msg;
    context.$model.ref("formData").setData(modelCopy);

    // 提交数据
    const saveResult = await context.$model.ref("formData").save();
    if (saveResult.resCode == 0) {
        const recordId = saveResult.result[0]?.id;
        if (recordId) {
            context.$page.loadStdPage('Astro_Test__suggestion', "recordId=" + recordId);
            // 成功消息
            context.$message.success('生成成功');
        }
    }
} catch (error) {
    console.error("AI服务调用失败:", error);
    // 可以添加错误处理逻辑，如显示错误信息
}

效果如下：

16.3 大模型领取：
切换到开发者空间首页，参与活动“百万商用服务tokens免费领！”活动，按照使用说明进行服务开通：

活动页面：

16.4 开通完成后，进行大模型的接入：
模型部署页：部署页面，点击调用按钮，进入调用页面，这里我们提前保存好Api地址和模型名称，点击API调用指南：

这里尤其要注意创建apikey，用于后续调用deepseek服务。
注意！！创建好API Key之后，点击后面的复制按钮，妥善保存，若未复制保存，后续无法重新复制获取。
在这里我们可以看到通过接口调用deepseek的请求消息结构，以及各个参数的作用（截图仅展示请求参数，返回参数在操作中下拉即可阅读）。根据业务需求，此处我们仅需要messages（请求内容，后续自定义）

16.5 将外部接口集成zero并编写编排流程:
在调查问卷应用中，点击左侧集成 - 连接器实例 - 大模型 - MaaS云平台：

点击右上角加号，创建自定义连接器，输入标“标签”（这里为ds，可自定义）、“名称”（这里填入MaaS，可自定义）、“模型名称”（前步保存的模型名称）和“APIKey”（前步保存的apiKey）；点击保存：

添加结果：

测试连通性，点击“测试”，在弹出框中输入测试内容后，点击测试等待返回结果，正常返回说明添加成功：

16.6 添加逻辑：点击左侧逻辑 - 编排 - 新建编排，名称填ds，模板类型默认，点击添加：
添加所需变量：

点击右侧“全局上下文”，新增变量：
创建变量 - input，类型为文本：

创建变量 - output，类型为任意：

创建对象变量 - messages，使用步骤3中创建的全局结构体，选择数组：

添加所需图元：
点击画布上的开始图元，点击参数，将刚才创建的变量分别拖进入参和出参：

选择左侧赋值图元，拖入界面，并将开始图元与赋值图元连接：

选择赋值图元，点击赋值按钮，将变量赋值，第一行为刚才的全局结构体变量名称“messages[0].role”，我们将值设置为"user"(要用英文双引号)，第二行为全局结构体变量名称“messages[0].content”，变量值可直接将变量中的input拖入：

左侧选择连接器 - 自定义连接器，选择前面步骤我们创建的连接器。将其拖拽进页面，并将赋值图元与连接图元连接：

点击连接器图元，点击基本信息，选中步骤16.4中创建的大模型连接器：

选择连接器按钮，将连接器的入参message为对象变量message拖拽入，输出参数result为变量output拖拽：

点击保存，启用，运行测试：

输入参数{“input”:“介绍一下南京100字以内”}，测试看是否成功，参数内容可以自定义，最好简单一些防止运行时间过久：

5. 开发规划建议页面

  1. 点击导航栏界面，选择+号新建页面：

  2. 输入标签"规划建议"和名称"suggestion"，点击添加：

  3. 仿照调查问卷格式，进行页面设置，从左侧组件栏将表单组件拖拽至页面，元数据表单配置向导点击取消，属性设置布局：宽800px，高1024px，居中。（设置可根据自己需要自定义）：

  4. 点击属性 - 数据绑定 - 新增模型：

    按前述步骤设置模型名称为"form0"，选择来源为对象：

    点击下一步，选择"智能就业报告"并勾选所有字段：

    点击下一步，点击确定：

    选择刚创建好的模型，点击确定，选择只绑定模型：

  5. 参考章节4中的第6小节，添加图片；

  6. 参考章节4中的第14小节，添加多行输入框：
    标签 - 根据您提供的信息，有如下建议；
    高度 - 自适应高度，其余参考下图；
    数据绑定 - form0.XXX__suggestion__CST（XXX为个人设置的命名空间）

  7. 点击页面，创建自定义脚本，写入以下代码，其中“Astro_Test_xx_xx”类的字段需更换为自身的命名空间：

// json化方法
function parseJSON(str) {
    var flag = false;
    try {
        JSON.parse(str);
        flag = true
    } catch (err) {
        flag = false;
    }
    return flag;
}

var recordId = context.$page.params.recordId;
if (!recordId) return;

try {
    // 获取Object对象
    var _object = context.object('Astro_Test__suggestion__CST');

    // 查询满足条件数据
    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("form0").setData(data);
} catch (err) {
    console.error("数据查询或处理失败:", err);
}

6. 页面效果测试

  1. 预览填报界面，进行功能调试、测试验证：点击页面左上角的预览图标，然后填写调查问卷应用必填参数；
  2. 单击“提交”按钮;
  3. 如果对象中保存了调查问卷的数据，则测试提交功能成功;
  4. 第二步提交完成时会跳转建议页面；

    如果建议正确返回展示，说明页面联调成功。

7. 打包部署应用

因打包部署xuyao开通专业版，这里就不再演示；有兴趣可参考官方指导文档：https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9012.html

三、释放资源

1. 大模型Token消耗

在调用模型推理服务的过程中，输入内容首先会被分词（tokenize），转换为模型可识别的Token。在调用MaaS预置服务时，将根据实际使用的Tokens数量进行计费，且暂不支持关闭商用服务，开发和使用中请注意资源消耗。

# 低代码 # 人工智能
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

基于 TensorFlow 的 PyTorch-MNIST 手写体识别系统开发案例

avatar 华为开发者空间
cover

免费用鲲鹏资源！华为开发者空间实操：DevKit Java 性能分析，新手也能上手

avatar 华为开发者空间
cover

基于华为开发者空间的云端JVM服务远程调试：CodeArts IDE配置指南

avatar 华为开发者空间