商品功能的API使用dummyData-Products的APIs，就沒有自己寫了。會員功能則搭配firebase。把他們的資料模型列出來，然後依序創建他們的type。

• 商品列表(ProductListModel): https://dummyjson.com/products/category/smartphones
• 商品細節(ProductDetailModel): https://dummyjson.com/products/1
• 下拉選單的Category(CategoryItemModel): https://dummyjson.com/products/categories
• 只列Category名字(CategoryNameListModel)：https://dummyjson.com/products/category-list
• 會員登入/註冊:Firebase Authentication
• 會員購買紀錄: Firebase realtime database

目錄

• DataModel
• ViewModel
• 碎碎念

DataModel

export type Product_ReviewModel = {
    rating: number,
    comment: string,
    date: string,
    reviewerName: string,
    reviewerEmail: string
}
export type Product_MetaModel = {
    createdAt: string,
    updatedAt: string,
    barcode: string,
    qrCode: string
}
export type ProductDetailModel = {
    id: number,
    title: string,
    description: string,
    category: string,
    price: number,
    discountPercentage: number,
    rating: number,
    stock: number,
    tags: Array<string>,
    brand: string,
    sku: string,
    weight: number,
    dimensions: {
        width: number,
        height: number,
        depth: number
    },
    warrantyInformation: string,
    shippingInformation: string,
    availabilityStatus: string,
    reviews: Array<Product_ReviewModel>,
    returnPolicy: string,
    minimumOrderQuantity: number,
    meta: Product_MetaModel,
    thumbnail: string,
    images: Array<string>
}

export type ProductListModel = {
    products: Array<ProductDetailModel>,
    total: number,
    skip: number,
    limit: number
}

export type CategoryItemModel = {
    slug: string,
    name: string,
    url: string
}

export type CategoryNameListModel = Array<string>;

ViewModel

ViewModel的部分就依照當時設計的草稿，基於apiModel整理出需要的欄位：

export type RegistrationModel = {
    email: string;
    password: string;
    confirmPassword: string;
}

export type LoginModel =  {
    email: string;
    password: string;
}

export type userModel = {
    UID: string;
    name: string;
    phone: string;
    address: string;
    email: string;
}

export type purchaseOrder = {
    userUID: string;
    purchaseID: string;
    purchaseDate: string;
}

export type item = {
    purchaseID: string;
    productId: string;
}

export type purchaseOrderItem = {
    purchaseID: string;
    purchaseItems: Array<item>;
}

碎碎念

我覺得view model應該後來會改內容XDDDDD