做一個給藥廠業務用的簡易 CRM：健保藥局名單、拜訪紀錄與路線導航

這個專案的起點很單純：有業務需要拜訪一批藥局，但手上只有一份很長的名單，既不知道怎麼排路線，也沒有地方好好記錄「上次聊了什麼」。市面上的 CRM 功能太多、費用也高，所以我做了一個只做三件事的簡易版本：藥局名單、拜訪紀錄、路線導航。

資料從哪來

名單來自健保署公開的特約藥局資料。選擇縣市之後，會自動載入該縣市的藥局，並依行政區排序，同一區的排在一起，每區標題附上家數。如果使用者允許定位，開啟網站時還會依最近的藥局自動選好所在縣市。

健保名單找不到的藥局，可以手動新增，標示為「自建」。資料匯入一次之後，就以自己的資料庫為主，不用每次都重新抓。

名單每頁 15 家，可以勾選藥局，一次最多 15 家，按「Google Maps 導航」就會依勾選的藥局排出順序，並開啟路線。我在介面上就限制勾選數量，而不是讓使用者勾了一大堆、路線卻沒辦法順利開啟。

出發點可以按「偵測目前位置」設定。沒有設定時，會從勾選的藥局中離得最近的一家開始排。這是以距離為基礎的簡單排序，不追求數學上的最佳路線，對一天拜訪十幾家的規模已經夠用。

點藥局可以開啟詳細資料，編輯名稱、電話、地址、聯絡人與狀態（未拜訪、接觸中、合作中、暫停、已停業）。「撰寫拜訪報告」會新增一筆紀錄，內容是日期加上文字，最新的在最上面，預設顯示最近 5 次，需要時再展開全部。

純前端，沒有打包流程。 整個前端就是 HTML、CSS 與 JavaScript，沒有依賴要安裝，也不需要建置步驟，可以直接部署。對一個只有幾個頁面的內部工具來說，這比引入框架更容易維護。

不用 localStorage。 一開始我把資料存在瀏覽器裡，後來發現這樣不同的人、不同的裝置看到的資料不一樣。所以改成以 D1 資料庫為準，所有人看到的是同一份。代價是需要連線，我選擇不做離線快取，因為資料一致比離線更重要。service worker 只用來讓網站能安裝到桌面。

權限用 auth-hub。 這個 CRM 裡有業務的拜訪紀錄，不能讓任何人都看到。登入沿用我的 auth-hub，只有在 auth-hub 開通權限的 Google 帳號才看得到畫面。權限判斷在伺服器端做，沒有權限的請求拿不到任何資料。

這份名單與拜訪紀錄涉及的是營業資訊，雖然藥局資料本身是公開的，但「我拜訪了誰、聊了什麼」是業務自己的紀錄，所以我很在意資料只存在自己的資料庫，不交給第三方服務。

如果你的工作也是「拜訪一批地點」，不論是藥局、門市或客戶，這個做法都可以拿去改：名單、狀態、紀錄、導航，四個功能就夠用了。