摘要：噓，華為雲内部都不知道的秘密玩法，我悄悄告訴您！
雙"魔"合璧慶雙節
↑開局一張圖，故事全靠編
華為雲的一站式開發平台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看看能不能也擦出點啥來。
點選關注，第一時間了解華為雲新鮮技術~