如何使用低程式碼開發平臺快速建立一個應用 | 例項演示

BuildRun技術團隊發表於2020-04-02

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

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

主要過程包括以下步驟:

  • 建立應用服務

  • 建立應用

    1. 建立業務物件

    2. 建立選項集

    3. 建立應用頁面

    4.建立應用選單

  • 釋出應用

該系統主要業務功能包括:產品管理,分類管理,子分類管理和標籤管理,整個系統的邏輯圖如圖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. 應用釋出成功後,釋出狀態處會顯示相應的地址,點選進入後使用設定的使用者角色登入,即可瀏覽所建立的應用狀態。

註冊試用

歡迎免費註冊,體驗試用低程式碼應用開發




相關文章