DEV Community: Danilo Miranda

🍪 Cookies - A humbling auth experience

Danilo Miranda — Mon, 22 Jul 2024 14:25:57 +0000

Originally posted on: https://www.danmiranda.io/blog/%F0%9F%8D%AA%20Cookies%20-%20A%20humbling%20auth%20experience

While working on a NextJS 14 project, I had to implement the user flow to refresh an authentication token using the refresh token.

There were some overlooked concepts that made my life harder when I could've solved the problem much faster if I paid attention to the fundamentals of web development and specially how cookie works.

As it's a NextJS 14 project, I was making use of the latest and shiniest techniques available within the stack, such as middleware, server actions and route handlers.

My middleware file was already handling the logic to check if a valid session was available and would redirect the user accordingly or just let him access the route he was intending to access.

However, there was this important step of refreshing the authentication token if a valid refresh token was available.

At first, looks like a simple solution was on the way. Just implement a server action to handle the logic to obtain a new auth token and call this server action, if needed, from my middleware file.

The problem is that Next's middleware runs on the edge runtime and since server actions will inherit the runtime from which they are used on, this means that my server action responsible for taking care of the logic to refresh the authorization token would also be running under the same runtime.

The problem is, that I was using the jsonwebtoken package to handle token signing and validation, and some internal code from that package relies on APIs available only in the node runtime.

I could've used other jwt packages, such as jose which has operability in Nextjs's edge runtime but I was using another package built on top of the RPC framework which also relied on node so that wouldn't solve my problem.

The solution I came up with was that I could maintain my server action, but then implement a route handler to call it and handle the response back. That would solve the problem of runtimes since by default route handlers run in the node runtime, although you can change that if you want to.

That's what I did, implemented the call from a route handlers and inside my middleware I would send a fetch request to that same route and handle the response I get from the API call.

All seemed to be working well at first, the request was going through, I could log the old tokens and the new ones, to ensure that the refresh flow was working, but no matter how many times I refresh the auth token, the cookies that were supposed to hold the auth token were never updated, they were always missing.

This is where I was overlooking an essential web fundamental concept.

Next middleware runs on the server, I was sending the request to refresh the auth token and getting the new token, while also setting the new cookie, all from within the context of running on the server, but never on the client.

This means that in between the middleware handler sending the request to update the auth token, receiving the response and redirecting, or allowing the user to access a given route, the new auth token and the set of the cookie would be lost, cause that was never happening on the client. Basically, the instructions to set the cookie stopped on the server side and never reached the client.

The solution was now obvious, of course, after banging the head for "hours", at the end of the day, the solution will always look obvious.

Instead of leaving the middleware to handle that request to refresh the token, I would pass the responsibility to a component high in the components tree so the instruction coming from the response header to set the cookie would be available in the browser's context, correctly setting and updating the cookies as I needed.

Using relay-graphql-js with NestJS

Danilo Miranda — Tue, 07 Sep 2021 21:21:12 +0000

While building GraphQL apis, if you need to stay compliant with relay server specifications you can use this relay-graphql library since it provides a bunch of helpers so you can avoid some boilerplate code, specially when dealing with pagination following the connection specifications.

However, you might encounter some problems if you try using this with NestJS GraphQL module since it's heavily focused on object oriented programming paradigms while graphql-relay is more generic and works around composing different functions.

The real problem is how you can specify the given entity connection return type so NestJS can properly work with your schema.

So what we can do is, define a generic function that will return a Connection class that implements Relay's connection interface

import { Type } from "@nestjs/common";
import { Field, ObjectType } from "@nestjs/graphql";
import { Connection as RelayConnection, Edge as RelayEdge, PageInfo as RelayPageInfo } from "graphql-relay";

export function Connection<GraphQLObject>(GenericClass?: Type<GraphQLObject>) {
  @ObjectType({ isAbstract: true })
  abstract class IConnection implements RelayConnection<GraphQLObject> {
    @Field(() => [Edge], { nullable: false })
    edges: Array<RelayEdge<GraphQLObject>>

    @Field(() => PageInfo, { nullable: false })
    pageInfo: PageInfo;
  }

  return IConnection
}

Notice that this class IConnection is implementing RelayConnection that we are importing from "graphql-relay" package.

We are defining that the field edges is of type [Edge]. So let's define it in our function:

@ObjectType({ isAbstract: true })
abstract class Edge<GraphQLObject> implements RelayEdge<GraphQLObject> {
    @Field(() => GenericClass, { nullable: false })
    node: GraphQLObject

    @Field(() => String, { nullable: false })
    cursor: string
}

And the field pageInfo is returning PageInfo, so let's also define it:

@ObjectType({ isAbstract: true })
class PageInfo implements RelayPageInfo {
    @Field(() => String, { nullable: true })
    startCursor: string;

    @Field(() => String, { nullable: true })
    endCursor: string;

    @Field(() => Boolean, { nullable: false })
    hasPreviousPage: boolean;

    @Field(() => Boolean, { nullable: false })
    hasNextPage: boolean;
}

Your function Connection should look like this now:

export function Connection<GraphQLObject>(GenericClass?: Type<GraphQLObject>) {
    @ObjectType({ isAbstract: true })
    class PageInfo implements RelayPageInfo {
        @Field(() => String, { nullable: true })
        startCursor: string;

        @Field(() => String, { nullable: true })
        endCursor: string;

        @Field(() => Boolean, { nullable: false })
        hasPreviousPage: boolean;

        @Field(() => Boolean, { nullable: false })
        hasNextPage: boolean;
    }

    @ObjectType({ isAbstract: true })
    abstract class Edge<GraphQLObject> implements RelayEdge<GraphQLObject> {
        @Field(() => GenericClass, { nullable: false })
        node: GraphQLObject

        @Field(() => String, { nullable: false })
        cursor: string
    }

    @ObjectType({ isAbstract: true })
    abstract class IConnection implements RelayConnection<GraphQLObject> {
        @Field(() => [Edge], { nullable: false })
        edges: Array<RelayEdge<GraphQLObject>>

        @Field(() => PageInfo, { nullable: false })
        pageInfo: PageInfo;
    }

    return IConnection
}

You might be wondering, why not simply use generic and separated classes. Unfortunately typescript has some limitations that won't make this generic classes work as we would like. (You can read a bit more about it here).

Now, the only thing you would need to do, for each of your project's entities, anytime you need to implement pagination following the connection specficiations, is this:

You could create a user.connection.ts and define it like this:

import { ObjectType } from "@nestjs/graphql";
import {Connection} from "../../_types/models/connection.model";
import { User } from "./user.model";

@ObjectType()
export class UserConnection extends Connection<User>(User) {
}

And in your resolver you'll be able to do something like this:

import { connectionFromPromisedArray } from "graphql-relay";

/**
* ... rest of your code ...
*/

@Query(() => FinancialRecordConnection)
async users(@Args({ type: () => ConnectionArguments }) args: ConnectionArguments) {
    return connectionFromPromisedArray(this.usersService?.list(), args)
}

Note:

In your function Connection if you get an error like this:

Return type of exported function has or is using private name 'IConnection'.ts(4060)

You have two options:

Go to your tsconfig.json file and set false to declarations property.
Explicitly type the return of the Connection function with any.

Setting up image upload with Cloudinary, Rails and Active Storage

Danilo Miranda — Mon, 12 Jul 2021 23:41:37 +0000

This guide will walk you through the steps to setup simple image uploading in Rails using cloudinary service and ActiveStorage.

You can reference all documentation here:

Ruby-on-Rails SDK– Upload + Image, Video Transformations | Cloudinary

Active Storage integration | Cloudinary

Active Storage Overview — Ruby on Rails Guides

Installing Cloudinary's SDK

Let's start by installing Cloudinary's SDK for rails:

In your Gemfile insert the following line:

gem 'cloudinary'

And then run bundle.

Setting up your Cloudinary credentials

After installing, you'll need to setup all needed credentials and other useful variables that will be sent in each upload request to cloudinary apis.

There's a few options, and the one we are going to use here is by creating a file inside the config folder called cloudinary.yml

You can download a pre-customized using this link: cloudinary.yml

If you couldn't download the file, you need this basic set of configuration to get you started:

development:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false

It's good to make use of environment variables to put your credentials in this file. You can easily manage env variables using the dotenv gem

Setting up Rails Active Storage

Setting up Active Storage is fairly simple, but you'll need to have either ImageMagick or libvips installed since Rails relies on one of these libs for image analysis and transformations.

If you're gonna handle image/video or PDF previews, you'll also need other libs.

Your can see the full list of requirements here.

In order to work properly, active storage will need to work with three tables in your application: active_storage_blobs, active_storage_variant_records and active_storage_attachments.

Don't worry cause you don't need to manually create and set them up. Just run rails active_storage:install to generate the migration file and as always, run rail db:migrate.

There's some additional notes about how this tables work and how they will be used across your application. It's worth taking a look, specially if you use UUIDs instead of integers as primary keys.

Setting Up Cloudinary with Active Storage

Now we are ready to setup Cloudinary to be used by Active Storage.

Head to your config/storage.yml to create a cloudinary service.

cloudinary:
  service: Cloudinary
  folder: MEDIA_FOLDER_NAME_YOU_CREATED_IN_CLOUDINARY

Don't forget to change MEDIA_FOLDER_NAME_YOU_CREATED_IN_CLOUDINARY with a valid folder name you setup in your cloudinary dashboard.

Now let's tell Active Storage that we want to use this cloudinary service.

In config/environments/development.rb put the following inline:

config.active_storage.service = :cloudinary

Note: This line is probably already declared in this file as config.active_storage.service = :local , so you just to replace the assignment with cloudinary .

Associating image file with application Model

Let's say that our application has a Publication entity that the user can create with a thumbnail image.

Add has_one_attached :thumbnail to your publication.rb file.

This is a case where the entity has ONE file associated with a column.

If you need to storage and handle multiple images take a look has_many_attached

In your view file, inside your form, create a simple file input:

<%= form.file_field :thumbnail %>

Now, inside your controller, that handles the form submission, you can do the following:

@publication = News.create params # any other param your entity may need

@publication.thumbnail.attach(params[:thumbnail])

And you can render your image like this:

<img src="<%= publication.thumbnail.attachment.url %>" alt="A nice alt value" />

Here are more useful references to work with model attachments:

ActiveStorage::Blob (rubyonrails.org)

ActiveStorage::Attachment (rubyonrails.org)

ActiveStorage::Attached::One (rubyonrails.org)

ruby-grahql: generating schema definition file

Danilo Miranda — Sat, 26 Jun 2021 00:48:16 +0000

While developing your GraphQL api using graphql-ruby you will probably come across the need of generating the schema definition file from the schema you defined in your code, so other front-end client would be able to consume it, or generate types automatically based on that schema.

There is this github issue, where this comment outlines how you can accomplish the code generation. I couldn't make the same example work in my code so I came up with another solution.

It will also involve what was implemented in this example from https://howtographql.com.

We'll define a custom rake task and a rake task from the ruby-graphql package.

Start by creating the file lib/taks/graphql.rake.

The file itself will be really simple:

require "graphql/rake_task"
require "rake"

GraphQL::RakeTask.new(
  load_schema: -> (_task) {
    require_relative '../../app/graphql/dcms_schema'
    DcmsSchema
  }
)

namespace :graphql do
  task export: :environment do
    Rake::Task["graphql:schema:dump"].invoke
  end
end

So, first we are requiring graphql/rake_task so we can declare a graphql rake task and require rake to be able to invoke a rake task from within the file.

Here we declare the rake task called graphql:schema:dump. Inside the load_schema callback we require our schema definition file and return the schema class at the end of the callback.

GraphQL::RakeTask.new(
  load_schema: -> (_task) {
    require_relative '../../app/graphql/dcms_schema'
    DcmsSchema
  }
)

After declaring the graphql rake task, we create our custom task by doing the following:

namespace :graphql do
  task export: :environment do
    Rake::Task["graphql:schema:dump"].invoke
  end
end

Inside it, we are simply calling the rake task we previously defined with Rake::Task["graphql:schema:dump"].invoke

Now, in the terminal we are able to execute our rake task by typing the following

$ rake graphql:export

If all works, you should be able to see two files: schema.graphql and schema.json in the root of your project.

You can check the rake tasks documentation for graphql-ruby here: https://graphql-ruby.org/api-doc/1.9.12/GraphQL/RakeTask

Vue two way data-binding in custom checkbox

Danilo Miranda — Tue, 08 Jun 2021 23:29:41 +0000

When writing vue application, you'll probably come across a situation where you need to write custom input components, and therefore leverage the two way data binding functionality.

A simple custom text input is easiy achievable and it's documented here

But there's a different approach to achieve the same two way data binding functionality in custom checkbox components.

Creating the custom checkbox component

Let's start creating our component. It will be as simple as just rendering the checkbox and a label can be set through props.

Checkbox.vue



<template>
    <label>
        <input  type="checkbox" :value="inputValue"  v-model="model" />
        <span>{{ label }}</span>
    </label>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    label: String,
    value: Array,
    inputValue: String,
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
};
</script>

Now, take a look at this part:



<input  type="checkbox" :value="inputValue"  v-model="model" />

We are defining a checkbox input, and binding the value attribute to our inputValue, which will simply be used to determine the input's value for a form submission for example, just like you would do with normal html



<input  type="checkbox" value="somoething" />

Now, v-model is bound to a property called model which is a computed property:



computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },

The getter for this property will simply return value to v-model and when the data has to be updated, through the setter, we emit the input event, to let the part of the application that's using this custom checkbox component, that the value has been updated.

It's important to note that the value property was declared as being an array, since each time we mark a new checkbox, this checkbox value will be pushed to this array bound to v-model property.

Using the component

Now that we have defined how our component will work, we can use it in an example and see if it wil work.

I'll just define a simple Vue component that will use this checkbox component we just created:

Home.vue



<template>
  <div>
    <Checkbox label="React" inputValue="react" v-model="selectedOptions" />
    <Checkbox label="Vue" inputValue="vue" v-model="selectedOptions" />
    <Checkbox label="Angular" inputValue="angular" v-model="selectedOptions" />

    <br /><br /><br />

    <ul>
      <li v-for="(option, index) of selectedOptions" :key="index">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
import Checkbox from "./Checkbox";

export default {
  name: "Home",
  props: {},
  components: {
    Checkbox,
  },
  data() {
    return {
      selectedOptions: [],
    };
  },
};
</script>

In this example, we have three checkboxes component in use, with three different value for each one of them: react, vue and angular with their respective labels.



    <Checkbox label="React" inputValue="react" v-model="selectedOptions" />
    <Checkbox label="Vue" inputValue="vue" v-model="selectedOptions" />
    <Checkbox label="Angular" inputValue="angular" v-model="selectedOptions" />

We are binding the v-model property to selectedOptions reactive data property of our home component, which wil be an array.

To make sure that we are updating this selectedOptions each time a check or uncheck an input, I added a simple loop, to render each value in selectedOptions array:



<ul>
    <li v-for="(option, index) of selectedOptions" :key="index">
        {{ option }}
    </li>
</ul>

Nothing selected:

All selected:

Two selected:

You can see a working example here in CodeSandbox:

Building a Card Memory Game with Swift and SwiftUI

Danilo Miranda — Mon, 10 Aug 2020 13:26:00 +0000

Post also published in: DanMiranda.io

I decided I wanted to start learning Swift and SwiftUI.

I'll use this Stanford's course to learn it, and I'll also document what I'm learning or building through the material.

I already have this simple post about the MVVM architecture that it's used to build applications using Swift and SwiftUI.

Creating the project

Open your Xcode and choose the Create a new Xcode project.

Then Single View App cause we'll start with the basics barebones for a project. But you can see we have some interesting options to bootstrap an application with some pre-configured structure.

Now setup some project's details, like name, choosing your team, organization name and so on.

Just pay attention to the highlighted below. Make sure to choose Swift for language and SwiftUI for User interface.

After that, you'll be asked where you want to save your project and if you want to initiate the project with source control. (Git initiated)

Now that we created our project, we can take a look at the file ContentView.swift .



import SwiftUI

struct ContentView: View {    
    var body: some View {
        Text("Hello world")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We have the SwiftUI import at the very top of the file so we can use UI elements from SwiftUI such as Text like it's done in the example.

The block of code below is used to create the live preview shown in the Canvas (that's probably positioned at the right side of your code editor.

We won't change this code for now. Just leave it as it is.



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This preview will only work if you're using OS Catalina or a newer version. If you still don't see the preview, just follow this:

Click where it's highlighted at the top right corner of your editor and then make sure the Canvas option is checked.

Before we start creating our elements, let's see a little bit about UI elements.

If you already know this and want to keep working on the project, you can skip to this part.

Creating an UI Element

You can create an UI element by declaring a new struct:



struct CardView: View {}

Here we are creating a new struct and naming it as CardView. Next, by using : View we are declaring that our CardView struct will behave like a View

Note that when declaring a struct that will behave like a view, we must declare a body variable that we use to build our interface or the UI element.



var body: some View {}

Here we are declaring a variable called body as it is required and declaring its type which is some View .

Now, what exactly is some View ?

When we type a variable as some View we are declaring that this variable will hold a value that's is of a View type, such as:

Text
HStack
ZStack
RoundedRectangle

All these elements mentioned above comply with the View protocol, which is why they are valid returns for something that's declared as holding a value of type of some View.

But why exactly do we specify the variable as of some View instead of Text or RoundedRectangle for example.

Well, that can be done in case your body will only have one element of the specified type.

For example, we can declare a body that will hold a Texttype, like this:



struct CustomText: View {
    var body: Text {
        Text("Hello my custom and amazing text element")
    }
}

// optionally, you can explictly write the return statement

struct CustomText: View {
    var body: Text {
        return Text("Hello my custom and amazing text element")
    }
}

But, bear in mind that usually some of your UI elements will consistent of a number of different other elements, like Texts, RoundedRectangles , ZStack and so on.



struct CustomText: View {
    var body: Text {
        ZStack {
            Text("Hello my custom and amazing text element")
        }
    }
}

If you try this, Xcode will throw an error, stating: Cannot convert return expression of type 'ZStack<Text>' to return type 'Text'

So, in this case, you type your variable body as of type some View. This is called opaque types

Basic UI Elements (Building Blocks)

ZStack

This element serves as an alignment element which will align all of its children in the Z-axis. Each of the elements will be placed on top of each other.



struct ZStackExample: View {
    var body: some View {
        ZStack {
            Text("Orange text")
            Text("Green text")
            Text("Blue text")
        }
    }
}

The very last element will be on top of all other preceding elements and so on.

HStack

An element used to align the children elements in the horizontal axis (x-axis)

Creating our CardView

After getting a grasp of View elements that will help us build our UIs, we can continue building our card game.

For now, we will create something simple as a Card which will contain a string element. In our case we will use emojis for these string elements.



struct CardView: View {    
    var body: some View {
        ZStack {
          RoundedRectangle(cornerRadius: 10.0).fill().foregroundColor(Color.white)
          RoundedRectangle(cornerRadius: 10.0).stroke().foregroundColor(Color.orange)
          Text("👻")
        }
    }
}

We start by creating a new Struct called CardView that will behave like a View



struct CardView: View {}

Remember, when declaring a struct that will behave like a View we need to declare a variable called body which will hold a value that complies with the View protocol.



var body: some View {}

Now, to compose the card component, we'll need three layers. One that will hold a blank rectangle. The other which will hold a rectangle with an orange border and the final layer, the emoji which will be shown.

Since we need to place all of them on top of each other, we need the ZStack element.

So inside of the body variable we do:



ZStack {
    RoundedRectangle(cornerRadius: 10.0).fill().foregroundColor(Color.white)
    RoundedRectangle(cornerRadius: 10.0).stroke().foregroundColor(Color.orange)
    Text("👻")
}

So, we added two RoundedRectangle elements and the Text element.

One of the parameters that the RoundedRectangle accepts is the cornerRadius which we use to determine the border radius for that rectangle.

We can also add some modifiers to style the rectangle even more, like:

fill() which will fill the whole element with a color. We can choose the color that will be used to fill by applying another modifier, called foregroundColor that receives one unlabelled parameters that will set the color. We access available colours by using the constant Color followed by a colour name. Color.white
stroke() will just create a border stroke around the element and we can also choose its colour with the same foregroundColor modifier we used to set the fill color.

Wrapping all up we now have this:



struct CardView: View {    
    var body: some View {
        ZStack {
          RoundedRectangle(cornerRadius: 10.0).fill().foregroundColor(Color.white)
          RoundedRectangle(cornerRadius: 10.0).stroke().foregroundColor(Color.orange)
          Text("👻")
        }
    }
}

We may have something like this for now:

It would be interesting to add some padding , to give more space between the card and the main screen.

We can do that by simply adding the padding() modifier to the ZStack.



ZStack {
  RoundedRectangle(cornerRadius: 10.0).fill().foregroundColor(Color.white)
  RoundedRectangle(cornerRadius: 10.0).stroke().foregroundColor(Color.orange)
  Text("👻")
}.padding(10) // ADD THIS

Let's now use the HStack element to place more than one card, all placed horizontally.

In the main View of our app, the ContentView struct we start by placing the HStack



struct ContentView: View {
    var body: some View {
        HStack {
            AnotherCardView()
            AnotherCardView()
            AnotherCardView()
        }
    }
}

Just to see as an example, let's place three cards inside our HStack.

You now have something like this:

As the number of displayed cards will vary in the future, let's implement a simple loop to render a number of cards, instead of having to manually place them in our code.



struct ContentView: View {
    var body: some View {
        HStack {
            ForEach(0..<4) {
                index in AnotherCardView()
            }
        }
    }
}

Now that we have the basics we can start building our Model and a ModelView.

Building our Model

The model is the source of truth for all the data that runs across the app.

Let's start by creating a new Swift file, and just in this case (as it's a simple project) let's call it Model.swift.

Create a struct called CardGame that will have a generic type, or as called in Swift an opaque type.



struct CardGame<CardContent> {}

This opaque that we are calling CardContent is what will determine what type of content our card will hold. This content can be of string, number, or whatever, and in our case will be a string, since we'll be placing emojis inside the cards.

Now, what variables will we need to build this game?

Probably a variable that will hold the cards, that we can call cards and the number of pairs of cards that will be rendered in the screen.



struct CardGame<CardContent> {
    var cards: Array<Card>
    var numberOfPairs: Int
}

Take note that the cards variable will hold an Array that will contain a card type. But what exactly is this Card? Well, let's create it right now.

Create a new struct called Card.



struct Card: Identifiable {}

The Identifiable protocol will be discussed later.

Now let's think about the Memory game itself and how it works.

We need to be able to make cards have their faces with their content facing "down" and once we choose one the card flips and the content is shown.

We also need to "match" cards once 2 cards with the same content are flipped up.

And finally, the card need to hold the content, in our case our emoji. So we need three variables for now:

isFaceUp
isMatched
content

So:



struct Card: Identifiable {
    var isFaceUp: Bool = false
    var isMatched: Bool = false
    var content: ???

    var id: Int
}

Let's forget about the id variable for now, because we only declared it now since Identifiable protocol requires it. We will make sense for it later on.

Now, se that I "typed" content with ???. That it is because I wanted to highlight that the CardContent opaque type we declared for our main struct (the CardGame) comes into play.

The CardContent type is what's going to tell what type of content our card holds. Be it a number or a string for example. So our variable content inside our Card struct will hold a value of this type:



var content: CardContent

Let's also make a simple method that we will further use to choose the clicked card.



func chooseCard(card: Card) {
  print("Chosen card \(card)")
}

For now let's just print the chosen card.

See the \() syntax inside the string? This is how we interpolate a variable value inside a string, in our case the card variable.

The only thing left now is to create an initializer to attribute values to our variables cards and numberOfPairs.



init(numberOfPairsOfCards: Int, contentFactory: (Int) -> CardContent) {
        cards = []
        numberOfPairs = numberOfPairsOfCards

        for pairIndex in 0..<numberOfPairsOfCards {
            let content = contentFactory(pairIndex)

            // append two cards (a pair) to the array of cards
            cards.append(Card(content: content, id: pairIndex * 2))
            cards.append(Card(content: content, id: pairIndex * 2+1))
        }

                cards.shuffle()
    }

What's happening here?

We set cards to be an empty array at the beginning and the numberOfPairs to be equal to the value passed in numberOfParisOfCards when initializing our struct.



cards = []
numberOfPairs = numberOfPairsOfCards

Now we loop over the numberOfPairs using the for _ in .



for pairIndex in 0..<numberOfPairsOfCards {
  let content = contentFactory(pairIndex)

  // append two cards (a pair) to the array of cards
  cards.append(Card(content: content, id: pairIndex * 2))
  cards.append(Card(content: content, id: pairIndex * 2+1))
}

pairIndex will hold the current value contained in the iteration which we will use to invoke our contentFactory function, that will return something of CardContent type that will put in the content variable we just declared.

We declared the content variable with let since this value will be a constant.

Having the content set, we can append to our cards variable a pair of cards.



  cards.append(Card(content: content, id: pairIndex * 2))
  cards.append(Card(content: content, id: pairIndex * 2+1))

Building our ModelView

Now we'll start creating our ModelView which is the "entity" that will act as a middle man in the communication between the Model and the View.

We could build more than one ModelView depending on the types of Card games we want. As we want a memory game of cards that will have emojis "printed" on them, we'll create a ModelView called EmojiMemoryGame.

Start by creating a class:



class EmojiMemoryGame {}

But why a class and not a struct?

First, let's recall what a ModelView is essentially. It will act as a portal of communication between the Model and View.

But suppose that as an application grows, the number of different views will also grow and probably the number of Views trying to communicate with the data contained in the Model will also grow.

In this case, we may have different View referencing to the same ModelView.

Different from Struct , Classes leave in the heap, they have pointers pointing to their position in the memory.

So anytime a new View creates a new instance of a ModelView which was declared as class it is only pointing to a location in the memory.

If we declare our ModelView as a Struct each time a View needs to use the ModelView to communicate with the Model, it will do so by creating a new instance in the memory.

Now let's create the access (a "door") to our model:



class EmojiMemoryGame {
    private var model: CardGame<String>
}

We are making our model var as private to avoid that Views can directly control what's inside of model.

By declaring the reference to Model as private, we force ourselves to write the "intents" to modify the Model's data or write our own references inside our ModelView that will reference the values inside the Model.

Remember: In MVVM pattern, the View is not supposed to directly access what's inside the Model. Every communication between Model and View must pass between the ModelView

At this point you might be seeing XCode throwing you an error saying that Class 'EmojiMemoryGame' has no initializers.

Let's fix this:



class EmojiMemoryGame {
    private var model: CardGame<String> = EmojiMemoryGame.createMemoyGame()

    static func createMemoryGame() -> CardGame<String> {
        let emojis = ["👻", "🧟‍♂️", "🧙🏻‍♂️", "🎃", "🕸"]

        let randomNumberOfPairs = Int.random(in:2...5)


        return CardGame<String>(numberOfPairsOfCards: randomNumberOfPairs) {
            pairIndex in emojis[pairIndex]
        }
    }
}

What we are doing here is, first we created a static method called createMemoyGame() that will return a CardGame of Strings: CardGame<String>

Then we declare a fixed array of five emojis:



let emojis = ["👻", "🧟‍♂️", "🧙🏻‍♂️", "🎃", "🕸"]

And declare a random number of pairs of cards the game will have once it starts:



let randomNumberOfPairs = Int.random(in:2...5)

And in the end, we return a new instance of CardGame



return CardGame<String>(numberOfPairsOfCards: randomNumberOfPairs) {
  pairIndex in emojis[pairIndex]
}

But where is this syntax coming from?

Remember when e declared the initializer for our Model?



init(numberOfPairsOfCards: Int, contentFactory: (Int) -> CardContent) { }

Our Model's initializer requires two parameters:

numberOfPairsOfCars which is simply an Int telling how many pairs of cards the game will have
contentFactory which is a function that will generate our card content.

Now let's look back at what our createMemoryGame() method is returning:



return CardGame<String>(numberOfPairsOfCards: randomNumberOfPairs) {
  pairIndex in emojis[pairIndex]
}

We are returning a new instance of the Struct CardGame<String> by passing the following arguments:

numberOfPairsOfCards which will be the random generated number we assigned to randomNumberOfPairs

Now, where's the second required argument, contentFactory?

It's right here:



{ pairIndex in emojis[pairIndex] }

This is the syntax of a Swift closure. I won't explain what these are here because they deserve a post of its own. There's a reference to closure documentation at the end of this.

But for now, just keep in mind that:

pairIndex is the Int argument that our contentFactory argument requires



(Int) -> CardContent

and that what is after the in keyword is what will be returned from this closure which is essentially an inline function.

As we declared that our CardGame will be of String type, like this: CardGame<String> we are returning one of the emojis from the array, based on the pairIndex argument.



emojis[pairIndex]

Now we just need to expose our Model's variables, cards and numberOfPairs and create a simple intent to "choose" a card (for now it will only print a message in the console)



var cards: Array<CardGame<String>.Card> {
  model.cards
}

var pairs: Int {
    model.numberOfPairs
}



func choose(card: CardGame<String>.Card) {
    model.chooseCard(card: card)
}

At the end you should have something like this:



class EmojiMemoryGame {
    private var model: CardGame<String> = EmojiMemoryGame.createMemoryGame()

    static func createMemoryGame() -> CardGame<String> {
        let emojis = ["👻", "🧟‍♂️", "🧙🏻‍♂️", "🎃", "🕸"]

        let randomNumberOfPairs = Int.random(in:2...5)


        return CardGame<String>(numberOfPairsOfCards: randomNumberOfPairs) {
            pairIndex in emojis[pairIndex]
        }
    }

    // MARK: - Acces to model

    // this will expose cards from model to be used by the View (ContentView)
    var cards: Array<CardGame<String>.Card> {
        model.cards
    }

    var pairs: Int {
        model.numberOfPairs
    }

    // MARK: - Intent(s)

    // this will expose methods to be used by the View to interact with the Model's cards
    func choose(card: CardGame<String>.Card) {
        model.chooseCard(card: card)
    }
}

Side note: You can add this decorated comments with // MARK: - SOME_NAME to create little sections in your code, which will help you navigate in your code when it starts to grow in lines of code.

Clicking in any of these will navigate to that block of code

Adapting our View

Now that we have our Model and our ViewModel created, we can start integrating our View.

Inside our ContentView struct, now back at our View file (in our case it's called ContentView.swift, let's add a reference to our ModelView:



struct ContentView: View {
    var emojiGame: EmojiMemoryGame
}

We will be back here in a moment. For now let's go to our CardView struct.

Now we need to declare two variables to this struct.



var card: CardGame<String>.Card
var numberOfPairs: Int

We will add a few modifications to the current code of CardView. First is that we will evaluate if the card should be facing up or down. Second, for now, as everything is being aligned horizontally we need to choose a different font size in case the game has 5 pairs of cards.



var body: some View {
        ZStack {
            if card.isFaceUp {
                RoundedRectangle(cornerRadius: 10).foregroundColor(Color.white)
                RoundedRectangle(cornerRadius: 10).stroke().fill(Color.orange)
                Text(card.content).font(numberOfPairs == 5 ? Font.title : Font.largeTitle)
            } else {
                RoundedRectangle(cornerRadius: 10).foregroundColor(Color.orange)
            }
        }
    }

So, inside our ZStack we check if the card.isFaceUp is true or false. Depending on that we render different elements

We also changed this:



Text("👻")

To this:



Text(card.content)

We also added the font modifier to the Text element.



.font(numberOfPairs == 5 ? Font.title : Font.largeTitle)

As previously said, if the numberOfPairs is 5 we render if a lightly smaller font then when the game has 4 or less pairs.

Now let's go back to our ContentView struct and modify the current body.



var body: some View {
        HStack {
            ForEach(emojiGame.cards) { card in
                CardView(card: card, numberOfPairs: self.emojiGame.pairs).onTapGesture {
                    self.emojiGame.choose(card: card)
                    }.aspectRatio(0.66, contentMode: .fit)
            }
        }.padding(10)
    }

Now, before we continue, remember that Identifiable thing we declared in our Card struct inside our model?



struct Card: Identifiable {
        var isFaceUp: Bool = true
        var isMatched: Bool = false
        var content: CardContent

        var id: Int
    }

If we hadn't done this and we tried to iterate over the cards variable, as we just did, XCode would throw the following error:

Generic parameter ID could not be inferred.

That is when the Identifiable protocol comes into play. We need give a way for the iteration in ForEach to differentiate each card in the iteration, which requires a unique ID for each element.

So now, in each iteration over cards, we grab a new variable called card and return a new CardView, passing its required parameters, the card and the number of pairs.

We also added this modifier aspectRatio to better fit the cards horizontally, specially when we have 5 pairs (10 cards in total).

The last thing we did is, add this onTapGesture to our CardView so any time a user presses a card, we call our "intent" method chooseCard, passing the tapped card.

Now, before we rebuild our app to see the results, you may have noticed that in ContentView_Previews XCode is throwing an error, saying that we are missing a parameter for our ContentView and in fact we are.

Since we declared this var emojiGame: EmojiMemoryGame inside our ContentView struct we need to pass this argument:



ContentView(emojiGame: EmojiMemoryGame())

We still have on last thing. This same ContentView struct also used in SceneDelegate.swift.

Inside func scene (probably in line 23) you have this declaration:



let contentView = ContentView()

Since now ContentView requires an emojiGame we just to do the same we just did in our ContentView_Previews:



let contentView = ContentView(emojiGame: EmojiMemoryGame())

That's it

Now, you can build by clicking on the play button at the top left area of Xcode, and you may have something like this:

You may end up with a different number of cards since we randomize the number of pairs.

What's next?

There's still a lot to go. We need to add the reactive part of the app, that will react to us choosing cards and flipping them over.

References

Struct (and Classes)

Structures and Classes - The Swift Programming Language (Swift 5.3)

View

Apple Developer Documentation

HStack

Apple Developer Documentation

ZStack

Apple Developer Documentation

RoundedRectangle

Apple Developer Documentation

Text

Apple Developer Documentation

Opaque types

Opaque Types - The Swift Programming Language (Swift 5.3)

Closures

Closures - The Swift Programming Language (Swift 5.3)

MVVM Architecture

Danilo Miranda — Mon, 20 Jul 2020 23:06:35 +0000

Swift and the MVVM architecture

While building apps using Swift and SwiftUI you'll be following the MVVM architecture which consists of three distinct holes within your application.

The Model, which is responsible for holding your application's data and being the source of truth of your app.
The View, which, by name, you can guess that consists the view part of your app, where you'll write everything that it's related to your UI (buttons, lists, avatar and so on...)
The ModeView acts more like a "glue" between your Model and your View. He is responsible for enabling the communication between your view and your model, acting like a bridge or a middle agent between the two of them.

But how exactly does the ModelView guarantees this communication between the Model and the View?

Basically this communication happens by following a pattern of listening to changes, publishing that changes have occurred and "listening" to these publications.

So anytime a change of data happens in the Model, the ModelView is subscribed to these changes, listening to when they happen:

And after a change of data occurs, and ModelView detects it, what happens?

From this point, the ModelView will be responsible for publishing that a change happened. The view will be observing for these publications and will update the interface

The other direction

Now, let's take a look at how the communication happens starting from the View part of our application:

View -> ModelView -> Model

Suppose that in our interface we have a button that increments a counter. How does this update happens?

When the user clicks in this button, he has the intent of incrementing the counter. So, we expose to the View through the ModelView something that we could call as "Intent functions". They are just regular functions that will be called from an interaction that happens in our interface.

So in this simple case mentioned above, the button fires an intent to increment the counter.

When this function (for instance incrementCounter()) is invoked from the button click the ModelView will simply update the Model variable which holds the current counter value.

From this point the cycle basically repeats. After the counter value is updated, the ModelView will publish that this value was updated, the View will listen to this publication, get the new counter value and update the interface.

The final flow would look close to this:

These were just a few notes about the MVVM, there's no detail on how to implement this on an actual code base as I intend to this in a next article.

Building an API with AdonisJS (part 3)

Danilo Miranda — Sat, 16 Mar 2019 21:33:46 +0000

Hello folks! The third part of the series is finally here! 👏👏👏👏

If you are a newcomer, this is a series that will cover all the steps we need to build an API using AdonisJS. This is the third part of the series, and here are the links for the previous posts:

In this part, and I promise this will be shorter, we will cover how to implement the feature for a user to create a new event, setting a specific date, location and time.

So we'll learn how to create a new model, as the previous one was already created at the moment we scaffolded our application, how to create a new migration to properly set the columns we'll need in our table and how to establish a relationship between to models.

So let's get our hands dirty...

Creating the events table

This API will allow the user to schedule events, setting a location, the time, date and the event's title (name)

So we will need to set 4 columns:

Title (string)
Location (string)
Date (date)
Time (timestamp)

As this table will have a relationship with the user, as one may have any number of events we'll also need a column of the user's ID. This column will make a reference to the main column, User.

In Adonis, to create a new model we will do the following:

adonis make:model Event -c -m

What I'm doing here is telling adonis to make a new model, called Event and I'm passing two flags: -c and -m. These two flags will tell adonis to also create the controller (-c) and the migration (-m).

Now let's begin to structure our table. Head to the migration file database/migrations/1551814240312_event_schema.js

Inside your class EventSchema, for the up() method, do the following:

class EventSchema extends Schema {
  up () {
    this.create('events', (table) => {
      table.increments()
      table
        .integer('user_id')
        .unsigned()
        .references('id')
        .inTable('users')
        .onUpdate('CASCADE')
        .onDelete('SET NULL')
      table.string('title').notNullable()
      table.string('location').notNullable()
      table.datetime('date').notNullable()
      table.time('time').notNullable()
      table.timestamps()
    })
  }

Let's see what we are doing:

table
    .integer('user_id')
    .unsigned()
    .references('id')
    .inTable('users')
    .onUpdate('CASCADE')
    .onDelete('SET NULL')

This piece of code above is the one responsible to create the user's ID column and reference to the User table.

First, we set the data type to integer with table.integer('user_id') setting the column name as user_id inside the parameter.

With .unsigned() we set the column to only accept positive values (-1, -2, -3 are invalid numbers).

We then tell the column to reference to the user's id column with .references('id) in the User table with `.inTable('users').

If we happen to change the event's owner ID, then all the changes will reflect to the Event table, so the user's ID in the column user_id will also change (.onUpdate('CASCADE')).

In case the user's account ends up deleted, the event's user_id column of the events the deleted user owned will all be set to null .onDelete('SET NULL').

javascript table.string('title').notNullable() table.string('location').notNullable() table.datetime('date').notNullable() table.time('time').notNullable()

Now we set the other columns:

The title column, as a STRING with table.string('title')
The location column, also as a STRING with table.string('location')
The date column, as a DATETIME with table.datetime('date')
And the time column, as a TIME with `table.time('time')

Notice that for all these columns in each one of them I also set .notNullable() because the user will have to set each of these values every time he creates a new event.

After all this work we can run our migration:

adonis migration:run

To finish setting up the relationship between the Event and User tables we have two options:

We set the relationship in the User's model
We set the relationship in the Event's model

In this example, we will set the relationship in the User's model. We don't need to set the relationship in both models as Adonis' documentation itself states that:

There is no need to define a relationship on both the models. Setting it one-way on a single model is all that’s required.

So let's go to App/Models/User.js and add the method events().

events () {
    return this.hasMany('App/Models/Event')
}

That's all we need to do! Now we'll be able to start creating our controller to create and list new events.

Creating and saving a new event

First, let's create our store() method to enable a user to create and save a new event.

In App/Controllers/Http/EventController.js we'll do:

async store ({ request, response, auth }) {
    try {
      const { title, location, date, time } = request.all() // info for the event
      const userID = auth.user.id // retrieving user id current logged

      const newEvent = await Event.create({ user_id: userID, title, location, date, time })

      return newEvent
    } catch (err) {
      return response
        .status(err.status)
        .send({ message: {
          error: 'Something went wrong while creating new event'
        } })
    }
  }

It's really simple. We retrieve the data coming from the request with request.all()

We also need to retrieve the logged user's ID, but we get this data saved in the auth object, provided by the context.

const userID = auth.user.id

To use this controller we just create a new route, inside Route.group():

Route.post('events/new', 'EventController.store')

To test the event creation we send a request to this route, sending a JSON data following the structure below:

{
    "title": "First event",
    "location": "Sao Paulo",
    "date": "2019-03-16",
    "time": "14:39:00"
}

If everything runs smoothly the request will return you the created event:

{
  "user_id": 10,
  "title": "First event",
  "location": "Sao Paulo",
  "date": "2019-03-16",
  "time": "14:39:00",
  "created_at": "2019-03-16 14:40:43",
  "updated_at": "2019-03-16 14:40:43",
  "id": 6
}

Listing events

We will have two ways to list events in this API, list all events or by date.

Let's begin by listing all events. We'll create a method index():

async index ({ response, auth }) {
    try {
      const userID = auth.user.id // logged user ID

      const events = await Event.query()
        .where({
          user_id: userID
        }).fetch()

      return events
    } catch (err) {
      return response.status(err.status)
    }
  }

We'll list all events searching by the logged user's ID, so as we did before we use auth.user.id to get this information.

The way we query the data here will be a bit different than we previously did as we won't use any static method in this case.

const events = await Event.query()
        .where({
          user_id: userID
        }).fetch()

We open the query with .query() and then we set the where statement, passing an object as a parameter to pass the filters to search for the data:

.where({
    user_id: userID
})

Unlike the special static methods, we need to chain the method .fetch() to correctly retrieve the data.

This is easier to test, we just need to set a route for a GET request in start/routes.js:

Route.get('events/list', 'EventController.index')

This request won't need any parameter. If successfully completed you'll have as return the list of all events inside an array:

[
  {
    "id": 6,
    "user_id": 10,
    "title": "First event",
    "location": "Sao Paulo",
    "date": "2019-03-16T03:00:00.000Z",
    "time": "14:39:00",
    "created_at": "2019-03-16 14:40:43",
    "updated_at": "2019-03-16 14:40:43"
  }
]

Now we'll list the events by date, and for that, we'll create a method called show().

async show ({ request, response, auth }) {
    try {
      const { date } = request.only(['date']) // desired date
      const userID = auth.user.id // logged user's ID

      const event = await Event.query()
        .where({
          user_id: userID,
          date
        }).fetch()

      if (event.rows.length === 0) {
        return response
          .status(404)
          .send({ message: {
            error: 'No event found'
          } })
      }

      return event
    } catch (err) {
      if (err.name === 'ModelNotFoundException') {
        return response
          .status(err.status)
          .send({ message: {
            error: 'No event found'
          } })
      }
      return response.status(err.status)
    }

What we are doing is, retrieving the data sent in the request and the logged user's ID. Then again we manually query for events using the user's ID and the date he provided within his request.

Now we need to check if we have events in the given date or not.

If there's no event the following piece of code runs and returns a message:

if (event.rows.length === 0) {
    return response
        .status(404)
        .send({ message: {
            error: 'No event found'
        } })
}

If there's the event we simply return it.

Don't forget to create a route to call this controller when accessed:

Route.get('events/list/date', 'EventController.show')

In this example, we created an event to happen on March 16th, 2019. If we sent the following JSON in the request:

{
    "date": "2019-03-16"
}

We receive as a return:

[
  {
    "id": 6,
    "user_id": 10,
    "title": "First event",
    "location": "Sao Paulo",
    "date": "2019-03-16T03:00:00.000Z",
    "time": "14:39:00",
    "created_at": "2019-03-16 14:40:43",
    "updated_at": "2019-03-16 14:40:43"
  }
]

If we, for example, look for an event in March 26th:

{
    "date": "2019-03-26"
}

We'll receive the following:

{
  "message": {
    "error": "No event found"
  }
}

Deleting events

The only feature missing is the ability to delete an event. It'll be quite simple. We'll get, as usual, the logged user's ID and the event ID. Then we look for the event in the database. To make sure that the user only deletes his owned events we'll check if the logged user's ID is the same as the event being deleted and then proceed to delete the event.

Let's add some code to our destroy() method:

async destroy ({ params, response, auth }) {
    try {
      const eventID = params.id // event's id to be deleted
      const userID = auth.user.id // logged user's ID

      // looking for the event
      const event = await Event.query()
        .where({
          id: eventID,
          user_id: userID
        }).fetch()

      /**
       * As the fetched data comes within a serializer
       * we need to convert it to JSON so we are able 
       * to work with the data retrieved
       * 
       * Also, the data will be inside an array, as we
       * may have multiple results, we need to retrieve
       * the first value of the array
       */
      const jsonEvent = event.toJSON()[0]

      // checking if event belongs to user
      if (jsonEvent['user_id'] !== userID) {
        return response
          .status(401)
          .send({ message: {
            error: 'You are not allowed to delete this event'
          } })
      }

      // deleting event
      await Event.query()
        .where({
          id: eventID,
          user_id: userID
        }).delete()

Just a side note: As we are working with the query builder we need to delete it 'manually', also using the query builder, but if you are, in another example, fetching data using the static methods provides by the models, you just need to using the static method .delete().

Let's test our destroy() method. In your start/routes.js file add the following delete request:

Route.delete('events/:id/delete', 'EventController.destroy')

As we are only sending all the data we need through the Url we won't need to send any data in the request's body.

This is it for this one guys!

Today we learned how to create a new model, together with a controller and a migration file and also how to set a relationship between different tables

Building an API with AdonisJS (part 2)

Danilo Miranda — Tue, 05 Mar 2019 02:55:11 +0000

This is the second post of the series about creating an API using AdonisJS. If you didn't read the first part here is the link Building an API with AdonisJS.

Now let's continue with the second part. Here we will learn how to:

Update the user information (PUT request)
Recover user's password
Send emails with Adonis
Work with migration to update a table structure

Updating user information

Let's start by creating the controller that will allow the user to update his information, like his username and password (in this application the user won't be allowed to update his email).

The logic behind will be very simple:

The user will send in the request, his new desired username, his current password and the new desired password.
We'll then search for the user in the database
Then we check if the current password provided is correct and then update his information with the new provided password

In order to create a new controller, we need to run the following Adonis' command:

adonis make:controller UpdateUserInfo --type http

Now we can go to the file app/controllers/http/UpdateUserInfoController.js and start coding:

Let's make sure we import our User model and we'll also use an Adonis' helper called Hash.

Hash will be responsible for hashing the new provided password, for security reasons.

'use stric'

const User = use('App/Models/User')
const Hash = use('Hash')

Our controller will only require an update method, so inside our controller UpdateUserInfoController let's begin by creating our method:

class UpdateUserInfoController {
  async update ({ request, response, params }) {

And with our logic in mind, we do the following:

Let's get the new info sent by the user in the request:

   const id = params.id
       const { username, password, newPassword } = request
         .only(['username', 'password', 'newPassword'])

Now look for the user in database (using the id):

   const user = await User.findByOrFail('id', id)

Check if password provided matches with the current one:

   const passwordCheck = await Hash.verify(password, user.password)

   if (!passwordCheck) {
         return response
           .status(400)
           .send({ message: { error: 'Incorrect password provided' } })
       }

With the password check done, we are able to update the users information:

   // updating user data
       user.username = username
       user.password = newPassword

To finish all we just need to persist the data in the database, by using the .save() method.

   await user.save()

Your UpdateUserInfoController.js should look like this now:

'use strict'

const User = use('App/Models/User')
const Hash = use('Hash')

class UpdateUserInfoController {
  async update ({ request, response, params }) {
    const id = params.id
    const { username, password, newPassword } = request
      .only(['username', 'password', 'newPassword'])

    // looking for user in DB
    const user = await User.findByOrFail('id', id)

    // checking if old password informed is correct
    const passwordCheck = await Hash.verify(password, user.password)

    if (!passwordCheck) {
      return response
        .status(400)
        .send({ message: { error: 'Incorrect password provided' } })
    }

    // updating user data
    user.username = username
    user.password = newPassword

    // persisting new data (saving)
    await user.save()
  }
}

module.exports = UpdateUserInfoController

Perfect! Now let's test our controller. Head to start/routes.js file

One thing that's really important here is that, some of our routes will only be accessible by an authenticated user, and Adonis' routing has a perfect method to deal with this, called group(). With group you can call a method called middleware and pass as an argument an array containing which middlewares should run before accesing the routes inside the group method.

Route.group(() => {
  // updating username and password
  Route.put('users/:id', 'UpdateUserInfoController.update')
}).middleware(['auth'])

In our case, we only need the auth method, that's provided by default by Adonis. In a few moments we will test this route without and with an user athenticated

First, let's test this route without being authenticated:

This is the new information I want to save for my user:

{
    "password": "123456",
    "newPassword": "123",
    "username": "DanSilva"
}

I won't show here how to send the request using Insomnia because I already did so in the first part

If I send the request while not being authenticated I'll receive a 401 error (unauthorized). For this to work, I must provide, within the request, a JWT token that I get when I sign in, so make sure to sign in to test this route.

After you sign in, copy the token the request returned to you. Create a new PUT method in Insomnia and right below the request URL there is a tab called "Auth". In the dropdown menu that opens select Bearer Token and in the token field paste the token you just copied.

Before we send the request again, let's look at our user's data in the database to make sure it updated after our request.

Perfect. Now let's send the request. Just make sure that your URL is following this strucure

base_url/users/YOUR_USER_ID_HEre

Now send the request. If suceeded the request will return a 204, as we didn't set any message to return.

See? The new user info is saved in our database!

Sending emails with AdonisJS

Before we continue to the part where we will create the controller to request a passsword recovery and set a new password with this recovery let's see how we configure Adonis to send emails.

The email provider is not installed by default so we must proceed with its installation. To do so just run the following command:

adonis install @adonisjs/mail

Now we need to register the new provider in our application. Our providers array is located at start/app.js. Open that file and find the variable called providers. This variable is an array containing all the providers essential to make adonis work properly. Just add the following provider at the end of this array:

'@adonisjs/mail/providers/MailProvider'

We still need to configure a few things before we can continue. We need a client to test the functionality of sending emails and there is a perfect tool suited for this task.

We will use Mailtrap. Mailtrap is, as stated in their own website:

Mailtrap is a fake SMTP server to test, view and share emails sent from the development and staging environments without spamming real customers.

When you create your account and go to https://mailtrap.io/inboxes you'll see a page saying you have no inboxes.

Just click on "Create Inbox" to create a new one. Access your inbox and you'll be directly redirected to the SMTP setting tab. This is an important tab as we'll be using the information displayed here to finish our configuration in our adonis api.

Host:   smtp.mailtrap.io
Port:   25 or 465 or 2525
Username:   a218f0cd73b5a4
Password:   0a5b3c6c6acc17

We'll insert this data above in our .env file to properly set our mailing service:

MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=465
MAIL_USERNAME=a218f0cd73b5a4
MAIL_PASSWORD=0a5b3c6c6acc17

Make sure that MAIL_USERNAME and MAIL_PASSWORD matches with the data provided to you by mailtrap.

Now we need to head to app/mail.js to finish our email settings.

As we'll use SMTP, in the connection session of the file we'll leave as it is. Just make sure yours is the same as mine (in case you are using SMTP of coure):

connection: Env.get('MAIL_CONNECTION', 'smtp')

Now head to the smtp object make sure it looks like this:

smtp: {
    driver: 'smtp', // make sure here is as SMTP
    pool: true,
    // using Env (provided by Adonis) to retriev the .env variables
    port: Env.get('MAIL_PORT'),
    host: Env.get('MAIL_HOST'),
    secure: false,
    auth: {
      user: Env.get('MAIL_USERNAME'),
      pass: Env.get('MAIL_PASSWORD')
    },
    maxConnections: 5,
    maxMessages: 100,
    rateLimit: 10
  },

Awesome, if all this we finished to configure our application to send emails. It's not that much of a work to be done actually. We only took three steps:

Install Adonis' mail provider
Configure our environment variables to user a mailing service we desire
Configured our mail.js file to grab the information from our environment variables

Requesting the password recovery

Let's start by requering the password recovery. You know when you click "Forgot password" and then you (usually) give your email and then you receive an email with a link to recover your password? So this is what we will be doing now.

For this we will need to check for a validity of the request, I mean, suppose you send your first request, then you have, let's say, 2 days to click on the link sent to you, otherwise it won't be valid anymore.

I'll use a token for the sake of this purpose, so before we begin, we need a token field in user's table in our database. As, at the beginning of our application, we already run the migration that creates the user table, we will need to run a new migration to update the table structure so we can add the token column.

To create a new migration run the command:

adonis make:migration user --action select

Before we continue, let's just take a look at the structure of this command:

adonis make:migration MIGRATION_NAME --action ACTION_NAME(create, select)

MIGRATION_NAME_HERE: The name of the migration. Here I recommend you to put the name of the table you are about to update
ACTION_NAME: You have to options:
1. Create: This is used when you want to create a new table
2. Select: Use it when you want to update the structure of an existing table

Now select the new migration file created, located at database/migrations

Inside you migration file, you'll see a class with two methods, up and down. For now let's focus on the up method as this one is used to create the update. The down method just reverse the alterations you made

up () {
    this.table('users', (table) => {
      // make alterations
    })
  }

You can see that this.table() is making use of two arguments. The first one is the table's name. The value here will be automatically set based on your migration's name and in plural form. If you set, when creating the migration file, the name as user_update, this first argument here would be user_updates and you would probably run into some errors as you don't have table.

The second argument is the function that will run all your updates.

So as I said before, we will need a token field, but we'll also need a token_create_at field, so we can check its validity.

We will create 2 columns, one as a string to store our token and one as a timestamp, to store the moment our token was created.

up () {
    this.table('users', (table) => {
      table.string('token') // token
      table.timestamp('token_created_at') // date when token was created
    })
  }

Just run our migration:

adonis migration:run

Greate, now that we have our user's table updated we will begin by creating our controller. I'll call this one ForgotPassword.

adonis make:controller ForgotPassword --type http

Let's begin by creating the store() method, that will be responsible for dealing with the request of password recovery. This will generate the token and send the email to the user.

First, out of our class, let's import everything we need:

'use strict'

const User = use('App/Models/User') // user model
const Mail = use('Mail') // Adonis' mail

const moment = require('moment') // moment (RUN NPM INSTALL MOMENT)
const crypto = require('crypto') // crypto

We'll need to get the user email, and find him in the database:

// account request password recovery
const { email } = request.only(['email'])

// checking if email is registered
const user = await User.findByOrFail('email', email)

After that we'll generate the token. To generate the token we will use crypto, a native feature that comes with NodeJS. (You can find more info about crypto here: https://nodejs.org/api/crypto.html)

// generating token
const token = await crypto.randomBytes(10).toString('hex')

After we generate the token we convert is to a string using toString().

Now we need to set the validity of the token. For this we need to store the moment the token was created:

user.token_created_at = new Date()

Then we proceed by saving the token in the database and persisting all the information:

user.token = token

// persisting data (saving)
await user.save()

With all that done, we'll send the email to the user:

await Mail.send('emails.recover', { user, token }, (message) => {
    message
        .from('support@danmiranda.io')
        .to(email)
})

Mail.send() uses three parameters:

The email template (we'll talk about that in a moment)
The variables to be sent to the template
The callback function to set things like: from, to, subject, attachements, etc...

First let's talk about the template. As we created this adonis application as an api only, we need to register the view provider in the providers list in start/app.js

'@adonisjs/framework/providers/ViewProvider'

All our views, must be kepts in the directory resources/views, so in the root of the project create the folder resources and inside the folder create views folder. Now inside this folder you can organize your views as you wish. For example, in our application I'll store our email templates inside a emails folder. By now you may have a folder strucure looking like this:

├── resources
│   └── views
│       └── emails
│           └── recover.edge

recover.edge is our template file. Edge is the official template engine built for AdonisJS. It's syntax looks pretty the same as an HTML file, so there won't be any learning curve for this template.

You can build the text inside this template any way you prefer, but I'll put the one I'm using for you to follow

<h1>Password recovery request</h1>
<p>
  Hello {{ user.username }}, it seems someone requested a password recovery
  for your account registered with the email {{ user.email }}.
</p>

<p>
  If it was you, just click this
<a href="http://127.0.0.1:3333/users/forgotPassword/{{token}}/{{user.email}}">link</a>
</p>

<p>
  If it wasn't you then we recommend you to change your password. Someone may
  have stolen it. 🕵️‍🕵️‍🕵️‍🕵️‍🕵️‍🕵️‍🕵️
</p>

The most important part to note here is the use of double brackets {{}}. You use this syntax to access variable you pass to the template. In our case above we are retrieving the user's username, the user's email and the token.

Now let's take a look back at our Mail.send() function:

await Mail.send('emails.recover', { user, token }, (message) => {
    message
        .from('support@danmiranda.io')
        .to(email)
})

As we previously said, the first argument is the template. As adonis will directly read the directory resources/views we only need to specify the remaining directory inside this views folder. Because we first created a folder called emails and then we stored our template we specify it in the first argument in a syntax like accessing an javascript's object's property, in our case emails.recover.

The second argument, our variables { user, token }. Here we'll send the whole user object so we don't need to pass a lot of variables inside here.

And finally, the third argument, the callback function. In our example we'll only set the from() address and the to() address. If you want to see other options you have available please click this link.

For now, your store method must look like this:

async store ({ request }) {
    try {
      // account request password recovery
      const { email } = request.only(['email'])

      // checking if email is registered
      const user = await User.findByOrFail('email', email)

      // generating token
      const token = await crypto.randomBytes(10).toString('hex')

      // registering when token was created and saving token
      user.token_created_at = new Date()
      user.token = token

      // persisting data (saving)
      await user.save()

      await Mail.send('emails.recover', { user, token }, (message) => {
        message
          .from('support@danmiranda.io')
          .to(email)
      })

      return user
    } catch (err) {
      console.log(err)
    }

Let's add a route to deal with this request.

Route.post('users/forgotPassword', 'ForgotPasswordController.store')

When you test the request, our request will return our user, so you'll be able to see the token generated:

{
  "id": 10,
  "username": "DanSilva",
  "email": "danmiranda@danmiranda.io",
  "password": "$2a$10$3p5Ci56Zc2h7i0nC7NrfFuuorTuS/7qdAPjudPBwDTzvYrZLbOa8i",
  "created_at": "2019-03-03 15:40:02",
  "updated_at": "2019-03-04 22:49:59",
  "token": "79ee3379e35eeabdbcca", // HERE IS THE TOKEN
  "token_created_at": "2019-03-05T01:49:59.958Z"
}

Also, go to your mailtrap's inbox and you'll probably see the email sent

Great! We finished creating the controller to handle with the recover password request. In the next and final section we'll create the method to update the password to a new one, based on the token and if it's still valid or not

Updating and recovering the password

If you look at the link sent within the email you see something like this:

http://127.0.0.1:3333/users/forgotPassword/79ee3379e35eeabdbcca/danmiranda@danmiranda.io

It's basically following this structure:

base_url/users/forgotPassword/:token/:email

We will use this url to set our route that will trigger ou controller's method.

The controller's update method will follow by this logic:

We get the token and the user's email coming in the URL request
We get the new password the user desires
Look for user (using the email) in the database
Checks if the token coming from the URL is still the same in the database (usefull in case the user requested a new password recovery an tries to use an old link)
Check if token is still valid
Update password and reset token

Let's get to work then...

To get parameters coming in the URL we use the params coming from the request context.

async update ({ request, response, params }) {
    const tokenProvided = params.token // retrieving token in URL
    const emailRequesting = params.email // email requesting recovery

Now the new password the user wants

const { newPassword } = request.only(['newPassword'])

Let's look for the user

const user = await User.findByOrFail('email', emailRequesting)

Now we work with the token, firts checking if the link is not using an old token, and then checking if the current token is still valid

// checking if token is still the same
// just to make sure that the user is not using an old link
// after requesting the password recovery again
const sameToken = tokenProvided === user.token

if (!sameToken) {
    return response
        .status(401)
        .send({ message: {
            error: 'Old token provided or token already used'
        } })
}

// checking if token is still valid (48 hour period)
const tokenExpired = moment()
.subtract(2, 'days')
.isAfter(user.token_created_at)

if (tokenExpired) {
    return response.status(401).send({ message: { error: 'Token expired' } })
}

And finally, with all the checks for the token provided done, and successfully passed we update the password and reset the token:

// saving new password
user.password = newPassword

// deleting current token
user.token = null
user.token_created_at = 0

// persisting data (saving)
await user.save()

Your update() method should be like this by now:

async update ({ request, response, params }) {
    const tokenProvided = params.token // retrieving token in URL
    const emailRequesting = params.email // email requesting recovery

    const { newPassword } = request.only(['newPassword'])

    // looking for user with the registered email
    const user = await User.findByOrFail('email', emailRequesting)

    // checking if token is still the same
    // just to make sure that the user is not using an old link
    // after requesting the password recovery again
    const sameToken = tokenProvided === user.token

    if (!sameToken) {
      return response
        .status(401)
        .send({ message: {
          error: 'Old token provided or token already used'
        } })
    }

    // checking if token is still valid (48 hour period)
    const tokenExpired = moment()
      .subtract(2, 'days')
      .isAfter(user.token_created_at)

    if (tokenExpired) {
      return response.status(401).send({ message: { error: 'Token expired' } })
    }

    // saving new password
    user.password = newPassword

    // deleting current token
    user.token = null
    user.token_created_at = 0

    // persisting data (saving)
    await user.save()
  }

And your whole ForgotPassowrdController should be like this:

'use strict'

const User = use('App/Models/User')
const Mail = use('Mail')

const moment = require('moment')
const crypto = require('crypto')

class ForgotPasswordController {
  /**
   * this method will store a new request made by the user
   * when he requires a password recover it'll generate a
   * token to allow him to reset his password
   */
  async store ({ request }) {
    try {
      // account request password recovery
      const { email } = request.only(['email'])

      // checking if email is registered
      const user = await User.findByOrFail('email', email)

      // generating token
      const token = await crypto.randomBytes(10).toString('hex')

      // registering when token was created and saving token
      user.token_created_at = new Date()
      user.token = token

      // persisting data (saving)
      await user.save()

      await Mail.send('emails.recover', { user, token }, (message) => {
        message
          .from('support@danmiranda.io')
          .to(email)
      })

      return user
    } catch (err) {
      console.log(err)
    }
  }

  async update ({ request, response, params }) {
    const tokenProvided = params.token // retrieving token in URL
    const emailRequesting = params.email // email requesting recovery

    const { newPassword } = request.only(['newPassword'])

    // looking for user with the registered email
    const user = await User.findByOrFail('email', emailRequesting)

    // checking if token is still the same
    // just to make sure that the user is not using an old link
    // after requesting the password recovery again
    const sameToken = tokenProvided === user.token

    if (!sameToken) {
      return response
        .status(401)
        .send({ message: {
          error: 'Old token provided or token already used'
        } })
    }

    // checking if token is still valid (48 hour period)
    const tokenExpired = moment()
      .subtract(2, 'days')
      .isAfter(user.token_created_at)

    if (tokenExpired) {
      return response.status(401).send({ message: { error: 'Token expired' } })
    }

    // saving new password
    user.password = newPassword

    // deleting current token
    user.token = null
    user.token_created_at = 0

    // persisting data (saving)
    await user.save()
  }
}

module.exports = ForgotPasswordController

Now let's test our last method. First let's add the route, following that structure I previously mentioned:

base_url/users/forgotPassword/:token/:email and add a PUT request in our route

Route.put('users/forgotPassword/:token/:email', 'ForgotPasswordController.update')

First, I'll test a case where the token number is incorrect:

With a request like this I'll receive as return a 401 error and the following JSON:

{
  "message": {
    "error": "Old token provided or token already used"
  }
}

The last, example, before we test the successful one is an invalid token. To test this I'll manually alter in the database the date the token was generated to more then 2 days ago.

With that, I'll also receive a 401 error and a JSON telling the token is expired

Now the test we were waiting for. I changed again the date the token was created to match the limit of 2 days. I won't receive any message in the body, just a 204 status. In this example I set the new password to "12".

If I try to sign in with the old password, "123456" I'll receive an error, but if I try with the new password, "12", everything should be fine.

Wow!! This one was a long post, so I'll stop here for now. The next one will cover the steps for a user to create a new appointment, I'll see you there!!

Creating an API using AdonisJS (part 1)

Danilo Miranda — Sat, 23 Feb 2019 21:38:20 +0000

Bulding an API with AdonisJS

Hi everyone! Over this series we will be creating an API using AdonisJS, a framework used to build NodeJS applications.

To be honest I don't how many posts this series will contain because I'll be building the API while writing this tutorial but I'll try to keep each post small and concise, so it will be easy to follow up and search for each topic related to Adonis

The building blocks first

Let's start by making sure that we have Adonis CLI installed:

Installing AdonisJS

In your terminal, run the following command:

npm install -g @adonisjs/cli

You may need administrator privileges to install Adonis CLI.

Now, you're able to run the command adonis and it'll appear in your terminal all the commands available within Adonis CLI

Usage:
  command [arguments] [options]

Global Options:
  --env              Set NODE_ENV before running the commands
  --no-ansi          Disable colored output

Available Commands:
  addon              Create a new AdonisJs addon
  install            Install Adonisjs provider from npm/yarn and run post install instructions
  new                Create a new AdonisJs application
  repl               Start a new repl session
  serve              Start Http server
 key
  key:generate       Generate secret key for the app
 make
  make:command       Make a new ace command
  make:controller    Make a new HTTP or Websocket channel controller
  make:ehandler      Make a new global exception handler
  make:exception     Make a new exception
  make:hook          Make a new lucid model hook
  make:listener      Make a new event or redis listener
  make:middleware    Make a new HTTP or Ws Middleware
  make:migration     Create a new migration file
  make:model         Make a new lucid model
  make:provider      Make a new provider
  make:seed          Create a database seeder
  make:trait         Make a new lucid trait
  make:view          Make a view file
 route
  route:list         List all registered routes
 run
  run:instructions   Run instructions for a given module

Creating a new application

With the CLI installed we'll be able to crete our applications. In this case, we will create a Restfull API. Let's start by running adonis' new command

adonis new -h

With this, we'll be able to see all the options available when creating a new application:

Usage:
  new <name> [options]

Arguments:
  name                Name of the project directory

Options:
  --api-only          Scaffold project for api server
  --api               Scaffold project for api server
  --slim              Scaffold smallest possible Adonisjs application
  --blueprint [value] Path to github project blueprint
  --branch [value]    Specify git branch for project blueprint
  --skip-install      Do not install modules from npm
  --yarn              Use yarn over npm for modules installation
  --cnpm              Use cnpm over npm for installation
  --raw               Disable animations and colored output

About:
  Create a new AdonisJs application

For this tutorial, as we'll be creating an API let's use the option --api-only.

adonis new schedulerapi --api-only

After having the project created let's start our server. So first we change to our project directory, that was created by adonis

cd schedulerapi

And start our server:

adonis serve --dev

By passing the option --dev will enable nodemon, that's a library used to watch changes in your files and refresh the server with the new alterations.

Your command will return an address where your server is running, probably http://127.0.0.1:3333/. Open this in your browser and you'll se a JSON returned, as we are just creating an API and won't need any views

{"greeting":"Hello world in JSON"}

Setting up our database

Let's make a quick configuration of the database we'll be using. For this project we'll use a relational database and in my case I'll use MySQL because it's the one I have installed in my machine, but feel free to use any relational database you want, like Postgres or sqlite3.

So head, to our file responsible for configuring the database in our project, that's located in the config folder. The file is database.js. Now open this file and you'll notice that it's exporting three configurations, for: MySQL, PostgreSQL, and Sqlite. Notice that above each configuration we have a block of comment telling which package we need to install, depending on the database you'll use.

As I'll be using MySQL, I just need to run:

npm i --save mysql

If you're using PostgreSQL, then run:

npm i --save pg

And if you're using sqlite:

npm i --save sqlite3

Perfect! With your package installed, head to our file .env (in the root of our project) to set the variables to correctly connect to our database:

DB_CONNECTION = [mysql, sqlite, pg]
DB_HOST = YOUR_LOCALHOST_ADDRESS
DB_PORT = YOUR_PORT
DB_USER = YOUR_DB_USER
DB_PASSWORD = YOUR_DB_PASSWORD
DB_DATABASE= YOUR_DATABASE_NAME

You'll only need to set these variables. Just make sure you create the database with a name according to the one you're setting the variable DB_DATABASE.

Save this file and now run the migrations using:

adonis migration:run

Now if you head to your GUI, that you're using to manage your databases, in my case I use sequel pro you'll see that your database has new tables:

Creating our first controller

Now let's explore a bit about controllers by creating a user sign-up controller. By default, when you first create an Adonis application, as we are doing here, it'll come pre-configured with a user model, as most applications requires some kind of user interaction.

Now let's create a controller that will contain the bussiness logic to save a new user to our database. Head over to your terminal and type:

adonis make:controller User

This will show up, asking to select a controller for HTTP requests or websocket channel:

> Select controller type (Use arrow keys)
  For HTTP requests
  For Websocket channel

Let's select HTTP requests

✔ create  app/Controllers/Http/UserController.js

If you succeed in creating the controller you'll see the message above. Now, inside your Controllers folder (located inside app folder) you'll see another folder called Http and finally inside it you'll have your UserController.js

Now, to make our controller work with our model, inside our controller file we need to import the model file, in our case, the user model. So, after 'use stric' let's require our model:

const User = use('App/Models/User')

Now inside our class UserController let's start by adding our first method that will deal with saving the new user to our database. Let's call it store().

Inside our methods, we have access to a variable called ctx, that's a variable that contains the context of the request.

By using destructuring we'll work with the request of this context:

class UserController {
  async store ({ request }) { ... }

Now, using request we are able to gather some data coming from this request by using the method only() from the request

class UserController {
  async store ({ request }) {
    // request data coming from the request
    const data = request.only()
    }

By using the request.only() we are able to tell what fields of data we want to get from the request.

First, let's see what data the user is supposed to send. Let's go our user migration data, located in database folder:

|-- factory.js
`-- migrations
    |-- 1503250034279_user.js
    `-- 1503250034280_token.js

The file we are looking for is 1503250034279_user.js. Open the file and you'll see the following:

{ ...some code ... }
class UserSchema extends Schema {
  up () {
    this.create('users', (table) => {
      table.increments()
      table.string('username', 80).notNullable().unique()
      table.string('email', 254).notNullable().unique()
      table.string('password', 60).notNullable()
      table.timestamps()
    })
  }
{ ...more code... }

So the user will send me an username, an email and a password. Now let's get back to our UserController.js file.

As a parameter for request.only() we will pass an array of the values we want to get in the request, in our case, username, email and password

class UserController {
  async store ({ request }) {
    // request data coming from the request
    const data = request.only(['username', 'email', 'password'])
    }

Before creating a new user, let's check in our database if the username used to create the new account has already been used:

// looking for user in database
const userExists = await User.findBy('email', data.email)

If you look in Adonis documentation you'll see you have a method called findByOrFail() but I'll use only findBy() because I want to send a message in case the user already exists.

// if user exists don't save
      if (userExists) {
        return response
          .status(400)
          .send({ message: { error: 'User already registered' } })
      }

And finally, if the user is not registered we save him in our database:

// if user doesn't exist, proceeds with saving him in DB
      const user = await User.create(data)

Your user controller is probably like this now:

class UserController {
  // creating and saving a new user (sign-up)
  async store ({ request, response }) {
    try {
      // getting data passed within the request
      const data = request.only(['username', 'email', 'password'])

      // looking for user in database
      const userExists = await User.findBy('email', data.email)

      // if user exists don't save
      if (userExists) {
        return response
          .status(400)
          .send({ message: { error: 'User already registered' } })
      }

      // if user doesn't exist, proceeds with saving him in DB
      const user = await User.create(data)

      return user
    } catch (err) {
      return response
        .status(err.status)
        .send(err)
    }
  }
}

I just forgot to mentio before that I wrapped the main code in a try block and in case any unexpected error occur we capture it inside the catch (err) block and returna response showing the error.

Routing

Now that we created our first controller it's time to test it and for this we'll learn how to work with routes in Adonis

When you created the app you have a file called routes.js that it is located in the start folder in the root of your project

Open routes.js and clean all the code inside.

To work with routing in Adonis we'll need to import the Route from Adonis using the use() functi

'use strict'

const Route = use('Route')

To create a user we must send a POST request. When we access http://127.0.0.1/3333/users we'll send this request:

Route.post('users', 'UserController.store')

The first parameter of post() is the url that will trigger the controller and the second parameter is the controller itself

For the url you can use users or /users. Both options will work

To access a certain method of a controller you just need to type the name of the controller, in our case is UserController and the name method's name: UserController.store

To make the requests in our application I'll use Insomnia REST client. You can download it here: https://insomnia.rest/download/

When you firts open Insomnia you'll see something like this:

Let's start by creating a new workspace, so we can create and store our configured requests:

Just click in the down arrow next to "Insomnia".

Now select "New Workspace" in the dropdown menu

I'll call my workspace as "schedulerAPI"

Now click on the "plus simbol" that's located just below the "cookies":

I'll create a folder called 'User' and create a new post request called 'store'

To change the request's type click in GET and select POST in the dropdown menu

Now right below POST you'll see a dropdown menu called "Body", click it and select JSON.

As we saw before, we need to send in our request the username, email, and password.

{
    "username": "Danilo",
    "email": "me@danmiranda.io",
    "password": "123456"
}

Now, in Insomnia let's tell to which address we need to send the request.

To make our life easier, so we don't need to type in every new request we create the full address http://127.0.0.1:3333, let's set a environment variable that we can use inside Insomnia:

Let's call it base_url and put our root address:

{
  "base_url": "http://127.0.0.1:3333"
}

Just click Done to save

Now in our address bar just type base_url and /users, like this

Now click Send to send our request

You'll see in the right side of Insomnia that our request returned the created user just like we told it to do:

Let's test our already created user. If I send the request again, with the same email it'll return an error:

That's it for now, let's continue after

So to review everything we learned:

Install AdonisJS
Create a new aplication with Adonis
Configure database to properly work with our Adonis application
Create our first controller
Create our first route
Send a request to our API with Insomnia

This post was originally posted in https://danmiranda.io. Make sure to check other posts there.

Follow my on twitter: https://twitter.com/Nilomiranda

See you in the second part!