中南大學課設

1、中南大學程序設計基礎實踐報告題目智能充電樁管理平臺學生姓名學院信息科學與工程學院專業(yè)班級學 號完成時間 TOC o 1-5 h z HYPERLINK l bookmark16 o Current Document 課程設計內(nèi)容3 HYPERLINK l bookmark21 o Current Document 課程設計目的3 HYPERLINK l bookmark25 o Current Document 背景知識4 HYPERLINK l bookmark28 o Current Document 工具/準備工作4設計步驟、方法等4步驟1：用戶界面設計4 HYPERLINK l boo

2、kmark38 o Current Document 5.1.1, 步驟1：UI設計贅述4 HYPERLINK l bookmark45 o Current Document 5.1.2步驟2：專業(yè)設計界面流程4 HYPERLINK l bookmark58 o Current Document 5.1.3步驟3：界面設計整體介紹55.1.4步驟4：設計思想總結(jié)55.1.5步驟5：界面展示5步驟2：微信小程序55.2.1步驟1：前端開發(fā)6 HYPERLINK l bookmark69 o Current Document 5.2.2步驟2：后端開發(fā)6步驟3：模擬器搭建7 HYPERLINK l

3、 bookmark72 o Current Document 設計結(jié)果及分析7 HYPERLINK l bookmark78 o Current Document 感想4參考文獻錯誤!未定義書簽。程序設計基礎實踐報告課程設計內(nèi)容系統(tǒng)包括如下幾個部分：智能化云平臺、用戶手機端程序、現(xiàn)場充電樁模擬 器。智能化云平臺具備如下功能：1、以地圖方式對系統(tǒng)內(nèi)注冊的所有充電樁進 行實時展示，可顯示每個充電樁的實時狀態(tài)；2、對充電樁的運行數(shù)據(jù)進行記錄；3、對運行數(shù)據(jù)進行可視化展示；4、對充電樁信息和用戶信息進行數(shù)據(jù)維護；5、 與現(xiàn)場充電樁模擬器進行實時數(shù)據(jù)通信以完成充電任務；6、對充電支付進行管 理。用戶手機

4、端程序?qū)崿F(xiàn)用戶注冊，錢包管理，掃碼充電功能，還可以查找最近 的充電樁。現(xiàn)場充電樁模擬器實現(xiàn)對充電樁各功能的模擬，包括跟云平臺的數(shù)據(jù)通信以 及與手機端程序的接口等。課程設計目的建立一套智能化的共享充電樁管理平臺，以實現(xiàn)充電樁的智能化運營。實驗目的了解小程序的構(gòu)架和掌握程序代碼的編寫了解學習CSS,HTML,PHP,數(shù)據(jù)庫等代碼的運行方式掌握后臺管理的代碼運行和與前端的數(shù)據(jù)交互掌握用戶交互的界面設計，把握微信小程序的整體功能前端與機器之間的數(shù)據(jù)收發(fā)和統(tǒng)計學會簡單的微信小程序的開發(fā)和運營前臺采用微信統(tǒng)一的框架，后臺可以任意挑選，PHP，node.js，Java都是主流，MVC也是一種不錯的選擇。個人

5、選擇的net MVC框架，在并發(fā)處理，模塊化方面都有很 好表現(xiàn)。服務器可以自己搭建，也可以直接用騰訊云3-背景知識隨著新能源汽車的普及，充電樁成為一項非常重要的基礎設施，本題目的目 的是建立一套智能化的充電樁管理平臺，以實現(xiàn)充電樁的智能化運營。工具/準備工作微信小程序開發(fā)平臺、云服務器購買；設計步驟、方法等步驟1：用戶界面設計本系統(tǒng)堅持圖形用戶界面設計原則，界面直觀、對用戶透明：用戶接觸軟件 后對界面上對應的功能一目了然、不需要多少培訓就可以方便使用本應用系統(tǒng)。 界面設計員應該明白軟件中用戶是所有處理的核心，不應該有應用程序來決定處 理過程，所以用戶界面應當由用戶來控制應用如何工作、如何響應，

6、而不是由開 發(fā)者按自己的意愿把操作流程強加給用戶。界面設計必須經(jīng)過確認才能完成。在界面設計中應該保持界面的一致性。一致性既包括使用標準的控件,也指使 用相同的信息表現(xiàn)方法，如在字體、標簽風格、顏色、術語、顯示錯誤信息等方 面確保一致。步驟1： UI設計贅述UI即User Interface（用戶界面）的簡稱。UI設計則是指對軟件的人機交互、 操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味， 還要讓軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點。UI設計的職能，大體分為3個方面。圖形設計.對軟件產(chǎn)品的外形進行“視覺設計”。交互設計，設計軟件的操作流程、樹狀結(jié)構(gòu)、

7、操作規(guī)范等。用戶測試/研究，測驗交互設計的合理性，以及圖形設計的美觀性。好的UI設計基礎界面要做到能夠吸引人，給人耳目一新的感覺這就要求工作 者不僅要具備廣告創(chuàng)意和美工藝術，還要了解心理學，抓住用戶的心理。UI設 計里面最重要的就是交互設計，負責人類與機器之間的交流，這一操作要簡單， 便捷，直接有效。通過這一操作從而達到用戶的使用目的，這也是交互設計的目 的步驟2：專業(yè)頁面設計流程認識產(chǎn)品所要解決的問題收集能解決這一問題的用戶相關的信息提供這一問題的解決方案驗證所提出的解決方案4.1 .用戶測試AB測試五秒測試遠程測試4.5熱圖測試改善解決方案5.1.3.步驟3：界面設計整體介紹用戶界面分為三

8、個板塊，分別是掃碼充電部分，在地圖上查找部分以及用戶 個人中心部分。掃碼充電核心就是通過掃描二維碼，識別出用戶將要使用的充電樁，并將充 電樁情況回饋用戶，如果可以使用則跳轉(zhuǎn)到支付頁面。在地圖上查找部分核心就是通過定位用戶所在的位置，向用戶反饋周邊充電 樁所在的位置以及這些充電樁的使用情況。用戶個人中心部分就是實現(xiàn)用戶登陸、查看錢包、充值等功能。5.2.步驟2：小程序開發(fā)部分小程序開發(fā)部分是本次設計的核心部分，包括前端搭建和后臺控制。5.2.1.步驟2.1：前端搭建在本次前臺搭建中，由于微信小程序官方推出的大量專用代碼以及相應的使 用說明，所以完成的相對順利。首先是登陸，我們直接采用了微信賬號登

9、陸的方法，微信的官方文檔詳細的 介紹了登錄的流程，從流程中我們可以提煉出關鍵的流程點：小程序端調(diào)用wx.login()接口，獲取登錄需要用到的code小程序端通過wx.request()，與開發(fā)者的服務器進行通信開發(fā)者獲取到code后，與微信的服務器進行通信，獲取openid和session_key利用隨機值來作為鍵、利用openid和session_key作為值，保存用戶的登錄狀 態(tài)信息服務器返回隨機值到小程序的客戶端，以后小程序的請求附帶返回的隨機值來 確保用戶的合法性其次是在小程序中引入地圖定位，微信小程序提供了幾個方式，引入地圖， 如果想解析地址的話，微信小程序沒有提供地址解析，所以必

10、須引入地圖插件， 看了高德、百度和騰訊的地圖，發(fā)現(xiàn)騰訊地圖對小程序，支持的功能多，最方便。再次是掃碼充電，首先是在小程序中插入掃描二維碼功能，這一步在微信小 程序的官方文檔中有詳細教程，然后跳轉(zhuǎn)頁面到支付界面。5.2.2.步驟2.2：后端搭建由于充電樁發(fā)布在不同的地點，我們對每個充電樁的位置和狀態(tài)進行了展 示。進入小程序頁面后，點擊查找附近就會出現(xiàn)的地圖并顯示當前用戶所在的位 置，以及附近充電樁的位置和使用情況。掃碼使用：用戶可直接在首頁點擊掃碼，然后掃描充電樁上顯示的二維碼進 行使用，如當前干衣機不是可用狀態(tài)，則顯示干衣機不可使用的信息；若可用， 則直接進入選擇時長并支付的界面。充電樁狀態(tài)顯

11、示：充電樁有三種狀態(tài)：空閑、運行中、故障，分別用綠色、 紅色、橙色的圖標進行展示。支付：由于微信對支付的限制，作為個人小程序，我們并不能真正的完成支 付功能，只能對支付進行一個簡單的模擬。每個用戶第一次注冊該小程序時，我 們?yōu)槠湓跀?shù)據(jù)庫中寫入一條數(shù)據(jù)以保存該用戶的信息及錢包余額，當然，這里的 余額只是一個虛擬的數(shù)字，通過用戶的充值和支付操作進行增減。用戶必須在小 程序的錢包中有足夠余額時才能使用干衣機，否則系統(tǒng)將顯示余額不足。后臺管理云平臺系統(tǒng)：進入管理系統(tǒng)后，可在相應頁面查看充電樁運行相關數(shù)據(jù)，如狀態(tài)、運行總 時長、運行的時間段等。還可查看并管理相應狀態(tài)的訂單數(shù)據(jù)，已完成的訂單、進行中的訂單

12、、以及 故障訂單。同時可實時監(jiān)測系統(tǒng)的當前收入。由于本次程序設計由團隊完成，這部分內(nèi)容由另一位程序員設計完成。5.3.步驟3：模擬器搭建模擬器的搭建主要就是測試程序的可靠性。我們用模擬器來代表充電樁，每 臺模擬器上都有一個二維碼，用于用戶通過掃二維碼進入程序。模擬器充電樁運行與狀態(tài)，從小程序獲取用戶信息、時間以及余額，將其寫 入數(shù)據(jù)庫6.設計結(jié)果及分析弟子山醪aao金色梯田武封北京御同宕1 &33：0 KUi廣站*neCiia14612:?IW * 1 2.12圖標展示g o o ooon ?n e & ?感想這次程序設計我選擇了微信小程序，一方面的原因是微信小程序作為騰訊推 出的一種程序類型

13、，它的開發(fā)與設計有一點的定式，開發(fā)簡單便捷，后期的維護 也方便一點，而且在安卓與i os平臺都可以使用；另一方面，我認為智能充電樁 這樣的程序更適合用微信小程序來開發(fā)與設計。微信小程序作為輕型應用很有可能會是未來移動互聯(lián)網(wǎng)應用的主要形式，它 的特點是小而快，但我認為它不會替代所有的App，因為微信小程序目的主要還 是解決小應用的問題，重點在于靈活、快捷、用完即走。微信小程序不能完全取 代APP，我認為可能的原因有兩個：一是入口不容易找到，浪費用戶時間；二是 一部分用戶在嘗鮮之后就回歸到了原生App，因為原生App的體驗可能更加豐富。 但是當小程序解決了這些問題，各種APP很有可能會被淘汰。微信小程序未來的 應用空間還是很大的，它的價值也還需要時間的檢驗。就像是這次我完成的充電樁小程序，屬于一個剛需但是低頻的程序，人們一 天中總會有使用的時候，但是很明顯不會有很多的使用次數(shù)，有些用戶可能不會 去選擇下載APP。像是這種程序，選擇微信小程序是一條很好的出路，需要使用 時打開小程序，用完了就可以關掉，不會一直占手機內(nèi)存，不想用了還可以刪掉。 這用完即走的特點正好滿足用戶使用低頻服務類APP時的需求，比如要買車票時 打開小程序，買完票就關閉它，等要用時再打開，避免APP 一直在手機里占內(nèi)存 卻又很少用。另一方面用戶在線下消費的需求正是“快捷”、“