Pelajari Backend dengan pengetahuan frontend Anda

Halo Semuanya, Selamat datang kembali di blog saya .
Saya harap Anda semua aman dan blog ini menemukan Anda dalam keadaan sehat ❤️.

Daftar isi
· Pendahuluan
· Instalasi dan Menyiapkan proyek Anda
· Menghasilkan Sumber Daya
· Jenis file dan kepentingannya
∘ module.ts
∘ entitas/entity.ts
∘ resolver.ts / controller.ts
∘ service.ts
∘ graphql
∘ dto/input .ts

Perkenalan

Sebelum memulai dengan topik utama kita, mari kenali NestJS.
NestJS adalah kerangka kerja Node yang mendukung TypeScript dan Javascript.
Orang-orang yang berasal dari Backend dapat menemukannya mirip dengan kerangka Spring.
Untuk orang-orang front-end seperti kami, membuat API dengan kerangka kerja yang dapat ditulis dalam JS/TS sangat menarik dan saya benar-benar belajar banyak dalam eksplorasi kerangka kerja ini.

Bukannya kita tidak bisa membuat API menggunakan Node tetapi NestJS membuatnya mudah dalam membuat API di TypeScript & Javascript.

Blog ini dapat diperlakukan sebagai starter NestJS dan membuat API dengan Graphql.

Instalasi dan Menyiapkan proyek Anda

# Step 1: Install NestJs globally in your local machine
npm i -g @nestjs/cli

# Step 2: Create a new Project
nest new project-name

# Step 3: Choose your Package Manager
? Which package manager would you ❤️  to use? (Use arrow keys)
❯ npm
  yarn
  pnpm

# Step 4: Wait for the packages to get installed in your machine.

Note: NestJS application starts from main.ts

Memasang Pustaka GraphQL

# Step 5: Install Graphql libraries
npm i @nestjs/graphql @nestjs/apollo graphql apollo-server-express

import { ApolloDriver } from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';

@Module({
  imports: [
    GraphQLModule.forRoot({
      driver: ApolloDriver,
      typePaths: ['./**/*.graphql'],
      definitions: {
        path: join(process.cwd(), 'src/graphql.schema.ts'),
      },
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

NestJS dan Angular berbagi struktur proyek yang serupa. Kita dapat menghasilkan Sumber Daya dengan 2 cara

• Membuat file secara manual seperti module, resolver, dto, controllers, dll.
• Membuat modul menggunakan perintah

# Creating modules using command
nest generate resource resource-name
(OR)
nest g resource resource-name

# Choose your transport layer e.g. as we are using graphql go with either 2 or 3
? What transport layer do you use? (Use arrow keys)
❯ REST API 
  GraphQL (code first) 
  GraphQL (schema first) 
  Microservice (non-HTTP) 
  WebSockets 

# Prompts to generate CRUD Operations for your resource
? Would you like to generate CRUD entry points? (Y/n)

Code First: 
  Our code drives our development, Schema gets created later based on our code.

Schema First: 
  Based on Schema, code is developed.

Cara lain untuk menghasilkan file

# Generating the module file of your resource
nest g mo module-name

# Generating controllers, resources, etc
nest g co controller-name

# Generating service file
nest g s service-name

Sekarang setelah sumber daya kita dihasilkan, Mari kita pahami file apa itu dan mengapa kita membutuhkannya.

module.ts

Karena kami memiliki main.js sebagai entri ke aplikasi kami, kami juga memiliki titik masuk ke sumber daya kami yaitu module.ts. Setiap file lain dalam sumber daya ditentukan di sini.

# Example module.ts
import { Module } from '@nestjs/common';
import { CarService } from './car.service';
import { CarResolver } from './car.resolver';

@Module({
  providers: [CarResolver, CarService]
})
export class CarModule {}

Folder ini khusus untuk tabel yang harus dibuat di database kami. Katakanlah Anda ingin tabel dibuat di database Postgres Anda, kami dapat menentukan semua kolom, tipenya, dan juga kunci utama yang dapat ditentukan dalam file khusus ini.

import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity('car-table')
export class Car {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column('varchar', { length: 500 })
  name: string;
}

File ini khusus untuk titik akhir API kami.
resolver.ts - When we use graphql as transport layer.
controller.ts- When we use REST as transport layer.

import { Resolver, Query, Mutation, Args } from '@nestjs/graphql';
import { CarService } from './car.service';
import { CreateCarInput } from './dto/create-car.input';
import { UpdateCarInput } from './dto/update-car.input';

@Resolver('Car')
export class CarResolver {
  constructor(private readonly carService: CarService) {}

  @Mutation('createCar')
  create(@Args('createCarInput') createCarInput: CreateCarInput) {
    return this.carService.create(createCarInput);
  }

  @Query('car')
  findAll() {
    return this.carService.findAll();
  }

  @Mutation('updateCar')
  update(@Args('updateCarInput') updateCarInput: UpdateCarInput) {
    return this.carService.update(updateCarInput.id, updateCarInput);
  }
}

Koneksi basis data aktual dan logika bisnis diletakkan di sini. ini akan terhubung dengan resolver.

import { Injectable } from '@nestjs/common';
import { CreateCarInput } from './dto/create-car.input';

@Injectable()
export class CarService {
  create(createCarInput: CreateCarInput) {
    return 'This action adds a new car';
  }

  findAll() {
    return `This action returns all car`;
  }
}

File ini berisi skema untuk modul kami seperti apa jenis permintaannya dan apa jenis respons yang akan dikembalikan.

type Car {
  id: ID
  name: String
}

input CreateCarInput {
  name: String!
}
type Query {
  car: [Car]!
  car(id: Int!): Car
}

type Mutation {
  createCar(createCarInput: CreateCarInput!): Car!
}

Inilah file terakhir kami, file ini khusus untuk input yang digunakan dalam sumber daya.

import { Field, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class CreateCarDto {
  @Field() readonly id?: string;
  @Field() readonly name: string;
}

Ini dia, Itu saja untuk blog ini.
Saya harap semua orang menyukai blog ini.
Jika Anda menyukainya, beri tepuk tangan ,
dan bagikan dengan teman Anda.

Di blog saya berikutnya, mari jelajahi koneksi database dan juga membuat API.
Harap tetap disini untuk hal yang sama…

Untuk konten yang lebih menarik di Frontend, Silakan ikuti saya .

Terima kasih banyak, Semuanya .
Sampai Lain Waktu,
Selamat Belajar ✍️

Abhishek Kovuri , pengembang UI