作品集 - 道路管理系統
專案需求
客戶需要一個系統來管理道路回報案件、案件派工維修等e化流程。透過APP進行道路巡查與回報毀損案件，再由內勤人員進行審核與分派案件給協力廠商。
當車巡人員使用APP錄影進行道路巡查時，後台也需要觀看即時影像與巡查員軌跡。
交付項目
- 車巡APP: 提供汽車巡查人員使用，進行道路巡查與回報毀損案件。
- 機巡APP: 提供機車巡查人員使用，進行道路巡查與回報毀損案件。
- 內勤與協力廠商後台: 提供內勤人員使用，進行案件審核與分派。
- 管理者後台: 提供管理者使用，新增合約、系統相關參數。
人員分配
共有5人，分別為:
- 車巡APP: 1人(Me)
- 機巡APP: 1人
- 內勤與協力廠商後台: 1人(Me)
- 車巡管理系統
- 道路管理系統
- 管理者後台: 2人(Me)
- UI設計: 1人
- PM: 1人
使用技術
- APP: Kotlin
- Backend: Linode + AWS + Django + Nginx + Postgresql + Redis + Nginx RTMP
- Frontend: Vue.js + Vuex + Vue Router + Vuetify + Axios
開發日誌
系統架構與流程圖
技術選用評估
後端
Django自帶一個Admin後台與ORM，可以快速開發後台、建立資料庫模型並且可以透過Django REST
Framework快速開發API。而且Django也有很多第三方套件可以使用，例如Django REST Framework JWT可以快速開發JWT驗證，Django Filter可以快速開發篩選功能，Django CORS Headers可以快速開發跨網域功能。
同時導入Docker容器，可以快速部署開發環境與生產環境，並且可以透過Docker Compose快速建立開發環境。至於為何沒有採用k8s，主要考慮到運維成本可能會過大，所以尚未採用。
前端
選用Vue + Vuetify，因為Vue是目前最流行的前端框架之一且學習曲線不高，同時考慮到如何縮短UI設計時間，如果有套UI框架提供設計師做設計參考，同時工程師也可以縮短客製化元件的製作成本。且Vuetify已有提供豐富的元件庫，並且可以透過Vue
CLI快速開發SPA。
實作單元
Android RTMP推流
手機端透過RTMP協定將影像推流到服務器，使用『RTMP第三方拉流與推流庫』套件進行。 套件同時支援RTMP/RSTP協定，同時實作了推流與拉流等功能。專案需求只使用推流功能，早期版本有些Bug，經過長時間推流很容易發生閃退，最後Fork一份檔案到專案裡，進行客製化參數調整。
Nginx RTMP Server
使用Nginx +『nginx-rtmp-module』模組，進行RTMP Server的建置。RTMP協定通常會有5～10秒影像落後，在未優化設定前落後秒數達30秒以上，經過優化設定後，網頁播放的影像落後秒數降低至10～15秒左右，如果透過OBS做拉流可以在5～10秒區間。
影像延遲優化手段:
- Android端推流時，將影像縮小至720p、FPS減少成20幀、去掉去掉音訊資料，降低影像資料量。
- Nginx Server端，只能從現有參數做調整做優化外，另外就減少分流頻道，保留720p、360p頻道，移除1080p頻道。
- Web前端，使用『Flv.js』套件進行拉流，從套件參數調整做優化，主要透過減少cache大小進行延遲優化。
功能頁面
車巡管理系統
可以查過去巡查軌跡與案件，若當前有巡察員巡查可在此頁面觀看直播。
後勤人員可在此頁面進行案件歸檔，歸檔後的案件會進到道路管理系統。
可以在地圖上規劃巡察員每日巡查軌跡。
道路管理系統
所有查報案件列表。
後勤人員可在這邊審核案件指派給相關協力廠商進行後續。
可查詢合約當前保固的路段資訊。
管理員後台
管理員可在這邊新增合約、合約人員角色與各種環境參數。
Keyword
1 | 維修, Repair, re-pair |
