# 民生國中志工團課程(2024)
## 課程大綱
| 周次 | 日期 | 上課內容 | 課程大綱 |
| ---- | ---------- | ------------------------------------ | -------------------------------------- |
| 1 | 2024/02/16 | 分組 / 課程介紹 | 介紹上課流程 |
| 2 | 2024/02/23 | 放假| 放假|
| 2 | 2024/03/01 | App Inventor2 安裝、基本元件介紹| 介紹按鈕、標籤...常用元件|
| 3 | 2024/03/08 | App Inventor2 多媒體元件應用| 利用語音辨識製作小型應用|
| 4 | 2024/03/15 | App Inventor2 感測器元件應用(一)| 利用計步器元件製作小型應用|
| 5 | 2024/03/22 | App Inventor2 感測器元件應用(二)| 利用位置感測器元件製作小型應用|
| 6 | 2024/03/29 | App Inventor2 TinyDB微型資料庫應用| 介紹資料庫、利用TinyDB製作小型應用|
| 6 | 2024/04/05 | 放假|放假|
| 7 | 2024/04/12 | App Inventor2 結合以上幾周課程進行應用| 複習教過的內容，並結合應用|
| 8 | 2024/04/19 | App Inventor2 結合網頁應用(一)| 介紹網頁相關概念|
| 9 | 2024/04/26 | App Inventor2 結合網頁應用(二) | 介紹Http方法|
| 10 | 2024/05/03 | 電影時間! | 觀看與資訊有關的電影 |
| 11 | 2024/05/10 | App Inventor2 結合網頁應用(三) | 將抓取的資料進行處理|
| 14 | 2024/05/17 | App Inventor2 結合人工智慧應用(一) | 介紹人工智慧、最終成果 |
| 15 | 2024/05/24 | App Inventor2 結合人工智慧應用(二) | 介紹Teachable machine |
| 16 | 2024/05/31 | App Inventor2 結合人工智慧應用(三) | 實作辨識APP(蒐集資料) |
| 17 | 2024/06/07 | App Inventor2 結合人工智慧應用(四)| 實作辨識APP、戶外成果展示|
| 18 | 2024/06/14 | 電影時間! | 觀看與資訊有關的電影 |
| 19 | 2024/06/21 | 期末總結! | 總複習 |

## 第一堂 - 課程介紹
### 課程安排
### 又是自我介紹時間!!!
每位學生都需要進行自我介紹，可以按照下面的模式去修改!
**小問題** :
1.寒假做了什麼?
2.大家手機用的品牌是什麼呢?
> **自我介紹範例** :*大家好!我是二年三班的石小綸，我會選擇這個社團的原因是因為我平常就很喜歡電腦的知識，我也想學習更多的相關知識。寒假在瘋狂打程式，手機用的是iphone，請大家多多指教!*
### 複習小測驗(Kahoot)!!!
看看大家對上學期的課程內容還記得多少喔，回答錯誤並不會影響成績，但請認真作答!!!
### 分組!!!
這學期我們以兩個人為一組，請找好你這學期的好夥伴!!!
**每一組都要有一台Android手機喔**
### 介紹App Inventor 2
[App Inventor 2影片介紹 (By Roger Pai)](https://www.youtube.com/watch?v=FmCZhe0u1NA)

## 第二堂 - AI2安裝、基本元件介紹
### AI2安裝步驟!
#### 步驟一
進入[AI2網頁](https://appinventor.mit.edu/explore/get-started)後請先點選**online tool**並且使用Google帳號登入
https://appinventor.mit.edu/explore/ai2/windows.html
#### 步驟二
登入後點擊**新增專案**，**打好專案名稱**，點擊確定，啟動!
#### 步驟三
連上老師的Wi-Fi，手機到Google Play商店下載**MIT AI2 Companion**
#### 步驟四(可省略)
進入[模擬器下載網頁](https://appinventor.mit.edu/explore/ai2/windows.html)點擊下方**Download the installer**
### AI2介面介紹!
左邊的區塊可以找到各種你想要用的物件
右邊的區塊可以設定物件的參數(像是長寬、大小、顏色)
中間的區塊是模擬手機畫面

右上角可以切換畫面編排或是程式設計的畫面!!!
### AI2基本元件介紹!
#### 第一支程式 - 哈囉你好你好
> 點擊「**點我拜託**」後，標籤1會變成「**哈囉你好你好!**」
##### 畫面編排
##### 程式設計

#### 第二支程式 - 點擊器
> 1.每點擊「**點我拜託**」一次，標籤1的數字就會+1
> 2.每點擊「**重置**」一次，標籤1的數字就會歸零
> 3.當標籤1的數字為30時，會叫你不要再點了!
##### 使用者操作介面
##### 畫面編排
##### 程式設計

#### 第三支程式 - 密碼顯示器
> 輸入密碼後，點擊「**點我啦拜託啦**」會把標籤1改成你輸入的密碼
##### 使用者操作介面
##### 畫面編排
##### 程式設計

#### 程式DEBUG題 - 程式碼的奇幻救贖：拯救小倫夜晚的鍵盤狂想曲
##### 問題:
當夜色籠罩小倫的工作室，他沉浸在一個程式碼的海洋中，這是他心血結晶的傑作。然而，宿命似乎捉弄他，他家的貓咪「嚕嚕」在這關鍵時刻，像是踩踏舞者一般，輕盈而又毫不留情地在他的鍵盤上舞動。這不是一場美妙的表演，而是程式碼的毀滅性改編。

嚕嚕的掌蹤如同風暴過境，每一行程式碼都被貓爪親吻過，留下了令人匪夷所思的變化。變數變成了貓咪的名字，迴圈變成了貓咪的奇怪動作序列，整個程式碼就像是經歷了一場貓式狂歡派對。

現在，小倫面臨前所未有的挑戰，他的程式碼如同搞笑的謎語，需要一位駭客般的天馬行空的解碼者。你是否能肩負起這個艱鉅任務？能否挽救這場程式碼的浩劫，讓它重回正軌，讓小倫在這夜晚重獲寧靜？你的魔法按鍵是否能消弭嚕嚕的痕跡，讓程式碼重新閃耀光芒？這是一場挑戰，也是一場對程式碼的奇幻救贖之旅。

**下面這張圖是被嚕嚕亂搞的程式碼:**

## 第三堂 - AI2多媒體元件應用
### 語音辨識
>利用這個元件可以讓使用者輸入語音，該元件會把語音轉成文字
#### 程式範例
>點擊「點我辨識」後開始讓使用者輸入語音，辨識完成後會把文字放在「結果」後面。
##### 畫面編排
##### 程式設計

### 清單使用方法
>清單有點像是置物櫃，每個置物櫃都有編號，一個置物櫃只能放一件物品
#### 程式範例
>點擊「取得」後，會隨機取得「涵」、「顏琦」、「黃翔」
##### 畫面編排
##### 程式設計

## 第四堂 - 電影時間!

## 第五堂 - 字典

### 字典使用方法
>字典有點像是身分證的概念，一個人(鍵)就只會有一個身分證號碼(值)
#### 程式範例
>點擊「取得」後，會隨機取得「涵」、「顏琦」、「黃翔」的英文名字
##### 畫面編排
##### 程式設計

## 第六堂 - 英語測驗小程式

### 程式挑戰 - 英語測驗小程式!
>**「英語測驗小程式」** 的目的是讓使用者可以利用此程式進行英語單字的測驗，程式會以中文出題，使用者必須要回答相應的英文單字。

#### 介面(不必與下方一樣)

#### 功能需求
1. 該程式必須要可以**隨機**出題。
2. 當使用者答題正確後，該程式會自動出現下一題的題目；若使用者回答錯誤，則會出現彈出視窗顯示 **「你答錯了」** ，並且留在同一題上。
3. 使用者可以使用**語音辨識**或是**直接輸入答案**。

#### 程式哪裡需要改進?
> 想想看我們做的英語測驗程式，有用嗎?好用嗎?

##### 學生回答:
1. 介面太醜
2. 只能自己新增英文單字
3. 英文不好的不能用(?
4. 語音辨識功能的準確度
5.

##### 解決方法:
1. 介面太醜 => 適當安排每個元件的位置，並且加上適當的圖片
2. 只能自己新增英文單字 =>
3. 英文不好的不能用? =>
4. 語音辨識功能的準確度 =>
5.

### 微型資料庫(TinyDB)
> 想想看程式在關掉後程式執行的資料還會在嗎?為什麼?

#### 微型資料庫應用範例
> 此程式可以點擊 **「新增一個單字」** 讓使用者新增一組單字到資料庫內，點擊 **「取得資料庫內容」** 取得所有資料庫內的單字組，最後可以點擊 **「刪除全部資料」** 來把資料庫內的所有單字組刪掉。

#### 畫面編排

#### 程式設計

## 第七堂 - AI2抓取網頁資料_資料處理

> 本節課會介紹開放資料，並且會對資料進行簡單的處理

### DEMO
> 下面的程式是透過抓取網頁上的英文單字資料所做成的小程式。

[英文單字資料來源](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84%E8%A9%A6%E7%85%89-%E5%8B%87%E8%80%85%E7%9A%84-100-%E9%81%93-swift-ios-app-%E8%AC%8E%E9%A1%8C/%E5%88%A9%E7%94%A8%E5%9C%8B%E4%B8%AD1200-%E5%92%8C%E9%AB%98%E4%B8%AD7000-%E7%9A%84%E8%8B%B1%E6%96%87%E5%96%AE%E5%AD%97-json-%E9%96%8B%E7%99%BC%E5%96%AE%E5%AD%97-app-bdeb3c87c087)

### 資料取得的來源

#### 開放資料
> 開放資料可以被任何人使用，並且可以將資料重製、重新散佈。
>
我國政府單位有提供一般民眾很多種類的開放資料，下面的網站是開放數據平台的整理
[Data Station-開放數據](https://www.datastation.org.tw/opendata)

> 想一想，我們資料取得的來源還有哪些?

### 資料的處理
> 以嘉義市公有路邊停車格位資訊的開放資料為例，利用Excel來處理資料後做成圖表。

[嘉義市公有路邊停車格位資訊](https://data.chiayi.gov.tw/opendata/dataset/metadata/%E5%98%89%E7%BE%A9%E5%B8%82%E5%85%AC%E6%9C%89%E8%B7%AF%E9%82%8A%E5%81%9C%E8%BB%8A%E6%A0%BC%E8%B3%87%E8%A8%8A?oid=0264208f-88a0-42ab-8c09-771c4ca63cb3)

#### Excel打開檔案後遇到亂碼
[下載資料集的CSV檔，打開來為亂碼，怎麼辦?](https://data.gov.tw/faqs/18765)

#### 題目 - 請分析嘉義市分別是哪條路的機車格、汽車格停車格最多?
> 資料集請參考上面的「嘉義市公有路邊停車格位資訊」

#### 步驟一 - 把不必要的資料刪除
> 我們只要保留路名、機車格，可以把其他的資料刪除

原資料

刪除後的資料，**最下方的合計資料也要刪除**。

#### 步驟二 - 將資料依照機車格數排序

#### 步驟三 - 繪製長條圖

#### 步驟五 - 長條圖
> 恭喜你獲得一張超棒的長條圖!
>

#### 請把汽車的長條圖一起做出來

### 題目 - 分析民生國中的學生人數
> 請用[歷年嘉義市國中小學生數統計](https://data.chiayi.gov.tw/opendata/dataset/metadata/%E6%AD%B7%E5%B9%B4%E5%98%89%E7%BE%A9%E5%B8%82%E5%9C%8B%E4%B8%AD%E5%B0%8F%E5%AD%B8%E7%94%9F%E6%95%B8%E7%B5%B1%E8%A8%88?oid=f6b1b1fa-53e1-4eec-a9ab-828844761814)分析民生國中101~111學年度的學生人數變化(折線圖)，並找出民生國中哪一年學生人數最多?

## 第八堂 - 電影時間!

## 第九堂 - 地震開放資料
>近期頻繁地震，關於地震的資料我們在網路上可以取得多少呢?

### 地震速報APP(iOS)
>此程式是用於在地震前的預警，開發者是一位高中的學生，目前(2024/04/26)在App Store的免費App排行榜為第一名

[臺灣地震速報](https://apps.apple.com/tw/app/%E8%87%BA%E7%81%A3%E5%9C%B0%E9%9C%87%E9%80%9F%E5%A0%B1/id6450436314)
[比國家警報好用! 18歲高三生研發「地震速報APP」｜TVBS新聞](https://www.youtube.com/watch?v=oTeqAfG1lZ0&ab_channel=TVBSNEWS)

#### 看完新聞後想想看
> 這個App使用的資料來源與哪裡？

### 地震報告怎麼看
> 當地震發生後沒過多久,中央氣象署的網站就會發布關於該地震的報告

[最近地震｜交通部中央氣象署](https://www.cwa.gov.tw/V8/C/E/index.html)

#### 地震規模？震度？
> 2024/04/03發生了規模7.2級的大地震?????

[【地震小教室】震央、震源在哪裡？芮氏規模、震度是什麼？地震級數新制！](https://www.housefeel.com.tw/article/%E5%9C%B0%E9%9C%87-%E9%9C%87%E5%BA%A6-%E9%9C%87%E5%A4%AE-%E8%8A%AE%E6%B0%8F%E8%A6%8F%E6%A8%A1/)

### 取得地震的相關資料管道

[Opendata API 線上說明文件 - 氣象資料開放平臺](https://opendata.cwa.gov.tw/dist/opendata-swagger.html)
[P-Alert - 中央研究院](https://palert.earth.sinica.edu.tw/)

### 實際使用資料
請使用**P-Alert所提供的地震測站資料，找出2024/04/03 07:58發生規模7.2大地震時，水上國中 、興嘉國小的地震測站所測出的PGA、PGV值分別為多少，且分別對應的震度為何？**
[我國新地震震度分級制度](https://www.ncdr.nat.gov.tw/CEOCworkshop/cwb_2.pdf)

## 第十堂 - 英文測驗程式(I)

### 抓資料的原理
> 在網路上我們是怎麼從對方取得資料的呢?
#### IP? DNS?
> 大家都聽過IP，那他到底是什麼東西?
> 記"142.251.43.3"還是記"google.com"比較容易?

DNS 就像是一個通訊簿，記錄著網域名稱對應的IP地址

#### GET? POST?
> GET、POST都是HTTP方法，具體是在做什麼呢

GET 主要用來取得資料
POST 則是用來提交資料

### AI2 結合抓網頁資料

#### 抓開放資料
> 先以空氣品質開放資料嘗試如何抓取資料。

請先至[空氣品質開放資料](https://data.gov.tw/datasets/search?p=1&size=10&s=_score_desc&rft=%E7%A9%BA%E6%B0%A3%E5%93%81%E8%B3%AA)找到自己喜歡的資料集，選擇後點擊**JSON旁邊的檢視資料**，並複製**資料下載網址**

下方的**網址請填入剛剛複製的網址**

### 英文字典小程式!!!
#### 取得原始資料

##### 步驟一
> 設定一個空字串，叫做**原始資料檔**(原始資料檔抓下來後會是一個很長的字串)

##### 步驟二
> 點選按鈕後，將網路1網址設為　https://raw.githubusercontent.com/Were789564/for_misvu_resource/main/csvjson_1.json
> 並向其發送GET請求

##### 步驟三
> 當網路1取得文字後(取得資料)，將資料存進變數**原始資料檔案**中

#### 整理資料

##### 步驟一
> 設定清單，叫做**新資料**，用來儲存整理過一次的原始資料檔

##### 步驟二
> 使用AI2**網路**物件中內建的解碼器，將原始資料檔整理，再存到**新資料**中

##### 步驟三
> 分別建立儲存英文、中文、詞性的清單

##### 步驟四
> 對於任意清單項目中的資料(也就是對**新資料**這個清單中的每個資料)，進行切割(整理)。整理得過程如下:

1. 好幾個不同的{英文:xxx , 中文:xxx, 詞性:xxx} (也就是'新資料')
2. {英文:apple , 中文:蘋果, 詞性:n}
3. {英文:apple}
4. {apple}


##### 步驟五
> 重複兩次以上步驟，將英文與詞性也整理好

#### 抽取題目

##### 步驟一
> 設定一個變數，叫做random(亂數)

##### 步驟二
> 設定random為1~100(視題目數量而訂)之間的亂數

##### 步驟三
> 分別將中文、英文、詞性用標籤顯示出來

## 第十一堂 - 英文測驗程式(II)
> 完成可以利用網路抓取英語字典資料的測驗程式

### 複習上週
> 先把上周的概念釐清清楚

我們的目標是要先做成三個清單(中文、英文、詞性)，這樣可以直接藉由索引值來對照，如下:

中文清單 = ["老師","學生","鍵盤"...]
英文清單 = ["teacher,"student","keyboard"...]
詞性清單 = ["n","n","n"...]

透過上面的三個清單，我們可以對於不同清單存取使用相同索引值來找到資料。

### 完成英文測驗程式
>**[今日上課的專案檔案](http://192.168.0.100/)，請先匯入至自己的AI2裡面**
匯入完後把今日的英文測驗程式完成

## 第十二堂 - App Inventor2 結合AI應用(I) - 介紹機器學習
> 今天要先來簡單介紹AI，並且嘗試使用生成式AI來生成出圖片

我們最後的目標是使用AI2結合Teachable Machine做出可以辨識物品的APP
參考影片 : [透過Teachable Machine與app inventor 2製作辨識app](https://www.youtube.com/watch?v=bY71HR8gK9s)

[圖片來源](https://www.logicmonitor.com/blog/troubleshoot-faster-with-anomaly-visualization)

### 機器學習
> 猜猜看，機器學習是什麼?


#### 機器學習是怎麼學習的?
> 想想看，我們最開始是怎麼知道下面這張圖哪些是兔子，哪些是青蛙呢?


**<span style="color:white;">透過資料去訓練機器並讓它可以給予我們想要的回饋</span>**

#### 監督式學習(Supervised Learning)
> 監督式學習是機器學習的一種。它就像是我們最開始學習一樣，如果要分別青蛙、兔子，需要有人先跟我們說什麼是青蛙和兔子分別是什麼

我們先給予機器青蛙、兔子的圖片並告訴它哪個是青蛙哪個是兔子，藉由大量的資料訓練後，我們希望我們最終隨便給一張青蛙或兔子的圖，它都可以識別出來。
[「AI標註」找工作職缺｜2024年5月－104人力銀行](https://www.104.com.tw/jobs/search/?keyword=AI%E6%A8%99%E8%A8%BB)

#### 非監督式學習(Un-Supervised Learning)
> 非監督式學習也是機器學習的一種。它像是我們只給機器青蛙、兔子的圖片，但**沒有告訴它哪個是青蛙哪個是兔子**，就讓它自己根據圖片之間的差異來進行分群


### 生成式人工智慧
> 判別式人工智慧就像是我們剛剛介紹的，而大家常用的ChatGPT、Copilot...就是生成式人工智慧


#### ChatGPT?
> [看到Open AI發布的新GPT-4o可即時視訊對話後Neuro和Vedal的感想【Neuro-sama】【Vtuber 中文精華】](https://www.youtube.com/watch?v=7CxuNoOLtX0)

為什麼每次ChatGPT回答的不一樣呢?
> 參考影片 : [【生成式AI】ChatGPT 原理剖析 (1/3) — 對 ChatGPT 的常見誤解](https://www.youtube.com/watch?v=yiY4nPOzJEg&t=743s)

#### Coze
> 像是有特定功能的GPT，可以省略很多與GPT對話的前置過程
> [Home - Coze](https://www.coze.com/home)


#### AI工具應用
> 請運用剛剛所介紹的AI工具來幫你的組員或老師做出他的畫像順便介紹你的組員。
> 生圖: https://magicstudio.com/zh/ai-art-generator/
> 生文字: https://chatgpt.com/?oai-dm=1
> 並貼到World上，上傳到 http://192.168.0.100/
> 檔名範例: 20240517_石小綸

範例:

## 第十三堂 - App Inventor2 結合AI應用(II) - Teachable Machine
> **今日目標:**
> 1. 利用Teachable Machine 建立辨識模型
> 2. 將模型運用在AI2上
> 參考影片 : [透過Teachable Machine與app inventor 2製作辨識app](https://www.youtube.com/watch?v=bY71HR8gK9s)

### 複習上週內容
> 還記得監督式、非監督式學習嗎?

### Teachable Machine 訓練模型
> [Teachable Machine](https://teachablemachine.withgoogle.com/)是Google所開發的機器學習平台，可以讓使用者在線上訓練自己的模型

#### 選擇要辨識的物品
> 請先選擇要拍攝什麼物品，並且把照片上傳到電腦上
#### 上傳到Teachable Machine
> 先建立分類，再上傳圖片


#### 開始訓練
> 點擊上面的「Train Model」
> 下方有「Advanced」可以模型調整訓練的參數
##### Epochs
所有上傳的照片要被訓練幾次，舉例:我上傳了8+6=14張照片，Epochs=50，所以我這14張照片會被拿來訓練50次
##### Batch Size
每次要處理的照片有幾張，舉例:我上傳了14張照片，Batch Size=7，所以我一次處理只拿7張照片去訓練，但要完成一次Epcoh需要做14/7=2兩次處理
##### Learing Rate?
請參考李宏毅老師的影片:
[【機器學習2021】預測本頻道觀看人數 (上) - 機器學習基本概念簡介](https://www.youtube.com/watch?v=Ye018rCVvOo&list=PLJV_el3uVTsMhtt7_Y6sgTHGHp1Vb2P2J)
##### Overfitting(過擬和)? Underfitting(欠擬和)?
Overfitting像是把作業的答案都背起來，但沒有學到精隨，考試都不會
Underfitting像是連給你練習的作業都做不好

#### 訓練完成
> 點擊「Export Model」，並點擊「Upload my model」，之後複製這個網址


### 使用AI2測試模型

#### 下載並匯入AI2擴充套件(可跳過，要用自己新建的專案再載)
> 請至下方連結下載
> [TMIC: App Inventor Extension for the Deployment of Image Classification Models Exported from Teachable Machine](https://community.appinventor.mit.edu/t/tmic-app-inventor-extension-for-the-deployment-of-image-classification-models-exported-from-teachable-machine/64411)

選擇剛剛下載的.aix檔匯入到AI2

#### 匯入今天的上課專案檔
> 請到 http://192.168.0.100/ 下載今天的專案檔，並匯入到自己的AI2

把剛剛Teachable Machine的模型網址貼上到下方的UrlModel

#### 開始測試模型
> 試試看自己的模型效果表現如何?
>
## 第十四堂 - 出去玩

### 複習!!
> 上上禮拜交的Teachable Machine還記得嗎?

### 參考前天參訪的"請多植教"
> 經過前天參訪，看到學姊的專題，啟發了我們想帶動國中生出去觀察植物!!!

### 現在我們來出去辨識植物，來個分組競賽
> 在限時間內（１節課）看誰辨識出最多物品，最高的一組獲得獎品

### 主題(請自行設定)!!!!
>例如:植物、花、操場、球框、3C設備、手機、螢幕、滑鼠、鞋子、樓梯、桌子、椅子、飲水機、水龍頭、欄杆、飛盤、雲朵、土、餅乾...等
**p.s 請勿亂拍，經證實亂拍，後果自負**
**p.s 亂跑被抓到，主任會處理!**

### 下雨!!! PLANＢ