DEV Community: NotAllow

มาใช้ Package management สำหรับ deno กันเถอะ

NotAllow — Sat, 30 May 2020 15:29:18 +0000

หลังจากที่ผมได้ลองเล่น Deno มาได้สักพักก็ไปนึกถึง npm ที่เป็น Package management แล้วก็มาเจอ Trex ซึ่งอ่านว่าทีเร็กซ์ นั้นเป็นตัวจัดการที่ทำหน้าที่คล้าย npm เลย แต่ก็มีสิ่งที่เราต้องรู้จักก่อนที่จะใช้ Trex นั่นคือ import_map.json

import_map.json

import_map.json คืออะไร ? มันก็คือ ไฟล์ที่ไว้กำหนด import map กับ modules สำหรับ deno แต่ตอนนี้เขาบอกว่ายังไม่ stable แต่ก็ลองมาใช้กันก่อนครับ มาดูข้อจำกัดตอนนี้กัน

single import map
no fallback URLs
ไม่ support std: namespace
supports ไฟล์ที่เป็น :, http: และ https: schemes เท่านั้น

มาดูตัวอย่างกัน ในทีนี้ผมจะใช้ framework oak ในการทำ http server นะครับ
ผมสร้างไฟล์ index.ts ตาม code ด้านล่างนี้

import { Application } from 'https://deno.land/x/oak/mod.ts'

const app = new Application()

app.use(ctx => {
  ctx.response.body = 'Hello World!'
})

await app.listen({ port: 4000 })

แต่ถ้าเรากำหนดไฟล์ import_map.json เพื่อการ map modules ที่เราเรียกใช้จะได้ตามนี้ครับ
code สำหรับ import_map.json


{
  "imports": {
    "oak": "https://deno.land/x/oak/mod.ts"
  }
}

แล้วเราก็มาเปลี่ยน code ที่ไฟล์ index.ts ที่ import กันครับจะได้ code ตามตัวอย่างข้างล่างนี้

import { Application } from 'oak'

const app = new Application()

app.use(ctx => {
  ctx.response.body = 'Hello World!'
})

await app.listen({ port: 4000 })

เพียงเท่านี้เราก็จะได้ใช้ import map เรียบร้อยแล้วครับ งั้นมาลองรันกันครับ

วิธีการรัน สิ่งที่จะต้องใช้ตอน deno run คือ

--allow-net
--importmap=import_map.json (ไว้กำหนดไฟล์ importmap)
--unstable (importmap ยังไม่ stable เลยต้องกำหนด permission ว่ารันแบบ unstable)

$ deno run --allow-net --importmap=import_map.json --unstable  index.ts

เมื่อสั่ง deno run จากคำสั่งข้างต้นเสร็จเราลองเรียก http://localhost:4000
ผลลัพธ์ถ้าถูกต้องจะได้ Hello World!

OK ! งั้นต่อมาเรามาใช้ Package management สำหรับ deno กัน สิ่งที่ผมจะใช้คือ Trex นั่นเอง

Trex

ก่อนอื่นเรามาติดตั้งกันครับ (ใช้ได้สำหรับ deno version 1.0.0 ขึ้นไปเท่านั้น)

$ deno install --allow-read --allow-write --allow-net --allow-run --unstable https://deno.land/x/trex/Trex.ts

หลังจากติดตั้งรองรัน Trex ดูครับโดยการเช็ค Trex version

$ Trex --version

ผลลัพธ์ที่ได้

Trex:
 Version v0.2.0 
 ༼ つ ◕_◕ ༽つ

โอเคน่าจะใช้งานได้แล้วครับ 👍
ก่อนอื่นเราลองลบไฟล์ import_map.json ของเราที่สร้างเองเมื่อสักครู่นี้ก่อนครับ
เมื่อลบแล้วมาติดตั้ง package กัน
คำสั่งก็เหมือน ๆ กับ npm เลยครับ

$ Trex install --map {modules name} // or Trex i --map {modules name}

ผมจะ install oak มาใช้งานนะครับ

$ Trex i --map oak

เมื่อรันเสร็จแล้วก็จะมีไฟล์ import_map.json ที่ Trex ได้สร้างขึ้นมาพร้อมกับ code ที่ map กับ modules
เสร็จแล้วก็ลองรันไฟล์ index.ts ดูครับ

$ deno run --allow-net --importmap=import_map.json --unstable index.ts

เปิด Browser ขึ้นมาเข้า http://localhost:4000 ผลลัพธ์ก็น่าจะได้
Hello World! มานะครับ

จะลบ modules ที่ map ก็แค่ใช้

$ Trex delete {modules name}

สรุป

ข้อดีของ Trex คือสามารถกำหนด import map ให้เราโดยอัตโนมัติให้เรา แต่ถ้าเราไม่ใช้ก็ต้องกำหนด import map ด้วยตัวเอง ยังไงซะหวังว่าอนาคตน่าจะ stable และมีอะไรที่น่าสนใจอีกครับ หวังว่าบทความนี้จะมีประโยชน์ต่อผู้อ่านนะครับ ขอบคุณที่ยอมอ่านจนจบครับ 😀

มาลองเล่น Deno GraphQL พร้อมกับทำ Deno Hot Reload กันเถอะ

NotAllow — Fri, 29 May 2020 16:34:03 +0000

มาวันนี้หลาย ๆ คนก็น่าจะรู้จัก Deno มาสักพักแล้ว Deno เป็น Runtime ตัวใหม่ของ
Javascript ที่จะมาแทน Node ในอนาคตสำหรับใครยังไม่ได้ติดตั้ง Deno ไปติดตั้งกันเลยดีกว่า

Install Deno กัน

สำหรับ MacOS ใช้ Homebrew ไปเลย แต่ถ้าใช้ OS อื่น ๆ สามารถดูการติดตั้งได้ที่นี่เลย https://deno.land/#installation

brew install deno

หลังจากที่เราได้ Deno มาแล้วก็มาเข้าเรื่องกันผมจะขอทำ Hot Reload และมาพูดต่อถึงการเขียน GraphQL นะครับ

มาเริ่มติดตั้ง Hot Reload ดีกว่า

สำหรับสาย NodeJS คงไม่พ้น Nodemon พอมา Deno ก็มีให้ใช้เหมือนกันนั่นคือ Denon
ขั้นตอนการติดตั้งก็ง่าย ๆ
สิ่งที่ต้องมีคือ Deno Version 1.0.1 ขึ้นไป ก่อนจะติดตั้งมาอัพเกรด Deno เป็น Version ล่าสุดกันก่อนโดยใช้คำสั่ง deno upgrade อัพเกรดเสร็จแล้ว ก็ติดตั้ง Denon กันได้เลย

deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts

หลังจากติดตั้งมาแล้วให้ export PATH="$HOME/.deno/bin:$PATH" เพื่อใช้ในการ Execute Deno ที่ได้ติดตั้งมา
เพียงเท่านี้คุณก็จะมี Denon ไว้ทำ Hot Reload แล้วต่อมา เริ่มสร้าง Project Deno GraphQL กัน

GraphQL

บทความนี้ขออนุญาติไม่พูดถึง GraphQL นะครับ เพราะคิดว่าน่าจะพอทราบ ๆ กันบ้างแล้วเนอะ
สิ่งที่ผมใช้คือ OAK ซึ่งเป็น middleware framework ไว้ทำ http server มาเริ่มกันเลยยย

├── denon.json
├── src
│   ├── index.ts
│   └── resolvers
│       ├── index.ts
│       └── user.ts
└── tsconfig.json

ผมจะวางโครงสร้างไว้คร่าว ๆ ตามนี้ครับ
มาสร้าง Denon ให้กับ project นี้กันก่อนโดยใช้คำสั่ง

denon init

เสร็จแล้วจะมีไฟล์ denon.json ให้เราทำการแก้ไขดังนี้

{
  "$schema": "https://deno.land/x/denon/schema.json",
  "scripts": {
    "start": "deno run --allow-net ./src/index.ts"
  }
}

เสร็จแล้วก็ไขไฟล์ ./src/index.ts ใส่ code ตามข้างล่างนี้ได้เลยครับ

import { Application } from 'https://deno.land/x/oak/mod.ts'
import { GraphQLService } from './resolvers/index.ts'

const app = new Application()

app.use(async (ctx, next) => {
  await next()
  const rt = ctx.response.headers.get('X-Response-Time')
  console.log(`${ctx.request.method} ${ctx.request.url} - ${rt}`)
})

app.use(async (ctx, next) => {
  const start = Date.now()
  await next()
  const ms = Date.now() - start
  ctx.response.headers.set('X-Response-Time', `${ms}ms`)
})

await app.use(
  await GraphQLService.routes(),
  await GraphQLService.allowedMethods()
)

console.log('Server start at http://localhost:8080')
console.log('Playgroud at http://localhost:8080/graphql')
await app.listen({ port: 8080 })

เสร็จแล้วมาเขียน resolvers กัน
ให้แก้ไข code ไฟล์ ./src/resolvers/user.ts ส่วนตัวผมชอบ TypeDefs ไว้ที่เดียวกับ Resolvers นะครับ เพราะเวลาจะหา TypeDefs หรือจะแก้ไข Resolvers จะได้แก้ที่ไฟล์เดียวกันไปเลย

import { gql } from 'https://deno.land/x/oak_graphql/mod.ts'

export const resolvers = {
  Query: {
    getUser: (parent: any, { id }: any, context: any, info: any) => {
      console.log('id', id, context)
      return {
        firstName: 'wooseok',
        lastName: 'lee',
      }
    },
  },
  Mutation: {
    setUser: (
      parent: any,
      { firstName, lastName }: any,
      context: any,
      info: any
    ) => {
      console.log('input:', firstName, lastName)
      return {
        done: true,
      }
    },
  },
}

export default gql`
  type User {
    firstName: String
    lastName: String
  }

  input UserInput {
    firstName: String
    lastName: String
  }

  type ResolveType {
    done: Boolean
  }

  type Query {
    getUser(id: String): User
  }

  type Mutation {
    setUser(input: UserInput!): ResolveType!
  }
`

เสร็จแล้วมา import ใช้ Resolvers และ TypeDefs จากไฟล์ ./src/resolvers/user.ts ใน ./src/reolvers/index.ts กันครับ ก็จะได้ตาม code ตัวอย่างด้านล่างนี้

import { applyGraphQL } from 'https://deno.land/x/oak_graphql@0.1/mod.ts'
import user, { resolvers as UserResolvers } from './user.ts'

export const GraphQLService = await applyGraphQL({
  typeDefs: [await user],
  resolvers: [await UserResolvers],
})

เสร็จแล้วสั่ง denon start แล้วลองเล่น Playgroud ดูครับถ้าไม่ผิดพลาดอะไรน่าจะได้ตามรูปด้านล่างนี้ครับ

เสร็จแล้วครับ ขอบคุณที่มาอ่านกันอย่างไรก็ตามขอให้บทความนี้พอจะมีประโยชน์กับผู้อ่านไม่มากก็น้อยนะครับ ผิดพลาดประการใด ขออภัยมา ณ ที่นี้ด้วยครับ
ป.ล. ขอให้สนุกกับไดโนเสาร์นะครับ 😀

มาลองใช้ NestJS ทำ GraphQL Server กัน (ฉบับผู้เริ่มต้น)

NotAllow — Sat, 11 Apr 2020 04:39:01 +0000

ทุกวันนี้ผมใช้ express + apollo ทำ GraphQL Server แต่ปีนี้ในทีมก็มีมติว่าจะเปลี่ยนไปเขียน TypeScript ซึ่งจะตอบโจทย์ในเรื่องของ NewBie Mistakes ตอนแรกว่าจะเขียนไว้อ่านเอง แต่ก็อยากมาแชร์ให้ทุก ๆ คนมาลองดูกันครับ

มาทำความรู้จักกันครับว่า NestJS คืออะไร

NestJS อย่างที่หลาย ๆ คนทราบกันดีอยู่แล้วว่ามันคือ Framework ตัวนึงที่เขียนด้วย TypeScript และออกแบบมาโดยใช้แนวคิด OOP กับ Fuctional Programming เข้าด้วยกัน ซึ่ง NestJS ก็อาศัยการทำงานของ HTTP Server ที่เราสามารถเลือกใช้ได้ก็จะเป็น Express หรือ Fastify ในบทความนี้ผมขอใช้ Express แล้วกันนะครับ

มาเริ่มกันเลยดีกว่า

ติดตั้ง Nest CLI กันก่อน ด้วย Command ตามนี้

$ npm i -g @nestjs/cli

เสร็จแล้วก็สร้างโปรเจค

$ nest new nestjs-graphql-starter

แล้วมันจะขึ้นให้เลือก package manager ว่าจะใช้ npm หรือ yarn ในทีนี้ผมก็เลือก yarn นะครับ

Which package manager would you ❤️  to use? npm or yarn

เท่านี้ก็จะได้ Nestjs project structer มาแล้วครับ ต่อมาเราจะมาเริ่มใช้ GrahpQL ร่วมกับ NestJS กัน

ก่อนอื่นก็มาติดตั้ง GraphQL กันด้วยคำสั่ง

$ yarn add @nestjs/graphql graphql-tools graphql // or npm i --save @nestjs/graphql graphql-tools graphql

ต่อมาติดติ้ง Http server จะเลือกใช้ตัวไหนก็ได้ระหว่าง express กับ fastify

กรณีเลือกใช้ express ใช้คำสั่ง

$ yarn add apollo-server-express // or npm i --save apollo-server-express

กรณีเลือกใช้ fastify ใช้คำสั่ง

$ yarn add apollo-server-fastify // or npm i --save apollo-server-fastify

เข้า Folder ที่สร้างเมื่อกี้ด้วย Editor Tool แล้วหาไฟล์ nest-cli.json ใส่ code ตามนี้

{
  "compilerOptions": {
    "plugins": ["@nestjs/graphql/plugin"]
  }
}

ต่อมาแก้ไขไฟล์ ./src/app.module.ts เพื่อเรียกใช้งาน graphql ตาม code ด้านล่างนี้ได้เลยครับ

import { Module } from '@nestjs/common'
import { GraphQLModule } from '@nestjs/graphql'

@Module({
  imports: [
    GraphQLModule.forRoot({
      installSubscriptionHandlers: true,
      autoSchemaFile: 'schema.gql',
      debug: false,
      playground: true,
    }),
  ],
})
export class AppModule {}

จาก code ด้านบน

installSubscriptionHandlers: true ไว้สำหรับเลือกเปิดใช้งาน Subscription หรือไม่
autoSchemaFile: 'schema.gql' ไว้ generate file typeDefs schema เพื่อนำไปไว้ Build เพื่อ Run Apollo Server
debug: false ไว้สำหรับจะเลือกใช้งาน debug หรือไม่
playground: true ไว้สำหรับเลือกเปิดใช้งาน playgroud client หรือไม่

ต่อมาพระเอกของเรากันดีกว่า Nest มี CLI ไว้สร้าง Module,Interface,Resolver,Service
มาสร้าง module กัน ด้วยคำสั่ง

$ nest g module {name} //or nest g mo {name}

ตัวอย่างผมจะสร้าง module ชื่อ book ก็ใช้คำสั่ง

$ nest g mo book

$ nest g resolver {name} //or nest g r {name}

ตัวอย่างผมจะสร้าง Resolver ชื่อ book ก็ใช้คำสั่ง

$ nest g r book

ทีนี้ NestJS ก็ได้ออก Decorator ของตัวเองเพื่อทำ DTO (Data Transfer Object) ไว้แล้ว โดยที่เมื่อก่อนยืมของ TypeGraphQL มาใช้ก่อน งั้นเรามาเริ่มสร้าง Model กัน
สร้างโดยการ Create Folder ให้อยู่ใน Directory Book ที่ ./src/book/models/book.model.ts

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

@ObjectType()
export class Book {
  @Field(type => ID)
  id: string

  @Field(type => String, { nullable: true })
  name?: string

  @Field(type => String, { nullable: true })
  description?: string

  @Field(type => Number, { nullable: true })
  price?: number

  @Field(type => [String], { nullable: true })
  writer?: string[]
}

ถ้าต้องการให้ Field มีค่าเป็น null ได้ ให้ใส่ options เพิ่มคือ { nullable: true } และใส่ ? หลังตัวแปรเพื่อละเว้นให้เป็น optional ได้

เสร็จแล้วสร้าง DTO ไว้หรับ Type Input กันเถอะเพื่อไปใช้เป็น Variable ตอนเรียกใช้งานกัน

create folder dto ให้อยู่ใน Directory Book ที่ ./src/book/dto
แล้ว create file book.input.ts อยู่ใน folder dto
เมื่อสร้างแล้วเขียน code ตามนี้เลยครับ

import { Field, InputType } from '@nestjs/graphql'

@InputType()
export class InputBook {
  @Field(type => String)
  name: string

  @Field(type => Number, { nullable: true })
  price?: number

  @Field(type => String, { nullable: true })
  description?: string

  @Field(type => [String])
  writer: string[]
}

ถ้าต้องการให้ Field ไหนเป็น Array ให้ใส่ [] คอบ Type นั้นได้เลยครับ

มาจัดการกับ Resolver กัน ในบทความที่ผมเขียนนี้จะยกการทำ Mutation กับ Query ไว้เท่านี้ก่อนนะครับเพื่อไม่ให้บทความมีความยาวมากเกินไป

กลับมาที่ File : book.resolver.ts แล้วเขียน Code สร้าง Mutation กับ Query กันตามนี้เลยครับ ขออนุญตาติฟิกค่า return เลยนะครับ

import { Resolver, Query, Mutation, Args } from '@nestjs/graphql'
import { Book } from './models/book.model'
import { InputBook } from './dto/book.input'

@Resolver('Book')
export class BookResolver {
  @Query(returns => Book)
  getBook(): Book {
    const result: Book = {
      id: '1',
      name: 'BeforeSecond',
      price: 199,
    }
    return result
  }

  @Mutation(returns => Book)
  createBook(@Args('input') input: InputBook): Book {
    const result: Book = {
      id: '2',
      ...input,
    }
    return result
  }
}

เสร็จแล้วลองรันกันครับ

$ yarn start:dev

เข้า Web Browser เปิด URL: http://localhost:3000/graphql

ทดสอบ Query กัน

ใส่ Code Query ดังนี้

query {
  getBook{
    id
    name
    price
    description
    writer
  }
}

ปรากฏว่าได้ผลลัพทธ์

{
  "data": {
    "getFirst": {
      "id": "1",
      "name": "first"
    }
  }
}

ทดสอบ Mutation กัน

mutation {
  createBook(input:{
    name:"test",
    description:"ทดสอบ",
    price:299,
    writer:["First","BeforeSecond"]
  }){
    id
    name
    price
    description
    writer
  }
}

ผลลัพท์

{
  "data": {
    "createBook": {
      "id": "2",
      "name": "test",
      "price": 299,
      "description": "ทดสอบ",
      "writer": [
        "First",
        "BeforeSecond"
      ]
    }
  }
}

Very Good 👍👍👍👍👍

สรุปได้ว่า NestJS ก็เป็นอีกทางเลือกนึงที่สามารถทำ GraphQL Server ได้ด้วยการเขียน TypeScript ที่ผมคิดว่าตอบโจทย์ได้ดีเลยทีเดียวครับ โดยปกติถ้าเขียน Express+Apollo เราจะต้องมานั่งทำ typeDefs เอง หรือบ้างก็ไปใช้ CLI codegen:generate แต่ NestJS ทำให้เราสะดวกมากขึ้นไปเยอะเลย ยิ่งถ้าใช้ TypeORM หรือ Sequelize นี่ยิ่งสบายเลยกับการเขียน GraphQL มาก ๆ เลยครับ

สุดท้ายนี้ ถ้าผิดพลาดต้องขอภัยด้วยนะครับ ขอบคุณที่อ่านมาจนจบครับผม 😀
สามารถศึกษาเพิ่มเติมได้ที่
Referense: https://docs.nestjs.com/graphql/quick-start