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 的主号码开头。
- 保存之后版本不能被更改。
- MindSphere 支持
- 为您的应用上传一个图标。
-
输入组件名称。 组件名称必须与
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.***
角色分配到您的应用。