課程說明
本節將介紹如何利用Buildrun低代碼開發平臺完成應用的頁面創建和菜單設置，涉及的主要內容有：
-
BuildRun用戶界面體系
-
創建產品管理頁面
-
創建設備管理組頁面
-
菜單設置
-
應用構建檢查
-
發佈應用
課程內容
01 Buildrun 用戶界面體系
▍1.1 Buildrun UI體系架構
Buildrun UI定義了構建Buildrun應用程序用戶界面的方法，下圖展示了Buildrun UI的體系架構：
- Buildrun UI框架：是所有用戶界面的基礎，提供了滿足Web和移動應用的內置UI模式供您使用，並允許您創建自定義組件。
- 內置模板：由Buildrun官方開發和維護，根據行業最佳實踐形成一套界面元素佈局和風格。
- 自定義模板：根據用戶的用戶界面要求，形成獨特的風格，請參考官方文檔。
- 低代碼應用：低代碼應用包括了所有的模塊，包括前端頁面、頁面流、邏輯流和後端代碼。
▍1.2 頁面的結構
Buildrun的所有用戶界面都是由頁面構成，下圖展示了頁面的結構：
- Section ：用來組織頁面上的內容窗口，如表格顯示窗口、新建窗口和更新窗口等。
- 控件：用來輸入、顯示控件，也包括控制控件的控件，如表單、表格、字段、列表等控件。
- 頁面流：用來編排前端交互的邏輯，通過按鈕控件來觸發頁面流。
- 流程組件：組成頁面流的節點，包括常規操作、數據庫操作、頁面操作和變量操作幾類。
02 創建產品管理頁面
選擇應用設計器左側的頁面圖標進入界面列表窗口：
1. 選擇右上角的創建鏈接進入創建頁面窗口，錄入如下信息：
- 名稱：產品管理
- 編碼：PRODUCTS
- 標題：產品管理
2. 填寫信息完成後，點擊創建頁面窗口左下角的 “創建” 按鈕完成頁面創建後進入頁面設計視圖。
3. 點擊頂端的數據源圖標，切換到數據源定義視圖。
4. 點擊左上角的 (➕) 加號，從彈出的列表中選擇產品創建產品數據源。
5. 點擊頂端的頁面設計圖標，切換到頁面設計界面。
▍ 2.1 定義產品列表Section
1. 左邊頁面結構視圖中展開產品節點，選擇下面的默認Section節點，在右側的Section屬性下修改信息爲：
- 名稱：產品列表
- 編碼：listProducts
2. 拖動右側組件列表下的數據組件->列表組件到中間區域，看到虛框出現後釋放會彈出組件添加數據源窗口，看到已經默認選中產品這個數據源，直接點擊確定按鈕。
3. 左邊頁面結構視圖中展開產品節點，選擇下面的產品列表->表格組件節點，從右側字段下拖動字段到中間配置區域：
- 搜索（高級搜索）默認字段：產品名稱、產品類型
- 列表字段：產品名稱、產品類型、雲端協議、產品描述
4. 中間配置區域添加如下按鈕：
- 列表按鈕：添加
- 列表行內按鈕：編輯
5. 點擊右上角的保存編輯按鈕保存。
▍2.2 定義創建產品Section
1. 鼠標移動到左邊頁面結構視圖中產品節點後面的加號➕，選擇 添加Section 彈出 在頁面”產品“中創建Section 窗口中輸入信息：
- 名稱：新增產品
- 編碼：createProduct
2. 拖動右側組件列表下的數據組件->表單組件到中間區域，看到虛框出現後釋放會彈出組件添加數據源窗口，看到已經默認選中產品這個數據源，直接點擊 確定 按鈕。
3. 左邊頁面結構視圖中選擇新增產品->表單組件節點，從右側字段下拖動字段到中間配置區域，形成兩欄佈局：
- 第一行：產品名稱、雲端協議
- 第二行：產品類型、產品描述
4. 選中新增產品Section
5. Section按鈕區添加增加按鈕：
- 按鈕文字：增加** ；
- 按鈕圖標：add ；
- 數據源：產品；
- dataset方法：提交；
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：新增產品
6. Section按鈕區添加取消按鈕：
- 按鈕文字：取消 ；
- 按鈕圖標：cancel ；
- 數據源：產品 ；
- dataset方法：刪除；
- 操作的記錄：當前記錄
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：新增產品
7. 點擊右上角的保存編輯按鈕保存。
▍2.3 定義更新產品Section
1. 鼠標移動到左邊頁面結構視圖中產品節點後面的加號➕，選擇添加Section彈出在頁面”產品“中創建Section窗口中輸入信息：
- 名稱：更新產品
- 編碼：updateProduct
2. 拖動右側組件列表下的數據組件->表單組件到中間區域，看到虛框出現後釋放會彈出組件添加數據源窗口，看到已經默認選中產品這個數據源，直接點擊 確定 按鈕。
3. 左邊頁面結構視圖中選擇更新產品->表單組件節點，從右側字段下拖動字段到中間配置區域，形成一欄兩行的佈局：
- 第一行：產品名稱
- 第二行：產品描述
4. 點擊右上角的保存編輯按鈕保存。
5. 選中更新產品Section
6. Section按鈕區添加更新按鈕：
- 按鈕文字：更新**；
- 按鈕圖標：save ；
- 數據源：產品 ；
- dataset方法：提交；
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：更新產品
7. Section按鈕區添加取消按鈕：
- 按鈕文字：取消 ；
- 按鈕圖標：cancel ；
- 數據源：產品 ；
- dataset方法：重置；
- 操作的記錄：當前記錄
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：更新產品
8. 點擊右上角的保存編輯按鈕保存。
▍2.4 產品列表Section中關聯創建產品和更新產品Section
1. 左邊頁面結構視圖中選擇產品列表->表格組件
2. 設置列表按鈕 添加的屬性：
- 按鈕圖標：add
- 後處理動作：打開Section
- 彈出Section寬度：中
- 後處理動作打開的Section：新增產品
3. 設置列表行內按鈕 編輯的屬性：
- 按鈕圖標：mode_edit
- 後處理動作：打開Section
- 彈出Section寬度：中
- 後處理動作打開的Section：更新產品
4.點擊右上角的保存編輯按鈕保存。
03 創建設備管理組頁面
選擇應用設計器左側的頁面圖標進入界面列表窗口：
1. 選擇右上角的 創建 鏈接進入創建頁面窗口，錄入如下信息：
- 名稱：設備組管理
- 編碼：DEVICE_GROUPS
- 標題：設備組管理
2. 填寫信息完成後，點擊創建頁面窗口左下角的 “創建” 按鈕完成頁面創建後進入頁面設計視圖。
3. 點擊頂端的數據源圖標，切換到數據源定義視圖。
4. 點擊左上角的 (➕) 加號，從彈出的列表中選擇設備組創建產品數據源。
5. 點擊頂端的頁面設計圖標，切換到頁面設計界面。
▍3.1 定義設備組列表Section
1. 左邊頁面結構視圖中展開產品節點，選擇下面的默認Section節點，在右側的Section屬性下修改信息爲：
- 名稱：設備組列表
- 編碼：listGroups。
2. 拖動右側組件列表下的數據組件->列表組件到中間區域，看到虛框出現後釋放會彈出組件添加數據源窗口，看到已經默認選中設備組這個數據源，直接點擊確定按鈕。
3. 左邊頁面結構視圖中展開設備組節點，選擇下面的設備組列表->表格組件節點，從右側字段下拖動字段到中間配置區域：
- 搜索（高級搜索）默認字段：組名稱
- 列表字段：組名稱、組描述
4. 中間配置區域添加如下按鈕：
- 列表按鈕：添加
- 列表行內按鈕：編輯
5. 點擊右上角的保存編輯按鈕保存。
▍3.2 定義創建設備組Section
1. 鼠標移動到左邊頁面結構視圖中設備組節點後面的加號➕，選擇添加Section彈出在頁面”設備組“中創建Section窗口中輸入信息：
- 名稱：新增設備組
- 編碼：createGroup
2. 拖動右側組件列表下的數據組件->表單組件到中間區域，看到虛框出現後釋放會彈出組件添加數據源窗口，看到已經默認選中設備組這個數據源，直接點擊確定按鈕。
3. 左邊頁面結構視圖中選擇 新增產品->表單組件 節點，從右側字段下拖動字段到中間配置區域，形成兩欄佈局：
- 第一行：組名稱
- 第二行：組描述
4. 選中新增設備組Section
5. Section按鈕區添加增加按鈕：
- 按鈕文字：增加** ；
- 按鈕圖標：add ；
- 數據源：設備組；
- dataset方法：提交；
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：新增設備組
6. Section按鈕區添加取消按鈕：
- 按鈕文字：取消 ；
- 按鈕圖標：cancel ；
- 數據源：設備組；
- dataset方法：刪除；
- 操作的記錄：當前記錄
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：新增設備組
7. 點擊右上角的保存編輯按鈕保存。
▍3.3 定義更新設備組Section
1. 鼠標移動到左邊頁面結構視圖中設備組節點後面的加號➕，選擇添加Section彈出在頁面”設備組“中創建Section窗口中輸入信息：
- 名稱：更新設備組
- 編碼：updateGroup
2. 拖動右側組件列表下的數據組件->表單組件到中間區域，看到虛框出現後釋放會彈出組件添加數據源窗口，看到已經默認選中設備組這個數據源，直接點擊確定按鈕。
3. 左邊頁面結構視圖中選擇更新產品->表單組件節點，從右側字段下拖動字段到中間配置區域，形成一欄兩行的佈局：
- 第一行：組名稱
- 第二行：組描述
4. 點擊右上角的保存編輯按鈕保存。
5. 選中更新設備組Section
6. Section按鈕區添加更新按鈕：
- 按鈕文字：更新**；
- 按鈕圖標：save ；
- 數據源：設備組 ；
- dataset方法：提交；
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：更新設備組
7. Section按鈕區添加取消按鈕：
- 按鈕文字：取消 ；
- 按鈕圖標：cancel ；
- 數據源：設備組；
- dataset方法：重置；
- 操作的記錄：當前記錄
- 後處理動作：關閉Section；
- 後處理動作關閉的Section：更新設備組
8. 點擊右上角的保存編輯按鈕保存。
▍3.4 設備組列表Section中關聯創建設備組和更新設備組Section
1. 左邊頁面結構視圖中選擇設備組列表->表格組件
2. 設置列表按鈕 添加的屬性：
- 按鈕圖標：add
- 後處理動作：打開Section
- 彈出Section寬度：中
- 後處理動作打開的Section：新增設備組
3. 設置列表行內按鈕 編輯的屬性：
- 按鈕圖標：mode_edit
- 後處理動作：打開Section
- 彈出Section寬度：中
- 後處理動作打開的Section：更新設備組
4.點擊右上角的保存編輯按鈕保存。
04 菜單設置
選擇應用設計器左側的菜單管理圖標進入菜單管理界面，添加如下菜單項：
1. 導航名稱：物聯網；
2. 導航名稱：物聯網管理；
3. 導航名稱：產品管理，跳轉頁面：產品；
4. 導航名稱：設備組，跳轉頁面：設備組。
05 應用構建檢查
點擊應用設計器頂部右上角的 檢查 按鈕，對低代碼應用構建過程中產生的內容進行檢查，並給出存在錯誤的地方，開發人員可以進行快速的修復。
06 發佈應用
▍6.1 發佈準備
選擇應用設計器左側底部的服務配置圖標進入服務配置窗口：
1. 切換到切換到用戶角色標籤頁，選中是否啓用默認用戶 ，輸入如下信息：
- 用戶名 ：**（自行設置）；
- 郵箱 ：註冊郵箱即可，後續登錄應用時以郵箱作爲用戶名；
- 密碼 ：**（自行設置）
- 角色名稱 ：briot用戶角色
2. 切換到發佈配置標籤頁，選擇頂部的創建試用發佈設置，可以看到創建了物聯網低代碼服務(試用配置) 發佈配置，等待配置的狀態變爲“已激活”狀態後可以使用
發佈準備是一次性設置，只有第一次發佈應用時需要進行配置
▍6.2 發佈應用
選擇應用設計器頂部右上角發佈按鈕發佈應用，選擇物聯網低代碼服務(試用配置) 發佈配置，點擊確定按鈕開始發佈應用，等待應用發佈完成。
點擊發布成功的應用鏈接（圖上紅框位置），使用6.1.1中定義的用戶信息登錄應用(郵箱/密碼)
點擊表格左上角的添加鏈接創建設備組：
創建如下的設備組信息：
選擇產品管理菜單，定義產品信息：
遇到問題怎麼辦
在Buildrun使用過程中，任何平臺的問題和建議，都可以點擊頁面右下角用戶反饋按鈕，實時向開發團隊提交反饋，我們會在第一時間處理。
前三節開發課程回顧
這一節完成了設備組和產品管理的功能構建，下一節將介紹如何創建設備功能，本系列開發教程不斷更新中，歡迎持續關注。
關於BuildRun
BuildRun帶來了多雲架構環境下基於視覺的企業級應用創建、集成、部署、生命週期管理和分發的能力，由開源Choerodon豬齒魚核心團隊創立的BuildRun公司（上海翹騰科技有限公司）的使命是以雲原生的現代化軟件架構來幫助企業提升軟件開發生產力和業務敏捷性，它提供企業級DevOps平臺和企業級低代碼開發平臺，幫助隱藏應用所依賴的基礎環境的複雜性，讓每個人都只需要專注在業務邏輯上，以新的方式讓團隊能夠快速、持續地將他們的想法轉化爲真正的商業價值。
歡迎免費註冊，體驗試用低代碼應用開發
-
微信：BuildRun低代碼開發平臺