URL

• ルートURL(/items)を選択したアイテムの一覧画面(カート画面)にする

データ設計

• Firestoreを使用
• FirestoreのCollection、Documentによるデータ管理
  • 階層データ構造
  • Collectionは、RDBでいうテーブルに似ている
  • Doocumentは、RDBでいうレコードに似ている

Collections

• Items Collection
• ShoppingCart Collection

Items Collection

• 全てのアイテムが格納される

{
  name: String,
  thumbnail: String,
  price: Integer
}

ShoppingCart Collection

• 選択したアイテムが格納される

{
  items: Items Collection
}

実装方針

• Firestoreにあるアイテム情報一覧をVueコンポーネントのmountedのタイミングで取得
• firestoreのSDKを使用
• 元データ自体は、モックとして用意。Firebaseコンソール画面から直接作るもよし、別の方法でも

見積もり

1pt = 1日換算

• 元データの用意
• データの取得

見積もり結果：0.5pt

登場するモデル

• Customer
  • ユーザー
  • アイテムを見れる
  • カートにアイテムを追加できる
• Product
  • アイテム自体の情報を持つ
  • Eコーマスで言う商品に当たる
  • ユーザーによってカートに追加される
• Cart
  • アイテムを一箇所にまとめる
  • ユーザーによってアイテムを追加される

Customer

{
  id: String,
  name: String,
  isActive: Boolean, // 論理削除フラグ
  cartRef: Reference // ex. /carts/{cartID}
  createdAt: Timestamp,
  updatedAt: Timestamp
}

Product

{
  id: String
  name: String,
  description: String,
  price: Integer,
  stock: Integer, // 在庫数
  shopRef: Reference, // 商品を管理するお店モデル。今回は特に使用していない
  isActive: Boolean,
  createdAt: Timestamp,
  updatedAt: Timestamp
}

Cart

• ショッピングカートのモデル
• Customerと1対１の関係

{
  name: String,
  customerRef: Reference,
  isActive: Boolean,
  createdAt: Timestamp,
  updatedAt: Timestamp,
  products: SubCollection
}

Cart/Products

• カート内に追加されたアイテムたち
• • Cart : Products = 1 : Nのリレーションを持たせるため、Cartドキュメント内にProductのサブコレクションをもたせる
• Cart/Product : Product = 1 : 1

{
  cart/products: {
    cartRef: reference,
    productRef: reference,
    ...products // Productドキュメントの各データ 
  }
}

概要

• 簡単なShopping Cartアプリ

開発要件

[must] アイテム選択画面

• ユーザーが複数のアイテムを選択できること
• ユーザーが選択したアイテムをデータベースに保存できること

[must] アイテム一覧画面

• データベースからデータを取得し、前のページで選択したアイテム一覧を確認することができること

認証

• Googleアカウント認証
• 認証完了時をトリガーにCloud Functions で、Firestoreにユーザーデータを新規作成

概要

• ユーザーが複数のアイテムを選択できること
• ユーザーが選択したアイテムをデータベースに保存できること

ユーザーが複数のアイテムを選択できること

URL

• /

画面イメージ

アイテム選択画面

• アイテム一覧(Items Collection)が表示されている
• 各アイテムは、カードUIにして、「カートに追加」というボタンでカートにアイテムを追加する
• アイテム一覧画面のヘッダー部分にカートアイコンのボタンを用意

DB操作

• Firestoreのデータ追加
  • https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja
• Firestoreのデータ削除
  • https://firebase.google.com/docs/firestore/manage-data/delete-data?hl=ja
• Items Collectionから選択したItem Documentを ShoppingCardDocumentのItems Collectionに追加
  • ShoppingCard Collectionから ShoppingCartのDocumentを指定する際にUser IDでとってくるという仕様にしないとアプリとして違和感がありそう