###### tags: `學期 2-2` `Wk1`
[ToC]
# 打造 POS 機工作坊

## Before Webinar
### 報名 Week 2 打造 POS 機工作坊！

#### Week 2 打造 POS 機工作坊資訊

<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content; font-weight: bold;">
日期與時間：03/22 (三) 19:30 - 21:00 <br>
參加連結：<a href="https://zoom.us/j/86263969400" target="_blank">https://zoom.us/j/86263969400</a><br>
會議密碼：183279<br>
<span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，以利工作坊進行</span><br>
<a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NjlhMTltdTl0dXVzaHA5ODc2bTZlbjA4cG8gczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>

透過這次的線上工作坊，你將：

* 跟著助教將 [手刻簡易 POS 機 (Sample Code)](https://codepen.io/alpha-camp/pen/ZEWBJjL)，實際傳接 API 資料與介面，打造能將商品加入購物車的 POS 機！
* 與同學一起挑戰優化 POS 機使用體驗，挑戰能送出訂單與重置原始設定的功能！

<div style="width:100%"><img style="max-width:500px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10535/2020-02-28_at_8.56_AM.gif"></div>
<br>
#### 工作坊行前準備

為了確保你學習成效，我們建議你在參與工作坊前先完成：

* 第 1 級準備：事先閱讀並了解：
* POS 機的 [Sample Code](https://codepen.io/alpha-camp/pen/ZEWBJjL)，掌握程式碼的結構
* JavaScript 的內建函式(內建方法)： `.map()`、 `.forEach()`、`.find()`、 `.join()`
* 你可能會用到這幾份文件：
* Bootstrap
* [Card](https://getbootstrap.com/docs/4.2/components/card/)
* [Grid](https://getbootstrap.com/docs/4.2/layout/grid/)
* [list-group](https://getbootstrap.com/docs/4.2/components/list-group/)
* MDN
* [Array.prototype.map()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
* [Array.prototype.forEach()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
* [Array.prototype.find()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
* [Array.prototype.join()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
* [Functions](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions)
* [箭頭函式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
* 第 2 級準備：完成作業 [A: Adele 的歌詞本](https://lighthouse.alphacamp.co/courses/99/assignments/2990)
* 第 3 級準備：完成作業 [A:【選修】POS 機 1.0](https://lighthouse.alphacamp.co/courses/99/assignments/2992)

為確保你的最大學習效果，請你以第 2 級準備為目標，不過最少要完成第 1 級準備。

##### 來不及準備怎麼辦？

倘若你在工作坊開始前無法完成建議內容，<u>你還是可以參與工作坊</u>，我們也相當鼓勵你上線參與，因為這將可以協助你在前端開發的成長。

強烈建議你，至少先通過[A:【選修】POS 機 1.0](https://lighthouse.alphacamp.co/courses/99/assignments/2992) model answer 操作體驗完整的 POS 機 1.0 是如何執行的，會幫助你了解整個工作坊的核心目標。

同時，在工作坊中千萬不要吝嗇於提問，甚至在動手練習的環節中，可以大方地與助教、同學分享練習成品！

<div style="padding:10px;"></div>

#### 行前準備 - 設定視訊工具 Zoom
在未來所有的學習活動中，AC 團隊、助教會在線上透過 Zoom 這個工具來與同學們互動、練習。
因此請在工作坊前，參考下方投影片，確保你已經「完成註冊與安裝」並「了解 Zoom 的基本使用」，讓你在活動中能夠順暢的跟上助教的腳步。

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vRQ2ir_UbkgAaPHwund4EQgzuFNrvNW13PhqdlsR_8ndJvIojPRQPTY_8a7X9KBih3OkiKIU0z_7CQL/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

<div style="padding:10px;"></div>

期待在工作坊看見你的身影！

#### 更多工作坊

同學若想查詢更多工作坊活動，可以到 [學習活動日程](https://lighthouse.alphacamp.co/courses/99/units/20573) 單元確認喔！

<div class="further-reading" style="background: #ececec;">
<div class="further-reading-inner-wrapper">
<h5>無法參與工作坊怎麼辦？</h5>
<p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p>
<p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p>
</div>
</div>

---

### 03/22 打造 POS 機工作坊 - 行前提醒

<div style="width:50%; margin: 0px auto">

</div>

本週我們將學習如何串接 API，以及再次熟練 DOM 操作。接下來，我們也將融會貫通過去所學，開始練習打造自己的專案！

為了幫助同學從點對點的工具學習，進入下一階段的應用學習，除了課程中的專案實作以外，本學期也將透過購物車 POS 機的案例幫助同學熟練工具、練習如何打造產品思維！

**來自學長姐的經驗談**：強烈建議同學們至少要閱讀過 作業 [A:【選修】POS 機 1.0](https://lighthouse.alphacamp.co/courses/99/assignments/2992) 的題目需求，並且通過 model answer 體驗過完整的 POS 機 1.0 是如何執行的，會對你的在工作坊的理解有很大的幫助喔！

現在就去看看這次工作坊的內容，完成行前準備 ➡️ [報名 Week 2 打造 POS 機工作坊](https://lighthouse.alphacamp.co/courses/99/units/28537)

<div style="width:100%"><img style="max-width:500px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10535/2020-02-28_at_8.56_AM.gif"></div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---
## Webinar Update
### 【今晚 7:30 工作坊提醒】學期 2-2：打造 POS 機工作坊

學期 2-2，我們開始進入 API + DOM ，是否覺得世界都不一樣了呢？

今天晚上 7:30 打造 POS 機工作坊，助教講師將會透過實作，帶你拆解設計事件流程的背後關鍵，一起打造 POS 機

**來自學長姐的經驗談**：強烈建議同學們至少要閱讀過 作業 [A:【選修】POS 機 1.0](https://lighthouse.alphacamp.co/courses/99/assignments/2992) 的題目需求，並且通過 model answer 體驗過完整的 POS 機 1.0 是如何執行的，會對你的在工作坊的理解有很大的幫助喔！

有餘裕的同學記得做好行前準備（這次一樣分了三級準備），幫助自己更好吸收哦！我們晚上見！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
• 活動時間：03/22 (三) 19:30 - 21:00<br>
• 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/99/units/28537" target="_blank"> 打造 POS 機工作坊活動頁面</a>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---

## before webinar start
##### 投影片

<!-- <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="https://docs.google.com/presentation/d/e/2PACX-1vTFtcqvl64amDH_CkR3HxbVxCF9uHGBq2apWeVxQh0lzIzqAJKZdyL470WYB2gPzzE1GPbDdv4FgJQk/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div> -->

---
## After Webinar
### Week 2 打造 POS 機工作坊 會後精華

<span style="color:#E52F28; font-size: 0.9rem;">會後精華為提供無法上線同學會後學習，請同學還是務必以即時參與工作坊為主，結束後再看此單元作為複習唷！</span>

本次舉辦的打造 POS 機工作坊，目的是為了協助你熟悉如何運用 JavaScipt 結合 DOM 與 API 資料，讓網頁實際像個小產品！

在這次的工作坊中，助教不僅帶領同學們練習，與同學們分享開發時的小技巧，更詳細的解說在不同語法的使用觀念，協助同學們在踏入 JavaScript 與前端領域奠定更好的基礎。例如：

* **用資料驅動畫面**：現代網頁呈現時常會因應使用者體驗進行優化、調整，然而商業邏輯是一樣的，因此將商業邏輯與 DOM 拆開，改用「資料來驅動」就變得相當關鍵。
* **不知道時就印出來**：在現階段的練習會同時打造畫面與程式碼，當遇到不確定程式碼是否運作同時畫面無法確定時，善用 Console 把資料印出來，確定自己的程式碼設定是否正確。

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/810767373?h=41f926fc77&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allowfullscreen>
</iframe>
</div>

#### 課後挑戰題，等你來完成！

在本次的工作坊中，助教帶我們完成了加入購物車，與計算總價的功能。

接下來就換你挑戰了！請接續完成：

- 完成購物車功能：請接續助教的專案，接著完成「送出訂單」的功能。
- 優化用者體驗
- 讓使用者點擊圖片或卡片任何地方加入購物車
- 使用者可從購物車清單內增減品項

#### 沒有參與到工作坊的同學，你可以⋯⋯

* 在「助教操作練習 We do」的環節跟著助教的指示一起練習挑戰題
* 在完成挑戰題後，將你的作品分享在下方討論區。或著在練習的過程中，有相關疑問也可以在下方討論區中提問

#### 工作坊參考資料

##### 投影片

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="https://docs.google.com/presentation/d/e/2PACX-1vQ6-9ETuhklDVH56WG1IxEys6OxfhN08NFkSW8HnW0PS1t9iBS3fyn7h2Cf7126QRuhmk0bLWnRJv8r/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

##### Sample Code (開始練習前記得 Fork)

* [初始程式碼](https://codepen.io/alpha-camp/pen/ZEWBJjL)
* [完整程式碼](https://codepen.io/smallword/pen/KKwrWLK?editors=1010)

##### API 連結
* [POS 機 API](https://ac-w3-dom-pos.firebaseio.com/products.json)

---

### Week 2 打造 POS 機工作坊 - Highlights

Week 2 舉辦的打造 POS 機工作坊，目的是為了協助你熟悉如何運用 JavaScipt 結合 DOM 與 API 資料，讓網頁實際像個小產品！

在這次的工作坊中，助教除了帶領同學們實作 POS 機介面，與同學們分享開發時的小技巧，更詳細的解說在不同語法的使用觀念，讓同學們讚嘆學到了很棒的新方法。

<div style="width:100%"><img style="max-width:1000px; width:100%;" img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22655/_____2023-03-22___9_11_02_AdobeExpress.gif">

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
小字助教很細心將一些junior常踩的雷標出來，還介紹了一種很潮的簡化object的寫法，覺得又多了一個知識!
</div>
<div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
<img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/1495/medium_GOPR0464.JPG">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">SZUPEI</p>
</div>
</div>

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
在這次工作坊學習到很多新的方法像是find()，map(), 或是join()，非常謝謝助教的指導！
</div>
<div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
<img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/11129/medium_S__7274499.jpg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Ailsa Yang</p>
</div>
</div>

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
助教講得很清楚，對於寫code的方式有更新的理解！
</div>
<div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
<img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://lighthouse-cdn.alphacamp.co/default/medium_user_photo.jpg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">瑞晨</p>
</div>
</div>

現在就去看看拆解思考過程的會後錄影吧 ➡️ [
Week 2 打造 POS 機工作坊 - 2023/03 月班會後精華](https://lighthouse.alphacamp.co/courses/99/units/28538)

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>