基于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开发技术的团队很容易就能够上手使用，只须要一种技术经验就能够达到全端开发，毫无违和感。因此，全端开发看似难度很大，可是选好了开发平台就能够很好的去实现想要的效果，对后续的扩展和维护也是很是简单。

‍

‍