【Copy攻城獅日志】ModelArts與AppCube雙“魔”合璧慶雙節

雙"魔"合璧慶雙節

噓，華為云內部都不知道的秘密玩法，我悄悄告訴您！

↑開局一張圖，故事全靠編

華為云的一站式開發平臺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工程師正在全力技術支持中！說回怎么自定義橋接器，三步走：

獲取Demo代碼并修改

//?核心代碼 ?var?widgetBridge?=?thisObj.getConnectorInstanceByName('BertDemo_getAKSK'); ?//?... ?thisObj.callFlowConn("BertDemo_getAKSK",?{ ???????????service:?"/BertDemo__AKSK/0.0.1/getAKSKFlow" ?????????},{},result?=>{})

和自定義Widget一同發布

在高級頁面中使用

發布

AppCube的發布流程就像是軟件開發的發布流程：先編譯，再發布。在AppCube開發環境進入應用開發頁面，點擊左下角編譯按鈕進行編譯，編譯成功之后，頁面會顯示“編譯XXX成功”。關閉編譯成功的窗口。再點擊左下角發布按鈕，在“發布應用”頁面選擇“我的倉庫”。發布成功后，頁面顯示“程序包已經被成功上傳到我的倉庫。”。在App開發頁面左側單擊我的倉庫，可在“已發布”下看到發布的應用。點擊頂部首頁按鈕進入首頁，在首頁單擊“管理”，選擇“應用管理 > 我的倉庫”可查看到發布的應用。

在AppCube開發環境右上角單擊用戶名，選擇“運行環境”。在總覽頁面選擇“我的倉庫”進入“我的倉庫”頁面。單擊“安裝”，在彈出的確認框單擊“確定”。安裝該應用；在左側菜單選擇“總覽”，進入“總覽”頁，單擊“應用”，進入“應用程序列表”頁面……

盡管步驟有些繁瑣，不過文檔中有詳盡的示意圖，一步一步跟著多走幾遍就熟悉了。

看來目前AppCube主要是面向企業開發者，Copy攻城獅看來需要放棄了！接下來，探索一下ModelArts和鴻蒙OS看看能不能也擦出點啥來。

應用魔方 AppCube AI開發平臺ModelArts

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。