# 現代 Web 開發實戰：API 開發與前端整合

## 課程目標

本課程旨在帶領學員掌握現代 Web 開發的核心技能，從前後端分離架構的基礎概念到實際應用，全面提升開發效率與專案整合能力。課程將深入介紹 RESTful API 的設計與開發原則，並結合前端技術實現 API 的高效整合，幫助學員打造穩定、互動性強的 Web 應用。透過案例實作，學員將學會如何提升 API 的效能與安全性，同時強化前後端整合能力，為進一步開發企業級應用奠定堅實基礎。

## 學員要求

- 具備至少一種程式語言的基礎知識（如 Python、JavaScript 或其他語言），能理解基本語法與邏輯。
- 聽過 HTML、CSS 與 JavaScript 且理解他們各自所扮演的角色。
- 知道關聯式資料庫（任一皆可）

## 課程規劃

### 第一週

1. RESTful 基礎概念與設計原則講解，環境安裝
2. 建立後端專案（使用 Django）與第一支 API 開發

### 第二週

1. 需求分析與資料庫規劃，透過 ORM 進行資料操作
2. 開發符合 RESTful 設計的 API

### 第三週

1. 資料的驗證與序列化
2. 課程專案開發：完成需求分析的 CRUD 功能

### 第四週

1. API 的過濾、分頁與排序
2. API 的認證以及授權（使用 JWT）

### 第五週

1. 課程專案開發：完成註冊、忘記密碼以及 API 授權管理
2. 資料庫查詢優化以及 CORS 和上線前設定

### 第六週

1. 架構概念與環境建置，前後端分離概念解析與實務開發工作流說明
2. API 整合基礎，深入 Axios 應用與特點解析，實作 API 發送請求

### 第七週
1. Next.js 關鍵特性解析，專案與環境搭建及核心功能說明
2. TypeScript 基礎應用入門，並與 Next.js 進行整合開發

### 第八週
1. 前端表單處理與認證，使用 React Hook Form 驗證欄位與處理錯誤資訊
2. 了解狀態管理與快取，Tanstack Query 基礎學習與基本 API 應用

### 第九週
1. API 進階整合應用，Axios 攔截器設定與處理認證及授權等
2. 額外開發工具介紹，協助整體開發與應用

### 第十週
1. 介接範例專案，逐步完成 API 應用串接
2. 整合專案開發，完成全端網站應用

<!-- * 網站 API 應用簡介說明及 Axios 規劃設計
* MVVM 簡易說明與前後端分離架構解析
* 前端開發函式庫與架構簡介
* 前端開發環境搭建與配置
* React 基本知識解析與 API 互動應用展示
* Next.js 專案搭建與架構特性說明(SSR、SSG)
* Next.js 自動路由（Automatic Routing）規劃與應用設計
* 基礎 Typescript 知識學習
* 使用 Typescript 配置 Axios API 攔截器與 API 函示等應用
* 從 Swagger 文件轉換 TypeScript 類別匯出
* 學習使用 Tanstack Query 來輔助管理 API 狀態流
* 學習使用 React Form Hook 管理表單與其相關應用
* 學習在專案中管理資料流與處理登入註冊等機制
* 整合當前所學完成完整網站全端應用串接 -->