Forem: Robert Osborne

Create a Simple REST API with Deno

Robert Osborne — Thu, 21 May 2020 23:42:14 +0000

Intro

Deno has recently hit Version 1, and there’s been a ton of talk about it.

In this post, we won't discuss the ins and outs of Deno. Those resources already exist. If you’d like to learn more about Deno, please check out Deno’s landing page.

What we will do in this post, however, is build a very simple REST API to keep track of to-dos using both Deno and Oak.

Set up

Let's start by creating our project folder.

mkdir deno_oak_rest_api_example && cd deno_oak_rest_api_example

Follow the steps on the landing page to install Deno.

I'll be installing Deno using Brew.

brew install deno

Pay attention to the terminal. You might encounter some extra setup steps.

Let's install some Deno modules that will help us during our development.

Denon is a way for us to have the server reset after every change. This is similar to how we would use Nodemon in Node development.

deno install -Af --unstable https://deno.land/x/denon/denon.ts

After Denon is installed we can start creating our folder structure

- src
  - controllers
    - todos.ts
  - model
    - Todos.ts
  - types
    - Todo.ts
- .denon.json
- server.ts

Now let's create a .denon.json file in the root of our directory.

{
    "files": ["server.ts"],
    "quiet": false,
    "debug": true,
    "fullscreen": true,
    "extensions": [".js", ".ts", ".json"],
    "interval": 500,
    "watch": ["src/"],
    "deno_args": ["--allow-net"],
    "execute": {
        ".js": ["deno", "run"],
        ".ts": ["deno", "run"]
    },
    "fmt": false,
    "test": true
}

Now let’s create our server.ts file in the root of our directory.

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router();
const port = 3000;

// Our routes
router.get("/", (context) => {
    context.response.body = "Hello world!";
})

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

console.log(`Listening on port ${port}...`);

await app.listen({ port });

Run denon in the terminal and navigate to path http://localhost:3000/. You should see the response: "Hello world!"

Once the basic setup is complete, we can start making our REST API.

Working on the core API

Let's start by defining the types of items we’re going to be returning through our API.

./src/types/Todo.ts

export type Todo = {
  id: string;
  name: string;
  isComplete: boolean;
};

Then let’s create a model we can use to store our to-dos. In this example we’re using a simple array, but you can replace it with any database.

./src/model/Todos.ts

import { Todo } from "../types/Todo.ts";

export const Todos: Array<Todo> = [
  {
    id: "40238v4ff-3120-3794-6830-dfgkj49gj30df",
    name: "Update resume",
    isComplete: false,
  },
  {
    id: "3kd90dj2d-7059-5820-1258-goi34j09dfg3",
    name: "Clean room",
    isComplete: false,
  },
  {
    id: "j30vh293g-0192-5832-1082-gj30fj305mc",
    name: "Play games with friends",
    isComplete: true,
  },
  {
    id: "a0s9qk2df90-8069-7069-2130-fj30dkfgh",
    name: "Play guitar",
    isComplete: false,
  },
];

Now let’s create the functions at the endpoints will be using.

./src/contollers/todo.ts

import { v4 } from "https://deno.land/std/uuid/mod.ts";

import { Todos } from "../model/Todos.ts";
import { Todo } from "../types/Todo.ts";

// Helper functions
const findTodo = (todoId: string): Todo | undefined =>
  Todos.find(({ id }) => id === todoId);

const isMissing = (value: any) => value === null || value === undefined;

// Route functions
export const getTodos = ({ response }: { response: any }) => {
  response.status = 200;
  response.body = { msg: "Todos fetched!", data: Todos };
  return;
};

export const getTodo = async ({
  params,
  response,
}: {
  params: any;
  response: any;
}) => {
  const todo: Todo | undefined = findTodo(params.id);

  if (isMissing(todo)) {
    response.body = { msg: "Todo not found!" };
    response.status = 404;
    return;
  }

  response.body = { msg: "Todo fetched!", data: todo };
  response.status = 200;
};

export const addTodo = async ({
  request,
  response,
}: {
  request: any;
  response: any;
}) => {
  const body = await request.body();
  const { name } = await JSON.parse(body.value);

  if (isMissing(name)) {
    response.body = { msg: "Name is missing from the request body" };
    response.status = 400;
    return;
  }

  const newTodo: Todo = {
    id: v4.generate(),
    name,
    isComplete: false,
  };

  Todos.push(newTodo);

  response.body = { msg: "Todo added!", data: newTodo };
  response.status = 200;
};

export const updateTodo = async ({
  params,
  request,
  response,
}: {
  params: any;
  request: any;
  response: any;
}) => {
  const body = await request.body();
  const { isComplete } = await JSON.parse(body.value);

  if (isMissing(isComplete)) {
    response.body = { msg: "isComplete is missing from the request body" };
    response.status = 400;
    return;
  }

  const todo: Todo | undefined = findTodo(params.id);
  const updatedTodo: any = { ...todo, isComplete };
  const newTodos = Todos.map((todo) =>
    todo.id === updatedTodo.id ? updatedTodo : todo
  );

  Todos.splice(0, Todos.length);
  Todos.push(...newTodos);

  response.body = { msg: "Todo updated!", data: updatedTodo };
  response.status = 200;
};

export const deleteTodo = async ({
  params,
  response,
}: {
  params: any;
  response: any;
}) => {
  const newTodos = Todos.filter((todo) => todo.id !== params.id);

  Todos.splice(0, Todos.length);
  Todos.push(...newTodos);

  response.body = { msg: "Todo deleted!", data: newTodos };
  response.status = 200;
};

All that we need to do now is use these functions in our server.ts file.

./server.ts

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

import {
  addTodo,
  deleteTodo,
  getTodo,
  getTodos,
  updateTodo,
} from "./src/controllers/todos.ts";

const router = new Router();
const port = 3000;

// Our routes
router
  .get("/todos", getTodos)
  .get("/todos/:id", getTodo)
  .delete("/todos/:id", deleteTodo)
  .patch("/todos/:id", updateTodo)
  .post("/todos", addTodo);

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

console.log(`Listening on port ${port}...`);

await app.listen({ port });

And that's it!

We've built this in a way that will allow us to continue to add more routes. We've separated the parts to resemble an MVC approach, minus the view. It's also important to note that we were able to build this without the set up required for running a server with Node and Express. This was also done with no NODE_MODULES!!! I'm excited to see where Deno will be in the next couple of months as support continues to grow.

For more information and resources I recommend this post.

All the source code is located here

Twiliohackathon Project Part 2 - The Product

Robert Osborne — Thu, 30 Apr 2020 01:54:04 +0000

About

I built a serverless application that allows users to text kind words to those that are recovering from COVID-19.

One of the main problems for those recovering from COVID-19 is the isolation from loved ones. You can communicate through other means but this application is for those that don't already have a support network.

Twiliohackathon Project Part 1 - The Setup

Robert Osborne — Thu, 09 Apr 2020 03:17:04 +0000

The Problem

As we learn more about COVID-19, we are developing ways to reduce its spread. This is a step in the right direction for people who are uninfected – but what about the confirmed cases?

Hopefully, the confirmed cases of COVID-19 are receiving treatment in hospital or isolated at home. But they can’t visit with friends or family. I’m sure this would make anyone feel lonely. To compensate for this, we can create support groups through communication channels like SMS, Messenger, WhatsApp, etc.

But what about people who lack a support group they can turn to?

The Solution

A support group that includes everyone with a mobile phone!
Such a solution would allow anyone with a mobile phone to text something encouraging to someone who is undergoing treatment.

The Tech Stack

Backend
This will comprise most of the application and be built using the Serverless framework.

Here is a diagram of the basic implementation (but note that this is a proof of concept and subject to change):

Frontend
I will create a public-facing web page where those with receiving treatment can sign up to receive words of encouragement from strangers.

I will build this web page using Gatsby and React.

APIs
The main line of communication will be through SMS, so this will require Twilio’s Programmable SMS service. Messages are sent in one direction, meaning that no two-way conversations will take place. Once someone receives an SMS message, they can’t respond to it. This gives us room to customize the message sent by including the Giphy API to attach funny or inspiring GIFs. 😄

Final thoughts

The point of this application is to allow everyone an opportunity to send their love and best wishes to those undergoing treatment. It’s important to remember that while most of us (including me) are under quarantine, we aren’t alone. We have the power and resources to make a difference in someone’s life, even if it’s just by sending them a few nice words.

I’m posting this to share my idea, so please let me know what you think!

If you’re planning to do the same thing, let me know what your implementation is. 😄

Forem: Robert Osborne

Create a Simple REST API with Deno

Intro

Set up

Working on the core API

And that's it!

Twiliohackathon Project Part 2 - The Product

About

Category

What I built

Demo Link

Link to Code

How I built it

Additional Resources/Info

Twiliohackathon Project Part 1 - The Setup

The Problem

The Solution

The Tech Stack

Final thoughts