接下来，进行 UI 扩展及内容丰富，在首页集成一个天气信息卡片，并集成外部的杭州天气预报 API 到待办事项管理系统之中。为方便使用，下表展示了待集成的天气 API 的基本内容。
名称 | 方法 | 地址 | 返回值示例 |
获取杭州天气 | GET | { "city":"杭州市", "wind":"西", "weather":"23", "hum":"53" } |
进行 API 的集成操作，打开集成管理面板，添加 API 连接器。
然后将上述表格内容填入接口定义面板之中。
开启调测模式，测试接口并保存结构体以供后续使用。点击确定后保存接口。
打开数据模型，添加结构体到实体的转换映射。
弹出的管理面板中，命名为「天气模型」并在选择结构体一栏中选择刚刚保存的 response 结构体。
接下来，在跳转后的页面中选择「自动生成映射」。
在自动生成映射面板中，选择内存实体。
点击完成后，完成映射创建。
打开首页，并在首页「待办事项-列表页」文本右侧，插入区块面板中的「天气小组件」。
从大纲树或页面中选中「天气小组件」的 Data 容器，在右侧面板的数据源配置中选中逻辑流。
在选择逻辑流的面板中，选择添加逻辑流。
在创建逻辑流面板中，选择数据模型的弹出面板中，选择刚刚进行映射的天气模型Root。
点击保存后继续。
跳转到刚刚创建的逻辑流中进行 API 集成和编排。
展开左侧「其他操作」面板，将「后端调用指定的集成 API」操作拖入主干。
鼠标聚焦「后端调用指定的集成 API」节点，并在右侧配置面板中选择之前集成的「获取杭州天气」 API 。
展开左侧「结构体操作」面板，将「结构体对象转换实体对象」节点拖入主干。
鼠标聚焦「结构体对象转换实体对象」节点，并在右侧配置面板中选择之前完成的映射模型「天气模型」以及上述API集成步骤获得的结构体对象。
至此，通过 API 集成操作，访问了外部 API 并获得了其响应的 JSON 结构体结构，然后通过转换操作将这个响应的 JSON 结构体操作转换成了魔笔数据驱动的内存实体对象。最后，点击结束事件节点，将这个转换后实体对象作为返回值进行返回。
返回「首页」，并为「天气小组件」绑定动态字段内容。选择目标文本，并在右侧的文本内容区域选择「动态」，然后选择期望展示的目标属性。
参考的配置方式，如下图所示。
接下来进行预览，可以看到首页上方可以动态展示杭州的实时天气情况。
返回设计器，并将当前应用版本进行提交，保存一个版本：v1.3 集成天气小组件。
请查看：步骤七、自定义组件。