hiddenGem Attraction Recording Platform : Slide
0 likes93 views
鄒柏軒是一位創業者，負責設計與市場推廣，專注於創建景點記錄分享平台，鼓勵用戶記錄和分享旅行經歷。該平台整合了Google地圖資源，提供了多項輔助功能如路徑規劃和NFT鑄造，致力於提供用戶友好的探索體驗。鄒柏軒的背景包括開源設計貢獻和多個創業項目，包括旅行故事包的物理設計。
hiddenGem Attraction Recording Platform : Slide
- 1. 鄒柏軒 Po-Hsuan Tsou (Steward) 2024 / 3 / 3 Hidden Gem 記錄每 一 趟 生 活冒險 A platform leads you to create and fi nd attractions 旅圓
- 2. ✏ About Me 鄒柏軒 Po-Hsuan Tsou • Co-founder as a Designer/MKT of several startups (coupon app, campus printing, private cheives matching ) 曾與開發者網路創業 ( O2O 共 享經濟私廚平台、列印服務、集點 App ) • Freelancer: Graphic Design , Branding , UI Design, EN Translation 接案者 / 自 媒體，視覺設計背景 (平 面 、 品牌)、介 面 + 翻譯 • Open Source community design contributor 開源圈設計志 工 • Applied Languages, Bachelor of Arts, NTUST in Taiwan 台科應 用 外語系畢
- 3. Triptrip Story-Package • The Projects started as a physical design package containing maps, stories & souvenirs about a mini trip. We made 200 of them and distributed them across the famous co ff ee shop settlement in Taipei, Taiwan. • 走啦！TripTrip 故事旅遊包 • 本專案來 自 一 個在台北咖啡街：溫州街區實體發放 200 盒故事旅遊包的 實體設計專案，稱之為故事旅遊包。裡頭包含故事、地圖跟紀念品。
- 4. ✏ 主要功能：景點記錄分享平台 Main Feature: Spot Noting Platform • Take notes of what you’ve been as a “Spot”. • Create a spot with a pin and its description • Like, Copy other’s spots • Integrate Google Places • 記錄去過的景點圖 文 • 發佈「景點地圖」配 文 • 喜愛 / 複製他 人 的景點 • 整合 Google Map 社群資源
- 5. 🦌 輔助功能 Sub-Features • 尋找附近的 Google 景點 • 支 援 KMZ / GeoJson 匯入 • 支 援路徑規劃 • 拖拉景點 小 互動 Drag-n-Drop Mini Game • 鑄造 NFT Minting • Finding nearby Google Places • Import KMZ/GeoJSON fi les from Google Map • Routing Machine 🦌Others 更多…
- 6. ⛰ 🎤 Google 整合 Integration • KMZ 為 Google Map 創建的 「我的地圖」所下 載 • GeoJson 為「我喜愛的景點」由 Google Takeout 匯出 • KMZ fi le comes from “My Trip” in your Google Map. • GeoJson fi le comes from “/takeout” liked places in your Google Account. • Google Places API • 500 公尺步 行 範圍由近 至 遠 From near to far • 顯 示 於地圖上 display on map while clicking • 映射資料欄位 mapping all the data
- 7. 地圖套件 • Native 原 生 (Vanilla JS) • 路徑規劃 Routing • Routing Machine • Mini Map • Geo Search
- 8. 使 用 流程 How to Use 路徑規劃 註冊 / 登入 探索 他人的地圖 他人的會員頁 我的地圖 儀表板 新增景點 編輯景點 刪除景點 匯入景點 查看景點 附近 Google 景點 附近 Google 景點 準備發佈 創作地圖文 將景點加入發佈區 已發佈 地圖 搜尋景點 查看景點 搜尋地圖
- 12. 全局管理 Global State Management AuthContext Email/Google/ 第三方 Clerk Firebase Auth mapSlice Redux Toolkit googlePlacesStore KmzPlacesStore zustand Store • useContext • Redux toolkit • (zustand)
- 13. 重 用 元件 Reuse the Elements AlertModal Confirm Alert Loading Alert 等待/警告/確認 DropImage 圖片上傳 Drag-n-Drop GooglePlaces 打景點 API FilesImport KML / KMZ / GeoJson 匯入地圖 Loading / Alert / Confirm Uploading Images Fetching Google Places Importing KMZ/KML & GeoJson from Google Maps
- 14. dynamics ReactQuill MapComponent Leafet map demo server markdown 編輯器插件 • 客 戶 端載入 Client Side Loading • Markdown Editor
- 15. Web3 NFT Minting 鑄造 • 串接 Web3.js (Integrating Web3) • 使 用 HashLips NFT 合約 • 以 Piñata 將圖片上星際網路 (ipfs://) 連接 Metamask • 上鏈 Polygon • 以 OKX Web3 Wallet 查看 • Use HashLips O ffi cial NFT Demo Contract • use Piñata to upload the image to IPFS. • Connect to Metamask • Mint it on Polygon • View the NFT at OKX Web3 Wallet
- 17. 鄒柏軒 Po-Hsuan Tsou (Steward) Github@steward379 Maildev@stewardtsou.com CakeResume @stewardtsou LinkedIn @stewardtsou
- 18. DEMO