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

CONTACT US

有類似需求?讓我們聊聊

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

聯繫我們