iT邦幫忙

2026 iThome 鐵人賽

DAY 1
0
AI Engineering

從行程到應援:30 天做出追星實用工具箱系列 第 1

Day 1:系統架構設計與 Flutter 專案初始化

  • 分享至 

  • xImage
  •  

一、前言

製作的目的:想解決我們追星人平常看偶像直播聽不懂韓/日語以及追星資訊分散在各處的困境

30天的大鋼:

  • Week 1:工具箱骨架與基礎 UI
  • Week 2:AI 語音處理
  • Week 3:LLM 語意翻譯與飯圈 Prompt 工程
  • Week 4:系統整合、效能優化與成果展示

架構圖:

螢幕擷取畫面 2026-09-02 224719

  • Flutter (跨平台行動端開發)

    選用理由:一套程式碼就能同時打包 iOS 和 Android,UI 元件也算齊全。

    專案應用:拿來做追星工具箱的介面很合適,「即時滾動字幕牆」這類動畫效果跑起來順暢,Mobile 端 UI 不用分成兩套開發。

  • Whisper API (高精準語音辨識)

    選用理由:OpenAI 的 Whisper 在韓語、日語、英語這幾種語言上的辨識準確度不錯,背景噪音或口音重的情況也扛得住。

    專案應用:接收 Mobile 端傳來的 2-3 秒音訊切片,即時把偶像直播裡的對話轉成逐字稿,延遲控制在可接受範圍。

  • Hive / SQLite (輕量化本地資料儲存)

    選用理由:Hive 是給 Dart/Flutter 用的 Key-Value 資料庫,讀寫快、不用寫 SQL;SQLite 則負責存結構化的關聯式資料。

    專案應用:本地快取翻譯歷史、追星行程提醒、周邊收藏清單,離線或網路不穩時也能馬上讀到之前存的資料。

二、今日任務

建立 Flutter 專案

flutter create idol
cd idol

建立資料夾

lib/
├── core/          # 跨模組工具 (Theme, Network, Constants)
├── features/
│   ├── live_translate/ # 核心即時翻譯模組
│   ├── schedule/       # 行程追蹤模組
│   ├── collection/     # 收藏管理模組
│   └── expense/        # 記帳模組
└── main.dart

安裝基礎 Pub 套件(在 pubspec.yaml 加入基礎必備套件):

  • provider(狀態管理)
  • hive / hive_flutter(本地資料儲存)
  • google_fonts(美化追星 UI 字型)
name: idol
description: "追星人的工具箱"
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ^3.13.2

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  
  # 狀態管理
  provider: ^6.1.5+1
  
  # 本地資料庫與快取
  hive: ^2.2.3
  hive_flutter: ^1.1.0
  
  # UI 字型
  google_fonts: ^8.2.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

flutter:
  uses-material-design: true

下一篇
Day 2:模組一/追星行程追蹤與本地通知提醒功能實作Local Notification
系列文
從行程到應援:30 天做出追星實用工具箱7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言