สร้างเว็บแอพแสดงข้อมูล Google Sheets ของเราภายในเวลา 5 นาที!!
HTML-код
- Опубликовано: 27 июл 2024
- [สร้างเว็บแอพแสดงข้อมูล Google Sheets ของเราภายในเวลา 5 นาที!!]
.
ถ้าคุณใช้ google sheets ในการจัดเก็บข้อมูลหลายๆอย่างเหมือนผม คุณน่าจะมีปัญหาเดียวกับผมแน่นอน
.
นั้นคือบางครั้งเวลาเราจะดูข้อมูลในมือถือมันก็ไม่ค่อยสะดวกเพราะ app google sheets ในมือถือนั้น บอกเลยว่าค่อนข้างจะใช้งานลำบากมากๆ
.
หรือบางครั้งถ้าเราอยากจะแชร์ข้อมูลไฟล์ ggsheet เราให้คนอื่นดูข้อมูลแบบไม่อยากให้เค้าแก้ไข แค่อยากให้เค้า filter หรือเรียงข้อมูลได้ ก็ต้องบอกว่าทำไม่ได้เลย
.
นี้เลยเป็นที่มาของคลิปในวันนี้ที่เราจะพาทุกคนมาทำ web application เพื่อดึงข้อมูลใน google sheets ของเราให้เป็นตารางแบบที่สามารถ search ได้ filter ได้ sort ได้แบบง่ายดาย แถมยังใช้งานในมือถือได้แบบง่ายๆ และแชร์ให้คนอื่นดูได้ โดยไม่ต้องกลัวเค้าจะแก้ข้อมูลเราอีกต่อไป
.
หลายคนได้ยินคำว่า webapp อาจจะกลัวว่าต้องเขียน code เยอะ ก็ต้องบอกว่าไม่ต้องกลัวครับ เพราะเราจะไม่จำเป็นต้องรู้ code อะไรเลยในวันนี้ แค่แก้ไขเพียง 4 จุด ใช้เวลาไม่ถึง 5 นาที เราก็จะได้ webapp ที่พร้อมใช้งานได้ทันที
.
พร้อมแล้วเปิดคอมแล้วมาลุยกันเลยครับ!!
00:00 - Start
01:32 - วันนี้เราจะมาทำอะไรกัน
02:55 - เริ่มต้นสร้าง web application ของเรากัน
08:17 - ข้อจำกัดของ web application ที่สร้างจาก google app script
09:06 - library และ source ของข้อมูลในวันนี้
09:25 - ระบบ membership ของช่อง
💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่
/ @noobitguy
------------------------------------------------------------------------
🔗 ข้อมูล link สำหรับใช้ copy script
noobitguy.one/webapp-google-a...
------------------------------------------------------------------------
📚 reference source
tabulator.info/
www.bpwebs.com/
------------------------------------------------------------------------
🎥 อุปกรณ์ที่ผมใช้
กล้อง Sony ZV-E10 kit 16-50mm : (shope.ee/5KeppTetsX)
Mouse Logitech MX Master 3s: (shope.ee/8UbraALvKD)
Mouse Logitech G502 Hero: (shope.ee/99rYOea8Z9)
MacBook Air M2: (shope.ee/qCQTd8LuD)
ไมค์ wireless Saramonic Blink 500 : (shope.ee/2feGcpazuj)
------------------------------------------------
บริหารงานแบบคนไอที
FB Page : / managewithnoobitguy
LineOA : lin.ee/4HxwEJi
RUclips Channel : / บริหารงานแบบคนไอที
Website : noobitguy.one/
Email : managewithnoobitguy@gmail.com
-----------------------------------------------
▬▬▬▬▬▬▬▬▬▬ Copy and Paste ▬▬▬▬▬▬▬▬▬▬▬
🎵Music provided by BGM President
🎵Track : Favorite Food - • [소소하게 귀여운음악] Favorite ...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 
Хобби
ถ้าเจอปัญหาทำตามแล้วข้อมูลไม่ขึ้นลองเช็คตามนี้นะครับ
1. ให้ดูที่บรรทัดที่ 2 ของ file code.gs ว่าเราใส่ชื่อชีทที่ต้องการจะนำข้อมูลมาแสดงผล รวมถึงช่วงของข้อมูลถูกหรือเปล่า
** หลายคนจะใส่เป็นชื่อ file ละครับ เน้นอีกครั้งว่าจะเป็นชื่อชีท และ ช่วงของช้อมูลนะครับ
2. บางทีชื่อชีทของเราจะมีการเว้นวรรคชื่อ ด้านหน้าหรือด้านหลัง แต่เวลาเรากรอกใน code.gs เราไม่ได้เว้นวรรคตาม แนะนำให้ทำการ copy ชื่อมาวางให้ตรงกันครับ
ตรวจสอบตามแนะแล้ว..😢ยังทำไม่ได้เลย😅
@@Usd65 ฝาก inbox มาทางเพจหน่อยสิครับ
รักช่องนี้ครับ ขอบคุณมาก ครับสำหรับความรู้และเทคนิคดีดี เดี๋ยวจะลองทำตามครับ
พึ่งมีเวลามาเข้าดู เดี๋ยวจะลองฝึกหัดทำดูครับ ขอบคุณครับอาจารย์
ขอบคุณมากๆคะ ทักเพจพี่ไป ช่วยให้คำปรึกษาและแก้ปัญหา ได้ทุกอย่าง ขอบคุณมากๆคะ มีประโยชน์ที่สุด
สุดยอดดดเลยครับ สิ่งที่หามานานนน ขอบคุณมากครับ
ทำไม่ยาก ทำตามได้เลย ขอบคุณพี่เฟิร์ส
สุดยอดครับ ขอบคุณครับ สามารถต่อยอดได้ครับ
เจ๋งมากเลยครับบบบบ
ขอบคุณครับอาจารย์เริ่มสนใจด้านนี้ ❤❤
ลองเล่นดูนะครับ จริงๆทำอะไรได้อีกเยอะเลยละครับ เดี๋ยวผมทำคลิปมาให้ดูนะครับ
เจ๋งมากเลยค่ะ
ผมรอคลิปนี้ จากพี่มานานแล้วครับ
Excellent..Thank you
โคตรรัก เลยครับ❤😊
ขอบคุณครับ ทำรอบแรกตารางไม่ขึ้น ตอนนี้ขึ้นแล้วครับ 😊
ขอขอบคุณ
โอ้วว เยอะไปไม๊ครับ ><
ทำตัวไม่ถูก
ขอขอบคุณมากนะครับ
น้อยไปครับพี่(อาจารย์) เปิดโลกผมมากเลย ไม่เคยรู้เลยว่ามันทำอะไรได้เยอะขนาดนี้
ขอบคุณอีกครั้งนะครับที่สนับสนุนช่อง
ถ้าติดตรงใหน inbox มาทางเพจได้นะครับ
ขอบคุณมากๆครับ ทำตามแล้วแต่ตารางข้อมูลไม่ขึ้นเลยครับ ไม่แน่ใจว่าทำผิดตรงไหน
น่าจะทำผิดตรงใหนสักอย่างละครับ ลองเริ่มทำอีกรอบดูนะครับ หรือลอง inbox ส่งหน้า script มาให้ดูก็ได้ครับ
ตารางอยู่ อีกคลิป ก่อนหน้า นี้
@@songkiatthongsila8021 จริงๆใช้ตารางใหนก็ได้ละครับ แต่ถ้าติดตรงใหนก็แจ้งได้เลยนะครับ
ลองทำตามแล้วแต่ขึ้นหน้าจอสีขาวตารางไม่แสดงครับ เหมือนมีการลบตารางฟอร์มทิ้งไปแล้วหรือเปล่าครับ
ไม่ได้ลบละครับ น่าจะผิดที่ range หรือ ชื่อของชีทครับ ถ้าไม่ได้จริงๆ ฝาก inbox มาให้ช่วยดูได้ครับ
มือใหม่ รบกวนสอบถามค่ะ 🙏🏻
1.กรณีข้อมูลจากชีทที่เราจะใช้ในคอลัมน์ทั้งหมดเป็นข้อมูลจากสูตร =IMPORTRANGE จะใช้ไม่ได้ใช้ไหมคะ?
2.ถ้าเรามีข้อมูลหลายๆ ชีท จะทำเว็บแอพหลายๆ หน้าได้ไหมคะหรือได้หน้าเดียว
3.หากในชีท มีบางคอลัมน์(ช่วงคอลัมน์ที่ไม่เรียงต่อกัน) ซึ่งเราไม่ต้องการให้แสดงผลในหน้าเว็บแอพ สามารถทำวิธีไหนได้บ้างไหมคะ
1. สามารถทำได้ครับ ระบบการดึงข้อมูลไปสร้างเป็นเว็บไม่ได้สนใจเลยครับว่าข้อมูลเราดึงมายังไง ขอแค่มีข้อมูลในชีทก็สามารถดึงไปได้เลยครับ
2. ได้เช่นกันกันครับ แต่เราอาจจะต้องทำการปรับ script ของเราให้สามารถดึงข้อมูลมาจากหน้าที่ต้องการครับ (คล้ายๆกับที่เราเปลี่ยน script ในส่วนของชื่อชีทที่เราต้องการดึงข้อมูลมาครับ)
3. สามารถทำเหมือนเดิมได้เลยครับ เพียงแค่เราระบุชื่อ column ให้ถูกต้องข้อมูลก็จะสามารถดึงมาได้ถูกครับ
ลองเล่นลองปรับดูได้เลย ถ้าติดตรงใหนสามารถทิ้งคำถามไว้ได้เลยนะครับ :)
สามารถให้แสดงข้อมูลแบบ real time โดยไม่ต้องกด refresh ได้มั้ยคะ
@@poonchatchaya8051 ถ้าวิธีนี้ไม่ได้ละครับ ใช้ในกรณีอะไรเหรอครับ
ผมก๊อบลิ้งค์มาวางบนมือถือเปิดไม่ได้ครับ เปิดในคอมได้ ขอคำแนะนำด้วยครับ ขอบคุณครับ
หลักๆที่เคยเจอคือเปิดด้วย browser ใน app line อาจจะไม่ได้ครับ ให้เราลองเปิดด้วย chrome หรือ safari ดู
อีกอย่างคือมัน error จากการที่เรา login gmail หลาย account ไว้ใน browser ครับ ให้ลอง logout browser ลบ cache แล้วลองใหม่อีกทีนะครับ
หนูมีปัญหานิดนึงค่ะอยากให้พี่ช่วย พอดีรับจ้างขนส่งสินค้าค่ะได้รับค่าบรรทุกแต่ละครั้งไม่เท่ากันแต่เป็นที่เดียวกันน้ำหนักเท่ากัน พอจะมีการวางค่าหรือใส่สูตรแบบไหนบ้างคะที่เราจะเห็นว่าค่าเที่ยวของแต่ละที่ต่างกันครั้งละกี่บาท
ผมอาจจะยังไม่เข้าใจมากละครับว่าลักษณะของการคิดค่าบรรทุกเป็นยังไงมีเงื่อนไขแบบใหน ถ้ามีเวลาฝากเขียนรายละเอียดมาให้โดยละเอียดได้ไหมครับ รวมถึงอยากรู้ว่าตอนนี้ใช้วิธีอะไรอยู่เหรอครับ
มีกำหนดจำนวนคอลัมภ์มั้ยคะ ว่าดึงมาแสดงได้กี่คอลัมภ์
คิดว่าไม่มีนะครับ แต่คิดว่าถ้าดึงเยอะๆคงไม่สะดวกกับการใช้งานครับ
เราสามารถคอลัมให้แสดงบางคอลัม ได้มั๊ยครับ หรือต้องให้แสดงทั้งหมดเลย ขอบคุณครับ ส่งข้อมูลไปทางเพจแล้วครับ ขอบคุณมากครับผม
@@kookkaidiychickenshop7864 ทำได้ค้าบ สามารถพิมพ์เฉพาะชื่อ column ที่ต้องการให้แสดงที่ code ได้เลย
สอบถามครับ พอดีมี column ในgoogle sheet ที่เป็น ลิ้งจาก drive สามารถทำให้ตารางแสดงผลเป็นลิ้งได้ไหมครับ
formatter:"link"
สามารถดูวิธีการปรับแต่งจากลิงค์นี้ได้เลยนะครับ
tabulator.info/docs/6.2/format
เราสามารถทำ login ก่อนใช้งานได้มั้ยคะ
ทำได้แต่ต้องเขียน script เพิ่มละครับ
ไว้มีโอกาสผมมาทำให้ดูนะครับ
อยากทำรายงานสินค้าเคลื่อนไหวบน webapp ครับ
อาจจะซับซ้อนเพิ่มขึ้นเยอะเลยละครับ
ถ้ามีวิธีง่ายๆเดี๋ยวผมมาทำคลิปให้นะครับ
ตามด้วยค่ะ
+1
ขอสอบถามค่า เราจะจำกัดสิทธิ์คนที่สามารถเข้าถึงยังไงหรอคะ โดยให้อีเมลที่ได้รับอนุญาตเข้าถึงเท่านั้น 🙏
เราสามารถทำระบบ login ได้ครับ แต่ว่าต้องปรับเขียน script เพิ่มเติมครับ
@@noobitguy ขอบคุณค่า
ผมรบกวนสอบถามหน่อยครับ ในกรณีที่ผมแทรกรูปใน goolge sheet อยู่แล้ว ผมอยากแสดงรูปนั้นขึ้นมาด้วยพอทำได้ไหมครับ
คิดว่าไม่ได้ละครับ น่าจะต้องเป็นแบบแนบ link ครับถึงจะสามารถแสดงได้ ลองอ่านที่ document ของ library ดูก็ได้ครับ
@@noobitguy ขอบคุณมากครับ
สอบถามครับ เราสามารถขยายช่อง ปรับช่องตารางในเว็บapp ตัวนี้ให้ยาวขึ้นได้ไหมครับ พอดีทำข้อมูลแล้วเห็นตัวหนังสือไม่ครบนะครับ
ทำได้ครับ เราสามารถเพิ่มคำสั่ง width:400, ต่อท้าย field ที่เราต้องการขยายขนาดได้ครับ (สามารถลองปรับเปลีย่นเลข 400 ตามความยาวของข้อมูลของเราได้นะครับ)
@@noobitguy ขอบคุณครับ แต่รบกวนสอบถามอีกข้อครับ เราสามารถทำให้รูปภาพแสดงขึ้นได้ไหมครับ พอดีผมลองใส่รูปภาพไปในเซลล์แล้วมันไม่ขึ้นนะครับ
ทำได้เช่นกันครับ ลองดูข้อมูลเพิ่มเติมจาก library ของ Tabulator จากลิงค์ด้านล่างคลิปได้นะครับ
ตัวอย่างคร่าวๆจะเป็นประมาณนี้ครับ
{title:"Example", field:"example", formatter:"image", formatterParams:{
height:"50px",
width:"50px",
urlPrefix:"website.com/images/",
urlSuffix:".png",
}}
ทำเป็นดอทดาวได้มั้ยครับ
ใน library สร้างตารางตัวนี้ทำไม่ได้ครับ แต่สามารถหาตัวอื่นมาใช้ได้นะครับ
ถ้ามีหลายชีทจะทำอย่างไงหรอค่ะ
แนะนำให้รวมข้อมูลมาที่ชีทเดียวก่อนครับ
สีตารางเปลี่ยนได้มั้ยคับ
เปลี่ยนได้ครับ
ลองปรับตามนี้ได้ครับ
tabulator.info/docs/6.2/format
ทำเสร็จแล้ว จะเปิดขึ้นมาแก้ใหม่ ต้องทำยังไงครับ กดดูที่ app script ก็ไม่มีคับ ขอบคุณครับ
ลองเข้าไปหาที่ script.google.com ดูครับ
อยากให้สอนคีย์จากเว็บเข้าตารางครับ
ได้เลยครับ
การสร้างเว็บเเอปเเบบนี้มีค่าใช้จ่ายที่ต้องจ่ายไหมครับ
ไม่มีค้าบ
@@noobitguy ขอบคุณมากครับ
เราสามารถใส่รูปเข้าไปในแต่ล่ะสินค้าได้ไหมคะ
สามารถใส่ได้ครับ
ลองทำตาม script อันนี้ได้เลยค้าบ
tabulator.info/docs/6.2/format#formatter-image
@@noobitguy กำลังงมการใช้งานเลยครับ สนุกเฉย
ตารางไม่ขึ้นเลยครับ ขึ้นแต่ index.html หลัง deploy
หมายถึงว่าได้ file ไม่ครบเหรอครับ
แนะนำหน่อยครับทำไง
ลองทำตามคลิปดูได้เลยนะครับ
@@noobitguy มันไม่แสดงตัวเลฃ
ในกรณีตัวเลขให้เราทำการปรับ format ตาม document นี้ให้เป็นแบบ money ได้ครับ
tabulator.info/docs/6.2/format#formatter-money
ทำตามแล้วตอนกดเข้าเวปจากลิ้งที่ทำ มันขึ้นว่า รายงานว่ารายการนี้ละเมิดข้อกำหนดในการให้บริการของ Google ไดรฟ์ แก้ไขยังไงครับ
ลองใช้ browser ตัวอื่นลองเปิดดูได้ไหมครับ
@@noobitguy ได้แล้วครับ ขอบคุณครับ
สอบถามเพิ่มเติม ความกว้างของช่องในการแสดผลในเวปแอบสามารถกำหนดได้ไหมครับเพราะมันไม่เท่ากับใน google sheet ที่ทำไว้ครับ ขอบคุณล่วงหน้าครับ
@@kungkung9020 ทำได้ครับ สามารถดูตัวอย่าง code ได้ที่นี้เลยครับ
tabulator.info/docs/6.2/layout
@@noobitguy ขอบคุณครับ ลองทำแล้วแต่ไม่ได้เอาเท่าที่สอนไว้ก็ได้ครับ ไว้มีคลิปสอนจัดหน้า ขยายความกว้าง เวลาแสดงผลในเวปค่อยมาลองทำตามใหม่ครับ
ตารางไม่ขึ้นคะ ขึ้นแต่ index.html
รบกวนฝาก inbox มาทางเำจฟน่อยสิครับ
ตาราง google sheet จะอยู่ อีกคลิป ก่อนหน้า นี้
ทำไมลองทำตาม แล้วไม่แสดงหน้าเว็บค่ะ😢
ถ้าเจอปัญหาทำตามแล้วข้อมูลไม่ขึ้นลองเช็คตามนี้นะครับ
1. ให้ดูที่บรรทัดที่ 2 ของ file code.gs ว่าเราใส่ชื่อชีทที่ต้องการจะนำข้อมูลมาแสดงผล รวมถึงช่วงของข้อมูลถูกหรือเปล่า
** หลายคนจะใส่เป็นชื่อ file ละครับ เน้นอีกครั้งว่าจะเป็นชื่อชีท และ ช่วงของช้อมูลนะครับ
2. บางทีชื่อชีทของเราจะมีการเว้นวรรคชื่อ ด้านหน้าหรือด้านหลัง แต่เวลาเรากรอกใน code.gs เราไม่ได้เว้นวรรคตาม แนะนำให้ทำการ copy ชื่อมาวางให้ตรงกันครับ
ขอบคุณค่ะมากๆค่ะ
@@gdkao_kae9096 ถ้ายังไม่ขึ้นยังไง inbox มาทางเพจได้นะครับ
ตารางไม่ขึ้นครับ
ฝากเช็คตัวแปลต่างๆอีกครั้ง รวมถึงชื่อของชีท และ ตัวแปล data_range ครับ
ถ้าทำทุกอย่างถูกแล้วฝาก inbox มาทางเพจหน่อยนะครับ
ทดลองทำแล้วได้ผลทันที แต่จะทำยังไง ไม่ให้แสดงข้อมูลทั้งหมด แต่จะแสดงได้กรณีกรอกข้อมูลใน Filter บางคอลัมน์เท่านั้นครับ
ขอรายละเอียดเคสที่ต้องการใช้งานเพิ่มเติมหน่อยสิครับ ว่านำไปใช้ในเคสใหน
@@noobitguy หมายถึง พอเรา Browse หน้าเว็บแอพสคริปต์นี้ ขอให้ไม่แสดงข้อมูลใดๆ(ที่ดึงจาก Google Sheet) แต่จะให้แสดงก็ต่อเมื่อพิมพ์รายการใดก็ตามในช่อง Filter ชื่อสินค้า ถึงจะแสดงรายการบรรทัดนั้นๆครับ
@@noobitguy สมมติว่าผมทำ Google Form มีข้อมูล ชื่อ-สกุล, ตำแหน่ง, สังกัด, และผลงาน (ที่ว่ามามี 4 คอลัมน์ และบวกอีก 2 คอลัมน์ใน Spreadsheet คือ ประทับเวลา กับ อีเมล) ถ้าใน Spreadsheet มีการกรอกข้อมูลสัก 100 บรรทัด จะทำยังไงให้ Appscript ในเว็บนี้ไม่แสดงข้อมูลเลย แต่จะแสดงข้อมูลก็ต่อเมื่อพิมพ์ อีเมล ในช่อง Filter (อีเมล) ซึ่งตรงกับใน Spreadsheet และข้อมูลก็จะแสดงเฉพาะทีเกี่ยวข้องกับอีเมลที่พิมพ์ครับ
อ่อ เข้าใจแล้วครับ ถ้าแบบนี้จริงๆก็สามารถแก้ไข script ได้ละครับ
แต่คิดว่าน่าจะต้องแก้เยอะเลยละครับ
ตอนนี้ที่ code มันใช้งานง่ายเพราะผมใช้ library หรือ code สำเร็จรูปครับ
แต่ถ้ารูปแบบที่ต้องการ น่าจะต้องเริ่มต้นเขียนใหม่ตั้งแต่แรก อาจจะใช้ code จาก library ไม่ได้ครับ
ถ้าอยากทำจริงๆ ผมแนะนำสามารถพิมพ์ถาม chatGPT แล้วค่อยๆ code ไปทีละส่วนได้ครับ
@@noobitguy ขอบคุณครับผม เป็นประโยชน์มากๆครับ
ตารางไม่ยอมขึ้นครับ ทำตามทุกอย่างแล้ว😢
ฝาก inbox มาทางเพจหน่อยสิครับ ผมช่วยดูให้ครับ
@@noobitguy ผมคิดว่าหน้าจะเกิดจากผมใช้ชีตจากตารางซ่อมบำรุงแล้วเลือกชีตข้อมูลอุปกรณ์ ซึ่งผมสังเกตุว่า ทุกชีต id หลัง d/จนก่อนถึง/edit เป็น id เดียวกัน เลยคิดว่าจะลองทำเป็นชีทเดี่ยวครับ
ไม่น่าเกี่ยวนะครับ cap มาให้ดูได้นะครับ
ปกติไฟล์เดียวกันก็จะ id เดียวกันอยู่แล้วครับ
@@noobitguy ครับผม
ทำตามแล้วแต่ไม่แสดงตัวเลฃ
ถ้าข้อมูลเป็นตัวเลข เราต้องปรับ code เป็นแสดงข้อมูลตัวเลขตามด้วยละครับ
ลองดูลิงค์อันนี้
tabulator.info/docs/6.2/format
ลองดูในส่วนของ Money ดูนะครับ