前言：新冠疫情卷土重來給企業的生存和發展帶來新的挑戰，面對内部外市場環境的不确定因素，企業亟需保持業務的連續性，如何加快創新的速度，對抗不确定性帶來的風險，而低代碼無疑是最佳選項。本文将從實踐角度着筆，為大家詳細如何通過萬應低代碼複刻出一個新能源汽車電商平台。
說明： 本文旨在展示、教學如何通過萬應低代碼，在短時間内快速開發電商官網，最終的複刻界面不作為商業使用。
萬應低代碼的通用實作過程
作為領先的一體化應用開發平台，萬應低代碼憑借着模型驅動理念，在數字化項目的建構上能夠快速完成資料模型、業務模型、業務邏輯的定義，具備穩定強大的相容和內建能力，一次設計即可多端适配。
萬應低代碼平台能力結構圖
在具體項目的建立步驟上，萬應低代碼也能極大地簡化了傳統開發的流程，充分提高開發效率。
應用系統實作流程圖
接下來，我們以某新能源汽車品牌的電商平台為例，根據訂購汽車業務場景進行低代碼實踐流程示範。
一、業務需求分析
基于汽車預定的業務需求，我們認為使用者進入賣車平台後，需要能夠直覺檢視到汽車資訊（如：車型、版本、規格、産品圖檔、價格等），且可根據規格的增配動态、靈活地調整價格。
使用者在選擇目标車型後，可進行使用者建立、加入購物車、預定、下單、協定簽署、支付等全流程操作，同時拆分定金與後續尾款，記錄使用者付費習慣。
二、定義業務實體
接下來，我們根據分析出的具體業務需求，整理出實作UE和隐藏邏輯所需的業務實體，明确多個業務子產品之間的關系與細節，完成業務實體、相關字典的屬性和内容定義。
并根據實際需要，在萬應低代碼預設的系統實體-使用者資訊（User）中，拓展的使用者資訊與實體。
使用者訂車相關業務實體建構參考
車型相關實體邏輯定義參考
三、設計主要業務邏輯與PaaS能力配置
通過分析，本電商平台的背景業務邏輯主要為預訂流程，包含建立使用者、建立訂單、建立付款記錄三個步驟，而大多使用者可能數年内隻會購買一輛新能源汽車，是以在本例實踐中，我們傾向于将其解耦為多個可獨立操作的子流程形式，通過子流程調用的方式組合成大流程。
流程建構示例
1.建構賬戶子業務邏輯
首先根據賬戶子業務邏輯，在萬應低代碼平台定義入參，主要包括：郵箱、賬戶、姓、名、賬戶類型、手機号碼等。
賬戶子業務邏輯入參定義
業務邏輯的出參，通常是由業務邏輯本身的能力和需要使用這個業務邏輯業務方定義的。對于建立賬戶來說，一般都會需要傳回這個新建立的使用者ID。
賬戶子業務邏輯出參定義
在業務邏輯的編排階段，萬應低代碼能夠提供一目了然的可視化編排體驗，但在此之前，我們需要先分析業務邏輯，得出核心邏輯，異常情形，然後考慮輸入、輸出資訊的處理。
以【建立賬戶】這個業務邏輯為例：
① 核心邏輯
向【系統實體-使用者資訊】中插入一個賬戶，其包括姓、名、郵箱、手機号、密碼、賬戶類型等字段。
② 賬戶去重
【使用者資訊】實體中已存在的相同資料（如：郵箱、手機号），應進行查詢去重處理。
③ 賬戶類型判斷
需要根據流程輸入參數判别企業賬戶和個人賬戶。
賬戶子業務邏輯編排
在資料源層面，我們需要明确資料的加載條數，按需加載，提高系統子性能；同時明确資料源的輸出字段，避免不必要的記憶體、CPU、寬帶消耗。
2.建立車輛訂單子業務邏輯
車輛訂單的子業務邏輯的出入參設定方式與前面大緻類似。
賬戶子業務邏輯出參定義
賬戶子業務邏輯出參定義
但在邏輯編排時，我們可以利用循環節點把一段相同的流程，注入不同的參數和變量，以此簡化邏輯編排設計，本例中我們将使用者選擇的車輛規格資訊，循環的插入到訂單規格表中，循環執行。
3.建立定金支付訂單子業務邏輯
使用者建立車輛預訂的訂單後，需要支付定金，并與後續付款/金融機構貸款（如有）構成完整的購車付款流程，于是我們需要為首筆定金建立訂單，以便後續追蹤。
入參定義
出參定義
在定義好出入參之後，邏輯編排時需要特别注意安全隐患的排查，例如在用戶端傳入的訂單總價或商品價格可能被使用者篡改，是以本例中，車輛的定金金額，直接從配置表中讀取，使用者無法輸入和修改。
同時應該合理利用異常處理節點，每條業務邏輯預設傳回三個參數，抛出異常，能夠幫助使用者更好的定位錯誤，尤其是複雜邏輯編排，通過日志和異常資訊就能快速定位到錯誤。另外前端使用者使用系統時，也能準确、清楚地知道錯誤原因。
4.建立支付二維碼子流程
下一步我們需要為平台提供支付能力，那麼如何使用萬應低代碼平台的支付能力呢？在本例中通過連接配接器的調用微信支付和調用支付寶這兩個節點來實作。
調用支付能力需要遵循以下步驟：
• 在微信/支付寶平台申請相應的支付能力和商戶号，擷取的商戶号和密鑰；
• 在萬應低代碼平台設計背景-密鑰管理中，引入微信支付相關的密鑰；
• 通過密鑰分組和密鑰鍵值兩個實體資料源，開發一個對密鑰實體管理的界面；
• 錄入擷取到的微信支付密鑰資訊；
• 配置支付資訊。
在業務邏輯中調用微信支付連接配接器：
5.支付成功訂閱流程
使用者通過微信掃碼完成支付後，将存儲付款的結果記錄于“支付訂單實體”實體。為實作該功能，我們需要設計一個業務邏輯，并配置其事件訂閱。出入參及邏輯編排就不過多贅述，大家可參考如下示例。
定義入參
邏輯編排
要注意的是在配置支付回調事件時，我們需要盡可能地保證傳參的一緻性，并建議為實體定義索引，這樣能夠大幅提高查詢速度。
四、設計應用界面
1.頁面布局
在進行界面設計時，首先需要分析布局，明确頁面布局、彈窗及互動變化後的界面後，建立清晰的頁面容器架構，合理選擇容器，并将同一内容/同一業務顯隐性的元素歸置于同一容器内。
本例操作界面右側為固定寬度，不适合采用分欄容器進行布局，我們選擇兩個彈性容器進行布局。彈性容器的布局能力十分強大，其水準布局、垂直布局能夠讓元件分行、分列展示，還能提供響應式布局功能。
2.元件的應用
本例中我們還用到了清單元件。
作為萬應低代碼平台最強大的元件之一，清單元件可支援資料源/數組對内容循環的、嵌套循環的渲染，可以對清單項或其子元件的邊框、背景等樣式，結合資料源目前行的表達式進行綁定，設計出複雜的選擇項控件。
①萬應低代碼所有元件的呈現（技術上叫做渲染），都是依賴資料綁定實作的。
比如清單元件根據10行資料渲染一個完整的清單，一個文字元件顯示一段文字，一個輪播容器輪播到某一項（本質上是指定變量對應的一項）。
②萬應低代碼平台元件屬性綁定表達式時，都是響應式的。
表達式裡任何一個子表達式（變量、資料源）改變時，都會自動、及時的回報到元件的呈現上。表達式支援隻讀，需通過動作可實作資料的修改。
③如果多個元件綁定一個相同資料，元件之間将産生關聯。
④變量驅動元件是支援雙向綁定的
如輪播容器改變輪播項綁定的變量、翻頁元件會改變目前頁碼、标簽控件會改變目前标簽的選擇項等。再如所有的表單元件，都會改變表單的值（本質也是一個變量）。這種現象就是雙向綁定。
3.選擇頁面資料源
資料源是萬應低代碼平台貫穿背景（或遠端）資料與前端界面的管道，本質上是前後端分離開發模式的重要基礎能力。
資料源分為實體資料源、業務邏輯資料源和大資料模型資料源。
①實體資料源
依賴背景定義的實體模型及關聯關系，選擇資料源時，分類和展現的結構完全和實體模組化部分完全一緻。讓背景的實體資料可以在前端界面呈現或實作修改、删除。
②邏輯資料源
業務邏輯資料源能夠把我們在背景業務邏輯子產品，定義的業務邏輯，輸出的資料（即出參）跟控件結合展現。
③大資料模型資料源
大資料模型資料源是一種專門用來做大資料分析的資料源，需要配合管理背景大資料->資料模型子產品使用。
本例需要分析電商平台中哪種顔色的車型賣的最好，并得出台數和金額的折線圖，應該怎麼做呢？
1）建立訂單車型顔色分析的資料模型，然後進入設計界面
• 車輛的銷量資料、金額和台數，是記錄在訂單實體中，是以我們需要從左側實體中把訂單拖入到視圖，由于僅分析銷量，傳遞中心、付款資訊等字段無需選擇。
• 最終客戶選擇何種規格，是存儲在訂單規格表中的，是以我們可以做一個内連接配接，拖入訂單規格表，建立内連接配接。
• 訂單規格表裡備援了一部分車輛規格的資訊，但是并沒有存儲規格分類字段。是以我們還需要拖入車輛規格、車輛規格這兩個實體，根據關系字段建立左連接配接。
• 随後點選資料預覽，可以看到模型已經幫我們把模型平面化了，展示出了我們需要的資料。
2）在界面中使用大資料模型資料源
• 引入剛才建立的大資料模型；
• 由于我們背景定義的大資料模型内包含車輛所有規格資訊，但我們實際隻需要分析顔色規格相關的銷量，是以我們需要給大資料模型加上查詢條件，加載資料源；
• 跟元件結合展示大資料模型，此處我們拖入一個折線圖控件，次元選擇所屬規格，第一Y軸選擇訂單總價，第二Y軸選擇對訂單總價做計數
預覽就能看到最終的折線圖效果：
4.使用頁面動作流
頁面動作流是萬應低代碼平台打造前端界面邏輯，最強大的武器之一，頁面動作流是一種前端業務邏輯編排的方式，它有若幹動作節點構成，目前有11大類，100餘個動作節點，它負責處理、加工各種複雜的資料，負責協同前端控件之間的呈現，負責調用背景和遠端業務邏輯，幾乎可以覆寫任意前端邏輯。
目前是通過事件(前端術語叫做event)來觸發，每個元件都具備事件屬性，頁面本身也具有加載事件、加載完成事件和觸發器。
動作流使用步驟：
1.确定需觸發事件的目标元件；
2.建立動作流：考慮其功能，并定位到對應的節點；
3.排除異常情況：選擇合适的條件判斷和分支，優化動作流；
4.建立測試資料：測試動作流的邏輯是否正确。
通過事件觸發動作流時還需要注意以下幾點：
① 元件可配置一個或多個事件，事件可以觸發動作流的執行；
② 頁面分為頁面加載事件和頁面加載完成事件。頁面加載事件先于頁面加載完成事件執行，但是不能確定頁面加載事件裡的動作流，在頁面加載完成事件開始執行時，都執行完畢；
③ 頁面事件中的觸發器支援周期性的觸發指定動作流。
5.使用無所不在的表達式
表達式是一種強大的、響應式的資料加工方式。
• 強大展現在前端頁面開發應用到的函數、表達式，支援通過可視化的方式實作。
• 響應式是指表達式中的任一變量、資料源，通過系統自動跟蹤，可自動響應至元件屬性。
表達式的用途有：
① 綁定元件屬性
② 建構資料源查詢條件
③ 綁定表達式節點的屬性
④ 綁定動作的屬性
五、項目的打包和釋出
依照上面步驟，實作系統功能子產品的功能開發後，通過萬應低代碼平台的打包釋出功能，将應用釋出到體驗環境完成內建測試，釋出到正式環境投入使用。
萬應低代碼平台官方提供叢集運作環境：
由萬應官方提供完整的運維服務，客戶無需關心伺服器、資料庫、對象存儲的運維工作，隻需選擇一個環境的型号就能完全部署。
使用者自己提供雲服務進行部署：
客戶提供至少兩台4C8G的伺服器，在根據文檔或在運維人員的指導下，初始化伺服器的叢集環境（本質上是初始化一個K8S+Docker的運作環境），将環境資訊配置到萬應低代碼平台。這種情況下客戶需要保證伺服器的穩定性和安全。
具體步驟如下：
① 建立一個部署環境；
② 對項目進行打包，釋出至體驗環境完成內建測試；測試完成後，即可釋出至正式環境投入使用；
以上就是本期萬應實踐的全部内容，感謝大家的觀看，如果想要深入了解萬應低代碼和更多實踐案例，歡迎聯系我們，期待您的真知灼見！