工具地圖 & 生存指南工作坊

###### tags: `學期 2-3` `webinar` [toc] # 工具地圖 & 生存指南工作坊 ## Before Webinar ### 報名 Week 2 工具地圖 & 生存指南工作坊！ #### 工具地圖 & 生存指南工作坊  <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; max-width:500px; width:fit-content;"> • 活動時間：04/25 (二) 19:30 - 21:00 <br> • 與會連結：<a href="https://zoom.us/j/84744887828" target="_blank">https://zoom.us/j/84744887828</a><br> • 會議密碼：921142<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=NXNsMmdnZ3MzdjBycWlkcmRzZjlnaWhlY3AgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div> <div style="padding:8px;"></div> 接下來，我們會從單純的「學習語法」轉換為用框架開發，以「打造產品」為主軸的學習體驗。過程中將會學習大量的工具、框架，在本次工作坊中，學習教練與助教會分享常見的卡關問題、業界如何使用工具與框架，幫助同學們在全端開發的冒險叢林中，找到生存方法！想要了解每個工具、框架在網路應用程式中扮演什麼位置？那你絕對不能錯過這場工作坊！ #### 工作坊行前準備為了確保你的學習成效，我們強烈建議你在工作坊前，完成以下行前準備： * <span style="background-color: #CE2D0F; color: #fff ; font-size: 0.9rem; padding: 0 5px; border-radius: 3px; font-weight: bold;">務必完成</span> **第 1 級準備**：[必備工具安裝](https://lighthouse.alphacamp.co/courses/100/units/20760)  * **第 2 級準備**：依照教案引導，自行操作過 S1 架設 Node.js 伺服器若在工作坊開始前你無法完成建議內容，<u>仍然可以參與工作坊</u>，因為我們相信藉此可以協助你在未來的四周有個動力滿滿的開始！ #### 行前準備 - 設定視訊工具 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> 期待在工作坊看見你的身影！ #### 更多工作坊同學若想查詢更多工作坊活動，可以到 [學習活動日程](https://lighthouse.alphacamp.co/courses/101/units/20963) 單元確認喔！  <div class="further-reading" style="background: #ececec;"> <div class="further-reading-inner-wrapper"> <h5>無法參與見面會怎麼辦？</h5> <p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能參與每次活動。因此學習活動結束後隔天，我們會將當天的錄影與所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p> <p>但如果時間允許，我們相當推薦同學盡量參與學習活動，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p> </div> </div> --- ### 04/25 工具地圖 & 生存指南工作坊 - 行前提醒 <div style="width:50%; margin: 0px auto"> </div> 本週我們會從單純的「學習語法」轉換為用框架開發，以「打造產品」為主軸的學習體驗。過程中將會學習大量的工具、框架，在本次工作坊中，學習教練與助教會分享常見的卡關問題、業界如何使用工具與框架，幫助同學們在全端開發的冒險叢林中，找到生存方法！想要了解每個工具、框架在網路應用程式中扮演什麼位置？那你絕對不能錯過這場工作坊！為了確保你的學習成效，我們強烈建議你在工作坊前，完成以下行前準備： * <span style="background-color: #CE2D0F; color: #fff ; font-size: 0.9rem; padding: 0 5px; border-radius: 3px; font-weight: bold;">務必完成</span> **第 1 級準備**：[必備工具安裝](https://lighthouse.alphacamp.co/courses/100/units/20760)  * **第 2 級準備**：依照教案引導，自行操作過 S1 架設 Node.js 伺服器現在就去看看這次工作坊的內容，完成行前準備 ➡️ [報名工具地圖＆生存指南工作坊](https://lighthouse.alphacamp.co/courses/100/units/28543) <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-3：工具地圖 & 生存指南工作坊學期 2-3 開始，我們學習大量的工具、框架，在本次工作坊中，學習教練與助教會分享常見的卡關問題、業界如何使用工具與框架，幫助同學們在全端開發的冒險叢林中，找到生存方法！ #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：04/25 (二) 19:30 - 21:00<br> • 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/100/units/28543" target="_blank"> 工具地圖 & 生存指南工作坊活動頁面</a> </div>  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## After Webinar ### Week 2 工具地圖 & 生存指南工作坊 -- 2023/04 月班會後精華 <span style="color:#E52F28; font-size: 0.9rem;">會後精華為提供無法上線同學會後學習，請同學還是務必以即時參與工作坊為主，結束後再看此單元作為複習唷！</span> 很高興能夠在本次的工具地圖 & 生存指南工作坊，跟大家見面！學習教練與大家分享同學們的常見的卡關問題與生存方法，協助同學設定學習目標：從現在開始，我們不再是「寫程式」、「學語言」，而是要開始「模擬工程師」，學習如何「做出產品」。助教則分享了許多自己過往的學習經歷、業界視角，並將「開發專案」類比為「開設餐廳」，運用生活化的例子，幫助同學了解全端網路應用程式的工具，分別對應解決的問題。 <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/799015504?h=314569e919&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen></iframe></div> #### 工作坊投影片 <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-1vR9yhUsSs-AnWqRVM9d7sDV9KqeJi50OLE65zniiVDZkOxPaJ291HayeR55wfxsAhNOo8unxpfPGopv/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe> </div> <div style="padding:10px;"></div> --- ### 工作坊提醒 --- ### 04/25 Week 2 工具地圖 & 生存指南工作坊 - Highlights 很開心與同學們在 04/25 跟大家見面，一同開啟新的學習旅程。工作坊中，學習教練和助教分別針對本學期的學習方法以及工具進行介紹。 <img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22705/04_25_Week_2________________.png"> <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;"> 感謝各位助教的分享！給遇到學習困境的自己很多動力ＸＤ</div> <div style="width: 18%; display:flex; align-items: center; padding: 3% 0;"> <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/11370/medium_IMG_6180.JPG"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Aiden</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;"> 今天最大的收穫是可以全面了解前後端的協作！ </div> <div style="width: 18%; display:flex; align-items: center; padding: 3% 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> 經過工作坊的說明後，同學們也都做好更完善的準備，即將開始學習了！還沒建立好學習期待的同學們，趕快進來看看吧！➡️ [Week 2 工具地圖 & 生存指南工作坊 -- 2023/04 月班會後精華](https://lighthouse.alphacamp.co/courses/100/units/28544)  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## backlog  #### 行前準備 - 完成開發環境設定 - 編輯器：[VScode](https://lighthouse.alphacamp.co/courses/42/units/6049) - 終端機：[XCode (Mac 使用者)](https://lighthouse.alphacamp.co/courses/42/units/6051)、[Cmder (Windows 使用者)](https://lighthouse.alphacamp.co/courses/42/units/6052) (先裝完上面，再接下來裝這三個) - [安裝 Node.js](https://lighthouse.alphacamp.co/courses/42/units/6060) - [安裝 Git](https://lighthouse.alphacamp.co/courses/42/units/6804) - [安裝 npm & express](https://lighthouse.alphacamp.co/courses/42/units/6066) 成功安裝後，就完成開學前的前置作業囉！如果同學們在環境設定過程中，遇到卡關、嘗試除錯，卻無法排除的狀況，可以透過 [Slido](https://app.sli.do/event/k3blobwk) 在會前提問，幫助助教事前了解同學是在哪些段落遇到狀況，更好的運用工作坊時間協助同學完成環境設定。 <div style="background-color:#a2a2a220; border-radius: 5px; padding: 10px 15px; margin-bottom: 10px;"> <h5>提問小訣竅</h5> <ul> <li>嘗試完整描述你的操作步驟，這樣助教才知道整體錯誤的可能成因！</li> <li>附上你遇到的錯誤訊息，這樣助教才知道系統對於錯誤判斷！</li> <li>盡可能不要在 Slido 匿名提問，這樣工作坊的時候如果助教需要進一步釐清錯誤狀況，才不會不知道 cue 誰哦！</li> </ul> </div> <iframe src="https://app.sli.do/event/k3blobwk" height="100%" width="100%" style="min-height: 560px;"></iframe>