# 第七週

課程範例版型：

- [https://hexschool.github.io/js-training-layout-1/](https://hexschool.github.io/js-training-layout-1/)
- [https://hexschool.github.io/js-training-layout-2/](https://hexschool.github.io/js-training-layout-2/)

### 本週提醒

- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=376" target="_top">第七週主線任務：後台開發</a>
- 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/
- 心得牆開放
- [心得牆素材圖](https://hackmd.io/UGWuY24QRLWjU2s0LvvAAQ?view)
- 線上助教服務

### 上一週的團隊作業討論：

https://casper-wang.notion.site/7555488641404d03a1b697dae6e5b2d5?pvs=4
https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=1397510807

### 最終作業 / 專題流程說明

**基本使用者故事：**

用戶：

- 用戶可以進入首頁，了解該產品的特色
- 用戶可以查看產品列表
- 用戶可以透過分類過濾產品
- 用戶可以搜尋產品
- 用戶可以在產品列表加入購物車
- 可以查看更詳細的內容
- 用戶可以進入商品細節頁面
- 可以得知商品的細節描述
- 可以選擇不同數量，並加入購物車
- 可以加入收藏
- 可以查看相似的品項
- 用戶可以加入購物車
- 購物車的商品，可以在任何頁面得知數量
- 重複加入相同的商品，購物車的同商品數量會增加 1
- 用戶可以重新調整購物車商品數量
- 用戶可以將購物車的商品品項移除
- 用戶可以透過優惠券折扣商品
- 用戶可以結帳
- 用戶可以將加入購物車的商品結帳
- 結帳表單會提供最基本的驗證
- 結帳完成，用戶可以查看付款相關資訊

管理者：

- 管理者可以登入後台
- 管理者可以新增、編輯、刪除商品
- 管理者可以新增優惠券
- 管理者可以設定優惠券到期時間
- 管理者可以管理訂單
- 管理者無法新增訂單
- 管理者可以調整訂單的狀態

**需要製作的頁面**

- 前台
- 基本頁面：
- 首頁（不含 Navbar 至少包含五個 section）
- 產品列表
- 單一產品細節頁面
- 購物車
- 表單填寫
- 付款完成
- 可延伸功能或畫面：
- 關於/品牌/產品介紹…：[https://hoongyuu.github.io/Cheeto-s-Wine/#/intro](https://hoongyuu.github.io/Cheeto-s-Wine/#/intro)
- 部落格/文章：[https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist](https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist)
- 分類：[https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=城市導覽](https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=%E5%9F%8E%E5%B8%82%E5%B0%8E%E8%A6%BD)
- 延伸產品：[https://char849.github.io/vue3-week8a-main/#/course](https://char849.github.io/vue3-week8a-main/#/course)
- 搜尋：[https://kevinhes.github.io/finalworkvue2022/#/](https://kevinhes.github.io/finalworkvue2022/#/)
- 優惠券發放活動：[https://mickey116.github.io/PuzzleVue/#/getcoupon](https://mickey116.github.io/PuzzleVue/#/getcoupon)
- 我的最愛：[https://jordan-ttc-design.github.io/fine-job/#/](https://jordan-ttc-design.github.io/fine-job/#/)
- 一堆動態效果：[https://huan5678.github.io/chill-bar/#/](https://huan5678.github.io/chill-bar/#/)
- 可愛的插畫：[https://22495521.github.io/BigGo/#/FrontPage](https://22495521.github.io/BigGo/#/FrontPage)
- 視差滾動：[https://potatoleee.github.io/iiincookie-vue/#/](https://potatoleee.github.io/iiincookie-vue/#/)
- 後台（第七週作業，可以與第八週作業合併審合）

**需要達到的條件：**

1. 視為一個正式運行的網站
2. 不能有假字、假圖
3. 所有連結均需要能夠正確運作
4. 符合基本的使用者體驗

### 設計概念分享

[https://www.figma.com/proto/0oZaYFoT6iyclwj1heDrWt/202302---Vue-%E7%9B%B4%E6%92%AD%E7%8F%AD-%E8%A8%AD%E8%A8%88%E6%95%99%E6%9D%90?page-id=0%3A1&node-id=1%3A4&viewport=936%2C249%2C0.75&scaling=scale-down](https://www.figma.com/proto/0oZaYFoT6iyclwj1heDrWt/202302---Vue-%E7%9B%B4%E6%92%AD%E7%8F%AD-%E8%A8%AD%E8%A8%88%E6%95%99%E6%9D%90?page-id=0%3A1&node-id=1%3A4&viewport=936%2C249%2C0.75&scaling=scale-down)

### 頁面製作哪些需要注意呢？

- 穩定為主（單色）
- 整齊
- 盡可能符合使用者體驗

### 其他參考資源

1. 資訊傳達 → 引導用戶看到他想看的東西
- 每個網站都有一個最重要的目標，參考案例：
1. [https://aws.amazon.com/tw/](https://aws.amazon.com/tw/)
2. [https://evernote.com/intl/zh-tw](https://evernote.com/intl/zh-tw)
3. [https://www.shopify.com/tw](https://www.shopify.com/tw)
2. 美觀 → 讓用戶符合期待
- 你的網站想要呈現如何的風格？
1. 很貴：[https://tw.louisvuitton.com/zht-tw/homepage](https://tw.louisvuitton.com/zht-tw/homepage)
2. 搶便宜：[https://i3fresh.tw/](https://i3fresh.tw/)
3. 新創、自然：[https://www.greenvines.com.tw/](https://www.greenvines.com.tw/)
- 在符合資訊傳達概念下，如何有更美觀的樣式
1. 色彩單純、文字運用、格線系統
2. 最重要的是排整齊…
3. 使用者體驗 → 讓用戶可以順利達到他的目標
- 關於使用者體驗的表單設計
1. [https://github.com/Wcc723/Google-UX-Playbook-for-Retail-translate/blob/master/zh-tw/section_8.md](https://github.com/Wcc723/Google-UX-Playbook-for-Retail-translate/blob/master/zh-tw/section_8.md)
- Google Accessibility 說明文件
1. [https://web.dev/learn/accessibility/](https://web.dev/learn/accessibility/)
2. 案例 - 顏色對比度：[https://web.dev/learn/accessibility/color-contrast/](https://web.dev/learn/accessibility/color-contrast/)
4. 特效教學
- 如何在課程作品中加入輪播、SweetAlert 等各種特效：https://courses.hexschool.com/courses/vue-2021211/lectures/49940037

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=376" target="_top">第七週主線任務：後台開發</a>
- 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/
- 課後測驗：
- 測驗題：https://casper-wang.notion.site/fc7861d7c63f42099f0f6b0e76b5128c?pvs=4
- 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=895249498
- 團隊任務：
- https://rpg.hexschool.com/training/39/show?embedhm=57sdvv8YR7yRGE29nLh-Ng