ลองเล่น Prisma กับ Next.js กัน
Вставка
- Опубліковано 15 лип 2024
- ☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ลองไมค์ สัปดาห์นี้มารู้จัก ORM ที่เรียกตัวเองว่าเป็น "next-generation Node.js and TypeScript ORM" อย่าง Prisma กันว่า มันคืออะไร มีความสามารถทำอะไรได้บ้างผ่านหัวข้อนี้กัน
โดยเพื่อความเข้าใจแบบจัดหนักจัดเต็ม หัวข้อนี้เราจะพาลองเล่น Prisma ผ่าน Next.js และ PostgreSQL กัน โดยจะเป็นการเชื่อมต่อตั้งแต่ฝั่ง Backend (ทำ API ต่อกับ Database ผ่าน Prisma) และ Frontend (เชื่อมต่อกับ API) เพื่อให้เห็นภาพทั้งหมดว่า การใช้งาน Prisma ร่วมกับ Web Application เราสามารถใช้งานร่วมกันยังไงได้บ้างกันนะครับ
เนื้อหาที่เราจะพูดถึงในหัวข้อนี้
1. ทำความรู้จักกับ Prisma / พื้นฐาน ORM และ Migration
2. การใช้ Next.js ทำ API ผ่าน Prisma Client
3. ต่อ React (Frontend) ด้วย API ที่ทำจาก Prisma
4. รู้จักกับ Prisma Query ผ่านการ search, sort และ filter
5. เพิ่มเติม Prisma ผ่านการทำ Relation กับ Table และการดึงและค้นหาข้อมูลผ่าน relation ของ Table
หัวข้อ
00:00 แนะนำหัวข้อ
01:53 แนะนำ Prisma และ ORM
07:52 เราจะทำอะไรใน Session นี้กันบ้าง
09:26 setup Next.js และ PostgreSQL
13:22 setup Prisma และสร้าง Schema เริ่มต้น
18:11 ทำ migration database และ generate Prisma Client
23:51 แนะนำวิธีทำ CRUD API ของ Post บน Next.js ด้วย Route Handler
27:21 เริ่มทำ GET / POST API ของ Post ผ่าน Prisma Client
31:01 ทำ GET One / PUT / DELETE API ของ Post ต่อ (รับ params มาใช้งาน)
37:57 เริ่มทำฝั่ง Frontend / ทำ style 3 หน้าขึ้นมา
43:37 เริ่มต่อ API กับฝั่ง Frontend / ต่อกับหน้าแสดง Post
46:27 ต่อ API กับหน้าสร้าง Post
50:02 ต่อ API กับหน้าแก้ไข Post
55:28 เพิ่มเติม query สำหรับการ search, sort, filter
56:18 เพิ่ม column category ใน Post ผ่าน Schema
59:37 แก้ไข API POST / PUT ของ Post ให้ support กับ field ใหม่ category
1:01:22 เพิ่มเติม API Get post สำหรับเรื่อง search, sort, filter
1:09:10 กลับมาต่อ API กับฝั่ง Frontend / เพิ่ม Category ให้กับหน้าสร้างและแก้ไข
1:12:15 เพิ่ม search, filter, sort ต่อกับ API ฝั่ง Frontend
1:16:33 แนะนำ Relation table กับ Prisma / แปลงจาก Category
1:21:15 เพิ่ม CRUD API categories สำหรับจัดการ category
1:23:54 แก้ไข CRUD API posts ให้ support กับ category
1:27:33 แก้ไขฝั่ง Frontend ให้ support กับ category schema ใหม่
1:32:21 แก้ไข API Get posts ให้ support search ที่ตาราง category ได้
1:35:13 เพิ่มเติม API Get categories ดึง posts ที่เกี่ยวข้องออกมา
1:36:06 สรุปทั้งหมด / เพิ่มเติมการ Deploy Prisma / Prisma Studio
สามารถอ่าน Blog เพิ่มเติมได้ที่
mikelopster.dev/posts/next-pr...
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev กันได้เลย
แปะพิกัดของที่ผมใช้
shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
shope.ee/6fI75UuLEM osmo pocket 3
shope.ee/4VDcVixCW9 ไมค์ shure - Наука та технологія
Gold Content มากคุณ
ที่สุด🎉🎉🎉
รอวันนี้มานานเลยครับ
ดีใจที่ยังรอกัน 😆
so good ❤❤❤
ส่วนตัวแล้วชอบ prisma นะครับเพราะง่าย และ สะดวกดี
ขอทั้ง t3 stack เลยคับ ดีเลิศ กราบ
รักไมค์
อยากได้เรื่อง optimize เว็บตาม seo สำหรับฝั่ง dev หน่อยครับ
กำลังศึกษาเรื่องนี้อยู่พอดีเลยครับ มาได้ถูกเวลาอย่างกับรู้ใจ ❤
ขอคำแนะนำหน่อยครับระหว่างทำnext.js ทั้ง font-back กับการทำ next.js font และ ใช้ nest.jsหรืออื่นๆเป็น back แบบไหนดีกว่า และมันเหมาะกับงานแบบไหนของการทำแต่ละแบบ
สำหรับใครที่รู้สึกว่าเข้าผ่าน pgadmin ยาก เข้าผ่าน prisma studio ได้นะครับ ใช้คำสั่ง npx prisma studio
ขอ Database sharding หน่อยครับ
Type orm กับ Prisma อันดีกว่ากันครับ และแตกต่างกันตรงไหน
รบกวนช่วยสอน ระบบ cookie หน่อยครับ
แนะนำคลิปนี้โลด
ua-cam.com/video/JhNxzPHipbY/v-deo.htmlsi=9aLH7PJ5eEe5ZFOt
โจทย์ใหญ่ๆของ cookie อยู่ที่นี่และครับ 😁
Drizzle ORM ต่อ😅😅😅
ช่วยทำคลิป Full stack Next.JS 14 - E-Commerce โดยการใช้ Prisma + mysql หน่อยครับ
+1
เต็มอิ่มมากครับ ว่าแต่ prisma มันสร้าง database ไว้ในเครื่องเราใช่ไหม
prisma เป็นแค่ตัวแทนในการพูดคุยกับ Database ครับ (ORM) เพราะฉะนั้นเราต้องมี database จริงก่อน แล้วเราจะนำ prisma ต่อไปยัง database ตัวนั้นครับ (ดังนั้น มันสามารถต่อได้ทั้ง local หรือ database ที่เราเปิดบน cloud server ได้ครับ)
กำลังศึกษาพอดีครับ ขอบคุณครับ แต่ถ้าใข้กับ oracledb ใช้ tool อะไรได้บ้างครับ
ขอบคุณล่วงหน้าครับ
อยากทราบเหมือนกันครับ วิธี connect oracledb ใน nextjs
ตอบจากใจเลย oracledb ผมไม่มีความรู้เลย 😂 เดี๋ยวผมขอไปทำการบ้านก่อน แล้วอาจจะหยิบมาเล่าในช่องแทนนะครับ
ลาก่อย vue nuxt
Next.js,tailwind,express,MySQL เว็บแนะนำำสถานที่ท่องเที่ยวครับ
Nestหน่ิยครับพี่ 🎉🎉🎉😢😢
prisma สามารถใช้แบบ database first ได้ไหมครับ คือให้มัน generate model ที่ฝั่งโค้ดให้ตาม structure บน database ที่มีอยู่แล้ว
สำหรับเคสที่มี dabase อยู่แล้ว ใข้คำสั่ง prisma db pull ในการ sync schema ก่อนได้ครับ แล้วจะสามารถใช้ prisma generate client เพื่อให่ prisma เข้าใจ structure ได้
จริงๆ มันก็ทำได้นะครับ แต่ไม่ค่อยแนะนำเพราะวิธีนี้มันจะไม่ได้มี migration file ตามมา หาก database มีปัญหาเรื่อง version ใหม่อาจจะทำให้เราไม่สามารถย้อนกลับได้นะครับ
แนะนำ extension theme และก็เครื่องมือต่างๆเช่น github copilot ได้ไหมครับ
theme ผมใช้เป็น dracula ส่วนพวก AI tools ช่วย code ผมก็ใช้ GPT กับ Codeium เป็นตัวหลักน้า (สำหรับผม ผลไม่ค่อยแตกต่างกับ Colpilot มาก + มันฟรีแหละ 😆)
@@mikelopsterขอบคุณครับบ
search ,filter , sort ระหว่าง ให้ be จัดการกับ db กับให้ fe ดึง data ผ่าน api เส้นเดียวและทำเองอันไหน ดีกว่าครับ
โดยพื้นฐานควรทำทั้งหมดผ่าน BE อยู่แล้วนะครับ เพื่อให้ฝั่ง FE มีแค่ logic ส่วนแค่จัดการเกี่ยวกับ UI เท่านั้น
แต่ หากการ search, filter, sort เกิดขึ้นบ่อย + ข้อมูลขนาดไม่เยอะมาก (10-20 ตัว) ก็สามารถทำจากฝั่ง FE ได้เช่นกันนะครับ ส่วนใหญ่จะพิจารณาตามขนาดของข้อมูลที่ต้องทำนะครับ ถ้าเยอะก็ควรทำที่ BE ครับ
เป็นอีกคอนเท้นที่กำลังช่วยชีวิตนศ.ที่กำลังทำโปรเจคแบบเราไว้มากค่ะ 5555555
ดีใจครับ Enjoy นะครับ 😆
รอ next master class ครับ
เอาจริงนี่ next.js content แทบจะยึดครองช่องเราตอนนี้ไปและนะครับ 😂
เดี๋ยวไว้ผมหาเป็น site project ของ next.js มาทำ workshop กันนะครับ 😁
@@mikelopster ขอบคุณค้าบบ
Downloading Prisma engines for Node-API for windows [ ] 0%Error: -- ลองแล้วติด ERR นี้แก้ยังไงครับ
Error นี้เจอจังหวะ docker หรือเจอจากตอน run step ไหนไหมครับ
ผมพึ่งส่งโปรเจคเว็บไปเลยครับใช้ prisma กับ nextjs พี่ลงช้าไปนิดนึง😢
ถือซะว่ามาทบทวนเพื่ทเติมครับ 😆
พี่ครับ มีโอกาสผมอยากให้พาทำเว็บ หลายภาษาหน่อยครับ ❤❤❤❤
ok รับเรื่อง 😆
Next อีคอมเมิดหน่อยครับ
ตามครับ
สรุป auth 0 หรือ nextauth😂
เดี๋ยวมาแน่นอน 😆