基於ExMobi的外賣系統全端開發實踐

‍‍現在O2O模式已經進入高速發展階段，這種模式帶給人們的方便快捷不只催生了各類團購業務，更使訂餐、外賣這種傳統行業獲得了新生。

這不由讓筆者也蠢蠢欲動，尤爲是如今企業內部不少時候爲了方便員工下班回家作飯，提供了外賣服務，可讓員工上班點餐、下班就能夠拿到食物回家，不只節約員工時間，也解決了用餐衛生問題，體現企業對員工的關愛與福利。因此，作一個外賣系統的想法應運而生。

‍可是，從多年的開發經驗來看，要作這麼一個外賣系統，至少須要搭建一個後臺，並且如今移動信息化發展迅速，二維碼、在線支付等技術的成熟，移動端優先的策略對在Android和iOS兩大操做平臺上開發應用提出需求。

‍因此，選擇一款合適的開發工具很是重要，既要能開發後端管理系統，又要能開發前端原生APP。通過前期的一些對比，最終選擇了ExMobi這個平臺。ExMobi包含了客戶端和服務端兩部分，客戶端部分能夠經過web開發方式調用原生UI組件便可開發原生APP，服務端能夠開發web界面和進行API快速開發和發佈，更方便的是它還提供了配套的開發工具MBuilder，使用起來很是輕鬆。‍

下面就介紹如何使用ExMobi來實現這個全端操做的外賣系統。‍

功能設計

通過對需求的分析，目前主要分爲三大塊：後端管理、買家客戶端和賣家客戶端。

其中後端管理主要實現用戶管理、商品管理和統計分析；買家客戶端主要實現商品的展現與購買和訂單的管理；賣家客戶端主要是實現對商品線下取貨的確認。

下圖就是大體的功能點：

‍‍其中用戶管理考慮的是與公司的LDAP進行認證和同步；支付方面暫時先考慮支付寶；而取貨管理可使用二維碼掃描確認，即買家購買以後生成的訂單會對應一個二維碼，當取貨的時候須要出示此二維碼，賣家掃描此二維碼即表示已經取貨。

‍在展現方式上後端採用的web方式訪問；買家和賣家客戶端均採用原生APP的方式操做。‍‍‍

系統架構

因爲本次系統開發基於ExMobi，因此網絡架構就很是簡單了。由於ExMobi服務端是基於SOA鬆耦合模型，很輕鬆的能夠實現分佈式部署、線性擴容和定時備份等，開發者的代碼只須要實現具體的業務邏輯就能夠，這些代碼咱們成爲應用插件。

ExMobi的應用插件開發很是強大，既能夠包含客戶端部分也能夠包含服務端部分，或者單獨只有其中一部分，並且服務端部分不只能夠開發傳統web頁面，還能很方便的開發出API接口，好比目前比較流行的Rest API。考慮到外賣系統的業務分離，我將系統三個應用插件開發，其中wma實現後端管理功能，wmc爲買家端APP插件，wmb爲商家端APP插件。他們與ExMobi之間的關係以下：

從上圖能夠看出，全部服務經過wma這個應用插件來完成，它部署在ExMobi服務端中，提供了MVC服務和API服務，分別供管理端的web前端頁面展現（wma front-end）和賣家端（wmc）、賣家端（wmb）的APP客戶端數據交互。

功能實現

對系統作了大體分析以後，如今就開始開發工做了，此處省略一些UI交互和設計的細節，主要把一些技術和技巧跟各位分享一下。

後臺管理端wma的開發主要功能就是開發一個web管理端以及開發一些API接口供wmc和wmb兩個客戶端訪問。

ExMobi應用插件的開發是在MBuilder中完成的，MBuilder中建立的應用插件能夠包含server和client兩部分，若是隻開發其中一端就只須要在相應的目錄下編輯代碼便可。下面爲典型ExMobi應用插件的目錄結構：

咱們先來看看wma的部分，因爲其負責的是後端的服務，因此只有jsp目錄下有文件，也就是說全部後臺服務代碼必須放置於jsp目錄下：

其中web目錄爲前端管理頁面，其效果以下：

mapp.xml文件爲API接口的配置文件：

通過配置的API，ExMobi能夠所見即所得的生成其對應的API文檔供調用API的開發者使用：

點擊詳情就能夠查看API對應的入參和出參：

咱們一塊兒來看login這個API的處理文件login.jsp的源碼：

<%-- ExMobi JSP文件，註釋和取消快捷鍵統一爲Ctrl+/ 多行註釋爲Ctrl+Shift+/ --%>
<%@ page language="java" import="java.util.*,java.text.DecimalFormat,org.json.*"
 contentType="text/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/client/adapt.jsp"%>
<%
String username=aa.req.getParameter("username");
String password=aa.req.getParameter("password");
String sql="select * from users where password='"+password+"' and username='"+username+"'";


TableRow row = aa.db.queryRow("postgresql", sql , new Object[]{});

	if(row != null){
	    String username0 = row.getField("username", "");
		String userid=row.getField("id","");
		%>
		{"status":"success","username":"<%=username0%>","userid":"<%=userid%>"}
		<%
	}else{
		%>
		{"status":"fail"}
		<%
	}
%>

這個登陸其實很簡單，能夠看出來，只要按照mapp.xml裏定義的規範提交參數，login.jsp中就能夠經過aa.req.getParameter這個方法得到參數，而且調用了數據庫查詢類aa.db.queryRow，根據查詢的結果來判斷是否登陸成功，以及登陸成功的用戶信息。最終返回的就是一個json格式的數據。

這裏介紹一些ExMobi服務端對數據庫的操做，ExMobi服務端內置了主流數據庫的操做驅動，包括：mysql、postgresql、oracle、db2等等，須要用到哪些數據庫，只須要在mapp.xml中配置以下便可：

<database id="postgresql" dbtype="postgresql" ip="192.168.160.152" port="5432" dbname="wms" user="postgres" password="111" maxconn="10" minconn="2" defconn="5" />

在JSP中便可根據id來關聯到此配置。

因爲客戶端部分的對接都是相似的，咱們就以買家端爲例看一下代碼。

ExMobi的客戶端的應用插件代碼都放置於client目錄下。ExMobi特有的將原生的UI組件封裝成標記語言經過web開發方式便可開發APP，而這些標記語言成爲UIXML。因此，咱們開發的過程主要是編寫UIXML，固然，須要使用標準h5也可使用UIXML的webview組件來實現，或者要對這些原生能力進行擴展，開發者也能夠經過編寫原生代碼集成到ExMobi中，可是本次實踐中使用UIXML就已經能夠知足需求了。

下面咱們來看一下登陸功能的實現，也就是login.uixml文件：

這裏能夠看到UIXML是一種跟HTML很是類似的語言，裏面支持CSS和JS語法，因此開發者很容易就能夠上手使用，其顯示效果以下：

點擊登陸的時候就會往wma服務端的API接口進行請求，經過JS就能夠完成：

function login(){
	var url = $c.baseUrl+"login";     
	
	var ajaxData = {};              
	
	ajaxData.method = "post";        
	ajaxData.data="username="+$("user").value+"&password="+$("pass").value;
	ajaxData.isBlock = true;
	
	ajaxData.url = url;
	
	ajaxData.successFunction = "successFunction";
	
	ajaxData.failFunction = "failFunction";
	ajaxData.requestHeader = eval("("+requestHeader+")");   
	
	var ajax = new DirectAjax(ajaxData);
	
	ajax.send();				
}

這裏的DirectAjax是ExMobi客戶端的網絡請求API，可支持HTTP/HTTPS的通訊，登陸成功以後就會跳轉到首頁：

支付是經過支付寶來完成的：

付款完成會生成一個訂單的二維碼供取貨的時候賣家端掃描確認：

全部的頁面效果全都是純原生的UI展現哦。

開發完成以後就是要打包生成客戶端安裝包。在MBuilder中便可完成構建測試包和生產環境的包，支持Android和iOS客戶端。

若是須要運行到生產環境，wma後臺代碼須要部署到服務器，這裏就不詳細說明，感興趣的小夥伴能夠到ExMobi的官網去了解。

總結

外賣系統自己只是一個引子，旨在探索一種全端開發的方式。ExMobi提供了一整套的客戶端和服務端的開發模式，很方便將一個系統從無到有的搭建起來，而不須要重複造輪子，讓開發者迅速的完成web後端管理系統的開發、前端原生APP的開發以及用於業務交互的API接口。此API接口目前僅用戶APP中調用，將來還能夠擴展到微信、瀏覽器甚至更多端的應用當中，適應場景不少。並且，使用ExMobi的開發方式跟web開發很是相似，對於已經具備web開發技術的團隊很容易就能夠上手使用，只須要一種技術經驗就能夠達到全端開發，毫無違和感。因此，全端開發看似難度很大，可是選好了開發平臺就能夠很好的去實現想要的效果，對後續的擴展和維護也是很是簡單。

‍

‍