---
# System prepended metadata

title: 微型專案設計與思考工作坊
tags: [學期 2-2, Wk3-4]

---

###### tags: `學期 2-2` `Wk3-4`
[TOC]

# 微型專案設計與思考工作坊

## Before Webinar
### 報名 Week 4 微型專案設計與思考工作坊！
<!-- 本班次並未舉辦線上工具地圖 & 生存指南工作坊，因內容並不影響進度學習，同學有興趣可以先看會後精華，或是空下下次工作坊時間再上線學習即可喔！ -->

#### Week 4 微型專案設計與思考工作坊資訊

本班次並未舉辦線上事件與流程設計工作坊，因內容並不影響進度學習，同學有興趣可以先看會後精華，或是空下下次工作坊時間再上線學習即可喔！
      
</div>

<!-- ##### 投影片

<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-1vRx84AcoZm3QfvrDEvzuAvsDcG6T16QYdPlg_qHsMG05JuOKtAaRXRCEQd7zclhqMMDfBL_5SSKtklo/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div> -->


這次的工作坊，我們將跟著助教來設計童年經典 ——「井字遊戲」，你將跟著助教的腳步，分析「井字有戲」裡的資料與邏輯，討論遊戲狀態，了解作為設計者，面對專案應如何思考。

#### 工作坊 Agenda
* 定義問題：拆解「井字遊戲」任務結構
* 定義癥結點：最關鍵的核心邏輯
* 尋找解法：如何突破癥結點
* 提出解法的最大概念
* Q & A

#### 工作坊行前準備

請以完成第二級準備為目標，如果時間不足的話，至少要完成第一級準備，幫助你更清楚工作坊中解說的思考架構喔！

**【第一級準備】**
- 了解井字遊戲的規則，並完成下方思考練習
<typeform>WN0BSU9o</typeform>

**【第二級準備】**
- 閱讀初始程式碼及完整程式碼，並註記看不懂的地方，在工作坊中進行提問
    - [初始程式碼](https://codepen.io/alpha-camp/pen/VwePbeW?editors=0010)
    - [完整程式碼](https://codepen.io/KuanLin/project/editor/DawxqE) ＊請閱讀 files: *tictactoe_full.js*
<br>

<!-- 並試著繪製出遊戲的流程圖：

- 在一個 3 x 3 棋盤上
- 兩個玩家分別代表 X 或 O
- 兩個玩家輪流下棋
- 下棋就是選一個格子，畫上 X 或 O
- 贏的條件是把 X 或 O 連成一線 (直線、橫線、斜線皆可)
- 一旦有人贏，遊戲就結束
- 除非有人贏，否則一直玩到棋盤滿了為止 -->


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

本次工作坊需有的先備技術知識：

- 能夠運用 JavaScript 設計函示並操作 DOM，在使用者觸發特定行為時，運用 DOM API 改變網頁 UI 的狀態

除上述外，本次並無其他的技術要求。不過如果同學在工作坊前，已經跟著 S2 電影清單或是 S3 翻牌遊戲完成過任一專案，你將會對工作坊中討論的內容感到更容易上手。

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

#### 更多工作坊

同學若想查詢更多工作坊活動，可以到 [學習活動日程](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/01 微型專案設計與思考工作坊 - 行前提醒

<div style="width:100%">
<img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/12928/Screenshot_2020-06-12___11.22.25.png">
</div>

在下週，我們將更進一步，開始學習不同的流程控制思維，並且透過教案體會「演算法的設計」。

為了幫助同學更好的吸收，了解拆解複雜專案時，如何聚焦、找到關鍵議題，我們設計了「微型專案設計與思考」工作坊，跟著助教的腳步，一起離開流程設計的新手村吧！

🟡 這場工作坊的事前準備包含了「思考練習」與「程式碼閱讀」，通過預習讓自己在活動中更快吸收。

🟡 工作坊中將會有許多實作、互動討論及助教回饋的環節，請同學們盡可能參與直播，收穫會更多！


現在就去看看這次工作坊的內容吧 ➡️ [報名 Week 4 微型專案設計與思考工作坊](https://lighthouse.alphacamp.co/courses/99/units/28539)

<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：微型專案設計與思考工作坊
本週同學們第一次接觸 MVC，跟著教案逐步打造出翻牌遊戲，第一次接觸到遊戲程式要開始拆解，是否有點霧煞煞呢？

別擔心！今天晚上 7:30 微型專案設計與思考工作坊，助教講師將會帶我們思考，面對一個微型專案，該如何拆解思考脈絡，轉換成程式碼結構呢？

🟡 這場工作坊的事前準備包含了「思考練習」與「程式碼閱讀」，通過預習讓自己在活動中更快吸收。

🟡 工作坊中將會有許多實作、互動討論及助教回饋的環節，請同學們盡可能參與直播，收穫會更多！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
  • 活動時間：03/01 (三) 19:30 - 21:00<br>
  • 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/99/units/28539" target="_blank">微型專案設計與思考工作坊 活動頁面</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-1vRx84AcoZm3QfvrDEvzuAvsDcG6T16QYdPlg_qHsMG05JuOKtAaRXRCEQd7zclhqMMDfBL_5SSKtklo/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div> -->

---

## After Webinar
### 微型專案設計與思考工作坊 會後精華

本次舉辦的微型專案設計與思考工作坊，目的是為了協助你在思考專案建立時，能夠運用不同的面向去拆解程式的流程。

在這次的工作坊中，講師帶大家從遊戲規則的描述，一步一步討論，從發散到聚焦在單一階段「要處理的什麼事情」，進一步歸納出資料和邏輯，走過專案拆解的過程與設計專案的關鍵。

- 如何設計棋盤與格子的資料結構
- 如何讓使用者下棋
- 如何判斷贏家
- 如何思考最佳解

<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/762105330?h=e0da6932bd&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"   frameborder="0" allowfullscreen>
    </iframe>
</div>


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

基礎挑戰：
- 使用[完整程式碼](https://codepen.io/KuanLin/project/editor/DawxqE)，挑戰自行完成讓電腦判斷最佳解的演算法
    -  B: 佔據最好位置（e.g.中間)
    -  C: 隨機選一格

進階挑戰：
- 使用[實作練習 fork 用程式碼](https://codepen.io/KuanLin/pen/LYdGNRE) 自己完整打造一個井字遊戲

完成後記得將程式碼分享在這個單元（工作坊精華）下方留言區中！

#### 工作坊參考資料

##### 投影片

<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-1vS3J4PcDD79IdGNA0NlwY6T2QgkRz-5mm051PfeUpPceL0cpDbRTmKGjmaaYqF4-R4svsa4e-3Q0Ras/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/VwePbeW?editors=0010)
- [實作練習 fork 用程式碼](https://codepen.io/KuanLin/pen/LYdGNRE)
- [完整完成版](https://codepen.io/KuanLin/project/editor/DawxqE)

<!-- ##### 補充資料

- [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript#functions) -->
---

### 03/01 Week 4 微型專案設計與思考工作坊 - Highlights

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

3 月 1 日舉辦的微型專案設計與思考工作坊，目的是為了協助你在思考專案建立時，能夠運用不同的面向去拆解程式的流程。

本次的工作坊中，講師帶大家從遊戲規則的描述，歸納出資料和邏輯，走過專案拆解的過程與設計專案的關鍵，讓同學們都回饋內容非常有幫助！

<div style="width:100%;margin:5px;"><img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22477/1124.jpg"></div>


<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px;  font-size: 0.875rem; margin-bottom: 5px;px">
    <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
     今天的工作坊加入了更多的思考，可以協助練習拆解任務。今天的助教們都超棒的!!!仔細地回答了大家的問題~
    </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/10586/medium_220165.jpg">
    <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Sally</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;">     
助教分享的很多心得(ex: 正確性/可讀性/彈性)等  蠻有啟發性~ 謝謝助教
    </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/10935/medium______.jpg">
    <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Eric</p>
    </div>
</div>


現在就去看看拆解流程設計的會後錄影吧 ➡️ [微型專案設計與思考工作坊 會後精華](https://lighthouse.alphacamp.co/courses/99/units/28540)

<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>