(個人透過 Mockplus 繪製 Prototype，並與主管討論客戶需求與確認開發項目)

目錄

• 一、技術

• 二、開發功能特色介紹

• 三、與土地資產管理系統相比，改善？

• 四、結論

一、技術

前端：HTML5, CSS3, Vue2-leaflet, leaflet.markercluster（初步導入 Vue 使用，但主要建立在 UI Framework 上）
UI 框架：framework7
後端：PHP
環境：Apache, MsSQL
版控：Git（初步導入使用）

備註：
同為土地系統開發案額外拓增的新需求項目。
初期主要研究要思考 Native vs Hybird vs Web App 三者間的衡量；中後期則主要核心放在實踐新技術，看看是否能解決土地資產管理系統開發上的痛點（詳細可以去看那篇文章的說明）

二、開發功能特色介紹

流程圖點擊（公開的 SOP 流程圖系統化）

實踐思路

【前端】

功能十分簡單，不過因為是第一次實踐，所以特別寫下來，主要透過

1
2
3

<map name ="imgMap" id="imgMap">
  <area shape="rect" coords="11, 485, 230, 537" @click="Jump">
</map>

群集功能

實踐思路

【前端】

透過Leaflet.markercluster實踐群集功能，主要目的是為了避免打點過多造成移動時瀏覽器效能的下降，這邊較為複雜的實踐主要是清單與地圖的交互，例如用戶點擊清單資料時，可以自動跳轉到地圖的某一個點上，前端部分需要去設立一個 id，並在 Array 中進行查找，時間複雜度約為 BigO(N)。

電子簽名

實踐思路

【前端】

透過 vueSignature 實踐電子簽名，再透過前端把簽名轉化成 Jpg 圖檔，轉成 Base64 編碼後發給後端 API

【後端】

收到 Base64 後，透過 php 的 base64_decode 進行解碼，並用 file_put_contents 將文件儲存至特定位置。

獲取手機座標進行定位

實踐思路

【前端】

透過 Leaflet 的 Locate 方法進行定位，若定位失敗會觸發 Locationerror，再針對失敗的狀態碼及訊息進行提醒及處理。

三、與土地資產管理系統相比，改善？

該系統發生的問題詳細可查閱該篇

後端

• 使用 Namespace，並遵循 PSR1, 2, 4 規範。
• 使用 OOP 開發程式
• 導入 Composer 管理後端套件包 並使用 Autoload（而不是大量的 Include）
  
• 建立類似 MVC 的架構（統一入口，而不是各個請求對應一支 PHP，會寫「類似」是因為前後端分離，故沒有 V）

改善前（每隻 PHP 互相獨立，彼此透過 Include 互相引用，難以維護與擴充）

改善後

四、結論

這邊已經初步建立起架構，接著在路燈管理系統（民眾報修）中會針對 Vue 進一步運用，並且在後端首次開始導入 Laravel 的框架，歡迎至我的下一篇章查閱！

上一篇：新北市路燈系統（民眾報修模組）開發技術思維分析

下一篇：土地資產管理系統開發技術思維分析core