發問
衝浪🏄🏽不想要再去查浪況了,我的助理在哪!
yen @__.yennn發布於
我做了一個 LINE 衝浪助理: 來點兒~小浪🏄🏽♂️🌊
先說結論
我用 n8n 做了一個 LINE 官方帳號 AI 助理,叫「來點兒~小浪」。打開對話,就能知道台灣 10 個浪點今天哪裡適合衝浪,還能看未來 5 天的浪況總覽、潮汐預報、浪點設施和即時鏡頭。
這個專案是我跟 Instinct 一起做出來的。我一開始先照課程做了一個聊天用的 LINE AI 小精靈「歐美辣妹」(AI 小助理,Webhook、AI Agent 與記憶功能、再用 HTTP 把回覆送回 LINE)。接著我把這個做法和進度給 Instinct 當參考,請它協助,從頭一步一步擴充成現在的浪況助理。我負責決定需求、測試並提供回饋;Instinct 則協助實作與查證。
截圖1: 一開始自己做的版本,n8n 裡 Webhook、AI Agent、Gemini、Simple Memory、HTTP 串接 LINE 的流程圖,當作「起點」
截圖2:最終上線版本
截圖3: 加入好友後的主畫面,含新圖文選單「找浪嗎?」(今天浪況、未來5天浪況總覽、今天各浪點潮汐預報、浪點設施和沖水資訊、即時鏡頭連結、使用說明)
為什麼做這個專案
一開始,我只是在 nuva 看《我的 AI 小精靈》和《小屋無事》的影片。看完之後,我腦袋一直在想:接下來,我可以做點什麼?
就在這時候,我在網路上看到了 Instinct。用著用著,莫名其妙我就拿到了邀請資格,可以開始使用了。後來上網查了一下,才發現它好像是矽谷做出來的產品,需要邀請才能用,在矽谷似乎還滿紅的。(我沒有深入研究,有興趣的話,可以自己去查一下。)
剛好我現在在當兵,沒辦法用電腦。所以我想:既然用不了電腦,那就用手機,讓 Instinct 幫我去串接 n8n,看看能做出什麼。
最後,從 n8n 的流程,到 LINE 官方帳號上的互動卡片,整個專案都是這樣一步一步做出來的,也就是現在的「來點兒~小浪」。
我想解決的問題很實際:要查浪況,常常得在好幾個網站和 App 之間跳來跳去,浪高在一個地方,潮汐在另一個地方,風向又在別處。第一次接觸的人更看不懂那些數字代表什麼。我想把這些資訊整理成一個在 LINE 裡就能問的助理,而且看得懂。
它能做什麼
目前涵蓋 10 個浪點,顯示方式為「縣市/浪點」:
- 宜蘭:烏石港、外澳、蜜月灣、雙獅
- 新北:福隆、中角灣、萬里
- 台東:金樽
- 墾丁:南灣
- 台中:松柏港
主要功能:
- 今天浪況卡片:依「初階與中階」;新手+中階排序,只列出最適合的前 5 個浪點。每個浪點有「適合程度」三格:新手、中階、進階,用 ✓ 適合、△ 勉強 標示,不適合會直接寫原因(太小、太大、危險),配色用柔和的粉彩色系,一眼就能掃過去。每個浪點另外附浪高、週期、風向風速、最佳時段和潮汐時間。想看其他浪點,點卡片下方的浪點按鈕就能切換。
- 單一浪點卡片:浪高、週期、湧浪、風向、潮汐時間、氣溫、水溫、日出日落。
- 小浪、中浪、大浪標示:依模型浪高分成 1 公尺以下、1~2 公尺、2 公尺以上,並建議板型長板或泡棉板、中長板、短板。這是我自己的分組,只當參考,資料參考 Beach Access 和 uptogo;新手/中階/進階的評等規則和分級來源也都印在卡片底部。
- 24 小時浪高小圖:一眼看一天的浪怎麼變。
- 逐時圖表:今天和明天,每兩小時一格,看湧浪高度、週期、方向、風和陣風。
- 未來 5 天浪況總覽:5 個浪點、5 天的浪高長條和風向浪級一覽,底部還有 AI 依查詢結果整理的「這 5 天最值得去」建議。
- 潮汐卡片:涵蓋 7 個潮位站,有 24 小時潮位走勢長條圖、滿潮乾潮時間,以及測站名稱和距浪點的距離。潮位走勢是程式直接用中央氣象署開放資料算出來的,不是 AI 寫的。
- 浪點設施與沖水資訊:淋浴、停車、廁所、地址;沒查證到的就標「未確認」。
- 即時鏡頭連結:只列已確認可觀看的直播,目前 7 支;沒有鏡頭的浪點也會老實列出來。
- 使用說明卡片:每個功能怎麼用、有哪些浪點、看不懂數字怎麼辦,一張卡片講完。
- 「如何看 XXX」說明按鈕:浪高、週期、湧浪、風向/側風、潮汐、逐時圖表。文字都有標明來源,並附上參考 RNLI 的安全提醒。
- 快速切換按鈕:看完一個浪點,一鍵換下一個。
已提供截圖: 「今天浪況」卡片:依初階與中階排序的前 5 個浪點,每個浪點有新手/中階/進階適合程度三格、浪高週期、風向風速、最佳時段、潮汐時間;下方是圖例、評等規則、安全門檻、排序說明和資料來源連結
已提供截圖:單一浪點卡片(例如烏石港),要看得到浪高、週期、風向、潮汐和底部的資料來源
已提供截圖:逐時圖表
已提供截圖: 「未來5天浪況總覽」:5 個浪點各 5 天的浪高長條、浪高範圍、週期、風向浪級,底部有「中階程度這5天最值得去」的建議和資料來源
已提供截圖: 「今天潮汐預報」卡片:每個浪點的 24 小時潮位走勢長條圖、滿潮乾潮時間、測站名稱與距浪點距離
已提供截圖: 浪點設施卡片(台中/松柏港):沖水、停車、附近衝浪店、地址,未查證到的項目標「未確認」,附資料來源
已提供截圖: 「即時鏡頭」卡片:7 支已確認可觀看的直播連結按鈕,並註明哪些浪點目前沒有已確認的鏡頭
已提供截圖: 「使用說明」卡片:各功能的用法、目前涵蓋的浪點、看不懂數字可以點的說明按鈕,以及模型預報的注意事項
已提供截圖:「如何看浪高」之類的說明按鈕畫面
我堅持的幾個設計原則
- 不編造。 沒有資料就不給數字。
- 每張卡片都標來源。 使用者可以自己點進去查。
- 找不到就老實說。 資料缺的時候,卡片會直接寫出來,而不是亂填。例如今天浪況卡片裡,雙獅這個浪點就老實標了「無逐點潮汐資料」。
- **用圖像化的卡片,不要一大段字
怎麼做的
整個流程在 n8n 雲端執行:
LINE Webhook → 查快取 → 快速路徑 → AI Agent(Gemini Flash Lite),搭配天氣與潮汐工具→ Build\_Flex 程式節點 → 回覆 LINE
- 資料來源:Open\-Meteo 的海洋與天氣 API,以及中央氣象署開放資料的潮汐預報。
- AI Agent 負責理解使用者想問哪個浪點、要看什麼,再呼叫天氣和潮汐工具拿資料。
- Build\_Flex 用程式把資料組成卡片,所以版面和數字不是 AI 自己寫的。潮汐卡片也是程式直接從氣象署的資料計算潮位走勢和滿乾潮時間。
- **固定指令逐時圖表、使用說明、如何看XXX,直接走快速路徑,不經過 AI。
已提供截圖: n8n 編輯器中的「衝浪助理」工作流程全圖:LINE Webhook 進來後經 CacheLookup 查快取、FastRoute 快速路徑,再到 AI Agent(Google Gemini Chat Model,掛 Simple Memory 和 OpenMeteoMarine、OpenMeteoWind、NODASSBuoy 工具),由 BuildFlex 組成卡片、LINEReply 回覆;另有 CWATide 潮汐節點,以及 WatchdogWait/WatchdogCheck 逾時監看和 LINE_Push 推送
做的過程中踩到的坑
- LINE Flex 訊息有 30 KB 上限。 潮汐卡片一開始被 LINE 退回,後來拆成兩個泡泡訊息。
- 快速回覆按鈕點一下就消失。 所以每次回覆都要重新附上。
- Gemini 節點沒有逾時設定。 我做了一個監看機制,30 秒沒回應就跳出「重試」按鈕。
- AI 自己編了「資料時間」。 後來改成真正的查詢時間,不讓 AI 碰這種欄位。
速度的改善
一開始很慢,實測浪點卡片約 8.4 秒,潮汐卡片約 15 秒。對在 LINE 聊天的人來說太久了。
我做了三件事:
- 快取:依「卡片\+浪點\+日期」存起來,有效時間依官方更新頻率訂,浪況和風的卡片 60 分鐘,潮汐 6 小時。
- 快速路徑:固定指令跳過 AI。
- 潮汐卡片改成程式直接算:原本是 AI 排版,後來改成程式節點直接從中央氣象署資料計算,不再經過 AI。
結果:逐時圖表和使用說明約 1 秒;浪點卡片命中快取後約 1 秒,潮汐約 1.2 秒。
已提供截圖: 改善前後的查詢回覆時間長條圖(資料來源:n8n 實際執行時間量測):單一浪點卡 8.4 秒 → 1.3 秒、潮汐預報 14.8 秒 → 1.2 秒、逐時圖表 3.5 秒 → 1.0 秒、使用說明 4.3 秒 → 1.1 秒
我的心得
就是~其實我現在正在當兵,手邊也沒有電腦(很克難)只有手機,其實做出一個 LINE 官方帳號我覺得不難,但以我現在的狀況來說,我覺得新奇的是我用遠端的方式去製作個人官方帳號的助理。而且我用的 Agent 還是現在矽谷最紅的 Instinct,整個過程甚至沒有花到我半點 token,所以我覺得蠻酷的,哈哈。
不過我覺得製作這種東西,最重要的是你個人有沒有身歷其境、本身是否真的遇到這些問題,這樣才可以精準做出商品去對應到痛點點。
我很高興 我跨越了第一步,我真的開始動手做了!!!
2 個愛心0 則留言
登入並驗證手機後就能回答與留言。登入