🎞️ Videos → Build your first static web app with Azure, GitHub, and MongoDB

แนะนำตัวและที่มาของหัวข้อ Build Your First Web App0:00

เรามาเริ่มกันเลยดีกว่า เริ่มแล้วครับ

โอเค ก็อย่างงี้ครับ ก็เราอยู่กับ sub-session ที่ชื่อว่า Build Your First Web App นะครับ with Azure, GitHub, and MongoDB นะครับ หลาย tool เลยนะครับ อยู่กับผมจ๊อบ จิรชัย จันศิวนนท์นะครับ Consulting Engineer จาก MongoDB นั่นเองนะครับ ก็เมื่อกี้เราแค่กำลังหาวิธีว่า เอ๊ะ จะทำยังไงให้มันเกิดแสงจาก MongoDB บ้างนะครับ มุกก็แป้กไปนั่นเองนะครับ ทีนี้ก็อาจจะเป็นชื่อไตเติลใหม่นะครับ ใครที่เคยเจอผมก็อาจจะไม่ค่อยคุ้นชื่อโลโก้ใหม่ นิดหน่อยนะครับ แล้วก็บางคนที่ไม่รู้จักก็แนะนำตัวนิดนึงนะครับ ก็ชื่อจ๊อบนั่นเองนะครับ ปัจจุบันเป็น Consulting Engineer อยู่ที่ MongoDB ที่สิงคโปร์ ก่อนหน้านี้นะครับ บางคนอาจจะจำได้ว่าผมอาจจะเป็นเซลส์

นะครับ แต่วันนี้ผมเป็น Consulting Engineer นะครับ ดังนั้นใน sub-session นี้เราไม่ขายของ ไม่ขายของเลยนะครับ ดังนั้นมันจะเป็นการมาเล่าในมุมของคนเล่น product นะครับ

แล้วก็มาลองดูว่า เอ๊ะ เราจะทำอะไรกับมันได้บ้าง นั่นเองนะครับ ก่อนหน้านี้ผมเคยทำอยู่ที่ Microsoft นะครับ ตอนนั้นเป็น Digital Specialist บางคนก็เลยจะติดภาพว่า เอ๊ะ เราเป็นเซลส์หรือเปล่านะครับ แต่วันนี้เป็น pure technical นะครับ โอเค ก็ recap ชื่อ session ประมาณนี้

แต่จริงๆ ผมจะบอกว่าตอนแรก session ไม่ได้ชื่อนี้ แต่มันควรจะชื่อนี้

เอ้ ทำไมนะ ทำไมมันเป็นอย่างงี้ได้ยังไงนะครับ คือเรื่องราวเนี่ยครับ มันเกิดความผิดพลาดนิดนึง ระหว่างตอนที่ submit หัวข้อไปนะครับ ว่าจะเอาทุกอย่างเนี่ย มันจะต้องจบด้วย MongoDB นะครับ ที่เดินมาตรงนี้เพราะผมจำไม่ได้ว่าหน้าถัดไปคือหน้าอะไร นะครับ ผมก็เลยแบบ เฮ้ย อยากจะทำให้มันทุกอย่างเนี่ย มัน streamline โชว์เลยว่า จริงๆ แล้วเนี่ย จริงๆ MongoDB เราไม่ได้มีแค่ database แล้วในฐานะที่ไปอยู่เป็น Consulting Engineer มา 5 เดือน เนี่ยนะครับ เราเล่นอะไรไปแล้วบ้างนั่นเองนะครับ

ใครเหมาะกับ Session นี้? (End-to-end, ฟรี, DBaaS, MongoDB)2:02

แต่ว่าก่อนอื่นเรามาทำความเข้าใจนิดนึงก่อนว่า session เนี้ยมันจะเหมาะกับใครนะครับ session นี้เนี่ยก็เหมาะกับใครก็ตามที่สนใจอยากจะหา product มาพัฒนาเป็น end-to-end นะครับ มาทำตั้งแต่ต้นน้ำจนปลายน้ำนะครับ สำหรับคนที่อยากจะหา product ฟรี หรือราคาย่อมเยา

นะครับ หรือใครกำลังมองหาพวก database as a service ก็คือเราไม่ต้องโฮสต์ database เอง แต่เราใช้ได้นะครับ หรือใครที่สนใจในเรื่อง MongoDB ส่วนใครที่อยากจะดูแบบว่า ดูครูดูเจ๋ง so goat นะครับ so มันเป็นคำของเด็กยุค Gen Alpha อยากเป็นบ้าง ก็เลยไปเอายืมคำมานะครับ ทีนี้ก่อนอื่นนะครับ เราเข้าใจกันซักนิดนึงก่อนว่า

สถาปัตยกรรม 3 ชั้นของ Web App และ MongoDB Atlas2:40

เวลาเราทำเว็บ basic ทั่วๆ ไป 1 เว็บเนี่ย เราจะมีอยู่ประมาณ 3 layer ด้วยกันใช่มั้ยครับ เราก็จะมีส่วนที่เป็นแสดงผล frontend มี API เป็นตัวประมวลผลต่อกับ database คุยกันกระจัดกระจายประมวลนู่นนี่นั่น บลาๆ ใช่มั้ยครับ จริงๆ แล้วเวลาเรามอง โอ้ จริงๆ database เราก็อาจจะใช้ ถ้าเกิดจะพูดถึง MongoDB ก็คงจะอยู่แค่ layer นี้ ใช่มั้ยครับ แต่จริงๆ แล้วเนี่ย MongoDB มันสามารถจะอยู่ในทุกๆ

ที่เลยนะครับ อันนี้พอดีลูกค้าพิมพ์มานะครับ แต่ว่าข้ามไปก่อน

ทีนี้จริงๆ มันสามารถอยู่ทุก layer เลยนะ จริงๆ MongoDB เนี่ย มันสามารถจะเป็น frontend ก็ได้ เป็น API ก็ได้ แล้วก็เป็น database แล้วทั้งเส้นเนี้ยครับ เราสามารถใช้อยู่บนแพลตฟอร์มของ MongoDB Atlas ตัวเดียวได้เลย แต่ถ้าว่านะครับ เอ๊ะ แล้วไอ้ Atlas เนี่ยมันคืออะไร Atlas เนี่ยมันคือ MongoDB เวอร์ชัน cloud นะครับ ซึ่งไอ้เวอร์ชัน cloud เนี่ยมันหมายความว่า เราสามารถที่จะไปหยิบ cloud ซักเจ้านึงเนี่ย มาโฮสต์ตัว MongoDB แล้วใช้งานได้ infrastructure ไม่ต้องไปสนใจนะครับ แล้ว service เนี่ยมันมีมากมายเลย เต็มไปหมดเลยครับ มันเยอะมาก ล้นสไลด์ครับ ล้นใช่ มันล้นสไลด์ นี่ตั้งใจจริงๆ เนี่ยตรงนี้มีถึงนู่น

จริงๆ คือมันล้นนะครับ มันเยอะมาก แต่ถ้าว่างี้ครับ สไลด์ถัดไปมันคืออะไร

เหตุการณ์ไม่คาดฝัน: Service Deprecation เปลี่ยนหัวข้อเป็น Azure, GitHub และ Mongo4:03

แต่ถ้าว่ามันเกิดเหตุไม่คาดฝันครับ service deprecation แล้วนี่คือสาเหตุที่ทำให้ผมต้องเปลี่ยนหัวข้อจาก Mongo Mongo Mongo เนี่ย เป็น Azure, GitHub และ Mongo นั่นเองนะครับ เพราะไอ้ที่เตรียมมาเมื่อกี้ครับ มัน deprecated ครับ

มันเหมือนจะสั้นนะครับ แต่จริงๆ แล้วเนี่ย เอาหมดเลย

ก่อนอื่นบอกนะครับ วันนี้ไม่ได้มาในฐานะ MongoDB นะครับ เรามาในฐานะคนที่ทำงานใน MongoDB แล้วก็มาพูดงาน community ดังนั้น งานนี้ MongoDB ไม่เกี่ยวอะไรนะครับ แต่นี้ต้องบอกเลยว่าเจ็บใจจริงๆ นั่งเล่นๆ อยู่ เฮ้ย submit โอ้โห เรามีทั้ง Device Sync มี โอ้ จะไปออกเป็น WebAssembly ไปนั่งดูใน GitHub มี branch จะเตรียม release ใน quarter หน้า พอกดมา ไอ้อาทิตย์ 2 อาทิตย์ก่อนหน้านะครับ ผมเข้าไป product sync call เฮ้ย หวัดดีจิรชัย แบบ you มีอะไรสนใจอยากจะแชร์มั้ย

เรื่องราว Device Sync ที่น่าเสียดาย5:02

แล้วก็ เออ อ้ายอยากถามถึงเกี่ยวกับตัว Device Sync จังเลย เค้าก็บอกว่า อ้อ ตัวนั้นน่ะเหรอ อืม เอ่อ เรามีแผนว่าเราอาจจะไม่ไปต่อ

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

คืออย่างนี้ครับ ผมเตรียมมานะครับ เรามีฟังก์ชันจะมาต่ออะไรมากมายเนี่ย ตอนนี้ครับ มันเหลืออยู่แค่นี้ฮะ

ใช่ มันเหลืออยู่แค่นี้จริงๆ มันทำให้ภาพเราไม่จบฮะ แล้วก็ทำให้ demo ที่เตรียมมาเนี่ย มันต้องเริ่มทำใหม่กันเมื่อวานนะฮะ

คือจะบอกว่าช่วงที่เราซ้อมพรีเซนต์หัวข้ออ่ะ เรายังว่างอยู่นะครับ ช่วงหลังๆ มางานมันเริ่มล้นมือก็เลยทำไม่ทันจริงๆ นะครับ ขนาดเมื่อวานนั่งอยู่บนเครื่องบิน ยังเปิดจอแอบตาคนข้างๆ เลยนะฮะ

ทีนี้จริงๆ ภาพที่มันควรจะเป็นน่ะ ถ้าเกิดมันมีอยู่ครบเนี่ย มันควรจะเป็นประมาณนี้นะครับ เราสามารถใช้ hosting service บนมองโกดีบี โฮสต์ตัว frontend นะครับ แล้วก็มี device SDK ซึ่งเป็น lib ของมองโกดีบีเนี่ย ในการ communicate คุยกับฟังก์ชันอื่นๆ โดยที่เราไม่ต้องไปเขียนอะไรมากมาย แล้วมันมี device sync เนี่ย คือรู้แหละว่ามัน deprecated ไปแล้ว แต่อยากจะเล่าให้ฟังเพราะว่ามันเจ๋งมากเว้ย คือเสียดายมาก คือสมมติว่าเรามีอุปกรณ์มือถือ เครื่องนึงใช่มั้ยครับ แล้วเรามีเก็บ data ไว้บนมองโกดีบี Atlas ใช่มั้ยฮะ แล้วปรากฏว่ามันต้องมีบางจังหวะที่มันออฟไลน์ หรือเน็ตไม่มี แล้ว say ว่าเราเป็นเซลล์ก็ได้ เราไปหาลูกค้า เราบันทึกข้อมูล ตึ๊ดๆๆๆ ปรากฏว่าเน็ตหลุด ดังนั้นของในบน Atlas ที่เราตัดสต็อกไปอ่ะ กับตรงที่เค้าตัดตรงเนี้ย มันจะต้อง sync กันซักวิธีนึงใช่มั้ยครับ ปกติเราต้องไปเขียน mechanism เพิ่ม แต่อันนี้มันจัดการให้เลยเว้ย มัน sync ให้เลยอ่ะ แล้วก็แบบ real time นะครับ แล้วก็คือ collection ใน compare แล้วก็ใส่พวก logic ได้มากมาย

Backend, Webhook, Function และสิทธิ์ผู้ใช้ใน MongoDB (ที่ถูก Deprecate)7:14

ถัดมาตรง layer ที่เป็น backend เนี่ย แต่ก่อนเนี่ยมันมี webhook นะครับ แต่ก่อนมันเรียกว่า HTTPs webhook มั้ง

ถ้าเกิดผมจำไม่ผิดนะครับ มันจะทำหน้าที่เป็นตัวกลางในการรับพวก request ต่างๆ แล้วไปเรียกฟังก์ชันนะครับ ฟังก์ชันเหมือนกับพวก AWS Lambda เหมือนกับ Cloud Run เหมือน Azure Function นะครับ ทำไมเราเรียง order แบบนี้ แต่ว่าไม่เป็นไร อ่ะ ก็ฟังก์ชันนะครับ แล้วก็ไป trigger แล้วก็ไปเรียก database แต่ตรงนี้มันจะมีตรงนี้อีก มี check แบบพวกสิทธิ์ของ user มี scope มี check data access ด้วย คือของพวกนี้เราแทบไม่ต้องเขียนโค้ดเองเลยนะ เราสามารถเซ็ตสิทธิ์ permission ของ user อ่ะ ผ่าน GUI ของมองโกดีบีได้เลยเว้ย คือสมมติว่าเรามี collection นึง collection ถ้าเกิดใครที่ไม่เคยใช้มองโกดีบีนะครับ เอ่อ ให้เทียบกับเหมือน table ในพวก SQL อ่ะครับ

ถ้าเกิดสมมติว่าเรามี collection นึงเนี่ย เก็บ list ของ user เอาไว้ แล้วก็มีอีก collection นึงเป็นแบบ inventory เราสามารถบอกได้เลยนะ เขียนไปเป็น rules เลยอ่ะว่า

เราอยากจะให้ user ที่มี field แบบนี้ เท่ากับแบบนี้สามารถ access collection นี้ นั่นเป็น GUI ด้วย ใช้ง่ายมาก ใช่ แต่ว่ามันไปแล้วอ่ะ มันทำให้ภาพนี้ไม่สมบูรณ์เว้ย

แล้วก็จะแก้หน้าถัดมาเนี่ย ผมพึ่งนึกได้ตอนที่มาอยู่ตรงนี้ว่ายังทำไม่เสร็จ

สถาปัตยกรรมใหม่: Azure Static Web App, AWS Lambda และ GitHub8:41

คือตรงนี้เราก็จะ replace ของ นี่ไง มีหน้าโน้ตของตัวเองด้วย เมื่อกี้คือหน้าโน้ตนะครับ คือภาพทั้งหมดเมื่อกี้อ่ะ ขอเอารูปเต็มตรงนี้แล้วกัน ผมว่าจะ replace ภาพนี้ด้วยตรงนี้ครับ ตรง hosting service อ่ะครับ ผมจะใช้เป็น Azure Static Web App นะครับ

แล้วก็ตัวที่เป็นตัวฟังก์ชันตรง webhook ตรงนี้ ทั้งหมดนี้ครับ เราจะใช้เป็น AWS Lambda นะครับ ใครไม่รู้จัก Lambda ของ AWS มันคือเป็น function as a service เราสามารถเขียนเป็นฟังก์ชัน เราไปโฮสต์ไว้บน cloud ได้ URL มา เซ็ตใดๆ ไม่ต้องไป set up web server เพิ่มเติม เขียนเป็น function based นะครับ มาใช้ตรงนี้แทนนะครับ แล้วก็เนื่องจากตรงนี้ไม่มีแล้ว ก็ช่างแม่งมันไปนะครับ ส่วน GitHub ยังอยู่เหมือนเดิมนะครับ ก็สามารถเอาไว้สำหรับเป็นตัว CI/CD deploy ได้

คือในอดีตอ่ะครับ ตอนที่ภาพนี้มันยังครบอ่ะ ตัวนี้ครับ มันจะเป็นคนที่คอยหยิบโค้ด แล้ว deploy ลงฟังก์ชัน ลง hosting service ให้ อัตโนมัตินะครับ แต่ว่าพอมันไม่มีอ่ะ มันก็ เออ ไม่เป็นไร ก็ไปใช้ Azure ใช้ Lambda เอา จริงๆ ที่ตอนแรกกะจะไปสุดกว่านั้นน่ะคือ ผมจะเอา GCP เข้ามาด้วย แต่ว่าเรียนไม่ทันนะครับ

ใช้ MongoDB Query ข้อมูลจาก S3 แทน Database ปกติ9:47

ทีนี้ถัดมา ถ้าเกิดเป็นภาพใหม่มี Lambda

ถัดจากตรงนี้มีอะไรอีกใช่มั้ยครับ จริงๆ อ่ะ ตรงนี้มันควรจะเป็น database แต่ว่าผมวันนี้ผมอยากจะลองอะไรใหม่ๆ ถึงแม้ว่าวันนี้เราจะมาเล่าเรื่องมองโกดีบีครับ แต่เราไม่ได้ใช้มองโกดีบีเป็น database แต่เราจะใช้อย่างอื่นเป็น database แล้วเราจะใช้มองโกดีบีเนี่ยเป็นคน query แต่ data ไม่ได้อยู่ใน database ของมองโกดีบีเว้ย มันอยู่ใน S3 อยู่ใน AWS

ลองคิดถึงว่าเราอ่ะมี data อยู่ใน AWS S3 เว้ย แต่ว่าเราอ่ะชอบการเขียน query ด้วยมองโกดีบี คิดเอาเองนะ เผื่อมีคนชอบ แต่ผมอ่ะชอบคนนึง เออ อยากจะ query ด้วย MQL MongoDB Query Language แล้วไปเรียก query data จาก S3 ขึ้นมา จะทำยังไงนะครับ นั่นแหละ เราจะมาคุยกันเรื่องตรงนี้

ทางเลือกสำหรับผู้ใช้ Service ที่ถูก Deprecate10:34

ทีนี้ก็อาจจะถามว่า แล้วไอ้ service ที่มันจะ deprecated ไปแล้วอ่ะ แล้วถ้าเกิดพูดถึงคนที่กำลังจะทำแอปแล้ว หรือทำไปแล้วอ่ะ เริ่มทำเอา service ที่มันจะ deprecated ไปแล้วอ่ะ มาใช้งานจะทำยังไงดี ง่ายๆ เลยครับ คนที่ใช้ไปแล้วก็

มองโกดีบีบอกว่าไปหา alternative library เอานะครับ คือแค่จะบอกว่าใครที่ใช้ deprecated service เมื่อกี้นะครับ แล้วกำลังหาวิธีแก้นะครับ ไม่มีวิธีแก้ใดๆ ดีไปกว่าไปหา lib อื่นมาใช้งาน ถ้าเกิดไปอ่านในเว็บมองโกดีบี ผมต้องสู้เสียงด้วย ถ้าเกิดกำลังไปหา lib มาใช้แทนนะครับ ในเว็บมองโกดีบีเขียนเลยนะว่า อยากจะได้อะไรมาใช้แทนนะครับ มันจะมี alternative library มาสอนนะครับ ใครที่ใช้ App Service ไปแล้ว ใครที่ใช้ device sync ไปแล้วเนี่ย แล้วอยากจะหา alternative library เนี่ย ไปอ่านในเว็บมองโกดีบีได้เลยนะครับ แล้วเค้าจะบอกวิธีการทำตรงนี้ให้นั่นเองครับ

ครับ อ้อ โอเคนะครับ อันนี้พูดเผื่อก่อนหน้าที่เราจะไปที่ demo นะครับ เราก็เลยอยากจะบอกว่าใครที่เริ่มไปแล้ว กลับตัวไม่ทัน มีทางไปต่อให้เป็น alternative library นะครับ ดังนั้นแปลว่า 1 service ที่คุณเคยใช้กับ มองโกดีบีเนี่ย มันจะแตกแยกย่อยเป็น Hydra นะครับ ออกมาเป็น alternative library อย่างงี้นะครับ

เริ่ม Demo: Static Web App, Lambda, MongoDB Query บน S3 และ GitHub CI/CD11:45

โอเค งั้นเรามาลองดูตัวอย่างกันดีกว่านะครับ

มาเสียบไมค์

ใช่เหมือน feel เหมือนแบบว่า เฮ้ยน้องจะไปไหนอ่ะ อ๋อ ไปไกลจัง รถติดอ่ะน้องลงนี้เลยได้ป่าว อะไรอย่างเงี้ย feel ประมาณนั้นนะครับ

เอ่อ คือวันนี้ไม่ได้มาในฐานะมองโกดีบีแล้วนะ มันก็เลยแบบว่าพูดได้เต็มที่นะครับ เอ่อ แต่ว่าอย่าให้มันไปไกลกว่านี้นะครับ โอเค เอาล่ะ ผมบอกว่าเราจะใช้ Static Web App ใช่มั้ยครับ ในการโฮสต์ frontend เรามี Lambda เป็นฟังก์ชันในการ execute API เราใช้มองโกดีบีเป็นคน query แต่ไม่เก็บ data แต่ data อยู่บน S3 แทนนะครับ ขาดอะไรอีก อ้อ แล้วก็มี GitHub เป็น CI/CD ในการหยิบโค้ดมา build แล้ว deploy นั่นเองนะครับ เริ่มจากอย่างงี้ก่อนเลยนะครับ เราต้องเริ่มจากคนที่เป็นคนจัดการงานนะครับ นั่นคือ GitHub Actions นั่นเองนะครับ อ่ะ ขออนุญาตเปิดหน้าจอใหม่นะครับ เพราะว่าไม่รู้ช้างมันเปิดอะไรทิ้งไว้บ้าง

โอเค โอ้ แป๊บนึงนะ อยากได้ยาดมขึ้นมาทันที เป็นหวัด อ่า GitHub เอ่อ เราไปที่โปรเจกต์ของเรานะครับ

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

โอเค เยี่ยม

ถ้าคอยขายของก็คอยหยิบอย่างงี้ งี้ครับ

GitHub Actions คืออะไร? CI/CD เบื้องต้น13:37

เราอันดับแรก มีใครในที่นี่ไม่รู้จัก GitHub Actions บ้างครับ ขอดูมือหน่อยคนที่ไม่รู้จัก มีไม่รู้จักจริงๆ ใช่มั้ยฮะ ไม่รู้จักจริงๆ ครับ แหม มีใครไม่รู้จัก CI/CD มั้ยครับ โอเค ไม่รู้จัก งั้นเล่าคร่าวๆ ก่อนว่า CI/CD คืออะไรนะครับ เนื่องจากเซคชั่นนี้จะเป็นแบบ intermediate นิดนึงนะครับ

คือถ้าเกิดเรานึกถึงเวลาเราพัฒนา app 1 ตัว แล้วต้องการจะ deploy เนี่ย เราก็จะมี process ตั้งแต่แบบ build หยิบไป deploy ใช่มั้ยครับ ซึ่งมันจะเป็น routine ซ้ำๆ ที่ทำซ้ำๆ แล้วมันอาจจะเกิดโอกาสผิดพลาดได้ในบางครั้ง เวลาเราพิมพ์ผิดใช่มั้ยครับ หรือบางทีเราก็ deploy ไม่ทันจังหวะที่ dev หรือว่าทีมต่างๆ เนี่ยเค้าจะอาจจะเอาไปเทสต่อ เราก็เลยมี tool ตัวนึงครับ ก็เรียกว่าพวก CI/CD แหละเนาะ CI/CD เนี่ยเป็นคนที่คอยหยิบพวกโค้ดเรามา build มา deploy ให้ automate นั่นเองนะครับ ซึ่งใน GitHub เนี่ยมันมีตัวที่ชื่อว่า GitHub Actions นะครับ ทำหน้าที่ตรงนี้ให้นั่นเองนะครับ ดังนั้น เราทำอะไรกับ CI/CD ในโปรเจคนี้บ้าง

อย่าไปสนใจที่มันแดงๆ นะครับ แดงจริงนะครับ

คือเนื่องจากเรามี front-end ใช่มั้ยครับ เรามี front-end เป็นเว็บนะครับ มี back-end ต้องลง Lambda แล้วถ้าเกิดสมมติว่ามี 2 ทีมเค้าพัฒนาทั้ง front-end แล้วก็ back-end เนี่ยต้องการ push ขึ้นไป แบบไม่อยากให้ใครไปยุ่ง process การ build deploy เราก็ใช้ GitHub Actions จัดการตรงนี้ให้ แล้วในฐานะที่เราเป็นคนเดียวเนี่ยพัฒนาเว็บ ทั้ง stack เองเนี่ย เราจะทำยังไงให้มันสามารถ auto deploy ทั้งก้อนได้ เราก็ต้องใช้ตัว GitHub Actions เนี่ย มาเป็นคนจัดการและ deploy ให้นั่นเอง แปลว่าทันทีที่ผมแก้โค้ดปุ๊บ แล้วผม commit push ขึ้น GitHub มันจะถูกทำการ build แล้ว deploy ลงแต่ละ destination ให้เอง อย่างเมื่อกี้เรา build front-end ลง Azure เรา build ตัว Lambda ลง Lambda นั่นเองนะครับ

อ่า แล้วก็ส่วน CSV เดี๋ยวค่อยว่ากันไปนะครับ อันดับแรกนะครับ เรามาแอบดูตัวที่เป็นฟังก์ชัน ที่ผมเขียนไว้ก่อน ตัวนี้นะครับ

โอเค คือวิธีการใช้งาน มีใครไม่รู้จัก YAML มั้ยครับตรงนี้ น่าจะคุ้นเคยกันทุกคนเนาะ YAML เนี่ยมันก็คือเป็น data structure แบบนึงเนาะ ในวิธีการ define เป็นแบบว่าเอาไว้ represent data นะครับ เวลาการ config ตัว GitHub Actions เนี่ย มันก็เขียนเป็น YAML เนาะ เราบอกไปเลยว่าเราอยากจะทำอะไร ตอนนี้ อย่างเช่น ลองนึกถึง process เราจะ build เว็บ 1 เว็บ เราก็ต้องมี Node.js ก่อน มี Node.js เสร็จปุ๊บก็ต้องทำการติดตั้ง dependency ใช่มั้ยครับ ติดตั้งเสร็จ build build เสร็จแล้ว deploy ดังนั้นเราสามารถทำการบอกเราเนี่ยเป็น step

เป็น step แบบนี้ได้นะครับ เราอยากใช้เวอร์ชันไหน อ่า เราใช้ Node.js เวอร์ชัน 20 ขึ้นไป

มีการติดตั้ง dependency เห็นมั้ยครับ ใครที่เคยใช้ Node.js ก็ควรจะใช้กันทุกคนอยู่นะครับ มางาน JavaScript นะครับ ก็ต้องติดตั้งใช่มั้ยครับ ติดตั้งโค้ดเก็บไว้ที่ไหนใช่มั้ยครับ เสร็จแล้วยังไงต่อ deploy ลง AWS ใช่มั้ยครับ

แล้วทีนี้มันเป็นของ secret เออ ก็โชว์ไม่ได้ใช่มั้ยครับ โชว์ไม่ได้ก็ต้อง hide ไว้ ทีนี้ พออยากจะ hide เราก็สามารถเรียกผ่าน เหมือน environment variable มาแปะได้นะครับ เสร็จแล้ว zip zip เสร็จแล้ว deploy ลง Lambda อันนี้คือ deploy ตัว API ส่วนของเว็บ Azure นะครับ เนื่องจาก Azure Static Web App เนี่ย มันมีความสามารถในการ build อัตโนมัติ แล้ว copy วางใช่มั้ยครับ เราก็เลยวางแค่บล็อกเดียว แล้วบอกว่าโค้ดเราเนี่ยอยู่ที่ไหน โค้ดเราอยู่ที่โฟลเดอร์ชื่อ front-end แล้วหลังจาก build เสร็จแล้วเนี่ย โค้ดไปเก็บไว้ที่ไหน อยู่ที่ dist แล้วบอกแค่นี้นะครับ process เหล่านี้ครับ เดี๋ยว GitHub Actions จะไล่ run เป็นตาม step ตาม step ให้นะครับ แล้วก็ deploy ลงตามนั้นให้นั่นเองนะครับ

โครงสร้างโปรเจกต์ตัวอย่าง17:12

สิ่งนึงที่ยังไม่ได้ให้ดูนะครับ นั่นคือตัว project structure หน้าตาเป็นยังไงนะครับ ถ้าเกิดเมื่อกี้เราเห็นกันผ่านๆ นะครับ เรามีโฟลเดอร์ตามนี้เลยเห็นมั้ยฮะ ผมก็ define ไว้ง่ายๆ เลย มี back-end front-end ใช่มั้ยครับ แปลว่าจังหวะที่ตอนที่ build front-end back-end เนี่ย มันก็จะมาอ่านโค้ดในนี้นะครับ โปรเจกต์เนี่ยก็จะเข้าใจง่ายนิดนึงนะครับ ชื่อไฟล์นะครับ Maidreamin นะครับ อ่า พอดีจริงๆ ช้างบ่นหลายรอบแล้วว่า เอ๊ย เราไปร้านเนี่ยเราไม่มีตัวเก็บใบเสร็จเลย จะทำยังไงดี ผมก็เลยเอามาทำเป็นตัวอย่างในวันนี้ให้นะครับ อาจจะยังไม่เสร็จ ช้างอยู่เปล่า ไม่อยู่แล้ว ไม่อยู่แล้ว เรียบร้อยกูละ

เลยทำเป็นตัวระบบตัวนึงขึ้นมานะครับ เดี๋ยวตัวเนี้ยมันจะทำการ extract data จาก S3 นะครับ ลองคิดถึงว่าเราบันทึก data ใส่ Excel เนาะ เราต้องการจะสามารถให้ query ได้เนี่ย แล้วไม่อยากจะเปิด Excel เนี่ย ก็ทำเป็น CSV เก็บไว้ใน S3 แล้วก็ใช้เขียนเป็น web app นึงตัว สามารถทำ UI อะไรเงี้ยได้นะครับ แต่เรายังไม่คุยเรื่อง data แล้วกัน เราคุยกันเรื่องของตัว structure ตัว API ก่อน ใน API นะครับ ใครที่ไม่เคยใช้ Lambda เนี่ย

มันเป็นแค่หน้า UI ตัวหน้าหนึ่งที่เราสามารถเขียนโค้ด แล้วก็ให้มันรันเป็น function เป็นรอบๆ ไปนะครับ เราส่ง HTTP เข้าไปปุ๊บก็ทำตาม procedure ในเนี้ยผมก็แค่บอกว่า ถ้าเกิดมีอะไรมาเนี่ย ก็แค่ไป query มา นี่โค้ดยังไม่อัพเดตเลยเนี่ย เดี๋ยวผมแก้โค้ดใหม่นะครับ แล้วระหว่างนี้ก็มีการให้ไป connect MongoDB อะไรๆ ให้เรียบร้อยนะครับ เพื่อทำการเหมือน query data แล้ว export ออกไปนั่นเองนะครับ อันนี้คือ idea แล้วก็ logic ของการทำ API ของโปรเจคนี้นะครับ ส่วน frontend เองก็ไม่มีอะไรมาก เป็นหน้าจอธรรมดาๆ นั่นเองนะครับ ต้องบอกก่อนนะว่าโปรเจคนี้อยู่ในขั้นตอนพัฒนา เดี๋ยวเราจะมีการแก้โค้ดกันตรงนี้ด้วยนะครับ

ฟังดูดีนะ

อันดับแรกนะครับ frontend ก็ไม่มีอะไรเป็นโค้ดธรรมดา เรามาดูก่อนว่าเวลาเราจะทำตัวโปรเจค ตัว static web app เนี่ยต้องทำยังไงบ้างนะครับ เราเริ่มจากหน้านี่ก่อนดิ

ไม่เป็นไร ยอมได้

ตั้งค่า Static Web App บน Azure19:23

อันดับแรกนะครับ ถ้าเกิดเราจะเริ่มจากจุดก่อนว่า ถ้าเกิดจะ set up นึงโปรเจคเนี่ย เรารู้แล้วว่าเราจะต้องมีการ define ตัว pipeline เราก็ list ตามนั้นไปใช่มั้ยครับ แต่ถัดมาที่เราต้องมีเนี่ยก็คือ resource ที่จะต้องให้ deploy อย่างเช่นมี frontend backend ใช่มั้ยครับ เราก็ต้องไปสร้าง resource frontend ก่อน อย่างงี้เราก็ไปสร้างใน static web app บน Azure ได้เลยนะครับ static web apps นะครับ วิธีการใช้ static web app บน Azure เนี่ยก็ง่ายมาก search static web app นะครับ กด create ตั้งชื่อ

ผมบอกแล้วนะว่า section นี้เนี่ย เราเน้นกับของฟรีและราคาดีนะครับ ดังนั้นของ Azure ตัว static web app ที่ host เว็บ frontend อย่างเดียวเนี่ย แล้วก็มีฟรีพวก function ด้วยครับ แต่ว่าผมไม่ใช้นะ มันฟรีนั่นเองนะครับ เราสามารถที่จะตั้งชื่อโปรเจคใหม่ขึ้นมาได้นะครับ ผมลองดูนะ bkkjs นะครับ แล้วก็ตั้งชื่อให้โปรเจคนี้ ผมตั้งชื่อนี้ชื่อว่า my made ni

แต่ว่าอันนี้เคยตั้งไปแล้ว ผมก็เลยตั้งชื่อใหม่ 01 นะครับ 01 นี่จะเห็นได้ว่ามันจะมี free plan นะครับ

ใช้ฟรีแล้วกันนะครับ ไม่เอา standard ก็ได้ อย่างงี้ก่อน

ผมเล่าก่อนว่า standard กับ free มันต่างกันยังไงเนาะ standard มันแค่รับ traffic ได้เยอะขึ้นนะครับ แล้วก็เก็บตัว storage ได้เยอะขึ้นมั้ง size code แล้วก็เหมือนสามารถต่อเป็น private endpoint ได้ ผมจำไม่ได้นะครับ ไม่ได้อยู่ Microsoft แล้ว ผมจำไม่ได้ละ

เราจะทำการ manual deploy เนาะ เราจะไม่อยากเอา คือถ้าเกิดเราเลือกตรงเนี้ย มันคือมันจะทำการสร้าง pipeline ให้อัตโนมัติ คือถ้าเกิดใครใช้ static web app ครับ แล้วบอกว่าอยากจะทำ automate deploy จาก GitHub หรือจาก Azure DevOps เนี่ย เราสามารถกดจากตรงนี้ได้เลยนะครับ แล้วมันก็จะสร้าง pipeline ให้นั่นเองนะครับ อย่างอันนี้เราไม่เอา เราต้องการจะเหมือนแบบ manual นะครับ ผมเลือกเป็น others นะครับ ส่วน advance เนี่ยเราอาจจะไม่ได้ใช้พวก function เหล่านี้นะครับ แต่เราเลือกเอาว่า deploy ลง East Asia distributed function เพราะเราไม่ได้ใช้ Azure function ดังนั้นเราก็เลยไม่ติ๊กนะครับ review + create ไปเลยนะครับ

กด create ปึ๊บ รอสักครู่

คือต้องบอกว่า resource นี่มันสร้างง่ายและเร็วนะครับ เพราะว่าตัวมันเล็กนะครับ งั้นมันสร้างง่าย กด go to resource นะครับ อันดับแรกนะครับ สิ่งที่เราต้องทำนะครับ เรากดสร้างปุ๊บ เราเช็กหน้าเว็บก่อน หน้าตาเป็นยังไง

Deploy Frontend ลง Azure Static Web App22:00

หน้าตาตัวอย่างเป็นอย่างงี้ โอเค congratulations on your website ใช่มั้ยครับ ทีนี้ถ้าเกิดเราบอกว่าต้องการจะให้ deploy เว็บลง บน static web app ทำยังไงนะครับ เราแค่คลิกตรงนี้ครับ manage deployment token นะครับ ใครจำได้จำไปนะครับ

เสร็จแล้วนะครับ เมื่อกี้ที่เราดูกันไปในตัว pipeline ผม

ผมอยู่นี่

คือเมื่อกี้นะครับ ตอนจังหวะที่ deploy front-end เนี่ย เรามีการ require ใช้ secret ชื่อประมาณนี้ใช่มั้ยครับ อยากให้ deploy ลงที่นี่ เราก็แค่ไปแก้ใน secret ของตัว action บน GitHub นะครับ ตรงนี้ แปะอันใหม่ลงไปนะครับ

จบนะครับ ประมาณนี้ ใช้ passkey ด้วย อัพเดตเสร็จปุ๊บ ก็แปลว่าควรจะ deploy ได้แล้วนะครับ

แต่มันจะยัง deploy ไม่ได้เนื่องจาก pipeline ผมเนี่ย มันจะเป็นสเต็ปงี้ deploy ลง Lambda ก่อนแล้วลง Azure ใช่มั้ยครับ ทีนี้ตัว AWS ที่ผมใช้เนี่ย มันเป็นขององค์กรเนาะ ทีนี้มันก็เลยมีการจำกัดเวลาการใช้งาน ผมต้อง gen token ใหม่ทุกๆ กี่นาทีผมไม่แน่ใจ แต่ถี่มาก ดังนั้นขออนุญาต gen token ใหม่แป๊บนึงนะครับ แต่ขออนุญาตเปลี่ยนหน้าจอ

Deploy Backend ลง AWS Lambda23:29

เมื่อกี้สเต็ปแรกใช่มั้ยครับ เราไป get ตัว token สำหรับ deploy นะครับ แล้วผมก็ไป get token AWS สักครู่นะครับ

ใครไม่รู้ก็คือก่อนหน้านี้ ก่อนมาเซ็กชั่นเนี้ย ผมติดปัญหาเรื่อง CORS นะครับ ใน Lambda ผมแก้ไม่ได้เลย นั่งดู YouTube ไม่ช่วยเหมือนกันอันนี้

ถามไปทีนึงครับ ถามคนแรกเลย มั่วนะครับ สุดท้ายแก้เองได้ ผมมี script deploy อยู่

โอเค ผมแก้แป๊บนึงนะครับ เรียบร้อยแล้ว

เป็นอันจบสิ้นนะครับ ผมกลับมาแชร์จอได้เหมือนเดิมแล้ว เพราะว่าผมแก้เรียบร้อยนะครับ แชร์จอเป็น desktop

อันนี้ใครจะจำได้ก็จำไปเหมือนกันนะครับ เพราะว่าเดี๋ยวมันก็ refresh ละนะครับ อันนี้ก็คือไปเซ็ต token สำหรับ deploy Lambda

เดี๋ยวอีกไม่กี่นาที มันจะ regenerate ใหม่นะครับ

ลืมมันไปเถอะนะครับ พูดก็เหมือนไม่มีอะไรเกิดขึ้น

Demo: แก้ไขโค้ดและ Deploy ผ่าน GitHub Actions24:53

เมื่อกี้เราก็เพิ่งอัพเดตไปเรียบร้อยใช่มั้ยครับ แปลว่าเดี๋ยวต่อไปเนี่ย พอเรา commit ใดๆ โค้ดก็ต้องเปลี่ยนแปลงใช่มั้ยครับ ทีนี้เดี๋ยวผมอยากจะให้หน้าเว็บของเราเปลี่ยน แล้วก็โปรเจคเราเปลี่ยนนิดนึงนะครับ ผมเลยอยากจะให้ดูนิดนึงว่าการ deploy ของผมเนี่ย success ผมจะเพิ่มคำนิดนึงลงไปใต้ อันนี้เดี๋ยวมันจะเป็นหน้าเว็บ front-end ของผมเนาะ มันมีชื่อ title เว็บชื่อว่า My Mate ねe อยู่เนาะ ผมจะเขียนนิดนึงว่า by Jirachai ก็ได้

เดี๋ยวผมจะลอง deploy ดูนะครับ แล้วก็ตัว back-end ของเรานะครับ เรามีการแก้ query นะครับ

ถ้าเกิดกลับไปดูที่โค้ดตัว Lambda นะครับ

ใน Lambda เนี่ย เห็นมั้ย โค้ดมันยังเป็นเวอร์ชั่นเก่าอยู่นะครับ เป็นแค่แบบ find document ปกติ ใครไม่คุ้นเคยกับ MongoDB นะครับ find เนี่ยเทียบเท่าเหมือนกับเวลาเรา select where ใน SQL นั่นเองนะครับ find แบบนี้คือหาทุกอย่างนะครับ เราไม่อยากหาทุกอย่างเนาะ เราอยากจะจำกัดนิดนึงนะครับ ผมทำอย่างงี้ เดี๋ยวผมจะทำการอัพโหลดโค้ดนะครับ

ผมตั้งชื่อว่า live demo นะครับ

แล้วก็ push ขึ้นไป แล้วเดี๋ยวมาดูว่าเกิดอะไรขึ้นกันนะครับ เรามาที่ action ใน GitHub

ยังไม่มา ต้องมาแล้ว จังหวะนี้ต้องมาแล้ว มาแล้ว กำลังหมุนอยู่

ขอบคุณมากนะที่ไม่มาทำให้ขายหน้านะตรงนี้นะฮะ ก็จะเห็นได้ว่ามันเริ่มหมุนนะครับ เราสามารถเข้าไปดูได้ว่ามันเกิดอะไรขึ้นบ้างนะครับ ก็จะเห็นได้ว่ามันเริ่ม run ตามสเต็ปที่เราเซ็ตไว้เลย มีการเริ่ม build ตัวโปรเจคเราใช่มั้ยครับ มีการเริ่มจะทำการ checkout โค้ด set up node นะครับ เดี๋ยวรอแป๊บนึง รอดูไป

ผมมากลัวอันนั้นมากเลย ไอ้ที่แดงๆ เมื่อกี้คือแดงเพราะว่า credential หมดอายุนะครับ ยังไม่หมด deploy

ถ้าเสร็จแล้วมันจะต้องขึ้นเขียว deploy แล้วนะครับ รอแป๊บนึง

warning อย่าไปกลัวมัน ผมเห็นมาหลายรอบแล้ว ตอนแรกก็กรี๊ดแตกเลย

โอเค ต่อ VPN อยู่

แป๊บนึง ตอนนี้จังหวะนี้ หงส์ไทยต้องเข้าแล้ว

เฮ้ย ทำไมนานจังเลยอ่ะ ใจไม่ดีละ ขยับละ

อันนี้แค่ตอน pipeline เดี๋ยวไปดูของจริงกันก่อนว่ามันเปลี่ยนรึเปล่านะฮะ

ตรวจสอบผลการ Deploy บน Azure และ Lambda28:00

มาใหม่แล้ว แล้วเปลี่ยนแล้วด้วยนะครับ

เว็บมีอยู่แค่นี้นะครับ หน้าตายังทำไม่เสร็จนะครับ จะบอกว่า search box ก็ยัง search ไม่ได้ด้วยนะ จริงๆ แล้วตอนแรกเลยนะ ตามตั้งใจเนี่ย ผมก็ต้องการจะมีทำ มีโชว์ vector search ใช้ search ใช้พวก Atlas search ด้วย แต่ว่าเห็นพี่ฟี่เล่าไปแล้ว ก็เลยเดี๋ยวไปดูเซ็กชั่นพี่ฟี่เอานะครับ พี่ฟี่มาจาก MongoDB เหมือนกันนะครับ มาจากทีมเดียวกันนะครับ เหมือนพี่ฟี่เล่าไปแล้วนะครับ หรือไม่ก็เดี๋ยวผมทำคลิปลง YouTube ไปดูกันเองได้นะครับ

จากตรงนี้ไปดู Lambda กันต่อ คือโอเค deploy ลง Azure เนี่ย มันก็น่าจะตรงไปตรงมาแหละ เพราะว่ามันก็ดูเหมือนจะ auto generate มาดูโค้ดวันนี้กันดีกว่า ผม refresh 1 ที ตกใจละ

สงสัย Microsoft โกรธผมนะฮะ

รอแป๊บนึง

อันตรายครับ ใจเย็นก่อน เนี่ยผมมีฟังก์ชันชื่อว่า 𝚎𝚡𝚎𝚌𝚞𝚝𝚎𝙼𝚎 นะครับ

โอเค มามั้ย เปลี่ยนมั้ย เปลี่ยนแล้วเห็นป่ะ ทุกคนก็แบบตบมืออะไรกันหนักตรงนี้นะฮะ เดี๋ยวเรามาดูกันของจริงนะครับ

อธิบาย Code Lambda และ Aggregation ใน MongoDB29:54

ตอนนี้เรามาอ่าน code code ของเราคือมันจะทำการ run aggregate นะครับ aggregate นี่เป็นของเด็ดของ MongoDB เลย คือเราคิดว่าถ้าเกิดเราจะต้องทำการ query data แล้วต้องมีการปรับเปลี่ยน structure data ทำการไป join data เพิ่มเติม ถ้าเกิดคุณลองคิดเป็น query ใน SQL

คุณคิดว่าคุณจะต้องเขียนยังไงบ้างครับ มันยาวมากใช่มั้ย เป็น string select นู่นนี่วงเล็บเข้าไปต่อ join left นู่นเปลี่ยน as เวลาจะแก้ใช่ run ปุ๊บ fail จะแก้ทีก็ต้องไปไล่ trace ใน query string ใช่มั้ย แต่ว่าพอเป็น MongoDB ครับ เราสามารถใช้ aggregate ได้ aggregate มันคือการทำของเราเมื่อกี้ให้เป็น step เป็น step เป็น step นะครับ อย่างอันนี้ผมบอกว่าต้องการจะ match นะครับ match data ที่ app เท่ากับ mymaidne นะครับ แล้วเราบอกว่าเราอยากจะเปลี่ยน structure นิดนึง structure data ผมโชว์ให้ดูก่อน หน้าตาประมาณนี้ หน้าตา structure เป็นประมาณนี้นะครับ ใครที่อยู่ในห้องนี้แล้วมีชื่ออยู่ตามนี้ จ่ายตังค์คุณช้างด้วยนะครับ

อันนี้คือ structure data นะครับ structure data ของจริงนะครับ แต่ว่า data เนี่ยมีไม่ครบนะครับ สมมตินะ อันนี้ก็คือเราจะมี field ชื่อว่า name type price id date แล้วก็ owner ใช่มั้ยครับ owner ก็คือใครสั่งนั่นเองนะครับ เฮ้ยช้างนี่สั่งเยอะนะเนี่ย ช้างไม่อยู่ ริฟฟี่อยู่ มีชื่อริฟฟี่มั้ย ไม่มี รอดไป

อันนี้คือ data นะครับ นี่เป็น CSV นะครับ เสร็จแล้วผมอัปโหลด CSV เนี่ยไปเก็บไว้บน S3 S3 คือที่เก็บไฟล์ของ AWS นะครับ

ผมก็แค่อัปโหลด data เมื่อกี้ลงมาเก็บไว้ใน S3 เนี่ย เก็บเป็นอย่างงี้ใช่มั้ยครับ

Data Federation: ดึงข้อมูลจาก S3 ด้วย MongoDB Query Language31:56

ตอนนี้เรามี 3 อย่างละ เรามี front-end เรามี back-end นะครับ เรามี data แต่เรายังไม่มีจุดตรงกลางครับ ตัว query data ถ้าเกิดเราใช้ MongoDB ปกติเนี่ย เราสามารถ query ตรงๆ ได้เลยใช่มั้ย query ไปที่ database แต่ว่าวันนี้ database เราทำเป็น file system เป็น CSV ด้วย ไม่ได้เป็น structure แบบ nested data แบบ MongoDB ด้วย แล้วอยู่บน S3 แล้วเราจะใช้อะไรครับ บน MongoDB ครับ เรามี service มากมาย ที่ยังไม่โดน deprecate นะครับ

แต่ต้องบอกว่าไอ้จอเมื่อกี้ที่โชว์ ไม่ใช่ service ที่เหลือนะครับ มันยังเหลืออีกเยอะกว่านั้นนะครับ แต่ว่าพอดีหน้าจออัดได้แค่นั้นนะครับ ทีนี้มันมี service ตัวนึงครับ ชื่อว่า data federation นะครับ

data federation เนี่ยมีหน้าที่ทำ ETL หรือจะ ELT ก็ได้นะครับ ก็คือทำการ extract data เป็น data มา transform แล้วไปเก็บสักที่นึงหรือโชว์ออกมานะครับ data federation เนี่ยมันสามารถไปดึง data จาก MongoDB cluster ดึงจาก HTTP ดึงจาก S3 ดึงจาก Azure blob storage ก็ได้นะครับ แล้วอยากจะทำอะไรก็แล้วแต่ ที่เราจะเขียนเป็น MQL นั่นเองนะครับ ผมก็เลยสร้าง data federation ขึ้นมา 1 instance ครับ ชื่อว่า MyMaidNeReal นะครับ

แปลว่าก่อนหน้านี้มีหลาย version นะครับ อันนี้เป็นตัว real แล้วนะครับ ทีนี้ใน data federation เนี่ยครับ ผมก็ทำอย่างงี้ครับ ผมก็ set up เลยว่าผมอยากให้ดึง data จากไหน

ผมเขียนเลยว่าผมอยากให้ดึงจาก jirachai-sg

sg คือ Singapore stg คือ storage นะครับ ก็คือตัวนี้ใช่มั้ย คือ S3 bucket ตัวนี้นะครับ แล้วก็อยากให้ดึงไฟล์ตัวนี้ออกมาอ่านนั่นเองนะครับ แล้วก็ทำการ define path ไว้เลย เราทำการ define path ไว้ในตัว data federation นะครับ ในนี้เวลาเราเพิ่มเนี่ยเราสามารถเพิ่มได้จากตรงนี้เลยนะครับ เราบอกว่าอยากให้ไปดึงที่ data ไหนนะครับ อย่างเมื่อกี้นะครับ เราบอกว่าให้ดึงจาก S3 ใช่มั้ยครับ ผมเขียนนี่คือ trick นะครับ copy มา ผมบอกว่าอยากให้ดึงจาก folder data ใช่มั้ยครับ ผมเขียนแค่นี้เลย เขียนแค่นี้เลยจบนะครับ แล้วทีนี้ structure data ของเราเนี่ย มันจะเป็น bucket เราตามด้วย data นะครับ แล้วก็ตามด้วยชื่อ app นั่นเองนะครับ แล้วผมก็บอกว่า slash app slash app อย่างนี้นะครับ เสร็จแล้วมันก็จะถามว่า app เนี่ยคืออะไร เราบอกว่า app เนี่ย type เป็น string เพราะว่าเราสามารถที่จะเอาตัวนี้ เป็นเหมือนจุดไว้ query เป็นเหมือน parameter ไว้ query ได้ เพราะว่าใน structure ทั้ง project เนี่ย เรามี CSV หลายอัน มี folder หลายอันใช่มั้ยครับ เราต้องการจะดึงสักอันนึงเนี่ย เราสามารถมาปรับตรงนี้ได้นะครับ แล้วผมตั้งชื่อว่า app

Demo: สร้าง Data Federation และ Query ข้อมูลจาก S3 ผ่าน Compass34:43

เดี๋ยวเรามาดู result กันดีกว่านะครับ ผมกด save ปั๊บ

ลืมอัปนึง ยังไม่ได้ทำ ก็คือต้องทำการสร้าง ผมจะสร้าง database ตัวใหม่ขึ้นมานะครับ สร้าง database อีกตัวนึงนะครับ ชื่อว่า jsbkk นะครับ collection name ชื่อว่า demo แล้วผมก็ลากอันนี้ใส่ลงมาในอันนี้ ลากที่เพิ่งสร้าง connection เมื่อกี้ใส่ลงมาในนี้นะครับ ลากลงมาแปะ ปึ๊บ อยู่ภายใน database jsbkk demo

ใช่มั้ยครับ กด save แล้วก็ลองกด connect นะครับ

กด connect ปั๊บ

ใช้ Compass แล้วกันนะครับ Compass นี่คือตัว UI สำหรับ query data ของ MongoDB นั่นเองนะครับ

ผมเพิ่ม connection string เฮ้ยแบบนี้คุณก็เห็นรหัสผมหมดสิ ไม่ปิดอ่ะ ผมโชว์เลยเดี๋ยวลบออกละ นี่ เก๋ๆ

โอเค connect เข้าไป

กดๆ มาแล้ว

เกิดอะไรขึ้น นี่มี structure data ขึ้นมาละ มีเป็น database ขึ้นมาตรงนี้ เห็นไหมฮะ มี collection ชื่อ demo พอคลิกเข้าไปครับ พอคลิกเข้าไป มันใช้เวลานิดนึง เพราะว่า MongoDB เนี่ยต้องวิ่งไปหา AWS ไปอ่าน read file ทั้งหมด S3 แล้วแตกออกมา เห็นไหมครับ นี่เป็น CSV นะ แต่ว่า data federation ทำการอ่านตาม path ที่เราต้องการ แล้วยิ่งไปกว่านั้น ยังจำตัวไฟล์ Excel ของเราที่เป็นค่าใช้จ่าย ของแต่ละคนในร้านเมฆได้ใช่ไหมครับ ร้าน Maidreamin นะฮะ field นะ เราสามารถทำได้นะครับ

เราสามารถ query ได้ อย่างเช่นอยากบอกว่า อยากจะ query เอาเฉพาะช้าง

เราก็เลยเขียนไปเลย match match เมื่อกี้อะไร owner ใช่ไหมครับ owner เป็นช้าง

มันก็จะโชว์ data เฉพาะช้างเห็นไหม

โอเค มีแต่ช้าง มีเชกิด้วย ถ้าเกิดบอกว่า อยากจะดูเอาเฉพาะอันที่ราคา แพงกว่า 200 บาทขึ้นไป ไม่เอา เอา 800 เลยดีกว่า

เมื่อกี้มีช่องอะไรนะ price ใช่ไหมครับ

เอาช้างออกดีกว่า อยากรู้ว่าใคร spend เยอะดีกว่านะครับ price gte มันโดนอยู่แล้ว

gte นี่คือ operator ใน aggregation ย่อมาจากคำว่า greater than equal

Generative AI ช่วยเขียน Query MongoDB37:51

เหลือนาทีเดียวเหรอ greater than equal 800

ผมว่าผมเขียน structure ผิด ผมลืมจะเขียน greater than

ไม่เป็นไร เรามี generative AI ครับ

ใครไม่รู้ว่าเรามี generative AI

คิดว่าเป็น script ใช่ไหม ล็อกอินแป๊บ

เราสามารถ ถ้าเกิดเราบอกว่าเราอยากจะเขียน query ใน MongoDB เนี่ย จำไม่ได้จะทำยังไง เราสามารถถาม generative AI ได้นะครับ

login successfully

หน้าต้อง callback แล้ว จังหวะนี้ต้อง callback แล้ว นี่ครับ ใครที่นึก query MongoDB ไม่ออก แล้วต้องการจะเขียนเนี่ย เราคุยกับ generative AI ที่มากับ MongoDB ได้เลย อย่างเช่นบอกว่า query price greater

เขียนแบบเป็นความคิดนะครับ คือเราก็รู้นะว่า generative AI มันสามารถ เกิดเป็นแบบว่าของที่มันไม่ถูกต้องได้ เป็นแบบโดนแบบว่า hallucinate นู่นนี่นั่นได้ ดังนั้นพยายามเขียนให้มัน precise เอาไว้ greater than or equals นะครับ 800

ไม่เป็นไร พิมพ์ผิดไปนิดนึง กด generate มันแก้ให้ผม

เห็นไหมครับ แล้วเราก็จะเห็นได้ว่าเราสามารถ query data ได้ มีแต่ช้างว่ะ ตบมือให้ช้างหน่อย ช้างเป็น top spender ครับ อันนี้สิ่งที่ใครที่เพิ่งเข้ามาแล้วสงสัยว่านี่คืออะไร นี่คือเราทำการ query data จาก S3 นะครับ ซึ่งเป็นไฟล์โดยการใช้ MongoDB query language

เท่านี้เองนะครับ

สรุป Demo และช่องทางติดตาม40:36

แล้วเราก็เลยเอาอันนี้ใส่เข้าไปใน lambda ใช่ไหมครับ ใส่ไปใน lambda แล้วเดี๋ยวเรามาดูกันนะว่าหน้าเว็บเราเนี่ย จะสามารถ query ออกมาได้ไหมนะครับ

มันเอา 89 มาด้วยเหรอ ไหนดูซิ ใช่ครับ เพราะว่าอันนี้มันเป็น string

อันนี้ผมผิดเอง ต้องไปทำพวก casting เป็นพวก true number อะไรพวกนี้นะครับ อีกทีนึง not today เดี๋ยวพี่ไทกระโดดถีบแล้ว ขอบคุณที่เช็กตรงนี้นะครับ มี 89 ติดมาเพราะเป็น string นะครับ ขออภัยด้วยนะครับ พอมันเป็น string มันก็จะเทียบกันเป็น string เรามาดู result สุดท้ายกันนิดนึงนะครับ

กด search มันต้องโชว์ออกมาเนาะ

สำหรับวันนี้ก็ขอบคุณมากเลยนะครับ

ประมาณนี้ก่อนแล้วกัน คือเอาเป็นว่าถ้าเกิดมันติดมันก็จะเห็น แบบที่เราเห็นเนาะ ที่แบบมันออกเป็น data แต่ว่าจริงๆ ผมมีหน้าเว็บนึงที่มันควรจะใช้ได้ ก็คือหน้านี้นะครับ

มี backup

ถ้าอยากดูภาคต่อไปไปดูใน YouTube โอเค ไม่ออกไม่เป็นไร ประมาณนี้นะครับ ขอบคุณมากเลย ขอบคุณครับ สวัสดีครับ

ขอปิด section ก่อนจากนะครับ

คำแนะนำสำหรับผู้ใช้ Service ที่ถูก Deprecate และช่องทางติดตามเพิ่มเติม42:08

สำหรับใครที่บอกเมื่อกี้นะครับ ใครที่เผลอ deploy พวก deprecated service ไปแล้ว สามารถไปตามอ่านได้ มันจะบอกอยู่ว่าต้องใช้ lib อะไรนะครับ ใช้ได้เลยนะครับ

ใครอยากจะติดตามต่อนะครับ ก็มีช่องทางตามนี้นะครับ โค้ดวันนี้เดี๋ยวผมไป publish ไว้ให้นะครับ ไปแอบดูพวก pipeline อะไรต่างๆ ได้ ก็เป็น intermediate นะครับ blog แล้วก็มี YouTube นะครับ ประมาณนี้นั่นเองนะครับ