Play video
Pause video

小黑貓
車隊

桃園機場接送預約平台

2024

小黑貓車隊 官網截圖
Scroll
專案類型預約平台
開發時間2024 年(持續迭代)
主要技術Astro, Laravel, GraphQL
前往前台

專案概述

小黑貓車隊是桃園機場接送的專業品牌,主打「安全、準時、舒適」的機場接送體驗,提供從經濟轎車到頂級商務車等多種車型選擇,服務涵蓋桃園國際機場與松山機場的接送機需求。

本專案為小黑貓車隊打造了一套以 LINE 為核心的預約平台。透過 LINE LIFF 技術,旅客可以直接在 LINE 應用程式中完成預約流程,從選擇車型、填寫行程資訊到確認訂單一氣呵成,無需額外安裝任何 APP。

後端採用 Laravel + GraphQL 架構,前端以 Astro + Vue 3 建構,實現高效能的伺服器端渲染與動態互動。管理後台則以 Filament 打造,讓營運團隊可即時處理訂單、指派司機、管理車型與發布公告。

3步驟完成預約
2組航班資料來源
3站轉換漏斗追蹤

實際畫面

客戶端・LINE

客人在 LINE 裡看到的就是這樣

填行程、看到試算車資、送出申請,三步完成——不用打電話問價格,也不用安裝任何 App。清晨加成、行李加價這些規則系統自己算,客人當場就看得到明細。

這張送出去的 #BK-2087,下面就是它落到客服後台之後的樣子。

畫面為示意,內容皆為模擬資料。

業主端・派遣後台

後台先覆核,才會成立訂單

系統試算完不會直接成立訂單,而是先開一張「待確認」單同時通知客人與後台。客服在後台看到完整行程與報價明細,覆核無誤後指派司機、按下確認,推播才發出去。

這道人工關卡是整套系統的報價防火牆——計價設定萬一有誤,能在訂單成立前攔下來。指派司機時也看得到每位司機的車款與當日趟數。

畫面為示意,內容皆為模擬資料。

自動報價引擎・互動示意

改版前,每一筆詢價都要客服在 LINE 上逐一回覆,尖峰時段回得越慢、客人跑得越快。 現在客人在 LINE 裡選完地點、車款與時段,系統即時把車資算出來並直接回覆—— 客服只需要在訂單成立前做一次覆核。下面這塊可以直接點,體驗客人端看到的節奏。

① 客人選擇行程

上車地點
車款
用車時段

② LINE 立刻回覆報價

桃園機場 T1出發・五人座・一般時段

您的預估車資

NT$1,200

  • 路線基本價・桃園機場 T1+NT$1,200
  • 車型加價・五人座
  • 時段加成・一般時段

送出後訂單會先進「待確認」,由客服覆核後才成立。

本區塊為互動示意,金額為展示用的虛構數字,非小黑貓實際費率。真實計價級距與加成規則屬客戶營運機密,不於本頁揭露。

核心功能

01

LINE LIFF 預約系統

客人在 LINE 裡三步完成預約,不需下載 App、不必註冊帳號,聯絡資訊自動帶入 LINE 會員姓名與電話

02

自動報價引擎

依上下車地點、車款、時段即時試算車資,把客服從重複詢價中解放出來;停靠點以座標計算距離,避免地址字串誤判級距

03

航班資料雙來源

航班時間同時介接兩個資料來源,其中一邊查不到就用另一邊補上,並在外部服務異常時主動通知,不讓客人卡在填不完的表單。

04

報價防火牆

訂單先進「待確認」,經客服覆核才成立。自動報價再準,也要留一道人工關卡,避免計價設定出錯直接變成對客戶的承諾。

05

LINE 雙向推播

送出申請時同時發卡片給客人(含取消按鈕)與完整訂單通知給後台群組;確認、備妥、完成各節點都有推播,形成通知閉環

06

後台派遣管理

客服在後台完成覆核、指派司機、追蹤進行中與已完成,訂單狀態機貫穿整條動線,現場與後台看到的是同一份資料

07

轉換漏斗追蹤

從進站、填寫到完成下單三個節點都有埋點,後台能看出客人卡在哪一步流失,讓流程改版有數據依據而不是憑感覺。

08

Filament 管理後台

訂單、車款、計價規則、航班設定與報表全部可由營運團隊自行維護;外部服務異常時主動通知,不讓問題悶在系統裡

預約生命週期流程圖

客人在 LINE 裡三步完成預約,但訂單不會直接成立。系統先自動算出車資、建立「待確認」訂單並同時通知客人與後台群組,由客服覆核無誤後才轉為預約成功——這道人工關卡是整套系統的報價防火牆。

客戶(LINE)系統自動客服・派遣司機主線流程角色交接
客戶LINE 內預約系統自動客服 · 派遣管理後台司機現場01填寫行程02自動報價03送出申請04人工覆核05指派司機06完成任務選擇行程與車款檢視即時報價送出預約申請收到已送出通知完成搭乘帶入航班與地址自動試算車資建立訂單並雙向推播狀態轉為預約成功推播確認通知記錄轉換數據收到後台群組通知覆核行程與報價指派司機訂單結案接收派遣執行接送

自動報價負責把客服從重複詢價中解放出來,人工覆核則確保計價設定萬一有誤時,能在訂單成立前攔下來。兩者搭配才是這套系統的核心設計。

報價防火牆

訂單先進「待確認」,經客服覆核才成立。自動報價再準,也要留一道人工關卡,避免計價設定出錯直接變成對客戶的承諾。

航班資料雙來源

航班時間同時介接兩個資料來源,其中一邊查不到就用另一邊補上,並在外部服務異常時主動通知,不讓客人卡在填不完的表單。

轉換漏斗追蹤

從進站、填寫到完成下單三個節點都有埋點,後台能看出客人卡在哪一步流失,讓流程改版有數據依據而不是憑感覺。

技術細節

LINE LIFF 整合

LINE LIFF 作為用戶端入口,旅客加入 LINE 好友後即可在 LINE 內開啟完整的預約網頁。系統會自動取得 LINE 用戶資訊,免去繁瑣的註冊流程,大幅降低預約門檻。

GraphQL API 設計

前後端透過 GraphQL 進行所有資料交換,包含預約建立/查詢、車型資訊、用戶管理、公告系統等。相較傳統 REST API,GraphQL 讓前端可精確指定所需欄位,減少不必要的資料傳輸,提升行動裝置上的載入速度。

多步驟預約流程

預約表單採用六步驟引導式設計:選擇行程類型(接機/送機)→ 日期時間 → 乘客與行李數 → 加值服務(兒童座椅、舉牌服務)→ 車型與價格 → 確認送出。每一步都有即時驗證,確保資料完整性。

自動報價引擎

車資依上下車地點、車款與時段即時試算,前端在客人填寫過程中就同步顯示金額,不必等客服回覆。停靠點的距離以座標計算而非地址字串比對,避免同名路段或門牌格式差異造成級距誤判而擋下正常訂單。

航班資訊介接與備援

客人輸入航班編號即自動帶出起降時間,減少填錯時間導致的接送落差。航班資料介接兩組來源互為備援,其中一邊查不到時間就用另一邊補上;同一航班號當日有多班次時列出讓客人自選,而不是自動取第一筆。外部服務異常時系統會主動發出通知,不讓問題悶在後台。

報價防火牆與訂單狀態機

自動報價再準也需要一道人工關卡。訂單送出後先進「待確認」,同時推播給客人與後台群組,由客服覆核行程與金額後才按下確認轉為「預約成功」,接著才進入指派司機、進行中、已完成。這個設計讓計價設定萬一有誤時,能在訂單成立前被攔下來,而不是事後跟客人重談。

轉換漏斗追蹤

預約流程在進站、填寫、完成下單三個節點埋點,後台可依日或依月檢視轉換率趨勢與每日明細,看出客人實際卡在哪一步流失。追蹤採獨立事件送出,翻頁或重整不會重複計算;報表並自動排除內部測試帳號,避免自己人的操作污染數據。這讓流程改版有依據,而不是憑感覺調整。

Filament 營運後台

後台以 Filament 建構,支援訂單管理(含司機指派、狀態追蹤)、車型與價目表設定、公告發布、LINE 用戶管理、活動日誌追蹤等功能,讓營運團隊高效管理日常業務。

使用技術

Backend

  • Laravel Framework
  • GraphQL API
  • Filament 管理後台

Frontend

  • Astro 5 SSR
  • Vue 3 互動元件
  • TailwindCSS 樣式
  • Flowbite UI 元件

LINE 整合

  • LIFF 預約介面
  • Webhook 訊息處理
  • 用戶自動綁定

數據分析

  • GA4 / GTM
  • LINE Tag
  • Microsoft Clarity
  • Facebook Pixel

常見問題

為什麼用 LINE LIFF 而不是開發獨立 App?

機場接送的使用情境多是偶爾使用、臨時預約,要求旅客先下載 App 反而會提高使用門檻。LINE LIFF 讓旅客加好友後直接在 LINE 內完成預約,免安裝、免註冊,也省去 App 上架審核與雙平台維護成本。

像小黑貓車隊這種預約平台,開發時間大概多久?

本專案於 2024 年完成,涵蓋 LINE LIFF 前台、GraphQL API、六步驟預約流程與 Filament 營運後台的完整開發。這類含後台管理系統的預約平台,一般開發時程落在 8–12 週,實際天數依串接的第三方服務數量與功能細節而定。

這套系統的架構可以套用在其他預約類服務嗎?

可以。核心的 GraphQL API 架構、多步驟預約流程與 Filament 營運後台屬於通用設計,換掉業務邏輯(車型改成場地、時段改成療程等)即可延伸應用到其他預約制服務,例如場地租借、到府服務或課程預約系統。

CONTACT US

有類似需求?讓我們聊聊

不論是預約系統、LINE 整合或機場接送平台,我們都能為您量身打造解決方案。

聯繫我們