📜 Course Description

本課程以架設一個完整的網站為主軸，實作出屬於自己的網站。學員將學習網站全端知識，包含前端網頁介面設計，後端與資料庫溝通以及資料傳遞，旨在培養實作網站專案的專業能力。

🧭 Course Map

Introduction & Overview

提供課程的整體概述，包括學習目標、項目主題和學習路線圖。

Version Control - Git & GitHub

學習使用版本控制管理專案，尤其針對多位開發者合作的大型專案。

Frontend

實作網站前端，包含建立網站頁面、頁首尾、頁面間的跳轉(路由)以及使用者互動等常見機制。

Basic JavaScript Syntax

ReactJS: 認識 ReactJS 框架，JavaScript 結合框架本身用法，建立頁面

Tailwind CSS: 設計網站外觀

Backend

實作網站後端，包含利用框架對資料的抓取（fetch）和增刪改查（CRUD）操作，以及設定與傳遞請求（request）與響應（response）。

ExpressJS: 了解 ExpressJS 後端框架，實現服務器端邏輯和 API 端點。

GraphQL: 利用 GraphQL 提供一種更靈活、高效的方式來交互數據。

MongoDB: 使用 MongoDB 進行數據儲存，學習如何設計和操作 NoSQL 資料庫。

Project Sharing

鼓勵社員分享自己的專案，透過實際案例展示學到的技術如何被應用在解決實際問題上。

<aside> 📌 Why do we learn React / GraphQL / MongoDB ?

Untitled

React

由 Facebook 所維護並開源的 component based 前端框架
Frontend Framework Popularity
特色:
- JSX (JavaScript XML): 定義 React elements 結構時，提供類似於撰寫 HTML 語法。
- React Component 和 Props: 物件為獨立且可重用的函式
- Virtual DOM

為什麼要使用前端框架？選擇 React 的優點：前端技能樹的演進史 - ALPHA Camp

React 是什麼？給新手的 React 入門 - ALPHA Camp

GraphQL

精確地請求需要的數據，並且能夠減少不必要的數據傳輸
使用單個端點來提供所有請求的數據
Client-Server Process (image from https://www.explainthis.io/zh-hant/swe/graphql)

MongoDB

非關聯式資料庫，是一種文件導向(Document-oriented database)的資料庫管理系統
使用BSON(Binary JSON)文檔資料儲存結構，提升資料傳輸速度
無需事先定義資料架構，並且能夠自由地增加資料的 Key/Value
DB-Engines Ranking (image from https://db-engines.com/en/ranking)
Database ← Collection ← Document

MongoDB – 最受歡迎的 NOSQL 資料庫 - 歐立威科技

</aside>

Course Schedule

<aside> 📌 This course schedule provides a thorough list of weekly topics, readings, assignments, and exams. Click All to switch to week, exam, or calendar view.

</aside>

Lesson