T</>TahuCoding

Part 4 - Tutorial Next.js 13 Typescript Ecommerce Cart dengan Payment Gateway - Generate Data Dummy & Update Schema

Loading...

Pada tutorial kali ini kita akan belajar bagaimana caranya men-generate data product based on category tanpa perlu capek input manual ke database, yukk cekidot.

Step 1: Update Schema

Kita akan menambahkan beberapa field pada table product dan category yang lupa author tambahkan di awal tutorial, navigasi ke schema.prisma kemudian tambahkan dan modifikasi field-field berikut:

prisma\schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
 
generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
//...rest of other schemas
 
model Category {
  id        String    @id @default(cuid())
  name      String
  slug      String    @unique
  createdAt DateTime  @default(now())
  updatedAt DateTime?
  products  Product[]
 
  @@map("categories")
}
 
model Product {
  id          String    @id @default(cuid())
  name        String
  description String
  price       Float
  categoryId  String
  image       String
  qty         Int
  slug        String    @unique
  createdAt   DateTime  @default(now())
  updatedAt   DateTime?
  category    Category  @relation(fields: [categoryId], references: [id])
  Item        Item[]
 
  @@map("products")
}

Field slug perlu ditambahkan agar kedepan ketika user navigasi pada page product atau category mudah dalam membaca url, sedangkan field qty pada table product dipergunakan untuk mentracking jumlah product yang tersedia.

Jika sudah jalankan command berikut untuk men-generate prisma type:

npx prisma generate

Kemudian, lakukan migrasi ke database:

npx prisma migrate dev

Step 2: Install Faker

Faker.js adalah sebuah library JavaScript yang digunakan untuk menghasilkan data acak atau palsu. Library ini sering digunakan dalam pengembangan perangkat lunak, pengujian, atau saat membutuhkan data dummy untuk keperluan prototipe atau demonstrasi.

Faker.js menyediakan berbagai metode untuk menghasilkan data acak dalam berbagai format, seperti nama, alamat, angka, tanggal, teks, dan banyak lagi. Dengan menggunakan library ini, Anda dapat dengan mudah menghasilkan data palsu yang terlihat nyata dan bervariasi.

Kamu dapat menginstall faker dengan menggunakan command berikut:

npm install --save-dev @faker-js/faker

Berikut cara penggunaan faker:

index.js
// ESM
import { faker } from "@faker-js/faker";
 
// CJS
const { faker } = require("@faker-js/faker");
 
export function createRandomUser(): User {
  return {
    userId: faker.datatype.uuid(),
    username: faker.internet.userName(),
    email: faker.internet.email(),
    avatar: faker.image.avatar(),
    password: faker.internet.password(),
    birthdate: faker.date.birthdate(),
    registeredAt: faker.date.past(),
  };
}
 
export const USERS: User[] = faker.helpers.multiple(createRandomUser, {
  count: 5,
});

Step 3: Tambahkan Prisma Seeder

Prisma seeder adalah fitur yang disediakan oleh Prisma, yaitu kerangka kerja ORM (Object-Relational Mapping), untuk melakukan pengisian data awal ke dalam database. Prisma seeder memungkinkan Anda untuk dengan mudah mengisi tabel atau koleksi dalam database dengan data dummy atau data awal yang dibutuhkan dalam pengembangan aplikasi.

Buatlah sebuah file bernama seed.ts pada folder prisma

prisma\seed.ts
import prisma from "../src/lib/prisma";
import { faker } from "@faker-js/faker";
 
async function main() {
  try {
    //your logic here
  } catch (error) {
    console.error("Error seeding data:", error);
  } finally {
    await prisma.$disconnect();
  }
}
 
main();

Tambahkan logic berikut pada seed.ts:

prisma\seed.ts
import prisma from "../src/lib/prisma";
import { faker } from "@faker-js/faker";
 
async function main() {
  try {
    const categoryCount = 4;
    const productCountPerCategory = 3;
 
    const categories = [];
 
    //create random categories
    for (let i = 0; i < categoryCount; i++) {
      const categoryName = faker.commerce.department() as string;
      const categorySlug = faker.helpers.slugify(categoryName);
 
      const isCategoryExisted = await prisma.category.findUnique({
        where: {
          slug: categorySlug,
        },
      });
 
      if (isCategoryExisted) {
        categories.push(isCategoryExisted);
      } else {
        const createdCategory = await prisma.category.create({
          data: {
            name: categoryName,
            slug: faker.helpers.slugify(categoryName),
          },
        });
        categories.push(createdCategory);
      }
    }
 
    //create products based on created categories
    for (const category of categories) {
      for (let i = 0; i < productCountPerCategory; i++) {
        const productName = faker.commerce.productName();
        const productDescription = faker.commerce.productDescription();
        const productPrice = +faker.commerce.price({
          min: 50000,
          max: 99999999,
        });
        const productImage = faker.image.url();
        const productQty = faker.number.int({ min: 1, max: 10 });
        const productSlug =
          faker.helpers.slugify(productName) +
          +faker.number.int({ min: 1, max: 1000 });
 
        await prisma.product.create({
          data: {
            name: productName,
            description: productDescription,
            price: productPrice,
            categoryId: category.id,
            image: productImage,
            qty: productQty,
            slug: productSlug,
          },
        });
      }
    }
  } catch (error) {
    console.error("Error seeding data:", error);
  } finally {
    await prisma.$disconnect();
  }
}
 
main();

Code diatas bertugas untuk membuat category yang unik, setelah berhasil maka akan dilanjutkan dengan membuat dummy product sesuai dengan category yang tersedia. Hal ini dilakukan agar terjadinya relasi antar table product dan category. Bisa kita lihat bahwa faker merupakan tool yang powerfull dalam men-genarate data dummy yang terlihat real dan masuk akal.

Install ts-node agar bisa menjalankan script dibawah:

npm install -g ts-node

Selanjutnya, agar kamu bisa memanggil file ini pada package.json tambahkan key berikut:

"prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
}

Selanjutnya, jalankan seeder menggunakan command berikut:

npx prisma db seed

Jika berhasil kamu bisa melihat pesan berikut di terminal:

Environment variables loaded from .env
Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ...
 
The seed command has been executed.

Selamat kamu sudah berhasil mendapatkan data dummy, buka supabase maka kamu akan mendapatkan data seperti berikut:

Table

Pada tutorial berikutnya kita akan belajar bagaimana caranya membuat datatable yang powerfull lengkap dengan server side strategi dan search query params dalam maintain state.

Stay tune dan jangan lupa share & support Tahu Coding, Terima Kasih!