【GAS】自製點名系統 - 毛哥EM資訊密技
文章推薦指數： 80 %
使用Google sheet 試算表表單串接api。 主選單
21 新增學生
22
介紹、使用說明與製作教學.
【GAS】自製點名系統
Oct7,2021
·10minread ·自製
HTML
CSS
JavaScript
Github
GAS
·
分享到:
大眼蛙教練的課程是以堂數做計算，也就是來一次算一次，而不是一段時間。
因此每次學生上課都需要簽到，最後還需要人工來統計。
因此我做了一個簡單的點名系統，讓電腦來做統計和計算的工作。
大眼蛙教練點名系統
開發者:毛哥EM(我)
類型:網站
網址:EM'sBase
功能
新增學生
輸入名稱並按新增即可。
電腦會自動在GoogleSheet建立好欄位。
教練只需要到試算表設定學生的課程數就好了。
如果沒有課了會用紅色表示，而未設定會被判斷為沒有課程。
超重要提醒
學生姓名不可以有空格，如果有空格會自動刪除
要刪除學生請刪除整列，不可留一整列空白
點名
網站會從表單取得學生名單並顯示。
只需要點擊名稱即可完成報到。
完成報到後會使用LineNotify通知完成報到的學生和報到時間到指定的群組。
提醒
為了配合不同螢幕大小，沒有限制每行出現的學生數。
盡可能多顯示一些，比較容易找到。
為避免重複點名，報到後學生會隱藏。
重新整理頁面即可顯現
下方方框會顯示自開啟網頁後已完成報到的學生。
在試算表的「紀錄」可以看到之前學生的報到紀錄。
當天的會以綠色做標記。
超重要提醒
如果要刪除記錄（如誤按到）請務必要「刪除整列」。
不可留空
查詢記錄
如果要查詢之前報到的紀錄，請到查詢頁面並輸入姓名。
教學
我們分成三個步驟:
建立試算表(GoogleSheet)
生成LineNotify仗權(若不需要Line通知可省略)
創建API(GoogleAppScript)來處理資料、發送訊息、以及更新試算表
建立一個漂亮的網站方便操作
建立試算表(GoogleSheet)
我分成兩個表格，分別叫做紀錄和統計。
為了方便辨識第一排插入標題
紀錄
編號
姓名
時間
剩餘課堂數
統計
學生
上課次數
剩餘課堂數
總課堂數
接著請你複製這個試算表的ID，也就是網址https://docs.google.com/spreadsheets/d/和/之間那一串(如1fjX-prGu0hfb65LCQkrktWa-JavvjSz7tWMmYWAb7RA)。
等一下會用到。
生成LineNotify仗權
LineNotify是個比較冷門但是非常好用的工具。
我們可以透過他來從第三方(如你的網站、或是ios捷徑)無限量的廣播訊息到指定的群組，或是單獨發給你。
我們會在報到成功後請Line用LineNotify來在群組裡廣播提醒。
請依照圖片步驟建立一個仗權，要給Line看這一串他才知道要傳送信息到哪裡。
使用LineLontify而不是Line機器人的原因是免費版的官方帳號一個月只能傳送500則訊息，但老師的學生數量大，可能會吃不消；且LineNotify設定較簡單。
建立API(GoogleAppScript)
想要讓網站編輯試算表需要透過GoogleAppScript(GAS)來完成。
我們要建立四個API，分別用來:
紀錄出缺席
獲取學生列表(以進行報到)
查詢紀錄
新增學生
到時候我們建立的網站會向這四個API發送請求來更新試算表或獲取資料
提示
google官方文件spreadsheetmethod，裡面有非常詳盡的介紹，包括可以讀取欄位、讀取資料、排序資料、插入資料等等的功能，其實某方面來說算是功能齊全的類資料庫了。
有興趣可以點開來看裡面文件。
文件裡面method一大堆，還是直接實作比較快。
出缺席紀錄
請建立一個新的專案並貼上以下內容。
記得貼上excel那段ID
小叮嚀
為避免程式碼站太多空間，可能會部分隱藏。
請記得展開或直接複製。
1functiondoGet(e){
2varparams=e.parameter;
3//可以針對你帶入的資料變化params.xxxxxxxxxxx=你帶進來的key值
4varname=params.name;
5vartime=params.time;
6varremain=params.remain;
7//將Sheet指定為"資料庫"試算表SpreadSheet=試算表，貼上excel那段參數
8varSpreadSheet=SpreadsheetApp.openById("XXXXXXXXXXXXXXXXXXX");
9//取得頁籤:"工作表1"Sheet=頁籤
10varSheet=SpreadSheet.getSheets()[0];
11//取得有資料的最後一行的"行數"(目的要在最後一行插入新資料)
12varLastRow=Sheet.getLastRow();
13//編號為行數(如要輸入編號2時裡面已經有2行了)
14varorderNum=LastRow;
15
16//開始寫入資料擋住沒填時間不給寫入資料，防止被亂撞api
17if(time!==undefined){
18//在最後一行的下一行寫入資料
19Sheet.getRange(LastRow+1,1).setValue(orderNum);
20Sheet.getRange(LastRow+1,2).setValue(name);
21Sheet.getRange(LastRow+1,3).setValue(time);
22Sheet.getRange(LastRow+1,4).setValue(remain);
23returnContentService.createTextOutput(true);
24}
25//被亂撞會回吐這段文字給前端
26returnContentService.createTextOutput('別亂撞我～:)');
27}
在這個程式當中，我們說當我們拿著資料到這個應用程式時，將我們給的姓名、時間、剩餘課堂數、以及編號寫入到試算表第一頁最後一行的下一行。
但是這樣還沒結束，會後我們還要請LineNotify幫我們廣播。
請在returnContentService.createTextOutput(true);之前插入以下程式碼。
記得填入剛才生成的仗權。
編輯完成後請按執行。
第一次執行時系統會要求你登入Google，請登入現在使用的帳號並提供編輯試算表的權限。
Google會告訴你不安全因為這是是你自己製作的應用程式，沒有經過Google審查。
直接點選進階，並繼續前往即可。
成功部署後請保存應用程式的網址，之後網站就會傳送資料到這個網站來寫入和讀取資料。
完成後可能會看到紅色警告說無法執行，因為我們直接執行了程式，沒有給資料（學生名稱）。
因此請建立一個程式碼檔案叫做debug，並貼上以下內容：
1//呼叫
2functiondebug(){
3varResult=doGet({
4parameter:{
5name:'測試先生',
6time:'2021/10/1022:46:00',
7remain:10
8}
9});
10Logger.log('Result:%s',Result);
11}
執行後你應該會看到底下顯示執行完畢，且表單多出了一列如下
編號
姓名
時間
剩餘課堂數
1
測試先生
2021/10/1022:46:00
10
小叮嚀
若發布後還有做修改，既得要再次發布且要發布為新版本。
學生列表
學生列表不需要輸入，直接讀取內容就好了。
這裡使用的輸出格式是JSON。
JSON就是ios捷徑APP裡的辭典，簡單來說就是一個對照表。
比如說你想要紀錄一個人的基本資料如下
1{
2"姓":"毛",
3"名":"宥鈞",
4"性別":"男",
5"年齡":15,
6"住址":
7{
8"路名":"大馬路",
9"city":"台中市",
10"國家":"台灣",
11"郵遞區號":"40763"
12}
13}
我們可以輕鬆的讓JavaScript讀懂它。
請以相同方式建立以下API
1functiondoGet(e){
2varid='XXXXXXXXXXXXXXXXXXX';//抓取表單
3varspreadsheet=SpreadsheetApp.openById(id);//Sheetid
4varsheet=spreadsheet.getSheets()[1];//要第幾個sheet？1就是第2個
5varrowLength=sheet.getLastRow()-1;//取行長度
6varcolumnLength=sheet.getLastColumn();//取列長度
7vardata=sheet.getRange(2,1,rowLength,columnLength).getValues();//取得的資料
8vardataExport={};
9//一個個加入json
10for(iindata){
11if(data[i][0]!=""){
12dataExport[i]={
13name:data[i][0],
14left:data[i][2],
15};
16};
17};
18//回傳JSON
19vardataExportFormat=JSON.stringify(dataExport);
20returnContentService.createTextOutput(dataExportFormat).setMimeType(ContentService.MimeType.JSON);
21}
在這段程式當中，我們一列一列的把試算表的資料塞進JSON裡，最後再回傳給我們。
查詢紀錄
這裡使用Post來傳送而不是Get。
其實都可以，只是想說換一個方式。
差別在於使用Get時資料是存在網址當中，而Post像是還有一個附件。
因為資料量很小，所以都可以使用。
1functiondoPost(e){
2varparams=e.parameter;
3//可以針對你帶入的資料變化params.xxxxxxxxxxx=你帶進來的key值
4varname=params.name;
5varSpreadSheet=SpreadsheetApp.openById('XXXXXXXXXXXXXXXXXXX');//抓取表單
6varSheet=SpreadSheet.getSheets()[0];
7varLastRow=Sheet.getLastRow();
8vardata=[];
9varlistAll=Sheet.getSheetValues(1,2,LastRow,4);
10//把符合的抓出來
11for(vari=0;i點名系統
16點名系統
18
23送出後請稍等數秒勿重複新增
24點名系統
80
已到學生
83點名系統
18紀錄查詢
19
35
36送出後請稍等數秒
37
喜歡用科技進行各種創作，如繪畫、音樂、平面設計和網頁設計 閱讀更多 精選文章 【Remove.bg】讓AI幫你一鍵去背 【網頁&捷徑】旌旗教會週報下載器 【Zoom】是個超讚綠幕!輕鬆去背到OBS 【捷徑】快速進入當節課堂的Meet（備份） 【捷徑】衛道網頁書籤 最新文章 【重點整理】APCS筆記(長更) 【Remove.bg】讓AI幫你一鍵去背 【link-to-qr】超好看QRCode生成器 【網頁&捷徑】旌旗教會週報下載器 【MultiWall】讓不同螢幕放不同桌布 【is.gd】超好用網址縮短！連Apple都在用 【Zoom】是個超讚綠幕!輕鬆去背到OBS 【捷徑】史上最快簡訊實名制 分類 捷徑分享 5 網站分享 4 軟體分享 2 API分享 1 筆記 1 製作教學 1 專欄 線上教學 2 複製貼上就能成為工程師 2 標籤 IOS捷徑 6 自製 5 GITHUB 4 JSON 3 WINDOWS 3 衛道中學 2 CSS 1 GAS 1 HTML 1 JAVASCRIPT 1 OBS 1
延伸文章資訊
- 1資訊組- 線上點名程式 - Google Sites
- 2班級管理必備表單－出缺席點名範本 - SurveyCake Blog
為了優化學生課程體驗，維持好的教學品質，SurveyCake 免費推出「出缺席點名表單範本」，供你一鍵直接套用，範本 ... 將問卷回覆匯入Google 試算表，表單應用更彈性.
- 3點名系統
tags:`小工具`,`FRC7130` {%hackmd theme-dark %} # 點名系統[toc] ## 簡介這是一個用Python + Google 試算表製作.
- 4Meet視訊會議點名
將Meet視訊會議點名結果收集在Google試算表中. 進入Meet視訊會議當中，點選"聯絡人"頁籤以檢視聯絡人。初次使用時，請允許本擴充套件的權限要求。
- 5教職員必備！用線上表單輕鬆管理繁雜的班級事務 - Cool3c
用線上表單輕鬆管理繁雜的班級事務，留言0篇於2022-06-14 11:06：點名 ... 調整檔案設定的限制，目前SurveyCake 可以接受文件、簡報、試算表、圖片、 ...
