4 มม.ย. 2020
พมมพ์คพ รรั้งทที่ 1 : 4 ม.ม ย. 2020
Google Apps Script
Deploy as web app
โดย
วสสันต์ต คุคณดลดิ กเศวต
[email protected]
Line ID : wasankds
08-1459-8343
www.poeclub.org
สารบับญ
คคานคา.................................................................................. 7
บททที่ 1 บทนาค ........................................................................9
บทท่ีท 2 Deploy as web app...................................................13
2.1. สรร้างโปรเจจ็ค Google Apps Script แบบ Web App ............................................14
2.2. การใช้รงานโปรเจจ็คแบบ Web App (Deploy as web app) ..................................15
2.3. Web Apps ดร้วย Google Apps Script ...............................................................17
บททที่ 3 doGet() และ doPost()................................................19
3.1. doGet() และ doPost() ........................................................................................ 20
3.1.ก.) Web App คืคนคา่ค เปนป็ Text (21)
3.1.ข.) Web App คนืค ค่าค เปป็น JSON (21)
3.1.ค.) Web App คนืค ค่าค เปปน็ HTML (22)
3.1.ง.) Web App คืคนคา่ค เปป็น HTML โดยใชเ้ช ทมเพลต (23)
บททที่ 4 สาธติธ กระบวนการ ทคางานของ Web App..........................25
4.1. สาธมตกระบวนการททางานของ Web App ...............................................................26
4.1.ก.) สร้าช งโปรเจ็คจ (26)
4.1.ข.) โคดช้ ในไฟลล์ .gs (26)
4.1.ค.) โคด้ช ในไฟลล์ .html (27)
4.1.ง.) ใช้งช านแบบ Web App (Deploy as web app) (27)
4.2. ขรนั้ ตอนการททางาน .................................................................................................. 28
บททีท่ 5 Scriptlets.................................................................31
5.1. Scriptlets .............................................................................................................. 32
5.2. Standard scriptlet .............................................................................................. 32
5.3. Printing scriptlet ................................................................................................ 33
5.4. Force-printing scriptlet ..................................................................................... 34
5.5. โหลดขอร้ มมูลจาก Google Sheets มาไวร้ทหท่ี น้ราเว็จบ ..................................................35
บททที่ 6 เซอรว์ร ิธส HTML..........................................................37
6.1. เซอร์พวสม HTML ....................................................................................................... 38
6.2. createHtmlOutput() .......................................................................................... 38
6.2.ก.) createHtmlOutput() (38)
6.2.ข.) append() และ getContent() (39)
6.3. createHtmlOutputFromFile() .......................................................................... 40
6.4. คลาส HtmlTemplate .......................................................................................... 41
6.5. createTemplate() และ evaluate() ...................................................................41
6.6. createTemplateFromFile() .............................................................................. 42
6.6.ก.) ตตวั อยค่าง : แนบตวตั แปรไปกตบั วตัตถถุ HtmlTemplate (42)
6.6.ข.) ตตัวอย่าค ง : การททา Mail merge email (44)
บททท่ี 7 รนบั สครปิธ ตร์ฝงฝ่ั Server-side............................................47
7.1. คลาส google.script.run ...................................................................................... 48
7.2. withSuccessHandler() ....................................................................................... 48
7.3. withFailureHandler() ......................................................................................... 49
7.4. withUserObject() ................................................................................................ 50
บททที่ 8 ใช้ชงาน Web App ใน iFrame.........................................53
8.1. จบร ใส่ส iframe ......................................................................................................... 54
8.1.ก.) ฝงัฝ iframe ที่ทหนช้าเวบ็จ (54)
8.1.ข.) แกชไ้ ขโคชด้ ในไฟลล์ .gs ของโปรเจค็จ (54)
8.1.ค.) แกชไ้ ขโค้ดช ในไฟลล์ .html ของโปรเจ็จค (56)
8.1.ง.) setXFrameOptionsMode() (57)
8.1.จ.) setSandboxMode(mode) (57)
8.2. จบร ลงม คข์พ องโปรเจจ็คโดยใช้รสครมปต์พ ............................................................................ 58
บทท่ีท 9 Web App แบบหลายหนาช้ .............................................61
9.1. เปลยท่ี นหนรา้ โดยเขยท นโค้รดเพีพทอ่ แทรกโครด้ HTML .......................................................62
9.1.ก.) โค้ดช ของโปรเจ็จค (62)
9.1.ข.) ไฟลล์ทีท่เรยท กใชช้ Web App ไปใชช้แบบ iFrame (64)
9.1.ค.) ผล (64)
9.2. เปลยี่ท นหน้ราเวบจ็ โดยสง่ส พารามมเตอรเ์พ พีอ่พท เปล่ทียนหนา้ร ..................................................65
9.2.ก.) โค้ดช ทัทงต้ หมดของโปรเจค็จ Apps Script (65)
9.2.ข.) ไฟลท์ล ที่เรยท กใช้ช Web App ไปใชชแ้ บบ iFrame (67)
9.2.ค.) ผล (67)
9.2.ง.) ขอช้ จทากตดั (67)
บททท่ี 10 URLFetchApp........................................................71
10.1. URLFetchApp ................................................................................................... 72
10.2. เมถอดทีท่สทาคญร ...................................................................................................... 72
10.2.ก.) fetch() (72)
10.2.ข.) getContent() (73)
10.2.ค.) getContentText() (73)
10.2.ง.) getResponseCode() (75)
10.3. การใช้งร าน Fixer API ........................................................................................... 76
10.3.ก.) ใชช้บริกร าร Fixer (76)
10.3.ข.) Apps Script พฒตั นาการท่ที 1 (78)
10.3.ค.) Apps Script พฒัต นาการทที่ 2 (78)
10.3.ง.) ขยายความบรรทตัด obj = obj[keyPathArr[i]] (79)
10.3.จ.) Apps Script พตฒั นาการทีท่ 3 (80)
10.4. การใชร้งาน convertAPI ....................................................................................... 81
บทท่ีท 11 JSON....................................................................85
11.1. JSON คอพ อะไร ...................................................................................................... 86
11.2. JSON Data Types ............................................................................................. 87
11.3. ตวร อยส่างการเขทยน JSON ....................................................................................... 88
11.3.ก.) ตวัต อยาค่ งทีท่ 1 (88)
11.3.ข.) ตวตั อยคา่ งทที่ 2 (88)
11.3.ค.) ตวัต อยา่ค งทท่ี 2 - ตค่อ (89)
11.4. JSON และ Google Apps Script .......................................................................90
11.4.ก.) สง่ค HTTP Request (90)
11.4.ข.) HTTP Post Request (91)
11.4.ค.) HTTP Get request (93)
11.4.ง.) ส่งค JSON ตริดไปกบัต HTTP Request (94)
11.4.จ.) บตันททกึ JSON ลง Google Sheets (94)
11.4.ฉ.) แปลงข้ชอมมูลจากตารางใน Google Sheets เปน็ป JSON (96)
11.5. เซอร์วพ สม Content ................................................................................................ 97
11.5.ก.) createTextOutput() (97)
คาค นคา
หนงตั สคอื เลค่มน้ัท เปน็ป หนทึง่ี ในชดุถ การเขยท นโปรแกรม Google Apps Script โดยในเลม่ค นทัอ้ ธิรบายการสรา้ช ง Web
Apps
ผมเู้ช ขยท น เขทยนหนตงั สอืค เล่มค น้ัท จุดถ ประสงคด์ล ัง้ทต เดมิร กจ็คอคื เก็จบไว้รอส่านเอง
เมที่คือผูม้ชเขทยนศึทกษาเรืคี่ทองอะไร กจจ็ ะไปเรทยนรมชจู้ ากสทอคืี่ ออนไลนใ์ล นอิรนเตอร์ลเนจ็ต ทั้ทตงคอรล์สออนไลน์ล วริดทโอ หรืคอ เอกสาร
ทัง้ทต ในแบบฟรทและเสยท เงิรน
ในยคถุ ปัฝจจุบถ ตันเราตช้องเรทยนรูชม้อะไรใหช้เรวจ็ โดยเฉพาะเร่ือทีค งของ IT ผ้เมูช ขทยนจทึงตัท้งต ใจจะดวูม ริดโท อ หรคือแปลเอกสารเพทยง
รอบเดทยว จึทงดมูไป อ่คานไป พริมพล์สรุถปไป เวลาจทาอะไรไมค่ได้ช มาดมูจากทที่พิรมพ์ลสรถุปไวช้ง่คายกวค่าการไปยช้อนดมูจากวริดทโอ
นอกจากน้ัท กยจ็ ัตงนาท มาทบทวนไดช้งาค่ ย ในอนาคตสามารถเพี่ทิมร เตมริ เสริมร แตค่งเนทอ้ืคั หาไดเช้ รืคทอ่ี ยๆดว้ช ย
หนงตั สคือเลม่ค น้ทั ความตัต้งท ใจดตงทั้ เดิมร ของผชูม้เขทยน ก็จคือค ตรง้ั ใจเก็จบไวอ้ร าส่ นเองคนเดยท ว เหตุเต พราะนทาเน้รัอพ หามาจาก
หลายแหลส่ง แม้ผร ู้เมร ขยท นจะเขทยนเพ่มีทมไปด้รวยกจ็ตาม
อยา่ค งไรกดจ็ ท อตถุ สา่ค ห์พล ิรมพล์ไวช้เปน็ป หนงัต สอคื แลช้ว จะเก็บจ ไวอช้ คา่ นคนเดทยวกร็จ ้มชูสึกท เสยท ดาย ผมเู้ช ขทยนจงทึ นาท มาแบค่งปฝัน
เนทอ่ีพ งด้รวย ผ้เรมู ขยท นใหร้ความสาท คญร กบร ประเด็นจ ดร้านลขม สมทธิ์มธม าก ฉะนนั้ร จจึงขอแจรง้ ไว้ร ณ ทนีท่ ร้ทั ตั้รงแตส่ตนร้
กจ็คอพ
1. เน้ืคัอท หาในหนตังสอคื ผมชู้เขทยนรวบรวมมาจากแหล่คงต่าค งๆในอิรนเตอรล์เนจ็ต ซทง่ีึ จะพยายามใหช้มากทที่สดุถ ททีจ่ ะบอกลริงค์ล
หรอืค แหลง่ค ททม่ี าในแตค่ละหตวั ขอ้ช เพราะหนตังสอคื เล่มค นทั้ถมูกเขยท นไวชน้ านแลว้ช บางเรืคอีท่ งลมืค กกอ๊ ปปปี้ลรงิ คมล์ าแปะไวช้
2. ผูช้เม ขทยนรวบรวมเนทืคัอ้ หามาจาากหลายแหลง่ค และเพีทิ่รมเตริมลงไปด้ชวย
3. หนัตงสือค เลคม่ นัแท้ จกฟรท ผมเชู้ ขยท นไมค่มรท ายไดจ้ช ากหนัตงสอืค เลมค่ นั้ท
หนรงสพอเลสม่ นทย้รั งร ไม่สจบเสยท ททเดยท ว หากผรู้เม ขยท นวาส่ ง จะมาเขยท นเพ่มทีมเตมมเรี่ทพอยๆ ใหดร้ มูเวอร์พชี่รนท ตามวนร ทีท่ทที่ปล่สอย
หนงร สพอ
( ผชู้มเขทยนไมมค่ ทเวลาตรวจทาน หากมทขอช้ ผริดพลาดประการใด ขออภัตยไวช้ ณ ทน่ีท ัดท้ ว้ช ย )
วสนตั ตล์ คถุณดรลิ กเศวต
[email protected]
081-459-8343
Line ID : wasankds
บทท่ที 1
บทนคา
จรงิร ๆแล้วช เน้คอทัื ในสค่วนนทั้ ควรจะอยูม่คในคทานทา แตค่เพราะผู้มชเขทยนไมอค่ ยากใหชท้ ุกถ ทค่านข้ชามไป จงึท ยกมาไวใ้ช นบททีท่
1 ทงัท้ต นท้ั เพราะอยากจะใหช้เขาช้ ใจเครคอทื่ี งมือค ในการททา Web Apps กค่อน กอค่ นทีท่จะลุยถ เขช้าไปอค่านเนอทื้ัค หาเกยที่ วกบตั
เครทืคอี่ งมอืค ตคา่ งๆในการพัฒต นา Web Apps
Web App เปนป็ เว็จบไซตล์ทีท่มทการใช้งช านเสมอืค นเปน็ป โปรแกรมคอมพิวร เตอรต์ล วัต หนทีึ่ง เพทยงแตใค่ ชชง้ านออนไลนล์
มกท ารปฏิรสัมต พันต ธก์ล ตับผ้มชใู ช้ชงาน มกท ารบนตั ทกึท และโหลดขอ้ช มูมล เป็นป ต้นช
การทาท Web App ตชอ้ งมทความรมูทช้ ีท่กวาช้ งและลึทกในบางสวค่ น เพราะต้ชองใช้ชเครทค่ีืองมืคอหลายตตัว ส่ควนจะลทึกแคค่
ไหนกจข็ น้ทึั อยกม่คู ตับว่าค เราจะทาท Web App เพีือ่ทค ใชง้ช านอะไร ฉะนั้ตทนถชา้ ทาท คนเดยท วกจจ็ ะหนัตกหน่คอย
ในอดตท หลายปปกค่อน ผเู้มช ขยท นเรยท นทาท Web App โดยใชชเ้ ครีคื่ทองมคือดงัต น้ัท PHP, Javascript, HTML, CSS และ
MySQL ซที่ึงก็จเรทยนร้มูชมาอยค่างละนริดละหน่คอย เคร่ืทคีองมืคอต่คางๆในตอนนท้ัก็จเปล่ทียนไปจากเมีืคท่อก่คอนมาก Javascript
สมตัยกอ่ค นกตบั สมตยั นทตั้ า่ค งกนัต มาก สมยัต น้ทั Javascript เปปน็ OOP ท่เที ก่คงมาก MySQL ก็จไปเกดิร ใหม่คเปป็น MariaDB แลชว้
เครทืี่อค งมคอื อคี่ทืนๆก็จพฒัต นาไปไกลไม่แค พกช้ ตัน
นทยี่ ัตงไม่รค วมถทงึ โปรแกรมอคนทื่ี ๆ และ ความสามารถอคนื่ที ๆ ทท่ีเราต้อช งเปปน็ ดว้ช ย อยา่ค งเช่นค โปรแกรม Visual
Studio, Dreamweaver ตช้องททากราฟกฟิ ไดร้ช ะดบตั หนทึง่ี ตอช้ งใชชโ้ ปรแกรม PhotoShop หรคือ Gimp ไดช้ เปนป็ ตชน้
การทาท Web App จงจึ ตอร้ งมคท วามร้มรทู ่ทีกว้รางและลจึกจรมงๆ จึงจ ไมส่แปลกเลย ถาร้ เราจ้าร งททา Web App แลวร้
ราคาวา่ส จาร้ งจะสมูง
หลังต จากห่าค งเหนิร การททา Web App ไปนาน ปัจฝ จบุถ ตัน ผชูม้เขยท นหตนั มาททา Web App อกท แตค่เคร่อคืที งมอืค เปลีท่ยน
ไป
ผูช้มเขทยนใช้ช Google Apps Script เป็ปนสครริปตล์ในฝ่ัฝง Server-side แทน PHP และ ใชช้ Google Sheets
เปป็นตตัวเก็กบขข้อมมูล แทน MySQL ส่ควนเคร่คทีืองมืคอทีท่เหลืคอกจ็เหมืคอนเดิรม HTML, CSS และ Javascript สทาหรัตบ
โปรแกรมเสรริมอทื่ีคนๆทีท่ใช้ชในการพตัฒนา Web App กจ็หัตนมาใช้ชโอเพค่นซอร์ลสหรืคอซอฟแวรล์ฟรททตท้ังหมด เชค่น
LibreOffice, Visual Studio, Ubuntu, Gimp, Inkscape, Blender เปนป็ ต้ชน
มาดมูขชอ้ ดท ขอช้ เสยท ของเครืคอท่ี งมคือของ Google ทที่ผมเ้ชู ขทยนเลอคื กใช้ใช นการทาท Web App
Google Sheets ทีท่ใชเช้ ป็ปนตวตั เก็บจ ขอช้ มมูล แมชจ้ ะเก็บจ ข้ชอมูมลไม่ไค ดช้มากมาย(จาท กดัต ท่ีท 5 ลาช้ นเซลล์ล) ประมวลผล
ไมร่ค วดเร็วจ เหมอืค น MySQL เพราะ Google Sheets ไมคใ่ ช่คโปรแกรมฐานขชอ้ มมูล แต่คเปปน็ แอพตารางคทานวณ
อยา่ค งไรกดจ็ ท การใช้ช Google Sheets นทนัต้ เพทยงพอต่อค ระบบงานทที่ไมใค่ หญโ่ค ตนัตก มทขอ้ช ดททท่ี เข้าช ใจงาค่ ย มองเห็จนข้ชอมูมล
ชดตั เจน แกไช้ ขข้อช มมลู ไดโ้ช ดยตรง ไมต่ค อ้ช งมทความรูดม้ช าช้ นฐานข้ชอมูลม ถชา้ เคยใช้ช Excel หรืคอ Calc มาก่อค น จะใชง้ช าน
Google Sheets ได้ไช มค่ยาก เพราะเครคืที่องมือค คลา้ช ยกันต
นอกจากนท้ั ระบบของ Google นตันน้ ใชข้งานบนคลาวนน์ ออนไลนน์ เสถถียร และ มถีความปลอดภยัต สมูง มทจถุดเด่คน
ทใี่ถท ชข้งานไฟล์รน ่รวมกัตนไดหข้ ลายยสูม เซอร์พน รขอ้ มกัตน และกาท หนดสทิร ธกริ ารใช้ชงานไดด้ช วช้ ย
10 Google Apps Script : Deploy as web app โดย วสนัส ต์ต คณุค ดดิลกเศวต ([email protected])
ทสท่ี ทาคัตญ Google Sheets และ Google Apps Script ใชงข้ านได้ขฟรีถ ไม่รต้อข งติดต ตัง้ตน ซอฟตแน์ วรใน์ ดๆ เพทยงแค่ค
Sign-in ดขว้ ยบัญต ชถี Google ไมวค่ า่ค จะ Gmail หรอคื G Suite(มีทม งสัท้ ฟรมีและเสมียเงดิน) กใ็จ ช้งช านไดแช้ ล้วช อย่คางไรกดจ็ ท ก็มจ ท
ขช้อจาท กดัต ตามประเภทของบัญต ชท Google
เน่คีือท งจากการททา Web App ตอ้ช งมทความรูช้ทม กีท่ วาช้ งและลทึก ฉะนัท้นต ในหนัตงสคือเลค่มนทั้ ผ้ชเมู ขทยนจงทึ เน้นช ไปทีกท่ าร
อธบิร ายให้คช รอบคลุมถ ระบบโดยรวม และลงลทกึ ในบางเรคอทีื่ ง
พนืัท้ค ฐานของบางเรค่ีทือง อยา่ค งเช่นค Javascript ผมู้เช ขทยนไมค่ไดช้อธบิร ายเลย ทัทต้งน้ทั เพราะมโท ครงสร้ชางการเขยท น
โปรแกรมเหมคอื นกบัต Google Apps Script จงึท ไมจค่ าท เป็ปนตช้องปพูม น้ืคัท ฐานอทก ทกุถ ทา่ค นสามารถหาอาค่ นไดชจ้ าก
หนตังสืคอ "หลกตั การเขยีถ นโปรแกรม Google Apps Script" เพยท งแตค่เราตช้องมาเรยท นรว้ชูม ัตต ถุถชนิดร ใหมค่ๆของ
Javascript เทค่านนัทต้ เอง เช่คน วตตั ถุถ document, NodeList, HtmlCollection เปน็ป ต้นช
สทาหรตับ Javscript ผชูมเ้ ขยท นจะเนน้ช ไปทท่กี ารควบคถุมวตตั ถุถ HTML DOM Elements ซ่งีทึ ก็คจ ืคอ แท็กจ HTML นงัีทต่
เอง เนทืคอ่ี งจากใชชบ้ ่คอยในการทาท Web App
สทาหรตับ HTML ผม้เชู ขทยนกจไ็ มไค่ ด้ชปูพม ื้คทนั ฐานเหมอืค นกนัต เพราะ HTML นตัท้นไมค่ยาก โดยผมูเ้ช ขยท นจะเนชน้ ไปทท่แี ท็กจ
HTML สทาหรบตั สราช้ งฟอรล์มมากกวา่ค
สทาหรตับ CSS ผช้เูม ขยท นเนน้ช ไปทที่ การททาความรจมู้ช ตกั และวรธิ กท ารใชช้งาน ถ้าช จะทาท Web App สตกั ตวตั ผมูเ้ช ขทยนจะใช้ช
เครอีืท่ค งมอคื อย่คาง BootStrap หรอืค Meterialze ชวค่ ยในการตกแตค่งหน้ชาเว็จบมากกว่คา ทจท่ี ะมาออกแบบ CSS เอง
ขอให้ทช กุถ ทา่ค นประสบความสาท เรจจ็ ในการสราช้ ง Web Apps
บทท่ีทม 1 : บทนนน 11
12 Google Apps Script : Deploy as web app โดย วสสันต์ต คณุค ดดิลกเศวต ([email protected])
บททีท่ 2
Deploy as web app
2.1. สร้าร งโปรเจ็คจ Google Apps Script แบบ Web App
โปรเจ็จค Google Apps Script สามารถใชงช้ านแบบ Web App ไดช้ (Deploy as web app) ฉะนท้ัตนเพอ่ีคืท ใหช้
เขช้าใจภาพรวมในเบ้ืทัคองตช้น ในบทน้ัทเราจะสรช้างโปรเจจ็คงคา่ ยๆ แล้วช ใชง้ช านแบบ Web App
กอ่ค นอีทค่ืนๆ สร้าช งโปรเจจค็ Google Apps Script แบบ Standalone ททีม่ ท 2 ไฟล์ล กคจ็ อืค page.html (File →
New → HTML file → ต้ทงัส ช่ทชีอไฟล์ต) และ code.gs (มมีม นให้แห ล้วห ตัสง้ท แตตต่ ้นห ) โดยแตลค่ ะไฟลล์ มโท คดช้ ดังต ตค่อไปนท้ั
ไฟล์น index.html – เป็นป หน้นห ตนของ Web App
<html>
<head>
<base target="_top">
</head>
<body>
<h1> Hello</h1>
<p> My paragraph </p>
</body>
</html>
ไฟลน์ code.gs – เปนป็ Server-side script
function doGet(e) {
Logger.log(e) ; // ดูดผลทมีท่ Logs ----------------------------- >
return HtmlService.createHtmlOutputFromFile("page") ;
}
การใช้งช านโปรเจ็คจ จะรตันปกติรไมไ่ค ดช้ (Run → Run function หรอช กด <Ctrl><R> ) ตอ้ช งใชว้ช ิธร ท Deploy as
web app (ดดเู พท่ดีมิ เตดิมในขห้อ 2.2 กนรใชงห้ นนโปรเจ็จคแบบ Web App (Deploy as web app) หนนห้ 15)
14 Google Apps Script : Deploy as web app โดย วสสนั ตต์ คณุค ดลดิ กเศวต ([email protected])
เมอ่คืที Deploy as web app แลว้ช จะไดห้ช นช้า Web App ดงตั นั้ท
ผลทท่ี Logs
Logs
[] { parameter={}, contextPath=, contentLength=-1, queryString=, parameters={} }
2.2. การใชงร้ านโปรเจ็จคแบบ Web App (Deploy as web app)
การใช้งช านโปรเจคจ็ แบบ Web App ททแี่ อพ Google Apps Script ใหชไ้ ปทีท่เมนมู
Publish → Deploy as web app จะปรากฎหนาช้ ตา่ค งตามภาพ
บททีทม่ 2 : Deploy as web app 15
ชอค่ ง Project version : ใชช้เลอคื กเวอร์ลชตันท่ี ททจี่ ะสราช้ งหรอคื ใชช้งาน หากตอช้ งการสราช้ งเป็นป เวอรช์ล ตั่ทีนใหม่ค ใหช้
เลอืค กเป็ปน new
ชอค่ ง Execute the app as : ใชชเ้ ลือค กวาค่ จะรนตั แอพในฐานะใคร ตวัต เลอืค กทม่ีท ท กจค็ อืค Me (เจห้นของโปรเจจค็ )
และ User accessing the web app (ผูด้หใชห้งนนจะตห้อง Sign-in ด้หวยบสัญชมี Google เพีชทอ่ ใชงห้ นน Web App)
ชค่อง Who has access to the app : เลอืค กวาค่ ใครจะสามารถมาใช้ชหนาช้ เวบ็จ ได้ช ตวตั เลอคื กกมจ็ ท
เราเทร่านนัน้ต (Only myself), ใครกไ็ก ดข้(Anyone) และ ใครกก็ไดข้ไมต่ร ้อข ง Sign-in(Anyone, even anonymous)
คลกริ ท่ีปท ่ถุปม Deploy / Update จะปรากฎหน้ชาต่าค ง Deploy as web app ตามภาพถดัต ไป และ ได้รลมงค์พ
สาท หรรบใช้งร าน Web App ทชที่ ค่อง Current web app URL เช่นค
https://script.google.com/macros/s/ABCDEFGHIJKLMNOPQRSTUVWXYZ/exec
( ถ้าถ คลลิกทท Lastest code จะไดลถ้ ิงล คจ์ค ะลงทาถ้ ยดวถ้ ย /dev เปน็ป การใชงถ้ าน Web App ดวถ้ ยโคด้ถ ลาล่ สดุส )
เมี่ทือค ก๊อก ปปปีล้ งริ คล์ Web App มาวางทที่ Browser จะไดห้ช นชา้ Web App ตามภาพถดัต ไป สตังเกตทด่ีท าช้ นหลงัต สุดถ
ของ URL ลงทา้ช ยดว้ช ย /exec กค็จ ือค เปน็ป Web app ที่ทใช้งร านจรงม
16 Google Apps Script : Deploy as web app โดย วสนัส ต์ต คณคุ ดดิลกเศวต ([email protected])
ยช้อนกลบัต ไปทีหท่ นช้าต่คาง Deploy as web app หากเราคลิรกท่ที lastest code จะเขาช้ สคู่มหนาช้ Web App
เหมอคื นกนัต แตจค่ ะใช้ชงานดวช้ ยโคด้ช ลาค่ สถุด เปป็นโคด้ช ทกที่ าท ลัตงพัตฒนา สตงั เกตถุทท่ี URL ดาช้ นหลตังสดถุ ลงทา้ช ยดว้ช ย /dev ( ผผ้ถ
เขยท นมมักใชถ้แบบนทนี้ ขณะกาก ลัมงพัฒม นา Web App )
2.3. Web Apps ดร้วย Google Apps Script
Web Apps
https://developers.google.com/apps-script/guides/web
ถา้ช เราสร้าช ง Interface(หนหน้ ตนของแอพที่มสท รน้ห งด้วห ย HTML) สาท หรบตั โปรเจจค็ Google Apps Script เรา
สามารถเผยแพรโค่ ปรเจ็คจ ของเราแบบ Web App ได้ช เช่คน การนัตดหมายระหวคา่ งยมูสเซอรล์กัตบทมท ซัตพพอรล์ต จะดททีทส่ ดุถ
ถ้ชาเราททาเป็ปน Web App ทท่ยี มูสเซอร์สล ามารถเขา้ช ถึทงไดชจ้ าก Browser
แต…่ค สคริรปตลจ์ ะเผยแพรค่เปปน็ Web App ได้ช มทเงทอ่ีืค นไขต่คอไปนัท้
1. มฟท ังฝ ก์ชล ต่ันที doGet(e) หรคือ doPost(e) – พารามเิร ตอรล์ e จะมหท รืคอไมคม่ ทก็จได้ช แลช้วแต่คกรณท
2. ฟงัฝ กชล์ ีน่ทัต ขชา้ งตนช้ คืคนคา่ค เปปน็ วตัต ถถุ HtmlOutput (กอ้ห นของโค้ดห HTML) หรือค
วตัต ถุถ TextOutput (กอ้ห นของ Text ทเทีม่ กดิด จนกเซอร์วต ิดส Content)
เมคือ่ที ยสมู เซอรเ์ล ขชา้ มาดูมเวจบ็ จะสงค่ HTTP GET/POST Request มาทฟ่ที งัฝ กลช์ ัตนท่ี doGet(e) หรคือ doPost(e) แต่ค
ไม่วค าค่ จะฟฝงั กชล์ ่นัตีท ใดกตจ็ าม อารลก์ รวิ เมน้ช ต์ล e ทีป่ท ้อป นใหฟช้ ังฝ ก์ชล ต่ัทีน กค็จ อคื event parameter เปนป็ วัตต ถทถุ ีท่เกบจ็ ขชอ้ มมูลเกย่ที ว
กบตั คาท ขอทที่สง่ค เข้ชามา โดย e มท Keys(หรชอ Properties) และ Values ดงตั ตารางตค่อไปนั้ท
Fields The value of the query string portion of the URL, or null if no query string is
e.queryString specified
name=alice&n=1&n=2
e.parameter An object of key/value pairs that correspond to the request parameters. Only
the first value is returned for parameters that have multiple values.
e.parameters {"name": "alice", "n": "1"}
e.contextPath An object similar to e.parameter, but with an array of values for each key
e.contentLength {"name": ["alice"], "n": ["1", "2"]}
Not used, always the empty string.
The length of the request body for POST requests, or -1 for GET requests
332
บททีท่ม 2 : Deploy as web app 17
Fields
e.postData.length The same as e.contentLength
332
e.postData.type The MIME type of the POST body
text/csv
e.postData.contents The content text of the POST body
Alice,21
e.postData.name Always the value "postData"
postData
นอกจากน้ัท event parameter แลว้ช เรายงตั สามารถสคง่ ผาค่ นพารามเิร ตอร์ลทเ่ีท รากทาหนดเองไดด้ช ้วช ย อยคา่ งเช่คน
username หรือค age ดงัต ตตวั อย่คางตอ่ค ไปนท้ั สัตงเกตทถุ ท่ีหลงตั เครคทืี่องหมาย "?" เปปน็ คค่ขมู อง พารามิเต ตอร์น=คร่า ทท่สี คง่ ไปกตับ
HTTP Request หากมมท ากกวาค่ 1 คจค่มู ะเชีอคืท่ มแตลค่ ะคดมคู่ ช้วยเครืทีค่องหมาย "&"
https://script.google.com/.../exec?username=jsmith&age=21
จากนัท้ตน เราสามารถแสดงพารามรเิ ตอรทล์ ัทต้งหมดในแบบ JSON ไดด้ช ัตงนทั้
function doGet(e) {
var params = JSON.stringify(e) ;
return HtmlService.createHtmlOutput(params) ;
}
ผลจากโคช้ดข้ชางตน้ช จะได้ช JSON ดงัต ต่อค ไปนท้ั
{
"queryString": "username=jsmith&age=21",
"parameter": {
"username": "jsmith",
"age": "21"
},
"contextPath": "",
"parameters": {
"username": [
"jsmith"
],
"age": [
"21"
]
},
"contentLength": -1
}
หมายเหตุต
พารามรเิ ตอร์ชล ืี่คอท c และ sid ถกมู สงวนไวสช้ าท หรตับระบบเท่าค นนัตท้ ห้าช มตงัต้ท ชีท่อืค พารามิรเตอรเ์ล ปป็นชคอ่ืที นทั้ หากใชช้จะ
ปรากฎ Error HTTP 405 response ททม่ี ขท ช้อความ "Sorry, the file you have requested does not exist." If
possible, update your script to use different parameter names.
18 Google Apps Script : Deploy as web app โดย วสนัส ตต์ คณคุ ดิดลกเศวต ([email protected])
บททที่ 3
doGet() และ
doPost()
3.1. doGet() และ doPost()
doGet and doPost Tutorial + 6 Web App Examples
http://googleappscripting.com/doget-dopost-tutorial-examples/
เมอคืท่ี ทาท Web App เราจะตอ้ช งรจ้มูช กตั กบัต HTTP (Hypertext Transfer Protocol) ซึท่งี เป็ปนขชอ้ กาท หนดในการ
สืีอคท่ สาร ทต้ัทงรัตบและส่งค ขชอ้ มมลู ระหวา่ค งอุถปกรณล์ท่แที ตกตาค่ งกันต
HTTP รองรับต การรอช้ งขอหลายชนดริ ทนที่ ยริ มกันต มากกจ็คืคอ GET และ POST
ฟฝงั กช์ล น่ีัทต doGet() และ doPost() ใน Google Apps Script เป็ปนตตัวจดัต การ HTTP GET Request และ
HTTP POST request ท่ีสท คง่ มาจากอุปถ กรณ์อล ค่ืทนี ๆ
GET Request
เกริดขัทนึ้ ตลอดเวลาท่ีทเรากรอก URL ลงใน Browser เซรริ ฟล์ เวอร์ลของโดเมนทท่รี ะบุถใน URL จะรตับคาท รอ้ช งขอ
ประมวลผล แลว้ช คนคื ค่าค กลตับไปเปป็น HTML จากน้นัทต Browser กจ็ประมวลผลใหชเ้ ราเหจน็ เป็ปนหน้ชาเวบจ็
GET Request สร้ชางมาจาก ชืีคท่อโดเมน อยา่ค งเชน่ค example.com และพาธเชคน่ /fruits/apples/ และมตักจะ
มท Query string (หรอช พนรนมดิเตอร์ต) อยคา่ งเชนค่ ?variety=fuji&count=4 ตดิร มาดว้ช ย ซทงึ่ี มทลัตกษณะเปปน็ คู่ตดของตัสวแปร
และค่ตน หากมทหลายคู่คม จะเช่ทีอคื มกัตนดวช้ ยเครืทอ่ีค งหมาย &
สาท หรับต Google Apps Script โดเมนเปน็ป script.google.com เสมอ พาธมลท ตกั ษณะเป็ปน
/macros/s/AKf...ycb/exec (หรชอ /dev) และตามดช้วย Query string (หรชอพนรนมิดเตอร์ต) ซง่ีทึ เปปน็ อะไรกจ็ไดแช้ ลวช้ แต่ค
เราจะกทาหนด
POST Request
เหมคือนกบัต GET แตค่มทพลงตั มากกวา่ค แทนทจ่ที ะใช้สช อบถามขช้อมลมู แตค่ POST ถกูม ใช้ชในการสคง่ ข้ชอมูลม จาก
อถุปกรณหล์ นทง่ีึ ไปยงตั อถปุ กรณล์หนึที่ง อยาค่ งหนท่ีงึ ท่ที POST ถกูม ใช้บช ่คอยกคจ็ ืคอ สค่งฟอร์มล เชค่น Sign-up form,
หนชา้ E-commerce checkout เปนป็ ต้นช POST
ไม่คมขท ้ชอกทากดัต ประมาณการสค่งขชอ้ มูลม จงึท แบกนทา้ั หนัตกบรรทุกถ (Payload) ตดิร ไปได้มช หาศาล แบกขช้อมมลู ไดช้
หลากหลายประเภท เช่คน ภาพ,เสยท ง และ อกท มากหมายหลายชนดริ
20 Google Apps Script : Deploy as web app โดย วสันส ต์ต คณคุ ดดิลกเศวต ([email protected])
3.1.ก.) Web App คนืค คร่าเป็นป Text
เมถอด createTextOutput() ของเซอรว์ล สิร Content เปป็นวธิร ทพืน้ัคท ฐานททใ่ี ช้ชคคนื คา่ค ใหช้กบตั HTTP GET Request
โดยจะคคืนคา่ค เปป็นวตตั ถุถ TextOutput หรอคื เปปน็ กอ้ช นของ Text (หรคอื String) ค่าค ปรริยายของชนริด Text ที่คท นืค กลบัต ไป
ก็จคอืค text/plain อยาค่ งไรกด็จ ทเราสามารถเซตจ็ เปป็น Text ตอ่ค ไปนทไั้ ดช้ เชนค่ ATOM, CSV, ICAL, JAVASCRIPT, JSON,
RSS, TEXT, VCARD และ XML
ตวตั อยา่ค ง
function doGet(){
textOutput = ContentService.createTextOutput("Hello World! Welcome to the web app.")
return textOutput
}
เมีทืคอ่ Deploy as web app จะไดช้หนา้ช เว็จบทีมท่ แท ตข่ค ชอ้ ความดตังนัท้
Hello World! Welcome to the web app.
3.1.ข.) Web App คคนื คา่ร เปนป็ JSON
JSON กจ็คอืค Text ทีท่มรท ปูม แบบทีท่เหมาะตามข้อช กทาหนดในการสง่ค ขชอ้ มมลู ระหวา่ค งเซรริ ลฟ์ เวอรล์ และสามารถ
แปลงเปนป็ Javascipt object เพทืคอี่ นทาไปประมวลผลตอค่ ดว้ช ยสครปริ ตใล์ นภาษาโปรแกรมมรทีิง่ ต่คางๆ
การคนืค คา่ค เปน็ป JSON สาท คตัญวา่ค เราต้ชองใช้ชเมถอด setMimeType (ของคลาส TextOutput) ระบกถุ อ้ช นวตัตถุถ
TextOutput ททค่ี นคื คา่ค กลตับไปวค่ามท Mime type เปป็น JSON
ตวัต อยา่ค ง
function doGet(){
// Javascript object
var appData = {
"heading": "Hello World!" ,
"body": "Welcome to the web app."
};
// สรน้ห ง JSON String จนก Javascript object
//
var JSONString = JSON.stringify(appData) ;
// สรนห้ งกห้อนวสัตถุค TextOutput จนก JSON String
//
var JSONOutput = ContentService.createTextOutput(JSONString) ;
JSONOutput.setMimeType(ContentService.MimeType.JSON) ;
return JSONOutput
}
บททมที่ 3 : doGet() และ doPost() 21
เมอคืท่ี Deploy as web app จะไดหช้ นาช้ เว็จบทีท่มแท ต่ขค อช้ ความดตงั น้ทั ซ่ทึีงกค็จ ืคอ JSON String น่ตันที เอง
{"heading":"Hello World!","body":"Welcome to the web app."}
หมายเหตุต
การคคืนคา่ค เปปน็ JSON ใชกช้ นตั มากในการสรชา้ งหรือค ใหช้บรริการ API(Application Program Interface) ทที่
รบัต คทารช้องของ HTTP Request แลชว้ คืคนคาค่ กลับต ไปเปป็น JSON จากนัต้ทนผูชส้ม ง่ค HTTP Request กจ็จ ะนทา JSON ไป
ประมวลผลต่อค ไป ดเูม พ่ริทีมเตมิร จากลิรงคต์ล ่อค ไปนัท้
How to Make a Google Apps Script RESTful API or Service
https://trevorfox.com/2015/03/rest-api-with-google-apps-script/
ในหนัตงสคือเลม่ค น้กัท จ็มตท วัต อย่คาง เชนค่ การใชช้งาน Fixer API และ การใช้ชงาน Contenet API
3.1.ค.) Web App คนืค ครา่ เปน็ป HTML
เมถอด createHtmlOutput() ของเซอรล์วสิร HTML มท 2 วตัต ถถุประสงคล์ วสัตถปุค ระสงคตแ์ รก ก็จคอืค คลทนโคด้ร
HTML กอ่ค นคคนื กลัตบให้ช Browser เชค่น ตดตั คอมเมนช้ ต์ลออก เปป็นตน้ช ซทึงี่ เมถอดนทั้เซจต็ Mime type ของกชอ้ น Text เปปน็
text/html โดยปรริยาย (ไมตค่ อช้ งระบใถุ ดๆ)
และ อกีม วตัส ถปคุ ระสงค์ต กค็จ ือค สรา้ร งหนา้ร เวบ็จ ททเ่ี ราสามารถประกอบหนา้ช ขัทึน้ มาเองจาก HTML String
ตวตั อย่าค ง
function doGet(){
// สรหน้ ง HTML String – โคดห้ HTML
var HTMLString = "<style> h1,p {font-family: 'Helvitica', 'Arial'}</style>" +
"<h1>Hello World!</h1>" +
"<p>Welcome to the Web App" ;
// สรหน้ งหนน้ห เวบจ็
HTMLOutput = HtmlService.createHtmlOutput(HTMLString) ;
return HTMLOutput
}
เมือคท่ี Deploy as web app จะไดห้ช น้าช เว็บจ ดัตงนทั้
22 Google Apps Script : Deploy as web app โดย วสัสนตต์ คณุค ดดลิ กเศวต ([email protected])
3.1.ง.) Web App คคืนคา่ร เปปน็ HTML โดยใชข้เทมเพลต
เมถอด createHtmlOutput() สรา้ช งหนชา้ เว็จบจากโค้ชด HTML แบบตรงๆ แตถ่ค ้ชาเราต้อช งการจะฝัฝง Scriptlets
(ดเมู พิทร่มี เติรมบททที่ 5 หน้ชา 31) เพ่ือคีท ใส่คตวตั แปร ใสคโ่ คดช้ Google Apps Script ลงไป เพ่อทคีื ให้สช ามารถปรบัต จูนม เปลีทย่ น
เนท้คัือหาของหนา้ช เวบจ็ ตามขอ้ช มลูม ต่าค งๆ เราสามารถทาท ไดช้โดย ใช้เช มถอดตระกูลม สรา้ช งเทมเพลต อยาค่ งเชค่น
createTemplate() หรอืค createTemplateFromFile() ซีท่ึงจะคคืนค่าค เปปน็ วัตต ถุถ HtmlTemplate กลตบั มา
ตวตั อยาค่ ง
ตวัต อยาค่ งต่คอไปนท้ั ฟฝังกชล์ ทีตัน่ doGet(e) รบตั พารามเริ ตอรล์ e เขา้ช มาดวช้ ย ซท่ึงี e กค็จ อคื Event parameters ททมี่ ท
ขชอ้ มูลม ของ Event อยูค่ขม ้าช งใน เช่นค เมีทคื่อเกริด Event HTTP Request จะสรา้ช งพารามิเร ตอรล์ e ปป้อนให้กช ัตบ doGet()
เปนป็ ตน้ช โดยคทยส์ล าท คญตั ทอี่ท ยม่คูใน e กคจ็ คอื คยท ์ล e.parameter(s) เกจ็บข้อช มมูล Query String เอาไวช้
function doGet(e){
// ใชห้ CSS ของ Bootstrap
var style = '<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">' ;
// จสับพนรนมดเิ ตอรต์ query string "greeting" หนกไมมต่ ีม - กนน หนดคุค ตน่ ปริยด นยเป็นป "Hello" ใหตห้ วัส แปร
var greeting = e.parameter.greeting || "Hello" ;
// จสบั พนรนมดิเตอรต์ query string "name" หนกไมม่ต มี - กนนหนดคุค ่ตนปรยดิ นยเปป็น "World!" ให้ตห สวั แปร
var name = e.parameter.name || "World" ;
// สรน้ห งวตัส ถคุ HtmlTemplate - มีม Scriptlet ดวห้ ย
var heading = HtmlService.createTemplate('<div class=\"container\"><h1>
<?= greeting ?><?= name ?>!</h1></div>')
// เพทม่ดิี คูตด่ Key และ Value ใหก้ห บสั ตวัส แปรวัสตถคุ โดยใชห้ Value ทมทีจ่ สับมนจนก Query String
// เปนป็ กนร Assign คนต่ ให้หกบัส ตสัวแปร greeting และ name ใน Scriptlets ด้วห ย
// ( ตสัวอยน่ต งนทใมี้ั ชห้ช่อีทช Key กบัส e.parameter ชชท่ีอเดยีม วกันส ระวัสง งง !!! )
heading.greeting = greeting ;
heading.name = name ;
// โคด้ห HTML - เนช้อัท หนตนยตัสว
var content = "<div class=\"container\"><p>Welcome to the web app.</p></div>";
var HTMLOutput = HtmlService.createHtmlOutput() ; // สรนห้ งวคัส ถคุ HtmlOutput แบบวน่ต งๆ
HTMLOutput.append(style) ; // แนบ CSS
// วสตั ถคุ HtmlTemplate ต้หองจบดหว้ ยเมถอด evaluate() เพ่ชอที ประมวล Scriptlets และคลีนม โคดห้ Html
// จนกนั้สนท ตนมด้วห ย getContent() เพทชี่อแปลงเป็นป โคห้ด HTML String
HTMLOutput.append(heading.evaluate().getContent()) ;
HTMLOutput.append(content); // แนบ content - ขอ้ห ควนมตอ้ห นรบัส
return HTMLOutput
}
บทท่มที 3 : doGet() และ doPost() 23
เมอืคีท่ Deploy as web app โดยลิงร คล์ที่ทสง่ค พารามิเร ตอร์ลแบบกาท หนดเองเพมีิ่รท เติรมเขาช้ ไปดวช้ ย ดงัต ตัตวอยาค่ ง
https://script.google.com/macros/s/GAS_Project_URL/exec?greeting=Hi&name=Wasan
จะไดผ้ช ลลพัต ธล์ททห่ี นชา้ Web App ดงตั นท้ั
หมายเหตตุ :
ถช้าต้อช งการเว้นช ชอค่ งวค่าของค่คาในพารามริเตอรทล์ ่ีทสคง่ ใหใ้ช ช้ช %20 แทน Space เชค่น
https://script.google.com/macros/s/GAS_Project_URL/exec?greeting=Hi&name=Wasan%20Kds
กรณไท มส่ค ่งค พารามิรเตอรล์แบบกทาหนดเอง เข้ชาไปดัตงตตวั อยา่ค ง จะไดชผ้ ลลพัต ธท์ล หท่ี นาช้ Web App ดังต นทั้
24 Google Apps Script : Deploy as web app โดย วสสันตต์ คณุค ดดิลกเศวต ([email protected])
บทท่ที 4
สาธิธตกระบวนการ
ทาค งานของ
Web App
4.1. สาธิธตกระบวนการทาท งานของ Web App
Deploying a Google Apps Script Web Application PART 1
https://www.youtube.com/watch?v=bwU1MSLi33Q&feature=youtu.be
ในบทนท้ัเราจะสราช้ ง Web App ทีม่ท คท วามซตับซอ้ช นมากกวคา่ บทท่ีทแลว้ช มกท ารเรทยกรตันฟงฝั ก์ชล ่ีทนตั ทตัท้งในฝฝง่ั Client-
side และ Server-side และ มกท ารจดัต การ Success และ Failure โดยใชช้เมถอดตา่ค งๆ
จถุดประสงค์ลเพคื่ทีอให้ชเขช้าใจกระบวนการ การเรทยกรัตนฟฝังก์ลชัตีท่นในแต่คละฝัฝ่ง และเขช้าใจเซอร์ลวริสและเมถอด ทที่
สาท คญัต ในกระบวนการ
4.1.ก.) สรขา้ งโปรเจก็ค
สราช้ งโปรเจ็คจ Google Apps Script แบบ Standalone จากนัตท้นสรช้าง ไฟลน์ .gs และ ไฟล์น .html ตาม
ภาพ กจค็ ือค ไฟลด์ล งตั ต่อค ไปน้ทั
ไฟลล์ code.gs และ ไฟลล์ listCourses.html
4.1.ข.) โคด้ข ในไฟล์น .gs
พริมพ์ลโค้ดช ตา่ค งๆ ลงใน ไฟลน์ .gs โดยโคด้ช ในไฟลล์ .gs เปปน็ Server-side script คลา้ช ยกบัต PHP ทร่ที ตันในฝฝ่ัง
Server-side
ไฟลล์ code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('listCourses') ;
}
function listCourses() {
return "Success !!!" ;
}
26 Google Apps Script : Deploy as web app โดย วสสนั ตต์ คณุค ดดลิ กเศวต ([email protected])
4.1.ค.) โคดข้ ในไฟลน์ .html
พมิร พโ์ล คด้ช ตา่ค งๆ ลงใน ไฟลน์ .html โดยจะเปนป็ ส่วค นของหน้ชาตา Web App และในบลจอ็ ค <script>
</script> เปน็ป Javascript ทท่ที ทางานในฝฝั่ง Client-side แตค่กจส็ ามารถเรยท กรันต ฟฝังก์ชล ่นตทัี ในฝฝง่ั Server-side ไดชโ้ ดย
ใชช้ Javascript API google.script.run
ไฟล์ล listCourses.html
<!DOCTYPE html>
<html>
<head>
<base target="_self">
</head>
<body>
<h1>List Classroom Courses</h1>
<!-- สร้นห งปคุ่ปม "List Courses" -->
<button onclick="listCourses()">List Courses</button>
<ul id="courses"></ul>
<script> <!-- Javascript -->
function listCourses() {
// google.script.run.listCourses() ; // แบบนมกีท้ั ไ็จ ดห้ แตไต่ มม่ต มกี นรจดสั กนร Failure หรอช Success
google.script.run
.withSuccessHandler(function(response){ console.log(response) })
.withFailureHandler(function(err){ console.log(err) })
.listCourses() ;
}
</script>
</body>
</html>
4.1.ง.) ใช้งข านแบบ Web App (Deploy as web app)
เมื่ทอีค ใชช้งานโปรเจคจ็ โดย Deploy as web app จะไดชห้ นาช้ Web App ตามภาพ
เมอีท่คื คลิกร ทีทป่ ่มุปถ List Courses จะปรากฎข้อช ความ "Successes !!!" ทีค่ท อนโซลของ Browser ตามภาพถตัด
ไป
( กด <Ctrl><Shift><I> = เปดิป คอนโซลของ Browser )
บทท่ีมท 4 : สนธิดตกระบวนกนร ทนนงนนของ Web App 27
4.2. ขขั้นตอนการททางาน
จากขอช้ ก่อค นหน้าช โคดช้ ในไฟล์ลตาค่ งๆ มขท ัตทน้ ตอนการททางานดัตงน้ทั
ขั้นตน ตอนการโหลดหนขา้ Web App
1. ทท่ี Browser
1.1 ผ้ใูชม ชช้งานกรอกลงิร คเ์ล พคทีื่อเปฟดิ Web App ในช่คอง URL ของ Browser เชนค่
https://script.google.com/macros/s/ABCDEFGHIJKLMNOPQRSTUVWXYZ/dev หรชอ /exec
2. ทที่ Server
2.1 ฟงฝั กช์ล ตัที่น doGet() ในไฟล์ล code.gs ททางาน
doGet() ททางานเมอทืคี่ มท HTTP GET Request หรืคอกจค็ ือค มกท ารเรยท กหนชา้ เว็จบ นทัีนต่ เอง
2.2 ฟัฝงกช์ล ีนตทั่ doGet() สร้าช งโคด้ช HTML จากไฟลล์ listCourses.html จากคาท สทัตีง่ บรรทดตั
return HtmlService.createHtmlOutputFromFile('listCourses') ;
2.3 หากโคดช้ ในไฟล์ล HTML มท Scriptlets ฝัฝงอยมู่ค กจค็ อคื มโท คด้ช ในบลอจ็ ค <? // Google Apps Script ?>
(แตต่ค ตัวอยาค่ งนไทั้ ม่มค ท) โคด้ช จะถมูกประมวลผลทที่ Server-side แลชว้ แปลงเปน็ป โคด้ช HTML
( ดดูเร่ชอที ง Scriptlets ในบทท่ทีม 5 หน้หน 31 )
2.4 Server ส่งค โค้ชด HTML กลตบั ไปให้ช Browser
3. ทท่ี Browser
3.1 ประมวลโคดช้ HTML ทที่สง่ค กลตบั มาเปน็ป หน้ชาเว็จบ
3.2 รอการปฏิรสมตั พนตั ธจ์ล ากยสูม เซอรล์
จบขตนัท้ ตอนการโหลดหน้ชา Web App ถัดต มาเป็นป การใช้งช านหนช้า Web App หรอืค การปฏริสมัต พตนั ธล์ระหวา่ค ง
ยมสู เซอรลก์ ับต Web App
28 Google Apps Script : Deploy as web app โดย วสัสนตต์ คณคุ ดิดลกเศวต ([email protected])
ขัน้ตน ตอนการใชงข้ านหน้ขา Web App
1. ทที่ Browser
1.1 เม่คืีทอคลรกิ ปุมป่ List Courses
ฟงัฝ กช์ล ่ีันตท listCourses() ทาท งาน ( ฟงัฟ กช์ต ่สีนทั Javascript ในฝ่ัฝงฟ Client-side )
จากคาท สีทัต่งบรรทดัต
<button onclick="listCourses()">List Courses</button>
1.2 ฟงฝั ก์ชล ันีท่ต listCourses() เรยท กฟังฝ กช์ล ีน่ทัต listCourses() ในไฟลล์ code.gs ใหช้ททางาน
ดวช้ ยคทาสทีัต่งบรรทดตั
google.script.run.(ฟงัฟ กน์ชั่นตีท ในไฟลน์ .gs ทจทถี่ ะรัตน) ;
2. ทีท่ Server
2.1 ฟงัฝ กลช์ น่ีทัต listCourses() (ฟฟังกตช์ นี่ัทส Google Apps Script ในไฟลต์ code.gs ฝง่ัฝฟ Server-side)
2.2 ถชา้ ฟฝงั กลช์ ่ทนัีต listCourses() ในไฟลล์ code.gs ไม่มค ทการคคืนคค่ากลตบั มา (ไมม่ร ีถ return)
เขยท นโค้ชดเพยท งเทาค่ นั้ทกจ็พอ กคจ็ อคื
google.script.run.listCourses() ;
3. ทที่ Browser (หากมีถ return จาก Server)
3.1 ถา้ช ฟัฝงก์ลชน่ีทตั listCourses() ในไฟลล์ code.gs มทการคนืค ค่าค (มีถ return) ซึที่งในตวตั อยา่ค งนทมั้ ท
function listCourses() {
return "Success !!!" ; // คนช คต่นเปน็ป String งต่นยๆ
}
ก.) (ทางเลพอกทท่ี 1) เมถอด withSuccessHandler ททางาน ถ้าร มคท ส่าคพนกลบร มา
จะรัตนฟฝังก์ชล ตน่ีัท ทรที่ ะบใุถ นทที่น้กทั ค็จ อืค function(response)
.withSuccessHandler(function(response){ console.log(response) } )
ข.) (ทางเลอคื กท่ที 2) เมถอด withFailureHandler ทาท งาน ถ้ราไมส่มทอะไรคพนกลรบมา
จะรัตนฟฝงั กช์ล นั่ีทต ทร่ที ะบใุถ นท่ทีนท้กั ค็จ ืคอ function(err)
.withFailureHandler(function(err){ console.log(err) } )
บทท่ทมี 4 : สนธตดิ กระบวนกนร ทนนงนนของ Web App 29
30 Google Apps Script : Deploy as web app โดย วสสันต์ต คณุค ดดิลกเศวต ([email protected])
บททที่ 5
Scriptlets
5.1. Scriptlets
HTML Service: Templated HTML
https://developers.google.com/apps-script/guides/html/templates
เราสามารถฝัฝง Scriptlets ลงไปในโค้ดช HTML ทท่เี ป็ปนส่ควนหน้ชาตาของ Web App โดย Scriptlets เปปน็
บลจอ็ คของสญัต ลัตกษณล์ <? ?> ภายใน Scriptlets เปน็ป โค้ดช Google Apps Script ซ่ทึีงคลาช้ ยกบัต PHP ทที่เปนป็
Server-side script เหมคอื นกตนั
โคชด้ ใน Scriptlets ถกูม รนตั ททีเ่ ซรริ ลฟ์ เวอรเ์ล พทยงครทั้งต เดทยว แลว้ช แปลงเป็ปนโค้ชด HTML กค่อนททโ่ี คดช้ HTML จะถมูกสง่ค
ไปใหช้ Browser Scriptlets ถมกู รตันเพทยงครงท้ัต เดยท ว เหมคอื น PHP ทที่เปป็น Server-side script เหมือค นกันต ตา่ค งจาก
Javascript ททร่ี ัตนได้หช ลายคร้งัทต ในฝฝัง่ Client-side
Scriptlets มท 3 แบบดงตั ต่คอไปนทั้
5.2. Standard scriptlet
ใชชส้ ัญต ลกตั ษณล์ <? ... ?> ครอบโคด้ช Apps Script เพี่อทืค ประมวลโคช้ดโดย ไม่สพมม พ์ผพ ลลรพธอ์พ อกมาในไฟลพ์
HTML อยาค่ งไรกดจ็ ท โคดช้ มทผลตอค่ เนท้อืคั หาของ HTML
ตวตั อย่าค ง
ไฟล์น Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate() ;
}
ไฟลน์ Index.html
<html>
<head>
<base target="_top">
</head>
<body>
<? if (true) { ?> <!-- -->
<p>This will always be served!</p>
<? } else { ?>
<p>This will never be served.</p>
<? } ?>
</body>
</html>
ผล
32 Google Apps Script : Deploy as web app โดย วสันส ต์ต คณคุ ดิลด กเศวต ([email protected])
5.3. Printing scriptlet
ใชสช้ ญัต ลกัต ษณล์ <?= ... ?> ครอบโคช้ด Apps Script เพคีทือ่ พมิร พคล์ คา่ เชคน่ พมิร พคล์ คา่ ของตัวต แปรใหกช้ บัต โคชด้ HTML
ตวร อยา่ส ง
ไฟลน์ Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate() ;
}
ไฟลน์ Index.html <!-- พมิด พ์ต -->
<!-- พมิด พต์ -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- ถน้ห ใชห้ <? ... ?> ขอห้ ควนมจะไม่ตถดกู พิมด พต์ -->
<?= 'My favorite Google products:' ?>
<? var data = [ 'Gmail' , 'Docs' , 'Android' ] ;
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
ผล
บทที่ทม 5 : Scriptlets 33
5.4. Force-printing scriptlet
ใชช้สตัญลัตกษณล์ <?!= ?> ครอบโคช้ด Apps Script เพ่คีืทอรัตน String ในฐานะโคด้ช HTML ใหผ้ช ลลัพต ธ์ลเหมคอื น
รนัต โคด้ช HTML ดว้ช ย Browser
ตรวอยา่ส ง
พรฒนาการทีท่ 1
<!-- ไฟลต์ page.html -->
<? var title = "Hello !" ?>
<h1><? title; ?></h1> <!-- รสนั แบบน้มทีั ผลลัสพธ์จต ะไมต่ออกมน -->
<h1><?= title; ?></h1> <!-- รัสนแบบนี้ทัม ใช้แห สดงผลลัพส ธต์ -->
ผลท่ีท Browser
พรฒนาการทที่ 2 : ใสแ่ค ทจก็ <b> ครอบ Hello ! เพืทีคอ่ แปลงเป็นป HTML String
<!-- ไฟลต์ page.html -->
<? var title = "<b>Hello !</b>" ?> <!-- จสบั โคห้ด HTML ใส่ตตสัวแปร -->
<h1><?= title; ?></h1> <!-- รนสั แบบนทีมั้ ใชแ้ห สดงเป็นป String ธรรมดน -->
<!-- ไมป่ต ระมวลผลแบบโคด้ห HTML -->
ผลทที่ Browser – ผลยตงั คงเหมอคื นเดิรม อะไรทที่อยมูคใ่ น " " จะออกมาแบบนัทตน้
พฒร นาการทท่ี 3 : ใช้ชเครอี่ืทค งหมาย <?!= ?>
<!-- ไฟล์ต page.html -->
<? var title = "<b>Hello !</b>" ?> <!-- จบสั โคหด้ HTML ใสต่ต สัวแปร -->
<h1><?!= title; ?></h1> <!-- รัสน String แบบ Browser รนสั โคดห้ HTML -->
ผลท่ีท Browser
หมายเหตุต
พยายามหลกท เลยท่ี งการใชช้ <?!= ?> เพราะมทการรตันสครปริ ต์ล อาจเป็ปนปัญฝ หาเมอทคืี่ ยูสม เซอรใ์ล สอค่ ะไรแปลกๆ
มาใหช้
34 Google Apps Script : Deploy as web app โดย วสันส ตต์ คณคุ ดลิด กเศวต ([email protected])
5.5. โหลดข้อร มลูม จาก Google Sheets มาไวรท้ ทห่ี นา้ร เวบจ็
Calling Apps Script functions from a template
https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_functions_from_a_template
ตวตั อยาค่ งนทั้ เรยท กใชฟ้ช ัฝงกช์ล ี่ทันต ในไฟลล์ .gs ในฝงฝั่ Server-side ผ่าค นการฝฝงั Scriptlets ลงในโคช้ด HTML ส่วค น
ของ Scriptlets จะถกูม รนัต และแปลงเป็นป โคชด้ HTML จากนน้ตัท โค้ชด HTML ทท้ตงั กชอ้ น จะถมูกสง่ค ไปที่ท Browser
หมายเหตตุ
มทอกท วธม ทหนทจ่ีงึ ในการเรทยกใชร้ฟฟงั กช์พ ่รีทนในไฟล์พ .gs แม้หร น้าร เพจจะถูมกโหลดแลวร้ กต็จ าม ก็คจ อืค ใชชโ้ คดช้
Javascript ททที่ ทางานในฝั่ฝง Client-side เรทยกใชช้เซอร์วล ิรส google.script.run.(ฟงัฟ กชน์ ีทัน่ต ในไฟลน์ .gs)
ไฟลน์ Google Sheet - มขท ช้อมลมู ดตังตคอ่ ไปนัท้
ไฟล์น Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
// คนช คนต่ กลสับเปน็ป ข้หอมลูด ที่ทมจบสั มนจนกในชีัทท้ม - เปน็ป อนเรยต์ 2 มติด ดิ
//
function getData() {
var id = 'Google Sheets File Id' ; // จบัส เรนห้ จท์ต มมี่ท ีมขอห้ มลดู ทงสัท้ หมด
return SpreadsheetApp // จัสบขอห้ มดลู ในเร้นห จ์ต
.openById(id)
.getActiveSheet()
.getDataRange()
.getValues() ;
}
บทท่ีทม 5 : Scriptlets 35
ไฟลน์ index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- เรมียกใช้ฟห งัฟ กต์ชัสี่นท getData() ในไฟลต์ Code.gs -->
<!-- ไดข้ห หอ้ มูลด จนก Google Sheets จบสั ใสตต่ สัวแปร data -->
<? var data = getData() ; ?>
<!-- วนลดูปพมดิ พคต์ น่ต ของตัวส แปร ลงในตนรนง HTML -->
<table border="1" cellspacing="0" cellpadding="5">
<? for (var i = 0 ; i < data.length ; i++) { ?>
<tr>
<? for (var j = 0 ; j < data[i].length ; j++) { ?>
<td><?= data[i][j] ?></td> <!-- พดมิ พต์ขอห้ มูลด -->
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
เมคี่ทือ Deploy as web app จะได้ชหนาช้ Web App ตามภาพ
36 Google Apps Script : Deploy as web app โดย วสัสนตต์ คณคุ ดิลด กเศวต ([email protected])
บทท่ีท 6
เซอรวร์ สิธ HTML
6.1. เซอรว์ร ธสิ HTML
HTML Service
https://developers.google.com/apps-script/reference/html
เซอร์ลวริส HTML เปป็นบริรการท่ีทใช้ชคืคนคค่ากลัตบมาเป็ปน HTML โดยในโปรเจจ็ค Google Apps Script สามารถมท
ไฟล์ล HTML ไดช้ ซง่ีทึ มกัต ใชชเ้ ปป็น Interface หรคือหนา้ช ตาของโปรเจ็คจ
เซอรว์ล รสิ HTML มคท ลาสใหช้ใช้หช ลายตวตั เชค่น HtmlService, HtmlOutput. HtmlTemplate เปปน็ ตชน้
ดเูม พีทมิร่ เตมริ
HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html
UI Service
https://developers.google.com/apps-script/guides/ui-service
6.2. createHtmlOutput()
6.2.ก.) createHtmlOutput()
คลาส HtmlOutput
https://developers.google.com/apps-script/reference/html/html-output
createHtmlOutput() - เมถอดในคลนส HtmlService
https://developers.google.com/apps-script/reference/html/html-service#createhtmloutput
createHtmlOutput(blob) - เมถอดในคลนส HtmlService
https://developers.google.com/apps-script/reference/html/html-service#createhtmloutputblob
createHtmlOutput(html) - เมถอดในคลนส HtmlService
https://developers.google.com/apps-script/reference/html/html-service#createhtmloutputhtml
createHtmlOutput() ใชช้สรชา้ งโคช้ด HTML โดยจะคืคนคคา่ กลบตั มาเป็นป วัตต ถุถ HtmlOutput ซึงท่ี เป็นป กช้อนของโคดช้
HTML ทท่ถี มูกคลทนแลชว้ เช่คน เอาคอมเมน้ช ต์อล อก และมคท วามปลอดภัตย พารามเิร ตอรท์ล ใที่ สใค่ หก้ช บตั เมถอดน้ัท สามารถ
เปน็ป html หรืคอ blob กไ็จ ดช้
ตวร อยาส่ ง – พารามรเิ ตอรข์ล อง createHtmlOutput() เปนป็ String ททีเ่ ปนป็ โค้หด HTML
function doGet() {
return HtmlService.createHtmlOutput('<b>Hello, world!</b>');
}
หมายเหตป
doGet() เป็นป ฟงฝั ก์ลชี่นัทต สงวน(Simple trigger) ททางานเม่อคืีท มท HTTP GET Request หรคือ หน้าข เว็กบถกูม เรีถยก
หรอคื รีเถ ฟรซหน้าข เวกบ็
38 Google Apps Script : Deploy as web app โดย วสนัส ตต์ คณคุ ดิดลกเศวต ([email protected])
เมีทอื่ค ใช้งช านโปรเจ็จคโดยวธท ท Deploy as web app จะไดชผ้ ลลตัพธตล์ ามภาพ
6.2.ข.) append() และ getContent()
append(addedContent) – เมถอดในคลนส HtmlOutput
https://developers.google.com/apps-script/reference/html/html-output#appendaddedcontent
append() ใชแ้ช นบเนือ้ทัค หาเพ่ีทิรมเตมิร ใหกช้ ตับวัตต ถุถ HtmlOutput พารามรเิ ตอรล์ addedContent กค็จ คอื เนคอ้ัทื หาซีงทึ่
เปนป็ String ของโค้ดช HTML
getContent() – เมถอดในคลนส HtmlOutput
https://developers.google.com/apps-script/reference/html/html-output#getcontent
getContent() ใชช้จตับเน้คัทอื หาในวัตต ถถุ HtmlOutput ซึง่ที กค็จ คอื โคดช้ HTML นน่ีทัต เอง
ตวัต อยาค่ ง
ตวตั อยา่ค งน้ัท มกท ารฝากเนทอ้ัืค หาของ Htmloutput ไวใช้ นตตวั แปร Object แลว้ช ทดสอบ Logs ออกมาดวมู า่ค ค่าค ของ
ตวตั แปร Object เกบจ็ อะไรไว้ช จากนันท้ต จทงึ ใชชเ้ มถอด append() แนบเนทืัอ้ค หาเพรมท่ีิ เขา้ช ไป
function doGet() {
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>') ;
output.append('<p>Hello again, world.</p>') ;
Logger.log(output.getContent()) ;
// พมิด พต์ : "<b>Hello, world!</b><p>Hello again, world.</p>"
return output ; // ส่ตง HtmlOutput ไปให้ห Browser
}
ผล - ไดชห้ นา้ช Web App ตามภาพ
บททีทม่ 6 : เซอรต์วิดส HTML 39
6.3. createHtmlOutputFromFile()
HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html
createHtmlOutputFromFile(filename) - เมถอดในคลนส HtmlService
https://developers.google.com/apps-script/reference/html/html-service#createhtmloutputfromfilefilename
createHtmlOutputFromFile() ใชส้ช ราช้ งวตตั ถถุ HtmlOutput ตวตั ใหม่ค จากไฟลล์ HTML ททีอ่ ยมใ่คู นโปรเจค็จ
Google Apps Script
ตวตั อยา่ค ง - โปรเจคจ็ Google Apps Script สรา้ช งไฟลล์ 2 ไฟล์ล ดงัต ตค่อไปนท้ั
ไฟลน์ Code.gs – มทโคดช้ ดตังตค่อไปนทั้
function doGet() {
// สรห้นงโคด้ห Html จนกไฟล์ต Index(.html) ททมีอ่ ยใ่ตูด นโปรเจ็คจ
return HtmlService.createHtmlOutputFromFile('Index') ;
}
ไฟล์น Index.html – มโท ค้ชด HTML ดงัต ตค่อไปน้ทั
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, World!
</body>
</html>
40 Google Apps Script : Deploy as web app โดย วสสนั ตต์ คณคุ ดิดลกเศวต ([email protected])
ผลลพตั ธ์เล มอีทืค่ Deploy as web app
6.4. คลาส HtmlTemplate
คลาส HtmlTemplate
https://developers.google.com/apps-script/reference/html/html-template.html
คลาส HtmlTemplate เป็นป วัตตถถุ Template ทีใท่ ชส้ช รช้างโคดช้ HTML ท่ีทสามารถสร้ชางสรรค์เล นัทอ้คื หาเพีท่มริ เติมร ไดช้
เชคน่ ฝัฝงตตัวแปร เปน็ป ตน้ช
6.5. createTemplate() และ evaluate()
createTemplate(html) – เมถอดในคลนส HtmlService
https://developers.google.com/apps-script/reference/html/html-service#createtemplatehtml
evaluate() – เมถอดในคลนส HtmlTemplate
https://developers.google.com/apps-script/reference/html/html-template.html#evaluate
เมถอด createTemplate() ใชช้สรา้ช งวตัต ถถุ HtmlTemplate ตวตั ใหมจค่ ากโค้ดช HTML
เมถอด evaluate() ใชช้สรถปุ HtmlTemplate หรคือประมวลผลสดุถ ทาช้ ย ทท่อี าจมทการแตค่งเติมร เชนค่ แนบ
ตวมั แปรตลดิ ไปไดด้ถ ว้ถ ย โดยสรุถปหรือค คนืค คค่ากลับต มาเปน็ป วัตต ถถุ HtmlOutput กอ่ค นสงค่ ให้ช Browser
ตวัต อยา่ค งการใชช้งาน
function doGet() {
var template = HtmlService.createTemplate('<?= foo ?>') ;
// template เปนป็ ตสัวแปรวสัตถุอค ยแูด่ต ลห้ว
// template.foo กจ็คอช เพทมี่ดิ Key ชชที่อ foo พรหอ้ มกบสั Value ให้หกบสั ตัวส แปรวัตส ถเคุ พี่ดิทมเตมดิ
template.foo = 'Hello World!' ;
Logger.log(template.getCode()) ; // พดมิ พ์ต : (โคดห้ Javascript)
Logger.log(template.getRawContent()) ; // พมิด พ์ต : <?= foo ?>
Logger.log(template.evaluate()) ; // พดิมพ์ต : HtmlOutput ****
Logger.log(template.evaluate().getContent()) ; // พิดมพต์ : Hello World!
}
Scriptlet <?= foo ?> จะแสดงคคา่ ของตัวต แปร foo ผลลตัพธ์ล กค็จ อคื Hello World! ถ้าช Deploy as web
app จะได้หช นา้ช เว็จบททีม่ ขท อ้ช ความ Hello World!
บททีมท่ 6 : เซอร์ตวดิส HTML 41
หมายเหตป : เมถอดทีทถน่ ่ราสนใจ
getCode() – เมถอดในคลนส HtmlTemplate
https://developers.google.com/apps-script/reference/html/html-template.html#getcode
ใชชจ้ ับต ข้อช ความเปปน็ โค้ดช Javascript ท่ีทมาจากไฟลเล์ ทมเพลตทท่สี ามารถ Evaluate ได้ช
getRawContent() – เมถอดในคลนส HtmlTemplate
https://developers.google.com/apps-script/reference/html/html-template.html#getrawcontent
ใชจ้ช ตบั เนืคท้ัอหาในเทมเพลตทีทย่ งตั ไมค่ไดปช้ ระมวลผล
6.6. createTemplateFromFile()
createTemplateFromFile(filename) – เมถอดในคลนส HtmlTemplate
https://developers.google.com/apps-script/reference/html/html-service#createtemplatefromfilefilename
HTML Service: Templated HTML
https://developers.google.com/apps-script/guides/html/templates
createTemplateFromFile ใชสช้ รชา้ งวตตั ถถุ HtmlTemplate จากไฟล์ล HTML
เมถอด createTemplateFromFile() ใช้ชสร้ชางวัตตถุถ HtmlTemplate ตัตวใหม่คจาก HTML ข้ชางต้ชนซที่ึงตช้องจบ
ดว้ช ยเมถอด evaluate กอค่ นคนืค คค่ากลับต ไป เพอทคื่ี สรถุปเป็ปน Htmloutput
createTemplateFromFile() ใชง้ช านเหมคือนกัตบ createTemplate() ตา่ค งกัตนเพทยงจะสรช้าง
HtmlTemplate จากไฟลห์ล รอคื จากโคดช้ HTML เทาค่ นทนตั้
6.6.ก.) ตตวั อยรา่ ง : แนบตตัวแปรไปกบัต วตตั ถป HtmlTemplate
สราช้ งโปรเจ็คจ Google Apps Script และใชง้ช านแบบ Web App โดยมไท ฟลแล์ ละโคดช้ ดังต ต่คอไปน้ทั
ไฟล์ล page.html
<html>
<head>
<base target="_top">
</head>
<body>
<!-- ฝงฟั Scriptlet รบัส ตสัวแปรจนก Apps Script มนใชให้ น HTML -->
<h1><?= title ; ?></h1>
<p> My paragraph </p>
</body>
</html>
42 Google Apps Script : Deploy as web app โดย วสัสนตต์ คณุค ดิลด กเศวต ([email protected])
ไฟล์ล code.gs
function doGet() {
// สรน้ห งวัตส ถุค HtmlTemplate หรอช ก่อต นของโคห้ด HTML จบสั ใสต่ตวสั แปรไวห้
var tmp = HtmlService.createTemplateFromFile("page") ;
// tmp เปน็ป ตวสั แปรวตัส ถอคุ ยแต่ดู ลห้ว
// tmp.title กค็จ อช เพม่ดิที Key ชอชท่ี title ให้กห ัสบตัสวแปรวัสตถุเค พมดิที่ เตดิม
tmp.title = "My title" ;
Logger.log(tmp) ; // ดผูด ลทีท่ม Logs ------------ > [ 01 ]
Logger.log(tmp.getRawContent()) ; // ดผดู ลท่ีทม Logs ------------ > [ 02 ]
Logger.log(tmp.evaluate()) ; // ดผดู ลทีม่ท Logs ------------ > [ 03 ]
Logger.log(tmp.evaluate().getContent()) ; // ดผดู ลท่ีมท Logs ------------ > [ 04 ]
return tmp.evaluate() ;
}
ผลทที่ Logs
Logs
[ 01 ] {title=My title}
[ 02 ] <html>
<head>
<base target="_top">
</head>
<body>
<h1><?= title ; ?></h1> <!-- ฝฟงั Scriptlet รับส ตัวส แปรจนก GAS มนใช้หใน HTML -->
<p> My paragraph </p>
</body>
</html>
[ 03 ] HtmlOutput // วัตส ถุค HtmlOutput เป็ปนกต่อนของโคด้ห HTML + อนี่ทช ๆ
[ 04 ] <!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>My title</h1>
<p> My paragraph </p>
</body>
</html>
ผลทท่ี Browser เม่ีอทืค Deploy as web app
บททีท่ม 6 : เซอรต์วิดส HTML 43
6.6.ข.) ตตัวอยา่ร ง : การททา Mail merge email
สราช้ งโปรเจคจ็ Google Apps Script แบบ Web App โดยมไท ฟล์แล ละโคชด้ ดตงั ต่อค ไปนท้ั
ไฟลน์ Google Sheets มขท ้ชอมมูลในคอลัตมน์ล อเถี มลน์, ชอืทีค่ , นามสกลป และ เบอรนโ์ ทรศัตพท์น
ไฟล์น emailTmp.html
<html>
<head>
<base target="_top">
</head>
<body>
<p>เรียถ นคปณ <?= fn ?> <?= ln ?></p>
<p>หมายเลขโทรศพัต ท์นของคณป ทเ่ีทถ ราบนัต ทกทึ ไว้ขคอืค <?= phone ?></p>
<p>กรณป าตอบกลบัต ถ้าข หากไมใ่ร ช่ร</p>
<p>ขอแสดงความนับต ถอคื <br>ระบบส่งร อถีเมลอน์ ตตั โนมตัติต</p>
</body>
</html>
ไฟล์น .gs
function myFunction() { //
var email = 0 ; //
var first = 1 ; //
var last = 2 ; //
var phone = 3 ;
// สรห้นงวัสตถุค HtmlTemplate จนก HTML ข้นห งตน้ห ในโปรเจจค็
var emailTemp = HtmlService.createTemplateFromFile("emailTmp") ;
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DataEmail") ;
var data = ws.getRange("A2:D"+ws.getLastRow()).getValues() ;
// วนลูปด สง่ต ใสตต่ ัวส แปรและคตน่ ทท่ีลม ะบรรรทดสั แนบไปกบัส วสตั ถคุ HtmlTemplate
// และ สง่ต แมลท์ต ลมี ะบรรทสดั ดหว้ ย
data.forEach(function(row){
emailTemp.fn = row[first] ; // จบสั คน่ต ของ ชอ่ทชี ไปใสต่
emailTemp.ln = row[last] ; // จบัส คน่ต ของ นนมสกลุค ไปใส่ต
emailTemp.phone = row[phone] ; // จบสั ค่นต ของ เบอรตโ์ ทร ไปใส่ต
// Evaluate >> จบัส เนอทชั้ หนในไฟลต์ HTML ที่ทเม ปนป็ Template
var htmlMessage = emailTemp.evaluate().getContent() ;
Logger.log(htmlMessage) ; // ดผดู ลททีม่ Logs --------------------------- >
44 Google Apps Script : Deploy as web app โดย วสสันตต์ คณคุ ดิลด กเศวต ([email protected])
// สง่ต เมลต์ - อยใูต่ด นลปูด forEach จะวนสต่งทีลม ะ Record
GmailApp.sendEmail(
row[email] ,
"สทาคญัต " ,
"อเถี มล์ขน องคณป ไม่สร นบตั สนปน HTML" ,
{ name : "Email App", htmlBody:htmlMessage }
) ; // End – sendMail
}) ; // End - forEach
}
ผล – อเท มลล์ถูมกส่งค ออกไป ผรช้มู ัตบไดชร้ ตับเมลลล์ ตักษณะตามภาพ
ผลทท่ี Logs
Logs
[ 01 ]
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>เรมยี นคคุณ นภนพร คณคุ ดดลิ กเศวต</p>
<p>หมนยเลขโทรศพัส ท์ขต องคุคณ ทเีทม่ รนบนสั ทึกท ไวคห้ อช 081-111-1111</p>
<p>กรณคุ นตอบกลับส ถ้นห หนกไมใ่ต ชต่</p>
<p>ขอแสดงควนมนสับถอช <br>ระบบสต่งอมีเมลอ์ต สตั โนมสัตดิ</p>
</body>
</html>
บทท่ีทม 6 : เซอร์วต ดิส HTML 45
[ 02 ]
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>เรมยี นคณุค wasan snp</p>
<p>หมนยเลขโทรศพัส ทขต์ องคุคณ ทมีท่เรนบนสั ทกึท ไวหค้ อช 095-222-2222</p>
<p>กรุคณนตอบกลบัส ถ้หนหนกไม่ตใช่ต</p>
<p>ขอแสดงควนมนบัส ถอช <br>ระบบส่ตงอเีม มลต์อตัส โนมัตส ดิ</p>
</body>
</html>
[ 03 ]
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>เรมยี นคณุค PoE Club</p>
<p>หมนยเลขโทรศสพั ทข์ต องคคุณ ทเีมท่ รนบสนั ทกึท ไวหค้ อช 031-333-3333</p>
<p>กรคุณนตอบกลบัส ถน้ห หนกไม่ใต ชต่</p>
<p>ขอแสดงควนมนบสั ถชอ<br>ระบบสง่ต อเีม มลอต์ ตัส โนมัตส ิด</p>
</body>
</html>
หมายเหตุต
การส่คงเมลดล์ ว้ช ย Apps Script มขท ้ชอจทากดตั ตามประเภทของบตญั ชท Google เชนค่ บตญั ชท Gmail สค่งได้ช 100
อทเมลล์ต่คอ 24 ชม. G Suite Basic สคง่ ได้ช 1,500 อทเมลต์ล ่คอ 24 ชม. เป็นป ตชน้
46 Google Apps Script : Deploy as web app โดย วสนัส ต์ต คณคุ ดดิลกเศวต ([email protected])
บททที่ 7
รับนสครธิปต์ฝร ั่งฝ
Server-side
เมทีค่อื หนช้า Web App ถมกู โหลดจนจบแลชว้
ถา้ช โคช้ด HTML ของ Web App มท Scriptlets
Scriptlets กถ็จ กมู รัตนจนจบแลช้วเชนค่ กตัน
จากนตน้ัท ถชา้ เราตอ้ช งการรตันโคดช้ ของฝฝัง่ Server-side
ก็คจ ืคอโคดช้ Google Apps Script
สามารถททาไดช้โดย
เขทยน Javascript เรทยกใช้ช Javascript API
google.script.run
7.1. คลาส google.script.run
คลาส google.script.run (Client-side API)
https://developers.google.com/apps-script/guides/html/reference/run
คลาส google.script.run เปป็นการสค่ีทือสารทางเดทยวจากฝฝ่ัง Client-side เป็นป JavaScript API และเปป็นสิรที่ง
ททมี่ ใท นเซอร์ลวริส HTML ททส่ี ามารถเรทยกรตันฟัฝงกล์ชทีต่ัน Google Apps Script ในฝ่ังฝ Server-side
HTML Service: Communicate with Server Functions
https://developers.google.com/apps-script/guides/html/communication
7.2. withSuccessHandler()
withSuccessHandler(function) – เมถอดในคลนส google.script.run
https://developers.google.com/apps-script/guides/html/reference/run#withsuccesshandlerfunction
withSuccessHandler() เรยท กรันต ฟฝังก์ชล ตัทน่ี ในฝ่ัฝง Client-side (พารามเริ ตอร์ล function) ถชา้ ฟังฝ กช์ล ท่ัตนี ในฝงฝั่
Server-side คนคื ค่คากลตับมา โดยคา่ค แรกททีค่ คืนกลตบั มา จะถกูม สค่งผ่คานใหฟ้ช ฝงั กลช์ น่ทีัต ในฐานะอากิวร เมน้ช ตต์ล วตั ทท่ี 1 และ
user object (ถห้นมีม) จะเปป็นอากริวเมช้นตตล์ ตัวทท่ี 2
ตวัต อยาค่ ง – โปรเจคจ็ ตคอ่ ไปนทั้ แสดงจทานวนอเท มล์ลทย่ที ตังไมค่ไดอ้ช า่ค น ไวชท้ ่หที นชา้ เว็จบ
ไฟล์น .html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(numUnread) {
var div = document.getElementById('output') ;
div.innerHTML = 'You have ' + numUnread
+ ' unread messages in your Gmail inbox.' ;
} // Close function
google.script.run.withSuccessHandler(onSuccess).getUnreadEmails() ;
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
ไฟลน์ .gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index') ;
}
function getUnreadEmails() {
return GmailApp.getInboxUnreadCount() ;
}
48 Google Apps Script : Deploy as web app โดย วสันส ต์ต คณคุ ดิดลกเศวต ([email protected])
ผล
7.3. withFailureHandler()
withFailureHandler(function) – เมถอดในคลนส google.script.run
https://developers.google.com/apps-script/guides/html/reference/run#withfailurehandlerfunction
เรทยกรตันฟัฝงกล์ชท่นัตี ในฝัฝ่ง Client-side (พารามรเิ ตอรล์ function ทรี่ท ะบุถ) ถ้ชาฟัฝงกช์ล ทีัน่ต ในฝัฝง่ Server-side เกดิร
Error วตัต ถุถ Error จะถมกู สค่งผา่ค นให้ฟช งัฝ กชล์ ัตนี่ท ในฐานะอากวิร เม้ชนตตล์ ตัวทท่ี 1 และ user object (ถหน้ มมี) จะเปน็ป
อากวริ เมช้นตต์ล วัต ที่ท 2 หากไมค่มทตวตั จดตั การความผรดิ พลาด ขอ้ช ผดิร พลาดจะแสดงท่ที Console ของ Javascript เพทืคี่อที่ท
จะแทนท่ีทดงัต กลา่ค ว ใหช้ใชช้ withFailureHandler(null) เพีทค่ือจัตดการ Error โดยไม่มค อท ะไรเกริดขทน้ัึ เลย
วตัต ถป Error ของ Javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
ตวตั อยาค่ ง
ไฟลน์ .html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onFailure(numUnread) {
var div = document.getElementById('output') ;
div.innerHTML = "ERROR: " + error.message ;
}
google.script.run.withSuccessHandler(onFailure).getUnreadEmails() ;
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
บททีมท่ 7 : รสนั สครดิปตฝต์ งฝฟั่ Server-side 49
ไฟลน์ .gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index') ;
}
function getUnreadEmails() {
// พิดมพ์ชต อท่ีช เมถอดผดิด จะเกดิด Error
return GmailApp.gotInboxUnreadCount() ;
}
ผล
7.4. withUserObject()
withUserObject(object)
https://developers.google.com/apps-script/guides/html/reference/run#withuserobjectobject
สราช้ งตวัต แปรวตัตถถุเพอ่ีทืค สง่ค ผ่าค นเปน็ป อากวิร เมน้ช ตล์ตตัวทท่ี 2 (พารามิรเตอร์ล object ) ใหกช้ ตบั withSuccessHandler
หรคอื withFailureHandler วตตั ถนถุ ้ทั จะไมคส่ คง่ ไปยังต Server-side ฉะนตทั้น ใหฟช้ ังฝ กลช์ ่นตัที ในฝ่ังฝ Client-side ตอบสนอง
เน้ัอทืค หา ที่ท Client ตดิร ตอค่ ไปยงัต Server
ไฟล์น .html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function updateButton(email, button) {
button.value = 'Clicked by ' + email ;
}
</script>
</head>
<body>
<input type="button" value="Not Clicked"
onclick="google.script.run.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
<input type="button" value="Not Clicked"
onclick="google.script.run.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
</body>
</html>
50 Google Apps Script : Deploy as web app โดย วสนัส ตต์ คณุค ดดลิ กเศวต ([email protected])
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Google Apps Script เซอร์วิส Document
Discover the best professional documents and content resources in AnyFlip Document Base.
Search