Скачать или смотреть Full Stack Dev: SvelteKit ทำ Backend/Frontend ฉบับมือใหม่

[อ่านก่อน]
เนื่องจาก SvelteKit มีการเปลี่ยนแปลงครั้งใหญ่ก่อนที่จะออกเวอร์ชั้น 1.0 (น่าจะไม่มีอัปเดตใหญ่อีกแล้ว) ทำให้เนื้อหาวีดีโอนี้ไม่รองรับ SvelteKit เวอร์ชั่นใหม่ แนะนำให้ไปดูใน Play List ของ Svelte จะมีการอัปเดตหัวของ Full Stack ด้วย SvelteKit และแบ่งเป็นหลายวีดีโอที่ไม่ยาวมากนักหวังว่าจะช่วยให้เรียนรู้ได้ง่ายขึ้นครับ ดูคำอธิบายใต้วีดีโอด้วยนะครับ
   • SvelteKit Full Stack Part-0 - Intro  

เพื่อทำความเข้าใจการทำงานของ Single Page App(SPA) และ Web API ทั้งระบบ อย่างรวดเร็วและง่าย ผมจะใช้ SvelteKit ทำได้ทั้ง Backend/Frontend ใช้โครงสร้างไฟล์ในการทำ Route เข้าใจได้ง่าย ต่อฐานข้อมูลด้วย Prisma ซึ่งเป็น Object Relational Mapping(ORM) ลดความซับซ้อนของการใช้ภาษา SQL เนื้อหาวีดีโอจะเป็นการทำให้ดู พยายามอธิบายให้ละเอียดแต่เท่าที่จำเป็นต้องใช้ในจุดนั้น ควรไปศึกษาเพิ่มเติมถ้ามีโอกาส แนะนำให้ดูวีดีโออื่นๆใน Playlist เดียวกันนี้ประกอบ
รูปแบบ API (Sveltekit)
https://github.com/schooltechx/youtub...
รูปแบบ fetch (มาตรฐาน ไม่ขึ้นกับ framework)
https://github.com/schooltechx/youtub...

[Note]
สำหรับคนไม่เคยใช้ SvelteKit มันจะทำงานคล้าย Next.js ไฟล์ภายใต้ route ที่เป็น .js จะทำหน้าที่เป็น API ที่ต่อฐานข้อมูล ส่วนไฟล์ที่เป็น .svelte จะเป็นหน้า Frontend โปรแกมที่เขียนด้วย svelte จะเข้าใจได้ง่ายคนที่ใช้ Framework อื่นปรับตัวได้ไม่ยากครับ การทำ CRUD มันเป็นรูปแบบเดิมๆ ผมทำเป็นตัวอย่างโค้ดก็อปไปใช้ได้เลยครับ
[เตรียมตัว]
ติดตั้งและใช้งาน VS Code และ Extension ได้
เข้าใจ HTML และ JavaScript มาบ้าง ถ้าเคยใช้ JavaScript framework อื่นๆมาก่อนก็จะดีมาก
[เนื้อหา]
00:02:32 JSONPlaceholder แนะนำ API
00:04:18 W3School ทบทวนเรื่อง Object Array
00:07:55 SvelteKit สร้างโปรเจ็กเ
00:09:07 HTTP Status Codes
00:14:20 Layout
00:16:45 Error Page
00:21:58 API
00:32:50 /api/users
00:37:02 ORM
00:46:37 Migrate
00:50:38 Prisma Studio
01:03:23 POST , Create
01:06:30 /api/user/[id]
01:14:46 PUT,DELETE
01:22:12 Thunder Client (เหมือน Postman)
01:33:08 /users
01:35:29 fetch, getUsers()
01:45:02 createUser()
01:54:05 updateUser(), deleteUser()
02:04:23 ส่งท้าย

[คำถามท้ายวีดีโอ]
SvelteKit เทียบได้กับ Framework อะไรบ้าง

[ลิงค์ที่เกี่ยวข้อง]
https://jsonplaceholder.typicode.com/
https://www.prisma.io/docs/getting-st...
https://kit.svelte.dev/docs/routing

วีดีโอนี้ทำเสร็จมาหลายอาทิตย์แล้ว โดยตั้งเป้าเพื่อสอนนักเรียนทำระบบ web/mobile app ที่สมบูรณ์ ผมดูวีดีโอการทำ Fullstack หลายตัวส่วนใหญ่ก็ยาวมาก จากไม่กี่ชั่วโมง จนถึงหลายสิบชั่วโมง พอลองทำวีดีโอของตัวเองบ้าง ครั้งแรกกว่าจะเสร็จก็ปาไป 5 ช.ม. รู้สึกไม่กระชับทำใหม่เหลือ 3 ช.ม.กว่า ไม่พอใจเลยทำอีกรอบเหลือ 2ช.ม. กว่าๆ จนออกมาเป็นวีดีโออันนี้ หลังจากกลับมาดูทบทวนวีดีโอตัวเองหลายรอบ ก็รู้สึกว่าผมทำพลาดมากสำหรับครูผู้สอน เนื้อหาเท่านี้มันยังไม่ใกล้งานระดับ Production เลย เป็นไปไม่ได้ที่จะอัดความรู้ที่ควรรู้เข้าหัวนักเรียนได้ด้วยเวลาไม่กี่ช.ม. การดูและทำตามวีดีโอยาวๆก็เหนื่อยมาก ต้องดูซ้ำไปซ้ำมา และหยุดเป็นพักๆ มันไม่เหมาะกับผู้เริ่มต้น ถ้าจะสอนใช้เป็น Fluter,Vue,React และ backend เป็นตัวอื่นๆ ก็ต้องทำวีดีโอยาวๆอีกหรือเปล่า ผมเลยล้มเลิกไม่เอาวีดีโอนี้ลง Youtube และเปลี่ยนมาทำเป็นวีดีโอสอนเป็นหัวข้อไป รวมเป็น Play list สำหรับผู้เริ่มทำ Fullstack ถ้าผมอยากเพิ่มหัวข้อที่เฉพาะ framework นั้นๆ ก็ทำเป็นวีดีโอสั้น อ้างอิงจากข้อมูลในวีดีโอก่อนหน้าได้ วีดีโอนี้กลายเป็นแค่ส่วนหนึ่งใน Playlist เผื่อเป็นประโยชน์สำหรับผู้ที่มีประสบการณ์ใช้เปรียบเทียบ และแลกเปลี่ยนมุมมอง กับทางเลือกอื่นๆ
พิมพ์ไปบ่นไปมาสองชั่วโมงติดต่อกัน ก็ได้โปรแกรมง่อยๆ สามารถ Create Read Update Delete (CRUD) ข้อมูลในฐานข้อมูล หน้าจอก็ยังไม่ตบแต่ง ยังไม่มีระบบ Authentication, Authorization, Search, Pagination, Mobile App, Single Sign On, CI/CD, Integration และอื่นๆอีกมากมายที่ควรมี นี้เป็นแค่ก้าวแรกในการทำความเข้าใจ ยังมีอีกหลายวิธีอื่นๆที่ลดเวลาในการเขียนโค้ดกันตรงๆแบบนี้ มันคือประสบการณ์ซึ่งเราต้องสั่งสมกันไป ผมจะพยายามถายทอดเท่าที่จะทำได้ครับ ยังไงก็ฝากติดตามด้วครับ

[เพิ่มเติม]
https://github.com/sveltejs/realworld