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

###### tags: `學期 2-2` `Wk3-4` [TOC] # 微型專案設計與思考工作坊 ## Before Webinar ### 報名 Week 4 微型專案設計與思考工作坊！  #### Week 4 微型專案設計與思考工作坊資訊本班次並未舉辦線上事件與流程設計工作坊，因內容並不影響進度學習，同學有興趣可以先看會後精華，或是空下下次工作坊時間再上線學習即可喔！ </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>  ##### 來不及準備怎麼辦？本次工作坊需有的先備技術知識： - 能夠運用 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  --- ## 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&badge=0&autopause=0&player_id=0&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)  --- ### 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>