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

Hello

My paragraph

ไฟลน์ code.gs – เปนป็ Server-side script function doGet(e) { Logger.log(e) ; // ดูดผลทมีท่ Logs ----- > return HtmlService.createHtmlOutputFromFile("page") ; }

การใช้งช านโปรเจ็คจ จะรตันปกติรไมไ่ค ดช้ (Run → Run function หรอช กด ) ตอ้ช งใชว้ช ิธร ท 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 = "" +

"

Hello World!

" + "

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 = '

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('

')

// เพทม่ดิี คูตด่ Key และ Value ใหก้ห บสั ตวัส แปรวัสตถคุ โดยใชห้ Value ทมทีจ่ สับมนจนก Query String // เปนป็ กนร Assign คนต่ ให้หกบัส ตสัวแปร greeting และ name ใน Scriptlets ด้วห ย // ( ตสัวอยน่ต งนทใมี้ั ชห้ช่อีทช Key กบัส e.parameter ชชท่ีอเดยีม วกันส ระวัสง งง !!! ) heading.greeting = greeting ; heading.name = name ;

// โคด้ห HTML - เนช้อัท หนตนยตัสว var content = "

";

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 และในบลจอ็ ค เปน็ป Javascript ทท่ที ทางานในฝฝั่ง Client-side แตค่กจส็ ามารถเรยท กรันต ฟฝังก์ชล ่นตทัี ในฝฝง่ั Server-side ไดชโ้ ดย ใชช้ Javascript API google.script.run

ไฟล์ล listCourses.html

List Classroom Courses

สร้นห งปคุ่ปม "List Courses" > List Courses

4.1.ง.) ใช้งข านแบบ Web App (Deploy as web app)

เมื่ทอีค ใชช้งานโปรเจคจ็ โดย Deploy as web app จะไดชห้ นาช้ Web App ตามภาพ

เมอีท่คื คลิกร ทีทป่ ่มุปถ List Courses จะปรากฎข้อช ความ "Successes !!!" ทีค่ท อนโซลของ Browser ตามภาพถตัด ไป

( กด = เปดิป คอนโซลของ 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 ฝัฝงอยมู่ค กจค็ อคื มโท คด้ช ในบลอจ็ ค (แตต่ค ตัวอยาค่ งนไทั้ ม่มค ท) โคด้ช จะถมูกประมวลผลทที่ 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 ) จากคาท สีทัต่งบรรทดัต

List Courses

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

>

This will always be served!

This will never be served.

ผล

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 พมิด พ์ต > พมิด พต์ >

ถน้ห ใชห้ ขอห้ ควนมจะไม่ตถดกู พิมด พต์ >

for (var i = 0; i < data.length; i++) { ?>

ผล

บทที่ทม 5 : Scriptlets 33

5.4. Force-printing scriptlet

ใชช้สตัญลัตกษณล์ ครอบโคช้ด Apps Script เพ่คีืทอรัตน String ในฐานะโคด้ช HTML ใหผ้ช ลลัพต ธ์ลเหมคอื น รนัต โคด้ช HTML ดว้ช ย Browser

ตรวอยา่ส ง พรฒนาการทีท่ 1

ไฟลต์ page.html >

รสนั แบบน้มทีั ผลลัสพธ์จต ะไมต่ออกมน >

รัสนแบบนี้ทัม ใช้แห สดงผลลัพส ธต์ >

ผลท่ีท Browser

พรฒนาการทที่ 2 : ใสแ่ค ทจก็ ครอบ Hello ! เพืทีคอ่ แปลงเป็นป HTML String

ไฟลต์ page.html >

Hello !" ?> จสบั โคห้ด HTML ใส่ตตสัวแปร >

รนสั แบบนทีมั้ ใชแ้ห สดงเป็นป String ธรรมดน >

ไมป่ต ระมวลผลแบบโคด้ห HTML >

ผลทที่ Browser – ผลยตงั คงเหมอคื นเดิรม อะไรทที่อยมูคใ่ น " " จะออกมาแบบนัทตน้

พฒร นาการทท่ี 3 : ใช้ชเครอี่ืทค งหมาย

ไฟล์ต page.html >

Hello !" ?> จบสั โคหด้ HTML ใสต่ต สัวแปร >

รัสน 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

เรมียกใช้ฟห งัฟ กต์ชัสี่นท getData() ในไฟลต์ Code.gs > ไดข้ห หอ้ มูลด จนก Google Sheets จบสั ใสตต่ สัวแปร data > วนลดูปพมดิ พคต์ น่ต ของตัวส แปร ลงในตนรนง 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('Hello, world!');

}

หมายเหตป 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('Hello, world!') ; output.append('

Hello again, world.

') ; Logger.log(output.getContent()) ; // พมิด พต์ : "Hello, world!

Hello again, world.

" 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 ดงัต ตค่อไปน้ทั

Hello, World!

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('') ;

// template เปนป็ ตสัวแปรวสัตถุอค ยแูด่ต ลห้ว // template.foo กจ็คอช เพทมี่ดิ Key ชชที่อ foo พรหอ้ มกบสั Value ให้หกบสั ตัวส แปรวัตส ถเคุ พี่ดิทมเตมดิ template.foo = 'Hello World!' ;

Logger.log(template.getCode()) ; // พดมิ พ์ต : (โคดห้ Javascript) Logger.log(template.getRawContent()) ; // พมิด พ์ต : Logger.log(template.evaluate()) ; // พดิมพ์ต : HtmlOutput **** Logger.log(template.evaluate().getContent()) ; // พิดมพต์ : Hello World! }

Scriptlet จะแสดงคคา่ ของตัวต แปร 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

ฝงฟั Scriptlet รบัส ตสัวแปรจนก Apps Script มนใชให้ น HTML >

My paragraph

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 ]

ฝฟงั Scriptlet รับส ตัวส แปรจนก GAS มนใช้หใน HTML >

My paragraph

[ 03 ] HtmlOutput // วัตส ถุค HtmlOutput เป็ปนกต่อนของโคด้ห HTML + อนี่ทช ๆ

[ 04 ]

My title

My paragraph

ผลทท่ี Browser เม่ีอทืค Deploy as web app

บททีท่ม 6 : เซอรต์วิดส HTML 43

6.6.ข.) ตตัวอยา่ร ง : การททา Mail merge email

สราช้ งโปรเจคจ็ Google Apps Script แบบ Web App โดยมไท ฟล์แล ละโคชด้ ดตงั ต่อค ไปนท้ั ไฟลน์ Google Sheets มขท ้ชอมมูลในคอลัตมน์ล อเถี มลน์, ชอืทีค่ , นามสกลป และ เบอรนโ์ ทรศัตพท์น

ไฟล์น emailTmp.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 ]

เรมยี นคคุณ นภนพร คณคุ ดดลิ กเศวต

หมนยเลขโทรศพัส ท์ขต องคุคณ ทเีทม่ รนบนสั ทึกท ไวคห้ อช 081-111-1111

กรณคุ นตอบกลับส ถ้นห หนกไมใ่ต ชต่

ขอแสดงควนมนสับถอช
ระบบสต่งอมีเมลอ์ต สตั โนมสัตดิ

บทท่ีทม 6 : เซอร์วต ดิส HTML 45

[ 02 ]

เรมยี นคณุค wasan snp

หมนยเลขโทรศพัส ทขต์ องคุคณ ทมีท่เรนบนสั ทกึท ไวหค้ อช 095-222-2222

กรุคณนตอบกลบัส ถ้หนหนกไม่ตใช่ต

ขอแสดงควนมนบัส ถอช
ระบบส่ตงอเีม มลต์อตัส โนมัตส ดิ

[ 03 ]

เรมยี นคณุค PoE Club

หมนยเลขโทรศสพั ทข์ต องคคุณ ทเีมท่ รนบสนั ทกึท ไวหค้ อช 031-333-3333

กรคุณนตอบกลบัส ถน้ห หนกไม่ใต ชต่

ขอแสดงควนมนบสั ถชอ
ระบบสง่ต อเีม มลอต์ ตัส โนมัตส ิด

หมายเหตุต การส่คงเมลดล์ ว้ช ย 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

ตวัต อยาค่ ง – โปรเจคจ็ ตคอ่ ไปนทั้ แสดงจทานวนอเท มล์ลทย่ที ตังไมค่ไดอ้ช า่ค น ไวชท้ ่หที นชา้ เว็จบ