###### tags: `學期 2-2` `Weekly Goal`
[TOC]

# F2-2 weekly goal

## 學期 2-2：Week 1 學習目標

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22500/F-2_Weekly_Schedule_12.001.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22500/F-2_Weekly_Schedule_12.001.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

#### 本週學習重點

本週範圍是 S1 串接第三方 API，你將學習如何透過 JavaScript 發送 HTTP 請求，搜集其他網站的 API 資訊，開始打造一個有真實資料的網頁。

你的目標是 <u>能夠理解能夠理解 API 說明文件，並運用 axios 取得資料，呈現在網頁內容中</u>。具體能在指標作業 <a href="https://lighthouse.alphacamp.co/courses/99/assignments/2990" target="_blank">A3: Adele 的歌詞本</a> 中體現，請你以完成此作業為目標進行學習。

#### 學習教練對你的期許與動態目標調整

本週的表定安排的進度份量較輕 (僅 6 個 unit、5 份作業)，目的是希望同學能運用本週動態調整你的學習進度與目標，更有效地跟著課程學習。

1. `已經熟練 DOM 操作` 的同學，如果你在本週週間就完成 API 與「DOM 再度熱身」的單元內容，我們期待你務必要「[申請提前進度](https://lighthouse.alphacamp.co/courses/38/units/7521)」，提前開始學習下週的電影專案內容，透過專案實作延續這兩週的所學，維持手感並且充分運用你的學習時間，提升學習效率。

2. `覺得 DOM 操作不太熟練` 的同學，請務必多練習本週的 API 與 「DOM 再度熱身」作業，讓自己透過實作更加熟練 DOM 事件的練習，銜接未來的專案實作。

同學們可以斟酌自己的學習狀況進行調整！

#### 將工作坊時間留下來，互動參與、學習更多商業邏輯應用

學期 2-2 的工作坊將會探討更多如何以業界角度設計程式、優化程式碼品質，也著重學生在工作坊當中的互動與討論，因此建議同學們可以將工作坊時間留下來一起線上參與以獲得更好的學習體驗。如果真的有事無法參與，也記得事後觀看會後精華呦！

- [打造 POS 機工作坊](https://lighthouse.alphacamp.co/courses/99/units/28537)：03/22 (三)19:30-21:00
<!-- - [微型專案設計與思考工作坊](https://lighthouse.alphacamp.co/courses/99/units/28539)：03/01（三）19:30-21:00 -->
- [事件與流程設計工作坊](https://lighthouse.alphacamp.co/courses/99/units/28550)：03/29（三）19:30-21:00

#### 🔗 加入 LINE Group 和同學一起討論

<div style="width: 100%; text-align:center;">
<img style="width: 50%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22641/2-2.png"><br>
<span style="font-size:0.95rem; color:#9B9B9B;">請用手機掃描上方 QR code 加入 Line 群組。<br>若無法掃描，可嘗試「用手機」點擊此連結：<a href="https://line.me/ti/g/VUKTrvyCQg" target="_blank">https://line.me/ti/g/VUKTrvyCQg</a></span>
</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>

<style>
#line-info-box{
width: 100%;
display: flex;
justify-content: space-around;
font-size: 0.9rem;
}

#line-qr{
width:30%;
}

#line-qr img{
width:90%;
}

#line-qr span{
width:100%;
font-size:0.95rem;
color:#9B9B9B;
overflow: hidden;
text-overflow: ellipsis;
}

#cta-in-line{
width: 65%;
}

@media screen and (max-width: 400px){

#line-info-box{
width: 100%;
display: flex;
flex-direction: column;
}

#line-qr{
width:100%;
text-align: center;
}

#line-qr img{
width:30%;
}

#cta-in-line{
width: 100%;
}
}

</style>

---
<!--## 學期 2-2：Week 2 學習目標 -- 尚未繳交 A4 or Try harder

<div id="alert-warning">
Hi {{user_nickname}}，
<p>
注意到你目前尚未完成 <a href="https://lighthouse.alphacamp.co/courses/99/assignments/2991" target="_blank">DOM 再次熱身</a> 的作業，請務必讓自己透過實作更加熟練 DOM 事件的練習，以銜接未來的專案實作，所以請：
</p>
<ul>
<li><code style="font-size: 0.9rem;">繳交 A4 作業</code>：完成 A4 作業後，記得申請 <a href="https://lighthouse.alphacamp.co/courses/38/units/7520" target="_blank">遲交作業批改</a>，獲得助教回饋</li>
<li><code style="font-size: 0.9rem;">放心提問</code>：課程單元中的 Q&A 沒有進度限制，可以放心向助教提問；如果面對助教有點害羞，你也可以透過 <a href="https://lighthouse.alphacamp.co/courses/99/units/20574" target="_blank">Slack 共學社群</a>，向同學、學長姐們請教</li>
<li><code style="font-size: 0.9rem;">運用工作坊即時互動</code>：鼓勵你 <a href="https://lighthouse.alphacamp.co/courses/99/units/26393" target="_blank">參加本週三的打造 POS 機工作坊！</a> 跟著助教引導，熟悉如何串接 API 與 DOM 操作，幫助自己學習。</li>
</ul>
</div>

---
-->

## 學期 2-2：Week 2 學習目標

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22527/F-2_Weekly_Schedule_12.002.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22527/F-2_Weekly_Schedule_12.002.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>
<div style="width:100%; text-align: center;">
<span style="font-size:1.2rem; color:#9B9B9B;">請預留工作坊時間線上參與：<a href="https://lighthouse.alphacamp.co/courses/99/units/20573"target = "_blank">學習活動日程</a>
</span>
</div>

工作坊時間提醒（請務必預留時間上線參加）
- 【本週】 [打造 POS 機工作坊](https://lighthouse.alphacamp.co/courses/99/units/28537)：03/22 (三)19:30-21:00
- [事件與流程設計工作坊](https://lighthouse.alphacamp.co/courses/99/units/28550)：03/29（三）19:30-21:00

#### 本週學習重點

本週範圍是 S2 電影清單：前端體驗綜合實作，有別於過去著重在練習 JavaScript 基礎技術，現在開始我們要為了打造產品而寫程式，實作份量與難度將大幅提升。

在開始學習前，請務必詳細閱讀 [章節學習建議](https://lighthouse.alphacamp.co/courses/99/units/20633)。

在電影清單教案中，你將會一步一步跟著教案實作，串接資料，並實作網站常見的功能：搜尋框、收藏、分頁，<u>這些一步步拆解的過程，是你在 Web App 開發路上開拓視野的必經之路</u>。

你的目標是<u>在這個章節的實作過程中，熟悉物件及函式的應用，並且能夠理解現有程式流程，加以修改，完成使用者指定的需求</u>。完成這個章節後，你將更加理解何謂「運用邏輯思維拆解網頁功能」、「設計功能背後的流程」。

本週的學習內容將會是下週專案實作的基礎，請同學務必在週間就開始學習，盡可能地運用時間推展進度，並且適時地幫自己設定停損點求助，為這兩週的學習旅程打好基底。

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;">
</div>
<div id="#coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0;">
學習教練提醒
</h5>
<p class="coach-p-start">這裡是學習教練 Dan。上週在學習操作 API 的過程中，不少同學在 ORID 中回饋同學感受到它的樂趣和強大！ </p>
<p class="coach-p-start">本週開始，我們將接觸不同類型的專案，將過去所學的 JavaScript 基礎融會貫通，由於解決問題的範圍將變大、工具使用種類變多，因此你可能會覺得難度提升、不太熟練，但<u>請不要卻步，遇到問題，請多多提問，讓助教幫助你</u>！
</p>
<p class="coach-p-start">更多關於「面對大量挑戰與難題，應該如何求助」學習教練在有效學習暖身操中，撰寫了 <a href="https://lighthouse.alphacamp.co/courses/38/units/6838" target="_blank">有效提問</a> 單元，提供同學們參考。
</p>
</div>
</div>

#### 本週活動 -- Week 2 打造 POS 機工作坊

除了能夠運用 DOM 操作，讓網頁與使用者互動，我們將加入前端的重要技術「串接第三方 API」，運用 DOM & API，打造出生活中常見的 POS 點餐機！

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：03/22 (三)19:30-21:00 <br>
行前準備請看：<a href="https://lighthouse.alphacamp.co/courses/99/units/28537" target="_blank">報名 Week 2 打造 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>

---

## 學期 2-2：Week 3 學習目標 -- 未 mastery（不需，已經整合至同一份）

<div id="alert-warning">

Hi {{user_nickname}}，
<p>注意到你尚在學習 S2 電影清單，進度有些落後。但千萬不要太過焦慮！在現階段跟著教案實作一次是重要的基本功，當你完成 S2 教案和作業後，才能夠往下進到 S3 的自主實作。</p>
<p>因此建議 {{user_nickname}} 將本週學習焦點放在：<br>
1. 優先完成 Week 2 進度：S2 電影清單的實作與作業 <br>
2. 目標在週日前完成 <a href="https://lighthouse.alphacamp.co/courses/99/assignments/2998" target="_blank">A13: 你的社群名單：手刻功能</a> <br>（<a href="https://lighthouse.alphacamp.co/courses/99/assignments/2999" target="_blank">
A14: 電影清單加碼功能</a>為技術驗收作業，因此無繳交期限，可於 week4 再完成喔！）</p>
</div>

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22114/F2_Weekly_Schedule_003.001.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22114/F2_Weekly_Schedule_003.001.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

<div style="width:100%; text-align: center;">
<span style="font-size:1.2rem; color:#9B9B9B;">請預留工作坊時間線上參與：<a href="https://lighthouse.alphacamp.co/courses/99/units/20573"target = "_blank">學習活動日程</a>
</span>
</div>

#### 本週學習重點

本週的範圍是 S3 社群名單：自主實作，我們將透過幾份「專案型」的作業，來完整的走過 "I DO, WE DO, YOU DO" 的過程。

你的目標是：

<table>
<tr style="background: #a2a2a2; color: #fff; text-align: center">
<td colspan="2">第 1 階段：完成社群名單基本功能</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段內容</td>
<td style="font-size: 0.9rem;">在「讓專案動起來」這個階段，你需要將上週跟著電影清單教案所學的功能第一次內化。過程中你可能會需要時常回去對照教案內容、之前寫的筆記，幫助自己理清功能的拆解邏輯以及可能會需要的 JavaScript 語法工具。</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段目標</td>
<td style="font-size: 0.9rem;">把網頁的功能做出來！暫時還可以先不用思考太多關於「函式耦合」的部分，重點是要網頁要能夠先動！</td>
</tr>
</table>

<table style="margin-top: 10px;">
<tr style="background: #a2a2a2; color: #fff; text-align: center">
<td colspan="2">第 2 階段：程式碼優化</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段內容</td>
<td style="font-size: 0.9rem;">在「程式碼優化」這個階段，你將更進一步幫電影清單設計新的功能，並且嘗試運用之前所學的耦合、封裝概念，提升你的程式碼品質。
</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段目標</td>
<td style="font-size: 0.9rem;">讓自己從頭走過一個功能拆解的過程、以及函式設計的過程，將這兩週的所學的內功與外功整合起來！</td>
</tr>
</table>

#### 本週活動 -- Week 3 事件設計與流程工作坊資訊

許多同學在 ORID 中提到，發現自己 DOM 操作的技巧越用越上手，對於函式的設計也更有概念！但也發現專案開始擴大，總還是會有些時候抓不到解構的眉目。

別擔心！這禮拜我們將跟著助教，一起如何拆解網站常見的功能，了解如何設計出對應的事件與流程。

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：09/07（三）19:30 - 21:00<br>
行前準備請看：
➡️ <a href="https://lighthouse.alphacamp.co/courses/99/units/28384" target="_blank">報名 Week 3 事件與流程設計工作坊！</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>

---

## 學期 2-2：Week 3 學習目標

Hi {{user_nickname}}，

<div id="alert-warning">
<p>如果你已完成 S2 電影清單，請直接跳到「本週學習重點」段落。
</p>
<p>如果你尚在學習 S2 電影清單，進度有些落後，千萬不要太過焦慮！在現階段跟著教案實作一次是重要的基本功，當你完成 S2 教案和作業後，才能夠往下進到 S3 的自主實作。</p>
<p>建議還沒完成 S2 的你，將本週學習焦點放在：<br>
1. 優先完成 Week 2 進度：S2 電影清單的實作與作業 <br>
2. 目標在週日前完成 <a href="https://lighthouse.alphacamp.co/courses/99/assignments/2998" target="_blank">A13: 你的社群名單：手刻功能</a> <br>（<a href="https://lighthouse.alphacamp.co/courses/99/assignments/2999" target="_blank">
A14: 電影清單加碼功能</a>為技術驗收作業，因此無繳交期限，可於 week4 再完成喔！）</p><br>
❗️A9 作業延長批改期限❗️<br>
<p>教練特別幫還在努力追進度的大家爭取 Week 2 指標作業<a href="https://lighthouse.alphacamp.co/courses/99/assignments/2995" target="_blank"> （A9: 回顧 Search Bar 實作細節）</a> <span style="color: #e52f28;">「延長作業批改期限至本週三」03/29 23:59 前！</span></p>
<p>只要在週三前繳交 A9 作業，還是能夠獲得助教批改！不需額外申請遲交作業批改喔！希望大家把握機會、繼續將作業完成！
</p>
<p>若有其他作業遲交（標示為 Late），也要記得申請遲交作業批改，獲得助教回饋喔！<a href="https://lighthouse.alphacamp.co/courses/38/units/28572" target="_blank">（如何申請：參考有效學習暖身操）</a></p>

</div>

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22526/F-2_Weekly_Schedule_12.003.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22526/F-2_Weekly_Schedule_12.003.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

<div style="width:100%; text-align: center;">
<span style="font-size:1.2rem; color:#9B9B9B;">請預留工作坊時間線上參與：<a href="https://lighthouse.alphacamp.co/courses/99/units/20573"target = "_blank">學習活動日程</a>
</span>
</div>

#### 本週學習重點

本週的範圍是 S3 社群名單：自主實作，我們將透過幾份「專案型」的作業，來完整的走過 "I DO, WE DO, YOU DO" 的過程。

你的目標是：

<table>
<tr style="background: #a2a2a2; color: #fff; text-align: center">
<td colspan="2">第 1 階段：完成社群名單基本功能</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段內容</td>
<td style="font-size: 0.9rem;">在「讓專案動起來」這個階段，你需要將上週跟著電影清單教案所學的功能第一次內化。過程中你可能會需要時常回去對照教案內容、之前寫的筆記，幫助自己理清功能的拆解邏輯以及可能會需要的 JavaScript 語法工具。</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段目標</td>
<td style="font-size: 0.9rem;">把網頁的功能做出來！暫時還可以先不用思考太多關於「函式耦合」的部分，重點是要網頁要能夠先動！</td>
</tr>
</table>

<table style="margin-top: 10px;">
<tr style="background: #a2a2a2; color: #fff; text-align: center">
<td colspan="2">第 2 階段：程式碼優化</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段內容</td>
<td style="font-size: 0.9rem;">在「程式碼優化」這個階段，你將更進一步幫電影清單設計新的功能，並且嘗試運用之前所學的耦合、封裝概念，提升你的程式碼品質。
</td>
</tr>
<tr>
<td style="width: 60px; font-size: 0.9rem; text-align: center;">階段目標</td>
<td style="font-size: 0.9rem;">讓自己從頭走過一個功能拆解的過程、以及函式設計的過程，將這兩週的所學的內功與外功整合起來！</td>
</tr>
</table>

[A14: 電影清單加碼功能](https://lighthouse.alphacamp.co/courses/99/assignments/2999) 為技術驗收作業，因此無繳交期限。若同學想要調整學習節奏，避免花太多時間優化作業，可以先完成基本的作業規格即可；或是當卡關太久時，可以先往後學習轉換思維喔！

#### 本週活動 -- Week 3 事件設計與流程工作坊資訊

許多同學在 ORID 中提到，發現自己 DOM 操作的技巧越用越上手，對於函式的設計也更有概念！但也發現專案開始擴大，總還是會有些時候抓不到解構的眉目。

別擔心！這禮拜我們將跟著助教，一起如何拆解網站常見的功能，了解如何設計出對應的事件與流程。

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：3/29（三）19:30 - 21:00<br>
行前準備請看：
➡️ <a href="https://lighthouse.alphacamp.co/courses/99/units/28550" target="_blank">報名 Week 3 事件與流程設計工作坊！</a>
</div>

#### ALPHA Camp 社群焦點

<div style="display: flex; width: 100%; justify-content: center;">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22659/___________3_.png">
</div>

我們精選了一些 ALPHA Camp 社群上較熱門的討論議題，以及由社群大使們組織的活動 🙌

✨ [你認為轉職者在求職上有比較不利嗎？](https://discord.com/channels/925294714217967647/945251914868727858/1088046918103470170)

✨ [你覺工程師未來會被 AI 取代嗎？](https://discord.com/channels/925294714217967647/945251914868727858/1085394162154750004)

✨ [4/1 羽球團 @成功高中運動中心](https://discord.com/channels/925294714217967647/1075689573545431061/1087712429556891750)

✨ [4/3 北部線下聚會 @台北捷運沿線咖啡廳](https://discord.com/channels/925294714217967647/925294714217967650/1088006091490721853)

如果你也想參與議題的討論，或是和社群夥伴來場線上 or 線下交流，歡迎到 [Discord 社群](https://discord.gg/hUFn6YGFAN) 上了解更多詳細資訊！

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

---
## 學期 2-2：Week 4 學習目標

時光飛逝！不知不覺我們到了階段二的尾聲，本週的重點在「S4 翻牌遊戲」、「S5 管理程式碼：Git & GitHub」，以及「微型專案設計工作坊」！

🟡 以下的資訊有點長但是都很重要，請同學務必花一點時間仔細閱讀喔！

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22528/F-2_Weekly_Schedule_12.004.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22528/F-2_Weekly_Schedule_12.004.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

<div style="width:100%; text-align: center;">
<span style="font-size:1.2rem; color:#9B9B9B;">請預留工作坊時間線上參與：<a href="https://lighthouse.alphacamp.co/courses/99/units/20573"target = "_blank">學習活動日程</a>
</span>
</div>

<!-- ### 本週活動 -->
<!-- #### Week 4 事件設計與流程工作坊資訊

許多同學在 ORID 中提到，發現自己 DOM 操作的技巧越用越上手，對於函式的設計也更有概念！但也發現專案開始擴大，總還是會有些時候抓不到解構的眉目。

別擔心！這禮拜我們將跟著助教，一起如何拆解網站常見的功能，了解如何設計出對應的事件與流程。 -->

<!-- <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：12/28（三）19:30 - 21:00<br>
行前準備請看：
➡️ <a href="https://lighthouse.alphacamp.co/courses/99/units/28550" target="_blank">報名 Week 4 事件與流程設計工作坊！</a>
</div> -->

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

承接前兩週跟著課程所學的滿滿內功，這次工作坊，我們也將跟著助教的腳步，練習拆解「井字遊戲」，將大問題拆解成小問題，分而治之，瞄準小問題中特別困難的主題進行討論。

這場討論會以「演算法」為中心，我們會花時間在釐清問題，描述細節，找出突破點，並且定義最核心的實作解法，別忘記要參加哦！

<div style=" display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
<img style="min-width: 15%; max-width: 150px; margin-right: 10px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13740/2020-07-31_at_11.58_AM.gif">
<ul>
<li>工作坊時間：03/01 (三) 19:30 - 21:00</li>
<li>行前準備 ➡️ <a href="https://lighthouse.alphacamp.co/courses/99/units/28539" target="_blank"> 報名 Week 4 微型專案設計與思考工作坊</a></li>
</ul>
</div> -->

### 本週的學習重點

#### A. S3: A14 為學期 2-2 的技術驗收作業，記得達到 Meet Expectation 水準

提醒大家 [A14: 電影清單加碼功能](https://lighthouse.alphacamp.co/courses/99/assignments/2999) 是本學期的核心技術驗收作業，**務必要讓自己達到 `Meet Expectation`的水準!**
部分同學在第一次嘗試自行架構社群名單時，可能已經花了不少時間，來不及在 Week3 準時繳交 A14。不過不用擔心，A14 並無繳交期限，你可以加把勁繼續完成，無需申請遲交作業批改也會有助教批改！

#### B. S4 翻牌遊戲
- **優化程式碼品質** ：你將透過「翻牌遊戲」，更進一步的練習封裝程式碼，並初步接觸 MVC 架構，嘗試模組化程式碼
- **專案設計與思考** ：用「資料、介面，流程」三種不同的切入角度去設計程式碼，練習用關注點分離的技巧，一步一步拆解程式運作的流程，做出完整專案

你的目標是：你的目標完整跟著教案走過一遍，了解 MVC 模組化的結構，透過專案認識如何運用 MVC 設計的程式流程，完成 [A18: 上傳你的成果](https://lighthouse.alphacamp.co/courses/99/assignments/3004) 。

#### C. S5 管理程式碼：Git & GitHub
完成 S4 翻牌遊戲 後，恭喜你又離軟體開發更進一步！除了技術能力，身為一位軟體開發者，還有重要的能力是「團體協作」與「解決問題」

- **團體協作** ：你將開始使用 Git 建立版本紀錄的習慣，熟悉 Git 基本指令，並透過上傳 GitHub 雲端儲存庫，與他人分享你的專案。
- **解決問題的能力** ：環境安裝的過程中，可能因為裝置不同、軟體版本更新，導致你看到的**操作的細節與教案畫面不完全相同**。但我們相信現階段的同學只要發揮解決問題的能力、嘗試幾次後，有能力獨自面對 80% 的問題。如果遇到自行嘗試後，仍無法排除的錯誤，你能夠利用過往的經驗，**透過截圖、清楚的提問，讓助教有效釐清你的問題、提供協助**。

#### D. 有計劃進入學期 2-3 的同學，務必完成 S7 學期 2-3 選課引導

恭喜你來到學期 2-2 的最後一哩路！即將進入學期 2-3 的你，將會面臨選擇專修路徑的重要決定。

因此我們透過 S7 一整個章節，讓同學們從前、後端分工的技術發展史開始理解，並藉由專案情境的模擬，帶你一窺前、後端工程師的不同視角。請記得在學期 2-3 開課前完成選課呦！

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;"></div>
<div id="#coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0;"> 學習教練的話</h5>
<p>這裡是學習教練 Dan。恭喜大家只差一週就完成 2-2 了！
</p>
<p>教練注意到同學們上週在觀摩其他同學作業的時有很多新的學習。不只作業卡關時可以觀摩，寫完作業後更可以觀摩來練習程式碼識讀，這也將是同學在逐漸邁入進階課程過程中很重要的學習機會。想要有效地達到「作業後的觀摩」，你可以...
</p>
<p>
<li>回顧在
<a href="https://lighthouse.alphacamp.co/courses/99/assignments/3000" target="_blank">A15: 練習觀摩與回饋 </a>裡所提到的觀摩技巧</li>
<li>在觀摩時，思考語法邏輯並嘗試解釋表達</li>
<li>看見程式碼的優點，並回顧、優化自己的程式碼</li>
</p>
<p>
不妨試試以上作法，期待會對你有幫助！
</p>
</div>
</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>

---

## 【重要】學期 2-2，課程結束後你的下一步

Hi {{user_nickname}}，

學期 2-2 的四周課程進度已經結束，過去一個月的學習如何呢？

#### 填寫 學期 2-2，整體學習體驗回饋

不論你的學習進度到哪裡，都邀請{{user_nickname}}在近日內完成填寫[學期 2-2，整體學習體驗回饋](https://lighthouse.alphacamp.co/courses/99/units/20724) 和 AC 分享你的想法吧！

#### 把握課後助教支援七天，完成學期 2-2 技術驗收!

提醒你這週為 [課後助教支援](https://lighthouse.alphacamp.co/courses/38/units/7520#:~:text=%E5%8B%99%E5%BF%85%E5%AF%A9%E6%85%8E%E4%BD%BF%E7%94%A8%E3%80%82-,%E8%AA%B2%E5%BE%8C%E5%8A%A9%E6%95%99%E6%94%AF%E6%8F%B4,-%E6%B3%A8%E6%84%8F%EF%BC%9A%E5%AD%B8%E6%9C%9F%E4%B8%80) 時間，若 {{user_nickname}}

- 有問題想要向助教提問
- 有作業標示為 `Late` 或是尚未繳交

在 **8/21 (日) 23:59** 以前，你可以持續提問、重新繳交作業，還是能夠獲得助教回覆與批改喔！

#### 確認下一步課程安排

很開心過去四周 {{user_nickname}} 加入學期 2-2 跟著進度班級制學習，不過我們也理解學習是相當個人的，若你想要再次**重讀**、或是**轉班**延後下一階段開課的話，可以到 [附錄 - 學生權益與使用權限](https://lighthouse.alphacamp.co/courses/38/units/6836) 進行確認呦！

若已經準備好往學期 2-3 邁進的話，也記得完成 **[學期 2-3 選課引導](https://lighthouse.alphacamp.co/courses/99/units/26196)** 的章節學習，並選擇 2-3 的主修路徑！也建議 {{user_nickname}} 可以提早開始預讀學期 2-3，並在開課前完成「學期 2-3 必備工具安裝」，以利開課後能夠順利學習喔！

最後，如果你在學習進度安排上有相關問題，也歡迎來信 [e-mail] 與教練團隊聯絡!

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

---
# Style code

<!-- style code -->
<style>

div#alert-warning{
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 0.9rem;
}

div#coach-container {
color: #002380;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #002380;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}

div#coach-icon-box {
max-width: 15%;
margin-right:2%;
}

div#coach-content-box {
max-width: 82%;
}

div#coach-content-box p.coach-p-start {
margin-block-start: 0.5em;
margin-block-end: 1.67em;
}

div#coach-content-box p.coach-p {
margin-block-start: 0em;
margin-block-end: 1.67em;
}

div#coach-content-box p.coach-p-end {
margin-block-start: 0em;
margin-block-end: 0em;
}

span#red-color{ color: #e52f28;}

@media screen and (max-width: 400px){
div#coach-container {
flex-direction: column;
}

div#coach-icon-box {
max-width: 25%;
}

div#coach-content-box {
max-width: 100%;
}
}
</style>

---
# Archive

#### 掌握 MVC 不是技術能力驗收的側重點

注意到同學們上週在「練功任務 -- 重構 TodoList」 中遇到了非預期中的挑戰，因此希望同學們能特別注意，本階段的技術能力建立，我們更關注的是 `是否能作出有意義的功能`、`是否有優良的程式碼品質`、`是否有展現解決問題的思維`，而非對 MVC 模組化的掌握。

MVC 教案設計的目的是為同學們未來在進入階段三學習框架工具進行 **概念鋪墊**，提早開始熟悉模組化設計。

一般工程師從第一次接觸到要能「掌握」MVC 運用，通常也需要幾週甚至幾個月的時間練習，在學期 2-3，我們也會持續使用這個概念設計程式，因此同學們 **無需在現階段就期待自己要能完全掌握 MVC**。

---

#### 教案調整，重構 TodoList 增加作業批改

同時也非常感謝同學們透過不同管道給予的回饋，讓我們更加了解在學習過程中遇到的挑戰，這些回饋一直都是協助 AC 持續進步，嘗試優化教學的動力。

經過教練團隊的討論後，我們將於未來調整 S3 翻牌遊戲：微型專案設計 教案的順序，將重構 Todo List 移動至翻牌遊戲的教案後，讓同學在至少完整體驗一次 MVC 模組化的思考過程後，再出手重構 Todo List 專案，並增加 [A12: 重構你的 Todolist 專案](https://lighthouse.alphacamp.co/courses/41/assignments/1256) 的回饋方式，除了以 Editor Choice 回饋外，新增 TA Review 協助同學釐清模組化的設計概念。

希望透過以上調整，能協助同學更聚焦在 S3 章節目標的能力建立 - **認識具體的程式碼優化技巧，及初步建立專案設計的概念**。

---

##### 已經提交過作業，還要再交嗎？
已經於上週提交作業的同學，無需再次繳交，本週助教會直接進行批改。於 6/21 23:59 之後提交的同學，助教則會於本週結束後再行批改。

尚未繳交過作業的同學，我們會建議你在學習 S3 翻牌遊戲時，先跳過 [A12: 重構你的 Todolist 專案](https://lighthouse.alphacamp.co/courses/41/assignments/1256)，繼續跟著教案實作，至少完整跟著教案實作過一遍翻牌遊戲後，再回頭嘗試重構 TodoList 專案。

---

- **第 2 階段：挑戰加碼任務 - 重構 TodoList**
你的目標是「能夠妥善規劃函式的架構，封裝函式」，將程式碼重構。

---

<div style="color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display:flex; align-items: center; justify-content: space-between; font-size:13px;">
<div style="max-width:15%;">
<img src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8706/attention.png" style="width:100% ">
</div>
<div style="max-width:82%;">
<h5 style="color: #692625;margin-block-start:0em; margin-block-end: 0em; margin-top: 0; font-size:18px;">還在前面的進度，怎麼辦？</h5>
<p style="margin-block-start:0em; margin-block-end: 1.67em;"><code style="color: #692625; font-size:13px; font-weight: bold;">請先完成 S2 電影清單，再進入 S3 綜合實作</code><br>雖然 S2 電影清單的份量較多，但能夠跟著教案走過一遍是非常重要的過程，因此請務必跟著教案走過至少走過一遍，確實理解功能背後拆解的每一步驟，建立你的 JavaScript 工具箱 & 思考脈絡，再往下推進。</p>
</div>
</div>

# 還沒看到你上線學習？要趕緊加把勁跟上囉！

Hi {{user_nickname}}，

上週的範圍是 S1 API & Ajax：串接第三方資料，學習透過 JavaScript 發送 HTTP 請求，搜集其他網站的 API 資訊，打造出一個有真實資料網頁。

注意到你這禮拜截至目前還沒有學習進度，不知道是否遇到什麼困難了呢？可以看看在學習機制上有沒有能夠幫助你的地方：[【必讀】認識在 ALPHA Camp 的學習旅程地圖](https://lighthouse.alphacamp.co/courses/38/units/28575)

<div style="color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display:flex; align-items: center; justify-content: space-between; font-size:13px;">
<div style="max-width:15%;">
<img src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8706/attention.png" style="width:100% ">
</div>
<div style="max-width:82%;">
<h5 style="color: #692625;margin-block-start:0em; margin-block-end: 0em; margin-top: 0; font-size:18px;">這週想要補繳上週作業？</h5>
<p style="margin-block-start:0em; margin-block-end: 1.67em;"><code style="color: #692625; font-size:13px; font-weight: bold;">你可以申請遲交作業批改</code><br>在班級進度制中(即 ４週/8週 進度進行中)，助教只會批改準時照進度繳交的作業，不會主動批改遲交的作業。
當學生來不及在期限內繳交作業時，AC 提供一定次數的遲交作業批改申請，讓學生仍可以在完成作業後即時收到助教的回饋，檢視自己的學習成效。詳細的規則可以參考 <a href = "https://lighthouse.alphacamp.co/courses/38/units/28572" target = "_blank">U: 遲交作業批改</a></p>
</div>
</div>

#### 🔗 加入 LINE Group 和同學一起討論

<div style="width: 100%; text-align:center;">
<img style="width: 50%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22498/F2_Invitation__202212_.png"><br>
<span style="font-size:0.95rem; color:#9B9B9B;">請用手機掃描上方 QR code 加入 Line 群組。<br>若無法掃描，可嘗試「用手機」點擊此連結：<a href="https://line.me/ti/g/8z14z9ad_f" target="_blank">https://line.me/ti/g/8z14z9ad_f</a></span>
</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>

<style>
#line-info-box{
width: 100%;
display: flex;
justify-content: space-around;
font-size: 0.9rem;
}

#line-qr{
width:30%;
}

#line-qr img{
width:90%;
}

#line-qr span{
width:100%;
font-size:0.95rem;
color:#9B9B9B;
overflow: hidden;
text-overflow: ellipsis;
}

#cta-in-line{
width: 65%;
}

@media screen and (max-width: 400px){

#line-info-box{
width: 100%;
display: flex;
flex-direction: column;
}

#line-qr{
width:100%;
text-align: center;
}

#line-qr img{
width:30%;
}

#cta-in-line{
width: 100%;
}
}

</style>

#### 階段成果驗收

整個學期二 (三階段) 的技術重點是能夠打造出一個網路應用程式。在這個階段我們學習了新技術 -- API 串接，並大量運用 DOM 與 function，做出有意義的功能，甚至更進一步，嘗試寫出優良的程式碼，鍛練解決問題的思維。

因此在準備要進入學期二的最後一個階段之前，我們為同學設計了「[技術驗收](https://lighthouse.alphacamp.co/courses/41/units/5963)」與「[學習能力驗收](https://lighthouse.alphacamp.co/courses/41/units/7765)」，協助同學們更清楚每個階段的目標設定與評估。

#### [選修]JavaScript 物件導向 (OOJS)

最後，如果你已經完成階段驗收，尚有時間餘裕，可以進入選修 —— 「JavaScript 物件導向」進行學習。

物件導向是除了 MVC 模組化以外，在軟體開發中也相當常見的程式設計方式。這個章節中，你將會實作 POS 機，瞭解在 JavaScript 中如何實現物件導向。