MiyaraHub / Elan Audio Lab
Elan Audio Lab 應用程式圖示

Elan Audio Lab網頁平台精品真空管擴大機,從頭到尾一手包辦銷售。✦

為擁有 35+ 年歷史的精品真空管擴大機品牌打造的全端電商平台。

產品目錄、客製擴大機組裝工具、雙重金流處理、藝人展示,以及擁有 20+ 個畫面的完整管理後台。

◆ 精品電商平台 · 35+ 年的擴大機製作傳承
提供平台 iPhoneiPadAndroid網頁
Elan Audio Lab 商店首頁
商店首頁
3
平台(網頁、iOS、Android)
652
測試通過
20+
管理畫面
6
CI/CD 流程
實際操作一覽

深色模式優先,帶著真空管工坊的溫暖。

Elan Audio Lab 的真實畫面:產品目錄、擴大機組裝工具、組合優惠、藝人、品牌故事與保固登錄。點選任一張即可放大。

商店功能

完整的電商體驗。

精品品牌所需的一切功能,從瀏覽商品到客製擴大機組裝、雙重金流處理,以及藝人社群。

No. 01

▣ 產品目錄

擴大機頭、一體機、音箱、配件、周邊商品與零件,具備篩選、搜尋、產品標章(新品、特價、限量)與折扣定價。

篩選搜尋標章
No. 02

⚙ 擴大機客製組裝工具

設定客製擴大機改裝項目並即時顯示價格。選擇加購項目、查看累計總額、儲存組裝配置以便日後使用,並分享組態。

即時價格儲存配置分享
No. 03

◉ 雙重金流處理

以 Square Web Payments SDK 處理信用卡,並整合 PayPal。包含稅額計算、透過 USPS 驗證地址,以及訂單追蹤。

SquarePayPalUSPS
No. 04

◆ 藝人展示

名人堂展示使用 Elan 產品的藝人與演奏者。包含推薦評語、語錄與 YouTube 影片連結,作為社會認同。

推薦評語YouTube社會認同
No. 05

▤ 產品組合優惠

精選的組合優惠,自動計算省下的金額。顯示單品與組合價格的對照、內含項目,並可一鍵加入購物車。

節省金額計算組合優惠
No. 06

◎ 品牌故事與內容

內容豐富的「我們的故事」頁面,記錄 MetalHead Electronics 35+ 年的歷史。部落格採用 CMS 驅動的內容,並附有媒體圖庫與電子報訂閱。

部落格圖庫CMS
No. 07

▢ 保固登錄

產品登錄表單,具備序號查詢、購買日期與保固啟用功能。資料直接匯入管理後台以便追蹤。

序號查詢登錄
No. 08

✦ 問答推薦

互動式問答,依據顧客的演奏風格、音樂類型與需求,幫助他們找到合適的擴大機。提供個人化的產品推薦。

互動式個人化
技術架構

以現代化工具打造。

跨平台 Flutter 應用程式,以 Supabase 無伺服器基礎架構為後盾,搭配雙重付款 SDK 與完整的 CI/CD。

◉

Flutter + Dart

單一程式碼庫,涵蓋網頁、iOS、Android

▣

Supabase

驗證、資料庫、儲存空間、邊緣函式

◎

Square SDK

信用卡處理(Web Payments)

◆

PayPal

替代付款方式

⚙

Riverpod + MVVM

狀態管理與架構

▤

Freezed + GoRouter

不可變模型與路徑式導覽

▢

資料列層級安全

資料庫層級的存取控制

✦

6 條 CI/CD 流程

網頁 + Android + iOS x 預備環境 + 正式環境

管理後台

20+ 個管理畫面。

完整的後台,管理商店的每個層面,包括產品、訂單、客戶、內容與系統設定。

◉

儀表板

銷售總覽、近期訂單、活動記錄

▣

產品與分類

完整的新增、讀取、更新與刪除,含圖片、定價、標章

◎

訂單與客戶

訂單管理、客戶檔案

⚙

客製化

零組件、選項、定價規則

◆

組合與標章

組合優惠、產品標章管理

▤

部落格與圖庫

CMS 內容、媒體管理

✦

問答與候補名單

推薦問答設定、候補名單登記

▢

電子郵件與電子報

範本、訊息、訂閱者管理

▧

網站與系統設定

功能旗標、SEO、內容頁面

◇

使用者管理

角色、權限、帳號設定

親眼看看。

Elan Audio Lab 已在網頁、Google Play 與 App Store 上線。