อบรมการพัฒนาเว็บแอปพลิเคชันด้วย Next.js

ก่อนเปิดเทอมปี 3 เทอม 2 ทางภาคได้มีการจัดโครงการอบรมด้วย Next.js เพื่อเอาไว้ใช้ในการฝึกทำงานสหกิจศึกษาจะได้่มีความรู้ไว้ติดตัวตอนทำงานก็เลยสนใจเลยได้สมัครเข้าอบรมครั้งนี้ไป

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

อบรมวันแรกทำ Pre-Test ได้คะแนน 7/10 เอาจริงโจทย์มันไม่ได้ยากอะไรเลยคือนี้รีบอ่านรีบทำให้เสร็จไม่ได้อ่านคำถามได้ให้ถี่ถ่วนรอบขอบกว่านี้เลยได้คะแนนแค่นี้ ตัดภาพมาที่การสอนเขาสอนให้ลงเครื่องมือ Node.js ก่อนแล้วใช้คำสั่งติดตั้ง Next.js ซึ่งก็ทำตาม steps ไม่ได้ยากจากนั้นเขาก็เริ่มสอนพื้นฐานการใช้งานปูพื้นฐาน React, อธิบายข้อดีของ Next.js ฟีเจอร์มีอะไรบ้าง, การทำ Routing ใน Next.js ทำยังไง, สอน React Hooks อย่าง useState กับ useEffect, สอนสร้าง Components, สอนการส่งค่า Props เข้าไปใน Components ทำยังไง, สอนยิง API Requests การนำข้อมูลที่ได้มาจาก API มาแสดงผลบนหน้าจอเขียนยังไง, สอนส่งค่า params ที่ส่งเข้าไปใน path, สอนใช้ Tailwind CSS, สอนใช้ Reactstrap แล้วก็อื่นๆ วันนี้ก็ไม่มีไรมากนั่งฟังพี่เขาสอนเขียนโค้ดตามพี่เค้าอย่างเดียว มีกินรับประทานอาหารพัก break บ้างสอนจนเสร็จแล้วก็กลับบ้าน

วันสุดท้ายของการอบรม บอกเลยวันนี้เราเขียนโค้ดมันมือมากคือแบบนั่งเขียนโค้ดทั้งวันแบบเขียนเองกับมือไม่ได้ดูหรือทำตามพี่เขาคือเลยคือเห็นว่าวันนี้เหมือนมีทำ Workshop แล้วพี่เขาส่งลิ้งค์ Repo คือตอนนั้นรู้เลยว่าจะให้ทำงานแน่ๆก็เลย fork repo ก่อนแล้วก็ clone ลงเครื่องจะได้รีบทำให้เสร็จพอมาดูงานภาพตัวอย่างเว็บไซต์แล้วเราก็ทำเลยมันให้ทำการส่ง request เพื่อขอข้อมูล API เอาข้อมูลสินค้าเอามาแสดงผลบนหน้าเว็บ จากนั้นจะมี Searchbar ให้ค้นหาสินค้าส่วนนี้เราทำเองเหมือนของพี่เขาจะสอนยิง request เอาข้อมูลมารอบนึงแล้วมา filter สินค้าเอา แต่ของเรายิง request ที่มีเส้น API สำหรับ search สินค้าเลย ถึงตรงนี้พี่เขาสอนช้าเราไม่อยากรอพี่เขาสอนเลยเขียนเองหมดทำถึงตรง การแก้ไขข้อมูลสินค้า, ลบสินค้า ซึ่งมันแก้ไขข้อมูลใน state ไม่ได้แก่ไขข้อมูลจริงที่ฐานข้อมูลก็เลยทำๆไป ส่วนการส่งงานส่งผ่านแบบฟอร์ม ต้อง Deploy เว็บไซต์ไปที่ Vercel ก่อนแล้วเอาลิ้งค์เว็บไซต์ไปส่งไม่ได้ยากอะไร ส่วน Post-Test รอบนี้ตั้งใจทำเลยได้ 10/10 ไม่รีบอ่านรีบทำเหมือนตอนแรกหล่ะทำงานส่งเสร็จก็กลับบ้านนอน

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

• Slide สอน: canva.com
• Repo อบรมวันที่ 8: github.com
• Repo อบรมวันที่ 9: github.com