AS02 : การสร้าง Web App ด้วย Google Apps Script
AS02 การสร้าง Web App ด้วย Google Apps Script

คอร์ส : (AS02) การสร้าง Web App ด้วย Google Apps Script

ระยะเวลาการอบรม : 12-18 ชม. (แล้วแต่พื้นฐานผู้เรียนและโปรเจกต์ภายในคอร์สที่ผู้เรียนเลือก)

ค่าบริการอบรม

  1. คนเดียว : 600บ./ชม./คน (ออนไลน์สอนสด)
  2. กลุ่ม 2 คน : 400บ./ชม./คน (ออนไลน์สอนสด) - หากสนใจ แต่ไม่มีเพื่อนเรียนด้วย แจ้งความต้องการไว้ได้
  3. แบบกลุ่มใหญ่ออนไซต์ : โปรดติดต่อเพื่อขอใบเสนอราคาตามช่องทางด้านล่าง

พื้นฐานผู้เข้าอบรม : ต้องผ่านคอร์ส AS01 มาก่อน หรือถ้ามีพื้นฐาน Apps Script อยู่แล้ว ก็สามารถข้ามมาเรียนคอร์สนี้ได้

ที่มา

ระบบของApps Script สามารถสร้าง Web App ได้ แต่เราต้องใช้มากกว่า Apps Script เพราะการสร้าง Web App ต้องใช้ HTML สร้างหน้าเว็บ ใช้ CSS จัดรูปแบบให้หน้าเว็บ และ ใช้ Javascript โต้ตอบกับผู้ใช้งาน ส่วน Apps Script จะทำงานในฝั่งเซิร์ฟเวอร์ เพื่ออ่านหรือเขียนข้อมูลลงใน Google Sheets หรือ อ่านหรือเขียนไฟล์ลงใน Google Drive เป็นต้น

แต่คอร์สนี้ ไม่ได้เน้นการสร้างเว็บด้วย HTML, CSS และ Javascript แต่จะเน้นที่ระบบการสร้าง Web App ด้วย Apps Script ซึ่งมีเรื่องสำคัญที่เกี่ยวข้อง ที่เราต้องเรียนรู้ เช่น การใช้งานเซอร์วิส HTML เซอร์วิส Lock เซอร์วิส Properties, การใช้งาน Scriptlets และ การใช้งาน Javascript API google.script.run เป็นต้น ซึ่งเหล่านี้เป็นเครื่องมือที่ Google เตรียมไว้สำหรับการสร้าง Web App ด้วย Apps Script

อย่างไรก็ดี แม้คอร์สนี้ไม่ได้เน้นการสร้างเว็บด้วย HTML, CSS และ Javascript แต่เราจำเป็นต้องเข้าใจระบบการสร้างเว็บด้วยทั้ง 3 ตัวดังกล่าว สำหรับผู้ที่ไม่มีพื้นฐาน เราจะปูพื้นฐานตรงส่วนนี้ให้

การสร้างWeb App ด้วย Apps Script มีข้อดีที่ขึ้นระบบได้ง่าย แต่ก็มีข้อจำกัดด้วยนโยบายของ Google จึงอาจใช้ทำ Web App ที่มีขนาดใหญ่ไม่ได้ แต่ก็เพียงพอมากๆ สำหรับการใช้งานที่ผู้ใช้งานไม่เยอะจนเกินไป ข้อมูลไม่มากจนเกินไป

ยกตัวอย่าง Web App หรือระบบงานที่สร้างด้วย Apps Script เช่น

หน้าเว็บรับสมัครคอร์สออนไลน์ ที่ต้องมีการเลือกคอร์ส คำนวณค่าคอร์ส อัปโหลดไฟล์ และมีการส่งอิเมล์อัตโนมัติ เมื่อมีการส่งฟอร์ม (Google Form ทำไม่ได้) ,

สร้าง Sidebar ใน Google Sheets เราสามารถสร้าง Sidebar ขึ้นมาเองได้ ซึ่งใช้เทคนิคเดียวกับการสร้าง Web App เพราะแท้จริงแล้ว Sidebar ก็คือ หน้าเว็บหน้าหนึ่ง เพียงแต่มีขนาดเล็ก ,

Workflow ระบบอนุมัติการลางาน ลักษณะงานเช่น พนักงานกรอกคำขอการลางานใน Google Form (หรือในหน้าเว็บ) คำขอถูกส่งไปตรวจสอบในข้อมูลการลางานของพนักงาน จากนั้นคำขอถูกส่งต่อไปยังหัวหน้างานเพื่อขออนุมัติ เป็นต้น ระบบงานงานลักษณะนี้ เราจะเรียกว่าระบบงานWorkflow ซึ่งต้องใช้เทคนิคหลายอย่าง จัดเป็นการเขียนโปรแกรม Apps Scriptที่ค่อนข้างยาก และมักต้องใช้ Web App ร่วมด้วยเสมอ

ระบบข้อมูลลูกค้า ที่สามารถค้นหา, แสดง, แก้ไข, ลบ และเพิ่มข้อมูลลูกค้าใหม่ได้ ระบบลักษณะนี้ เราจะเรียกว่าระบบ CRUD (Create-Read-Update-Delete) ,

สร้าง Web App วิเคราะห์ข้อมูลที่รวดเร็ว เราสามารถดึงข้อมูลมาจาก Google Sheets มาที่หน้า Web App แล้วเขียนโปรแกรมเพื่อวิเคราะห์ข้อมูลในแบบต่างๆ หรือแสดงเป็นชาร์ตแบบต่างๆได้ โดยที่สามารถตอบโต้กับผู้ใช้งานได้ด้วย วิธีนี้ มีข้อดีที่ไม่ไปหน่วงความเร็วของ Google Sheets ถ้ายิ่งข้อมูลมีมาก เครื่องมือวิเคราะห์ข้อมูลต่างๆที่ Google Sheets มีให้ก็จะยิ่งทำงานช้า แต่การสร้างเป็น Web App เพื่อวิเคราะห์ข้อมูล จะทำงานได้เร็วกว่ามาก แต่ก็แน่นอนว่าต้องใช้ทักษะในการเขียนโปรแกรมเพื่อทำแบบนั้น

ประโยชน์ที่จะได้รับ :

  1. เข้าใจการใช้ Apps Script ในการสร้าง Web App
  2. เข้าใจพื้นฐานการสร้างเว็บด้วย HTML, CSS และ Javascript
  3. เขียนโปรแกรม ใช้งานเซอร์วิส Spreadsheet ที่สำคัญได้
  4. เข้าใจเซอร์วิสต่างๆที่เกี่ยวข้องกับการสร้าง Web App

เนื้อหา :

Part I : ภาพรวม

  1. ภาพรวมการสร้าง Web App ด้วย Google Apps Script
    1. Workflow การสร้างWeb App ด้วย Google Apps Script
  2. การใช้งานโปรเจ็คแบบ Web App
    1. สร้างโปรเจ็คอย่างง่ายเพื่อสาธิตภาพรวมการสร้าง Web App
      1. การใช้งานฟังก์ชั่น doGet
    2. การใช้งานโปรเจ็คแบบ Web App
      1. ขั้นตอนการทำ Deploy as Web App
      2. การ Deploy เพื่อทดสอบ Web App
      3. การ Deploy เพื่อใช้งาน Web App จริง
      4. การแก้ไขการ Deploy

    3. Part II : การสร้างหน้าเว็บใน Apps Script

  3. การใช้งานเซอร์วิส HTML
    1. คลาส HtmlOutput
      1. การใช้เมถอดในคลาส HtmlOutput
    2. คลาส HtmlTemplate
      1. การใช้เมถอดในคลาส HtmlTemplate
      2. การส่งตัวแปรจาก Apps Script ไปให้ HTML
  4. การสร้างเว็บด้วยHTML และ CSS
    1. แนะนำโปรแกรม Visual Studio Code เพื่อใช้ในการสร้างเว็บ
    2. แนะนำ Stackblitz เพื่อใช้ในการสร้างเว็บ
    3. แนะนำภาษา HTML
    4. แนะนำภาษา CSS
    5. สร้างเว็บอย่างง่ายด้วย HTML และ CSS

    5. Part III : Scriptlets และ Query String

  5. การใช้งาน Scriptlets
    1. Scriptlets คืออะไร ?
    2. การใช้งานStandard scriptlet
    3. การใช้งานPrinting scriptlet
    4. การใช้งานForce-printing scriptlet
  6. Query String
    1. Query String คืออะไร ?
    2. การใช้งาน Query String

    7. Part IV : การเรียกรันสคริปต์ในฝั่ง Server-side

  7. การเรียกรันสคริปต์ฝั่ง Server-side
    1. การใช้ Javascript เรียกรันฟังก์ชั่นในฝั่ง Server-side
    2. การใช้งาน google.script.run (JavaScript API )
  8. การป้องกัน Error ในฝั่ง Apps Script (Server-side)
    1. การใช้ try, catch และ throw ป้องกันและส่งข้อมูล Error
  9. การนำข้อมูลที่ส่งมาจากฝั่ง Server มาใช้งาน
    1. การใช้งานเมถอด withSuccessHandler (JavaScript API )
    2. การใช้งานเมถอด withFailureHandler (JavaScript API )
  10. การนำข้อมูลจาก Client-side มาใช้ต่อ
    1. การใช้งานเมถอดwithUserObject (JavaScript API )

    11. Part V : JavaScript

  11. ปูพื้นฐาน JavaScript
    1. JavaScript คืออะไร ?
    2. เปรียบเทียบ JavaScript และ Apps Script
    3. โครงสร้างการเขียนโค้ด Javscript ที่สำคัญ

    12. Part VI : การนำ Web App ไปใช้งาน

  12. ใช้งาน Web App ใน iFrame
    1. การสร้างเว็บสำหรับใช้ Web App แบบ Iframe

    13. Part VII : เซอร์วิสที่สำคัญในการสร้าง Web App

  13. เซอร์วิส Lock
    1. ควรใช้เซอร์วิส Lock เมื่อใด ?
    2. การใช้งานเซอร์วิส Lock
      1. การล็อคโค้ด
      2. การล็อคเอกสาร
  14. เซอร์วิส Propeties
    1. ควรใช้เซอร์วิส Propeties เมื่อใด ?
    2. การบันทึก Property
    3. การเรียกดู Property

    15. Part IV : โปรเจกต์ (เลือกทำ 1โปรเจกต์)

  15. โปรเจกต์ : สร้างฟอร์มส่งข้อมูลไปเก็บที่ Google Sheets
  16. โปรเจกต์ : สร้างฟอร์มอัปโหลดไฟล์และส่งข้อมูลไปเก็บที่ Google Sheets
  17. โปรเจกต์ : Workflow ขออนุมัติ