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:
// 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")
}
// 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
npx prisma generate
Kemudian, lakukan migrasi ke database:
npx prisma migrate dev
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
npm install --save-dev @faker-js/faker
Berikut cara penggunaan faker:
// 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,
});
// 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
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();
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:
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();
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
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"
}
"prisma": {
"seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
}
Selanjutnya, jalankan seeder menggunakan command berikut:
npx prisma db seed
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.
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](/_next/image?url=%2Fstatic%2Fimages%2Ftutorial%2Fpart-4-tutorial-nextjs-13-typescript-ecommerce-cart-dengan-payment-gateway-antd-supabase-redux-toolkit-next-auth-postgre-sql-prisma%2Ftable.png&w=2048&q=100)
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!