Loading...

JavaScript 作為 Web 開發最熱門的程式語言,是ALPHA Camp (AC)全端開發JavaScript課程的學習主軸。AC要如何用32周,將零基礎的人,培養成一個兼具前後端能力的全端工程師,這篇帶你從全端技能樹開始詳細解釋。(延伸閱讀:AC如何打破線上課程通病,創造成效第一的學習體驗

為什麼要學全端開發?

無論你想要成為前端、後端或全端工程師,能夠更宏觀、系統化的學習前後端專業知識與Best Practice,可以幫助你無論在做前後端工作時,都能更全觀了解Web開發,也更有能力面對、溝通協調與解決網站前後端所面臨到的不同問題。

延伸閱讀:前端、後端、全端工程師 必備技能與就業門檻比一比

全端開發該學些什麼?

圍繞前後端開發的技術和工具那麼多,到底該學些什麼?ALPHA Camp 整理的「全端開發技能樹」是從業界廣傳的 Web Developer Roadmap 延伸而來,幫你更精簡整理學習 Javascript 全端開發時必要的技能,將這些必要的技術和工具學會,就能夠開啟你成為一個合格 JavaScript 全端工程師的路程。

全端開發該怎麼學?

ALPHA CAmp的課程設計理念,呼應了全端技能樹,提供了最完整、有效且扎實的32週系統化學習路徑。

分為四大階段:程式入門前端技能後端技能以及團隊協作專案開發。不求速成(因為也沒有速成這回事)而是要讓學習者能夠精熟所學,完成32週培訓,成為能夠符合業界需求,且持續自我進化的全端工程師。

下面是我們32週養成攻略的詳細介紹,讓你了解每週該做些什麼,一步一步朝 JavaScript 全端工程師的目標前進。

1.程式入門

以Web App角度建立對網路開發的相關主題第一步的認識,瞭解運算思維(Computational Thinking)和網站開發基礎觀念與流程,學習 HTML/CSS/JavaScript 語言基礎,並體驗、培養開發的手感。掌握各主題下的開發環境、語言、實務工具以及重要的關鍵字。

第1週:寫程式的起點

認識電腦與程式背後的設計邏輯與功用,並馬上開始使用第一個程式語言:JavaScript!嘗試撰寫一個簡單的應用程式。

第2週:資料設計與演算法

學習程式領域的兩大主題:資料與邏輯。透過實作與情境練習,瞭解程式設計背後所使用的資料結構與思考邏輯,並活用運算思維,來設計出符合使用習慣又能幫助解決問題的程式。

第3週:網站設計與介面實作

瞭解 HTML 與 CSS 的用途與重要性。透過基礎而實用的 HTML/CSS 語法教學,不僅掌握「架構一個靜態網站」的基本功,也將擁有完整的網路概念,理解 HTML/CSS/JavaScript 的互動關係。

第4週:網頁設計實作,打造第一個網頁

全心投入AC設計的專案,運用前幾周所學的工具,在這周中,我們將手把手帶你實用這些工具,並完成一個臉書頁面的重現,讓你能與日常生活中的網路體驗產生連結,並對網路開發打下更紮實的印象。

最後我們會將回顧你過去四周所學,並以產業趨勢和職涯發展的角度,來討論網路開發和程式設計的能力如何能拓展生涯規劃。

零基礎也學得會,HTML/CSS/JavaScript的程式設計入門課

2.前端技能

清楚理解Web開發貫穿學習路徑,深入 JavaScript 核心概念,掌握前端開發核心工具,進而能實作完整的前端體驗。前四週著重在核心工具/技術上手;後四週專案實作累積經驗,貫穿並整合學習到的東西。

第5週:認識開發環境與JavaScript核心觀念

一開始著重認識開發環境,之前我們運用 CodePenRepl.it 等線上編輯器來完成練習,現在我們把開發環境移到自己的私人電腦,正式開啟你的網路開發者人生。

學習 JavaScript 核心觀念:延續程式入門時學過的 JavaScript,回顧變數、運算、流程控制等基礎操作重點之後,進一步認識深入一點的觀念,包括基本型別 (primitives) 與物件的差異,從資料結構的角度來看陣列與物件,JavaScript 裡的函式。接下來每一次的實作,都會引導你更加深入 JavaScript 函式的應用。

第6週:RWD與BootStrap

認識多屏幕時代的網頁設計原則,知道如何用 CSS 撰寫出能自動適應螢幕大小的RWD「響應式網頁」。延續之前介紹過的 Flexbox 排版系統,在這裡我們也會介紹二維排版系統 Grid。

另外,我們也會引導你開始使用 Bootstrap 框架,熟悉之後可以大幅加速網頁元件的開發速度。

第7週:DOM操作與事件處理

DOM 操作與事件處理是前端的核心技術,內容包括:

  • 瀏覽器渲染流程
  • 基礎 DOM 操作:也就是使用 JavaScript 去重新渲染瀏覽器裡的 HTML/CSS
  • 事件處理:在使用者做了特定事情時,才驅動網頁的變化

第8週:串接第三方API

學會透過 AJAX 的技術來發送 HTTP 請求,搜集其他網站的 API 資訊,搭配 DOM 技術的應用,在網頁介面裡加入外部提供的資料。

到這裡,你已經完成核心工具的學習,接下來要邁向專案實作。

第9週:前端綜合實作 電影清單

從功能出發,開始應用所有手邊工具,鍛練解決問題的思維。

在前端體驗綜合實作,你將打造一個電影清單網站,包括瀏覽資料、搜尋電影、收藏電影等等。你需要運用邏輯思維拆解功能、設計流程、並且應用 DOM 技術。

第10週:管理程式碼Git&GitHub

學習管理程式碼:Git & GitHub,你可以將你的專案作品發佈到 GitHub Page,開始建立個人作品集。

第11週:程式碼模組化-MVC架構

微型專案設計:翻牌遊戲需要設計資料結構。我們將引入 MVC 架構來模組化程式碼,你將會大開眼界,並且重新認識 JavaScript 的物件與函式。

第12週:實作踩地雷-拆解問題與分析架構

打造一個 Windows 的經典小遊戲——踩地雷。這個專案的鍛練重點是思考層面的技能,會是八週的集大成之作,一旦完成這個專案,代表了你可以對自己的 JavaScript 基礎功感到放心。

(AC學生Tim的踩地雷作品)


系統化完整學習,掌握JavaScript前端開發技能

3.後端技能

開始從「寫程式」進入到「做產品」。你將使用 JavaScript + Node.js 打造一個兼具前、後端與資料庫的網路應用程式。你將學會設計並操作「關聯式」與 NoSQL (MongoDB) 資料庫,並應用 SQL 來操作資料。建立如搜尋、Facebook 登入、密碼雜湊等簡單功能,並活用 Git/GitHub、CLI 與 VS Code 來開發與管理專案。

第13週:網路概論、Web App架構與終端機與指令列

學習如何使用 Node.js 建立網路伺服器 (web server),並用 Express 打造一個網站在你的電腦上運作。過程中你也會了解瀏覽器跟伺服器是如何互動的。

你會打造一個具有不同路由 (也稱為網址) 以及搜索功能的網站。在作業中你將會舉一反三,開發一個功能類似的「餐廳清單」Restaurant List。

第14週:Node.js、Express.js,版本控制與Git

你會深化上週在餐廳清單中的練習,自己實作一個密碼產生器。不僅是幫助你對 Node.js 與 Express 有更深入的了解,更會得到一個你親自打造的軟體小工具。在作業中我們同時會練習密碼產生器,讓同學們能實作出實用的日常工具。

本週的後半段我們會回到「版本控制」與 Git 操作,讓你深入了解版本控制的邏輯,並認識更多實用的指令。

第15週:資料庫MongoDB,打造To-Do List專案

為接下來的專案做準備,把 MongoDB 與其他工具安裝好,並初步了解它的操作。打造To-Do List專案。

第16週:使用者認證系統與第三方工具

延續上週你做的 To-Do List,打造一個「使用者認證 (user authentication)」系統,讓使用者可以註冊、登入、並建立屬於自己的 To-do list。並嘗試重構程式碼來優化產品的品質與體驗。你會在 Express.js 專案裡整合 Bootstrap、Passport、Facebook API 等第三方工具,讓你的產品功能更完整。

第17週:網站部署 Heroku

學習「網站佈署」(deployment),並透過 Heroku 平台服務來發佈你的 To-Do List,讓其他人也能使用你的產品。

本週會有指標性作業「老爸私房錢」,你會綜合運用過去所學,打造出一個具備完整 CRUD 的網路應用程式。

第18週:Asynchronous JavaScript

討論 JavaScript 的非同步 (asynchronous) 本質,了解它的優勢與潛在問題。你會對過去撰寫的 JavaScript 程式碼產生更深入的理解,也會學到新的語法工具,例如可運用 Promise 物件來改善程式碼。

第19週:關聯式資料庫,SQL語法、MySQL專案實作

能有效的設計與操作資料庫是一個後端開發者的重要條件。你會深入了解「關聯式資料庫」的定義、設計、與應用。雖然在 Express.js 裡可以直接用較為方便的 ORM 來操作資料庫,但我們仍然會花些時間在 SQL 語法上,我們會運用 SQLZOO 的題庫來快速了解資料庫操作的語法結構。

我們會手把手帶你完成最後一個實作專案: 用 MySQL 重新打造 To-do List。本週會應用 SequelizeMySQL Workbench 等工具,並且也會認識 ORM、Migration 等資料庫管理技術。

第20週:綜合練習與期末考

複習過去七週所學,並專注於完成期末考,綜合練習所有內容。

學會用JavaScript + Node.js打造兼具前後端的網路應用程式

4.團隊協作專案開發

透過專案實作,學習軟體開發、資料設計、測試、版本控制等實務專業經驗,為成為全端網路工程師,做好準備。你會依照產品的需求去打造功能,user story 會更真實,複雜度大大提高。不開始動手做之前,不會知道只能用某種特定方法做,也不會預期到一些需要的設定,會有一些工具的限制。你需要「從功能出發去解決問題」。

這階段一共分成四大主題,每個主題都有三個重要面向:理論、工具與實作教學影片,來幫助你建立完整的學習體驗。

第21週:【主題一】工程師要懂的產品設計 

在開發團隊拿到 user stories 和 wireframe 之前,到底這些需求是怎麼跑出來的?在這個章節裡,你會從一個實際的例子出發,觀摩產品設計的工具怎麼落實在具體的情境裡,也會藉由分組討論腦力激盪來深化學習。

第21-22週:【主題二】打造Forum 餐廳論壇

在 Forum 餐廳論壇中,你會學到設計資料結構與網站功能實作。你會從 user stories 與設計稿出發,設計資料結構,並在專案中實作出包含使用者認證系統、前後台權限、CRUD 功能、收藏、追蹤、留言/評論等功能。

第24週:【主題三】測試 Testing 

測試是專案開發中不可或缺的一環,是對你自己對自己的產出負責的表現。你在這個單元中會了解測試的目的、形式與工具與基本概念,並且能在專案進行基本的測試。同時會有專業講師指導示範的測試工作坊。

第25-26週:【主題四】 團隊協作Simple Twitter 網站

這是本學期的重要里程碑,你必須實作社群網站 Twiiter ,讓使用者能創建帳號、編輯個人介紹與大頭貼、瀏覽動態牆、貼文、回文、追蹤點讚等互動的功能。在團隊協作中,從團隊專案中學習 Agile 開發精神以及 Scrum 架構,開發過程中以 Git 團隊協作管理程式碼,分工完成複雜的專案。你同時會學到測試驅動開發流程 (TDD),閱讀測試文件理解規格,設法讓所有測試亮綠燈。並且在發送 pull request 後,啟動 CI 流程,在 GitHub 上觀察測試結果。

第23-28週:【選修主題五】Forum 前後端分離

「前後端分離」是一個實務的概念,為了具體瞭解這個概念,我們會分成幾個階段進行:

  • 首先,你需要怎麼在 Express.js 站上架設 Web API,我們會為 Forum 專案開設獨立的 API Controller 並架設 API 伺服器。
  • 接著我們用 Vue.js 另外做一個 Forum 純前端介面。在這個過程中你需要快速入門前端框架的架構以及 web component 的概念。在打造前端介面的同時,串接之前做好的 Web API,讓你的網頁動起來。

第27-28週:【選修主題六】電商網站 

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

第27-32週:畢業專案開發與口試

產品開發實務:學會將產品需求轉為開發規格,運用敏捷式開發 (Agile) 與 Scrum,和隊友協作開發完整專案。為期 4 週的快速開發期,工程團隊體驗從無到有打造一個產品專案,解決一個實際發生的問題或是需求。在快速開發期開發專案,不只是學習,更是練習用程式語言解決問題的實戰演練。

學生畢業專案心得:從零打造「美食預定」電商平台,三人團隊的AC畢業專案心得

畢業專案口試

畢業專案口試的評審會給予專業的回饋,希望帶給工程團隊更深刻的學習,評審標準分為以下 4 個重點:

  1. 產品完整度與使用者體驗 Product Completeness and Experience
  2. 程式架構與品質 Code and Product Integrity
  3. 軟體工程與團隊協作 Software Engineering and Collaboration Practice
  4. 第三方 API 和工具應用 3rd Party API and Tool

累積實戰作品、獲取專業回饋,做好成為全端工程師的準備

32週後不是結束,而是另一個開始

走完了32週 JavaScript 全端工程師的養成之路,你已經可以開始你的全端工程師職涯,。但軟體工程師就是一個學無止盡的職業,技術和業界趨勢不停在變化,永遠不會有學完或學夠的一天。

ALPHA Camp規劃的系統化養成之路,除了技術主題外,更要在過程中培養工程師的自學力、解決問題、團隊協作的能力,才能在長期的軟體職涯中,持續精進與職涯進階。

3分鐘小測驗,了解你可以從哪裡開始學習全端開發。

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|JavaScript 完整前端基礎

系統化學習 JavaScript

實作打好前端基礎,成為扎實的網頁開發者