基于Android的智能投放系統的設計與實現

鄭志嫻 王敏

摘 ?要：為了滿足動態靈活的移動端首頁內容配置需求，設計了一款針對某超市APP的智能投放系統。系統主要功能為廣告首頁投放，操作人員僅需登錄后臺，即可控制手機展示相應的廣告、商品、布局等內容，方便快捷。系統基于Android平臺開發了系統客戶端，服務器采用Spring Boot整合Vue實現前后端分離，服務器與客戶端之間以JSON格式進行數據傳輸，打造前端到后端一體化的系統。經過測試，系統運行穩定，符合設計需求，具有一定的商用價值。

關鍵詞：智能投放系統;廣告首頁投放;前后端分離;數據交互

中圖分類號：TP277;TU855 ? ? 文獻標識碼：A 文章編號：2096-4706（2020）21-0027-04

Design and Implementation of Intelligent Delivery System Based on Android

ZHENG Zhixian，WANG Min

（Fujian Chuanzheng Communications College，Fuzhou ?350007，China）

Abstract：An intelligent delivery system for a supermarket APP is designed to meet the needs of dynamic and flexible mobile terminal homepage content configuration. The main function of the system is advertising on the homepage. Operators only need to log in the background to control the mobile phone to display corresponding advertisements，products，layouts and other content，which is convenient and quick. The system has developed a system client based on the Android platform，the server adopts the Spring Boot integration Vue to realize the front and rear end separation，the data transmission between the server and the client is in JSON format to create an integrated system from front-end to back-end. After testing，the system runs stably，meets the design requirements，and has certain commercial value.

Keywords：intelligent delivery system;advertising on the homepage;front and rear end separation;data interaction

0 ?引 ?言

在信息技術不斷發展的今天，電商平臺日益增多，永輝、樸樸等超市也相繼推出了APP，用戶可通過移動端更加方便地在線選購商品。同時，相應的營銷策略、活動也必不可少，其中廣告就是一個重要的內容，APP如何合理布局、有效投放廣告，并能夠吸引顧客眼球，對當代移動端的內容豐富性及靈活性提出了更高的挑戰。在移動端無需發布更新的前提下，如何針對大促和常規性活動展現出不同的內容也成為移動互聯網時代繞不過的挑戰。學院與福州因果網絡科技有限公司合作，針對上述需求，設計和實現了一套針對首頁資源位的投放系統，以滿足動態靈活的移動端首頁內容配置需求。通過投放后臺的管理配置，APP即可在某些特定活動時間或特定場景對用戶展現出不同的布局和樣式，能夠降低發布人員的操作難度、簡化步驟，有效提升程序的快捷性。

1 ?相關框架和技術

1.1 ?Spring Boot

Spring Boot是基于Spring框架開發[1]的應用。“約定優先于配置”的軟件設計范式簡化了Spring應用的整個搭建和開發過程，使開發人員從不斷重復的定義模板化配置的復雜過程中解脫[2]，更加注重業務邏輯的實現。除此之外，過去項目存在的穩定性問題以及依賴包的版本沖突，通過Spring Boot中集成的框架得到了解決。同時開發者能夠更好地利用眾多組件項目，Web應用的開發模式因此被改變。

Spring Boot具有下列幾個特點[3]：

（1）可以任意地搭配、組裝從而生成獨立的開發項目;

（2）包依賴管理;

（3）采用注解形式，不用再繁瑣的配置XML文件，簡化了XML配置;

（4）內置Tomcat，部署調試簡單。

1.2 ?Vue介紹

Vue.js是目前較為流行的前端框架之一，框架只關注視圖層[3]。與其他重量級框架不同的是，Vue較易與前端庫或其他項目整合，易上手。與其他前端框架相比較，Vue.js具備以下優點[4]：

（1）語法類似HTML，結合HTML、JS，易上手;

（2）簡單小巧，能開發復雜的單頁面組件，較為靈活;

（3）本身容量小，處理數據更快速。

2 ?系統設計

2.1 ?系統框架結構設計

整個投屏系統分為服務器與客戶端兩大部分。服務器端是基于Spring Boot框架搭建后端，Vue.js+Element UI框架設計前端，MySQL數據庫用于存儲數據。前端負責控制頁面跳轉、調用接口，通過Ajax向Spring Boot框架請求數據;而后端負責業務邏輯，包含了業務層、數據訪問層等。而客戶端通過Andrid Studio進行開發，通過Volley框架處理HTTP請求，從服務層API獲取JSON數據。具體系統框架結構圖如圖1所示。

2.2 ?系統主要功能設計

系統主要分為客戶端與服務器，具體功能為：

客戶端：以Android為操作系統，手機APP可以展示展示定制廣告，并根據時限自動上架、下架;APP的廣告布局可以根據后臺設置進行切換選擇，讓用戶體驗不一樣的顯示效果。三個選項卡無縫銜接，展示更多商品的同時，支持商品搜索，帶給用戶更加良好的視覺體驗。

服務器后臺：根據后臺人員的操作，可以對廣告的內容、時間、位置進行靈活設置，改變前端頁面展示的布局。后臺人員能夠通過服務器后臺，直接創建、修改、刪除廣告和商品，將內容添加進前端頁面，并支持一鍵下架、上架商品;創建廣告和商品時，可以設置廣告的起始時間和結束時間，到達相應時間點，無需人工干涉，自動添加、取消廣告;可以在后臺控制APP頁面的布局切換。

2.3 ?系統接口規定

整個系統采用HTTP協議，數據傳輸主要以JSON格式[5]為主。JSON格式是一種輕量級的數據交換格式[6]，它小巧、易于被機器解析與生成、易于閱讀與編寫。采用的基本格式為：

{

"data"： null，

"status"： 200

}

服務器與客戶端之間按照業務模塊進行接口約定，其中表1展示了部分接口定義，具體如表1所示。

3 ?系統實現

整個投放系統基于Java語言，服務器的Spring Boot開發工具為IntelliJ IDEA，Vue開發工具為VSCode軟件，項目部署在阿里云服務器上[7]。客戶端使用Android系統，開發工具為Android Studio。

3.1 ?Android客戶端界面實現

Android客戶端界面除了閃屏頁、登錄界面之外，關鍵就是主頁面。主頁面采用縱向布局，廣告、商品等縮略信息都可主頁面里看到。為降低代碼耦合度，手機APP界面主要使用XML文件來編寫。程序使用Google推出的Material Design來豐富APP效果。APP整體采用協調布局CoordinatorLayout作為頂層布局，協調View之間的交互。

主界面中使用多種組件實現各種功能效果：

（1）使用CollapsingToolbarLayout控件實現折疊式標題布局的效果。該控件可以看成一個可折疊的Toolbar，里面包含一個ImageView和一個Toolbar當它縮到最小的時候就是一個普通的Toolbar，它可以實現：隨著滑動，圖片逐漸縮小最后只剩下Toolbar;

（2）使用Banner組件實現輪播圖效果;

（3）使用SmartRefreshLayout智能刷新框架，它支持所有的View并支持多層嵌套的視圖結構，能夠實現穩定，成熟的下拉刷新;

（4）使用滑動布局ConsecutiveScrollerLayout來統一處理布局的滑動，它可以同時嵌套多個滑動布局（RecyclerView、WebView、ScrollView等）和普通控件（TextView、ImageView、LinearLayout、自定義View等），使得多個滑動布局就像一個整體一樣連續滑動，它的效果就像是一個ScrollView一樣。而且它支持嵌套所有的View，具有很好的通用性。使用者不需要關心它是如何滑動的，也不需要考慮滑動的沖突問題，并且不用擔心它會影響子View的性能;

（5）使用RecyclerView代替ListView以實現商品列表數據。

APP部分實現界面如圖2～圖4所示。

3.2 ?廣告布局功能實現

用戶通過手機瀏覽程序廣告布局，向服務器發送HTTP請求后，解析接口，根據請求查找對應的LayoutController文件，通過控制層中的URL，根據不同路徑調用不同的Service，通過Service的LayoutDao去查找具體的Mapper，再通過LayoutMap文件中的方法操作數據庫，與數據庫交互后將返回結果告知Service，接著由Service傳給Controller，最后通過JSON格式返回給APP。獲得布局的業務時序圖如圖5所示。

程序實現Controller代碼為：

@RestController

@RequestMapping（"layout"）

public class LayoutController {

@Autowired

private LayoutDao layoutDao;

@RequestMapping（"/getLayout"）

private Map getLayout（）{

Map modeMap=new HashMap<>（）;

LayoutEntity layoutEntity=layoutDao.getLayout（）;

modeMap.put（"status"，200）;

modeMap.put（"data"，layoutEntity）;

return modeMap;

}

}

控制器對應的獲取布局信息的IP地址格式為：http：//ip：8081/interface/layout/getLayout

請求參數：{}

返回參數：{

"data"： {

"id"： 1，

"layout"： 1

}，

"status"： 200

}

上述返回結果表示，返回成功，顯示的數據為布局為1，廣告ID為1的效果展示，如圖6中左側界面所示。

在本系統中，已設計APP中的廣告可放置在頂欄、輪播、橫條三個位置，如圖6中矩形框所示，也可以設置接口實現后臺設置一鍵切換廣告位置，如圖6右圖效果。流程類似，本文不再贅述。

項目開發完成之后，該系統應用在Chrome瀏覽器和移動平臺（Android 4.4以上版本測試，測試平臺型號為：魅族 16th）經過測試并無異常，頁面顯示以及與用戶交互方面與需求設計一致。

4 ?結 ?論

本系統開發針對某一超市APP進行廣告定制，對廣告的設置側重簡潔、方便，復雜度有待提升，后期可進一步開發更加精確的設置、推薦相應的廣告及商品。另外，雖然進行了廣告布局的更改，但布局位置相對固定，后續開發過程中可以適當提升靈活性，讓用戶體驗更加良好。后期也可推廣為任一APP的廣告投屏。期待本項目可以為公司和企業節約勞力成本的同時，為用戶帶來更好的體驗。

參考文獻：

[1] 小馬哥.Spring Boot編程思想（核心篇） [M].北京：電子工業出版社，2010.

[2] 耿慶陽.基于Spring Boot與Vue的電子商城設計與實現 [D].西安：西安石油大學，2020.

[3] 朱運喬.基于SpringBoot+SSM框架的Web應用系統搭建與實現 [J].電腦編程技巧與維護，2019（10）：23-25.

[4] 焦鵬琿.基于SpringBoot和Vue框架的電子招投標系統的設計與實現 [D].南京：南京大學，2018.

[5] 王龍軍，李華志，朱雪梅.JSON在Android移動圖書館開發中的應用 [J].電腦編程技巧與維護，2019（4）：74-75+89.

[6] 柯熙政，宋云鳳.一種移動終端可見光數據收發系統的設計與實現 [J].西安理工大學學報，2019，35（1）：1-6.

[7] 師明，曾丹.基于Vue.js和Spring Boot的校招日記系統 [J].工業控制計算機，2020，33（1）：95-97.

作者簡介：鄭志嫻（1979—），女，漢族，福建福州人，副教授，軟件設計師，碩士，研究方向：移動互聯開發技術、Java開發。