Prerequisite

Prisma is a type of Database ORM (Object-Relational Mapping) system. This differs from raw SQL statements that developers usually write in database queries. There are several popular programming languages that already implement and adapt the ORM system, such as PHP (Laravel Eloquent ORM), Go (Gorm), Sequelize, and Prisma available in the Node.js and TypeScript ecosystem.

Why Prisma.io

There are several types of back-end API endpoint architectures to build an application, such as RESTful, GraphQL, and gRPC. Back-end API endpoints are servers that provide all the data from databases such as PostgreSQL, MySQL, MongoDB, SQLite, and others.

Building application websites using Next.js, Prisma, and PostgreSQL is now very possible to do in one place, namely Vercel. Vercel is the hosting service provider and the team behind Next.js, a React.js framework.

Vercel offers services beyond hosting, and after releasing a version of database storage services using PostgreSQL, I think the time has come for web developers, especially those with a Full-Stack background, to have a single platform that almost provides all the needs of a web developer.

The standard service version for beginners is available up to the paid service level for enterprises on Vercel. These services are very helpful and make it easier for beginners, developers, startup companies, and other companies to run their projects, application prototypes, experiments, and others in one service place at Vercel.

React.js, which is a fairly popular JavaScript framework and the basis of the Next.js framework, can integrate databases and work as a service on the server side.

Next.js brings server services communicating with the client side simultaneously and makes the developer's experience easy and friendly.

The following is my writing on the topic of QR Code Attendance Web Application development using Next.js, Prisma, and the PostgreSQL database.

Web Application

Web applications often require solutions that are fast and modern with the adaptation of existing technology. With the proliferation of smartphones with capable cameras, device technology is something that can be used and utilized in an application system.

One of its use cases is a web application using a QR Code. This article contains how to build a simple application for employee attendance by using a QR Code.

Getting Started

As of this writing with the prototype available, I am using Next.js 13 with Node version v16.14.0 and PostgreSQL. The tools needed for the database are PgAdmin 4; you can read our other post on connecting PostgreSQL with PgAdmin4 or connecting Vercel's PostgreSQL database to PgAdmin 4.

Migrate

Open up or create a prisma.schema file in your root directory in the ./prisma directory. Add or change the necessary structure and run npx prisma migrate dev --name init_table_attendances to execute the table schema changes.

Table changes

After changing your Prisma schema files, you can update the database directly by typing npx prisma db push in the terminal. You can see the changes in your database management tools or PgAdmin 4.

Create Migration Data Script

Start seeding your database tables, for example. Create a new TypeScript file and write in script.tsx a migration script file:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
  const user = await prisma.user.create({
    data: {
      name: 'BobDoe',
      email: 'bob.doe@prisma.io',
      posts: {
        create: {
          title: 'Hello World'
        }
      },
      attendances: {
        create: {
          token: 'R$sV13',
          status: 1,
          attendances: {
            create: {
              type: 'Clock In',
              remark: ''
            }
          }
        }
      }
    }
  })
  console.log(user)
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

To run the seed files, type in the terminal: npx ts-node script.ts. This will execute a script that inserts data into your database tables.

Prisma Studio

Prisma Studio is a database management tool for your project. It runs on a different port within the same project source. Open a new terminal and type in npx prisma studio to open Prisma Studio so you can manage your database directly from your projects. After running, the console will be prompted: Prisma Studio is up on http://localhost:5555. This is a very handy and useful tool for your project development.