DEV Community: owen

🤖 Create your Discord bot by using TypeScript and decorators!

owen — Sat, 28 Mar 2020 11:33:30 +0000

Some time ago, I posted an article about a module allowing the creation of Discord bots using the TypeScript decorators.
Well today, I'm pleased to announce the version 2.0 of this module!

This version includes two new very useful decorators which are @Command and @Guard.

@Command 📟

First of all, @Command allows you to simplify the management of the commands launched by the user in the chat, here is a small example of what this gives:

import {
  Discord,
  Command,
  CommandMessage
}

@Discord({ prefix: "!" })
abstract class App {
  // Executed when the user send "!hello"
  @Command("hello")
  hello(message: CommandMessage) {
    message.reply("Hello!")
  }

  @CommandNotFound()
  hello(message: CommandMessage) {
    message.reply("Command not found :(")
  }
}

@Guard ⚔️

The @Guard decorator, on the other hand, allows functions to be executed before the event or command is executed, e.g. to check whether a condition is satisfied in order to block the event if it's not.

import {
  Discord,
  Command,
  CommandMessage,
  Guard
}

function IsUserMaster(message: CommandMessage) {
  return message.author.username === "TheMaster139";
}

@Discord({ prefix: "!" })
abstract class App {
  // Executed when the user send "!hello" and if user's username is "TheMaster139"
  @Guard(IsUserMaster)
  @Command("hello")
  hello(message: CommandMessage) {
    message.reply("Hello!")
  }

  @CommandNotFound()
  hello(message: CommandMessage) {
    message.reply("Command not found :(")
  }
}

Thanks for reading! 😊

But that's not all, for more information you can go to the GitHub repository.

You can also join the Discord server.

GraphQL: Create your API using TypeScript and decorators with Rakkit

owen — Sun, 30 Jun 2019 21:21:43 +0000

What?

Okay then, this is related to my previous article about Rakkit. So I'll advise you to go take a look around 😊.

So, here I will show you a more concrete example of what you can do using Rakkit to create a GraphQL API with a user management system.

But first: the installation of Rakkit 💾

So there are few dependencies that we must install to continue:

Here, I would use apollo-server but it's also possible to install apollo-server-koa if you use Rakkit for REST and GraphQL which allows you to link contexts.

Just run this command to install the required dependencies:

npm i rakkit graphql @types/graphql apollo-server reflect-metadata

reflect-metadata allows us to use the decorators with TypeScript

Okay cool, now we just need to configure TypeScript to enable the decorators by creating a tsconfig.json file at the root of the project, containing this:

{
  "compileOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "target": "es2016",
    "noImplicitAny": false,
    "sourceMap": true,
    "outDir": "build",
    "declaration": true,
    "importHelpers": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "es2016",
      "esnext.asyncitable"
    ],
    "moduleResolution": "node"
  }
}

./tsconfig.json

The definitions of types 🚻

Okay then let's start by creating our User class, which we'll have to decorate with @ObjectType():

import { ObjectType, Field } from "rakkit";
import * as Crypto from "crypto";

@ObjectType()
export class User {
  @Field()
  username: string;

  @Field()
  email: string;

  @Field()
  id: string;

  // Just to show a computed property:
  @Field(type => String)
  get flatInfos(): string {
    return [this.name, this.email, this.id].join(":");
  }

  constructor(username: string, email: string) {
    this.username = username;
    this.email = email;
    this.id = Crypto.randomBytes(16).toString("hex");
  }
}

./types/User.ts

You need a small "database" 🗂

So we're going to have to play with some users in order to test our app, so I'm just going to create a list of user instances to make it clearer:

You can use a real database with an ORM like TypeORM for your projects

import { User } from "../types/User";

export const users = [
  new User("JohnDoe", "john@doe.com"),
  new User("JaneDoe", "jane@doe.com"),
  new User("Ben", "ben@doe.com")
];

./db/users.ts

Resolver (Query, Mutation, Subscription) 🚀

It is in the following class that we will define our query/mutation/subscription. It will contain a simple CRUD and a subscription to be notified when a user is registered:

import {
  Resolve,
  Query,
  Mutation,
  Subscription,
  IContext,
  Arg
} from "rakkit";
import { User } from "../types/User";
import { users } from "../db/users";

@Resolver()
export class UserResolver {
  @Query(returns => [User])
  getAllUsers() { {
    return users;
  }

  @Query({ nullable: true })
  getOneUserByName(@Arg("name") name: string): User {
    return users.find((user) => user.name ==== name);
  }

  @Mutation()
  addUser(
    // Defining the mutation arguments
    @Arg("name") name: string,
    @Arg("email") email: string,
    context: IContext
  ): User {
    const user = new User(name, email);
    users.push(user);
    // Publish the event for subscriptions with the created user
    context.gql.pubSub.publish("USER_ADDED", user);
    return user;
  }

  @Subscription({ topics: "USER_ADDED" })
  userAddedNotif(createdUser: User): User {
    // Send the created user to the client
    return createdUser;
  }
}

./resolvers/UserResolver.ts

The point of entry 🚪

Now we need to have an entry point for our application:

// It allows us to use decorators:
import "reflect-metadata";

import { Rakkit } from "rakkit";
import { ApolloServer } from "apollo-server";

async function bootstrap() {
  await Rakkit.start({
    gql: {
      // You give an array of glob string:
      resolvers: [`${__dirname}/resolvers/*Resolver.ts`]
    }
  });
  // Retrieve the GraphQL compiled schema:
  const schema = Rakkit.MetadataStorage.Gql.Schema;

  const server = new ApolloServer({
    schema
  });

  server.listen();
}

bootstrap();

./bootstrap.ts

Done, so let's start and test it ! 🎉

To start it you must install ts-node globally to run directly your TypeScript app:

npm i -g ts-node

Then just run this:

ts-node relative-path-to/bootstrap.ts

And just go to http://localhost:4000 with your favorite browser to make some GraphQL queries! 🔥

getAllUsers - Get all users:

getOneUserByName - Get a specific user by name:

addUser - Add an user:

userAddedNotif - Listen to the user creation event:

Et voilà! This example is available on GitHub 😊, thanks!

Rakkit : create your GraphQL and REST APIs with TypeScript and decorators!

owen — Tue, 25 Jun 2019 19:46:32 +0000

Wow, another new framework, really...? 😅

So, we can have a little history before 📜

After having developed many apis in pure JavaScript and was co-frontted to maintain them. I decided to review my ways of doing things for my future projects and it was a good thing because, in my company, we decided to create a headless CMS allowing a great freedom on the choice of APIs (GraphQL or REST) used and operating on a principle similar to strapi.io.
Several constraints arose for this project: We had to be able to be very reactive if we had a problem with our application (code), to be able to easily add functionality for our customers, to depend as little as possible on external modules and above all to have a relatively clean code and remain a maximum DRY.
So after some research and decisions we started to develop a framework that would be the basis of this CMS, this one allows us to create REST and GraphQL APIs (these two types of APIs can share the use of the same middleware) to create applications using websockets and also to do dependency injection.

Rakkit packages 📦

Rakkit allows you to create a backend with a lot of features, here is the list of them:

node_modules phobia 😫

We all know this famous file which can accumulate a lot of dependencies... We absolutely wanted to avoid this, even if it meant redeveloping dependencies ourselves. However, we need some modules to be able to make all this work! Here is Rakkit's recipe for each of the packages:

GraphQL API: graphql, graphql-subscription
REST API: koa, koa-router, koa-compose
Websocket application: socket.io

The advantage of having some dependencies is, if we take the example of koa, we can use modules made by the community for koa in order to use them in Rakkit!
You can use Rakkit in parallel with another dependency such as TypeORM !

Where? 📍

Then the project is accessible on GitHub here, the documentation is there, and you can of course install it on npm.
If you have any concerns we are all available to help you, just post an issue.
(a small star on GitHub motivates us to continue in this direction!).

Okay, but what does it look like? 🧐

So, it will eventually need some basics to understand the rest, so I advise you to check out TypeScript and possibly the decorators.
These are just very simple examples, not everything is shown...

REST API 🛣

The REST package uses koa internally, the way we handle data, the way we use middleware and the general behavior is the same as koa.

import { Router, Get, Post, IContext, NextFunction } from "rakkit";
// Middlewares that are used for REST and GraphQL
import { Auth, SayHello } from "./middlewares.ts";
import { users } from "./users.ts";

@Router("user")
@UseMiddleware(Auth)
export class UserRouter {
  @Get("/")
  getAll(context: IContext) {
    // To return a result, assign the context.body value
    // Please refer to koa documentation for more informations...
    context.body = users;
  }

  @Get("/:id")
  @UseMiddleware(SayHello)
  async getOne(context: IContext, next: NextFunction) {
    // Omit variables checks here, for clarity
    const { id } = context.params; // JS destructuring
    const foundUser = users.find((usr) => usr.id === id);
    context.body = foundUser;
    await next();
  }

  @Post("/")
  addUser(context: IContext) {
    // Use koa-bodyparser to parse the body into an object (Rakkit documentation)
    const user = context.request.body
    users.push(user);
    context.body = user;
  }
}

Websockets 🔁

That's pretty simple, there is only two decorators !

import { Websocket, On, Socket } from "rakkit";

@Websocket()
export class UserWS {
  @On("connection")
  onConnection(socket: Socket) {
    // Please refer to the socket.io documentation
    socket.emit("welcome", "welcome !");
  }

  @On("message")
  onMessage(socket: Socket, message: string) {
    socket.server.emit("new:message", message);
  }
}

GraphQL API 🔥

GraphQL is a huge package, This is just a very simple example to see what it looks like, so please refers to the Rakkit documentation for more informations.

import { ObjectType, Field } from "rakkit";

@ObjectType({ description: "Object representing an user" })
export class UserObjectType {
  @Field()
  id: string;

  @Field()
  email: string;

  @Field()
  username: string;

  @Field()
  activated: boolean;
}

You can define your queries/mutation/subscriptions like this:

import { Resolver, Query, IContext, NextFunction } from "rakkit";
// Middlewares that are used for REST and GraphQL
import { Auth, SayHello } from "./middlewares.ts";
import { users } from "./users.ts";

@Resolver()
@UseMiddleware(Auth)
export class UserResolver {
  // Precise the type, TS cannot resolve the return type when it's an array (Please refer to Rakkit the documentation)
  @Query(returns => UserObjectType)
  users(): UserObjectType[] {
    return users;
  }

  @Query()
  @UseMiddleware(SayHello)
  async user(
    @Arg("id")
    id: string,
    context: IContext,
    next: NextFunction
  ): UserObjectType? {
    return users.find((usr) => usr.id === id);
    await next(); // Go the the middleware function
  }
}

It compiles it as a GraphQL Schema (You can use it in with your favorite server implementation like Apollo or graphql-yoga). In SDL, it looks like that:

"""Object representing an user"""
type UserObjectType {
  id: String!
  email: String!
  username: String!
  activated: Bollean!
}

type Query {
  users: [UserObjectType]
  user(id: String!): UserObjectType
}

Dependency Injection 🤯

This notion may seem abstract if you have never heard of it, it is particularly present with Angular, so I advise you to go and find out beforehand in order to be able to understand (more infos here).

import { Service, Inject } from "rakkit";

@Service()
export class CronService {
  start() {
    // ...
  }
}

@Service()
export class UserService {
  @Inject()
  private cronService: CronService;

  constructor() {
    this.cronService.start();
    // ...
  }
}

More advanced examples are available here and more will come in the near future! 😉

Et voilà! Thank you for taking the time to read this article! 👋

Build your Discord bot using TypeScript and decorators !

owen — Sun, 23 Jun 2019 09:39:19 +0000

After developing several Discord bots in JS, I decided to switch to TypeScript however I was not satisfied with the way we listen on an event that is very "JavaScript".

So last night, I decided to create a very small framework to develop a Discord bot using three TypeScript decorators: @Discord, @On() and @Once().

How does it works ?

It's quite simple, when you decorate your class with @Discord, it's instantiated internally, so when a certain event is triggered, the framework will simply call the corresponding class method and pass it all the arguments provided by triggering this event.

So, how ?

The full documentation can be found here but here is a simple example:

import {
  Discord,
  On,
  Client // Use the Client that are provided by @typeit/discord
} from "@typeit/discord";
// You must import the types from @types/discord.js
import {
  Message
} from "discord.js";

// Decorate the class with the @Discord decorator
@Discord
export class AppDiscord {
  private static _client: Client;
  private _prefix: string = "!";
  private _sayHelloMessage: string = "hello !";
  private _commandNotFoundMessage: string = "command not found...";

  static start() {
    this._client = new Client();
    // In the login method, you must specify the glob string to load your classes (for the framework).
    // In this case that's not necessary because the entry point of your application is this file.
    this._client.login(
      "YOUR_TOKEN",
      `${__dirname}/*Discord.ts` // glob string to load the classes
    );
  }

  // When the "message" event is triggered, this method is called with a specific payload (related to the event)
  @On("message")
  async onMessage(message: Message, client: Client) {
    // Your logic...
    if (AppDiscord._client.user.id !== message.author.id) {
      if (message.content[0] === this._prefix) {
        const cmd = message.content.replace(this._prefix, "").toLowerCase();
        switch (cmd) {
          case "hello":
            message.reply(this._sayHelloMessage);
            break;
          default:
            message.reply(this._commandNotFoundMessage);
            break;
        }
      }
    }
  }
}

// Start your app
AppDiscord.start();

Et voilà !