สร้างเว็บแอพแสดงข้อมูล Google Sheets ของเราภายในเวลา 5 นาที!!
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 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
TH-cam 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 ส่งหน้า script มาให้ดูก็ได้ครับ
ตารางอยู่ อีกคลิป ก่อนหน้า นี้
@@songkiatthongsila8021 จริงๆใช้ตารางใหนก็ได้ละครับ แต่ถ้าติดตรงใหนก็แจ้งได้เลยนะครับ
ขอขอบคุณ
โอ้วว เยอะไปไม๊ครับ ><
ทำตัวไม่ถูก
ขอขอบคุณมากนะครับ
น้อยไปครับพี่(อาจารย์) เปิดโลกผมมากเลย ไม่เคยรู้เลยว่ามันทำอะไรได้เยอะขนาดนี้
ขอบคุณอีกครั้งนะครับที่สนับสนุนช่อง
ถ้าติดตรงใหน inbox มาทางเพจได้นะครับ
มือใหม่ รบกวนสอบถามค่ะ 🙏🏻
1.กรณีข้อมูลจากชีทที่เราจะใช้ในคอลัมน์ทั้งหมดเป็นข้อมูลจากสูตร =IMPORTRANGE จะใช้ไม่ได้ใช้ไหมคะ?
2.ถ้าเรามีข้อมูลหลายๆ ชีท จะทำเว็บแอพหลายๆ หน้าได้ไหมคะหรือได้หน้าเดียว
3.หากในชีท มีบางคอลัมน์(ช่วงคอลัมน์ที่ไม่เรียงต่อกัน) ซึ่งเราไม่ต้องการให้แสดงผลในหน้าเว็บแอพ สามารถทำวิธีไหนได้บ้างไหมคะ
1. สามารถทำได้ครับ ระบบการดึงข้อมูลไปสร้างเป็นเว็บไม่ได้สนใจเลยครับว่าข้อมูลเราดึงมายังไง ขอแค่มีข้อมูลในชีทก็สามารถดึงไปได้เลยครับ
2. ได้เช่นกันกันครับ แต่เราอาจจะต้องทำการปรับ script ของเราให้สามารถดึงข้อมูลมาจากหน้าที่ต้องการครับ (คล้ายๆกับที่เราเปลี่ยน script ในส่วนของชื่อชีทที่เราต้องการดึงข้อมูลมาครับ)
3. สามารถทำเหมือนเดิมได้เลยครับ เพียงแค่เราระบุชื่อ column ให้ถูกต้องข้อมูลก็จะสามารถดึงมาได้ถูกครับ
ลองเล่นลองปรับดูได้เลย ถ้าติดตรงใหนสามารถทิ้งคำถามไว้ได้เลยนะครับ :)
ผมก๊อบลิ้งค์มาวางบนมือถือเปิดไม่ได้ครับ เปิดในคอมได้ ขอคำแนะนำด้วยครับ ขอบคุณครับ
หลักๆที่เคยเจอคือเปิดด้วย browser ใน app line อาจจะไม่ได้ครับ ให้เราลองเปิดด้วย chrome หรือ safari ดู
อีกอย่างคือมัน error จากการที่เรา login gmail หลาย account ไว้ใน browser ครับ ให้ลอง logout browser ลบ cache แล้วลองใหม่อีกทีนะครับ
สอบถามครับ พอดีมี column ในgoogle sheet ที่เป็น ลิ้งจาก drive สามารถทำให้ตารางแสดงผลเป็นลิ้งได้ไหมครับ
formatter:"link"
สามารถดูวิธีการปรับแต่งจากลิงค์นี้ได้เลยนะครับ
tabulator.info/docs/6.2/format
อยากทำรายงานสินค้าเคลื่อนไหวบน webapp ครับ
อาจจะซับซ้อนเพิ่มขึ้นเยอะเลยละครับ
ถ้ามีวิธีง่ายๆเดี๋ยวผมมาทำคลิปให้นะครับ
ตามด้วยค่ะ
+1
ขอสอบถามค่า เราจะจำกัดสิทธิ์คนที่สามารถเข้าถึงยังไงหรอคะ โดยให้อีเมลที่ได้รับอนุญาตเข้าถึงเท่านั้น 🙏
เราสามารถทำระบบ login ได้ครับ แต่ว่าต้องปรับเขียน script เพิ่มเติมครับ
@@noobitguy ขอบคุณค่า
สีตารางเปลี่ยนได้มั้ยคับ
เปลี่ยนได้ครับ
ลองปรับตามนี้ได้ครับ
tabulator.info/docs/6.2/format
สอบถามครับ เราสามารถขยายช่อง ปรับช่องตารางในเว็บ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",
}}
หนูมีปัญหานิดนึงค่ะอยากให้พี่ช่วย พอดีรับจ้างขนส่งสินค้าค่ะได้รับค่าบรรทุกแต่ละครั้งไม่เท่ากันแต่เป็นที่เดียวกันน้ำหนักเท่ากัน พอจะมีการวางค่าหรือใส่สูตรแบบไหนบ้างคะที่เราจะเห็นว่าค่าเที่ยวของแต่ละที่ต่างกันครั้งละกี่บาท
ผมอาจจะยังไม่เข้าใจมากละครับว่าลักษณะของการคิดค่าบรรทุกเป็นยังไงมีเงื่อนไขแบบใหน ถ้ามีเวลาฝากเขียนรายละเอียดมาให้โดยละเอียดได้ไหมครับ รวมถึงอยากรู้ว่าตอนนี้ใช้วิธีอะไรอยู่เหรอครับ
อยากให้สอนคีย์จากเว็บเข้าตารางครับ
ได้เลยครับ
เราสามารถใส่รูปเข้าไปในแต่ล่ะสินค้าได้ไหมคะ
สามารถใส่ได้ครับ
ลองทำตาม script อันนี้ได้เลยค้าบ
tabulator.info/docs/6.2/format#formatter-image
ทำเสร็จแล้ว จะเปิดขึ้นมาแก้ใหม่ ต้องทำยังไงครับ กดดูที่ app script ก็ไม่มีคับ ขอบคุณครับ
ลองเข้าไปหาที่ script.google.com ดูครับ
ทำตามแล้วตอนกดเข้าเวปจากลิ้งที่ทำ มันขึ้นว่า รายงานว่ารายการนี้ละเมิดข้อกำหนดในการให้บริการของ Google ไดรฟ์ แก้ไขยังไงครับ
ลองใช้ browser ตัวอื่นลองเปิดดูได้ไหมครับ
@@noobitguy ได้แล้วครับ ขอบคุณครับ
สอบถามเพิ่มเติม ความกว้างของช่องในการแสดผลในเวปแอบสามารถกำหนดได้ไหมครับเพราะมันไม่เท่ากับใน google sheet ที่ทำไว้ครับ ขอบคุณล่วงหน้าครับ
@@kungkung9020 ทำได้ครับ สามารถดูตัวอย่าง code ได้ที่นี้เลยครับ
tabulator.info/docs/6.2/layout
@@noobitguy ขอบคุณครับ ลองทำแล้วแต่ไม่ได้เอาเท่าที่สอนไว้ก็ได้ครับ ไว้มีคลิปสอนจัดหน้า ขยายความกว้าง เวลาแสดงผลในเวปค่อยมาลองทำตามใหม่ครับ
แนะนำหน่อยครับทำไง
ลองทำตามคลิปดูได้เลยนะครับ
@@noobitguy มันไม่แสดงตัวเลฃ
ในกรณีตัวเลขให้เราทำการปรับ format ตาม document นี้ให้เป็นแบบ money ได้ครับ
tabulator.info/docs/6.2/format#formatter-money
ตารางไม่ขึ้นเลยครับ ขึ้นแต่ index.html หลัง deploy
หมายถึงว่าได้ file ไม่ครบเหรอครับ
ตารางไม่ขึ้นคะ ขึ้นแต่ index.html
รบกวนฝาก inbox มาทางเำจฟน่อยสิครับ
ตาราง google sheet จะอยู่ อีกคลิป ก่อนหน้า นี้
ตารางไม่ขึ้นครับ
ฝากเช็คตัวแปลต่างๆอีกครั้ง รวมถึงชื่อของชีท และ ตัวแปล data_range ครับ
ถ้าทำทุกอย่างถูกแล้วฝาก inbox มาทางเพจหน่อยนะครับ
ทำไมลองทำตาม แล้วไม่แสดงหน้าเว็บค่ะ😢
ถ้าเจอปัญหาทำตามแล้วข้อมูลไม่ขึ้นลองเช็คตามนี้นะครับ
1. ให้ดูที่บรรทัดที่ 2 ของ file code.gs ว่าเราใส่ชื่อชีทที่ต้องการจะนำข้อมูลมาแสดงผล รวมถึงช่วงของข้อมูลถูกหรือเปล่า
** หลายคนจะใส่เป็นชื่อ file ละครับ เน้นอีกครั้งว่าจะเป็นชื่อชีท และ ช่วงของช้อมูลนะครับ
2. บางทีชื่อชีทของเราจะมีการเว้นวรรคชื่อ ด้านหน้าหรือด้านหลัง แต่เวลาเรากรอกใน code.gs เราไม่ได้เว้นวรรคตาม แนะนำให้ทำการ copy ชื่อมาวางให้ตรงกันครับ
ขอบคุณค่ะมากๆค่ะ
@@gdkao_kae9096 ถ้ายังไม่ขึ้นยังไง inbox มาทางเพจได้นะครับ
ตารางไม่ยอมขึ้นครับ ทำตามทุกอย่างแล้ว😢
ฝาก inbox มาทางเพจหน่อยสิครับ ผมช่วยดูให้ครับ
@@noobitguy ผมคิดว่าหน้าจะเกิดจากผมใช้ชีตจากตารางซ่อมบำรุงแล้วเลือกชีตข้อมูลอุปกรณ์ ซึ่งผมสังเกตุว่า ทุกชีต id หลัง d/จนก่อนถึง/edit เป็น id เดียวกัน เลยคิดว่าจะลองทำเป็นชีทเดี่ยวครับ
ไม่น่าเกี่ยวนะครับ cap มาให้ดูได้นะครับ
ปกติไฟล์เดียวกันก็จะ id เดียวกันอยู่แล้วครับ
@@noobitguy ครับผม
ทำตามแล้วแต่ไม่แสดงตัวเลฃ
ถ้าข้อมูลเป็นตัวเลข เราต้องปรับ code เป็นแสดงข้อมูลตัวเลขตามด้วยละครับ
ลองดูลิงค์อันนี้
tabulator.info/docs/6.2/format
ลองดูในส่วนของ Money ดูนะครับ