中南大學(xué)課設(shè)

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

2、kmark38 o Current Document 5.1.1, 步驟1：UI設(shè)計(jì)贅述4 HYPERLINK l bookmark45 o Current Document 5.1.2步驟2：專業(yè)設(shè)計(jì)界面流程4 HYPERLINK l bookmark58 o Current Document 5.1.3步驟3：界面設(shè)計(jì)整體介紹55.1.4步驟4：設(shè)計(jì)思想總結(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 設(shè)計(jì)結(jié)果及分析7 HYPERLINK l bookmark78 o Current Document 感想4參考文獻(xiàn)錯(cuò)誤!未定義書簽。程序設(shè)計(jì)基礎(chǔ)實(shí)踐報(bào)告課程設(shè)計(jì)內(nèi)容系統(tǒng)包括如下幾個(gè)部分：智能化云平臺(tái)、用戶手機(jī)端程序、現(xiàn)場(chǎng)充電樁模擬 器。智能化云平臺(tái)具備如下功能：1、以地圖方式對(duì)系統(tǒng)內(nèi)注冊(cè)的所有充電樁進(jìn) 行實(shí)時(shí)展示，可顯示每個(gè)充電樁的實(shí)時(shí)狀態(tài)；2、對(duì)充電樁的運(yùn)行數(shù)據(jù)進(jìn)行記錄；3、對(duì)運(yùn)行數(shù)據(jù)進(jìn)行可視化展示；4、對(duì)充電樁信息和用戶信息進(jìn)行數(shù)據(jù)維護(hù)；5、 與現(xiàn)場(chǎng)充電樁模擬器進(jìn)行實(shí)時(shí)數(shù)據(jù)通信以完成充電任務(wù)；6、對(duì)充電支付進(jìn)行管 理。用戶手機(jī)

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

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

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

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

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

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

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

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

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

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