# 使用华为云Astro大屏应用预置模板搭建交通管理大屏
#### 场景说明
交通管理大屏用于监控城市的交通状态，如进出城车辆、路况信息和交通指数等，效果如[图1]所示。本入门以使用华为云Astro大屏应用中预置模板构建一个交通管理大屏为例，向您介绍如何在华为云Astro大屏应用中快速构建可视化页面。
图1交通管理大屏效果   
![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001906715241.png)
#### 操作流程
在华为云Astro大屏应用中开发大屏页面的流程，如[图2]所示。
图2开发大屏页面流程   
![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002128920454.png)
1. [注册账号并实名认证]
   注册一个华为账号并进行实名认证，认证后需要为账号进行充值。如果您已有一个华为账号，可直接跳过此操作，但需要确保账号有足够的金额。
   
2. [购买华为云Astro大屏应用实例]
   在使用华为云Astro大屏应用前，您需要购买一个华为云Astro大屏应用实例。华为云Astro大屏应用实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。如果您的账号未购买过华为云Astro大屏应用付费实例，可申请免费试用华为云Astro大屏应用（试用实例版本为华为云Astro大屏应用基础版），有效期为一个月。
   
3. [创建大屏\&PC端项目]
   在华为云Astro大屏应用中创建页面前，需要先创建一个项目。项目可以理解为是一种业务场景的集合，在项目中可以创建多个页面。
   
4. [构建可视化大屏页面]
   通过华为云Astro大屏应用中预置的交通管理模板，快速创建一个可视化大屏页面。
   
5. [预览并发布大屏页面]
   在线预览大屏页面效果，确保开发编辑效果与发布后运行效果一致。预览效果符合预期后，可直接发布大屏页面，并在线查看城市交通状况。
   
 
 #### 步骤一：注册账号并实名认证
使用华为云Astro大屏应用前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接跳过如下操作，但需要确保账号有足够的金额。
1. 进入[华为云](https://www.huaweicloud.com/)官网，单击页面右上角的"注册"。
2. 参考[注册华为账号并开通华为云](https://support.huaweicloud.com/usermanual-account/account_id_001.html)中操作，完成注册。
3. 注册后参考[实名认证](https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0077914254.html)中操作，完成个人或企业账号实名认证。
4. 为账号进行重置。 
   购买华为云Astro大屏应用实例时需要收费，请提前为您的账号进行重置，确保账号有足够的金额。
   - 关于华为云Astro大屏应用的价格说明，请参见[计费说明](https://support.huaweicloud.com/price-astrocanvas/astrocanvas_price_0000.html)。
   
   - 关于充值，请参见[账户充值](https://support.huaweicloud.com/usermanual-billing/bills-topic_30000002.html)。
   
   
   
   
 
 #### 步骤二：购买华为云Astro大屏应用实例
在使用华为云Astro大屏应用前，您需要购买一个华为云Astro大屏应用实例。华为云Astro大屏应用实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。如果您的账号未购买过华为云Astro大屏应用付费实例，可申请免费试用华为云Astro大屏应用（试用实例版本为华为云Astro大屏应用基础版），有效期为一个月。本入门以购买基础版实例为例，进行介绍。
1. 进入[购买华为云Astro大屏应用实例页面](https://console.huaweicloud.com/astro-canvas/?#/canvas/create)。
2. 实例版本选择"华为云Astro大屏应用基础版"，按需设置购买时长，单击"立即购买"。 
   图3购买实例   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002184838217.png)
   
   
3. 选择支付方式（如在线支付），单击"去在线支付"，完成订单支付。 
   图4确认付款   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002226360257.png)
   
   
4. 订单支付成功后，单击"返回Astro轻应用控制台"。 
   图5返回控制台   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002184799529.png)
   在华为云Astro大屏应用控制台中，可以查看华为云Astro大屏应用的安装状态。当"实例状态"变为"运行中"时，说明实例已安装好，可以正常使用。
   图6华为云Astro大屏应用控制台   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002184799405.png)
   
   
 
 #### 步骤三：创建大屏\&PC端项目
在华为云Astro大屏应用中创建页面前，需要先创建一个项目。项目可以理解为是一种业务场景的集合，在项目中可以创建多个页面。
1. 在华为云Astro大屏应用服务控制台，单击"进入首页"，进入华为云Astro大屏应用界面。
2. 在"项目列表"中，单击"+ 新建项目"。 
   图7进入新建项目页面   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001860715584.png)
   
   
3. 在新建项目页面，选择"大屏\&PC端"，输入项目名称（如交通管理），单击"新建"。 
   项目名称的长度为1\~64个字符，可包括中文、字母、数字及下划线，但不能以下划线开头或结尾。
   图8新建大屏\&PC端项目   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002184803909.png)
   系统自动进入该新建项目的"大屏\&PC端项目"页面，如[图9]。
   图9大屏\&PC端项目页面   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001860555764.png)
   
   
 
 #### 步骤四：构建可视化大屏页面
华为云Astro大屏应用中预置了一些可复用的页面样例作为模板（预置模板和自定义模板），通过模板创建新的页面，可充分利用已有资源，减少重复开发，提高交付效率。本入门以交通管理模板为例，向您介绍如何快速构建大屏页面。
1. 在"大屏\&PC端项目"页面，单击"新建页面"。
2. 在预置模板中，选择"交通管理"，单击"使用此模板"。 
   图10选择交通管理模板   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001906715245.png)
   
   
3. 输入页面标题（如A市交通管理分析大屏），单击"新建"。 
   图11设置页面标题   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001860715588.png)
   系统自动进入大屏开发页面，如[图12]。您可以直接使用该大屏页面，也可以根据业务需求进行二次开发。
   图12大屏开发页面   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001906595537.png)
   
   
4. 单击页面上方的![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002123286424.png)，完成大屏页面的创建。
 
 #### 步骤五：预览并发布大屏页面
在华为云Astro大屏应用中开发大屏页面时，支持直接在线预览效果，确保开发编辑效果与发布后运行效果一致。预览效果符合预期后，可直接发布大屏页面，并在线查看城市交通状况。
1. 在已创建的大屏页面中，单击页面上方的![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002158647057.png)，预览页面效果。
   
   如果预览效果不符合预期，可进行微调，直至符合预期。
   
   
2. 单击![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002158647493.png)，打开"发布链接"开关，获取页面访问地址。
   
   图13打开发布链接   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002133196960.png)
   单击![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002132962848.png)，可生成新的链接，原链接将不可访问。单击![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002146413905.png)，可复制该链接。
   
   
3. 设置访问限制。 
   如果是新建项目，需要为发布链接设置访问限制，即"分享码访问"或"Token认证"必须设置其中一个，否则链接在运行态无法正常访问。本入门中，以设置分享码为例进行介绍。
   图14分享码设置   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001875915136.png)
   - 分享码设置：设置页面分享码后，只能通过分享码来访问页面，提高安全性。
   
   - 设置Token认证：通过设置Token认证，可对大屏交互时传递的参数进行签名鉴权，保证大屏的URL访问链接的参数不会被篡改，从而提高大屏数据及用户信息的安全性。
   
   - 设置内容安全策略：大屏页面嵌入第三方系统时（例如以iframe形式嵌入），如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。
    
   
   
4. 设置完成后，在浏览器中打开发布链接地址，输入分享码后，单击![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000002158531841.png)，即可在线查看城市交通状态。
   
   图15输入分享码   
   ![](https://support.huaweicloud.com/qs-astrocanvas/zh-cn_image_0000001860555780.png)