สร้างเว็บแอพแสดงข้อมูล Google Sheets ของเราภายในเวลา 5 นาที

ถ้าคุณใช้ google sheets ในการจัดเก็บข้อมูลหลายๆอย่างเหมือนผม คุณน่าจะมีปัญหาเดียวกับผมแน่นอน

นั้นคือบางครั้งเวลาเราจะดูข้อมูลในมือถือมันก็ไม่ค่อยสะดวกเพราะ app google sheets ในมือถือนั้น บอกเลยว่าค่อนข้างจะใช้งานลำบากมากๆ

หรือบางครั้งถ้าเราอยากจะแชร์ข้อมูลไฟล์ ggsheet เราให้คนอื่นดูข้อมูลแบบไม่อยากให้เค้าแก้ไข แค่อยากให้เค้า filter หรือเรียงข้อมูลได้ ก็ต้องบอกว่าทำไม่ได้เลย

นี้เลยเป็นที่มาของคลิปในวันนี้ที่เราจะพาทุกคนมาทำ web application เพื่อดึงข้อมูลใน google sheets ของเราให้เป็นตารางแบบที่สามารถ search ได้ filter ได้ sort ได้แบบง่ายดาย แถมยังใช้งานในมือถือได้แบบง่ายๆ และแชร์ให้คนอื่นดูได้ โดยไม่ต้องกลัวเค้าจะแก้ข้อมูลเราอีกต่อไป

หลายคนได้ยินคำว่า webapp อาจจะกลัวว่าต้องเขียน code เยอะ ก็ต้องบอกว่าไม่ต้องกลัวครับ เพราะเราจะไม่จำเป็นต้องรู้ code อะไรเลยในวันนี้ แค่แก้ไขเพียง 4 จุด ใช้เวลาไม่ถึง 5 นาที เราก็จะได้ webapp ที่พร้อมใช้งานได้ทันที

1. ขั้นตอนแรกให้ทุกคนทำการคลิกลิงค์ที่ด้านล่างเพื่อทำการ copy script ไปที่ account ของเราก่อนได้เลยครับ

🔗 ข้อมูล link สำหรับใช้ copy script

หลังจากนั่นให้กดปุ่ม overview และ กด make a copy เพื่อทำการ copy script ไปที่ account ของเรา

2. ทำการเลือกข้อมูล google sheets ที่เราต้องการจะ เปลี่ยนข้อมูลให้ไปอยู่ใน webapplication ของเรา

3. ให้ทำการเปลี่ยนข้อมูลใน script บรรทัดที่ 1 และ 2 ของ file code.gs

โดยในบรรทัดที่ 1 ให้เราทำการ คัดลอก spreadsheet id จาก url ของ file google sheets ของเรา โดยให้คัดลอกตั้งแต่หลัง /d/ ไปจนถึงก่อน /edit ครับ

ส่วนในบรรทัดที่ 2 นั้นก็คือข้อมูลช่วงของข้อมูลใน file google sheets ของเราที่มีข้อมูลอยู่นั้นเองครับ

4. ทำการเปลี่ยน ชื่อของ column ใน file JavaScript.html โดยเปลี่ยนตั้งแต่ บรรทัดที่ 19

โดยมีหลักการคือให้เราเอาชื่อ column จาก file google sheets ที่เราต้องการให้แสดงผลในหน้า web มาใส่บรรทัดละ 1 column ซึ่งในกรณีนี้ข้อมูลที่เราต้องการแสดงผลมี 4 column ฉะนั้นเราจึงต้องการที่จะใส่ข้อมูลลงไป 4 บรรทัดครับ

โดยถ้าเราต้องการให้ column ใหนมีคุณสมบัติในการ filter ข้อมูลได้ ก็ให้ใส่คำว่า headerFilter:true ไว้ที่ด้านหลัง column นั้นๆได้เลย

ในขณะที่ถ้าเราอยากให้ column ใหนสามารถ filter ข้อมูลที่น้อยกว่าที่กำหนด หรือมากกว่าที่กำหนดก็สามารถใช้คำสั่ง

headerFilter:true,headerFilterFunc:lessThanFilter
หรือ
headerFilter:true,headerFilterFunc:greaterThanFilter

ใส่ไว้ที่ด้านหลังของข้อมูล column ในแต่ละบรรทัดตามตัวอย่างได้เลยครับ

5. หลังจากนั้นให้เราทำการกด Deploy Project เพื่อสร้าง link ให้เราสามารถนำไปเปิดเข้าใช้งานระบบได้ทันที

สามารถดูคลิปวีดีโอด้านล่างสำหรับรายละเอียดวิธีการทำเพิ่มเติมได้ครับ

💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่ https://www.youtube.com/channel/UChxmhkD8uSSzUOkfMO_p5oQ/join

🎥 อุปกรณ์ที่ผมใช้

กล้อง Sony ZV-E10 kit 16-50mm : (https://shope.ee/5KeppTetsX)
Mouse Logitech MX Master 3s: (https://shope.ee/8UbraALvKD)
Mouse Logitech G502 Hero: (https://shope.ee/99rYOea8Z9)
MacBook Air M2: (https://shope.ee/qCQTd8LuD)
ไมค์ wireless Saramonic Blink 500 : (https://shope.ee/2feGcpazuj)
กระเป๋าใส่คอม TATHATA Brand : (https://shope.ee/5fLRlgmRXa)