​​本文分享自华为云社区 《【云享热点】中秋国庆花式玩法,用低代码DIY假日大屏“Vlog”(内附节日福利)》,作者:华为云社区精选。

中秋、国庆双节将至,你的八天小长假准备如何度过?华为云低代码平台Astro为开发者们奉上一份特别的假期礼物。通过大屏应用Astro Canvas,零代码即可设计专属个性化大屏应用。假期赏月美图、节日足迹、特色美食……统统都可以记录在这块特别的大屏中。快来上手体验,用创意“Vlog”记录假日美好生活。

简单五步,带你上手个性大屏“Vlog”

华为云Astro Canvas提供了丰富的组件应用,简单快捷的数据接入,能够让全民开发者在不用写一行代码、不用了解繁琐操作流程下,通过简单的拖拉拽的方式,快速设计完成一个大屏。

它既可以像学生时代设计的黑板报,又可以像从前时光漫漫用心编辑的个人空间,还可以是一个专业的、有技术含量的大屏展示……

下面,简单5步,带大家快速制作一个特别的中秋节大屏。

第一步:注册华为云账号领取免费资源

点击“【限时特惠】产品新用户免费试用1个月,立即体验!”,完成免费资源领取。

第二步:创建华为云Astro Canvas大屏设计项目

领取完成后,回到原页面,点击立即使用,然后新建项目,选择大屏&PC端,自定义项目名称。

再点击新建页面-新建空白页面,输入页面标题。

第三步:创建静态数据数据集

如果我们想用热力图来呈现节日的活动足迹,需要先导入足迹数据创建图表,Astro Canvas支持关系型数据库、Roma连接器、DLI、DWS、Astro Zero和Http连接器等多种数据来源。这里将为大家介绍创建静态数据数据集,支持手工输入和导入Excel/CSV两种方式。

导航栏进入到数据中心,找到数据集>全部>新建数据集,输入相关信息。

然后点击新增静态数据,上传我们已经准备好的足迹Excel文件。

完成前期的数据准备之后,就进入了设计大屏环节。

第四步:拖拉拽组件创建应用

华为云Astro Canvas提供丰富的组件库,多图层管理,移动端流式布局,支持组件多种布局展示。所以无需编写代码,我们可以直接拖拉拽组件库的组件应用,比如地图、排行版、热力图、轮播图等,来让大屏的显示更加丰富多彩。

地图

将左侧导航栏的地图组件拖到大屏上,点击地图组件上的配置按钮,对地图进行自定义配置,地图组件支持上传GeoJSON格式的地图数据(包括链接和素材两种方式)。

地图组件支持样式自定义,可以根据自己的喜好修改相关区域的颜色,并支持配置热力图层,通过修改静态数据,可显示所在城市的热力指数。

排行榜

如果要给中秋最佳赏月地做个排行榜,可以选择全部组件>文本>排行榜,将排行榜组件拖到画布,然后点击数据,采用数据集导入数据。

在组件预览里面,支持对表格字段进行配置,将左侧表格字段的城市和地名拖到右侧列数据。在图表预览里面可以看到数据变化,且可以对榜单的背景色进行设置。

排行版同时支持修改标题样式、表头显示、背景色、榜单列数据字体大小等配置,可以自由灵活调整具体的样式。

设计热力图

我们用热力图来完成近10年的节日活动出行轨迹图。找到左侧全部组件>图表>柱状图>热力图,将热力图组件拖到画布。点击热力图上的数据配置项,导入我们之前上传的活动轨迹数据集。

成功导入后就可以对热力图的基本配置进行个性化设置,美化节日轨迹图,具体包括标题、字体、颜色、图例等等。

最后,我们可以设置热力图与外部页面的交互,实现点击热力图跳转到自己的社交主页功能,更好地展现精彩假期生活。

轮播图和文本编辑设置

节日大屏怎么能少了假期美图呢?我们拍的一些照片如城市地标,赏月图片等都可以在大屏上滚动呈现,同时还可以写一些节日祝福话,附上与节日相关的诗词歌赋等。

左侧导航栏找到全部组件>媒体>轮播图片,将轮播图片组件拖入画布。先设置填充方式,再上传图片,并按照自己的喜好选择对应的轮播方式(自动轮播/手动轮播)。

轮播图可以搭配文本编辑组件使用,用文字记录照片背后的故事。点击左侧全部组件>文本>文本编辑,将文本编辑组件拖到画布,即可输入你想要表达的内容。

计时器

八天假期转瞬即逝,我们可以在大屏页面上添加实时日期和时间,实时显示自己的假期余额。找到左侧全部组件>文本>时间翻牌器,将时间翻牌器组件拖入画布进行设置,点击配置按钮,修改字体,大小,颜色等。

除此之外,我们还可以选择添加视频、天气、词云、时间轴等各种组件,将假期片段更多元地呈现在大屏上。最后再对大屏进行一些装饰,选择全部组件>装饰里面的组件对标题背景、内容背景、页面背景进行美化修改,一个假期大屏就大功告成了。

第五步:发布分享

页面设计完成之后,点击页面上方的保存,然后点击预览,最后进行发布。

点击发布按钮之后,会出现页面发布设置:

  • 设置版本管理:可以是实时更新版本,也可以新建版本。

  • 设置访问限制:这里重点提醒,一定要设置访问限制(访问码即可),否则其他人无法访问该链接。

最后大家可以将自己设计的大屏页面地址分享给亲朋好友或者社交平台上,秀出别样的假期“vlog”。

双节福利到:上传大屏作品,赢精美礼品

现在,将你的精彩假期生活制作成大屏,将有机会赢取100元京东卡、华为手环4等精美礼品。

参与方式:

1、点击链接,将你的大屏作品发布到评论区回帖

2、注明相关信息:①设计页面截图②使用的组件和数据接入方式③页面分享链接④分享码

最后,祝所有开发者们中秋、国庆双节快乐,用低代码“绘出”一个惬意且愉悦的假期。

点击关注,第一时间了解华为云新鲜技术~

中秋国庆花式玩法,用低代码DIY假日大屏“Vlog”的更多相关文章

  1. 破解“低代码”的4大误区,拥抱低门槛高效率的软件开发新选择 ZT

    最近,每个人似乎都在谈论“低代码”.以美国的Outsystems.Kinvey,以及国内的活字格为代表的低代码开发平台,正在风靡整个IT世界.毕竟,能够以最少的编码快速开发应用的想法本身就很吸引人.但 ...

  2. 代码调试console对象的花式玩法

    转自阮一峰http://www.ruanyifeng.com/home.html console.log(),console.info(),console.debug() console.log方法用 ...

  3. 小梅哥课程学习——LED花式玩法(从计数器器到线性序列机)——实验六

    //每隔10ms,让led灯的一个8状态循环执行一次(每个变化时间值小一点,方便测试比如设置为10us) 源代码 module counter_led_6(    clk,    reset_n,   ...

  4. XSS漏洞的渗透利用另类玩法

    XSS漏洞的渗透利用另类玩法 2017-08-08 18:20程序设计/微软/手机 作者:色豹 i春秋社区 今天就来讲一下大家都熟悉的 xss漏洞的渗透利用.相信大家对xss已经很熟悉了,但是很多安全 ...

  5. 从表单驱动到模型驱动,解读低代码开发平台的发展趋势 ZT

    原文地址:https://www.grapecity.com.cn/blogs/read-the-trends-of-low-code-development-platforms 随着社会数字化进程的 ...

  6. AB实验的高端玩法系列4- 实验渗透低?用户未被触达?CACE/LATE

    CACE全称Compiler Average Casual Effect或者Local Average Treatment Effect.在观测数据中的应用需要和Instrument Variable ...

  7. 2022了你还不会『低代码』?数据科学也能玩转Low-Code啦! ⛵

    作者:韩信子@ShowMeAI 数据分析实战系列:http://www.showmeai.tech/tutorials/40 机器学习实战系列:http://www.showmeai.tech/tut ...

  8. 全面解密QQ红包技术方案:架构、技术实现、移动端优化、创新玩法等

    本文来自腾讯QQ技术团队工程师许灵锋.周海发的技术分享. 一.引言 自 2015 年春节以来,QQ 春节红包经历了企业红包(2015 年).刷一刷红包(2016 年)和 AR 红包(2017 年)几个 ...

  9. 朱晔的互联网架构实践心得S2E4:小议微服务的各种玩法(古典、SOA、传统、K8S、ServiceMesh)

    十几年前就有一些公司开始践行服务拆分以及SOA,六年前有了微服务的概念,于是大家开始思考SOA和微服务的关系和区别.最近三年Spring Cloud的大火把微服务的实践推到了高潮,而近两年K8S在容器 ...

  10. openresty+lua在反向代理服务中的玩法

    openresty+lua在反向代理服务中的玩法 phith0n · 2015/06/02 10:35 0x01 起因 几天前学弟给我介绍他用nginx搭建的反代,代理了谷歌和维基百科. 由此我想到了 ...

随机推荐

  1. Java-全网最详细数据结构

    数构&算法:数据结构 数据结构是计算机存储.组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合.通常情况下,精心选择的数据结构可以带来更高的运行或者存储效率.数据结构往 ...

  2. 从链接器的角度详细分析g++报错: (.text+0x24): undefined reference to `main'

    /usr/bin/ld: /usr/lib/gcc/x86_64-linux-gnu/9/../../../x86_64-linux-gnu/Scrt1.o: in function `_start' ...

  3. [ABC208E] Digit Products 题解

    Digit Products 题目大意 求有多少个不大于 \(n\) 的正整数,使得该正整数各位乘积不大于 \(k\). 思路分析 观察数据范围,首先考虑数位 DP. 考虑设计记忆化搜索函数 dfs( ...

  4. 【短道速滑十一】标准的Gabor滤波器及Log_Gabor滤波器的实现、解析、速度优化及其和Halcon中gen_gabor的比较。

    最近有朋友在研究Halcon中gen_gabor的函数,和我探讨,因为我之前也没有怎么去关注这个函数,因此,前前后后大概也折腾了有一个星期去模拟实现这个东西,虽然最终没有实现这个函数,但是也是有所收获 ...

  5. C/C++ __builtin 超实用位运算函数总结

    以 __builtin 开头的函数,是一种相当神奇的位运算函数,下面本人盘点了一下这些以 __builtin 开头的函数,希望可以帮到大家. 1 __builtin_ctz( ) / __buitli ...

  6. 理解Go中的零值

    在 Go 语言中,零值(Zero Value)是指在声明变量但没有显式赋值的情况下,变量会被自动赋予一个默认值.这个默认值取决于变量的类型,不同类型的变量会有不同的零值.零值是 Go 语言中的一个重要 ...

  7. JavaScript高级程序设计笔记04 变量、作用域与内存

    变量.作用域与内存 变量 特定时间点一个特定值的名称. 分类 原始值:按值访问 复制:两个独立使用.互不干扰 引用值(由多个值构成的对象):按引用访问 操作对象时,实际上操作的是对该对象的引用(ref ...

  8. js剪贴板应用clipboardData

    clipboardData 对象 提供了对剪贴板的访问. 三个方法 1.clearData(sDataFormat) 删除剪贴板中指定格式的数据. 2.getData(sDataFormat) 从剪贴 ...

  9. 解决yolo+cudnn+opencv+gpu的一些问题

    问题描述: 在makefile文件中修改GPU=1 CUDNN=1 OPENCV=1,然后重新make,执行命令时出现: Yolov3 darknet: ./src/cuda.c:36: check_ ...

  10. 开源不挣钱?这个项目上线半年月入超 30w

    很兴奋的告诉大家,Sealos 自从 6 月份上线以来,仅半年时间注册用户已经突破 7万,月收入超过 30w,本文来向大家介绍我们是怎么做开源商业化的.每月平均增速超过 40%,而且这些收入大部分来自 ...