摘要：噓，華為雲內部都不知道的祕密玩法，我悄悄告訴您！
雙"魔"合璧慶雙節
↑開局一張圖，故事全靠編
華為雲的一站式開發平臺ModelArts和應用魔方AppCube居然能玩到一起，這是可能是華為雲官方自己也沒想到的場景，而我，從8月份開始體驗公測應用魔方AppCube以來，一路坎坷，從給AppCube提Bug，到等待新版本釋出完畢，再一步一步摸著石頭過河，一直在探索AppCube與ModelArts的結合，緣由很簡單--我希望低門檻開發AI應用、低門檻落地AI應用，不過，差強人意的是我在使用低程式碼平臺AppCube時，還是Copy了好些程式碼……但我還是堅持探索，今天趕在中秋國慶雙節之際，終於跑通了我的第一個落地Demo--命名實體識別。可以說這是前所未有的體驗！
緣起
應用魔方 AppCube（以下簡稱AppCube）是低程式碼應用開發平臺，顧名思義就如同魔方一樣，可以通過任意組合，排列各種模組化元素，建立功能各異的應用。AppCube是線上多租的應用開發和執行的aPaaS平臺。
就是這麼一個牛掰的低程式碼平臺深深地吸引了我，之前有用她完成過口罩分配系統的Demo，那時候好像還不叫AppCube。之後，很榮幸地參與了應用魔方AppCube的公測體驗，通過深度體驗AppCube，我進一步熟悉瞭解了她，加上剛好也在學習一站式AI開發平臺ModelArts，通過ModelArts學習了一些簡單AI模型的訓練和線上部署，然後也嘗試將這些AI服務“落地”--完成前端開發部署，有幸產出了基於Koa.js的體驗小Demo--今天，您存了嗎？。儘管很有趣，但還是擺脫不了對自由伺服器的依賴，遇到應用魔方AppCube讓我有了大膽的想法：結合ModelArts和AppCube實現AI線上服務的前端應用！於是，"JUST DO IT", 走上了一條無限踩坑的道路……
遇到的第一個坑，確是真·HW工程師給我挖的！呼叫過ModelArts線上服務的小夥伴都應該知道，我們在呼叫介面之前需要獲取賬號的AK和Sk，通過加密演算法簽名之後才能夠正常獲取呼叫的結果。整套流程本身是沒有任務問題的，但是通過AppCube去調取ModelArts的線上服務，總是無法正常調通，一直是返回Incorrect IAM authentication information，也就是說無法正常認證，原因也無非兩種，一是簽名之後的token不正確，二是客戶端(AppCube)的時間與服務端(ModelArts線上服務)的時間不一致且相差超過15分鐘。
經過反覆驗證，我確認是後者，於是提了8月18日晚上就提了工單，到8月20日晚上基本確定是AppCube的signer加密演算法寫得有點問題，然後就是漫長的等待發版……到9月16日終於等來了新版本並修復了這個坑。
然後，我開始“三天打魚兩天曬網”，又踩到了第二個坑--AppCube的標準頁面不支援匿名訪問，於是我趕緊想法將標準頁面轉為高階頁面，結果又遇到了第三個坑--由於我的標準頁面含有多語言元件導致轉化後的高階頁面仍然無法匿名訪問。於是，我開始了轉向高階頁面的開發……
然而，高階頁面確不是我想象的那麼高階，就好比等級高但是裝備還是得自己打，是的，高階頁面中沒有基礎的佈局，需要自行開發元件；高階頁面還需自行開發橋接器，因為AppCube的安全策略不允許前臺頁面直接呼叫後端服務。
9月的月末，基本在這些坑裡折騰……
ModelArts側的開發
對我來說，目前開(拷)發(貝)一個AI線上服務已經如探囊取物，畢竟ModelArts平臺就提供了各種Copy的能力：您可以基於自動學習開發AI線上服務；您也可以基於預置演算法或者訂閱演算法訓練並部署AI模型；您還可以從AI市場直接訂閱模型來開發AI線上服務，甚至還可以直接從OBS載入元模型。總之，也許您沒有AI基礎，通過一站式AI開發平臺ModelArts就能開發並部署一個AI線上服務。為了更加簡便，我採用的OBS元模型方式，分分鐘部署一個Bert命名實體識別線上服務。
簡單介紹一下操作流程：
0. 準備階段
- 註冊華為雲賬號--這是一把金鑰匙，開啟了我的“雲”世界。
- 訪問“我的憑證”獲取“訪問金鑰”--也就是AK/SK，這還是一把金鑰匙，是我通過開發工具訪問華為雲的身份憑證。
- 開通OBS並新建桶和資料夾--這是40G容量的金桶，用來存放我Copy過來的資料、模型、演算法……Y
- 開通ModelArts--這是真金白銀打造的一站式AI開發平臺，我卻揮霍著免費算力(學藝不精，不學無術，浪費資源)。
1. 開(拷)發(貝)階段
從AI市場資料集下載model到OBS
請訪問model-test:https://marketplace.huaweicloud.com/markets/aihub/datasets/detail/?content_id=23441bfe-8c6b-4d0c-8076-13252bde17c0, 點選頁面的下載按鈕，配置下OBS路徑，點選下一步即可下載model到OBS
從OBS匯入元模型
我們需要進入到ModelArts平臺點選模型管理 - 模型 - 匯入 - 從物件儲存服務（OBS）中選擇，這裡記得選擇元模型是選擇model資料夾的父級，會自動識別到Tensorflow引擎。點選立即建立就會自動構建模型。
2. 部署階段
部署是最簡單的一步，等待模型構建完畢點選部署 - 線上服務一路 Next 進行模型部署上線操作。稍等片刻，部署成功之後就是熟悉的線上除錯等步驟。
AppCube側開發
通過此次探索，我深刻地體會到AppCube的精妙之處--介是您沒有玩過的船新版本。就像上文中提到的那些坑，主要還是自身技術不硬，沒好好了解玩法和規則，然後就無限掉坑爬坑掉坑。不過，目標是明確的：一個頁面，有輸入框，有提交按鈕，有結果顯示，能呼叫AI服務。是不是超級簡單？簡單到我以為半個小時能搞定。結果……不說了，說多了都是淚！直接上手高階頁面開發，我要做高階Copy攻城獅！
高階頁面開發準備
- 自定義UI庫
在開發高階頁面前，您需要學習Widget、庫、橋接器、事件和動作等相關內容。沒辦法，摸著石頭過河，如果光腳的話，容易劃傷；先來一個MintUI(儘管已經過時了)，如果高階頁面要使用前端框架或元件庫，例如流行的Vue、Bootstrap、ElementUI等，需要將其製作成Library資產，然後上傳到環境中使用。本次高階頁面為自定義的Widget，我想用MintUI來完成前端佈局，那就需要將自定義庫進行上傳以及在Widget使用庫。好在官方文件提供了教科書般的Demo：管理並使用庫,步驟也簡單：
- 下載MintUI並上傳到高階頁面 > 庫
- 自定義Widget中引用MintUI：
packageinfo.json
"requires": [ { "name": "global_Vue", "version": "100.7" }, { "name":"bingobingotesthuaweicom_mintui", // 庫檔名稱和版本號在庫詳情頁面獲取 "version": "1.0" }]
- 工具包下載
開發高階頁面比較狂拽炫酷的方式就是使用Scaffolding離線開發Widget。Scaffolding是AppCube系統提供的一個腳手架工程，方便建立本地資產工程，用於本地開發Widget、本地調測後上傳至資產庫，也可以通過該工具下載Widget至本地。
對了Widget的概念非常不錯，玩出來Flutter的感覺，萬物皆Widget！您在瀏覽器中看到的一個系統網頁，即是一個頁面。Widget是可複用的高階頁面組成元素，一個高階頁面由一個或多個Widget拼裝而成。如果將一個高階頁面看成拼圖遊戲的完整圖案，那麼Widget相當於拼圖的每一小塊。而我們想在本地開發Widget就需要用到工具，這個工具有點特別，其實是一個前端的NPM包，我特意查了下，這個包不是公開的，需要我們從官方文件中下載：https://obs-ap1-appengine.obs.cn-north-1.myhuaweicloud.com/usermanual/assets_starter.zip。 如果後續版權允許的話，它應該會出現在NPM公共包中。說是工具，其實是一堆程式碼，依賴storybook來開發元件。從程式碼結構和bin目錄來看，工具包提供一個mango的命令列，我們可以通過mango ui開啟一個本地的元件開發環境，方便後續的開發除錯。當然，還需要設定並獲取客戶端ID和客戶端金鑰。
- 專案準備
AppCube有開發環境和執行環境，我們通過AppCube的控制檯進入到開發環境，新建一個空白的輕應用。從操作介面來看，應用魔方AppCube支援輕應用、行業應用、業務大屏以及移動小程式。目前構建的應用有四種釋出渠道：AppCube倉庫分發、Welink、訊盟以及下載到本地。關於專案的一些基本配置，這裡不再贅述，具體檢視官方文件的使用者指南。
高階頁面開發概要
- 線上開發指令碼及服務流
理論上，我們的前端業務是不直接呼叫後端介面的，這次的探索，我們把呼叫AI線上服務交給APPCube的後端邏輯了來處理，由APPCube開發的前端業務呼叫後端業務，由AppCube的後端業務去呼叫AI線上服務，這樣儘可能保障了我們傳輸過程中使用的敏感資料如AKSK不被洩露。於是，我們需要編寫指令碼，還需定義服務流、公共介面等，具體可查閱官方文件。如圖中，我們定義了三個指令碼：config--簡單配置AKSK及AI線上服務地址；singer--簽名用的，根據AKSK提供的Demo改寫使之適應AppCube;getSinger--也就是呼叫服務的指令碼，輸入body，返回請求AI線上服務的響應。
服務流也定義得十分簡單，只是呼叫了getSinger指令碼，然後在下邊服務中定義基於服務流的公共介面，給到橋接器方便前端頁面呼叫。
- 自定義Widget
當我們使用上文工具時，執行mango ui能開啟本地開發介面，如：http://localhost:8000/app/list。我們可以開發標準頁面元件、高階頁面元件以及Vue高階頁面元件。通過設定，我們能直接連線到AppCube的線上環境，可以和線上環境進行互動，如元件上傳下載、元件設定、元件編譯等。
- 自定義橋接器
有時候彎路走多了，路越走越彎。為什麼要自定義橋接器？因為自定義高階頁面中要呼叫服務可能就要用到橋接器！總之，從一開始的標準頁面不支援匿名訪問，我就走上了一條不斷踩坑的不歸之路。截止發稿，還有一個坑沒填上，所以儘管Demo已經開發完畢，開發環境能正常除錯，但是執行態還存在指令碼不存在或者未啟用的Bug，目前真·HW工程師正在全力技術支援中！說回怎麼自定義橋接器，三步走：
1.獲取Demo程式碼並修改
// 核心程式碼 var widgetBridge = thisObj.getConnectorInstanceByName('BertDemo_getAKSK'); // ... thisObj.callFlowConn("BertDemo_getAKSK", { service: "/BertDemo__AKSK/0.0.1/getAKSKFlow" },{},result =>{})
2.和自定義Widget一同釋出
3.在高階頁面中使用
釋出
AppCube的釋出流程就像是軟體開發的釋出流程：先編譯，再發布。在AppCube開發環境進入應用開發頁面，點選左下角編譯按鈕進行編譯，編譯成功之後，頁面會顯示“編譯XXX成功”。關閉編譯成功的視窗。再點選左下角釋出按鈕，在“釋出應用”頁面選擇“我的倉庫”。
釋出成功後，頁面顯示“程式包已經被成功上傳到我的倉庫。”。在App開發頁面左側單擊我的倉庫，可在“已釋出”下看到釋出的應用。點選頂部首頁按鈕進入首頁，在首頁單擊“管理”，選擇“應用管理 > 我的倉庫”可檢視到釋出的應用。
在AppCube開發環境右上角單擊使用者名稱，選擇“執行環境”。在總覽頁面選擇“我的倉庫”進入“我的倉庫”頁面。單擊“安裝”，在彈出的確認框單擊“確定”。安裝該應用；在左側選單選擇“總覽”，進入“總覽”頁，單擊“應用”，進入“應用程式列表”頁面……
儘管步驟有些繁瑣，不過文件中有詳盡的示意圖，一步一步跟著多走幾遍就熟悉了。
看來目前AppCube主要是面向企業開發者，Copy攻城獅看來需要放棄了！接下來，探索一下ModelArts和鴻蒙OS看看能不能也擦出點啥來。