MindSphere Web Components
演示应用

简单的演示应展示了当仅使用 HTML、 CSS 和 JavaScript 构建 MindSphere 应用时，如何使用 MindSphere Web 组件。它由 Web 组件库提供，可以在下载包中找到它。

以下图片展示了一个演示应用的示例：

先决条件

开发者租户的 MindSphere 用户账户
Cloud Foundry Command Line Interface (CF CLI)
允许推送应用的 Cloud Foundry 角色，例如：spaceDeveloper
MindSphere 开发者角色，mdsp:core:Developer 或 mdsp:core:DeveloperAdmin

部署应用到 Cloud Foundry

在您的本地电脑上解压演示应用文件夹。
打开 manifest.yml 并根据需要修改 name。

China 1区域差异

China 1区域, 打开 demo/index.html 并将其中 The key value you applied for 替换为您在高德地图申请的有效 Key。

在要部署应用的文件夹中打开命令行接口(CLI)。
如果必要，请配置代理设置。
有关代理设置的详细信息请点击这里
如果您在代理背后的公司网络中，您可能必须设置代理才能到达 Cloud Foundry 端点。如果您遇到超时或连接问题，请与管理员联系。

像如下展示一样，为 Cloud Foundry CLI 设置代理：

```cmd tab="CMD" set http_proxy=http://PROXY_IP:PROXY_PORT set https_proxy=http://PROXY_IP:PROXY_PORT
```
```bash tab="BASH"
export http_proxy=http://PROXY_IP:PROXY_PORT
export https_proxy=http://PROXY_IP:PROXY_PORT
```
输入 cf login -a https://api.cf.{region}.{mindsphere-domain} --sso。
打开由 CLI 打印的 URL 并使用您的 WebKey 凭证登陆，以获得一次性代码。
在 CLI 中输入一次性代码。
使用以下命令选择您的 Cloud Foundry org 和 space：
```
cf target -o {org_name} -s {space_name}
```
没有 Cloud Foundry Orgs 显示

如果您没有看见任何 Cloud Foundry orgs，您需要将您自己添加到 org 中。请参考How Tos for Cloud Foundry。
使用以下命令推送应用到您的 Cloud Foundry space：
```
cf push
```
Vendoring China 1 的依赖关系

由于中国国际网络访问不稳定，在下载依赖关系时，将应用推送到 China 1 的 MindSphere Cloud Foundry有时会失败。请参考Cloud Foundry buildpack's文档，以vendoring应用的依赖关系：

集成应用到 MindSphere

通过 Developer Cockpit 配置应用

从 Launchpad 中打开 Developer Cockpit 并选择**仪表盘**选项卡。
单击**创建新的应用**。
选择类型 Standard 和 基础设施 MindSphere Cloud Foundry。
输入一个任意的**显示名称**和**内部名称**，这将会为成为应用 URL的一部分。初始化创建后，**内部名称**不能被更改！
输入版本编号。
- MindSphere 支持 Major.Minor.Patch 方案。
- 版本必须以 >=1 的主号码开头。
- 保存之后版本不能被更改。
为您的应用上传一个图标。
输入组件名称。组件名称必须与 manifest.yml 文件中指定的一样。
使用 /** 为组件添加一个端点，以匹配所有应用路径。
输入您应用的 Cloud Foundry URL。
- 使用 cf app {app_name} 获取您部署的应用的 URL。
设置以下 content-security-policy：

```bash tab="Europe 1" default-src 'self' *.eu1.mindsphere.io; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline' *.eu1.mindsphere.io; img-src * data:;

```bash tab="Europe 2"
    default-src 'self' *.eu1.mindsphere.io *.eu2.mindsphere.io; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline' *.eu1.mindsphere.io *.eu2.mindsphere.io; img-src * data:;

bash tab="China 1" default-src 'self' static.cn1.mindsphere-in.cn *.amap.com *.is.autonavi.com; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' static.cn1.mindsphere-in.cn *.amap.com *.is.autonavi.com; worker-src blob:; img-src * data:;

单击**保存**。

您将被重定向到应用细节。
您的应用处于 In-Development 状态，并准备好注册了。

配置应用角色和范围

切换到**授权管理**选项卡。
选择应用。
创建一个应用范围，例如：simplecomponentdemo.all，用来从 Launchpad 访问应用。
添加以下核心角色，以启用对各个 APIs 的访问。如果缺少其中一个角色，相关的 web 组件将无法工作。
- mdsp:core:assetmanagement.admin
  asset 视图所需
- mdsp:core:iot.tsaUser
  总表所需
- mdsp:core:em.eventcreator
  事件视图所需
- mdsp:core:iot.filAdmin
  文件视图所需
- mdsp:core:tsm.full-access
  规则视图所需

注册应用

切换到**仪表盘**选项卡。
打开应用细节。
单击**注册**。

分配应用角色

从 Launchpad 中打开 Settings 应用并切换到**角色**选项卡。
选择应用角色并单击**编辑分配**。
分配您的用户到应用角色。
单击**结束编辑**。
退出 MindSphere 然后重新登陆。

退出

用户令牌只有在退出和重新登录之后才使用新范围更新。在极少数情况下，可能需要几分钟，直到角色分配在系统中传播完毕。

恭喜！您的第一个基于 MindSphere Web 组件的应用正在您的租户中运行。

您可以根据需要随意调整带有属性、样式等的 web 组件。

疑难解答

应用在 Launchpad 中不可见
检查是否在 Settings 应用中为用户分配了应用角色。分配新角色后，需要退出/登录。
应用没有完全加载并且开发者控制台显示 "Content Security Policy" 错误
取消注册应用，并按照上面的指示更新 Developer Cockpit 中的 content-security-policy 设置。
加载了 Web 组件，但是出现了一个 "assetList" 错误，或者没有显示任何 assets
确保 mdsp:core:assetmanagement.*** 角色分配到您的应用。

还有问题?

向社区提问

除非另行声明，该网站内容遵循MindSphere开发许可协议.

Last update: November 16, 2021

MindSphere Web Components演示应用