iT邦幫忙

2025 iThome 鐵人賽

DAY 13
1

經過前兩天的努力,「日更靈感」App 已有了完整的核心體驗 —— 滑動卡片、點擊收藏、並在專屬頁面回顧,這感覺非常棒~但現在App還有失憶症的問題。

目前App的所有的狀態都由Riverpod管理,而這些狀態都儲存在裝置的RAM中。這意味著只要使用者從多工後台滑掉App,或是手機重新開機,所有辛苦收藏的靈感都會直接消失,這對於任何想要長期使用的App來說,是無法接受的。

為解決這個問題,需要引入「本地持久化」,也就是將資料儲存到手機的硬碟上。今天,將介紹一位新夥伴:Hive,一個輕量、快速且純Dart寫成的NoSQL資料庫。今天我們將完成所有前置設定,為明日的資料讀寫做好準備。

第一步:為什麼選擇 Hive?

在Flutter中,本地儲存方案有很多種,如shared_preferences、sqflite等。那為什麼這次我選擇Hive 呢?原因如下:

  • 🚀 極致的速度:Hive 的設計哲學就是快。它是一個鍵值對(Key-Value)資料庫,讀寫效能非常出色,幾乎感覺不到延遲,非常適合需要流暢體驗的行動應用。

  • 🐦 純 Dart 實現:Hive核心庫是100%的Dart程式碼,不依賴任何原生平台的功能。這意味著它有著絕佳的跨平台性(手機、桌面、網頁),且能減少許多平台相關的惱人 Bug。

  • 👨‍💻 簡潔的API:Hive的API非常直觀易懂,主要就是put(key, value)(寫入)、get(key)(讀取)、delete(key)(刪除) 這幾個操作,學習曲線非常平緩。

  • 🔒 內建加密:Hive 原生支援AES-256加密。雖然我們的專案暫時用不到,但對於需要儲存敏感資訊的App來說,這是一個非常重要的安全功能。

相較於只能存儲簡單資料的shared_preferences和需要編寫SQL、結構較重的sqflite,Hive 在效能和易用性上取得了相當的平衡,是此專案的最佳選擇。

第二步:安裝與基礎設定

使用Hive,我們需要安裝幾個套件:

  1. hive: Hive 的核心庫。
  2. hive_flutter:讓Hive與Flutter更好地整合,提供一些便利的工具。
  3. path_provider:用於找到手機上可以安全儲存檔案的路徑。

在終端機中執行:
flutter pub add hive hive_flutter path_provider

**安裝完成後,最重要的一步是初始化 Hive~這個操作必須在 App 啟動前完成。

第三步:定義我們的資料庫「Box」

在Hive中,資料被儲存在稱為Box的容器裡。可以把它想像成SQL資料庫中的一張「資料表」。根據我們的需求,我們需要兩個 Box:

  • 'favorites': 用於儲存使用者收藏的Insight物件列表。
  • 'insights_cache': 用於快取從API抓取下來的每日靈感,讓App在離線時也能看到內容。

我們在 main 函式中,初始化 Hive 之後,立刻「打開」這兩個 Box:

// ... in main() after Hive.initFlutter()

// 打開我們的 Box
await Hive.openBox('favorites');
await Hive.openBox('insights_cache');

runApp(
  const ProviderScope(
    child: MyApp(),
  ),
);

openBox會檢查這個Box是否存在,如果不存在,就會自動建立一個。

第四步:讓Insight模型與Hive相容

Hive本身只認識Dart的基本型別(如 String, int, List, Map),它並不知道如何儲存我們自訂的Insight 物件。所以,我們必須教Hive如何序列化(物件 -> 二進位)和反序列化(二進位 -> 物件)我們的模型。

這個過程需要藉助TypeAdapter和程式碼產生器來自動完成:
Step 1. 安裝開發依賴
Step 2. 標註 (Annotate) 我們的模型
Step 3. 執行程式碼產生器
Step 4. 註冊 Adapter

明日預告:Hive離線快取(下)

今天完成了讓資料活下來的準備工作,雖然沒有寫入任何一行資料,但已搭建好了堅實的地基

地基已穩,萬事俱備。明天將正式動手,將Riverpod Provider與Hive連接起來。實作App啟動時從Hive讀取舊資料,以及在使用者收藏時將新資料寫入Hive的邏輯,徹底根治App的失憶症~明天見啦!


【哈囉你好:)感謝你的閱讀!其他我會常出沒的地方:Threads


上一篇
30 天做一個極簡App:收藏頁面的誕生
系列文
Mobile Dev|日更靈感來源 App:Flutter × LLM × n8n,每天只推 3 則!13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言