การสร้าง Web app ด้วย Google Script + Sheets บทที่ 1 การเริ่มต้น
บทนี้ผู้เขียนจะแนะนำพื้นฐานเบื้องต้นการสร้าง Web app ก่อน เพื่อให้ง่ายในบทต่อไป
ผู้เขียนจะข้ามพื้นฐานการสร้าง Google Sheets ใน Google drive ไปนะครับ โดยให้เข้าใจตรงกันว่าสร้าง Google Sheets เป็นแล้ว และสนใจเขียน Web App กัน เริ่มต้นสร้าง Google sheets ขึ้นมาเลยครับ ตั้งชื่อตามใจชอบ และก็พิมพ์หัวตารางเข้าไปตามภาพนี้เลย โดนสมมติว่าเราจะทำ web app เพื่อบันทึกชื่อ หน่วยงาน และเบอร์โทรศัพท์
ตัวอย่าง Google Sheets เพื่อเป็นตัวอย่าง
เมื่อสร้างเสร็จแล้ว ให้ไปที่เมนู เครื่องมือ > โปรแกรมแก้ไขสคริปต์
การเข้าไปยังโปรแกรมแก้ไขสคริปต์
เพื่อเปิดโปรแกรมแก้ไขสคริปต์ เราจะเห็นไฟล์แรกชื่อ code เป็นอันดับแรก จากนั้นให้ตั้งชื่อโครงการตามที่ต้องการ
พื้นฐานแรก : การแสดงหน้าเพจตามที่ต้องการ
ผู้เขียนจะแสดงตัวอย่างการแสดงเพจแรก ว่าต้องพิมพ์โค้ดอะไรบ้าง
เมื่อเรามีไฟล์ชื่อ code แล้ว ก็ให้สร้างไฟล์ HTML ชื่อว่า page1 เพื่อเป็นหน้าแรกของ web app ที่จะสร้างในครั้งนี้ ให้ทำตามขั้นตอนตามภาพ
ตั้งชื่อไฟล์ว่า page1
เมื่อได้ไฟล์ page1.html ก็ให้พิมพ์โค้ดลงใน page1.html ดังต่อไปนี้
ที่จริงมันก็แค่พิมพ์ Hello World. ลงไป เพื่อให้ page1.html แสดงผลคำนี้เท่านั้นเอง
จากนั้นเปิดไฟล์ code แล้วพิมพ์โค้ดดังต่อไปนี้
ให้ function ชื่อว่า doGet(e)
---- ขออธิบายนิดหนึ่งนะครับ ในการรับค่าหรือส่งค่าใดๆ ระหว่างเพจหนึ่งไปยังอีกเพจหนึ่ง ในภาษา html หรือภาษาอะไรก็ตามที่เกี่ยวกับเว็บ เรามักจะใช้คำสั่ง GET หรือ POST ซึ่งใน google script นี้ก็เช่นเดียวกัน เราใช้ฟังชั่น doGet หรือ doPost กันครับ -----
บรรทัดที่ 2 หมายถึง การตั้งชื่อและประกาศให้ htmlOutput จดจำว่าฉันคือ page1 นะ หากเรามีเพจชื่ออื่นเราก็สามารถพิมพ์ชื่อแทนไปได้เลย
บรรทัดที่ 3 รีเทิร์นค่า สั่งให้แสดงหน้า page1 ทันที
2 บรรทัดนี้เป็นคำสั่งสำคัญในการสั่งให้แสดงหน้าเพจตามที่เราต้องการ จำ 2 บรรทัดนี้ให้ดีครับ
หลังจากเขียนโค้ดเสร็จแล้วเป็นวิธีทำให้ web app ทำงาน โดยการไปที่เมนู เผยแพร่ > ใช้งานเป็นแอปพลิเคชั่นเว็บ... ตามรูป
เลือก Project version เป็นแบบ สร้าง หมายถึงสร้างเวอร์ชั่นใหม่
และเลือก Who has access to the app เพื่อเลือกผู้มีสิทธิ์ใช้ web app นี้ เรากำหนดให้ทุกคน และใครก็ได้ แล้วกด อับเดต เลย
จากนั้นจะได้ URL ของเ web app ของเรา ให้ค้ดลอก URL แล้วนำไปเปิดดูใช้งานได้เลย แต่หากยังเขียนไม่เสร็จสามารถใช้ latest code ก็ได้ เพื่อทำการ Test หรือทดสอบโดยที่เราไม่ต้องสร้างเวอร์ชั่นใหม่
เมื่อไปเปิดใช้ web app ก็จะได้แบบนี้ครับ
เสร็จแล้วนะครับบทความนี้ เจอกันบทความหน้าต่อไปครับ
- 5
ดูเพิ่มเติมในซีรีส์
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2024 Blockdit
