KruJakkrapong 's Blog
  • Home
  • Portfolio
  • Blog
  • Shop
  • About
0

Follow us

  • facebook
  • youtube
KruJakkrapong 's Blog
  • Home
  • Portfolio
  • Blog
  • Shop
  • About

Copyright © 2025 — KruJakkrapong 's Blog

Play Pause Unmute Mute

แสดงตารางทางออนไลน์อย่างไรให้ cool ด้วย Google App Script

Written by จักรพงษ์ แผ่นทอง in ทักษะ, แอปปลิเคชัน on กุมภาพันธ์ 26, 2023

การแสดงผลตารางเพื่อแสดงข้อมูลในปัจจุบันเรานิยมทำกันอย่างไรบ้างครับ เราจะเริ่มต้นจากแบบออฟไลน์ คือ การนำไปใส่ตารางในโปรแกรม Microsoft Word ประกอบเป็นรายงานอะไรซักอย่างเป็นเบสิคที่ใครๆ ก็ทำได้

หรือเราจะเริ่มแสดงตารางจากโปรแกรม Microsoft Excel ซึ่งมันสามารถคำนวณค่าบางอย่างจากตารางได้อีกด้วย นี่ก็เป็นอีกขั้นหนึ่งที่ดูจะแอดว๊านขึ้นอีกนิด

เมื่อเริ่มขยับมาที่แบบออนไลน์ ก็จะเห็นว่า โปรแกรมที่คล้ายกับ Excel มากที่สุดเห็นจะเป็น Google Sheet ซึ่งข้อดีนอกจะอยู่บนคลาวด์แล้ว มันฟรีด้วยครับ

คราวนี้เราจะมาเจาะประเด็นกันที่ Google Sheet นี่แหละครับ ว่าถ้าหากเราอยากแสดงตารางเราจะทำกันอย่างไร

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

แต่ปัญหาที่ผมจะเจาะในบทความนี้คือ ถ้าหากเราอยากจะแสดงตารางที่ใครก็เปิดได้ เห็นข้อมูล แต่แก้ไม่ได้ ทำอย่างไร

บางคนอาจจะบอกว่า ก็แชร์แบบเห็นได้อย่างเดียวสิ

ปัญหาของผมคือ รูปแบบการแสดงผลครับ ถ้าหากเราอยากให้คนเห็นด้วยอุปกรณ์มือถือ หรือแท็บเล็ตได้ด้วย ที่สำคัญแสดงได้อย่างสวยงาม สามารถค้นหาข้อมูลได้ง่ายๆ และแสดงผลแบบสวยงามจะทำได้ไหม

ตัวอย่างที่ผมจะทำคือ ลิงค์นี้ครับ

ปัญหาเหล่านี้ จบลงด้วย Google App Script ครับ มันเป็นการประยุกต์ต่อยอดเพิ่มเติมจาก google Sheet ธรรมดาๆ อันหนึ่ง แต่เขียนโค้ดเพิ่มเข้าไป เพื่อไปสั่งงานให้มันกลายเป็น Web App นั่นเองครับ

ดูตัวอย่างนี้ ผมต้องการแสดงตารางรายชื่อนักเรียน และรายละเอียดอีกเล็กน้อย พร้อมกับปุ่มดาวน์โหลดเกียรติบัตร โดยให้หน้าจอที่แสดงเป็น responsive คือ ปรับตามขนาดของอุปกรณ์ได้ด้วยครับ

เริ่มจากท่านต้องมี account ของ google ก่อน แล้วจะใช้ sheet ในการทำงานครับ

>> ดาวน์โหลด sheet

ทำการ copy sheet นี้ไปก่อนครับ กดที่ copy นะครับ

คลิกที่ส่วนขยาย แล้วเลือก Apps Script

ไปที่ โค้ด.gs เปลี่ยน xxx เป็นไอดีของ sheet ที่คุณเปิดทำงานอยู่ ให้ไปที่ url แล้ว copy เฉพาะส่วนที่เป็นไอดีมาครับ

นำมาวางแทน xxx นะครับ แล้วกด save

ต่อไปแก้ไขหัวคอลัมภ์ให้ถูกต้อง โดยไปที่ไฟล์ js.html แล้วแก้ไขให้เรียบร้อยครับ

ขั้นตอนถัดไปคือการ deploy เป็นเว็บแอปครับ ให้ไปที่ปุ่มด้านบนขวามือ แล้วเลือก การทำให้ใช้งานได้รายการใหม่ ซึ่งตรงนี้จะทำเพียงครั้งแรกครั้งเดียวที่มีการ deploy เป็นเว็บแอป นะครับ

เลือก เว็บแอป > ผู้มีสิทธิ์เข้าถึงให้เลือก เป็น ทุกคน > การทำให้ใช้งานได้

เลือกให้สิทธิ์เข้าถึง

ขั้นตอนนี้อีเมลองค์กร กับอีเมลส่วนตัว จะแตกต่างกันนิดหน่อย ถ้าเป็นเมลองค์กรเหมือนของผม จะเลือกอีเมลแล้วก็เข้าไปได้เลย ถ้าเป็นเมลส่วนตัว จะต้องเลือก ขั้นสูง (หรือ Advanced) > แล้วกด go to webapp display google sheet (unsafe)

กรณี deploy จากอีเมลส่วนตัว

จากนั้นจะได้ลิงค์มา ลองก็อปปี้ไปวางใน url ถ้าเปิดได้แสดงว่าใช้งานได้ และสามารถนำลิงค์ไปทำให้สั้นด้วยบริการต่างๆ เช่น bit.ly เป็นต้น แล้วนำใช้ได้เลยครับ

กรณีอยู่บนมือถือ จะเห็นเป็นแบบนี้ครับ

โค้ดเว็บแอปนี้ผมนำมาจากเว็บไซต์ https://examblog64.krooluang.com/p/examvip.html ซึ่งต้องสมัครสมาชิกเพื่อเข้าไปเอาไฟล์ต่างๆ ราคาสมาชิกก็ไม่แพง เข้าแล้วรับรองคุ้มครับ

หากสนใจให้ผมช่วยทำตาราง Datatable ตามสั่ง มีการเชื่อมโยงหลายๆ ไฟล์ มีหลายคอลัมภ์ สามารถแอดไลน์แล้วทักมาสอบถามค่าบริการได้ครับ เริ่มต้นตารางละ 300 บาท

  • FacebookFacebook
  • XTwitter
  • LINELine

Like this:

Like Loading...

Related


Discover more from KruJakkrapong 's Blog

Subscribe to get the latest posts sent to your email.

Leave a ReplyCancel reply

ติดต่อ

LineID: @krujakkrapong
โทร.089-942-9565 (เปี๊ยก)

ความเห็นล่าสุด

  • การหาค่าความเชื่อมั่น ของแบบสอบถาม - KruJakkrapong 's Blog บน ค่าความเชื่อมั่นติดลบ จะแก้อย่างไร
  • Anonymous บน ชุดแบบฝึกหัด การบวก ลบ สำหรับซ้อมเพื่อแข่งขัน คิดเลขเร็ว

Blog Stats

  • 1,902,083 hits

3 บทความยอดฮิต

  • การหาค่าความยาก (p) และอำนาจจำแนก (r) ของข้อสอบปรนัย
  • วิธีหาอำนาจจำแนกและค่าความเชื่อมั่นจาก SPSS
  • การหาค่าความเชื่อมั่น ของแบบสอบถาม

Copyright © 2025 — KruJakkrapong 's Blog

Designed by WPZOOM

Discover more from KruJakkrapong 's Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading

 

Loading Comments...
 

    %d