我没有写一行代码，10分钟做了一个无人机管理大屏，华为云的Astro低代码平台真的香！

绝地灬酷狼 2023-10-10 17:43 3阅读 0赞

公司是做无人机系统的，现在需要做一个大屏，能够直观展示出无人机的使用情况，比较了市面上的大屏解决方案，我觉得华为云的Astro轻应用非常适用我的需求，本文会详细的介绍我是如何利用华为云Astro构建一个简单的无人机管理大屏。

### 一、什么是华为云Astro？ ###

华为云Astro轻应用平台是华为云Astro人工智能平台的一部分，是一种基于云原生技术的轻量级应用开发和运行平台。它提供了一整套的开发工具和运行环境，可以帮助开发者快速构建和部署轻量级应用，如数据大屏、H5页面、移动应用等。

华为云Astro轻应用平台的主要特点包括：

1.  **云原生架构**：华为云Astro轻应用平台采用云原生架构，可以支持快速部署、弹性伸缩、高可用等特性，同时也可以提供更高的安全性和稳定性。
2.  **低代码开发**：华为云Astro轻应用平台提供了低代码开发的工具和平台，可以帮助开发者快速构建轻量级应用，减少开发成本和时间。
3.  **多终端支持**：华为云Astro轻应用平台可以支持多种终端，如数据大屏、H5页面、移动应用等，可以帮助开发者轻松实现多终端的部署和运行。

下面让我们直接进入使用环节！

### 二、Astro轻应用平台的使用 ###

> 在使用Astro轻应用平台前，需要注册华为云账号、实名认证，如果您已拥有华为账号且已通过实名认证，可直接体验。

#### 2.1 访问Astro轻应用平台工作台 ####

访问：

https://console.huaweicloud.com/appcube/

![a7fd7f73e91ef44f17cd5c8db2cd9898.png][]

我之前订购过，这里点击【管理运行环境】即可。

此时就进入了Astro轻应用的工作台：

![9fd6de5f4525478d685a30207af992b8.png][]

我们点击页面最上方的【应用开发】页签：

![7909694b1b28bb9736ab1257827e25e0.png][]

进入后，有三种构建类型：

*  低代码
 *  零代码
 *  业务大屏

![c26047b12435320a0f7e8f93abe9bbfa.png][]

今天我们的需求是创建无人机系统的管理大屏，因此我们直接点击【业务大屏】即可：

![e80e19cb63a9bc374f34d721277db023.png][]

#### 2.2 选择模板 ####

进入后，首先映入我们眼帘的是推荐的模板。

![0b2b551f25c8477166c10be00c1db10d.png][]

这些推荐的模板中没有我们想要的，所以可以点击【更多推荐模板】超链接：

![ff4c3e1d0d7af65e08c696db47b4664d.png][]

进入后，我们发现有两端的模板：

*  大屏&PC端
 *  移动端

![d57096ebcc045c23063e76cc730e20ad.png][]

这里我们选择【车间设备监控】这个模板：

![f6d2ef31ca60c85e212db868e56b3b24.png][]

然后点击页面下方的【使用此模板】：

![707d70bb28bf2fd53344f2f08da379a3.png][]

#### 2.3 页面编辑 ####

填写一下，项目名称和页面标题：

*  项目名称：无人机系统
 *  页面标题：管理大屏

![dd446d6072653e22c5104af5f6b737ad.png][]

点击新建后就来到了编辑界面：

![4c47ec0911aea5f281998fcac0c41934.png][]

在这个界面中，左边侧边栏是全部组件库，左边主体是可视化编辑部分。

下面开始进入可视化编辑。

想要修改标题，将鼠标悬浮于标题上面，就显示【文本编辑】的提示了：

![0de14ed4c98d68ca692cd5ae445507cc.png][]

把标题改为：无人机系统监控大屏

![0a51995f5922c70bc9e7ad6b6470380b.png][]

如果我们想修改图片上方的提示文字“车间大图”，点击图片后，点击左侧侧边栏，点击【重命名】：

> 点击图片，右击也能完成相关操作。

![00812b10497049a501fda903c1c6fd31.png][]

但是我们需要直接把这些图换了，所以点击这些图，按下delete键即可：

![c3797dcf45376a8d4e97a2fd3c9a673c.png][]

然后选择图片组件，将需要加的图拖拽到界面即可：

![1d45015810dedce6381d38121698a030.png][]

拖拽过去的是默认的图片，我们肯定是想换成自己的图片，怎么办呢？

点击图片，点击”卡片“图标，选择”图片设置“，选择图片：

![a4acc2f07d85a77faf72e210974a2c31.png][]

图片替换完后的效果：

![055df4830ba67e74284efaf63d967430.png][]

然后我们继续按照同样的逻辑去编辑美化其他模板，最后的效果就是：

![283d4287c830c636d41a62375adf0b8c.png][]

#### 2.4 预览和发布 ####

编辑好后，就可以先预览一下了，在页面的上方可以操作：

![0a0009ec5ee8963b5d254b401d4fea81.png][]

效果：

![1f3ea50feb73a640ba4ba24493da4db4.png][]

如果我们需要发布，点击”发布“图标即可：

![2d38f015548b947034e65bfee93fc9e3.png][]

打开【发布链接】的开关：

![d5c0252233d2e56c776d34eb7e115550.png][]

我们复制这个链接到其他浏览器中查看一下效果：

![ac9c2a1d12305057c7175adb38162b75.png][]

### 三、总结 ###

本文给大家介绍了如何使用华为云的Astro平台构建数据大屏，本文选择了”车间设备监控“模板构建了无人机系统运行大屏，全程没有写一行代码，真正实现了0代码构建大屏，操作过程非常简单，而且生成的大屏图也是非常具有科技感，有构建数据大屏的朋友可以参考本文进行构建，有任何问题可以在下方评论区与我讨论，感谢阅读！

[a7fd7f73e91ef44f17cd5c8db2cd9898.png]: https://img-blog.csdnimg.cn/img_convert/a7fd7f73e91ef44f17cd5c8db2cd9898.png
[9fd6de5f4525478d685a30207af992b8.png]: https://img-blog.csdnimg.cn/img_convert/9fd6de5f4525478d685a30207af992b8.png
[7909694b1b28bb9736ab1257827e25e0.png]: https://img-blog.csdnimg.cn/img_convert/7909694b1b28bb9736ab1257827e25e0.png
[c26047b12435320a0f7e8f93abe9bbfa.png]: https://img-blog.csdnimg.cn/img_convert/c26047b12435320a0f7e8f93abe9bbfa.png
[e80e19cb63a9bc374f34d721277db023.png]: https://img-blog.csdnimg.cn/img_convert/e80e19cb63a9bc374f34d721277db023.png
[0b2b551f25c8477166c10be00c1db10d.png]: https://img-blog.csdnimg.cn/img_convert/0b2b551f25c8477166c10be00c1db10d.png
[ff4c3e1d0d7af65e08c696db47b4664d.png]: https://img-blog.csdnimg.cn/img_convert/ff4c3e1d0d7af65e08c696db47b4664d.png
[d57096ebcc045c23063e76cc730e20ad.png]: https://img-blog.csdnimg.cn/img_convert/d57096ebcc045c23063e76cc730e20ad.png
[f6d2ef31ca60c85e212db868e56b3b24.png]: https://img-blog.csdnimg.cn/img_convert/f6d2ef31ca60c85e212db868e56b3b24.png
[707d70bb28bf2fd53344f2f08da379a3.png]: https://img-blog.csdnimg.cn/img_convert/707d70bb28bf2fd53344f2f08da379a3.png
[dd446d6072653e22c5104af5f6b737ad.png]: https://img-blog.csdnimg.cn/img_convert/dd446d6072653e22c5104af5f6b737ad.png
[4c47ec0911aea5f281998fcac0c41934.png]: https://img-blog.csdnimg.cn/img_convert/4c47ec0911aea5f281998fcac0c41934.png
[0de14ed4c98d68ca692cd5ae445507cc.png]: https://img-blog.csdnimg.cn/img_convert/0de14ed4c98d68ca692cd5ae445507cc.png
[0a51995f5922c70bc9e7ad6b6470380b.png]: https://img-blog.csdnimg.cn/img_convert/0a51995f5922c70bc9e7ad6b6470380b.png
[00812b10497049a501fda903c1c6fd31.png]: https://img-blog.csdnimg.cn/img_convert/00812b10497049a501fda903c1c6fd31.png
[c3797dcf45376a8d4e97a2fd3c9a673c.png]: https://img-blog.csdnimg.cn/img_convert/c3797dcf45376a8d4e97a2fd3c9a673c.png
[1d45015810dedce6381d38121698a030.png]: https://img-blog.csdnimg.cn/img_convert/1d45015810dedce6381d38121698a030.png
[a4acc2f07d85a77faf72e210974a2c31.png]: https://img-blog.csdnimg.cn/img_convert/a4acc2f07d85a77faf72e210974a2c31.png
[055df4830ba67e74284efaf63d967430.png]: https://img-blog.csdnimg.cn/img_convert/055df4830ba67e74284efaf63d967430.png
[283d4287c830c636d41a62375adf0b8c.png]: https://img-blog.csdnimg.cn/img_convert/283d4287c830c636d41a62375adf0b8c.png
[0a0009ec5ee8963b5d254b401d4fea81.png]: https://img-blog.csdnimg.cn/img_convert/0a0009ec5ee8963b5d254b401d4fea81.png
[1f3ea50feb73a640ba4ba24493da4db4.png]: https://img-blog.csdnimg.cn/img_convert/1f3ea50feb73a640ba4ba24493da4db4.png
[2d38f015548b947034e65bfee93fc9e3.png]: https://img-blog.csdnimg.cn/img_convert/2d38f015548b947034e65bfee93fc9e3.png
[d5c0252233d2e56c776d34eb7e115550.png]: https://img-blog.csdnimg.cn/img_convert/d5c0252233d2e56c776d34eb7e115550.png
[ac9c2a1d12305057c7175adb38162b75.png]: https://img-blog.csdnimg.cn/img_convert/ac9c2a1d12305057c7175adb38162b75.png