EP09

2023 iThome 鐵人賽

DAY 9

Mobile Development

Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列系列第 9 篇

15th鐵人賽 .net maui

James Tsai

2023-09-24 14:11:48

188 瀏覽

分享至

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP09。

前面幾篇 EP 為了不節外生枝，就將應該會由 Order (未來會存成 SQLiteDB 的一個資料表)的資料，先分開設計成 SummaryOrder、OrderOwners 的這兩個類別，並在 MockData 當中直接透過這兩個類別來建立兩組集合，來方便顯示到畫面上。

在本 EP 就來做把這樣的設計調整回來吧~~~

首先，還是在 Models 資料夾當中增加一個 Order 的類別，並在其中增加如下程式碼：

using CommunityToolkit.Mvvm.ComponentModel;
using SQLite;

namespace TopStoreApp.Models;

public class Order
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    [NotNull]
    public int PersonId { get; set; }
    [NotNull]
    public DateTime OrderDate { get; set; }
}

完成結果如下圖所示：

接著在 MockData 當中的欄位宣告增加：

private readonly ObservableCollection<Models.Order> orders;

完成結果如下圖所示：

並在建構式當中建立該 orders 欄位的集合物件：

orders = new ObservableCollection<Models.Order> {
    new Models.Order
    {
        Id = 1,
        PersonId = 5,
        OrderDate = DateTime.Parse("2023/08/04")
    },
    new Models.Order
    {
        Id = 2,
        PersonId = 1,
        OrderDate = DateTime.Parse("2023/08/03")
    },
    new Models.Order
    {
        Id = 3,
        PersonId = 4,
        OrderDate = DateTime.Parse("2023/08/03")
    },
    new Models.Order
    {
        Id = 4,
        PersonId = 2,
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.Order
    {
        Id = 5,
        PersonId = 3,
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.Order
    {
        Id = 6,
        PersonId = 4,
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.Order
    {
        Id = 7,
        PersonId = 1,
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.Order
    {
        Id = 8,
        PersonId = 5,
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.Order
    {
        Id = 9,
        PersonId = 2,
        OrderDate = DateTime.Parse("2023/08/01")
    },
    new Models.Order
    {
        Id = 10,
        PersonId = 3,
        OrderDate = DateTime.Parse("2023/08/01")
    },
    new Models.Order
    {
        Id = 11,
        PersonId = 4,
        OrderDate = DateTime.Parse("2023/08/01")
    },
    new Models.Order
    {
        Id = 12,
        PersonId = 2,
        OrderDate = DateTime.Parse("2023/07/31")
    },
    new Models.Order
    {
        Id = 13,
        PersonId = 3,
        OrderDate = DateTime.Parse("2023/07/31")
    },
    new Models.Order
    {
        Id = 14,
        PersonId = 4,
        OrderDate = DateTime.Parse("2023/07/31")
    },
    new Models.Order
    {
        Id = 15,
        PersonId = 5,
        OrderDate = DateTime.Parse("2023/07/31")
    },
};

完成結果如下圖所示：

在這邊就會注意到，此 Orders 的資料產生的感覺很像先前的 OrderOwners，沒錯，因為接著就是要把 OrderOwners 跟 SummaryOrders 這兩個資料及在 MockData 建構式當中建立的物件集合給刪除了。

如下圖紅框所示：

那 GetSummaryOrders、GetOrderOwners 方法該回傳什麼資料？不要急~~~

接著就在 GetSummaryOrders 方法當中填入以下程式碼：

var summaryOrders = from order in orders
            group order by order.OrderDate.Date into g
            select new Models.SummaryOrder 
            { Summary = g.Key, Count = g.Count() };
return new ObservableCollection<Models.SummaryOrder>(summaryOrders);

SummaryOrders 的資料就透由 Orders 的資料根據日期分組並統計而來，就能完成 GetSummaryOrders 應回傳的資料。

而 GetOrderOwners 方法當中填入以下程式碼：

var orderOwners = from order in orders
            join person in people on order.PersonId equals person.Id
            where order.OrderDate.Date == orderDate.Date
            select new Models.OrderOwner { Owner = person.Name };

return new ObservableCollection<Models.OrderOwner>(orderOwners);

OrderOwners 的資料就透由 Orders 的資料跟 People 的資料經過 join 後再比對日期而來，這樣就能完成 GetOrderOwners 應回傳的資料。

完成結果如下圖所示：