如何使用低代碼開發平臺快速創建一個應用 | 實例演示

​BrApps企業級低代碼開發平臺基於拖拽式的開發方式,提供豐富的服務組件來滿足企業數字化應用的設計、構建、集成、部署和管理,賦能各團隊來幫助他們構建全場景的數字化應用。

本文會以一個應用創建實例爲大家介紹使用BrApps開發應用的具體流程,將實際演示如何簡單創建一個產品管理系統。

主要過程包括以下步驟:

  • 創建應用服務

  • 創建應用

    1. 創建業務對象

    2. 創建選項集

    3. 創建應用頁面

    4.創建應用菜單

  • 發佈應用

該系統主要業務功能包括:產品管理,分類管理,子分類管理和標籤管理,整個系統的邏輯圖如圖1所示。

  

圖1

全部詳細的操作,可至微信/官網觀看。

創建一個應用服務

在開始應用設計前,需要先創建一個低代碼應用服務以及對應的項目。

  • 在組織層項目列表頁面右上方,點擊“創建低代碼服務”按鈕(服務編碼建議與本組織有關,避免與其他服務重複。)
  • 填寫應用服務信息後,選擇“創建新項目”,同步填寫創建對應項目。

*注:初次試用低代碼開發功能必須創建新的項目,不可使用系統內默認創建項目“公司內銷平臺”。

創建應用

應用包含基礎頁面和頁面內容(業務對象和選項集),在設計頁面前,需要先補充頁面所需要的數據內容,隨後通過添加組件來組成頁面框架,通過創建UIflow來完善邏輯。

01 創建業務對象

第一步:創建單個業務對象

  • 在業務對象頁面,點擊“創建業務對象”按鈕
  • 分別創建名爲“產品”、“分類”、“子分類"、"標籤"、"產品標籤"的5個業務對象

第二步:添加業務對象屬性

點擊某個業務對象下方的“+”按鈕,添加屬性,並對該屬性進行設置,包括是否存儲、必填、是否可搜索、組件,此處以業務對象標籤爲例進行說明。

  • 點擊業務對象標籤下方的加號,添加屬性,依次輸入以下內容:

    • 名稱:名稱

    • 編碼:NAME

    • 組件選擇“文本”,最大長度爲60,並選擇單行文本

  • 點擊創建按鈕即可

* 依次添加產品、分類、子分類、標籤、產品標籤5個業務對象的屬性,具體需要添加的屬性參照圖1所示。

第三步 創建關聯值列表

點擊業務對象“標籤”上的編輯按鈕,進入該業務對象詳情設置界面

  • 點擊關聯值列表上方的“創建關聯值列表”按鈕,創建名爲“選擇分類”的關聯值列表

  • 點擊名稱,進入關聯值列表編輯界面,在頁面設計中,從左側“字段”工具欄中將“名稱”和“創建時間”兩個字段拖入列表中;在“關聯值列表屬性”中勾選可搜索>高級搜索;在高級搜索默認字段中拖入“名稱”字段

* 其他業務對象的關聯值列表創建詳情請參照視頻。

02 創建選項集

第一步 創建選項集

  • 在選項集頁面,點擊“創建選項集”按鈕

  • 創建產品選項集,添加選項“國內”和“國外”

第二步 將選項集與業務對象關聯

  • 進入業務對象頁面,選擇業務對象“產品”,點擊添加屬性“產地”

  • 屬性組件設置爲“單選”,選項集選擇“產品”

03 創建應用頁面

此處文字僅展示“標籤管理”頁面的創建,其他頁面的創建詳情請查看視頻。

第一步 創建頁面

從菜單欄進入頁面界面,點擊“創建頁面”按鈕,依次輸入以下信息:

  • 名稱:標籤管理

  • 編號:tag_manage

  • 標題:標籤管理

第二步 添加Section

創建頁面會同時創建一個默認section,點擊導航欄的“默認section”,進入該section頁面設計界面。(或者點擊右側頁面導航欄標籤管理頁面名稱後的“+”按鈕,選擇“添加section”)

第三步 添加數據源

點擊頁面上方的“數據源”,切換到默認section數據源界面,點擊“+”按鈕,選擇添加數據源“標籤”。

第四步 添加頁面組件

切換到默認section頁面設計界面

  • 用鼠標從左側工作欄的組件列表中拖入“列表”組件,併爲該組件添加數據源“標籤”,此時導航欄“默認section”下會新建一個“表格組件”

第五步 編輯組件視圖

點擊導航中“默認section”下的“表格組件”,編輯該組件視圖

  • 在右側工具欄設置組件的視圖屬性,分別選擇

    • 可搜索>可高級搜索

    • 可編輯

    • 可行內編輯

  • 編輯組件中涉及的字段,可從右側工具欄的字段列表中,直接拖動字段:

    • 在搜索(高級搜索)下的默認字段中,拖入字段“名稱(更新人)”

    • 在列表字段中,“拖入名稱(更新人)”、“創建時間(創建人)”

    • 在列表按鈕中通過勾選快速創建“添加”、“刪除”、“保存”、“查詢”四個按鈕

    • 在列表行內按鈕中快速創建“刪除”按鈕

第六步 添加UIflow

1. 點擊右側頁面導航欄標籤管理頁面名稱後的“+”按鈕,選擇“添加UIflow”,輸入以下信息:

  • 名稱:創建新的標籤

  • 編碼:create_new_tag

2. 點擊UIflow名稱進入流程設計界面

  • 從左側流程組件中,直接拖動“新增”組件至流程線上,點擊該組件,在工具欄中設置屬性

    • 目標屬性:名稱-NAME

    • 固定值爲:test123

    • 數據源爲“標籤

    • 添加初始值:

    • 節點說明爲:創建新的標籤

    • 返回值(輸出變量名稱)爲:tag

  • 從左側流程組件中拖動“提交”組件至流程線上(位於新增組件後方),在右側工具欄進行屬性設置

    • 數據源爲:標籤

    • 節點說明爲:提交新建的標籤

  • 從左側流程組件中拖動“搜索”組件至流程線上(位於提交組件後方),在右側工具欄進行屬性設置

    • 數據源爲:標籤

    • 節點說明爲:重新查詢數據

第七步 頁面流關聯按鈕

爲按鈕設置對應的頁面流

  • 進入表格組件設計頁面,點擊添加自定義列表按鈕

    • 按鈕文字爲:頁面流創建標籤

    • 選擇按鈕圖標

    • 邏輯類型設置爲:UIflow,並選擇關聯同頁面下創建的UIflow“創建新的標籤”

    • 彈出確認選擇“是”

    • 提示信息輸入:確定創建一個新的標籤嗎

    • 確認按鈕文字爲:確定

    • 取消按鈕文字爲:取消

04 創建應用菜單

從菜單欄進入菜單管理界面,點擊“+”按鈕,創建名爲產品管理的應用菜單

  • 點擊產品管理後的“+”按鈕,創建菜單欄“產品”
  • 點擊“產品”後的“+”按鈕,創建一級菜單導航,分別爲“產品”“分類”“標籤”
  • 點擊導航,在左側導航屬性中設該導航所跳轉的頁面,比如標籤跳轉頁面爲“標籤管理”

應用發佈

第一步 應用檢查

點擊頁面右上方的檢查按鈕,檢查應用設計流程邏輯等是否存在問題。

第二步 設置用戶角色

進入服務配置,點擊“用戶角色”,設置應用服務的用戶,包括用戶名、郵箱、密碼、角色名稱。

第三步 創建發佈配置 

進入服務配置,點擊“發佈配置”,點擊頁面上方的“創建試用發佈配置”按鈕,即可創建一個部署應用所需的試用發佈配置。

*注:每個註冊的組織僅可創建一個試用發佈配置

第四步 應用發佈

  1. 點擊頁面右上方的“發佈”按鈕,在預定義配置中選擇創建的試用發佈配置,點擊發布,服務將進入到發佈狀態(發佈過程大概1分鐘)。
  2. 應用發佈成功後,發佈狀態處會顯示相應的地址,點擊進入後使用設置的用戶角色登錄,即可瀏覽所創建的應用狀態。

 

歡迎至BuildRun官網免費註冊,體驗低代碼應用開發。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章