Prisma: Thư viện hỗ trợ phát triển ứng dụng với cơ sở dữ liệu – Phần 2

Bước 1: Tạo một ứng dụng Next.js mới và cài đặt các gói phụ thuộc

Có thể sử dụng create-next-app để tạo một ứng dụng Next.js mới với lệnh:
$ npx create-next-app my-app

Hãy chọn “Yes” cho các tuỳ chọn khi chạy lệnh “npx create-next-app my-app”. Sau đó hãy vào thư mục “my-app” vừa được tạo bằng lệnh:
$ cd my-app

Sau đó, cần cài đặt các gói phụ thuộc cho ứng dụng, bao gồm prisma và @prisma/client:
$ npm install prisma @prisma/client

Cần khởi tạo prisma với prisma cli để có thể sử dụng prisma:
$ npx prisma init

Bước 2: Chỉnh sửa file schema.prisma để định nghĩa data model

–  Trong thư mục prisma trong thư mục gốc của ứng dụng (my-app),hãy chỉnh sửa file schema.prisma bên trong đó.

–  File schema.prisma là nơi định nghĩa các data model, các loại dữ liệu và các quan hệ giữa chúng.

–  Bạn cũng cần chỉ định 1 database và binaryTargets cho prisma client trong file schema.prisma.

–  Ví dụ, nếu muốn sử dụng SQLite làm database, có thể viết lại file “…/my-app/prisma/schema.prisma” như sau:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
  binaryTargets = ["native", "linux-musl"]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

Bước 3: Chạy lệnh prisma migrate để tạo database từ file schema.prisma

–  Sau khi đã định nghĩa xong các data model trong file schema.prisma, hãy chạy lệnh prisma migrate để tạo database từ file schema.prisma.

–  Lệnh prisma migrate sẽ tạo ra các file migration trong thư mục prisma/migrations và áp dụng chúng vào database.

Ví dụ, có thể chạy lệnh sau:
$ npx prisma migrate dev --name init

Bước 4: Sử dụng prisma client để truy vấn và thao tác với database trong project NextJS vừa mới tạo

–  Sau khi tạo database từ file schema.prisma, có thể sử dụng prisma client để truy vấn và thao tác với database trong project Next.js.

–  Prisma client là một thư viện JavaScript được sinh ra tự động từ file schema.prisma. Nó cung cấp một API dễ sử dụng và an toàn để truy cập database.

–  Để sử dụng prisma client, cần import nó vào và khởi tạo một đối tượng prisma như trong ví dụ. Trong file “…/my-app/src/app/api/hello/route.ts” thay đổi code lại để tạo một user mới với các post của họ như sau:

import { PrismaClient } from '@prisma/client'

export async function GET(request: Request) {
  return new Response('Hello, Next.js at http://localhost:3000/ and Prisma at http://localhost:5555/')
}

const prisma = new PrismaClient()

async function createUser() {
  const user = await prisma.user.create({
    data: {
      name: 'Alice',
      email: 'alice@example.com',
      posts: {
        create: [
          {
            title: 'Hello World',
            content: 'This is my first post',
            published: true,
          },
          {
            title: 'Next.js Rocks',
            content: 'I love using Next.js and Prisma',
            published: false,
          },
        ],
      },
    },
  })
}
createUser()

async function getUsers() {
  const users = await prisma.user.findMany({
    include: {
      posts: {
        where: {
          published: true,
        },
      },
    },
  })
  console.log(users)
}

getUsers()

–  Hãy xem thêm các ví dụ và tài liệu về cách sử dụng prisma client tại đây: https://www.prisma.io/docs/concepts/components/prisma-client

–  Thay đổi giao diện mặc định ở file “…/my-app/src/app/page.tsx” như sau:

import Image from 'next/image'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">      
      <div className="relative flex place-items-center">
        <Image
          className="relative dark:invert"
          src="/next.svg" alt="Next.js Logo"
          width={180} height={37} priority
        />
      </div>
      <div className="text-center"> 
        <a href='http://localhost:3000/api/hello'>
          Test Prisma
        </a>
      </div>
    </main>
  )
}

–  Bây giờ, đã sẵn sàng để chạy dự án Next.js đơn giản này. Hãy dùng câu lệnh sau để serve ứng dụng vừa tạo.
$ npm run dev

–  Hãy mở trình duyệt ở http://localhost:3000/ để xem thành quả.

–  Click vào button “Test Prisma” để ghi thông tin đã được khai báo ở PrismaClient vào database.

–  Bạn có thể chạy lệnh prisma studio để xem và chỉnh sửa dữ liệu trong database thông qua giao diện web.

–  Để xem kết quả, hãy chạy lệnh khởi tạo Prisma studio sau:
$ npx prisma studio

–  Mở Prisma studio ở http://localhost:5555/ để xem và chỉnh sửa dữ liệu trong database thông qua giao diện web

Kết luận

• Trong bài blog này, chúng ta đã học cách sử dụng Next.js và prisma để xây dựng và triển khai một ứng dụng web hiện đại và hiệu quả.
• Prisma là một thư viện cho phép kết nối và truy vấn database một cách dễ dàng và an toàn. Nó cung cấp một API trực quan và linh hoạt để thực hiện các thao tác CRUD (tạo, đọc, cập nhật và xóa) với database.
• Chúng ta đã hướng dẫn từng bước cách tạo một ứng dụng Next.js mới, cài đặt các gói phụ thuộc, định nghĩa data model, tạo database, truy vấn database, kiểm tra và cải thiện ứng dụng của chúng ta.

Bạn đã học xong cách xây dựng và triển khai ứng dụng web với Next.js và Prisma. Hãy bắt đầu áp dụng những kiến thức này vào ứng dụng ngay hôm nay. Nếu quan tâm đến Prisma và muốn tìm hiểu thêm về nó, hãy truy cập vào trang web chính thức của Prisma tại đây (https://www.prisma.io/). Hoặc cũng có thể xem các tài liệu, các ví dụ và các hướng dẫn về cách sử dụng Prisma tại đây (https://www.prisma.io/docs).

Hy vọng bài viết này đã giúp cung cấp một cái nhìn tổng quan về Prisma và những ưu nhược điểm của nó. Nếu có bất kỳ câu hỏi hay góp ý nào, xin vui lòng để lại bình luận bên dưới. Cảm ơn bạn đã đọc bài viết này và chúc bạn thành công trong việc phát triển ứng dụng với cơ sở dữ liệu.

Phần 1: https://www.marketenterprise.vn/blog/prisma-ho-tro-phat-trien-phan-1.html