優維低程式碼：如何構建第一個微應用？

優維低程式碼技術專欄，是一個全新的、技術為主的專欄，由優維技術委員會成員執筆，基於優維7年低程式碼技術研發及運維成果，主要介紹低程式碼相關的技術原理及架構邏輯，目的是給廣大運維人提供一個技術交流與學習的平臺。

我們在上一篇主要介紹了Brick Next （點我檢視上一期） 的系統原理，以及其為外掛開發提供的能力，與其他平臺的外掛化開發的不同之處，相信大家對Brick Next已有了清晰的認識。

接下來，我們進入基於構建框架的程式碼發開的入門教程。在入門教程裡，你將能一步步地從零開始搭建屬於自己的一個微應用。

並在這個過程中，你將接觸到典型的基於低程式碼的開發（程式設計）流程，逐步熟悉Next Builder的基本概念、使用方法和技巧。

#建立微應用專案

微應用專案即低程式碼工程專案，有關微應用的一切（選單、路由、頁面編排、資料模型、文件等）都在工程專案裡進行開發。

進入Next Builder首頁，點選右上角的新建按鈕，填寫微應用的基本資訊。

點選儲存，建立成功！

#建立微應用的首頁

新建了微應用工程後，需要開發它的頁面，我們先從首頁開始。

微應用的頁面，又叫做 路由，也即我們常說的 URL，每個 URL 對應微應用中的一個頁面。

1.進入路由檢視

在左側選單欄找到 User Flow，它是微應用的路由檢視入口，在此可以新增路由，配置路由間的跳轉關係。

通過 User Flow，編排者能夠以拓撲檢視的方式直觀地瞭解這個應用的規模、頁面間的跳轉情況，也能更好地去設計和思考產品流程。

2.建立路由（首頁）

點選右上角 [Create Route] 按鈕跳轉到建立路由頁面。設定路由的 Alias（別名）為首頁，Path 留空（ 僅保留${APP.homepage}，表示微應用的首頁，通常是 http://{{你的伺服器IP}}/next/{{微應用ID}} ）。

點選儲存，這樣我們就把微應用的首頁新建好了。

3. 對首頁進行編排

成功新建了首頁路由，會自動跳轉到它的 視覺化編輯器 介面。

視覺化編輯器 擁有非常友好的拖拽互動，它可以幫助我們快速搭建出符合業務需求的應用頁面，是微應用編排的“主戰場”。

我們可以為首頁新增一個 構件，用於歡迎使用者來到我們的第一個微應用。

構件,是Next Builder中的基本頁面元素，比如一個表格、輸入框、描述文字、折線圖等等。

把微應用比作一個樂高模型的話，那構件就是各種各樣的零部件，編排者可以隨心所欲地搭建出汽車、洋房、鋼鐵俠等各種東西。

基於 DevOps 實踐經驗，Next Builder 總結提煉了一個豐富而強大的 構件庫，極大地提高了編排者的開發效率。

◆ 點選視覺化編輯器的右上角的“+”號，搜尋 brick-result，找到“結果提示”構件，並拖拽到頁面之中。

◆ 點選畫布中的構件，在 Properties 標籤頁裡填入構件的 customTitle 和 status 屬性，分別設定構件的 主標題文字 和 結果狀態，決定圖示和顏色。（更多的屬性說明，可以在 Documents 標籤頁中查閱構件的示例文件）

◆ 在 Settings 標籤設定構件的別名，方便識別。

◆ 儲存構件後，返回畫布。

◆ 再點選頂部右側工具欄的“構建並推送”按鈕（或者使用 CTRL+B 快捷鍵），就成功完成了一次微應用的修改。

◆ 再點選頂部右側工具欄的“預覽”，即可在新開的瀏覽器窗口裡預覽當前的頁面效果。

這樣！我們的第一個微應用就建立好了！

對於如何搭建第一個微應用，相信你已經Get到了