Node.js + React Native 手機Apps編程課程

實體編程教學課程內容

課程簡介

本課程為三小時高效速成入門班，讓學員體驗 前端 App 開發（React Native） 與 後端伺服器（Node.js + Express） 的整合流程，快速理解跨平台行動應用的完整架構。

課程將示範如何以 JavaScript 為核心語言，透過 React Native 建立可同時運行於 Android / iOS 平台的應用介面，並使用 Node.js 建立後端 API，讓 App 能即時接收或傳送資料。課堂結束時，學員可完成一個具備資料互動功能的迷你 App（如任務清單或留言應用），親身體驗「全端 App 開發」的基礎流程。

課程目標

1. 理解前後端整合架構及跨平台應用開發原理。

2. 能使用 React Native 建立基本畫面元件及互動介面。

3. 使用 Node.js 建立簡單 API，支援資料暫存與交換。

4. 體驗前端（App）與後端（伺服器）連線的基礎方法。

5. 為進階 App 開發（雲端資料 / 登入系統 / 商業應用）奠定基礎。

適合對象

• 具基本 JavaScript / 編程體驗的學員。

• 想建立跨平台 App（Android / iOS）的學生、創業者或進修人士。

• 有志轉型至全端或 App 開發領域的科技教育、軟體或商業從業者。

• ICT / STEM / 職業進修培訓參與者。

課程時長與授課方式

• 全長 3 小時。

• 理論講解 40%，實作練習 60%。

• 教學方式：邊學邊做，以範例專案貫穿整個流程。

課程大綱

第一部分：React Native 入門與介面設計（約 60 分鐘）

• React Native 工作原理與開發流程。

• 安裝與環境設定（Expo 快速啟動專案）。

• 認識主要元件（View、Text、Button、TextInput）。

• 實作練習：建立「任務清單 App」界面。

• 加入互動邏輯（狀態控制 useState）。

第二部分：Node.js 後端伺服器開發（約 60 分鐘）

• Node.js 與 Express 簡介。

• 建立 API 伺服器、設定路由（GET / POST）。

• 使用 JSON 傳遞資料。

• 實作練習：建立「待辦任務 API 伺服器」。

第三部分：前後端整合與資料互動（約 45 分鐘）

• 使用 Fetch / Axios 讓 React Native 呼叫 Node.js API。

• 在手機上即時顯示伺服器資料。

• 實作練習：App 與伺服器互動（新增 / 顯示任務資料）。

第四部分：成果展示與延伸應用（約 15 分鐘）

• 學員展示作品與體驗測試。

• 延伸說明：

  • 與資料庫整合（MongoDB / Firebase）

  • 使用 React Navigation 建立多頁面 App

  • 上傳與部署應用（雲端 / GitHub / Render）。

課程特色

• 三小時入門全端 App 開發，一次體驗前後端整合流程。

• 以 JavaScript 為核心語言，降低學習門檻、易於延伸。

• 可即時預覽與運行成果，理論與實作並重。

• 適合進修、創業原型設計或數位職能培訓。