跳至主要內容

發問

衝浪🏄🏽不想要再去查浪況了,我的助理在哪!

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 個浪點,顯示方式為「縣市/浪點」:

  • 宜蘭:烏石港、外澳、蜜月灣、雙獅
  • 新北:福隆、中角灣、萬里
  • 台東:金樽
  • 墾丁:南灣
  • 台中:松柏港

主要功能:

  1. 今天浪況卡片:依「初階與中階」;新手+中階排序,只列出最適合的前 5 個浪點。每個浪點有「適合程度」三格:新手、中階、進階,用 ✓ 適合、△ 勉強 標示,不適合會直接寫原因(太小、太大、危險),配色用柔和的粉彩色系,一眼就能掃過去。每個浪點另外附浪高、週期、風向風速、最佳時段和潮汐時間。想看其他浪點,點卡片下方的浪點按鈕就能切換。
  2. 單一浪點卡片:浪高、週期、湧浪、風向、潮汐時間、氣溫、水溫、日出日落。
  3. 小浪、中浪、大浪標示:依模型浪高分成 1 公尺以下、1~2 公尺、2 公尺以上,並建議板型長板或泡棉板、中長板、短板。這是我自己的分組,只當參考,資料參考 Beach Access 和 uptogo;新手/中階/進階的評等規則和分級來源也都印在卡片底部。
  4. 24 小時浪高小圖:一眼看一天的浪怎麼變。
  5. 逐時圖表:今天和明天,每兩小時一格,看湧浪高度、週期、方向、風和陣風。
  6. 未來 5 天浪況總覽:5 個浪點、5 天的浪高長條和風向浪級一覽,底部還有 AI 依查詢結果整理的「這 5 天最值得去」建議。
  7. 潮汐卡片:涵蓋 7 個潮位站,有 24 小時潮位走勢長條圖、滿潮乾潮時間,以及測站名稱和距浪點的距離。潮位走勢是程式直接用中央氣象署開放資料算出來的,不是 AI 寫的。
  8. 浪點設施與沖水資訊:淋浴、停車、廁所、地址;沒查證到的就標「未確認」。
  9. 即時鏡頭連結:只列已確認可觀看的直播,目前 7 支;沒有鏡頭的浪點也會老實列出來。
  10. 使用說明卡片:每個功能怎麼用、有哪些浪點、看不懂數字怎麼辦,一張卡片講完。
  11. 「如何看 XXX」說明按鈕:浪高、週期、湧浪、風向/側風、潮汐、逐時圖表。文字都有標明來源,並附上參考 RNLI 的安全提醒。
  12. 快速切換按鈕:看完一個浪點,一鍵換下一個。

已提供截圖: 「今天浪況」卡片:依初階與中階排序的前 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 推送

做的過程中踩到的坑

  1. LINE Flex 訊息有 30 KB 上限。 潮汐卡片一開始被 LINE 退回,後來拆成兩個泡泡訊息。
  2. 快速回覆按鈕點一下就消失。 所以每次回覆都要重新附上。
  3. Gemini 節點沒有逾時設定。 我做了一個監看機制,30 秒沒回應就跳出「重試」按鈕。
  4. 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 則留言

登入並驗證手機後就能回答與留言。登入