Hey, I am Emanuel. Happy to see you there.

Intro

I’m from Quebec, a city in the beautiful country call Canada. My current position it's Full-Stack Web & Mobile Developer at AppAndFlow. I work mainly with this techs

React
React-Native
NodeJS
Laravel
GraphQL
Golang
MongoDB
PostgreSQL
Vue

I’ve been doing this for more than 5 years now. Before that, I was in the Canadian Forces. I also work at Thinkful and Bloc where I am a mentor who helps student getting into the web development industry.

Besides that, I own a Youtube Channel where I teach web development. I try my best to give a good insight into how I think about working with certain problems. I help then getting into Javascript as well with server-side stuff.

When I'm not working I still code some of my personal projects. Programming is more than just a work for me, this is a hobby, it's a passion. But if I'm not in front of a computer I pass all my time with my beautiful fiance and our two dogs. At the end of the year, a small little person will joins the family 😃.

Why having this blog?

This blog is a place for me to write down what I think. This helps me first with my English who is not my native language, and that also help me empty my brain. By doing this I hope I can help people with some of the thinking, tutorial or whatever stuff I wrote here.

No title

Hello, my name is Emanuel Quimper. I’m from Quebec, Canada.

A little bit about myself. First I was in the Army for 7 years before starting to program in 2015. I’m very passionate and programming has become more than a job for me, a hobby. I code all the time if I’m not with my family I’m the father of a 1 year old little boy. From the start I was already sharing my knowledge to everyone who wanted it. I became a mentor at Thinkful and Bloc in 2016. , just one year later, because I was programming 80+ hrs a week and when I was not working I was studying. I was always helping students on slack too so it did help me to get a bit more knowledge for my little experience at the time.

I also started around this time a Youtube channel where I make tutorial on anything on react/react native/javascript. The plan here is that everyone can help people on with programming. You always have more experience than some people.

I’ve been into node from the start of my career but Adam did change it when I did look at his youtube video on Kitetail etc. TDD was new for me and I was amazed by his working flow. In node it is so hard to do this without plugin so many things together. So I decided to give Laravel a chance. From this day for my own client cause yes I work at a react/react-native/node agency, I do use Laravel with vue and react native if mobile need. When tailwind came I was an early adopter. Of course I like using new stuff even if not version 1 but Tailwind was so promising. I even did created a library to make use of the idea of Tailwind for react-native. I do use this one on many of my client projects like Point, Fixit and Jiveworld.

Why would I be a good fit for Tailwind UI?

I’m someone who loves to work and give his maximum but at the same time, I know how important is it to enjoy lifetime with my family, friends etc. From what I saw from you online its look like you have the same mindset as me. I’m also a quick learner, and when I’m passionate about something I can’t stop looking and playing with it. I remember in one of your Full stack radio episodes you mention you are the same. Yes I'm a listener of your podcast for the past 2 years now and listen to all episodes. I’m also someone who want to get more into open source. But the projects that I look at are not something I want to get into. Tailwind was something I wanted to help in the past but didn’t have the time at this moment because my clients of last year were all mobile and the brand new baby. I think I can also help Adam on how to use Tailwind UI etc by doing livestream and tutorial using it. I want to spread how it’s a joy working with it.

I am convinced that I am the person you need to grow your business.

P.S Yes this blog use Tailwind, didn't update it but that was pre v1 :)

Build a REST API with AdonisJs and TDD Part 4

Thu, 21 Nov 2019 00:00:00 GMT

Intro

In this part number 4, we will continue working on our API. But now we will also make a request to another service call TheMovieDB Api. This is finally an API where we can get info about a certain movie. In this part, we will create a new controller where the user will able to search for a certain movie title. We first check if the movie already exists in our database. If not we then query the 3rd party API to get the info. When we got that info we will persist them in our own database.

First, we will create a test call SearchMovie this will be another functional one.

adonis make:test SearchMovie

The first few tests will be just about the fact those movies are already inside our database. This will make this simpler. Later for the test, we will mock TheMovieDB so this way we will not exceed our request quotas.

// test/functional/search-movie.spec.js

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Search Movie')

trait('Test/ApiClient')
trait('Auth/Client')

test('can query for a certain movie title', async ({ assert, client }) => {
  await Factory.model('App/Models/Movie').create({ title: 'Joker' })

  const response = await client.get('/api/movies?title=Joker').end();

  response.assertStatus(200)
  response.assertJSONSubset([{
    title: 'Joker',
  }])
})

If you run the test you will get an error like this

can query for a certain movie title
  TypeError: Cannot read property 'name' of undefined
    at Factory.model

This means we didn't define yet our factory for the movie.

// database/factory.js

'use strict'

/*
|--------------------------------------------------------------------------
| Factory
|--------------------------------------------------------------------------
|
| Factories are used to define blueprints for database tables or Lucid
| models. Later you can use these blueprints to seed your database
| with dummy data.
|
*/

/** @type {import('@adonisjs/lucid/src/Factory')} */
const Factory = use('Factory')

Factory.blueprint('App/Models/User', faker => {
  return {
    username: faker.username(),
    email: faker.email(),
    password: 'password123'
  }
})

Factory.blueprint('App/Models/Challenge', faker => {
  return {
    title: faker.sentence(),
    description: faker.sentence()
  }
})

Factory.blueprint('App/Models/Movie', (faker, index, data) => {
  return {
    title: faker.sentence(),
    ...data
  }
})

If you check, the factory take 3 arguments and the third one is for getting data from when you call the factory. So you can overide value just like that.

If you rerun the test with npm t you will get now a new error. This error is about the fact then we do not have yet a model Movie and our factory tries to create one with it. For this run the command

adonis make:model Movie -m

If you remember the -m means give me a migration file at the same time. We will just win some time with this.

Now the test will show this

Error: SQLITE_ERROR: table movies has no column named title

Pretty self explain the error, we try to add a title to but no column yet is defined. Time to add this to the migration file we just did create.

'use strict'

/** @type {import('@adonisjs/lucid/src/Schema')} */
const Schema = use('Schema')

class MovieSchema extends Schema {
  up () {
    this.create('movies', (table) => {
      table.increments()

      table.string('title').notNullable()

      table.timestamps()
    })
  }

  down () {
    this.drop('movies')
  }
}

module.exports = MovieSchema

After this we get

expected 404 to equal 200
404 => 200

Normal the route is not created yet. Add this to your routes.js file

// start/routes.js

Route.group(() => {
  Route.get('/', 'MovieController.index')
}).prefix('/api/movies')

Now almost the same error but if you check carefully you will see now the error is about a 500 error not 404 like before. It's because the controller does not exist yet.

Time to make an HTTP controller

adonis make:controller Movie

Ooooh, same error? Yes, we did use a method called index but our controller is empty.

// app/Controllers/Http/MovieController.js

'use strict'

class MovieController {
  async index({}) {

  }
}

module.exports = MovieController

It's time now to do some stuff to fix the new error about 204 for no-content. We first need to get the query title and after this fetch our database with this and return that with a 200 status code.

// app/Controllers/Http/MovieController.js

'use strict'

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

class MovieController {
  async index({ request, response }) {
    const movies = await Movie.query()
      .where('title', request.input('title'))
      .fetch()

    return response.ok(movies)
  }
}

module.exports = MovieController

The input method in the request object gives us a way to fetch the query argument we want. In this case that was the title where we did put Joker in it. If you run your test at this point this will work. But... I don't like that. First, in this way of doing, we need a match of 100% the title. What happens if the user just put jok and not the full Joker title. Time to create a new test for this case.

test('can query with a subset of the title', async ({ assert, client }) => {
  await Factory.model('App/Models/Movie').create({ title: 'Joker' })

  const response = await client.get('/api/movies?title=jok').end();

  response.assertStatus(200)
  response.assertJSONSubset([{
    title: 'Joker',
  }])
})

Now when you run the test we see that fail. Time to make use of a real query search

// app/Controllers/Http/MovieController.js

'use strict'

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

class MovieController {
  async index({ request, response }) {
    const title = request.input('title')

    const movies = await Movie.query()
      .where('title', 'LIKE', `%${title}%`)
      .fetch()

    return response.ok(movies)
  }
}

module.exports = MovieController

Now this works with this change. This will make sure if a subset of the title is present at least we still give the movie to the user.

Time to force the user to provide a title pretty simple one here too

test('should throw 400 if no title is pass', async ({ assert, client }) => {
  const response = await client.get('/api/movies').end()

  response.assertStatus(400)
})

// app/Controllers/Http/MovieController.js

'use strict'

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

class MovieController {
  async index({ request, response }) {
    const title = request.input('title')

    if (!title) {
      return response.status(400).json({ error: 'title is required' })
    }

    const movies = await Movie.query()
      .where('title', 'LIKE', `%${title}%`)
      .fetch()

    return response.ok(movies)
  }
}

module.exports = MovieController

Conclusion

In the next part, we will jump on the TheMovieDB API stuff. We will learn how we can mock an external API so it's easier to test.

I hope you enjoy the post. Don't hesitate to comment below.

Golang Rest API for NodeJS developer - Part 2

Mon, 18 Nov 2019 00:00:00 GMT

Golang Rest API for NodeJS developer - Part 2

In part 1 we did set up the foundation of our REST API. In this part, we will set up the Register logic for our authentication portion of the app. Authentication is a big part of almost every app we need to build as a developer. One thing it's because is so common you can almost translate the knowledge earn in other languages. In our case for this tutorial, we will use a simple JWT authentication with an email/password combination. Later I maybe plan to add Google OAuth.

The first thing to do is to create the User struct. Pretty standard stuff. An id who will be auto-increment by PostgreSQL. Some timestamps so we know when the user did get created or updated. You can also see the JSON tag. If you look at the password I use -, this means we do not want the password to get return to the JSON client.

// domain/users.go

package domain

import "time"

type User struct {
    ID       int64  `json:"id"`
    Username string `json:"username"`
    Email    string `json:"email"`
    Password string `json:"-"`

    CreatedAt time.Time `json:"createdAt"`
    UpdatedAt time.Time `json:"updatedAt"`
}

After this, we will create 3 instances of error. This will make our life easier in the long run of the app.

// domain/errors.go

package domain

import "errors"

var (
    ErrNoResult = errors.New("no result")
    ErrUserWithEmailAlreadyExist = errors.New("user with email already exist")
    ErrUserWithUsernameAlreadyExist = errors.New("user with username already exist")
)

One thing I like when I work with Go is creating the interface need to make the app work before even starting writing the logic. The interface will be like a contract and make sure my code will follow this. Time to jump on the UserRepo interface who will be our layer to the database for the user stuff. I also create a Domain struct who will keep the DB instance. So we can make sure we have only one instance of this last one. This will also make life easier and no cycle dependencies issue.

// domain/domain.go
package domain

type UserRepo interface {
    GetByEmail(email string) (*User, error)
    GetByUsername(username string) (*User, error)
    Create(user *User) (*User, error)
}

type DB struct {
    UserRepo UserRepo
}

type Domain struct {
    DB DB
}

With that, we can start creating the auth domain logic. First, we create a payload struct who will capture the client data request. After this, the Register method will do the logic for creating a user to our app. This one will also handle the error if a user exists for both the email or username, we want those to be unique. Finally, we create a method setPassword that will be filled in later part.

// domain/auth.go
package domain

type RegisterPayload struct {
    Email           string `json:"email"`
    Password        string `json:"password"`
    ConfirmPassword string `json:"confirmPassword"`
    Username        string `json:"username"`
}

func (d *Domain) Register(payload RegisterPayload) (*User, error) {
    userExist, _ := d.DB.UserRepo.GetByEmail(payload.Email)
    if userExist != nil {
        return nil, ErrUserWithEmailAlreadyExist
    }

    userExist, _ = d.DB.UserRepo.GetByUsername(payload.Username)
    if userExist != nil {
        return nil, ErrUserWithUsernameAlreadyExist
    }

    password, err := d.setPassword(payload.Password)
    if err != nil {
        return nil, err
    }

    data := &User{
        Username: payload.Username,
        Email:    payload.Email,
        Password: *password,
    }

    user, err := d.DB.UserRepo.Create(data)
    if err != nil {
        return nil, err
    }

    return user, nil
}

func (d *Domain) setPassword(password string) (*string, error) {
    return nil, nil
}

After this, we can add the domain to your server struct. This will make the domain available to this one inside the handlers.

// handlers/handlers.go

package handlers

import (
    "time"

    "github.com/go-chi/chi"
    "github.com/go-chi/chi/middleware"

    "todo/domain"
)

type Server struct {
    domain *domain.Domain
}

func setupMiddleware(r *chi.Mux) {
    r.Use(middleware.RequestID)
    r.Use(middleware.RealIP)
    r.Use(middleware.Compress(6, "application/json"))
    r.Use(middleware.Logger)
    r.Use(middleware.Recoverer)
    r.Use(middleware.URLFormat)
    r.Use(middleware.Timeout(60 * time.Second))
}

func NewServer(domain *domain.Domain) *Server {
    return &Server{domain: domain}
}

func SetupRouter(domain *domain.Domain) *chi.Mux {
    server := NewServer(domain)

    r := chi.NewRouter()

    setupMiddleware(r)

    server.setupEndpoints(r)

    return r
}

Now we can create our users handlers. Think of it as a controller. I like a thin controller in other frameworks like Laravel so here I follow the same idea.

// handlers/users.go

package handlers

import "net/http"

func (s *Server) registerUser() http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        user, err := s.domain.Register()
    }
}

We can jump after this to our data layer. Remember in the intro I did say we will use Postgres. So we will add a UserRepo to this Postgres package. This one will follow the UserRepo interface from our domain. This will be standard ORM stuff.

// postgres/user.go

package postgres

import (
    "errors"

    "github.com/go-pg/pg/v9"

    "todo/domain"
)

type UserRepo struct {
    DB *pg.DB
}

func (u *UserRepo) GetByEmail(email string) (*domain.User, error) {
    user := new(domain.User)

    err := u.DB.Model(user).Where("email = ?", email).First()
    if err != nil {
        if errors.Is(err, pg.ErrNoRows) {
            return nil, domain.ErrNoResult
        }

        return nil, err
    }

    return user, nil
}

func (u *UserRepo) GetByUsername(username string) (*domain.User, error) {
    user := new(domain.User)

    err := u.DB.Model(user).Where("username = ?", username).First()
    if err != nil {
        if errors.Is(err, pg.ErrNoRows) {
            return nil, domain.ErrNoResult
        }

        return nil, err
    }

    return user, nil
}

func (u *UserRepo) Create(user *domain.User) (*domain.User, error) {
    _, err := u.DB.Model(user).Returning("*").Insert()
    if err != nil {
        return nil, err
    }

    return user, nil
}

func NewUserRepo(DB *pg.DB) *UserRepo {
    return &UserRepo{DB: DB}
}

Time to update our main.go with the latest change needed.

// main.go

package main

import (
    "fmt"
    "log"
    "net/http"
    "os"

    "github.com/go-pg/pg/v9"

    "todo/domain"
    "todo/handlers"
    "todo/postgres"
)

func main() {
    DB := postgres.New(&pg.Options{
        User:     "postgres",
        Password: "postgres",
        Database: "todo_dev",
    })

    defer DB.Close()

    domainDB := domain.DB{
        UserRepo: postgres.NewUserRepo(DB),
    }

    d := &domain.Domain{DB: domainDB}

    r := handlers.SetupRouter(d)

    port := os.Getenv("PORT")
    if port == "" {
        port = "8081"
    }

    err := http.ListenAndServe(fmt.Sprintf(":%s", port), r)
    if err != nil {
        log.Fatalf("cannot start server %v", err)
    }
}

Conclusion

If you did like this tutorial don't forget to subscribe to my newsletter below. Also, the video link is at the top of the post. If you have any question don't hesitate to ask in the comment section below.

Code for this part

Happy Coding :)

Golang Rest API for NodeJS developer - Part 1

Wed, 06 Nov 2019 00:00:00 GMT

Golang Rest API for NodeJS developer - Part 1

In part 1, we will set up the foundation of our project. First, make sure you do have Go v1.13 install. On Mac, I recommend using Homebrew for that.

Go module init

First, create a folder where you will put the code for this project. Inside this folder run the command go mod init todo todo here will be the name of the project. In NodeJS we do npm init.

Setup the db connection

In this project, we will use the library go-pg so for that, we need to install it by running go get github.com/go-pg/pg. This will install the library and all the dependency. Coming from a NodeJS background this is the equivalent of npm install. Create a folder called postgres in the root of your project and a file with the same name with go as the extension.

In this file, we will create a function New where the only job of this one is returning a pointer to a DB instance

// postgres/postgres.go

package postgres

import (
    "github.com/go-pg/pg/v9"
    _ "github.com/lib/pq"
)

func New(opts *pg.Options) *pg.DB {
    db := pg.Connect(opts)

    return db
}

I like to keep the root of the package the same name as the folder, It's a convention I like to follow and make life easier

Setup the basic handlers/endpoint

Handlers will be like our controller ish stuff. This will be where the logic of the app are bound with the client, in this case, rest API. We will also set up middlewares and bind them to the router instance. For the routing, we use Chi and we can install it with go get github.com/go-chi/chi. I found Chi to be the best routing library in Go. The reason is first for me to look like Express who is the routing library I use each time in NodeJS. Also, this library follows the signature of the standard library. And in the Go community this is something they want.

// handlers/handlers.go

package handlers

import (
    "time"

    "github.com/go-chi/chi"
    "github.com/go-chi/chi/middleware"
)

type Server struct {

}

func setupMiddleware(r *chi.Mux) {
    r.Use(middleware.RequestID)
    r.Use(middleware.RealIP)
    r.Use(middleware.Compress(6, "application/json"))
    r.Use(middleware.Logger)
    r.Use(middleware.Recoverer)
    r.Use(middleware.URLFormat)
    r.Use(middleware.Timeout(60 * time.Second))
}

func NewServer() *Server {
    return &Server{}
}

func SetupRouter() *chi.Mux {
    server := NewServer()

    r := chi.NewRouter()

    setupMiddleware(r)

    server.setupEndpoints(r)

    return r
}

After this, we want some base endpoint. For this part-1 we will make just the barebone of it.

// handlers/endpoint.go

package handlers

import "github.com/go-chi/chi"

func (s *Server) setupEndpoints(r *chi.Mux) {
    r.Route("/api/v1", func(r chi.Router) {
        r.Route("/users", func(r chi.Router) {

        })
    })
}

Setup the Main function

In Go everything starts from the Main function. So in our, we will finally initialize the database plus the routing. We also gonna make sure the router is running on a certain port. We check if the env variables provide a PORT variables else we use 8081. This is the equivalent in NodeJS of

const port = process.env.PORT || 8081;

So create a file main.go in the root of the project and this should look like this.

// main.go

package main

import (
    "fmt"
    "log"
    "net/http"
    "os"

    "github.com/go-pg/pg/v9"

    "todo/handlers"
    "todo/postgres"
)

func main() {
    DB := postgres.New(&pg.Options{
        User:     "postgres",
        Password: "postgres",
        Database: "todo_dev",
    })

    defer DB.Close()

    r := handlers.SetupRouter()

    port := os.Getenv("PORT")
    if port == "" {
        port = "8081"
    }

    err := http.ListenAndServe(fmt.Sprintf(":%s", port), r)
    if err != nil {
        log.Fatalf("cannot start server %v", err)
    }
}

Conclusion

Code for this part

Happy Coding :)

Golang Rest API for NodeJS developer - Intro

Mon, 04 Nov 2019 00:00:00 GMT

Golang Rest API for NodeJS developer - Intro

In the past few months, I've been working on some Golang projects. Loving it, but did get some issues. One of them is the lack of tutorials. I mean you can find a lot of Golang tutorials online like on Youtube or Udemy etc. But I didn't find one where I can learn how to build a full rest API or something like that. A lot of them were just about Golang in general. Some about Golang as a full-stack solution, so you use Golang as the templating etc. But didn't find one focussing on making Rest API.

What this tutorial will teach?

So this tutorial will be about making a Rest API but from a NodeJS developer perspective. This is a tutorial for those coming from the stack I was already showing in my channel. Those who use express etc. We will learn how to make endpoint using Chi, how to use postgresql as the database. How to use go-pg as the orm. Also how to deal with user authentication and JWT. How to hash and save a password etc. The basic yes, but enough so you can build a project after this tutorial. The repos will be available here and the playlist here.

I'm not saying what I show will be better than others, but I feel this tutorial can fill a gap I get when coming to Golang

Conclusion

I hope you will enjoy this tutorial, let me know in the comments if you have any question

P.S If I see people like Golang tutorial on my youtube channel, I'm planning to make one for GraphQL + Golang after

Create and Test a Hook in React-Native

Sun, 13 Oct 2019 00:00:00 GMT

In React 16.8 Hook was introduced. This was kind of mind-blowing for me. First time I did see those I was like ok this is just some kind of syntax sugar etc. But after playing with Hooks for like months I'm loving this. The first thing they makes is to let sharing code easier. In the past Class component was great, but did you try to share some code with that? It's not easy. For me hook even give me a lot of love back to React.

So why this post? One thing I did find online is how to create Hook. Perfect great, but how can I test them? Also, one thing I find missing in React-Native's tutorial is testing. I have a youtube channel and like others React-Native developer on this platform "even Udemy etc" we don't show testing. It's normal too, cause testing take lot of time. So when doing example like me a big tutorial series of already 40+ videos imagine adding testing.

So here I will try to show you how you can start doing a bit more test in React-Native and also how to do this with Hook.

P.S I'm not saying I'm an expert here, just want to help you to get more into testing.

First thing, a library that will make our lives easier is react-hooks-testing-library. This will help us a lot in this process. One reason is the fact then this will help us testing Hook without mounting components. So the unit testing of the Hook will be painless.

useStatusBar

For the first demo, we will make a simple Hook who will set the statusBar color when the screen is focused. For this we will also use the library react-navigation-hooks

This use typescript but can use plain javascript just remove the types :)

import { useEffect } from 'react';
import { StatusBar, StatusBarStyle } from 'react-native';
import { useFocusState } from 'react-navigation-hooks';

const useStatusBar = (style: StatusBarStyle, animated = true) => {
  const { isFocused } = useFocusState();

  useEffect(() => {
    if (isFocused) {
      StatusBar.setBarStyle(style, animated);
    }
  }, [isFocused]);
};

export default useStatusBar;

Here as you can see it's a pretty simple case. The Hook will run a effect when the isFocused boolean value will change. This will happen when the sceen get focused.

Now how can we test that?

The first thing we will need is to create a file call useStatusBar.test.ts Inside this one we will need to render the hook first

import { renderHook } from '@testing-library/react-hooks';

import useStatusBar from '../useStatusBar';

describe('useStatusBar', () => {
  it('should set the status bar style as light-content when screen is focused', () => {
    renderHook(() => useStatusBar('light-content'))
  });
});

The hook first argument is the style we do want. Here, in this case, we want light-content the second argument is a default animated value to true. As you can see render the Hook is simple. Time to add some testing. The first thing we need to do for accomplishing the Unit Test is to mock dependencies. In this one we have 2 deps to mock. The StatusBar native API and the react-navigation hook.

How can we do this? Jest to the rescue!!!

Jest came with Spy + Mock and this is all we need. So first time to spy on the StatusBar API.

import { StatusBar } from 'react-native';
import { renderHook } from '@testing-library/react-hooks';

import useStatusBar from '../useStatusBar';

describe('useStatusBar', () => {
  it('should set the status bar style as light-content when screen is focused', () => {
    const setBarStyleSpy = jest.spyOn(StatusBar, 'setBarStyle');

    renderHook(() => useStatusBar('light-content'))
  });
});

As you can see, we create a variable call setBarStyleSpy who will be a spy on the method from the StatusBar setBarStyle. We will spy on this one so we can make sure we do call this method once with the value we expected.

import { StatusBar } from 'react-native';
import { renderHook } from '@testing-library/react-hooks';

import useStatusBar from '../useStatusBar';

describe('useStatusBar', () => {
  it('should set the status bar style as light-content when screen is focused', () => {
    const setBarStyleSpy = jest.spyOn(StatusBar, 'setBarStyle');

    renderHook(() => useStatusBar('light-content'))

    expect(setBarStyleSpy).toHaveBeenCalledTimes(1);
    expect(setBarStyleSpy).toHaveBeenCalledWith('light-content', true);
  });
});

Here we do check setBarStyle did get called only once and the value provided was light-content and true who is the default value pass.

In the last step we do need to mock the react-navigation-hooks.

import { StatusBar } from 'react-native';
import { renderHook } from '@testing-library/react-hooks';

import useStatusBar from '../useStatusBar';

describe('useStatusBar', () => {
  it('should set the status bar style as light-content when screen is focused', () => {
    const setBarStyleSpy = jest.spyOn(StatusBar, 'setBarStyle');

    jest
      .spyOn(reactNavigationHooks, 'useFocusState')
      .mockImplementation(() => ({ isFocused: true }));

    renderHook(() => useStatusBar('light-content'))

    expect(setBarStyleSpy).toHaveBeenCalledTimes(1);
    expect(setBarStyleSpy).toHaveBeenCalledWith('light-content', true);
  });
});

Here we mock only once the useFocusState method to return an object who contain isFocused: true this one will trigger the useEffect of our hook who then will cause the StatusBar setBarStyle to get a call.

That's it this is how we can use jest and mock/spy on dependencies of our code so we can Unit Test easily.

Table driven test with jest

Thu, 03 Oct 2019 00:00:00 GMT

I've been doing some Golang lately, and kind of really like there idea about how they make the tests so simple. One of the ways to make a test in Go is what they call Table Driven Tests.

This is nice when you want to test something that is kind of tedious to right. Example, you create a function where you want to test a lot of input and see if the result is the expected one. You can go this way.

describe('sum', () => {
  it('should return 2 if input is 1 and 1', () => {
    expect(sum(1, 1)).toBe(2)
  })

  it('should return 5 if input is 2 and 3', () => {
    expect(sum(2, 3)).toBe(5)
  })
})

As you can see, this becomes a lot of repeated code. As a programmer, we are kind of lazy, but in a good way. We don't like to copy the same code again. First it's time-consuming and secondly, this is error-prone.

So how can we rewrite this in a better way? This is where jest each comes to the rescue. If you read the first sentence this will make sense

Use test.each if you keep duplicating the same test with different data. test.each allows you to write the test once and pass data in.

So how can I use this? Quite easy, first I will show you an example and I will explain right after.

describe('sum', () => {
  test.each`
    inputA | inputB | expected
    ${1}   | ${1}   | ${2}
    ${2}   | ${3}   | ${5}
  `(
    'should return $expected if input is $inputA and $inputB',
    ({ inputA, inputB, expected }) => {
      expect(sum(inputA, inputB)).toBe(expected)
    }
  )
})

So first we can write a table inside the tagged template literal. The second argument is the name of the test. As you can see you do have access to your table header variables. You just need to prefix those with $ here we have $inputA example for the first table header. The 3rd argument is the test function, the same thing as what you do in any other test. As you can see the beauty of this, it's you can add test to that so easily. The only issue, I did get with that is almost the naming, but a tip is keep the naming of your arguments.

Conclusion

I feel this is something you can add to your testing arsenal. This is not for every test for sure. But this can clean up a lot of duplicate code in those tests where this makes sense.

Let me know what you think about it in the chat below.

Build a REST API with AdonisJs and TDD Part 3

Sun, 02 Jun 2019 00:00:00 GMT

Intro

In this part, we jump straight back to our challenges API endpoint where we will add a way to a user to fetch all his own challenges. Also would be nice if the user can update and delete an own challenge.

Get /api/me/challenges

First thing create a new functional test by running

adonis make:test GetUserChallenges

In the test, we will write it in one go.

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Get User Challenges')

trait('Test/ApiClient')
trait('Auth/Client')

test('can get all the user challenges', async ({ assert, client }) => {
  const user = await Factory.model('App/Models/User').create()
  const otherUser = await Factory.model('App/Models/User').create();
  const challenges = await Factory.model('App/Models/Challenge').makeMany(2)
  const otherChallenges = await Factory.model('App/Models/Challenge').makeMany(2)

  await user.challenges().saveMany(challenges)
  await otherUser.challenges().saveMany(otherChallenges)

  const response = await client
    .get('/api/me/challenges')
    .loginVia(user, 'jwt')
    .end()

  response.assertStatus(200)

  assert.equal(response.body.length, 2);

  response.assertJSONSubset([
    { title: challenges[0].title },
    { title: challenges[1].title }
  ])
})

This test start we 2 user. One who will be our, and one different user. We also make 2 challenges for us and 2 for the other user.

We make sure here don't save it right to the DB. We want to be able to add the relation with the user.

So we add the challenges to the user with the saveMany method who batch save those challenges. We do the same with the other user.

We create a response where we log the user with JWT. After this, we check for a status 200 Ok. Also, we want to make sure I just receive 2 challenges, no more, no less. I don't want this endpoint to return me challenges from a others user. I add the last check to make sure the 2 challenges we got are the one in the challenges variables.

If you run the test with adonis test or yarn test you will get 404 error. Remember this mean routes not exist. So jump to the file routes.js and add this line.

Route.get('/api/me/challenges', 'MeController.challenges').middleware(['auth'])

Here this route is nothing too strange, we make sure user is authenticated by using the middleware auth. We did that already :) Only thing change is I make use of another controller call MeController. I can have put it inside the ChallengeController but the thing is I like the controller to look like the route's path.

You can create a controller by running

adonis make:controller Me

Go inside the new file created and add this code to the class

async challenges() {

}

Now your test will have error cause we return nothing etc. Time to add the logic, and wow Adonis make your life soooo easy.

class MeController {
  async challenges({ response ,auth}) {
    const user = await auth.getUser();

    const challenges = await user.challenges().fetch();

    return response.ok(challenges.toJSON());
  }
}

First, we need to get the current user. By using the auth.getUser function we can get it. After this to get the challenges we can then ask the user to fetch all the challenges owned. This is possible cause of the user model we have done in the first part.

challenges() {
  return this.hasMany('App/Models/Challenge')
}

This challenges method inside the User model gives us the one owned by the user. The thing is those challenges will not be in JSON format so that's why inside the response we ask the toJSON method.

Now if you run your test all should be green :)

Put /api/challenges/:id

Now time to work on the update endpoint. First, create a new test

adonis make:test UpdateChallenge

We will need to test here, the first one is to make sure a user who is the author of the challenge can update it and see the change. The second test is to make sure we don't let other users update a challenge.

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Update Challenge')

trait('Test/ApiClient')
trait('Auth/Client')

test('a user can update a challenge owned', async ({ client }) => {
  const user = await Factory.model('App/Models/User').create()
  const challenge = await Factory.model('App/Models/Challenge').make()

  await user.challenges().save(challenge)

  const data = {
    title: 'This is my new title'
  }

  const response = await client
    .put(`/api/challenges/${challenge.id}`)
    .loginVia(user, 'jwt')
    .send(data)
    .end()

  response.assertStatus(200)

  response.assertJSONSubset({
    id: challenge.id,
    title: data.title
  })
})

For the first test, this is pretty simple. We first create a user and link the challenge. We then create a data object who will contain the new title. We then use the client and send to the endpoint this data. We check the response to make sure this is 200 ok and also the JSON contains the same id and the new title.

Run test, see it fail. Time to create the route first.

Route.put('/api/challenges/:id', 'ChallengeController.update')
  .validator('UpdateChallenge')
  .middleware(['auth'])

The route is pretty simple, but we add a validator. I will not do the test for this cause this is pretty easy and I want to give you more on the business logic.

For creating the validator just run

adonis make:validator UpdateChallenge

And inside this one paste that

'use strict'

class UpdateChallenge {
  get rules() {
    return {
      title: 'string',
      description: 'string'
    }
  }

  get messages() {
    return {
      string: '{{ field }} is not a valid string'
    }
  }

  get validateAll() {
    return true
  }

  async fails(errorMessages) {
    return this.ctx.response.status(400).json(errorMessages)
  }
}

module.exports = UpdateChallenge

This is like the CreateChallenge validator but nothing is required.

Inside your ChallengeController now add this method

async update({ response, request, params, auth }) {
  const user = await auth.getUser()

  const challenge = await Challenge.findOrFail(params.id)

  if (challenge.user_id !== user.id) {
    throw new UnauthorizedException();
  }

  challenge.merge(request.only(['title', 'description']));

  await challenge.save();

  return response.ok(challenge)
}

This update method will first get the user. Then find the challenge. This will return a free 404 if the challenge doesn't exist. After this, we check for the user_id key in the challenge to see if that match the current user. If not we throw an Exception.

Time to make the exception

adonis make:exception UnauthorizedException

'use strict'

const { LogicalException } = require('@adonisjs/generic-exceptions')

class UnauthorizedException extends LogicalException {
  handle(error, { response }) {
    response.status(401).send('Not authorized')
  }
}

module.exports = UnauthorizedException

This one will return a 401 with the message Not authorized.

After this, if the user is the author we merge the request object for only title and description. Only fields we accept an update.

We make sure to save the challenge, if not this will not persist. And finally, we return this challenge with the status 200.

If you run the test all should be green. But we need to make sure a nonauthor cannot update.

test('cannot update challenge if not the author', async ({
  assert,
  client
}) => {
  const user = await Factory.model('App/Models/User').create()
  const otherUser = await Factory.model('App/Models/User').create()
  const challenge = await Factory.model('App/Models/Challenge').make()

  await otherUser.challenges().save(challenge)

  const data = {
    title: 'This is my new title'
  }

  const response = await client
    .put(`/api/challenges/${challenge.id}`)
    .loginVia(user, 'jwt')
    .send(data)
    .end()

  response.assertStatus(401)

  const _challenge = await use('App/Models/Challenge').find(challenge.id)

  // check if the title really didn't change
  assert.notEqual(_challenge.title, data.title)
})

All should be green :)

Time to work on the delete portion

adonis make:test DeleteUserChallenge

You must be good now with the basic stuff :) Lot of repetitive think here, but you win a lot of trust in your project.

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Delete Challenge')

trait('Test/ApiClient')
trait('Auth/Client')

test('a user can delete a challenge owned', async ({ client }) => {
  const user = await Factory.model('App/Models/User').create()
  const challenge = await Factory.model('App/Models/Challenge').make()

  await user.challenges().save(challenge)

  const response = await client
    .delete(`/api/challenges/${challenge.id}`)
    .loginVia(user, 'jwt')
    .end()

  response.assertStatus(204)
})

test('cannot delete challenge if not the author', async ({
  assert,
  client
}) => {
  const user = await Factory.model('App/Models/User').create()
  const otherUser = await Factory.model('App/Models/User').create()
  const challenge = await Factory.model('App/Models/Challenge').make()

  await otherUser.challenges().save(challenge)

  const response = await client
    .delete(`/api/challenges/${challenge.id}`)
    .loginVia(user, 'jwt')
    .end()

  response.assertStatus(401)

  const _challenge = await use('App/Models/Challenge').find(challenge.id)

  assert.isNotNull(_challenge)
})

First, we will test a current user who owns the challenge can delete it. It's almost a copy and paste of the update method. Same for the version where the user cannot delete a challenge if not own.

For the routes now you should add

Route
  .delete('/api/challenges/:id', 'ChallengeController.delete')
  .middleware([
    'auth'
  ])

And for your controller, it's easy like that

  async destroy({ response, params, auth }) {
    const user = await auth.getUser()

    const challenge = await Challenge.findOrFail(params.id)

    if (challenge.user_id !== user.id) {
      throw new UnauthorizedException();
    }

    await challenge.delete()

    return response.noContent();
  }

Remember findOrFail give you a free 404 if the challenge doesn't exist. We need to just throw 401 exceptions if the user is not the author.

The routes file

If you look right now at your routes file this will look something like that

Route.get('/api/challenges', 'ChallengeController.all')
Route.get('/api/challenges/:id', 'ChallengeController.show')
Route.put('/api/challenges/:id', 'ChallengeController.update')
  .validator('UpdateChallenge')
  .middleware(['auth'])
Route.post('/api/challenges', 'ChallengeController.store')
  .validator('CreateChallenge')
  .middleware(['auth'])
Route.delete('/api/challenges/:id', 'ChallengeController.destroy').middleware([
  'auth'
])

Route.get('/api/me/challenges', 'MeController.challenges').middleware(['auth'])

Must be another way of doing this repetetive task ? And yes we can make use of grouping

Route.group(() => {
  Route.get('/', 'ChallengeController.all')
  Route.get('/:id', 'ChallengeController.show')
}).prefix('/api/challenges')
Route.group(() => {
  Route.post('/', 'ChallengeController.store').validator('CreateChallenge')
  Route.put('/:id', 'ChallengeController.update').validator('UpdateChallenge')
  Route.delete('/:id', 'ChallengeController.destroy')
}).prefix('/api/challenges').middleware(['auth'])

If you ask why do we don't nested them, it's because right now we can't with the version we run. This is the error you will get

RuntimeException: E_NESTED_ROUTE_GROUPS: Nested route groups are not allowed

I hope you enjoy this post :) And we talk in part 4 where we will start to add a bit more interaction with the API :)

Build a REST API with AdonisJs and TDD Part 2

Mon, 01 Apr 2019 00:00:00 GMT

Intro

Been a long time since part 1, sorry about that.

In this part, we will continue our Movies rest API with TDD. We will go a bit faster cause we now know the step we need to make in order to follow the TDD approach.

Fail -> Pass -> Refactor

Quick Fixes

In the last part, we make use, in testing env, of the DB postgres. Nothing bad with that, it's ok to use it. But I think will be faster in the long run if we make use of SQLite.

Don't worry again Adonis have made it easy for us :)

First, run

npm i -D sqlite3

This will install the drive we need for SQLite as a Dev Dependencies.

Now go inside your .env.testing file and put those lines

DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_DATABASE=movies_challenges_test

Don't forget to remove the other one who touches the db.

Now if you rerun the test with adonis test you should see all test pass

If you compare this to before you can see we get a bit faster. This will get faster more and more test we will add. SQLite is a in-memory db.

Get /api/challenges

Here, as the title says, we will work on the GET request who gonna give us all the challenges in our API. For now and for the purpose of the tutorial, we don't gonna worry about the pagination, etc.

adonis make:test GetChallenges

And choose Functional test

Go to the new file

test/functional/get-challenges.spec.js

Like in the past test file we need to import the Factory and get the trait

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Get Challenges')

trait('Test/ApiClient')
trait('Auth/Client')

test('make sure 2 + 2 is 4', async ({ assert, client }) => {
  assert.equal(2 + 2, 4)
})

Time to write the first test. First, what do we want to achieve here? For this endpoints, we want to make sure we can get all the challenges we have to save inside the database. This will be quite simple here.

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Get Challenges')

trait('Test/ApiClient')
trait('Auth/Client')

test('can get all the challenges', async ({ assert, client }) => {
  const challenges = await Factory.model('App/Models/Challenge').createMany(3)

  const response = await client.get('/api/challenges').end()

  response.assertStatus(200)

  response.assertJSONSubset([
    { title: challenges[0].title },
    { title: challenges[1].title },
    { title: challenges[2].title },
  ])
})

Here we first create 3 challenges by using the createMany method on Factory. After we check the response status equal 200 and also the JSON response have all 3 titles inside the return array.

If you run the test this is what you see.

Make sense we didn't create the route yet. Go to the route file and add

Route.get('/api/challenges', 'ChallengeController.all')

Now if you add this line to your test file

console.log('error', response.error)

After the response promise resolve you will see.

'RuntimeException: E_UNDEFINED_METHOD: Method all missing on App/Controllers/Http/ChallengeController\n> More details: https://err.sh/adonisjs/errors/E_UNDEFINED_METHOD'

This is normal, we make use of a method in controller who do not exist.

Go inside your ChallengeController and add this method

async all({ response, request }) {
  const challenges = await Challenge.all()

  return response.ok(challenges)
}

Now after running the test, all should be green :)

This call the all method from your Challenge model and this will return an array of all the challenge available. The response.ok will return a JSON object with the status 200 OK :)

Get /api/challenges/:id

Time to work on getting a single challenge by his id.

Pretty simple work again, just need to follow those step.

adonis make:test GetChallenge

You can copy and paste the last test we create about to get all challenges this will look almost the same.

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Get Challenge')

trait('Test/ApiClient')
trait('Auth/Client')

test('can get a challenge by id', async ({ assert, client }) => {
  const challenges = await Factory.model('App/Models/Challenge').createMany(3)

  const challenge = challenges[0]

  const response = await client.get(`/api/challenges/${challenge.id}`).end()

  response.assertStatus(200)

  response.assertJSONSubset({ title: challenge.title, id: challenge.id })
})

A pretty simple one, we create 3 challenges just to make it a bit more realistic. We after that create a variable challenge who will be the first one in the array. We then add the id to the URL. In the end, we check for the status 200 and also the JSON will need to have both title and id who match this challenge.

Follow the same step we have made before, so go to routes and add the route for this one.

Route.get('/api/challenges/:id', 'ChallengeController.show')

After this, your test will say we don't have the method in your controller. Time to add this

async show({ response }) {
  return response.ok({})
}

The next error is important, is the one who checks if the return object matches what we supposed. It's pretty normal it failed here we return an empty object. So time to make it work.

async show({ response, params }) {
  const challenge = await Challenge.find(params.id)

  return response.ok(challenge)
}

For getting access of the params id we make use of the params object and we then call find from the Challenge Model.

If you run all the test now all will be green.

But we need one more test for this endpoint. What will happen if the id do not exist?

If you try it this will fail. A pretty easy test to write

test('status 404 if id do not exist', async ({ assert, client }) => {
  const response = await client.get('/api/challenges/999').end()

  response.assertStatus(404)
})

Does the error say 204 should equal 404? Umh strange, time to fix it.

async show({ response, params }) {
  const challenge = await Challenge.findOrFail(params.id)

  return response.ok(challenge)
}

Yes, only one thing to change, findOrFail like the name says will return 404 if the object is not found :) Really nice and easy :)

Source code: https://github.com/EQuimper/adonis-tdd-tutorial-demo/tree/part-2

End word

Hope you enjoy this one, not too much, but we start to understand the flow and see how TDD help us going faster on the implementation of the API.

In the next part, we will add a way for a user to get all of his challenges. And also a way to update and delete the challenge if you are the author.

Happy coding :)

Attempting to learn Dart and Flutter: Part 3

Fri, 29 Mar 2019 00:00:00 GMT

Intro

So Firestore a NoSQL database, is kind of like the second generation of Firebase. Nice product, I liked it, even if you need to rethink about a lot of stuff. Lately, I've been playing with a personal project "I will have more info about this one in the next month :)" with Flutter and Firestore. Here some stuff I found with this experiment.

First Firestore/Firebase give you quite a lot, analytics, authentication, email verification, real-time data, etc. So for an MVP of the product, I want to build it's the way to go I think. Autoscale, dashboard, etc, all came with that. Pretty nice for a one-man army. Also, the integration with Flutter is really great. For sure it's a help when both products are own by the same company.

BLoC (Business Logic Component)

So after reading a lot online, and see a lot of conference on Youtube I see Google encouraged the developer to use the BLoC Pattern. Yes at the beginning that was quite hard to understand the flow and everything. But remind me a lot of what I was doing when I was using redux observable with react-native. So finally the BLoC pattern is kind of like React Context + RxJS. First, you create a BLoC who is a simple class. And after that, you create a provider who is an InheritedWidget. This lets you have access to the BLoC himself from anywhere in the app if you wrap the full app with the provider.

youtube:RS36gBEp8OI

Like React Context this let you jump some Widget. So no need to do props drill. But what is a BLoC? For me, because of my Redux or Mobx experience, I think of it like a Reducer or a Store. The UI trigger some action in this BLoC and this one past down the new state. I know maybe not the best way of thinking about this, but hey I'm not a master on Flutter, I learn on my free time :)

How to use BLoC with Firestore

So Firestore gives you already a stream when you retrieved data from the DB. Really nice you can pass this directly to the StreamBuilder if you want.

return StreamBuilder(
  stream: Firestore.instance.collection('my collections').snapshots()
);

But what should I do if I want to move out of Firestore later? My UI depends too much of this if I wrap all the listener like that. So for me, I like to remove the business logic from the UI to keep it clean, and easier to refactor later.

The thing is it's easy to say perfect go and use BLoC + Firestore, but you don't gonna find too much documentation online. And the tutorials I found is not quite like I really want.

What do I want?

Using BLoC
But getting the typing working for me so I want model class.

What do I mean by But getting the typing working for me so I want model class.? If you use Firestore you receive from the stream a QuerySnapshot or DocumentSnaphot. This thing will return you a Map who can be used in Dart. The thing is a Map is too much dynamic for me. I'm not coming to a typing language to start doing dynamic stuff.

In Dart you can have multiple Constructor, it's a really good place if you want to create a model class who can parse himself from json or map.

class TodoModel {
  final String title;
  final bool completed;

  TodoModel({
    this.title,
    this.completed = false,
  });

  TodoModel.fromMap(Map<dynamic, dynamic> map)
      : title = map['title'],
        completed = map['completed'];
}

As you can see here my constructor fromMap will take the map and parsed it to my object. You see the map['title'] stuff? I want that to just stay here, I don't want to start using this everywhere in my app. So that's why I say I want it type to an object. So how can we make Firestore working this way? I mean I want to be able to do inside my UI something like that.

return Text(todo.title);

Here what I did.

My solution

P.S this is just based on some experimentation, and for my use case, I'm still learning flutter so please, I know this is surely not optimum :)

P.S I use rxdart

The Repository is just a wrapper around my FirestoreProvider

class TodosBloc {
  final _repository = Repository();
  final _todos = BehaviorSubject<QuerySnapshot>();

  Observable<List<TodoModel>> get todos => _todos.stream.transform(_todosTransformer());

  void dispose() async {
    await _todos.drain();
    _todos.close();
  }

  void getTodos() {
    _repository.getTodos().listen(_todos.sink.add);
  }

  StreamTransformer<QuerySnapshot, List<TodoModel>> _todosTransformer() {
    return StreamTransformer.fromHandlers(handleData: (
        QuerySnapshot data,
        EventSink<List<TodoModel>> sink,
        ) {

        final todos = data.documents.map((snap) => TodoModel.fromMap(snap.data)).toList();

        sink.add(todos);
    }, handleError: (error, stackTrace, sink) {
      sink.addError(error);
    });
  }
}

Here is nothing crazy, I will make another post about a tutorial about it maybe later, here it's just to show you how I did the main point here is I listen to my stream from Firestore who is the stream who return a list of map to a new stream who transform his values to a list of TodoModel. Now when I want to use it I can do that.

return StreamBuilder(
  stream: todosBloc.todos,
  builder: (BuildContext context, AsyncSnapshot<List<TodoModel>> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.waiting:
        return Center(
          child: CircularProgressIndicator(),
        );
      default:
        return ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            final todo = snapshot.data[index];
            return Container(
              child: Text(todo.title),
            );
          },
          itemCount: snapshot.data.length,
       );
    }
  },
);

So now I can use my data like I want, as my class model. The autocomplete is there, and the linting also. So I cannot misspell something everywhere, the only place where I need to make sure I don't make type is the class model himself.

End word

I hope you enjoy this little post, and maybe even learn something. Let me know in the comments if you have any question :)

Happy Coding :)

Attempting to learn Dart and Flutter: Part 2

Mon, 25 Mar 2019 00:00:00 GMT

Intro

Flutter has so many widgets, they are all so awesome, you have one for almost everything. I really like that, this lets you create your app so much faster, and you have less code to write. Less code less bug :) But sometimes, in Flutter, I find stuff pretty hidden, I mean the docs are really really great. But in the case I want to show here, I was quite confused about how I will use this.

Dismissed the keyboard.

So for those coming from react-native, we can use the component react-native-keyboard-aware-scroll-view who follow the input and also handle the dismiss of the keyboard. Love this package, but at the same time, I ask myself why this one is not built in. I know you have the KeyboardAvoidingView but it's not the same quality as this community package. For dismissing a keyboard programmatically, we can do

Keyboard.dismiss()

Easy enough. I like this. Now time to see how to do this in Flutter.

In Flutter, the keyboard will follow with the input, at least in android. It's pretty nice, so no need to have a third-party library or doing any effort to have this keyboard not showing on top of the input. But the thing is how can I dismiss the keyboard. Yes, it's not already built. So what I found is that. PS I don't know if this is the best solution but for my case, it's work pretty good.

return GestureDetector(
  onTap: () {
    // Dismiss keyboard on outside tap
    FocusScope.of(context).requestFocus(new FocusNode());
  },
  child: Scaffold(
    body: SingleChildScrollView(
      child: Container(),
    ),
  ),
);

As you can see I wrap the full Scaffold widget with a GestureDetector and I check for the onTap event. When press I can then request the focus on something else. This way I can dismiss the keyboard. Not as straight forward as react-native but not that bad.

Close the ModalBottomSheet

Flutter give us for free an awesome ModalBottomSheet who can be used to help a user see action at the bottom of the screen. I love this thing so much. If you want to show this to the user you only need to call showModalBottomSheet and that's it.

_onFabPress(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return SafeArea(
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new ListTile(
                leading: Icon(Icons.directions_run),
                title: Text('New Workout'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (BuildContext context) {
                        return WorkoutScreen(
                          workout: WorkoutModel(
                            title: 'New Workout',
                            date: DateTime.now(),
                          ),
                        );
                      },
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      );
    });
}

Here I can show the modal with 1 list tile. The modal will then dismiss on outside press, can be swipe down etc. But if use this like that, when I click on an item and open a new screen, and after I go back the modal will still open. I need to implicitly tell the navigation to dismiss this one. How can I do this? Pretty easy, I just added Navigator.pop(context); before the navigation inside the onTap()

_onFabPress(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return SafeArea(
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new ListTile(
                leading: Icon(Icons.directions_run),
                title: Text('New Workout'),
                onTap: () {
                  // This will dismiss the modal
                  Navigator.pop(context);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (BuildContext context) {
                        return WorkoutScreen(
                          workout: WorkoutModel(
                            title: 'New Workout',
                            date: DateTime.now(),
                          ),
                        );
                      },
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      );
    });
}

End word

Right now, I really liked Flutter, I'm building my first real app with this and just wow. So many great things. Yes is not all Pros, I have some Cons. Lot of them is because I know how to make it in react-native and need to search a lot for the Flutter version. But at the same time, so many thing are much easier.

Hope you enjoy.

Happy Coding :)

Attempting to learn Dart and Flutter: Part 1

Mon, 18 Mar 2019 00:00:00 GMT

Intro

I've been playing with Flutter for the past month and just wow. So here would be kind of a journal of my progress in the path of learning Flutter and Dart.

Why doing this ?

After reading this awesome series where Steve show how he learn Go I figured out why not doing this also. I learn a lot just from those post and maybe some people can learn from mine here.

What this series is about ?

So for those who know me, I'm a React/React-Native developer for the past 3+ years. I loved React and React-Native. But as a developer who is always curious and also who loved to learn I decided why not giving a chance to Flutter.

So I've watch lot of videos on Youtube about it, tutorial, widget of the week etc... . I even start to created a playlist about those must watch video here.

In this series I will try to show tips and tricks for those coming like me from the world on React-Native. I always find it easier when learning new stuff, comparing it with what you already know. This will be a place for me to also improved, cause when you teach you learn so much.

Attempting to learn Dart and Flutter: Part 1

This part 1 is more an introduction of the series, not lot of code will be involved in this one.

Dart

I've been playing with Typescript for the past year and really like it, this is really an upgrade of javascript for me. I really loved type.

So when I see Dart is type and look a lot like it I really start to get excited. First I even feel Dart > Typescript. The type system is easier, you can have everything you like in Typescript almost but I fill is more tighten to the language. The devtools is awesome with dart also. Really well integrated with VSCode or the text editor I used right now IntelliJ.

For learning Dart and Flutter my first step was to do this Tutorial by Stephen Grider. Just loved it :) Wow, I take so many course from him in the past, and this one again is so good. You start by going over Dart and right after Flutter.

You learn:

State Management
RxDart
Animation
Navigation
Abstract Class
Testing http call

What I liked about Flutter ?

So here a list of what I really like about Flutter and why I think this can maybe become really really big.

Hot Stateful Reload
Integration with DevTools
Profiler
Performance peek right inside the Text Editor
The performance of Flutter is wow even for a cross-platform tool.
Debugger is top notch
Navigation is integrated no package to install and also really easy to use.
FutureBuilder are just wow, they are like Suspense in react
Build in testing tool
App size are really small for the hello world project. 2.7mb
StreamBuilder pretty nice too.
Android app are really good, I can get easily 60fps for animation and same for ios, something who was hard to get in react-native.
Animation are so good, really easy to figure out how to play with, I love using also canvas etc.
In ios when you use Cupertino you can have even the navigation big title animation
Context kind of api with Inherited Widget

Image of what I mean when I say really well integrated with Text Editor

What are the cons

Here a list of what I don't really like for now about it

State management is not simple like react-native
Not all packages are create yet, react-native have all the js ecosystem who is a big plus.
Widget hell

A list of stuff to check if you are interested.

CodeMagic A CI/CD just for Flutter
Fluttery An awesome Youtube Channel about Flutter animation etc
Inkino An open source cinema app build for the mobile + web cause yes dart can be used for the web.
itsallwidgets A site for showcasing app build with Flutter

End word

I hope you enjoy this little intro, yes I know not lot of code. But in the next part we gonna start to learn a bit more. :) Let me know in the comments if you have any questions or more :)

Happy Coding :)

Build a REST API with AdonisJs and TDD Part 1

Wed, 02 Jan 2019 00:00:00 GMT

I've been playing lately with AdonisJs a NodeJS MVC framework who look a lot like Laravel a really popular PHP framework. I really started to love the Adonis approach, more convention than configuration. I also love the fact they say in the headline.

Writing micro-services or you are a fan of TDD, it all boils down to confidence. AdonisJs simplicity will make you feel confident about your code.

In the past few month, I wrote all my backend project with the TDD pattern, and I really feel this help me getting more productive, and more confident with my code. I know TDD is not perfect, can slow you down, when you start, but I really think this can improved your code in the long term.

About this tutorial

So in this tutorial we gonna build kind of a bucket list for movies to watch. A user can create a challenge, and put movies to this one. I know, this is not the most awesome project ever, but this will help you see how Lucid, the Adonis ORM work with relationship. We gonna also see how easy this framework will make our live.

At the end of this tutorial, we gonna create a service where a user can finally enter just the name of the movie and the year. Us we will use TheMovieDB Api and find info about this movie.

Getting Started

First we need to install the Adonis cli

npm i -g @adonisjs/cli

To make sure everything work run the command in your terminal

adonis --help

If you see a list of command that mean this is working :)

For creating the project we will run this command in the terminal

adonis new movies_challenges --api-only

Here this will create a new project call movies_challenges and this will be an api only boilerplate, so no ui with this.

Follow the instructions

cd movies_challenges

For running the project the command will be

adonis serve --dev

But for us we don't really need cause all the interaction will be done from the testing.

Open the project in your text-editor of choice. For myself I use VSCode it's free and awesome.

Setup the db

Adonis have setup lot of stuff for us. But they let us choosing some stuff like which db to use etc. If you open the file config/database.js you will see sqlite, mysql and postgresql config. For this project I will be using Posgresql

To make it work we need to follow the instruction they provide at the bottom of this file.

npm i --save pg

After this go inside your .env file and setup the connection for your db. For me this will look like

DB_CONNECTION=pg
DB_HOST=127.0.0.1
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=postgres
DB_DATABASE=movies_challenges_dev

After I make sure I create the db from my terminal

createdb movies_challenges_dev

Setup the testing environnment

Adonis don't came with a testing framework out-of-the-box, but it's really easy to make it work.

Run the command

adonis install @adonisjs/vow

What is that ? Adonis have a way to install dependency by using npm internally. But the beauty of this it's they can add other stuff also. Like if you look what happen after this is done, they will open a a url in your browser with other instructions.

They have create 3 new files.

.env.testing
vowfile.js
example.spec.js

First we will setup the .env.testing file to make sure we it a test db and not the dev one.

Append that to the end of the file

DB_CONNECTION=pg
DB_HOST=127.0.0.1
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=postgres
DB_DATABASE=movies_challenges_test

After I make sure I create the db from my terminal

createdb movies_challenges_test

Writing your first test

So the way the app will work is a User can have many Challenges. Those challenge can have many movie to it. But movie can be to many challenge.

So in relationship this will look like

If you have check a bit the folder structure you will see Adonis give use User model and Auth of the box.

We will use this in the future.

So for making your first test file we will need to think about what we need to do.

The first thing I want to test is the fact a user can create a challenge. A challenge need to have a title, and a description is optionnal. I want to make sure only a authenticate user can create a challenge. When a challenge is create I need to put the current_user id to the data. So we will know who is the owner.

Adonis give us lot of tool to make our live easier. One of them is generator command thank to ace. We will use a command to make our first test. But to be able to do this we need to register the vow test framework to the provider of the project. Open start/app.js and add this to your aceProvider

const aceProviders = [
  '@adonisjs/lucid/providers/MigrationsProvider',
  '@adonisjs/vow/providers/VowProvider',
]

Now we can run the command

adonis make:test CreateChallenge

When you get ask unit or functionnal test use functionnal and click enter.

This will create a file

test/functional/create-challenge.spec.js

Nice first test file create :)

We will change the title of this test to be more useful.

test('can create a challenge if valid data', async ({ assert }) => {})

Now the way I wrote test is by creating the assertion first. After I then go backward and create the step I need to make it work.

test('can create a challenge if valid data', async ({ assert }) => {

  const response = // do api call

  response.assertStatus(201)
  response.assertJSONSubset({
    title: 'Top 5 2018 Movies to watch',
    description: 'A list of 5 movies from 2018 to absolutely watched',
    user_id: // to do
  })
})

Here I test than I want to receive back from my api call a 201 created with a certain object who will have the title a provide, the description I provide, and my current user id.

Next we need to write the code for the response

const { test, trait } = use('Test/Suite')('Create Challenge')

trait('Test/ApiClient')

test('can create a challenge if valid data', async ({ assert, client }) => {

  const data = {
    title: 'Top 5 2018 Movies to watch',
    description: 'A list of 5 movies from 2018 to absolutely watched'
  }

  const response = await client.post('/api/challenges').send(data).end()

  response.assertStatus(201)
  response.assertJSONSubset({
    title: data.title,
    description: data.description,
    user_id: // to do
  })
})

To make a api call we need to import first trait from the test suite. We need to told the test we want the api client. This will give us now access to client in the callback. I then put my data I want to an object and send it to a route with the verb POST.

Now I want to test with a current user jwt in the headers. How can we do this ? This is so easy with Adonis

'use strict'

const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Create Challenge')

trait('Test/ApiClient')
trait('Auth/Client')

test('can create a challenge if valid data', async ({ assert, client }) => {
  const user = await Factory.model('App/Models/User').create()

  const data = {
    title: 'Top 5 2018 Movies to watch',
    description: 'A list of 5 movies from 2018 to absolutely watched',
  }

  const response = await client
    .post('/api/challenges')
    .loginVia(user, 'jwt')
    .send(data)
    .end()

  response.assertStatus(201)
  response.assertJSONSubset({
    title: data.title,
    description: data.description,
    user_id: user.id,
  })
})

OMG !!! Too much. DONT WORRY. We just need to break it down a bit. So first what is Factory. Factory is a way to make dummy data easier. This come with a really nice api. Here the Factory will create a user to the db. But how can the factory know the data we want ? Easy just open the database/factory.js file and add this at the bottom

const Factory = use('Factory')

Factory.blueprint('App/Models/User', faker => {
  return {
    username: faker.username(),
    email: faker.email(),
    password: 'password123',
  }
})

Here we create a Factory for the Models user we have in the db. This use faker also who is a library who make dummy data so much easier. Here I put a fake username and email. But why I don't do this to password ? It's because when I will need to test login I want to be able to log, and because the password will become hash I need to know what is the original version.

So this line

const user = await Factory.model('App/Models/User').create()

We create a user to the db, now we can use this same user here in the request

const response = await client
  .post('/api/challenges')
  .loginVia(user, 'jwt')
  .send(data)
  .end()

As you can see we can now use loginVia and pass the user at first argument, the second argument is the type of auth here I say jwt. I can use .loginVia cause of this trait at the top

trait('Auth/Client')

Now in my json response I can now check the user id is really the one of the current user

response.assertJSONSubset({
  title: data.title,
  description: data.description,
  user_id: user.id,
})

One think we need to do before going further and run the test is we need to see the error from the response to do a real tdd.

So we will add this line before the assertion

console.log('error', response.error)

Now we can run the test with the command adonis test

You will see the error

error: relation "users" does not exist

What that mean ? It's because Vow by default don't run migration. But us a developer we don't want to run it manually on every test that will be painful. What can we do ? Adonis make again our live easy. Go in the file vowfile.js and uncomment the code already wrote for this

On line 14: const ace = require('@adonisjs/ace')
On line 37: await ace.call('migration:run', {}, { silent: true })
On line 60: await ace.call('migration:reset', {}, { silent: true })

Now if you rerun the test you will see

error { Error: cannot POST /api/challenges (404)

Nice one step further :) This error mean we don't have a route. We need to create it. Open start/routes.js and add this code

Route.post('/api/challenges', 'ChallengeController.store')

Here I say, when we get a post request to the route /api/challenges pass the data to the controller ChallengeController and the methods store. Remember Adonis is MVC so yes we need controller :)

Save the code and rerun the test

Now in the text of the error you will see

Error: Cannot find module \'/Users/equimper/coding/tutorial/movies_challenges/app/Controllers/Http/ChallengeController\'

This mean the controller don't exist :) So we need to create one. Again adonis have a generator for this

adonis make:controller ChallengeController

When ask choose http not websocket

Rerun the test

'RuntimeException: E_UNDEFINED_METHOD: Method store missing on App/Controllers/Http/ChallengeController\n> More details: https://err.sh/adonisjs/errors/E_UNDEFINED_METHOD'

Method store is missing. Fine this is normal the controller is empty. Add this to your file

// app/Controllers/Http/ChallengeController.js
class ChallengeController {
  store() {}
}

Rerun the test

expected 204 to equal 201
204 => 201

So now this is where the fun start, we expected 201 but received 204. We can fix this error by adding

class ChallengeController {
  store({ response }) {
    return response.created({})
  }
}

Adonis give us the response object who can be destructuring from the arguments of the method. Here I want to return 201 who mean created so I can use the created function. I pass an empty object so I can see my test failing further

 expected {} to contain subset { Object (title, description, ...) }
  {
  + title: "Top 5 2018 Movies to watch"
  + description: "A list of 5 movies from 2018 to absolutely watched"
  + user_id: 1
  }

Here the error mean we send nothing but expected stuff. Now time to do the logic.

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

class ChallengeController {
  async store({ response, request }) {
    const challenge = await Challenge.create(
      request.only(['title', 'description'])
    )

    return response.created(challenge)
  }
}

I add an import at the top, this is my challenge model I plan to created in future test. Now I can make use of async and also the request object to create a challenge. The only method info can be see here.

Now if I rerun the test I see

'Error: Cannot find module \'/Users/equimper/coding/tutorial/movies_challenges/app/Models/Challenge\''

Fine make sense the model don't exist

adonis make:model Challenge -m

The -m give you the migration file also

This command will created

✔ create  app/Models/Challenge.js
✔ create  database/migrations/1546449691298_challenge_schema.js

Now if we return the test

'error: insert into "challenges" ("created_at", "description", "title", "updated_at") values ($1, $2, $3, $4) returning "id" - column "description" of relation "challenges" does not exist'

Make sense the table don't have a column description. So we should add one

So open your migration file for the challenge_schema

class ChallengeSchema extends Schema {
  up() {
    this.create('challenges', table => {
      table.text('description')
      table.increments()
      table.timestamps()
    })
  }

  down() {
    this.drop('challenges')
  }
}

Here I add a colum text call description

Rerun the test

'error: insert into "challenges" ("created_at", "description", "title", "updated_at") values ($1, $2, $3, $4) returning "id" - column "title" of relation "challenges" does not exist'

Now is the same error but for title

class ChallengeSchema extends Schema {
  up() {
    this.create('challenges', table => {
      table.string('title')
      table.text('description')
      table.increments()
      table.timestamps()
    })
  }

  down() {
    this.drop('challenges')
  }
}

Here title will be a string. Now rerun the test

  expected { Object (title, description, ...) } to contain subset { Object (title, description, ...) }
  {
  - created_at: "2019-01-02 12:28:37"
  - id: 1
  - updated_at: "2019-01-02 12:28:37"
  + user_id: 1
  }

The error mean the title and description are save, but the user_id don't exist, so we need to add the relation in the migration and the model

Again in the migration file add

class ChallengeSchema extends Schema {
  up() {
    this.create('challenges', table => {
      table.string('title')
      table.text('description')
      table
        .integer('user_id')
        .unsigned()
        .references('id')
        .inTable('users')
      table.increments()
      table.timestamps()
    })
  }

  down() {
    this.drop('challenges')
  }
}

Here the user_id is a integer, reference the id of a user in the users table

Now open the Challenge model in app/Models/Challenge.js and add this code

class Challenge extends Model {
  user() {
    return this.belongsTo('App/Models/User')
  }
}

And we need to do the other way of relation so open app/Models/User.js and add at the bottom after tokens

challenges() {
  return this.hasMany('App/Models/Challenge')
}

Wow I love this syntax and how easy we can see the relations. Thank to Adonis team and Lucid ORM :)

Run the test

 expected { Object (title, description, ...) } to contain subset { Object (title, description, ...) }
  {
  - created_at: "2019-01-02 12:35:20"
  - id: 1
  - updated_at: "2019-01-02 12:35:20"
  + user_id: 1
  }

Same error ? Yes when we create we didn't put the user_id. So we need to

class ChallengeController {
  async store({ response, request, auth }) {
    const user = await auth.getUser()

    const challenge = await Challenge.create({
      ...request.only(['title', 'description']),
      user_id: user.id,
    })

    return response.created(challenge)
  }
}

Here I make use of auth, who is a object we method touching the authentication. Here I can use the current user with the function auth.getUser. This will return the user from the jwt. Now I can then merge this to the object when create.

Now if you run your test all should work. BUTTTTT this is not done. We need a test to make sure the user is really authenticate, cause now this endpoint is accessible by everyone.

Add to our test file

test('cannot create a challenge if not authenticated', async ({
  assert,
  client,
}) => {})

Again we gonna work with the same idea, building the assertion first and going backward

test('cannot create a challenge if not authenticated', async ({
  assert,
  client,
}) => {
  response.assertStatus(401)
})

Here we want the status to be 401 unauthorized

test('cannot create a challenge if not authenticated', async ({
  assert,
  client,
}) => {
  const data = {
    title: 'Top 5 2018 Movies to watch',
    description: 'A list of 5 movies from 2018 to absolutely watched',
  }

  const response = await client
    .post('/api/challenges')
    .send(data)
    .end()

  console.log('error', response.error)

  response.assertStatus(401)
})

First make sure to delete the console.log from the other test. Now your test should look like that here.

Open your routes file

Route.post('/api/challenges', 'ChallengeController.store').middleware(['auth'])

If you run the test all will be green :)

But now I will like to test the fact then title is required and both description and title need to be a string how can I do this ?

Adonis give us access to another really nice tool can validator.

We need to install the validator library

adonis install @adonisjs/validator

Go to start/app.js and add the provider

const providers = [
  '@adonisjs/framework/providers/AppProvider',
  '@adonisjs/auth/providers/AuthProvider',
  '@adonisjs/bodyparser/providers/BodyParserProvider',
  '@adonisjs/cors/providers/CorsProvider',
  '@adonisjs/lucid/providers/LucidProvider',
  '@adonisjs/validator/providers/ValidatorProvider',
]

Now go back to our test file for challenge and add a new one

test('cannot create a challenge if no title', async ({ assert }) => {})

Before going further, I don't like the fact I need to manually wrote the title and description. I would like to be able to make the factory create it for us. This is possible, first go to database/factory.js

We need to create a Factory for the Challenge

Factory.blueprint('App/Models/Challenge', faker => {
  return {
    title: faker.sentence(),
    description: faker.sentence()
  }
});

Now we can use this with the help of make

const { title, description } = await Factory.model(
  'App/Models/Challenge'
).make()

This will give us a fake title and description but without being save to the db.

Going back to the test will would like to receive error if the title is not in the body

test('cannot create a challenge if no title', async ({ assert, client }) => {
  response.assertStatus(400)
  response.assertJSONSubset([
    {
      message: 'title is required',
      field: 'title',
      validation: 'required',
    },
  ])
})

Now we need to write the code to get to this. I will skip some process, but hey continue it, this is how we get better. I will just not wrote it cause that take lot and lot of line :)

test('cannot create a challenge if no title', async ({ assert, client }) => {
  const user = await Factory.model('App/Models/User').create()
  const { description } = await Factory.model('App/Models/Challenge').make()

  const data = {
    description,
  }

  const response = await client
    .post('/api/challenges')
    .loginVia(user, 'jwt')
    .send(data)
    .end()

  response.assertStatus(400)
  response.assertJSONSubset([
    {
      message: 'title is required',
      field: 'title',
      validation: 'required',
    },
  ])
})

First we create a user to be able to log, cause we need to be authenticated remember :)

Second I get a fake description from my factory. I just send this one.

I assert I receive a 400 for bad request and a json array of error message.

If I run the test now I receive

expected 201 to equal 400
  201 => 400

That mean the Challenge get create but shouldn't

So we need to add a validator for this

adonis make:validator CreateChallenge

Go inside your routes file and we want to use this

Route.post('/api/challenges', 'ChallengeController.store')
  .validator('CreateChallenge')
  .middleware(['auth'])

Now if you run the test you will see

expected 201 to equal 400
  201 => 400

Make sense the validator break stuff. Time to wrote some code. Open app/Validators/CreateChallenge.js

class CreateChallenge {
  get rules() {
    return {
      title: 'required|string',
      description: 'string',
    }
  }

  get messages() {
    return {
      required: '{{ field }} is required',
      string: '{{ field }} is not a valid string',
    }
  }

  get validateAll() {
    return true
  }

  async fails(errorMessages) {
    return this.ctx.response.status(400).json(errorMessages)
  }
}

Here I add some rules, messages, and I also show the fails with a status 400 for bad request. I also put the validateAll to make sure I validate all stuff, not just one by one.

If you run the test now all should work :)

We can also add the notNullable field to the title column in the migrations

table.string('title').notNullable()

A last test can be create to test both description and title need to be a string.

test('cannot create a challenge if title and description are not a string', async ({
  assert,
  client,
}) => {
  const user = await Factory.model('App/Models/User').create()

  const data = {
    title: 123,
    description: 123,
  }

  const response = await client
    .post('/api/challenges')
    .loginVia(user, 'jwt')
    .send(data)
    .end()

  response.assertStatus(400)
  response.assertJSONSubset([
    {
      message: 'title is not a valid string',
      field: 'title',
      validation: 'string',
    },
    {
      message: 'description is not a valid string',
      field: 'description',
      validation: 'string',
    },
  ])
})

And if we run again the test BOOM all green.

End word

I hope you enjoy the part 1 of this tutorial. Don't forget to subscribe to get notifications when I will post the part 2.

If you find any typo, or your want to let me know something about this project, don't hesitate to let a comment below :)

The code can be find here on github

Setup CORS in Firebase Functions

Tue, 27 Nov 2018 00:00:00 GMT

In one of my last project, I was using Firebase Functions. I did love to use them, but it’s quite hard to find some solution on this new stuff. One think I found pretty hard to get it work was the CORS of my project. When I use Express I can use the packages CORS, but here we don't have a server. Firebase Functions are just simple function. Yes, they can be use as HTTP endpoint etc, but they go sleep after being trigger and completed the job. The thing also is when I add this CORS package, I add it as middleware. Here if, I want to use a middleware I can but I will need to add express and wrap the full server with it.

Yes, that will have been so much easier I know. But I want to fix that without going to this path. So after searching on StackOverFlow a lot and try/error I finally figured out :).

First, we need to add this CORS package. Yes I know you can set it without it, but for this tutorial, I will show with it. Also the example I will show make use of Typescript. You can use javascript without any problem also :)

yarn add cors

After inside your index.ts file or whatever file where you import your function just import CORS and initialize it.

import cors from 'cors'

const corsHandler = cors({
  origin: [
    'http://localhost:3000',
    // Staging URL
    // PROD URL
  ],
}****)

We will need to add this corsHandler function to your functions.

export const hello = functions.https.onRequest(
  (req: functions.Request, res: functions.Response) => {
    // @ts-ignore
    // tslint:disable-next-line:no-empty
    corsHandler(req, res, async () => {
      await // my logic

      res.status(200).json({ message: 'Yes cors work' })
    })
  }
)

As you can see I pass to my corsHandler the request and response object. This way I can setup the cors pretty easily. I know in some place we see

export const hello = functions.https.onRequest(
  async (req: functions.Request, res: functions.Response) => {
    // @ts-ignore
    // tslint:disable-next-line:no-empty
    corsHandler(req, res, () => {})

    await // my logic

    res.status(200).json({ message: 'Cors will work, but we will received an error of headers' })
  }
)

Like you can see, not a lot of difference. But yes we have one if I do this in the firebase logs I received. Error: Can't set headers after they are sent.

Alternative

For sure with this way, this will get painful to add CORS everywhere. That's why you can then use express to make your life easier.

import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors({
  origin: [
    'http://localhost:3000',
    // Staging URL
    // PROD URL
  ],
})

app.post('/hello', async (req: functions.Request, res: functions.Response) => {
  // logic here
}));

export const app = functions.https.onRequest(app);

Much simpler, YES sure. But now your endpoint will look like <yourdomain>/app/.... You can maybe go with like a v1 as export so this will look like versioning but hey here it's your choice :)

End word

Hope this helps you fix this issue. For me, that takes a bit more time then on a regular server. But now it work :).

How to setup TailwindCSS in Phoenix 1.4

Wed, 14 Nov 2018 00:00:00 GMT

I've been using Tailwind lately and really loved it. But one thing about this one is how to install it in a new project. My last personal project was with the brand new Phoenix 1.4 framework and I did want to use Tailwind for this one. So here just a "How to" guide about installing this one.

I did this article, cause I did search for this kind of one in the net and didn't found anything. So I hope that can help someone who tries it :)

Step 1 - Setup the Project

First, make sure you have the new version of Phoenix install on your machine. Just follow all the step on the docs here. After we need to start a brand new project. We can do this by running the command

mix phx.new myproject

Don't forget to say yes when they ask about installing the dependencies.

Step 2 - Install Tailwind

cd assets

So now we are in the front-end side, we can then install tailwind as a npm dev packages

yarn add -D tailwindcss

Now Tailwind is installed and ready. But we need to initialize it to get the basic theme etc.

From the terminal run the command

./node_modules/.bin/tailwind init

This command will create a tailwind.js file who contains all the CSS of your project. Here I don't go in details about Tailwind you should read about it here

Step 3 - Setup Webpack etc...

Now we need to setup webpack to make it work with Tailwind + Postcss

yarn add -D postcss-loader

This will add Postcss as dev dependencies and will be available for webpack.

Create a file in the assets folder call postcss.config.js and add this code

// assets/postcss.config.js

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],
}

This will setup Tailwind with the file we have created when we run ./node_modules/.bin/tailwind init. Also here I just add the autoprefixer but not required.

After this open you webpack.config.js file and add postcss-loader after the css-loader in the module object.

// assets/webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  entry: {
    './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
  ],
});

Open your assets/css/app.css and override the code for this

/** assets/css/app.css */

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
 @tailwind preflight;

 /**
  * This injects any component classes registered by plugins.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/components";
  */
 @tailwind components;

 /**
  * Here you would add any of your custom component classes; stuff that you'd
  * want loaded *before* the utilities so that the utilities could still
  * override them.
  *
  * Example:
  *
  * .btn { ... }
  * .form-input { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "components/buttons";
  * @import "components/forms";
  */

 /**
  * This injects all of Tailwind's utility classes, generated based on your
  * config file.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/utilities";
  */
 @tailwind utilities;

 /**
  * Here you would add any custom utilities you need that don't come out of the
  * box with Tailwind.
  *
  * Example :
  *
  * .bg-pattern-graph-paper { ... }
  * .skew-45 { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "utilities/background-patterns";
  * @import "utilities/skew-transforms";
  */

Step 4 - Time to code

Now after you run mix phx.server from the ROOT directory of your project, you can then see the result inside your priv/static/css/app.css. All the TailwindCSS will be there.

End word

I hope this article make your life a bit easier and now you are able to go and build your awesome project with Tailwind and Phoenix :)

How do I manage state with React?

Sun, 13 May 2018 00:00:00 GMT

Intro

SML -> State management library (e.g. Redux & MobX)

P.S. This is just my opinion, this is not a best practice guide etc. It is just what I've found to be the best for the apps I built recently.

When building an app with React or React Native I had lots of options. One of the most important option was how to manage state, where to store it, how to use it, and lastly, how to make it easy to maintain.

I believe these are common questions before starting most projects. React gives us freedom and liberty that other libraries and frameworks don't give you, but it comes with it's own costs. You need to make more decisions, code with fewer conventions, etc.

One question I always ask myself before creating/managing state is which components are involved with this state. If you believe many components will be involved, then the answer is more obvious than when only a few components are involved. A SML can help you in these cases. When the answer is a single component and it's children, it is probably better to keep it at the component level state.

Form state

So why not start with something I think the majority would agree. Don't put form state in Redux or any other lib, use component level state or tools like formik or react-final-form. I believe many developers have used libraries like redux-form or something similar, but make sure to try these libs. Formik and React-Final-Form are going to change the way you think about forms state. They're gonna help you with the management of you forms state easier than before.

Personally I prefer Formik, I like to use it with Yup for creating validation schema.

I want to get the result of the login form inside my SML. You may wonder how may I do this? I have seen this question quite often and the answer is inside the question. The Result. Let Formik manage your form, handle the error(s) and submit. Then when you know all is good, store the result in your SML. Trust me, after building like 2-3 forms, you will not be able to live without Formik and Yup again.

Animation state

The state should be managed at the component level state. By doing it this way, you can reuse this component with animation in another project. Remember if you build a project today with Redux and you handle this state with it and you want to reuse it, you will also need to use Redux in this new project and all the related boilerplate code. By creating it at the component level state, it's almost as simple as copying & pasting one file to transfer a usable component to your new project - Or you can publish it as an NPM package! :)

App State

When you build a modern app you need to know a great deal about the current state of the app. Is the user online or offline? Is their location important? What is the part of the app that runs foreground or background in react-native, etc...

This is the kind of state I really like to manage with a SML. Why? Remember my question earlier about which components are involved? First, this is not even just component, some functions will need to know about this. For example, if offline you might store what the user tries to send and push it later to the server when he's back online. Then maybe you want to show a little toastr (or any other visual component) that says the app is in an offline mode.

In the the geolocation example, if you keep it as a global, you are making sure that each component(s) who need this value will have the same exact value. So, if you build an app with a map + something else, both are gonna have the same source of truth.

Modal, toastr, theme manager

For this I once again go with a SML or now that it is released, the Context API. First, for a toastr and/or a modal, I think it is much simpler to keep just one instance of them. What do I mean by that? For instance, you declare one component who acts as the modal parent. This component handles if the modal is visible and if it is, which type it represents (for example, if it's a welcome modal or a modal for a certain situation).

This one should connect with your SML. Why? Because the action to open the modal is surely gonna be used deeply in your app and you don't want to pass down this action 20 levels deep.

When dealing with a theme, I think you don't have many options. You can use the new Context API (which I think is awesome for this kind of stuff) or you can use your SML of choice.

User state

This one is surely one of the most common one. Keeping the current viewer state. Is the user logged in or not, his avatar URL etc. I think this one should be handled in your SML. More often than not, the navbar is going to need the avatar URL and also if the user is logged in to conditionally show some links. Also, when the user sees his profile, he can probably update it but if he's looking at someone else's profile, it may be just a plain view.

Conclusion

I hope this little article has helped you at some point. If your question is which SML I like the most, I think right now it is mobx-state-tree which is like Redux meets MobX.

Hope you see why React state can be really useful and don't make the same mistake I made when starting by only using the SML state and never using component level state.

Let me know in the comments if you have any questions or if you find some typos :)

My Goals for 2018

Fri, 12 Jan 2018 00:00:00 GMT

Intro

2018 !!! Finally new year, time to make a new plan and check what we did last year. Also, it's the time of the year where we can setup the plan for the incoming 12 months.

2017

So what was my plan last year?

Get 500+ Subscribers on my youtube channel. [CHECK]

Right now I have 2935 subscribers on my channel. This is awesome thank you, everyone, who follow me there. This is really awesome to see some people like the things I do. I hope what I shared as tips on my channel can really help you :)

Post 25 videos at least on youtube. [CHECK]

I posted 113 videos in 2017. Yes this challenge is done, but I'm a bit disappointed with the fact then I didn't do all the tutorials I plan to. 2018 please be good with me here and help me to stay motivated.

Create 2 apps for my startup idea. [NOPE]

I did 0 apps idea for myself. All the apps I did was for the client.

Get better as a Mentor and see student smile after graduating [CHECK]

I get more patient, cause yes I need haha. Like me everyone who start in programming struggle on some point. Here has a mentor the thing is sometimes this stuff make so much sense for you then you don't understand why this person don't understand yet. Was really hard for me to go over this but this thing it's what I think to make a great mentor. But I need to get better in teaching and plan to do some little video like tips I found who can help a student. Get almost always the same question so why not recorded the answer? :)

Get better and better on JavaScript [CHECK]

I think I did here. Learn a lot about data structure and references this year.

Learn Golang or Elixir a bit more. [CHECK]

I did for both some little project and I'm also working right now on a tutorial where I teach Elixir with Grahpql + Phoenix + React-Native where the plan is to build an Instagram Clone

Wrote 30 posts on this blogs. [NOPE]

NOPE, I didn't ...

Create 3 tutorials and post it on Youtube and Udemy for free. [CHECK]

I did on youtube, but Udemy I've done zero

Create 1 awesome library for the community. [NOPE]

I made nothing really awesome :S

Contribute on at least 3 open source project. [NOPE]

Didn't have the motivation to continue to work after my 10hours code straight almost every day.

Get better in English [CHECK]

I think I get better here, but still, need to improve it.

Start to learn Spanish [NOPE]

Didn't event started haha

Read 10 books about business [NOPE]

Just read one here.

Read 20 books about programming [NOPE]

Read 6 here, and I don't think 20 books is ok in a year haha

Get 1500 points on StackOverflow (652 currently) [NOPE]

Right now I'm with 1058 points :( almost.

2018

So this year, which kind of year I want 2018 to be? Good question! I think this year gonna be a way for me to start moving a bit faster on some topic and starting to get better at what I have already started. What do I mean? First thing, my project I build right now started to be a bit faster, no need anymore to do all the research I did last year to get this feature done example. So I can focus more on coding and build awesome product faster. And faster what I mean by that is making more product. What took me before 40hours to make now I can do this in 30hours or less. So that gonna let me finish product earlier and go on the next one faster etc. By doing this I'm gonna see more scenario and business logic. At the end of this, I'm gonna just have more experience.

Also, I need to focus on getting better at what I already do and not spread myself too much. I think this year Javascript, Golang, and some Elixir gonna be the only language I'm gonna touch.

2018 also gonna be the year of learning Blockchain's technologies. Learning how to work with them and building dapps. I know this gonna be big in the future and I want to have an edge here :)

For my youtube channel, I want to start to be a bit more professional. Not doing cut in a video it's a bad idea, I need to start cutting part who make my viewer losing time. Where I say "eeeeeeee" for like 5 sec haha. Also, I need to take time to talk good in English. Showing more picture of what we gonna do. Explain more before we start a feature. Going deeper into some stuff another tutorial doesn't show.

My goals for 2018

Get good with Golang
Get 5000 subscribers on youtube
Post 5 tutorials on youtube
Get 3000 points on StackOverflow
Read 10 books in programming
Improve my English
Improve my health by doing exercise a bit more
Improve my teaching's skill

Good year everyone :)

Make iterm more powerful

Thu, 22 Jun 2017 00:00:00 GMT

I love Iterm and I would like to share with you some of the tips I found with this awesome tools.

Make him look pretty

Everyone loved to work with the awesome, fast and powerful tool. But we also want them to look pretty and by customizable. Iterm can be all of them. First thing at the first installation the theme is already pretty good. But if you want to change this theme just take a look at this website. He has a lot of scheme and some of them are really beautiful. Also in your profile settings ⌘ + , you can change the fonts of him. If you don't like the standard font you can just change it here.

Just click on change font. For me has you can see I use Hasklig.

Make it feel more native

Has a Mac user, we love the shortcut of Mac when it comes to delete a single word, delete a full line, go to the beginning of a line etc. But if you have played with iterm you know them they don't work. BUT They can ;)

Go in your profile ⌘ + , and click on keys

After that in the right where we see Key mappings, we can add these command.

For delete a single word with `⌥ + ⌫`

Action: Send Hex Code 0x17

For delete a full line with `⌘ + ⌫`

Action: Send Hex Code 0x15

For go to the beginning of a line with `⌘ + ←`

Action: Send Hex Code 0x01

For go to the end of a line with `⌘ + →`

Action: Send Hex Code 0x05

Some tips

For opening a new tab like always in Mac you can just ⌘ + t. After that, if you want to travel between them you can ⌘ + number of the panel. Example ⌘ + 2 send me to the second panel.

Also if you want to split screen just hit ⌘ + d that gonna split to the right. If you want to change between split you can here

Add the same command as me. So now I just need to ⌥ + number of the split.

Open him with a good size

For me, I like Iterm to be with a standard size when I open it. For the change, it just goes in profile again but on the window now. If you want the same size as me.

Column: 120
Rows: 41

If you want to open with the split or new tab same directory

When I code I always finish by open lot of tabs with him. I hate when I need to cd in my directory again. So for that Iterm make it easy for us. You can check on Iterm to make him open in the same directory really easy.

In profile again with the tab general open just check in the working directory section like that

Finish

Hope you have like this little post and find it helpful :)

What I found by building my own NodeJS boilerplate.

Wed, 03 May 2017 00:00:00 GMT

Mongoose Tips

I’ve played with Mongoose a lot in the past week. I’ve built a NodeJS API boilerplate for help me kickstart some REST API project. I setup the regular auth using PassportJS with the local and JWT strategies. By doing this I found some useful tricks with Mongoose. Some tips I never really see somewhere ‘maybe I didn’t search lot 😃’ and I want to share you what I found.

toJSON()

Example, you want to make authentication with your app and you don’t want to send the password to the front-end. It’s normal cause this is a big security issue if you did. So want you can do it’s create a function who take your user and return a new object.

function getUser(user) {
  return {
    _id: user._id,
    username: user.username,
  };
}

This strategy work but I think the one I’m gonna show gonna be better.

UserSchema.methods = {
  /**
   * Authenticate the user
   *
   * @public
   * @param {String} password - provided by the user
   * @returns {Boolean} isMatch - password match
   */
  authenticateUser(password) {
    return compareSync(password, this.password);
  },
  /**
   * Hash the user password
   *
   * @private
   * @param {String} password - user password choose
   * @returns {String} password - hash password
   */
  _hashPassword(password) {
    return hashSync(password);
  },

  /**
   * Generate a jwt token for authentication
   *
   * @public
   * @returns {String} token - JWT token
   */
  createToken() {
    return jwt.sign(
      {
        _id: this._id,
      },
      constants.JWT_SECRET,
    );
  },

  /**
   * Parse the user object in data we wanted to send when is auth
   *
   * @public
   * @returns {Object} User - ready for auth
   */
  toAuthJSON() {
    return {
      _id: this._id,
      token: `JWT ${this.createToken()}`,
    };
  },

  /**
   * Parse the user object in data we wanted to send
   *
   * @public
   * @returns {Object} User - ready for populate
   */
  toJSON() {
    return {
      _id: this._id,
      username: this.username,
    };
  },
};

So here we have a lot of stuff to check 😃. Methods in mongoose are finally what they said. They are methods available on your user object. An example here we have js±authenticateUser(password) who is use for authenticate the user find with email if the password is the right one. Same go for the js±_hashPassword(password) who just simply hash the password before saving the user in the DB. js±createToken() like the name say create the JWT token and can be user right inside the response

res.status(200).json({ user, token: user.createToken() })

But the one I want you to see it's the js±toJSON(). This on is use when finally you on your user. So if you check back

res.status(200).json({ user, token: user.createToken() })

you can see I send the user. Because we have the js±toJSON() on make it working just like this. We don't send timestamps, email, password etc. We just send js±_id and js±username nothing more. But ok why do the js±toAuthJSON()? Because now I can reformat the response to be

res.status(200).send(user.toAuthJSON())

so I just send an Object with _id and token. Hope this part make sense 😃.

The reason why have to methods for JSON below 😃.

Statics

After that in Mongoose, you have access to something call Statics in your schema. This is the same thing like in class. Statics are method who can be used without initiate this one. So you can use it right with the model himself.

Example

PostSchema.statics = {
  /**
   * Create a post
   *
   * @public
   * @param {Object} args - Object contains title and text
   * @param {String} authorId - the author id
   * @returns {Post} Post Object - new post create
   */
  createPost(args, authorId) {
    return this.create({
      ...args,
      author: authorId,
    });
  },

  list({ skip = 0, limit = 10 }) {
    return this.find()
      .sort({ createdAt: -1 })
      .skip(skip)
      .limit(limit)
      .populate('author');
  },
};

Here I have 2 statics methods to my post. This method finally is just for abstract some of your code. For me, that make my life a bit easier and make the controller cleaner. The js±createPost(args, authorId) it's for just clean up a bit the code. I can use it by doing

Post.createPost({ title: 'Hello' }, '123')

I just remove some code and make it a bit easier when it came to maybe change DB. I can keep the same controller but just change my js±Post services.

After this one we have

list({ skip = 0, limit = 10 })

This one it's just for make kind of pagination easier. You can see I use the ES6 feature Default Parameters who let me add default parameters if these values are js±undefined. Again I can use it like that

Post.list({ skip: 5, limit: 20 });

This is again for me just sugars and makes my code easier to follow.

Again toJSON() 😃

In the last example in the list we have js±.populate('author');. Because of the js±toJSON() by default the user gonna have only js±_id and js±username no need to add select value etc :). That's why I have js±toAuthJSON() who is called on login and js±toJSON() for this kind of thing.

Packages

Some packages I didn't know in the NodeJS ecosystem and need to be used 😄.

Joi

I really like this one for help me make validation in my controller. So easy to use too.

export const validation = {
  create: {
    body: {
      title: Joi.string().min(3).required(),
      text: Joi.string().required(),
    },
  },
  update: {
    body: {
      title: Joi.string().min(3),
      text: Joi.string(),
    },
  },
};

After this, in your routes file, you do with the help of express-validation

routes.post(
  '/',
  authJwt,
  validate(PostController.validation.create),
  PostController.create,
);
routes.patch(
  '/:id',
  authJwt,
  validate(PostController.validation.update),
  PostController.updatePost,
);

Helmet

Helmet's a library who help you secure your Express app. Easy to install just need to add it as a middleware js±app.use(helmet()). This is for getting the standard. You can check on their GitHub to see another way.

Cors

Cors's a middleware who enable for you the Cross-Origin request. Can be added for getting everything working just by doing js±app.use(cors()) but it's a good thing to whitelist your front-end only etc. Take again a look at the docs before use it.

Http-Status

Http-Status just make your life easier to add status to your endpoint.

export async function getList(req, res, next) {
  try {
    return res
      .status(HTTPStatus.OK)
      .json(await Post.list({ skip: req.query.skip, limit: req.query.limit }));
  } catch (err) {
    err.status = HTTPStatus.BAD_REQUEST;
    return next(err);
  }
}

Other useful packages

Prettier

Prettier help you to reformat your code and make it look better in no time. I start to use it about 1 month ago and now use it on every project I do. Easy to install this packages gonna save you time and gonna make your code look much better. PS if you use it with eslint and have a lot of red error maybe add eslint-config-prettier to your project and add it to your extends in .eslintrc. This gonna remove eslint issue with syntax looking and prettier gonna manage it.

Example

{
  "extends": [
    "equimper",
    "prettier"
  ]
}

Lint-Staged

Lint-Staged gonna run your linter on your commit. Why have it ? Because maybe you use eslint and prettier and forgot all time to run the scripts. So your code looks bad etc. By adding this tools your commit gonna be linting before that let your commit. Can be really useful for a project with a lot of people.

For adding it I just add this in my packages.json

{
  "pre-commit": "lint-staged",
  "lint-staged": {
    "*.js": [
      "eslint",
      "yarn prettier",
      "git add"
    ]
  },
  "scripts": {
    "lint": "eslint src --color",
    "prettier": "node ./scripts/prettier.js write",
    "lint-staged": "lint-staged",
  }
}

End word

Hope this little article was a little gold mine of packages and tips for you. That was a really good experience working on this simple boilerplate. Plz take a look at it and let me know what you think of it.

NodeJS-API-Boilerplate

Why I moved away from Atom to Visual Studio Code and my Setup

Sat, 25 Feb 2017 00:00:00 GMT

youtube:baJyGTJr9so

VSC: Visual Studio Code

Why I moved away from Atom

I was an Atom user for nearly a year. Everything about this text editor was perfect for me. For starters, the packages manager was much more beginner friendly than Sublime. Also, there were always new updates which seemed to make my text editor more and more powerful with each update. But 4 months ago I started to feel the pain of the slow speed of Atom. This nearly broke my heart as I had put so much time and effort customizing the perfect setup for my needs. I built custom packages, created color syntax for different languages and even made my own code snippets.

So VS Code?

Yes, I choose VS Code and yes I wasn't sold the first time I saw it. I don't like Microsoft products, but this one had something I really liked.

Fast

Open VSC took me less than 10 seconds.

CPU

VSC took almost no CPU! I got some weird stuff with code helper in the activity monitor of my MAC but I quickly resolved the issue by tweakng the settings(I’ll show these magic settings at the end of this post).

Intelisense

The Atom JavaScript autocomplete was really great but when I switched to VSC I never missed it. The fact than you can mouse over a function and see what it does or cmd + click on a file path and go right to the file is awesome! You can do the same thing in Atom. I know. But it’s just not as smooth as VSC.

Packages

Like Atom, VSC has a lot of packages. The VSC community put a lot of effort into making your experience with this text editor better everyday. I miss some of Atom packages but at the same time, I have some new favorites for VSC.

My Top Packages

Here you can click on the packages name. This is a link :)

Path Intelisense

This helps you get the relative path of your file and help you to autocomplete path names when you do something like…

import MyComponent from './src/components/MyComponent';

Plus, this works with dependencies from your packages.json.

Project Manager

This extension helps my life so much. When you have a lot of projects and don't want to waste time finding each one on your computer, you can just save them right inside the window. Just press shift + cmd + p and

Project Manager: Save Project

Afterwards, you can just come back to your text editor and search right in the project manager by typing shift + cmd + p and

Project Manager: List Projects to Open

Auto Rename Tag

This one doesn't do much. But what it does do is a huge help! For example, you’re working on a React project and you want to change your component MyApp to be YourApp. This extension will rename rename every ‘MyApp’ to ‘YourApp’ at the same time.

JavaScript (ES6) code snippets

Some es6 snippets you help you write code faster.

Output Colorizer

Add color to the internal terminal. Did I mention there is a built in terminal in VSC?!?

Babel ES6/ES7

You need this if you work with React.

Color Highlight

This will highlight your color variables inside CSS and JS. So, when you type something like #fff you’ll see a white colored highlight on it.

EditorConfig

If you follow me on Youtube you have surely seen how much I like this little tool. It makes your code more consistent for multiple users. What do I mean by this? It allows you to not worry so much about your Text Editor settings and will add some handy settings like indentation or trim whitespace. This is useful for teams because it can be painful to see some 4 space indents on one page and 2 space indents on another. This works on almost every code editor too, so if your friends don't use want to use your new favorite text editor, it will work for them too.

EditorConfig Generator

This will generate a .editorConfig file for you with some nice editor settings.

Eslint

Again, this is a tool I use on every project. This tool will help you to make your code better and let you know about errors before your code runs. For example, eslint will show you when you miss a semicolon or when you declare a variable but you never use it. But these errors depend on your eslint config.

PS I have created my own. You can install it from npm npm i -D eslint-config-equimper. This one is an extension of the Airbnb linter.

Link to mine

Flow Ide

If you are like me and you like Flow you need this tool. Less laggy than the nuclide one in Atom plus it's the better solution for VSC I’ve found.

Guides

Add some indent guide lines to your code. Much easier on the eyes.

Indent-Rainbow

Again, an extension to make your eyes happy when looking through lots of indented code.

Jumpy

This is an awesome extension, but I don't really use it. But for the those who don’t like using their mouse, this is something you need. It will help you navigate your file really quickly without using your mouse.

Rainbow Bracket

Another one that’s easy on the eyes.

React Native Tools

React-Native user? This tool it's for you.

Wakatime

This plugin will track your time spent in your text editor each week. It's like a Fitbit for a programmer. It will tell you which project you spend the most time on, which language you use the most and can even keep track of goals you set during the week.

My Editor

My color schema is One Monokai. For icons I use Material Icon Theme

My settings

You can add some of my settings to your.

My Snippets Packages

Link

Hidden Gem

One of my friends have started his own youtube channel where he talk about programming in general. Take a look at his channel

If you want to learn React-Native with NodeJS for your server side, I'm building a tutorial on youtube.

Build a Meetups App With React-Native and Node.JS

Testing your API with Postman

Sat, 28 Jan 2017 00:00:00 GMT

I'm sure you already know the famous tool call Postman. This is a super useful tool for test your API and looks at the response you get from your server. But I see a lot of people just using it as a manual tester. This is not wrong but you can get much better productivity with if you use some of Postman features.

Create your first Simple Test

First thing this is a simple controller in your app where you can fetch a unique post with is ID as params.

/posts/controller.js

import Post from './model';
/**
* GET BY ID
*/
export const fetchPostById = async (req, res) => {
  try {
    res.status(200).json({ post: await Post.findById(req.params.id) });
  } catch (e) {
    res.status(e.status).json({ error: true, message: e.message });
  }
};

/posts/routes.js

import { Router } from 'express';
import * as PostController from './controller';

const routes = new Router();

routes.route('/posts/:id').get(PostController.fetchPostById);

export default routes;

Now time to open Postman. In your left, you gonna see

a little folder with a plus sign. If you click there you can now create a collection.

Give a little name for your collection. For me, I'm using Postman-Tuto. With that collection, we make our life much easier to test route already create.

Add the route and the GET method in the main area. For me, I add

http://localhost:3000/api/v1/posts/588ce463f4741431c918a04b

cause I have already created a fake post.

Now when I click send I receive this.

Perfect the route is working and the controller + model do their job.

Write your first Postman test

If you click on Test right below the URL container you gonna see this

Now time to write some test. First thing in the right you can see a select menu with test already create by Postman. We can select one already

Status code: Code is 200

If you click send now we can see the test pass 1/1.

Now add the

Response body: JSON value check

again in your right snippets.

var jsonData = JSON.parse(responseBody);
tests["Post should have title of Title 1"] = jsonData.post.title === "Title 1";

Add this line and now click send.

This is the result.

Add more test

Now an example of a complete test for this routes.

tests["GET By Id Posts - Status code is 200"] = responseCode.code === 200;

var jsonData = JSON.parse(responseBody);

tests["Post should have title of Title 1"] = jsonData.post.title === "Title 1";

tests["Post should have id of 588ce463f4741431c918a04b"] = jsonData.post._id === "588ce463f4741431c918a04b";

tests["Should have no error"] = jsonData.error === false;

Time to save and add new one

Now in the top left, you can see a big Save button. Click on the arrow and save as. Give a name to this route.

you need to add it to your collection.

The runner

In the top left you can see the button Runner if you click it Postman open a new window. Select your collection in the dropdown.

If you click Start Run you can get this.

As you can see I add some new test for show how awesome this tool can be. You can also import your test run and give that to another dev in your team.

Last thing you can also export all your route if you click it in your collection. After the other dev just need to import it and he gets all your route. Now I start to export it in my postman folder inside my server so I can import it if I delete mine on my GUI.

Hope you like this little tutorial and you learn something new today :).

P.S You still need to run some test in your controller etc but with the Runner of Postman + the test etc that give you just much more confirmation.

Ressources

Docs of Postman

My goals for 2017

Fri, 06 Jan 2017 00:00:00 GMT

Intro

2016 was a big year for me. First thing, I start coding the 6 January 2016 so today is my first full year finish. Coming from an Army background this was one of the biggest moves of my life. I've always done a physical job and this one we all know is really more technical. I found by coding every day in the year "Yes 365days last year I have touched my PC and coded" that I love that more and more.

When I started that was really hard to be sure this is more than a passion. I was really not that good and everything was too much for me. I things the facts I'm french and everything is English didn't help me either. So after 1 big month of using Html and CSS I jump on the Ruby On Rails part. I follow a lot of tutorial on the internet where I make a clone of some app like Pinterest, Twitter, Airbnb etc.

In April 2016 I know at this time I want to do a career. So I join a BootCamp call Thinkful. That's was one my best moved so far. I meet one of the best programmer and more than that he was my mentor. His name is Ryan Lynch. This guy makes me understand the hard concept and make everything look easier. He pushes me on the Redux world and now I use that everywhere. Thank you, Ryan!

When I finish the boot camp I was struggling finding job. But I continue to work on my experience and continue to build stuff. At this time the only project has built was this little app. That's wasn't enough so I continue to build and put the commitment into my learning. With the help of the Thinkful team, I found my first as a freelance developer where I have built a full-stack application using React, Redux, React-Native, Meteor, Node etc.

In end November, I get a job at Thinkful where I help people with the React-Redux part of the course. I really like that, I learn much more by teaching. I liked helping people and this is a place where I'm happy to help the student understand react and redux much more. I know where we struggle and that's why I think that give me a good idea how I can help them.

In December, I start to challenge myself a bit more. The first thing I created a youtube channel. This thing was something I have to think for a long time but with my bad English + my experience I wasn't sure that was a good idea. But finally I really liked it and this is something I want to put energy this year. The second thing I start to restream myself on livecoding.tv. I start to stream almost the first day of my journey of learning code. Now I grow up a good audience and I think that push myself a bit more than doing nothing.

One thing too I'm proud for this year was my commitment on github. I contribute on some of the open source project.

One of my best choice this year was to challenge myself doing 12 apps in 12 weeks. Right now I have finished the first 3 apps.

That challenge myself so much, I learn stuff with this challenge so quickly and now that pushed me some time on a place I never been.

My goals for 2017

Get 500+ Subscribers on my youtube channel.
Post 25 videos at least on youtube.
Create 2 apps for my startup idea.
Get better as a Mentor and see student smile after graduating.
Get better and better on JavaScript.
Learn Golang or Elixir a bit more.
Wrote 30 posts on this blogs.
Create 3 tutorials and post it on Youtube and Udemy for free.
Create 1 awesome library for the community.
Contribute on at leat 3 open source project.
Get better in English
Start to learn Spanish
Read 10 books about business
Read 20 books about programming
Get 1500 points on StackOverflow (652 currently)

End word

So I hope you have big goals this year too. Don't hesitate to write a little hello in the chat and let me know what is your goal this year too.