实现 Web Component 基础
学习目标
开发一个基础 Web Component 并定义其元数据,以在 SAP Analytics Cloud 中注册自定义微件。
关于自定义微件开发的重要说明
自定义微件开发是一项软件开发活动。并不存在唯一的正确实现或强制性的编码模式。
不同的开发人员可能使用不同的方法、结构或库实现相同的功能结果。
本单元使用 SAP 提供的一个参考实现来演示所需的概念和机制。
本单元中展示的代码应被理解为:
一个 学习参考 ,
一个 可运行的示例 ,
而非规定性的或排他的标准。
作为自定义微件开发人员,你可以根据具体需求自由调整、重构或重新设计该解决方案。
创建一个简单的 Web Component
SAP Analytics Cloud 自定义微件基于 Web Component 技术。
在 SAP Analytics Cloud 中创建自定义微件之前,理解 Web Component 如何独立工作并能在浏览器中执行很重要。
在本练习中,你将在浏览器中打开并运行一个简单的 Web Component。
此示例尚未连接到 SAP Analytics Cloud,它作为后续步骤的基础。
练习
你将遵循的步骤如下:
创建一个本地文件夹
创建一个 HTML 文件(index.html)
从 GitHub SAP Samples Repository (index.html) 复制 HTML 代码
编辑 index.html 文件以提供你的用户名
通过在浏览器中打开该文件来验证
结果
一个简单的 Web Component 在浏览器中成功渲染。
练习:开始练习(SAP 官方交互式练习)
在 SAP Analytics Cloud 中创建、上传和查看自定义微件
通过添加 SAP Analytics Cloud 能够解释的元数据,可以将 Web Component 转变为自定义微件。
完成下一个练习后,你将理解微件元数据文件的作用。你将要上传一个 index.json 文件到 SAP Analytics Cloud,创建一个最小的自定义微件,并将其添加到故事中。最后,你将查看这个“Hello”自定义微件。
练习
在下面的练习中,你将遵循以下步骤:
在本地文件夹中创建一个 index.json
从 GitHub SAP Samples Repository (index.json) 复制代码
创建一个 main.js 文件并从同一代码库复制代码
编辑这两个文件以包含你的用户名
创建包含微件文件的 ZIP 归档
使用 JSON 文件和 ZIP 归档将微件上传到 SAP Analytics Cloud
创建一个故事并添加该微件
结果
该自定义微件在故事中可见并已渲染。
练习:开始练习(SAP 官方交互式练习)
资源和延伸阅读
在本单元中,你将了解一种遵循 SAP 提供的现有资源的实现方式:
SAP Analytics Cloud:自定义微件实操指南 - SAP Community
更具体地说,你在本单元中进行的练习基于以下文档:自定义微件实操指南
总结
SAP Analytics Cloud 中的自定义微件使用标准 Web Component 技术构建。Web Component 本身可以在集成到 SAP Analytics Cloud 之前,在浏览器中独立开发和测试。
index.json 文件包含必要的元数据,使 SAP Analytics Cloud 能够将 Web Component 识别并注册为自定义微件。
创建可用的自定义微件需要一个 JSON 文件和资源文件(如 main.js),必须将它们打包为 ZIP 归档才能上传到 SAP Analytics Cloud。