Loading...

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

為什麼要學全端開發?

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

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

全端開發該學些什麼?

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

全端開發該怎麼學?

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

分為三大階段:程式設計入門掌握網頁開發以及軟體工程師養成。不求速成(因為也沒有速成這回事)而是要讓學習者能夠精熟所學,完成23週培訓,成為能夠符合業界需求,且持續自我進化的全端工程師。

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

1.程式設計入門

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

第1週:寫程式的起點

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

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

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

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

瞭解 HTML 與 CSS 的用途與重要性。透過基礎而實用的 HTML/CSS 語法教學,不僅掌握「架構一個靜態網站」的基本功,也將擁有完整的網路概念,理解 HTML/CSS/JavaScript 的互動關係。我們將手把手整合實作前幾週所學的工具,打造屬於你的個人網站。

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

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

2.掌握網頁開發

清楚理解Web開發貫穿學習路徑,深入 JavaScript 核心概念,掌握網頁前後端開發核心工具,進而能實作完整的前端體驗與後端功能。掌握網頁開發分為三個階段「JavaScript 前端開發」、「軟體開發實務入門」、「後端開發實務」,每階段各4週共12週。前四週著重在核心工具/技術上手;中間四週專案實作累積經驗,貫穿並整合學習到的東西。後四週則開始從「寫程式」進入到「做產品」。你將使用 JavaScript + Node.js 打造一個兼具前、後端與資料庫的網路應用程式。

階段一:JavaScript 前端開發

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

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

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

第5週:RWD與BootStrap

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

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

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

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

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

第7週:資料結構設計與學習成果驗收

認識表格等資料結構,理解「資料」的格式化與儲存。幫助你能夠將生活裡的資訊,轉化成可被儲存的資料。

並在本週,驗收你包含專業知識與技術,和學習能力與行為的學習成果。包括 HTML/CSS/JavaScript,以及網路開發相關工具的應用與理解,這些知識與技術能引導你邁向更進階的專業主題,或者幫助你在日常生活中解決實際問題

階段二:軟體開發實務入門

第8週:串接第三方API

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

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

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

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

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

第10週:微型專案設計,程式碼模組化-MVC架構

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

第11週:實作踩地雷-拆解問題與分析架構|物件導向JavaScript(OOJS)

打造一個 Windows 的經典小遊戲——踩地雷。這個專案的鍛練重點是思考層面的技能,會是八週的集大成之作,一旦完成這個專案,代表了你可以對自己的 JavaScript 基礎功感到放心。本週還要了解什麼是「物件導向程式設計」,與JavaScript 裡實作物件導向的入門重點。

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

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

階段3 後端開發實務

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

從學習網路應用程式背後的技術和機制開始,你會認識電腦間如何互相通信 (HTTP,請求 - 響應) 到全端網路應用程式的的設計模式與概念 (包括 MVC 與 Route) 。另外,你會認識 terminal (或 command line Interface - CLI) 、如何使用 Node.js 建立網路伺服器 (web server)、運用VS Code等開發工具。

第13週:Node.js、Express.js

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

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

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

為接下來的專案做準備,把 MongoDB 與其他工具安裝好,並初步了解它的操作。打造To-Do List專案。本週會有指標性作業「老爸私房錢」,你會綜合運用過去所學,打造出一個具備完整 CRUD 的網路應用程式。

第15週:版本控制Git&GitHub與網站部署 Heroku

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

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

3.成為軟體工程師

從這依照你的職涯目標,分為兩個專修路徑,全端工程師和前端工程師,除了技術內容,也包括軟體開發流程、專案管理等專業知識,更有模擬實際問題的團隊協作專案,學習工程師的工作模式與成功要訣。

全端工程師專修路徑

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

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

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

第17週:Asynchronous JavaScript

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

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

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

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

第19-20週:打造Forum 餐廳論壇

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

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

前端工程師專修路徑

針對學習目標為「前端轉職」的學生,提供更深入的 HTML/CSS 教學與鍛鍊,包含建立清楚的 HTML 架構、透過大量實作 CSS 文件的處理方式來完成常見頁面,學習如何活用不同 CSS 方法,並能清楚說使用邏輯與 trade-off(包括對 RWD 的考量),學會使用 Sass 預處理器,與如何進一步尋找資料,能簡單使用 jQuery。

第16週:HTML/CSS與Sass預處理器實務應用

進階的HTML和CSS學習,主題包含HTML5 Semantic Elements,SEO 相關的優化,前端效能考量,Class naming style,CSS Module、CSS Style、CSS Modularization、SS預處理器Sass。

第17週:切版實務鍛鍊

透過 5 個不同場景的版型,比如電商網站或 dashboard,並透過影片講解如何使用不同方法,從 0 開始完成切版。並學習使用不同工具的方法與考量,也會在專案中,挑選一個區塊,請學生用不同的方法完成,並說明實務上的影響。

第18-20週:前端框架 Vue.js

從認識 Vue.js 常見語法開始,打造一個 todolist 前端版。並透過前端框架將網頁元件拆解成 Vue component ,每個 component 擁有獨立的 HTML/CSS/ JavaScript

接著學會用 Vue.js 打造一個 single page application:餐廳論壇。瞭解 Vue 元件架構,以及資料如何在不同的 component 之間傳遞。

最後為餐廳論壇串接後端 API,完成一個前後分離專案

第21-22週:團隊協作Simple Twitter 網站與測試

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

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

第22週:前後端分離與 Web API

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

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

第23週:工程師要懂的產品設計,購物車與金流串接

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

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

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

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

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

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

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

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

在家學會 JavaScript 網路開發

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

3 分鐘選課指南

給期待創新改變的你

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

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

3 分鐘選課指南

學期一|程式設計入門

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

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

學期二|掌握網頁開發

系統化學習 JavaScript

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