Life Is Possible WorkshopOverall (中文)

Life is Possible - 生命教育 手機程式工作坊

PWA應用程式工作坊介紹

https://github.com/Big-null/Life-is-Possible-Apps-workshop

🎮 難度

  • 簡單至中等 - 中學程度

🎯 目標受眾

  1. 基本電腦使用者
  2. 想要了解更多關於編碼和網站開發的人。

目標

  1. 啟發對STEM相關領域有興趣的學生。
  2. 能夠編寫簡單的網站/應用程式/PWA應用程式。
  3. 了解編碼的運作方式和批判性思考。

先決條件

  1. 基本控制電腦的知識(Windows/MacOS或Linux)。
  2. 對網絡技術/編碼感興趣。
  3. 基本HTML/ICT/編碼知識是一個優勢(不是必須的)。

成果

  1. 能夠在編碼IDE中執行操作。
  2. 高級程式語言的基本編碼技能。
  3. 學習服務器部署流程。
  4. 了解程序員/軟件工程師的概念。
  5. 發展批判性思維和創造力。

詳細輸出

  1. 能夠使用 VS code 編輯器進行編碼。
  2. 理解編碼的定義及程序員的職責。
  3. 能夠基本使用高階語言進行編碼 (JS / HTML / CSS)。
  4. 使用 bulma 或其他框架增強 UI / UX。
  5. 使用 Github 和 Github Desktop 進行協作和版本控制。
  6. 使用 Vercel 或 Netlify 部署 PWA。

詳細內容

語言:

  • 學習材料為英文 / 粵語
  • 教學講解為粵語

學習期:

  • 總共 7 堂課 + 3 堂項目課 (共 10 天)
  • 每週六開課，共計 7 堂課，每堂課時長 2 小時 (1 小時課程 + 45 分鐘實驗 + 15 分鐘休息)
  • 項目課時長 3 小時，共 2 堂

時間表

每週六 1600 - 1800

課程 標題 描述 日期
1 程式設計入門 為未來學習做好準備 2023年4月15日
2 HTML 入門 HTML 概念和編碼 2023年4月22日
3 CSS 和 Bulma 入門 CSS 概念和編碼 2023年4月29日
4 JavaScript 入門 JavaScript 概念和編碼 2023年5月6日
5 使用 JavaScript 與 HTML 互動 在 HTML 中使用 JavaScript 2023年5月13日
課程 標題 描述 日期
6 進階- Github、部署、規劃 學習使用 Github、部署和規劃 2023年5月20日
7 第一週專案 / 額外講座 用於教學和專案製作 2023年5月27日
8 第二週專案 用於教學和專案製作 2023年6月3日
9 第三週專案 用於教學和專案製作 2023年6月10日
10 展示 演示專案 2023年6月17日

專案講解安排

每組由2至4名學生組成，並於接下來的三週進行專案開發。開發完成後，PWA應部署至Vercel以供公眾使用。

專案講解安排

  • 組員: 自由分組，每組由2至4名學生組成
  • 時限: 三週（主要在講堂上 => 共6小時）
  • 演示: 第10週
  • 主題: 生命教育 / 珍惜生命 / 其他，請選擇其中一個主題

  1. 每人至少完成2頁內容 （2人組 => 4頁，3人組 => 6頁）

  2. PWA必須有index.html作為首頁，其他頁面則包含其餘內容。

  3. 設計網頁時，需考慮大多數使用者使用iphone、android phone和ipad。

  4. 學生應在同一個版本庫上工作，而不是每個學生都有自己的版本庫。

  1. 學生在編寫程式前應該先規劃網站的結構、主題、頁面、功能和風格。

  2. 移動響應式不是必須的，但最好具備以提高使用者體驗和使用者介面的品質。

  3. 每個小組應在 Vercel 上部署 PWA，以供公眾訪問。

  4. 小組需要確保部署的 PWA 如預期運行正常 (有效的連結、可運行的功能、沒有無效的圖片 和 href 等)。

  5. 導師/助教可以協助將應用程式/網頁部署到 Google Play 商店。

概述要學習的技能

PWA 技能

  • HTML5, CSS, Javascript

部署/管理技能

  • Github / Guthub Desktop (管理)
  • Vercel (部署)

軟實力

  • 溝通 & 團隊合作
  • 批判性思考 & 邏輯思考

評分列表

由導師和 TA 團隊評分 總分 100 分 + 10% 獎勵分數 (最高 100 分)

  1. 內容 (25%)
  2. 創意 / 設計 (25%)
  3. 團隊合作和溝通 (25%)
  4. 技術技能 (15%)
  5. 演示 - Presentations (10%)
  6. 獎勵分數 (10% 獎勵, 最高 10%)

1. 內容 (25%)

  • 優秀的想法和主題 (10% - 0%)
  • 與內容相關的有趣 / 互動性強的內容 (15% - 0%)

2. 創意 / 設計 (25%)

  • 優秀的 UI 佈局 / 創意 (10% - 0%)
  • 優秀的 UX 設計 (10% - 0%)
  • 正確使用圖片 / 視頻 / gif / 圖示 (5% - 0%)

3. 團隊合作和溝通 (25%)

  • 每人至少完成 2 頁 (5%)
  • 整個團隊完成項目 (10% - 0%)
  • 優秀的團隊氛圍 (10% - 0%)

4. 技術技能 (15%)

  • 在項目中使用 Github and Github desktop / git (5% / 0%)
  • 在項目中使用 Vercel 部署項目 (5% / 0%)
  • 在項目中使用 javascript / html / CSS (5% / 0%)

5. 演示 - Presentations (10%)

  • 所有團隊成員展示相關頁面 (5%)
  • 優秀的演示表現 (5% - 0%)

6. 獎勵 (10% 獎勵，最高 10%)

  • 在項目中使用講義未涵蓋的技術 (例如 AOC、animate.css、sweetAlert2…) (0 - 10%)
  • 在項目中採用其他框架 (0 - 10%)

分數排名

我們將為前兩名小組提供一些鼓勵獎品。

成品演示

有關更多信息，請參見 project/demo-project/README.md。

結束

OverallLecture 01