智慧校園導游系統設計

李春紅 陳又銨 李靖怡

摘 要：隨著移動互聯網技術的快速發展，移動設備已經成為了現代生活必不可少的一部分，如今在國內外很多校園都可以看到智慧校園導游的身影，智慧校園導游可以幫助新生和游玩的訪客快速找到他們想要到達的位置，還可以方便地在線上了解校園的信息。一個基于現代GPS和交互式的應用出現彌補了傳統導游系統的不足。本文將使用React Native架構結合Express、Leancloud、Socket.IO等技術快速開發一個跨平臺的智慧校園導游系統。

關鍵詞：校園導游;React Native;跨平臺;Node.js

中圖分類號：TP311.52 文獻標識碼：A 文章編號：1671-2064（2019）22-0057-02

1 緒論

1.1 項目背景

大學校園是一個復雜的基礎設施，特別是新生和第一次接觸的人很難找到自己方向和位置。廣東海洋大學寸金學院占地超過2100畝，里面有許多不同的建筑，最高有11層。大多數建筑物互相連接。即使校園中的某些地方有地圖提示，用戶還是無法獲得繼續的幫助來到達目的地。目前有許多應用程序提供導航系統，如高德地圖、Apple Map等，當然它們的功能在大學校園內并不是很有效地提供大學校園內的所有位置。

1.2 項目目的

（1）使用移動解決方案開發校園導航模塊，方便廣東海洋大學寸金學院的新生和訪客。（2）管理員可以通過后臺管理系統推送、更新和管理信息。（3）用戶可以在社交模塊進行交流。

2 可行性分析

（1）本軟件導航模塊主要分為內部用戶和外界用戶。內部用戶包括學校師生、職工。本系統幫助他們獲取校園內部各個基礎設施（包括教學樓、學院樓、學生公寓、食堂、運動場、超市、等等）的空間位置、詳細信息，為其生活、工作、學習提供方便。外界用戶為訪問學者和新生家長，他們能方便的向系統尋求幫助，比如快速獲取學校某地的地理位置及最短路線，查詢某地點詳細信息等，通過以上分析具有一定的實用價值，有很強的用戶需求，該系統值得開發。（2）本團隊有很好的編程技術基礎。（3）有專業指導老師的支持和指導。

3 需求分析

3.1 軟件設計

軟件設計架構如圖1所示。

3.2 軟件描述、開發環境及生產環境

3.2.1 軟件描述

本軟件主要由校園資訊、校園導航、社交三大模塊組成。用戶可以在校園資訊模塊獲取到校園的最新資訊。如：校園、學生會、各社團等校園機構的新聞和通知;導航模塊：為不熟悉校園的用戶提供最快捷的導航;社交模塊：類似于微博、Twitter、Facebook、微信朋友圈微博客系統，用戶可以發表最新動態、想法和問題。

3.2.2 開發環境及生產環境

（1）開發系統：macOS Catalina 10.15。（2）基礎工具：Node.js、yarn。（3）開發工具：Visual Studio Code、Webstorm、Xcde、Android Studio。（4）核心架構：React Native、Express。（5）數據庫：MongoDB。（6）用戶管理系統：LeanCloud。

4 系統總體設計

4.1 系統架構設計

系統架構圖如圖2所示。

4.2 數據庫設計

本系統采用MongoDB作為數據庫。其主要特點是高性能、易存儲，易部署。MongoDB支持類似于json的bson格式，可以很方便地存儲比較復雜的數據類型。

本系統數據集合總有6個，分別是_User（用戶信息集合）、Map（地圖信息集合）、New（校園資訊集合）、Comments（微博客推文集合）、CommentReply（微博客推文回復集合）。

5 系統詳細設計與實現

5.1 校園資訊模塊

校園資訊模塊是系統的首個頁面，用戶第一時間看到校園的最新資訊。頁面布局十分簡潔，背景主頁有白色和黑色，應用會根據系統的設定改變而改變，完成適配IOS13的Dark Model。頁內元素只有右上角的當天時間、和卡片式按鈕組成。

5.2 導游模塊

導游模塊是系統的第二個頁面。設計和布局上采用簡約化、扁平化風格。頁內元素主要由一個List組成，每個List元素左上角都有一個建筑物類別名稱，方便用戶方便快速尋找目的地點，為用戶打開目的地的詳細頁。在詳細頁里面用戶可以看到目的地所在位置、圖片、介紹和一個路線按鈕。當用戶點擊路線按鈕后系統會在底部彈出一個ActionSheet，用戶可以根據自己的愛好選擇要使用的導航軟件進行導航，用戶點擊后系統會跳轉到用戶所選擇的導航軟件并開始導航。

5.3 社交模塊

5.3.1 用戶登錄注冊頁面

用戶注冊登錄社交模塊的入口，這是用戶進行的第一步操作，用戶輸入賬號密碼后，LeanCloud會查詢該用戶是否存在;若是存在，LeanCloud會自動判斷用戶所輸入的密碼是否匹配，若匹配，LeanCloud回發送一個SessionToken到軟件上，并跳轉到發現頁（社交模塊的首頁）。

5.3.2 發現頁

（1）發布推文功能。用戶可以發布動態、想法和問題，以實現用戶之間的交流。發布推文是以純文字形式發布。

當用戶按下發送鍵時，系統會檢測用戶是否輸入內容，若輸入內容為空，則返回當前操作并提示用戶當前輸入的內容為空;若不為空，系統會把用戶的信息和用戶所輸入的內容發送到LeanCloud上存儲。

（2）發現頁頁面。用戶打開發現頁后，系統會先判斷用戶是否在別的設備登錄，如果是則退出登錄，彈出登錄頁面讓用戶重新登錄;若否，系統會判斷當前SessionToken是否過期，如果是則退出登錄，彈出登錄頁面;若否，系統會自動向LeanCloud發送請求，獲取推文信息數據，并保存到本地內存中，渲染至頁面。發現頁內用戶發布的每個推文。用戶都可以點擊評論按鈕后，把自己的想法發布到該推文的評論區。

6 系統測試

6.1 系統測試目的

系統測試是軟件開發中必不可少的環節，測試結果直接反映出系統在不同的測試環境中是否會出現致命性錯誤，也可以測試系統是否達到預想的效果。通過不同的測試可以提高代碼的質量，為后期系統維護帶來便捷。本文主要對校園導航功能、用戶登錄注冊功能等進行了測試。

6.2 校園導航功能測試

該功能比較簡單，當用戶在建筑具體界面點擊路線按鈕時，只需要判斷用戶選擇的導航應用是否存在。本系統在沒有安裝高德地圖和有安裝高德地圖的環境下進行測試，都成功的實現了測試目的。

6.3 社交模塊功能測試

用戶登錄注冊功能測試流程;用戶登錄注冊功能是社交模塊的唯一入口，它的邏輯功能和市面上大多數的登錄注冊一樣：（1）判斷用戶是否登錄，若用戶已經登錄，則跳轉到社交模塊主界面;若否，則彈出登錄注冊界面。（2）如果用戶已經擁有賬戶，并在輸入框中輸入賬戶和密碼，若密碼錯誤彈出提示框，提示用戶“密碼錯誤”;若密碼正確，則跳轉到主界面。（3）當用戶沒有賬戶，用戶需注冊賬戶，注冊成功并跳轉到主頁面。

7 結語

本項目目標已經基本完成，測試效果也到達預期。本系統實現了iOS和Android兩個平臺的客戶端，在性能上完全超過使用傳統的跨平臺Web架構，媲美原生架構。在React Native的基礎上引入Expo庫讓開發進程又加快了一個檔次。LeanCloud，可以一行后端代碼都不用寫就可以在全平臺上快速搭建自己的后端服務。

當然，軟件也有很多的不足，例如：社交模塊的推文系統，不能發布圖文推文，不能像微信朋友圈那樣發布一條新的推文或者回復后及時顯示在頁面上，而是要刷新一下才能顯示在頁面上等等，后期會對軟件進行不斷的修改和完善。

參考文獻

[1] 向治洪.React Native移動開發實戰[M].北京：人民郵電出版社，2018：1.

[2] Expo[EB/OL].https：//expo.io.

[3] React Native中文網[EB/OL].https：//reactnative.cn.

[4] Ethan Brown.Web development with Node and Express leveraging the JavaScript stack[M].北京：人民郵電出版社，2015.

[5] Mike Cantelon.Node.js in action[M].北京：人民郵電出版社，2014.