??如今O2O模式已經進入高速發展階段，這種模式帶給人們的方便快捷不僅催生了各種團購業務，更使訂餐、外賣這種傳統行業得到了新生。
這不禁讓筆者也蠢蠢欲動，尤其是現在企業內部很多時候為了方便員工下班回家做飯，提供了外賣服務外賣系統，可以讓員工上班點餐、下班就可以拿到食物回家，不僅節約員工時間，也解決了用餐衛生問題，體現企業對員工的關愛與福利。所以，做一個外賣系統的想法應運而生。
?但是，從多年的開發經驗來看，要做這么一個外賣系統，至少需要搭建一個后臺，而且現在移動信息化發展迅速，二維碼、在線支付等技術的成熟，移動端優先的策略對在和iOS兩大操作平臺上開發應用提出需求。
?所以，選擇一款合適的開發工具非常重要，既要能開發后端管理系統，又要能開發前端原生APP。經過前期的一些對比，最終選擇了這個平臺。包含了客戶端和服務端兩部分外賣系統，客戶端部分可以通過web開發方式調用原生UI組件即可開發原生APP，服務端可以開發web界面和進行API快速開發和發布，更方便的是它還提供了配套的開發工具，使用起來非常輕松。?
下面就介紹如何使用來實現這個全端操作的外賣系統。?
功能設計
經過對需求的分析，目前主要分為三大塊：后端管理、買家客戶端和賣家客戶端。
其中后端管理主要實現用戶管理、商品管理和統計分析；買家客戶端主要實現商品的展示與購買和訂單的管理；賣家客戶端主要是實現對商品線下取貨的確認。
下圖就是大致的功能點：
其中用戶管理考慮的是與公司的LDAP進行認證和同步；支付方面暫時先考慮支付寶；而取貨管理可以使用二維碼掃描確認，即買家購買之后生成的訂單會對應一個二維碼，當取貨的時候需要出示此二維碼，賣家掃描此二維碼即表示已經取貨。
?在展示方式上后端采用的web方式訪問；買家和賣家客戶端均采用原生APP的方式操作。???
系統架構
由于本次系統開發基于，所以網絡架構就非常簡單了。因為服務端是基于SOA松耦合模型，很輕松的可以實現分布式部署、線性擴容和定時備份等，開發者的代碼只需要實現具體的業務邏輯就可以，這些代碼我們成為應用插件。
的應用插件開發非常強大，既可以包含客戶端部分也可以包含服務端部分，或者單獨只有其中一部分，而且服務端部分不僅可以開發傳統web頁面，還能很方便的開發出API接口，比如目前比較流行的Rest API。考慮到外賣系統的業務分離，我將系統三個應用插件開發，其中wma實現后端管理功能，wmc為買家端APP插件，wmb為商家端APP插件。他們與之間的關系如下：
從上圖可以看出，所有服務通過wma這個應用插件來完成，它部署在服務端中，提供了MVC服務和API服務，分別供管理端的web前端頁面展示（wma front-end）和賣家端（wmc）、賣家端（wmb）的APP客戶端數據交互。
功能實現
對系統做了大致分析之后，現在就開始開發工作了，此處省略一些UI交互和設計的細節，主要把一些技術和技巧跟各位分享一下。
后臺管理端wma的開發主要功能就是開發一個web管理端以及開發一些API接口供wmc和wmb兩個客戶端訪問。
應用插件的開發是在中完成的，中創建的應用插件可以包含和兩部分，如果只開發其中一端就只需要在相應的目錄下編輯代碼即可。下面為典型應用插件的目錄結構：
我們先來看看wma的部分，由于其負責的是后端的服務，所以只有jsp目錄下有文件，也就是說所有后臺服務代碼必須放置于jsp目錄下：
其中web目錄為前端管理頁面，其效果如下：
mapp.xml文件為API接口的配置文件：
經過配置的API，可以所見即所得的生成其對應的API文檔供調用API的開發者使用：
點擊詳情就可以查看API對應的入參和出參：
我們一起來看login這個API的處理文件login.jsp的源碼：
{"":"","":"","":""}{"":"fail"}
這里介紹一些服務端對數據庫的操作，服務端內置了主流數據庫的操作驅動，包括：mysql、、、db2等等，需要用到哪些數據庫，只需要在mapp.xml中配置如下即可：這個登錄其實很簡單，可以看出來，只要按照mapp.xml里定義的規范提交參數，login.jsp中就可以通過aa.req.這個方法獲得參數，并且調用了數據庫查詢類aa.db.，根據查詢的結果來判斷是否登錄成功，以及登錄成功的用戶信息。最終返回的就是一個json格式的數據。
"port="5432"="wms"user=""="111"="10"="2"="5"/>
由于客戶端部分的對接都是類似的，我們就以買家端為例看一下代碼。在JSP中即可根據id來關聯到此配置。
的客戶端的應用插件代碼都放置于目錄下。特有的將原生的UI組件封裝成標記語言通過web開發方式即可開發APP，而這些標記語言成為UIXML。所以，我們開發的過程主要是編寫UIXML，當然，需要使用標準h5也可以使用UIXML的組件來實現，或者要對這些原生能力進行擴展，開發者也可以通過編寫原生代碼集成到中，但是本次實踐中使用UIXML就已經可以滿足需求了。
下面我們來看一下登錄功能的實現，也就是login.uixml文件：
這里可以看到UIXML是一種跟HTML非常相似的語言，里面支持CSS和JS語法，所以開發者很容易就可以上手使用，其顯示效果如下：
點擊登錄的時候就會往wma服務端的API接口進行請求，通過JS就可以完成：
這里的是客戶端的網絡請求API，可支持HTTP/HTTPS的通信，登錄成功之后就會跳轉到首頁：
支付是通過支付寶來完成的：
付款完成會生成一個訂單的二維碼供取貨的時候賣家端掃描確認。
所有的頁面效果全都是純原生的UI展示哦。
開發完成之后就是要打包生成客戶端安裝包。在中即可完成構建測試包和生產環境的包，支持和iOS客戶端。
如果需要運行到生產環境，wma后臺代碼需要部署到服務器，這里就不詳細說明，感興趣的小伙伴可以到的官網去了解。
總結
外賣系統本身只是一個引子，旨在探索一種全端開發的方式。提供了一整套的客戶端和服務端的開發模式，很方便將一個系統從無到有的搭建起來，而不需要重復造輪子，讓開發者迅速的完成web后端管理系統的開發、前端原生APP的開發以及用于業務交互的API接口。此API接口目前僅用戶APP中調用，未來還可以擴展到微信、瀏覽器甚至更多端的應用當中，適應場景很多。而且，使用的開發方式跟web開發非常類似，對于已經具有web開發技術的團隊很容易就可以上手使用，只需要一種技術經驗就可以達到全端開發，毫無違和感。所以，全端開發看似難度很大，但是選好了開發平臺就可以很好的去實現想要的效果，對后續的擴展和維護也是非常簡單。
免責聲明：部分文章信息來源于網絡以及網友投稿，本站只負責對文章進行整理、排版、編輯，出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其內容的真實性，如本站文章和轉稿涉及版權等問題，請作者在及時聯系本站，我們會盡快為您處理。
