PWA應用程式工作坊介紹
PWA應用程式工作坊介紹
目錄
目標
先決條件
成果
詳細內容
時間表
目標
啟發對STEM相關領域有興趣的學生。
能夠編寫簡單的網站/應用程式/PWA應用程式。
了解編碼的運作方式和批判性思考。
先決條件
基本控制電腦的知識(Windows/MacOS或Linux)。
對網絡技術/編碼感興趣。
基本HTML/ICT/編碼知識是一個優勢(不是必須的)。
成果
能夠在編碼IDE中執行操作。
高級程式語言的基本編碼技能。
學習服務器部署流程。
了解程序員/軟件工程師的概念。
發展批判性思維和創造力。
詳細輸出
能夠使用
VS code編輯器進行編碼。理解編碼的定義及程序員的職責。
能夠基本使用高階語言進行編碼
(JS / HTML / CSS)。使用 bulma 或其他框架增強
UI / UX。使用
Github和Github Desktop進行協作和版本控制。使用
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週
主題:
生命教育/珍惜生命/其他，請選擇其中一個主題
每人至少完成2頁內容 （2人組 => 4頁，3人組 => 6頁）
PWA必須有
index.html作為首頁，其他頁面則包含其餘內容。設計網頁時，需考慮大多數使用者使用
iphone、android phone和ipad。學生應在同一個版本庫上工作，而不是每個學生都有自己的版本庫。
學生在編寫程式前應該先規劃網站的結構、主題、頁面、功能和風格。
移動響應式不是必須的，但最好具備以提高使用者體驗和使用者介面的品質。每個小組應在
Vercel上部署PWA，以供公眾訪問。小組需要確保部署的
PWA如預期運行正常 (有效的連結、可運行的功能、沒有無效的圖片和href等)。導師/助教可以協助將應用程式/網頁部署到
Google Play 商店。
概述要學習的技能
PWA 技能
HTML5,CSS,Javascript
部署/管理技能
Github/Guthub Desktop(管理)Vercel(部署)
軟實力
溝通&團隊合作批判性思考&邏輯思考
評分列表
由導師和 TA 團隊評分 總分 100 分 + 10% 獎勵分數 (最高 100 分)
內容 (25%)
創意 / 設計 (25%)
團隊合作和溝通 (25%)
技術技能 (15%)
演示 - Presentations (10%)
獎勵分數 (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。
Demo: https://workshop-materials.vercel.app/
Last updated