Play video
Pause video

小黑貓
車隊

桃園機場接送預約平台

2024

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

專案概述

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

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

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

6車型選擇
3步驟完成預約
24/7真人客服支援

核心功能

01

LINE LIFF 預約系統

整合 LINE Front-end Framework,讓旅客直接在 LINE 中完成從選擇車型、填寫行程到確認訂單的完整預約流程,無需另外下載 APP

02

GraphQL API 架構

前後端透過 GraphQL 進行資料交換,實現預約查詢、車型資訊、用戶管理等功能,精確取得所需欄位,提升載入效率

03

即時價格計算

根據出發地區、目的地、車型、乘客人數與行李數量,即時計算接送費用,價格透明不跳表不加價

04

Filament 管理後台

以 Filament 建構完整後台系統,管理預約訂單、司機指派、車型設定、公告發布與用戶資料,支援即時營運管理

技術細節

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 整合或機場接送平台,我們都能為您量身打造解決方案。

聯繫我們