Git Product home page Git Product logo

capstone-be-icanq's Introduction

Simple app for my capstone project using Expres.JS & Prisma

Langkah langkah pengerjaan project ini

  1. inisiasi project npm dengan menggunakan command npm init -y
  2. update package.json dengan menambahkan scripts seperti
"scripts": {
		"start": "node index.js",
		"start:dev": "nodemon index.js"
	},
  1. install package yang diperlukan
npm install express mysql2 dotenv cors
  1. install devDependency karena pake nodemon
npm install -D nodemon
  1. lalu akan ada node_modules dan package-lock.json yang dibuat secara otomatis oleh npm dimana jangan diubah isinya oleh kita sendiri dan jangan pula untuk di push ke github! soalnya nanti bakal nyusahin orang lain

  2. biar node_modules dan .env tidak ke push ke github kita akan bikin satu file namanya .gitignore biar node_modules dan .env tidak ikut ke upload ke git

  3. kalau males bisa lewat git bash atau terminal pake command ini

echo node_modules >> .gitignore
  1. inisiasi project dengan membuat satu file entrypoint, disini gw pakenya index.js kalian bebas namainnya mau app.js atau server.js gapapa, yang penting jangan namainnya gajelas gitu. kalau udah bikin file tadi, bisa update package.json dimana script untuk memulai aplikasi backend harus ke entrypoint file yang kalian tentukan tadi, contoh kalo gw pake entrypointnya index.js berarti di script jadinya
"scripts": {
  "start": "node index.js",
  "start:dev": "nodemon index.js"
}
  1. import express, dotenv, dan package lain yang awal kita install tadi, bikinlah satu rute untuk mencoba apakah aplikasi kalian bisa jalan atau tidak

contohnya:

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get("/", async (req, res) => {
	res.send("here is the response");
});

app.all("*", async (req, res) => {
	res.json({
		message: "Routes you're looking is not found",
	});
});

app.listen(PORT, "0.0.0.0", () => {
	console.log(`Server is already running at ${PORT}`);
});
  1. lanjut dalam integrasi project ini dengan prisma agar kita bisa terhubung dengan database dan melakukan pengambilan/masukin data ke database dengan prisma

  2. inisiasi project npm yang ingin diintegrasikan dengan prisma, kita harus install dulu si prismanya

npm install -D prisma
  1. inisasi prisma
prisma init

by default prisma akan menginisiasi project dengan database postgresql, kalau kalian ingin memakai databasenya mysql kalian bisa pakai command

npx prisma init --datasource-provider mysql

notes: bacaan lanjutan bisa kalian baca disini

  1. lalu akan kode tambahan pada file .env yaitu DATABASE_URL dimana nanti kalian harus isi sesuai dengan DATABASE_URL kalian, bisa diisi pake DATABASE_URL dari railway atau kalau jalanin di local, pake yang localhost dulu aja "mysql://root:password@localhost:3306/capstone_icanq". Dan ada satu file khusus yang ke generate dalam sebuah folder namanya prisma nama filenya schema.prisma dimana kalian harus mendefinisikan model kalian disitu sesuai dengan perencanaan yang kalian sudah rencanakan

  2. kalau mau file schema.prisma berwarna atau dikasih highlight pada syntaxnya kalian bisa download extension ini

  3. kita bisa buat schema database dari yang udah kita rencanain dalam file schema.prisma dimana ada syntaxnya sendiri kalian bisa baca dokumentasinya di link [ini]

ini ada contoh dari model dari schema yang dibikin

model Product {
  id        Int      @id @default(autoincrement())
  name      String
  price     Int
  imageUrl  String? // arti ?, not required, kalau pengen dibikin gapapa deh kalau datanya kosong
  catalogId Int?
  createdAt DateTime @default(now())
  // untuk menambahkan relasi dari Product ke Catalog dimana Product boleh gapunya catalog
  Catalog   Catalog? @relation(fields: [catalogId], references: [id])
}

model Catalog {
  id       Int       @id @default(autoincrement())
  name     String
  // untuk nambahin relasi antara catalog dengan Product
  products Product[] // ini artinya Catalog punya banyak product
}

model Message {
  id        Int      @id @default(autoincrement())
  name      String
  email     String
  message   String   @db.Text // biar bisa nyimpen pesan dengan karakter yang panjang
  createdAt DateTime @default(now())
}

  1. setelah kita define model di schema.prisma kita bisa melakukan synchronization database kita dengan schema yang udah dibuat tadi dengan command
npx prisma migrate dev --name <nama_apa_yang_kalian_lakukan>

<nama_apa_yang_kalian_lakukan> bisa diganti dengan aktifitas apa sih yang kamu lakaukan barusan, contoh:

  1. inisialisasi
  2. add_new_model_User
  3. add_relation_to_catalog_and_product

npx prisma migrate dev wajib dilakukan setiap kali kalian sudah selesai mengubah schema.prisma atau adanya perubahan pada schema kalian, agar database selalu tersingkronisasi

atau apabila kalian ingin lakukan singkronisasi dengan cara lain di prisma bisa dengan cara

npx prisma db push

  1. merujuk pada dokumentasinya, untuk bisa menggunakan prisma orm kita perlu menggunakan package @prisma/client untuk membuat koneksi dengan prisma dan melakukan crud operations. Perlu untuk membuat satu file configuration dimana akan dibuat pada folder config dan kita beri nama prisma.js dengan isi
// prisma.js
const { PrismaClient } = require("@prisma/client");
const prisma = new PrismaClient();
module.exports = { prisma };
  1. setelah dibuat menjadi suatu config untuk bisa dipakai di file yang lain kita bisa langsung pakai saja untuk mengambil data dari database atau hal yang lain seperti memasukkan data, update data, mengambil relasi, dan masih banyak lagi. Kalian bisa langsung lihat saja cara penggunaannya pada setiap route yang telah dibuat

capstone-be-icanq's People

Contributors

icanq avatar

Stargazers

Sahrul Riswanto avatar Aries Sukma15 avatar  avatar Kiaa avatar Yohanes Handoyo avatar

Watchers

 avatar

Forkers

makiatulmsyr17

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.