[MAUI 專案實戰] 筆記App（一）：介紹與程式設計

@

目錄

• 前言
• 軟體規格說明
  • 主要功能
  • 執行環境
  • 開源元件庫
  • 裝置許可權
  • 第三方服務
• 使用介紹
  • 場景列表頁
    • 從場景建立筆記
    • 編輯場景
    • 新增場景片段
    • 編輯場景片段
    • 刪除場景片段
    • 刪除場景
  • 筆記列表頁
    • 建立新筆記
    • 編輯筆記
    • 新增筆記片段
    • 編輯筆記片段
    • 刪除筆記片段
    • 刪除筆記
  • 統計
  • 其它設定
    • PIN到快捷方式
    • 換膚功能
• 程式設計
  • 框架
  • 定義
  • 核心類
• 專案地址

系列文章：

[MAUI 專案實戰] 筆記App（一）：介紹與程式設計
[MAUI 專案實戰] 筆記App（二）：資料庫設計

前言

有人說現在記事類app這麼多，市場這麼卷，為什麼還想做一個筆記類App？

一來，去年小孩剛出生，需要一個可以記錄餵奶時間的app，發現市面上沒有一款app能夠在兩步內簡單記錄一個時間，可能iOS可以透過備忘錄配合捷徑做到快速記錄，但是安卓上就沒有類似的app。

二是，自去年做的音樂播放器以來，很長一段時間我在部落格上的XF，MAUI都是在介紹區域性的功能，[MAUI 專案實戰]專題也很長沒更新了，這次透過筆記類App做一次完整專案，包括如何上架MAUI應用等內容一併更新了。

一開始用MAUI簡單做了一個功能，就記錄餵奶量 + 餵奶時間 + 提醒。後期逐步做成一個可以動態新增摘要片段的功能。取名為《凡事摘要》。

目前安卓版本已釋出打包，並上架騰訊應用商城：凡事摘要，iOS版本的部分頁面還有問題需要除錯，最近比較忙，我會抽出時間繼續完善。在這個時間點我決定把App所有的程式碼都放在GitHub上，方便大家學習。也歡迎有興趣的小夥伴一起參與。

軟體規格說明

主要功能

• 筆記管理：新增筆記，編輯筆記標題，增加筆記片段，修改筆記片段內容，刪除筆記等功能。
• 場景管理：新增場景，編輯場景標題，封面等，增加場景片段，修改場景片段內容，刪除場景等功能。
• 資料統計：檢視統計資料。
• 應用快捷入口管理：增加或刪除場景快捷方式。
• 其它設定：換膚，是否顯示預覽頁面等

執行環境

執行環境為Android 10.0及以上版本，ARM架構CPU，四核2.0GHz， 4GB記憶體，16GB儲存空間，5.5英寸及以上LCD螢幕的Android裝置。

開源元件庫

元件庫名稱

.NET Runtime

C#/WinRT

Xamarin.Forms

ASP.NET Core Blazor

AutoMapper

ASP.NET Boilerplate (Abp)

CommunityToolkit.Maui

Castle.Windsor

Newtonsoft.Json

Microsoft.EntityFrameworkCore

裝置許可權

許可權名稱	使用目的	使用場景
裝置GPS感測器資訊	獲取當前地理位置用於地址解析	建立筆記
設讀取裝置或儲存卡中的內容	上傳圖片時獲取使用者相簿圖片檔案	APP前臺執行時
相機	上傳圖片時透過裝置相機獲取圖片	建立筆記
讀取聯絡人	建立聯絡人片段時讀取裝置聯絡人資訊	建立筆記
錄製音訊	建立聲音片段時透過麥克風錄製音訊	建立筆記

第三方服務

服務名稱	服務資源	服務內容	連結
百度智慧雲	使用者建立的音訊	提供語音轉文字服務	https://cloud.baidu.com/
和風天氣	使用者當前地理位置	提供本地天氣資訊	https://www.qweather.com
高德開放平臺	使用者當前地理位置	提供當前地理位置的地址解析服務	https://lbs.amap.com/

使用介紹

場景列表頁

場景列表頁用於呈現所有場景，軟體預設會有一些場景，使用者可以新增新的場景，也可以刪除場景。

從場景建立筆記

使用者在“場景”頁面點選場景列表中的條目，可建立對應場景的筆記。如在點選“餵奶”場景，軟體會建立一條筆記，並跳轉到編輯頁面，點選“儲存”按鈕，在筆記列表中會呈現此筆記。

編輯場景

編輯場景可對現有場景進行修改，包括修改場景名稱，封面，增加、刪除、修改場景片段。
點選“...”按鈕，開啟編輯場景頁面，編輯完成後，點選“儲存”按鈕完成編輯

新增場景片段

在編輯場景頁面，點選“+”按鈕，可新增場景片段。如在彈出的片段列表中，點選“筆記”

編輯場景片段

在編輯場景頁面，點選片段標題可修改標題內容，按住片段右側的按鈕可拖拽，在其它位置釋放手指可完成排序。

刪除場景片段

在編輯場景頁面，向左滑動片段，點選“刪除”按鈕，即可完成片段刪除

刪除場景

在編輯場景頁面，點選“刪除”按鈕，或在場景列表頁面，長按場景條目，點選“-”按鈕，即可完成場景刪除

筆記列表頁

筆記列表頁用於呈現所有筆記，使用者可以新增新的筆記，也可以編輯或刪除現有的筆記。

建立新筆記

在筆記列表頁面點選“+”按鈕，可建立一條新的筆記。此時，軟體會跳轉到編輯頁面，點選“儲存”按鈕，在筆記列表中會呈現此筆記。

編輯筆記

編輯筆記可對現有筆記進行修改，包括修改筆記標題，增加、刪除、修改筆記片段。
在筆記列表頁中，向左滑動筆記條目，點選“編輯”按鈕，開啟編輯筆記頁面，編輯完成後，點選“儲存”按鈕完成編輯

新增筆記片段

在編輯筆記頁面，點選“+”按鈕，可新增筆記片段。如在彈出的片段列表中，點選“筆記”

編輯筆記片段

在編輯筆記頁面，點選片段標題可修改標題內容，按住片段右側的按鈕可拖拽，在其它位置釋放手指可完成排序。

刪除筆記片段

在編輯筆記頁面，向左滑動片段，點選“刪除”按鈕，即可完成片段刪除

刪除筆記

在筆記列表頁向左滑動筆記條目，點選“刪除”按鈕，或在編輯筆記頁面，點選“刪除”按鈕，即可完成筆記刪除

統計

筆記中的數值片段中的數值，可以進行統計。
在筆記編輯頁面，新增一個數值片段，輸入數值並儲存，切換到統計頁面，可以看到這些數值為縱軸、時間為橫軸的趨勢圖

其它設定

PIN到快捷方式

對於符合“快速建立”的場景，使用者可以在“場景”頁面，點選“PIN到快捷方式”按鈕，將場景新增到桌面快捷方式，方便使用者快速建立筆記。

換膚功能

軟體支援換膚功能，使用者可以在“我的”頁面，點選“黑暗”、“明亮”或“自動”按鈕切換軟體主題。

程式設計

框架

使用Abp框架，我之前寫過如何 將Abp移植進.NET MAUI專案，本專案也是按照這篇博文完成專案搭建。

這次的專案，主要透過原型和工廠模式建設基於模板的筆記內容。

沒有使用過多的跨平臺特性，如果需要了解更多MAUI跨平臺知識，請參考之前音樂播放器系列文章。

定義

• Note - 筆記，可以成整頁開啟的內容
• NoteTemplate - 筆記模板，或稱為場景，是可以快速建立筆記的模板
• NoteSegment - 筆記片段，它是一個筆記（Note）的組成
• NoteSegmentTemplate - 筆記片段模板，對應場景中可快速建立筆記片段的模板
• NoteSegmentPayload - 筆記片段負載，儲存具體筆記片段的內容
• NoteSegmentService - 筆記片段服務類，為筆記片段，或筆記片段模板提供增刪改等具體的業務邏輯
• NoteSegmentServiceFactory - 筆記片段服務工廠，為筆記片段服務類提供工廠方法

核心類

INoteSegment：它是筆記片段的抽象類，模板類NoteSegmentTemplate和筆記片段類NoteSegment都實現了INoteSegment

它包含了筆記片段的屬性，如標題、顏色、圖示、是否隱藏、是否可刪除、排序、狀態、型別等。同時它關聯一個筆記片段負載類INoteSegmentPayload

public interface INoteSegment
{
    string Color { get; set; }
    string Desc { get; set; }
    string Icon { get; set; }
    bool IsHidden { get; set; }
    bool IsRemovable { get; set; }
    int Rank { get; set; }
    string Status { get; set; }
    string Title { get; set; }
    string Type { get; set; }

    INoteSegmentPayload GetNoteSegmentPayload(string key);
    INoteSegmentPayload GetOrSetNoteSegmentPayload(string key, INoteSegmentPayload noteSegmentPayload);
    void SetNoteSegmentPayload(INoteSegmentPayload noteSegmentPayload);
}

INoteSegementService：凡事摘要擁有不同的筆記型別，如：時間戳片段，文字片段，檔案片段等，App中可以透過新增片段按鈕檢視所有型別。

這些片段透過片段服務類（NoteSegementService）來描述該如何儲存，使用Payload中的資料。

不同的片段型別，透過不同的片段服務類來實現。比如，在時間戳片段中，我們要儲存當前時間和計算倒數計時，而檔案片段中，我們要儲存檔案路徑，檔名，檔案大小，檔案型別等資訊。

這些都是透過片段服務類來實現的。

具體型別如下：

型別	描述
DateTimeSegmentService	時間戳片段服務類
KeyValueSegmentService	數值片段服務類
FileSegmentService	檔案片段服務類
TextSegmentService	文字片段服務類
TodoSegmentService	待辦片段服務類
WeatherSegmentService	天氣片段服務類
LocationSegmentService	地點片段服務類
TimerSegmentService	鬧鐘片段服務類
ContactSegmentService	聯絡人片段服務類
VoiceSegmentService	錄音片段服務類
MediaSegmentService	媒體片段服務類
ScriptSegmentService	繪製片段服務類
DocumentSegmentService	檔案片段服務類

片段服務類包含了一個INoteSegment，它是當前的筆記片段物件

INoteSegmentServiceFactory:

片段服務類的工廠類，除此之外還有一個INoteSegmentTemplateServiceFactory，他們都是根據筆記片段，或者筆記模板中的片段型別建立對應的片段服務類。

用於筆記的片段服務類的工廠類:

public interface INoteSegmentServiceFactory: ISingletonDependency
{
    INoteSegmentService GetNoteSegmentService(NoteSegment noteSegment);
}

用於筆記模板的片段服務類的工廠類

public interface INoteSegmentTemplateServiceFactory: ISingletonDependency
{
    INoteSegmentService GetNoteSegmentService(NoteSegmentTemplate noteSegmentTemplate);
}

NoteSegmentService作為筆記片段服務的基類，它繼承了ViewModelBase，實際上服務基類是各筆記片段檢視層的ViewModel，檢視介面元素透過繫結服務類中的屬性來顯示或更新資料。

每一種服務類都對應的一個檢視。渲染時，Xaml透過NoteSegmentDataTemplateSelector模板選擇器來選擇對應的檢視。有關介面部分將在另一篇文章介紹。

專案地址

使用和釋出請遵循GPL-3.0 license許可，請勿用於商業用途。

GitHub:MatoProductivity