由於工作原因，筆者經常有一些建立問卷調查的需求。雖然微信小程式裡有不少快速建立問卷調查的工具，但是這些工具沒有提供定製化功能，因而無法滿足我的需求。

近日在華為雲社群瞭解到華為雲上提供的 `應用魔方 AppCube` 這個工具，既能快速建立問卷調查，又為開發人員提供了定製化功能，因此筆者第一時間就申請了試用，將使用體驗透過本文分享給大家。

華為雲應用魔方 AppCube 是一款零程式碼和低程式碼應用開發平臺，源於華為應用開發和數字化轉型的實踐，提供了雲上無碼化、低碼化、支援多碼化的應用開發模式，遮蔽了技術的複雜性，提升了企業開發的效率。

每一位開發人員都可以透過點選下圖的 `免費試用` 來對其進行體驗。

![](https://img-blog.csdnimg.cn/img_convert/7e64c18cdfafb9736aaf7b7591862938.png)

我們進入 AppCube 的工作臺，點選`開始建立->使用模板新建`：

![](https://img-blog.csdnimg.cn/img_convert/40a18f059017a84c77c2cd5887b6ae77.png)

在低程式碼專區的模板列表裡，找到 `問卷調查(高階)`模板，

![](https://img-blog.csdnimg.cn/img_convert/cac98ac29459dc135a90f274226d8d66.png)

單擊進入明細頁面，點選 `安裝模板`即可：
![](https://img-blog.csdnimg.cn/img_convert/2fcc022dae25dea8341949404de5e502.png)

我們會看到開啟了一個線上編輯器，螢幕左側的專案資料夾內，包含的就是這個問卷調查應用的實現原始碼，全部透過模板生成。本文我們首先來學習這個建立好的問卷調查應用如何使用，然後再來探究透過 AppCube 自動生成的原始碼的一些細節。

![](https://img-blog.csdnimg.cn/img_convert/f87176b85491aefbe4b899e4b1f03388.png)

點選線上 IDE 左側這個 `檢視應用` 按鈕：
![](https://img-blog.csdnimg.cn/img_convert/d2212111c19ac23b2c75d9e341601db3.png)

能看到下面的問卷管理介面(Home Page)。我們在這裡可以建立問卷調查的例項。點選 `建立問卷`：

![](https://img-blog.csdnimg.cn/img_convert/0240fcade0669e7324e633c971ea0c25.png)

可以維護問卷標題，Banner 和描述資訊，讓填寫問卷的人員，能夠一目瞭然知道該問卷應該如何填寫，以及調查的目的：
![](https://img-blog.csdnimg.cn/img_convert/c54dd5765561c16fb8b2e6a1eaea4d18.png)

![](https://img-blog.csdnimg.cn/img_convert/f27a8fe728b3746f04e3c720121a1d78.png)

點選 `新增問題`，建立可供使用者回答的問題選項。比如我們建立的問卷，想蒐集程式設計師日常工作中使用的程式語言種類。

![](https://img-blog.csdnimg.cn/img_convert/fe72406e61726e104e2a6ffaf48ecc53.png)

點選儲存按鈕，然後點選這個紙飛機圖示進行釋出：
![](https://img-blog.csdnimg.cn/img_convert/8f9dbb6e69e012b31ad0eddc0f8add82.png)

當這份問卷的狀態變為 `已釋出` 後，可以透過點選 `分享` 按鈕，以二維碼或者連結的形式，把這份問卷投遞到目標群體去。

![](https://img-blog.csdnimg.cn/img_convert/c63489d7377afe66a8fc52a0927f8dae.png)

![](https://img-blog.csdnimg.cn/img_convert/e01659ba719e387cd8012c7f13b15b74.png)

下圖是我在手機上掃描二維碼後開啟的問卷介面：
![](https://img-blog.csdnimg.cn/img_convert/78d63fc500f6563a2e73d485bf7a1516.png)

提交之後，在問卷調查管理頁面，點選 `統計`按鈕：

![](https://img-blog.csdnimg.cn/img_convert/b879bbc443615363d13bc8e08db7ec8a.png)

可以看到問卷調查的填寫情況：
![](https://img-blog.csdnimg.cn/img_convert/4d9e674aa984059ad6da10d3d908d931.png)

以上不難看出，華為雲應用魔方提供的基於模板建立的問卷調查建立程式，其使用體驗還是非常順暢的，上手也沒有任何難度。下面我們就來了解一下這個基於模板建立的應用的一些技術細節。

我們回到最初的線上 IDE 介面，左側的 Logic，Model 和 Page，我們可以類比成一個基於 MVC 架構的 Web 應用的控制器(Controller)，模型(Model) 和檢視層(View).

單擊 Page 資料夾下以 HomePage 結尾的檔案，發現這就是我們點選 `建立問卷`按鈕的起始頁面。

![](https://img-blog.csdnimg.cn/img_convert/bb11ef580e459c197e3493b529ee695c.png)

我們無法直接檢視這個頁面檢視實現的原始碼，這也是 `低程式碼解決方案`的宗旨：將應用的底層技術細節進行封裝，確保終端使用者能夠`透過圖形化的使用者介面`, 來開發滿足自己實際需要的應用程式。

我們點選`獲取鎖`這個按鈕，從而進入該頁面的編輯模式：

![](https://img-blog.csdnimg.cn/img_convert/96bfefdd2fe6a7263e685176552ad6fd.png)

然後單擊 `建立問卷` 按鈕，就可以對這個按鈕進行自定義編輯了，比如修改其文字：

![](https://img-blog.csdnimg.cn/img_convert/274c6002c03200ed962fcd3e6901f0ae.png)

我們把 `建立問卷` 修改成 `建立一份新的問卷`：
![](https://img-blog.csdnimg.cn/img_convert/7d12fdf2fe3788bcb16f72eafa4add46.png)

還可以對按鈕樣式進行修改，比如背景色，字型，陰影等等。

![](https://img-blog.csdnimg.cn/img_convert/a3fca3aceec7d135d81a4ff9c37ed745.png)

我們對按鈕的外觀進行微調後，重新點選`檢視應用`, 會發現我們對按鈕的文字和背景色的調整，已經立即生效了：

![](https://img-blog.csdnimg.cn/img_convert/8b665c678634989f7fa27b7fb48742ea.png)

在 Model 資料夾裡，我們可以檢視檢視裡每個區域的 UI 元素，到底繫結到了哪個模型欄位上。

我們選中下圖高亮的 Model 資料夾內的檔案，點選超連結 `Questionaire Definition Detail`：
![](https://img-blog.csdnimg.cn/img_convert/6da281017722bf71fa6827bd5d9647f1.png)

然後單擊 Name 欄位，就可以檢視到，問卷建立檢視頁面裡，顯示問卷名稱的介面元素，繫結的資料模型欄位為 `form0.name`

![](https://img-blog.csdnimg.cn/img_convert/e1a8e7a5e091516ef6ce9b4911ba675e.png)

如果我們之前在 Page 資料夾裡的頁面裡新增了 UI 自定義欄位，並且又想讓那些新增的自定義欄位支援資料繫結，那麼可以在此透過 `新增模型` 的按鈕，建立對應的資料模型欄位：

![](https://img-blog.csdnimg.cn/img_convert/fbd9db65d3237bea9d54af707ed453cf.png)

在 Model 檔案編輯頁面裡，我們可以給模型欄位增添一些表單校驗邏輯，包括正規表示式的校驗支援等等。

![](https://img-blog.csdnimg.cn/img_convert/23df5be9500301927809e98d5289adf6.png)

在 Logic 資料夾裡，我們可以透過閱讀原始碼的方式，瞭解問卷應用的控制器層面的編寫邏輯。

我們透過一個實際的例子來理解。下圖是我們檢視問卷提交結果的頁面：

![](https://img-blog.csdnimg.cn/img_convert/e8dbf2b9edfcf335b00c424bfad3077b.png)

我們開啟 Chrome 開發者工具，重新整理頁面，在 network 皮膚，能夠看到下列的 HTTP 請求。從這些請求裡，很容易就能找到返回問卷提交結果的 HTTP 請求，url 如下：

`https://appcube.cn-north-4.huaweicloud.com/service/N277027076__Questionnaire/0.1.0/queryQuestionaireStats?questionaireDefId=cSOm000000wbWfX1Ak1g`

從 HTTP 請求的響應結構裡能看出，問卷問題的答案，ABAP，Java 和 JavaScript 三門語言分別有一份答案，暫時沒有人選擇 `其他`。

這個 HTTP 請求的 query 引數名稱為 `questionaireDefId`，其值為當前問卷應用定義的技術 id：

![](https://img-blog.csdnimg.cn/img_convert/8862a04959307a8eea7eb94b8f4089e2.png)

我們回到線上 IDE，使用 Visual Studio Code 的快捷鍵 `Ctrl+P`，輸入剛剛在 Chrome 開發者工具 network 皮膚觀測到的 HTTP 請求包含的關鍵字 `stat`，搜尋結果列表裡最後一條 `queryQuestionaireStats`，就是這個 HTTP 請求的後臺實現所在。

![](https://img-blog.csdnimg.cn/img_convert/916bdf6eab61cbff51cbb08004a0d7d1.png)

單擊進入這條搜尋結果，然後雙擊下圖這個 `Script0` 圖示：

![](https://img-blog.csdnimg.cn/img_convert/77368ba0c30000a00ec59a82f0b1730d.png)

然後就能看到這個請求詳細的實現程式碼了：

第三行的 `import * as db from 'db'`，提示我們這個實現檔案裡包含了資料庫的操作。

![](https://img-blog.csdnimg.cn/img_convert/822a506331ec19b1f70fe6b9a102349d.png)

來到名為 `Main` 的 class，這就是返回問卷填寫結果的 HTTP 請求的後臺實現入口。圖例1 的 description 欄位，說明這個方法用於實現 `Query Questionaire Stats` 功能，圖例2 的 QuestonaireDefinition.get 方法，透過 Questionaire 定義 id，返回該問卷的模型明細，然後在圖例3 透過拼接資料庫查詢條件 `db.Condition`，為即將發起的資料庫查詢做準備。

![](https://img-blog.csdnimg.cn/img_convert/5db36804e01c5a8b2f95d3ccd162ec0c.png)

最後呼叫第 151 行的 list 方法進行資料庫查詢操作。

![](https://img-blog.csdnimg.cn/img_convert/2d48a6eb3bb85752763300e6dd719c3e.png)

我們按住 Ctrl 不放，再單擊上圖的 list 方法，即可跳轉到這個方法的實現檔案裡。這些快捷鍵(包括前文提到的 Ctrl + P)其實都是 Visual Studio Code 的常規操作。

![](https://img-blog.csdnimg.cn/img_convert/7bff45fcf34b052585e2899ade6b2630.png)

# 總結

本文介紹了透過華為雲應用魔方 AppCube 來實現一個問卷調查管理應用的低程式碼實現，筆者首先給大家展示了基於 AppCube 的模板來建立該應用整個過程的高效和流程，接著簡要分析了 AppCube 自動建立的資原始檔的一些細節。從建立和使用建立出來的應用相信大家不難看出：

- 使用 AppCube 建立低程式碼應用沒有任何技術門檻，即使沒有程式設計背景的使用者也能輕鬆掌握；
- 基於 AppCube 標準模板建立的低程式碼應用，給有一定程式設計技術功底的使用者提供了諸多可以靈活對該應用進行定製化的途徑，高階使用者可以利用這些途徑來完成專案中各種個性化的需求。

華為雲應用魔方 AppCube 建立問卷調查應用的使用體驗

相關文章