摘要：元數據是業務流中前端和業務側實現共同使用的一種規范，是溝通前后端的橋梁，其通過統一的數據格式進行約束，從而約定前后端傳參。使用元數據，大幅提升了開發效率，又降低了維護及二次開發成本。
1 ROMA 業務流簡介
ROMA 業務流（以下簡稱“業務流”）是一個基於ROMA Connect平台的應用集成與數據開放服務，適用於跨實例、跨應用的企業系統集成場景。業務流支持通過可視化UI界面來創建任務，從而降低了不同經驗背景的用戶的開發門檻。
圖1-1 業務流demo
2 元數據概述
Metadata（以下稱作“元數據”）是業務流的一個重要概念，用於約束前端生成的數據模型，同時驅動業務的邏輯實現，是前端頁面和后端業務共同使用的一種規范。
在前端的實現中，元數據負責驅動前端框架，用於構建一個完全由元數據建模動態生成的界面。在業務流開發過程中，只需添加新的Json格式的元數據即可添加新的組件，而無需再進行前端開發，這實現了快速開發、減少維護的目標。
在業務側，處理程序是按照元數據模型實現的，這也就意味着用戶將會在前端輸入足夠執行業務側的數據從而正確運行業務邏輯。
並非為前端服務
需要注意的是，元數據並不是以前端開發為中心，它主要是為模型的生成器和模型消費者提供一致的通用建模。在業務流中，前端框架只是嚴格按照建模的概念生成業務數據模型。但是業務側不應受到前端的限制，應當適用於任何可以符合元數據正確生成數據模型的前端框架。
元數據的另一個核心用法是“驗證”，在后端服務中，服務應該在部署業務側之前利用元數據模型來驗證服務請求是否合法。
圖2-1 元數據驅動模型
3 元數據屬性
3.1 組件
組件是業務流任務中的基本單元，每個組件都有特定的功能，如“Open API”組件用於定義和開放一個API、“數據源”類型組件用於選擇數據源用於數據遷移或者數據開放、“腳本處理”組件用於使用腳本處理數據等，用戶通過配置和連接各種類型的組件進行業務編排。下圖是當前業務流提供的組件。
圖3-1 業務流組件
3.2 組件元數據
開發過程中，通過添加新的“組件元數據”即可生成新的組件。“組件元數據”模型包含前端輔助數據和業務側依賴的屬性。“組件元數據”的關鍵屬性如下表所示。
表3-1 “組件元數據”屬性
通過定義上述屬性，我們可以快速在前端添加新的組件。以下為一個類型為“sample_component”的元數據組件的示例。
{ "type":"sample_component", "categories":["sample"], "display":"sample component", "description":"Input types illustration sample component", "iconURL":"", "inputs":[ { "key":"parameter01", "display":"parameter 1", "type":"text", "placeholder":"A input hint message here.", "default":"default_value", "required":true }, { "key":"parameter02", "display":"parameter 2", "type":"text", "placeholder":"A input hint message here.", "default":"default_value", "required":true } ] }
根據上述元數據，前端渲染出的組件效果如下圖所示。
圖3-2 “sample_component”組件效果
點擊“sample_component”組件后，組件配置如下圖所示。
圖3-3 “sample_component”組件配置
用戶配置完成該組件並啟動業務流后，業務側將對接收的元數據進行解析。其中，業務側將根據“type”字段來確定執行邏輯。
{ "id": "UUID", "name": "name", "category": "sample", "description": "description" "metadata": { "type": "sample_component", "configuration": { "parameter01": "parameter01 value", "parameter02": "parameter02 value" } } }
3.3 輸入元數據
“組件元數據”的“inputs”屬性，代表了當前組件的輸入信息，其通過“輸入元數據”來定義。
“輸入元數據”是輸入參數的集合，它使得開發者可以用最少的代碼來提供業務處理所需的信息。“輸入元數據”基本屬性如下表所示。
表3-2 “輸入元數據”基本屬性
務流的元數據框架中，當前支持多種“輸入源數據”的參數類型，而且大多數類型都具有附加屬性。接下來將對部分“輸入源數據”的參數類型做簡要介紹。
3.3.1 Text
通用的的純文本輸入類型。附加屬性包括“maxlength”和“pattern”。
“Text”類型輸入參數的示例如下所示。
{ "key":"text_sample", "display":"Text Input", "type":"text", "placeholder":"A input hint message here.", "default":"default input", "required":true, "maxlength":20, "pattern":"/.+" }
前端渲染效果如下圖所示。
圖3-4 “Text”類型輸入參數示例
3.3.2 TextArea
多行文本區域輸入類型。 附加屬性為“maxlength”。
“TextArea”類型輸入參數的示例如下所示。
{ "key":"textarea_sample", "display":"Text Area Input", "type":"textarea", "placeholder":"A input hint message here.", "required":true, "maxlength":100 }
前端渲染效果如下圖所示。
圖3-5 “TextArea”類型輸入參數示例
3.3.3 Number
具有范圍和步長支持的數字輸入字段。 附加屬性包括“min”、“max”和“step”。
“Number”類型輸入參數的示例如下所示。
{ "key":"number_sample", "display":"Numeric Input", "type":"number", "default":50, "min":"0", "max":"100", "step":"1", "required":true }
前端渲染效果如下圖所示。
圖3-6 “Number”類型輸入參數示例
3.3.4 Password
帶掩碼的文本輸入類型，用於密碼文本等輸入。
“Password”類型輸入參數的示例如下所示。
{ "key":"password_sample", "display":"Password Input", "type":"password", "default":"default", "required":true }
前端渲染效果如下圖所示。
圖3-7 “Password”類型輸入參數示例
3.3.5 Selection
“Selection”代表下拉選擇列表，分為“靜態選擇”和“動態選擇”。
- 1. 靜態選擇
預定義值的靜態選擇列表。附加屬性為“choices”。
“靜態選擇”類型輸入參數的示例如下所示。
{ "key":"selection_sample", "display":"Static Selection Sample", "type":"selection", "default":"default_value", "required":true, "choices":[ { "display":"item_1", "value":"1" }, { "display":"item_2", "value":"2" }, { "display":"item_default", "value":"default_value" } ] }
前端渲染效果如下圖所示。
圖3-8 “靜態選擇”類型輸入參數示例
- 2. 動態選擇
運行時使用外部REST API的請求結果作為選擇列表。 附加屬性如下表所示。
表3-3
“動態選擇”類型輸入參數的示例如下所示。
{ "key":"selection_sample", "display":"Dynamic Selection Sample", "type":"selection", "required":true, "selector":{ "uri":"http://my.domain.com/v1/samples", "method":"GET", "placeholder":"loading...", "selector_display":"$.samples[*].sample_name", "selector_value":"$.samples[*].sample_id" } }
點擊該組件時，將自動調用“http://my.domain.com/v1/samples”的請求，並將請求結果放入選擇列表。請求結果如下所示。
{ "samples":[ { "sample_name":"sample01", "sample_id":"01" }, { "sample_name":"sample02", "sample_id":"02" }, { "sample_name":"sample03", "sample_id":"03" } ] }
前端渲染效果如下圖所示。
圖3-9 “動態選擇”類型輸入參數示例
3.3.6 Tableinput
表格輸入。附加屬性為“columns”。
“columns”類型輸入參數的示例如下所示。{ "key":"tableinput_sample", "display":"Table Input Sample", "description":"Table with custom columns", "required":true, "type":"tableinput", "columns":[ { "key":"key-1", "display":"col-1", "default":"", "type":"text", "required":true }, { "key":"key-2", "display":"col-2", "default":"default_value", "type":"text", "required":true }, { "key":"key-3", "display":"col-3", "placeholder":"a placeholder message", "type":"text", "required":true } ] }
前端渲染效果如下圖所示。
圖3-10 “Tableinput”類型輸入參數示例
4 結語
元數據是業務流中前端和業務側實現共同使用的一種規范，是溝通前后端的橋梁，其通過統一的數據格式進行約束，從而約定前后端傳參。使用元數據，大幅提升了開發效率，又降低了維護及二次開發成本。正是通過元數據渲染的方式，助力業務流服務的快速發展，幫助企業快速、簡單的聯接雲上雲下，消除數字鴻溝，構建業務敏捷性，驅動數字化轉型。
本文分享自華為雲社區《前端開發還可以這么玩？ROMA 業務流元數據實踐分享》，原文作者：中間件小哥。