# 前端課程主題與課表

在這個單元，我們會帶你一覽接下來的課程與專案，並說明前端兩門專修課程的聚焦重點。內容很多，但相信你已經迫不及待想瞧瞧接下來的挑戰了！

### 目標設定

先前我們有說明過，學期三的課程會因你的專修路徑選擇而有所區分。

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16258/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16258/ExportedContentImage_00.png"></a></div>

無論你選擇哪一個專修領域，我們希望你有為自己設定清楚的目標。

在這個階段，單純認識新的操作指令、跟著老師寫程式碼，都是不夠的。

從現在開始，你要：

- 對網路應用程式運作的原理有自己系統性的掌握
- 能夠主動探索新工具，並解釋為什麼選擇它們

除此之外，你要**認真思考你所撰寫的程式碼，與開發時的專業素養，是否能被其他專業工程師認可**。

當你全心投入並完成課程後，你將會對網路開發產業，以及自己的適應程度，有更具體的認識。

屆時，你將能決定是否要全力衝刺求職準備，並且搭配 AC 的求職輔導，規劃自己在求職衝刺期的作為。

現在，讓我們先來認識這個學期你要克服的大魔王：Twitter 專案。

### 指標專案：Twitter

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16259/ExportedContentImage_01.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16259/ExportedContentImage_01.png"></a></div>

這個學期的里程碑，就是這個 Twitter 專案。你將會面對以下的挑戰：

* 前、後端兩門專修的同學協力合作，你們會運用「前後分離」或是「全端開發」的方式，共同打造出一個網路應用程式
* 前端會使用 Vue.js 框架，而後端會用 Express.js 加上 SQL 資料庫來架設 API 伺服器
* 你需要融會貫通過去所有學過的技術，打造一個有專業水準的網路產品
* 你所收到的資訊僅有使用者故事與 wireframe。從資料設計、功能定義、使用流程到 API 文件等，都需要你和你的團隊自己打造
* 你需要使用從沒學過的技術工具，打造全新的產品功能
* 你撰寫的程式碼、API 文件、以及 Git Commit 的頻次與註解，助教都會以專業開發團隊的標準來批改
* 在課程最後一週的週末，我們安排了一場「黑客松」，讓你與團隊在有限時間內，完成進階功能

有關「黑客松」的活動時程，會在各自的課程間公布。

以下是這個專案的開發時程規劃，在課程的第三週 (Week-3) 你需要開始組隊並規劃資料設計：

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16260/ExportedContentImage_02.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16260/ExportedContentImage_02.png"></a></div>

這個專案不只考驗技術力，我們還會搭配全方位的衡量指標，引導你深入洞察自己作為一名工程師，不同能力與行為面的狀態。

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16261/ExportedContentImage_03.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16261/ExportedContentImage_03.png"></a></div>

驗收指標包含：

| 指標 | 描述|
|:----:|---|
|按時交件|依據開發時程完成「基本功能」，例如貼文、回文、追蹤點讚等。這部分會提供你使用者故事與資料規格。|
|通過測試|測試文件也是規格的一部分。你將遵循「測試驅動開發 (Test-Driven Development)」的流程，已通過全數測試為目標來和組員一起打造專案。|
|解決技術問題|完成「挑戰功能」，例如聊天、hashtag、打卡等等。挑戰功能則要靠你自己尋找突破點。|
|專業決策與思維|針對挑戰功能，說明各個技術決策背後的思維與考量。|
|Code review & feedback|消化組員的程式碼內涵並評估品質。|
|Git & GitHub 協作|幫助他人從版本紀錄中觀察出專案歷史與協作狀況。|
|團隊合作|透過 360 review 評估自己與組員的合作狀況。|

在團隊協作中，你會實際運用一些個人練習時沒有機會使用的工具，例如 Git 協作流程。也會應用到像 Kanban 這類專案管理工具來分工合作。

關於 Twitter 專案，目前先分享到這裡。在接下來的課程裡，我們有更詳細的說明。

接著，來正式看看兩門專修課程的內容與鋪排吧！我們先介紹【前端】的專修路徑。

### 前端路徑 —— 課程章節主題

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

#### 切版挑戰：ALPHA Shop 購物車

這個部分的學習重點，是深化你從一般的「網頁設計」提升為「前端工程師」的能力。

過去我們只需要把網頁的排版完成，目的就達成了。但要成為前端工程師，除了要能打造更複雜的前端功能之外，更重要的，是開發時要考慮到程式碼的結構、易讀性、與可維護性。

同時，能在不同的使用場景下，選擇最適合的前端工具，這才是一名前端工程師應有的能力。

在過去的課程中，我們手把手帶你完成數個專案，現在你將「從 0 到 1 自主實踐大型切版專案」，打造一個常見的電商付費流程：

<div style="width: 100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16267/ExportedContentImage_09.png" target="_blank">
<img style="width:70%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16267/ExportedContentImage_09.png">
</a>
</div>

看起來跟「網紅廣告平台」有些相似之處，不過要自己從頭開始切出和設計稿一模一樣的版，還是會遇上許多意想不到的挑戰，走過的人才知道。

#### 前端框架 Vue.js

<h5 style="font-size: 1.2rem;">Vue.js x TodoMVC </h5>

從第二週開始我們正式進攻前端能力的重要主題「熟悉一個前端框架」。我們選擇 Vue.js 來入手，會先從 TodoMVC 這個開源專案來認識 Vue.js 的基本語法：

<div style="width: 100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16268/ExportedContentImage_10.png" target="_blank">
<img style="width:70%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16268/ExportedContentImage_10.png">
</a>
</div>

除了語法使用，在這裡你也會逐步認識 Vue 的生命週期與 Hook，也會藉機接觸到瀏覽器渲染流程這類的前端關鍵知識。

<h5 style="font-size: 1.2rem;">Vue.js 專案 - 餐廳論壇</h5>

前一個專案算是 Vue.js 的暖身，在這個章節，我們要正式打造一個前後台完整的服務。

你會用 Vue.js 實作一個「餐廳論壇」的前端介面：

* 完整體驗到用 Vue.js 打造前端的感覺
* 實作元件的拆分、父子層的資料傳遞
* 將前端介面與後端 API 串接

以下是餐廳論壇的版型參考。它具備了社交網站的各種不同功能與頁面：

<div style="width: 100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16269/ExportedContentImage_11.png" target="_blank">
<img style="width:70%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16269/ExportedContentImage_11.png">
</a>
</div>

### 總結

呼，終於介紹完前端課程的內容，如果你想了解後端課程的學習路徑，可以參考 [後端課程主題與課表](https://lighthouse.alphacamp.co/courses/118/units/25404) ！

不論你將踏上【後端】或是【前端】的專修道路，眼前的風景都將非常精彩充實。

如果你感到有些頭暈目眩，就站起身子伸展一下，拍拍自己肩膀打氣，繼續朝工程師之路前進！

如果你已經迫不及待、求知若渴，那就太好了，讓我們往下一單元看下去！

----

### 後端路徑 —— 課程章節主題

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

#### 技術精修

* To-do List+：認證系統 & 第三方工具
* 關聯式資料庫與 SQL 入門
* To-do List x MySQL

#### 實務接軌

* 敏捷開發 Agile
* 餐廳論壇：專案開發實戰
* 實戰驗收：Simple Twitter
* 架設 Web API 伺服器
* 購物車與金流

#### 技術精修主題

<h5 style="font-size: 1.2rem;"> To-do List+：認證系統 & 第三方工具 </h5>

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/12423/ExportedContentImage_02.png
" target="_blank">
<img style="width: 70%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/12423/ExportedContentImage_02.png
">
</a>
</div>

使用者認證系統是網路應用程式的標準配備，運用前一個階段完成的 To-Do List，我們會運用 Passport.js 來做出註冊、登入、登出功能，可以使用 email 與 Facebook 帳號來認證。

做為一個第三方的認證套件，Passport.js 會是那種你可以成功使用，但又彷彿一知半解的工具。你可以在試圖理解它的過程中，學習到非常多的網路知識，但記得適可而止，我們還要繼續往前走。

這部分會有複雜版本的指標性作業「老爸私房錢」，這份作業預計 會花你 2-3 天的時間，同學們務必事先安排好學習和寫作業的時間。

<h5 style="font-size: 1.2rem;"> 關聯式資料庫與 SQL 入門 </h5>

累積了實作經驗後，我們會紮實地理解關聯式資料庫設計和 SQL。這兩者對於成為一名有競爭力的後端工程師而言，十分重要。能有效地設計與操作資料庫是後端開發者的重要職能。你需要深入了解「關聯式資料庫」的定義、設計、與應用。

雖然在 Express.js 裡可以直接用較為方便的 ORM 來操作資料庫，但我們仍然會花些時間在 SQL 語法上。我們會運用 <a href="https://sqlzoo.net/" target="_blank">SQLZOO</a> 的題庫，來幫助你從實作中快速了解資料庫操作的語法結構。

<h5 style="font-size: 1.2rem;"> To-do List x MySQL </h5>

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13007/ExportedContentImage_01.png
" target="_blank">
<img style="width: 70%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13007/ExportedContentImage_01.png
">
</a>
</div>

在這裡，我們要重新建立一個新的 To-do list 專案，用 MySQL 替代之前的 MongoDB，並應用 Sequelize ORM、MySQL Workbench 等工具，以及 Migration 等資料庫管理技術。

除了再次認識資料庫與應用程式該如何串接，你更可以經由兩種資料庫串接經驗，區分專案裡的哪些程式碼來自你所選擇的資料庫。

#### 實務接軌

完成學期的前半段後，你就會進入一個重點專案。你會透過專案實作，學習軟體開發、資料設計、測試、版本控制等實務經驗。產品需求會更真實，複雜度也會提高。我們也會挑戰你去完成一些教材並沒有提過的功能，請你設法解決問題，而在過程中獲得意想不到的學習。

這階段後端路徑的重點是：

* 兩大重點專案：從使用者的需求出發，打造出專業水準的網路產品： 論壇與電商平台
* 業界必備技術：從專案中，學習設計資料結構、架設 API，Git 團隊協作、自動化測試等業界常用技術和流程
* 產品開發實務：學會將產品需求轉為開發規格，運用敏捷式開發 (Agile) 與 Scrum，和隊友協作開發完整專案

<h5 style="font-size: 1.2rem;"> 敏捷開發 Agile </h5>

因應下半場大量的專案實作，我們會介紹敏捷開發與相關工具。

敏捷開發只是一種精神，並沒有定義明確的執行方法，實際的團隊管理方法有 Kanban 與 Scrum 等等不同的工具與模式。你可以將這裡介紹的工具，運用在之後的專案中。

<h5 style="font-size: 1.2rem;"> 餐廳論壇：專案開發實戰 </h5>

在 Forum 餐廳論壇中，你會從 user stories 與設計稿出發，完成使用者認證系統、前後台權限、CRUD 功能、收藏、追蹤、留言/評論等功能。

從資料的角度，這個專案會包含各種資料關聯，如一對多、多對多、自關聯等等。有了實作經驗以後，未來你會更清楚該如何為軟體設計資料結構。

<h5 style="font-size: 1.2rem;"> 架設 Web API 伺服器 </h5>

我們會為 Forum 專案開設獨立的 API Controller，並架設 API 伺服器，以 JSON 格式輸出每條路由所需要的網站資料。

在脫離瀏覽器之後，我們需要運用 Postman 等工具來測試網站。另外，你也需要改用 JWT 登入機制 (之前是用 session 機制)，你會更深入理解「使用者認證」到底是怎麼一回事。

<h5 style="font-size: 1.2rem;"> (選修) 購物車與金流 </h5>

電商是網路應用開發最常見的主題之一，雖然千變萬變仍是 CRUD 與資料表關聯，但由於我們普遍對「電商網站」已有不少使用經驗，因此要完成「把商品放進購物車」、「結帳時才登入」、「在站內刷卡後直接看到訂票結果」這些功能的背後仍有許多眉角。

### 總結

呼，終於介紹完後端課程的內容，如果你想了解前端課程的學習路徑，可以參考 [前端課程主題與課表](https://lighthouse.alphacamp.co/courses/119/units/25742) ！

不論你將踏上【後端】或是【前端】的專修道路，眼前的風景都將非常精彩充實。

如果你感到有些頭暈目眩，就站起身子伸展一下，拍拍自己肩膀打氣，繼續朝工程師之路前進！

如果你已經迫不及待、求知若渴，那就太好了，讓我們往下一單元看下去！