{"id":3202,"date":"2023-04-24T18:50:22","date_gmt":"2023-04-24T11:50:22","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=3202"},"modified":"2023-04-24T19:46:35","modified_gmt":"2023-04-24T12:46:35","slug":"prisma-ho-tro-phat-trien-phan-2","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/prisma-ho-tro-phat-trien-phan-2.html","title":{"rendered":"Prisma: Th\u01b0 vi\u1ec7n h\u1ed7 tr\u1ee3 ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng v\u1edbi c\u01a1 s\u1edf d\u1eef li\u1ec7u – Ph\u1ea7n 2"},"content":{"rendered":"

B\u01b0\u1edbc 1: T\u1ea1o m\u1ed9t \u1ee9ng d\u1ee5ng Next.js m\u1edbi v\u00e0 c\u00e0i \u0111\u1eb7t c\u00e1c g\u00f3i ph\u1ee5 thu\u1ed9c<\/span><\/h2>\n

C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng create-next-app \u0111\u1ec3 t\u1ea1o m\u1ed9t \u1ee9ng d\u1ee5ng Next.js m\u1edbi v\u1edbi l\u1ec7nh:<\/span>
\n$ npx create-next-app my-app<\/code><\/p>\n

H\u00e3y ch\u1ecdn \u201cYes\u201d cho c\u00e1c tu\u1ef3 ch\u1ecdn khi ch\u1ea1y l\u1ec7nh \u201c<\/span>npx create-next-app my-app<\/span>\u201d. Sau \u0111\u00f3 h\u00e3y v\u00e0o th\u01b0 m\u1ee5c \u201cmy-app\u201d v\u1eeba \u0111\u01b0\u1ee3c t\u1ea1o b\u1eb1ng l\u1ec7nh:<\/span>
\n$ cd my-app<\/code>
\n<\/span><\/p>\n

Sau \u0111\u00f3, c\u1ea7n c\u00e0i \u0111\u1eb7t c\u00e1c g\u00f3i ph\u1ee5 thu\u1ed9c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m prisma v\u00e0 @prisma\/client:<\/span>
\n$ npm install prisma @prisma\/client<\/code><\/p>\n

C\u1ea7n kh\u1edfi t\u1ea1o prisma v\u1edbi prisma cli \u0111\u1ec3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng prisma:<\/span>
\n$ npx prisma init<\/code><\/p>\n

B\u01b0\u1edbc 2: Ch\u1ec9nh s\u1eeda file schema.prisma \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a data model<\/span><\/h2>\n

–\u00a0 Trong th\u01b0 m\u1ee5c prisma trong th\u01b0 m\u1ee5c g\u1ed1c c\u1ee7a \u1ee9ng d\u1ee5ng (my-app),h\u00e3y ch\u1ec9nh s\u1eeda file schema.prisma b\u00ean trong \u0111\u00f3.<\/span><\/p>\n

–\u00a0 File schema.prisma l\u00e0 n\u01a1i \u0111\u1ecbnh ngh\u0129a c\u00e1c data model, c\u00e1c lo\u1ea1i d\u1eef li\u1ec7u v\u00e0 c\u00e1c quan h\u1ec7 gi\u1eefa ch\u00fang.<\/span><\/p>\n

–\u00a0 B\u1ea1n c\u0169ng c\u1ea7n ch\u1ec9 \u0111\u1ecbnh 1 database v\u00e0 binaryTargets cho prisma client trong file schema.prisma.<\/span><\/p>\n

–\u00a0 V\u00ed d\u1ee5, n\u1ebfu mu\u1ed1n s\u1eed d\u1ee5ng SQLite l\u00e0m database, c\u00f3 th\u1ec3 vi\u1ebft l\u1ea1i file \u201c…\/my-app\/prisma\/schema.prisma\u201d nh\u01b0 sau:<\/span><\/p>\n

datasource db {\r\n  provider = \"sqlite\"\r\n  url      = \"file:.\/dev.db\"\r\n}\r\n\r\ngenerator client {\r\n  provider = \"prisma-client-js\"\r\n  binaryTargets = [\"native\", \"linux-musl\"]\r\n}\r\n\r\nmodel Post {\r\n  id        Int      @id @default(autoincrement())\r\n  title     String\r\n  content   String?\r\n  published Boolean  @default(false)\r\n  author    User     @relation(fields: [authorId], references: [id])\r\n  authorId  Int\r\n}\r\n\r\nmodel User {\r\n  id    Int     @id @default(autoincrement())\r\n  email String  @unique\r\n  name  String?\r\n  posts Post[]\r\n}\r\n<\/pre>\n
B\u01b0\u1edbc 3: Ch\u1ea1y l\u1ec7nh prisma migrate \u0111\u1ec3 t\u1ea1o database t\u1eeb file schema.prisma<\/span><\/h2>\n
–\u00a0 Sau khi \u0111\u00e3 \u0111\u1ecbnh ngh\u0129a xong c\u00e1c data model trong file schema.prisma, h\u00e3y ch\u1ea1y l\u1ec7nh prisma migrate \u0111\u1ec3 t\u1ea1o database t\u1eeb file schema.prisma.<\/span><\/p>\n
–\u00a0 L\u1ec7nh prisma migrate s\u1ebd t\u1ea1o ra c\u00e1c file migration trong th\u01b0 m\u1ee5c prisma\/migrations v\u00e0 \u00e1p d\u1ee5ng ch\u00fang v\u00e0o database.<\/span><\/p>\n
V\u00ed d\u1ee5, c\u00f3 th\u1ec3 ch\u1ea1y l\u1ec7nh sau:<\/span>
\n$ npx prisma migrate dev --name init<\/code><\/p>\n
B\u01b0\u1edbc 4: S\u1eed d\u1ee5ng prisma client \u0111\u1ec3 truy v\u1ea5n v\u00e0 thao t\u00e1c v\u1edbi database trong project NextJS v\u1eeba m\u1edbi t\u1ea1o<\/span><\/h2>\n
–\u00a0 Sau khi t\u1ea1o database t\u1eeb file schema.prisma, c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng prisma client \u0111\u1ec3 truy v\u1ea5n v\u00e0 thao t\u00e1c v\u1edbi database trong project Next.js.<\/span><\/p>\n
–\u00a0 Prisma client l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript \u0111\u01b0\u1ee3c sinh ra t\u1ef1 \u0111\u1ed9ng t\u1eeb file schema.prisma. N\u00f3 cung c\u1ea5p m\u1ed9t API d\u1ec5 s\u1eed d\u1ee5ng v\u00e0 an to\u00e0n \u0111\u1ec3 truy c\u1eadp database.<\/span><\/p>\n
–\u00a0 \u0110\u1ec3 s\u1eed d\u1ee5ng prisma client, c\u1ea7n import n\u00f3 v\u00e0o v\u00e0 kh\u1edfi t\u1ea1o m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng prisma nh\u01b0 trong v\u00ed d\u1ee5. Trong file \u201c…\/my-app\/src\/app\/api\/hello\/route.ts\u201d thay \u0111\u1ed5i code l\u1ea1i \u0111\u1ec3 t\u1ea1o m\u1ed9t user m\u1edbi v\u1edbi c\u00e1c post c\u1ee7a h\u1ecd nh\u01b0 sau:<\/span><\/p>\n
import { PrismaClient } from '@prisma\/client'\r\n\r\nexport async function GET(request: Request) {\r\n  return new Response('Hello, Next.js at http:\/\/localhost:3000\/ and Prisma at http:\/\/localhost:5555\/')\r\n}\r\n\r\nconst prisma = new PrismaClient()\r\n\r\nasync function createUser() {\r\n  const user = await prisma.user.create({\r\n    data: {\r\n      name: 'Alice',\r\n      email: 'alice@example.com',\r\n      posts: {\r\n        create: [\r\n          {\r\n            title: 'Hello World',\r\n            content: 'This is my first post',\r\n            published: true,\r\n          },\r\n          {\r\n            title: 'Next.js Rocks',\r\n            content: 'I love using Next.js and Prisma',\r\n            published: false,\r\n          },\r\n        ],\r\n      },\r\n    },\r\n  })\r\n}\r\ncreateUser()\r\n\r\nasync function getUsers() {\r\n  const users = await prisma.user.findMany({\r\n    include: {\r\n      posts: {\r\n        where: {\r\n          published: true,\r\n        },\r\n      },\r\n    },\r\n  })\r\n  console.log(users)\r\n}\r\n\r\ngetUsers()\r\n<\/pre>\n
–\u00a0 H\u00e3y xem th\u00eam c\u00e1c v\u00ed d\u1ee5 v\u00e0 t\u00e0i li\u1ec7u v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng prisma client t\u1ea1i \u0111\u00e2y: <\/span>https:\/\/www.prisma.io\/docs\/concepts\/components\/prisma-client<\/span><\/a><\/p>\n
–\u00a0 Thay \u0111\u1ed5i giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh \u1edf file \u201c…\/my-app\/src\/app\/page.tsx\u201d nh\u01b0 sau:<\/span><\/p>\n
import Image from 'next\/image'\r\n\r\nexport default function Home() {\r\n  return (\r\n    <main className=\"flex min-h-screen flex-col items-center justify-between p-24\">      \r\n      <div className=\"relative flex place-items-center\">\r\n        <Image\r\n          className=\"relative dark:invert\"\r\n          src=\"\/next.svg\" alt=\"Next.js Logo\"\r\n          width={180} height={37} priority\r\n        \/>\r\n      <\/div>\r\n      <div className=\"text-center\"> \r\n        <a href='http:\/\/localhost:3000\/api\/hello'>\r\n          Test Prisma\r\n        <\/a>\r\n      <\/div>\r\n    <\/main>\r\n  )\r\n}\r\n<\/pre>\n
–\u00a0 B\u00e2y gi\u1edd, \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 ch\u1ea1y d\u1ef1 \u00e1n Next.js \u0111\u01a1n gi\u1ea3n n\u00e0y. H\u00e3y d\u00f9ng c\u00e2u l\u1ec7nh sau \u0111\u1ec3 serve \u1ee9ng d\u1ee5ng v\u1eeba t\u1ea1o.
\n$ npm run dev<\/code><\/p>\n
–\u00a0 H\u00e3y m\u1edf tr\u00ecnh duy\u1ec7t \u1edf http:\/\/localhost:3000\/ \u0111\u1ec3 xem th\u00e0nh qu\u1ea3.<\/p>\n
–\u00a0 Click v\u00e0o button \u201cTest Prisma\u201d \u0111\u1ec3 ghi th\u00f4ng tin \u0111\u00e3 \u0111\u01b0\u1ee3c khai b\u00e1o \u1edf <\/span>PrismaClient<\/span> v\u00e0o database.<\/span><\/p>\n
–\u00a0 B\u1ea1n c\u00f3 th\u1ec3 ch\u1ea1y l\u1ec7nh prisma studio \u0111\u1ec3 xem v\u00e0 ch\u1ec9nh s\u1eeda d\u1eef li\u1ec7u trong database th\u00f4ng qua giao di\u1ec7n web.<\/span><\/p>\n
–\u00a0 \u0110\u1ec3 xem k\u1ebft qu\u1ea3, h\u00e3y ch\u1ea1y l\u1ec7nh kh\u1edfi t\u1ea1o Prisma studio sau:<\/span>
\n$ npx prisma studio<\/code><\/p>\n
–\u00a0 M\u1edf Prisma studio \u1edf http:\/\/localhost:5555\/ \u0111\u1ec3 xem v\u00e0 ch\u1ec9nh s\u1eeda d\u1eef li\u1ec7u trong database th\u00f4ng qua giao di\u1ec7n web<\/span><\/p>\n
\"Prisma<\/p>\n
K\u1ebft lu\u1eadn<\/span><\/h2>\n