← 全部作品 / 海洋環境

拾海 PickOcean

海廢回報與淨灘活動整合地圖平台

隊伍|天大地大台科大No.05技術組 佳作

作品簡介

用互動地圖整合海廢隨手拍回報、淨灘活動發起與一鍵報名,並標出垃圾熱點,引導人力前往清理。服務淨灘團體、大專學生、志工與政府機關。

想解決的問題

海廢通報管道少有人用,淨灘報名資訊分散,也難掌握真正需要清理的熱點。

怎麼運作

民眾在岸邊發現垃圾時,用手機開啟網頁,以 GPS 或手動點選地圖定位,填寫標題、描述與垃圾程度並上傳現場照片;勾選醫療廢棄物、爆裂物、動物屍體等類型時,系統會顯示對應的風險提醒與簡要電話連結。回報點以 Leaflet 標記,數量密集時自動群聚,點擊標記可看到天氣預報。其他使用者可在回報點下留言補充,或送出清理確認,達到門檻後轉入已清理區。淨灘團體能在地圖上標出地點發起活動;民眾免登入即可報名或取消,主辦方可查看參加者資訊。

前端以原生 JavaScript 搭配 Fetch API 與 FormData 呼叫 REST API 並上傳多張圖片,localStorage 保存訪客 userKey,用來記錄個人回報並避免重複送出清理確認;離線或送出失敗時,資料暫存在 IndexedDB,偵測到恢復連線後重新組成表單送回後端。後端以 Node.js、Express、Mongoose 與 Multer 處理請求與圖片,MongoDB 分別存放回報點與活動、使用者資料、留言及清理確認紀錄,網站部署在 Render。

目前天氣資訊只部分完成。後續規劃加入帳號註冊與權限管理、管理員審核與檢舉、依廢棄物種類與地區的進階搜尋、潮汐與中央氣象署資料串接,以及用 AI 篩選錯誤照片並判斷廢棄物種類。

核心功能

  1. 01

    海廢隨手拍回報

  2. 02

    可視化海廢熱點地圖

  3. 03

    淨灘活動發起與報名