---
# System prepended metadata

title: 工具地圖 & 生存指南工作坊
tags: [webinar, 學期 2-3]

---

###### 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)
<!-- https://lighthouse.alphacamp.co/courses/101/units/20965 -->
* **第 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) 單元確認喔！
<!-- https://lighthouse.alphacamp.co/courses/100/units/20749 -->

<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)
<!-- https://lighthouse.alphacamp.co/courses/101/units/20965 -->
* **第 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>
<!-- https://lighthouse.alphacamp.co/courses/101/units/28415 -->

<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&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;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)
<!-- https://lighthouse.alphacamp.co/courses/101/units/28534 -->

<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


<!--    <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
    <p style="margin-block-start: 0em;">
      • 日期與時間：8/17 (一) 19:30 - 21:00 <br>
      • 登記參加連結：<a href="https://zoom.us/j/85403710004" target="_blank">https://zoom.us/j/85403710004</a>
    </p>
    <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/r/eventedit/copy/M2ljZjhzY3Vqc2drbm8yOGpxbGdwYWxhcmwgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw">將行程添加到 Google 日曆</a>
</div>  -->

#### 行前準備

- 完成開發環境設定
    - 編輯器：[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>
