西餐的种类有很多，多以你都认识每一种西餐长啥样吗？

看到各种各样的西餐美食，是不是有些分不清了希望你不要晚上看到这篇文章 ，hhh

今天主要不是来和大家分享美食的，我们使用基于华为云强大的算力资源通过使用ModelArts来自动识别不同美食，并通过低代码开发平台AppCube部署开发小程序。通过部署美食小程序让我们可以更好的使用华为云强大的生态工具，助力开发者提高开发效率。

1. 首先你要了解的一些事

1.1 我们到底要做啥

通过使用华为云云上算力资源部署ModelArts+应用魔方AppCub+对象存储OBS来进行AI低代码开发演示如何使用华为云算力资源，通过一个西餐拍图识别小程序带大家进一步了解华为云AI产品，并进行一次测评。

1.2 什么是ModelArts？

ModelArts官网: https://console.huaweicloud.com/modelarts/?region=cn-north-4#/dashboard

通俗的说，就是我们在运行一些大型深度学习模型或者处理大量数据时对我们本地的主机性能要求较高时，我们不需要去购买昂贵的显卡和CPU，同样也可以通过使用ModelArts平台来达到同样的效果。

ModelArts是面向AI开发者的一站式开发平台，提供海量数据预处理及半自动化标注、大规模分布式训练、自动化模型生成及端-边-云模型按需部署能力，帮助用户快速创建和部署模型，管理全周期AI工作流。

“一站式”是指AI开发的各个环节，包括数据处理、算法开发、模型训练、模型部署都可以在ModelArts上完成。从技术上看，ModelArts底层支持各种异构计算资源，开发者可以根据需要灵活选择使用，而不需要关心底层的技术。同时，ModelArts支持Tensorflow、PyTorch、MindSpore等主流开源的AI开发框架，也支持开发者使用自研的算法框架，匹配您的使用习惯。

ModelArts的理念就是让AI开发变得更简单、更方便。

面向不同经验的AI开发者，提供便捷易用的使用流程。例如，面向业务开发者，不需关注模型或编码，可使用自动学习流程快速构建AI应用；面向AI初学者，不需关注模型开发，使用预置算法构建AI应用；面向AI工程师，提供多种开发环境，多种操作流程和模式，方便开发者编码扩展，快速构建模型及应用。

1.3 应用魔方AppCube是啥

应用魔方AppCube官网: https://console.huaweicloud.com/appcube/?agencyId=09b9d12f5200f3af1f9ac007869a4ffc&region=cn-north-4&locale=zh-cn#/home

简而言之，当我们在部署开发网站和应用的时候需要编写大量底层代码，也就是会需要重复“造轮子”，这样会极大降低我们的开效率，通过使用华为云应用魔方我们通过少量代码并进行拖拽图形就可以搭建我们的小程序应用，加大的降低了开发门槛，提高开发效率

应用魔方 AppCube是零代码和低代码应用开发平台，源于华为应用开发和数字化转型的实践，提供了云上无码化、低码化、支持多码化的应用开发模式，屏蔽了技术的复杂性，提升了企业开发的效率。同时提供应用资产的开发标准和微服务框架，助力企业不断沉淀可复制的套件，加速应用的定制，并通过开放的生态，实现套件资产的商业变现。应用魔方顾名思义就如同魔方一样，可以通过任意组合，排列各种模块化元素，创建功能各异的应用。

通过应用魔方 AppCube提供的界面、逻辑、对象等可视化编排工具，以“拖、拉、拽”的方式来快速构建应用，从而实现所见即所得的快速应用开发和构建。

1.4 对象存储OBS

对象存储官网: https://console.huaweicloud.com/console/?region=cn-north-4#/obs/manager/buckets

主要类似于一个高可用性在线存储平台，可以将我们需要的文件通过公网上传并实时浏览，解放双手

对象存储服务是一个基于对象的海量存储服务，为客户提供海量、安全、高可靠、低成本的数据存储能力。

OBS系统和单个桶都没有总数据容量和对象/文件数量的限制，为用户提供了超大存储容量的能力，适合存放任意类型的文件，适合普通用户、网站、企业和开发者使用。OBS是一项面向Internet访问的服务，提供了基于HTTP/HTTPS协议的Web服务接口，用户可以随时随地连接到Internet的电脑上，通过OBS管理控制台或各种OBS工具访问和管理存储在OBS中的数据。此外，OBS支持SDK和OBS API接口，可使用户方便管理自己存储在OBS上的数据，以及开发多种类型的上层业务应用。

华为云在全球多区域部署了OBS基础设施，具备高度的可扩展性和可靠性，用户可根据自身需要指定区域使用OBS，由此获得更快的访问速度和实惠的服务价格。

2. 准备工作

2.1 注册并实名认证华为云账号

华为云官网:https://www.huaweicloud.com/

在右上角注册登录，具体流程同一般网站，注册后进行实名认证

关于认证问题可以查看下面文章(相对简单且):https://support.huaweicloud.com/usermanual-account/account_auth_00001.html

2.2 ModelArts环境配置

登录ModelArts控制台:https://console.huaweicloud.com/modelarts/?region=cn-north-4#/dashboard

左侧找到全局配置，点击添加授权

进入新增授权页面，选择新增委托，勾选同意服务声明，最后点击创建即可（其它均保持 默认）

从 AI Gallery 访问需要订阅的模型，点击：AI Gallery_模型 (huaweicloud.com)

点击订阅

订阅成功后前往对应控制台，选华北-北京四

确定后会自动跳转到 ModelArts 控制台的 AI 应用订阅界面，查看到我们订阅的这个模 型，第一次需要等模型同步完成后才能继续使用，约1分钟左右

进入在线服务配置页面，配置基本内容

名称：服务的名称，根据你偏好设置或保持默认

计算节点规格：运行服务所用的计算资源（CPU/GPU），选择ModelArts 提供的免费算力规格[限时免费]

点击查看服务详情，等待部署完成，大约需要5-10分钟。

至此 ModelArts 这边的服务部署已经完成，接下来我们去 AppCube 里进行API调用对接了。

2.3 AppCube环境配置

打开AppCube官方网站:https://console.huaweicloud.com/appcube/?region=cn-north-4#/home

点击免费试用

点击“旧版入口”

点击"轻应用"

创建空白应用

示例如下

创建完成后会进入应用编辑页面，点击左侧的第四个“连接器”菜单，在“AI”分类下找 到 ModelArts 选项，然后点击右侧的+号，新建一个连接器。

填信息

访问秘钥ID：第一章“获取访问秘钥”步骤中下载的excel中Access Key Id字段对应 的值

访问秘钥：第一章“获取访问秘钥” 步骤中下载的excel中Secret Access Key字段对 应的值

区域：请选择“华北-北京四”

项目ID：ModelArts 在线服务页面中的服务ID

2.4 配置对象存储OBS服务

对象存储OBS官网:https://console.huaweicloud.com/console/?region=cn-north-4&locale=zh-cn#/obs/manager/buckets

OBS的基本存储单位是“桶”，所以我们先创建一个OBS桶，控制台右侧点击红色“创建 桶”按钮：

参考上方 ModelArts 连接器创建流程，新建一个OBS服务连接器。 找到OBS连接器选项，点击“+”新建OBS连接器

2.5 获取访问秘钥

登录华为云账号后，点击右上角的用户名，在下拉菜单中选择“我的凭证”，进入我的凭 证页面后，选择左侧的“访问秘钥”菜单，然后点击“新增访问秘钥”，按要求输入相关 信息，有时候会有一个弹出框进行短信验证码认证，认证成功后即可下载秘钥信息。

3. AppCube 页面开发

3.1 创建脚本

在 APPCube 应用编辑页面，如下图，回到页面编辑模块，并参照图中所示新建对应的文件夹，用于后续存放不同用处的页面文件

3.2 创建标准页面

参考创建脚本，点击 page 文件夹右侧+号，选择标准页面

拖动“上传”组件到箭头指向位置

配置上传组件属性：双击刚刚拖拽的上传组件，可以看到右侧的可配置选项

存储：点击最右侧设置按钮，在弹框中选择创建的OBS连接器

新建模型：点击下方的模型视图，切换到当前页面，点击新建模型按钮

设置模型名称为：data，然后点击“下一步”

再点击右上方的“新增节点”

双击红框位置，输入名称：postData

再在 postData 下，依次新增节点 data2、data3、data4、data5，并仿照 data1 新增 两个节点，分别name、num，字段类型不变。 在data下，新增节点 isShow，字段类型为 Bool 在data下，新增节点 image，字段类型不变 效果如下图所示：（其中 data3、data4、data5 展开后，格式与 data1 类似）

然后一直点击下一步，完成创建即可，完成后回到设计视图，为上传组件绑定模型，点击 右侧属性绑定的设置按钮，绑定 image，点击确定

完成后，从左侧拖动五个“输入框”组件到“上传”组件下方

然后依次为每个输入框组件绑定标签： 点击属性值绑定的右侧+按钮，选择下拉框中的“标签”后点击右侧设置（齿轮）按钮。

接下来，仿照输入第一个输入框，依次为其他四个输入框组件绑定标签，绑定字段依次为 data2、data3、data4、data5 的 name。

参考上方，在右侧“数据绑定”处给五个输入框依次绑定 data1、…、data5 的 num

在右侧配置处，给五个输入框依次开启“禁用”

给五个输入框依次绑定“隐藏”属性为 isShow（参考上方的“标签”绑定

创建“上传成功事件”：双击上传组件上，点击右侧 “事件”菜单，点击“操作成功”右 侧+号，进入代码编辑页面：

创建数据改变事件：

创建页面加载事件：在下方选择“设计视图”之后，在右侧为页面添加“加载”事件

依次为输入框组件，添加样式类

3.3 试运行识别功能

进入预览界面

预览效果

上传且调用成功后（调用时，ModelArts必须在运行状态）：

我们尝试调用一张照片

识别结果如图所示，还是很准确的

3.4 发布程序

当程序编辑完成后，点击左下角编译

编译通过发布程序

选择对应发布类型就能成功发布小程序

4 . 体验收获

通过使用华为云云上算力资源部署ModelArts+应用魔方AppCub+对象存储OBS来进行AI低代码开发演示如何使用华为云算力资源，通过一个西餐拍图识别小程序让大家进一步了解华为云AI产品。华为云的AI产品能力很强大，调用也很方便，通过低代码平台，极大的增加了开发效率，但是低代码不是无代码，也需要开发者掌握一定的代码基础。

【万众瞩目的低代码AI应用开发实战营来啦！开启实战营之旅（免费体验），写体验文章，赢开发者大礼包！】有奖征文火热进行中：https://bbs.huaweicloud.com/blogs/384262