DEV Community: Miguel

Mock isolated service in a React Application

Miguel — Tue, 25 Jan 2022 01:37:18 +0000

The term division to conquer was used throughout history in political and political ideals, consisting of the fragmentation of powers, thus, it is a strategy that aims to break or accompany between social structures and take them independently.

"Divide and Conquer. - Júlio César"

Hi guys, how are you today?

Based on the divide and conquer principle, i am writing this post to demonstrate how it is possible to isolate services in a react application and test them independently.

Step one: Understanding the structure

Adapters work as a bridge to the outside world, this is done through external functions or developed interfaces.

Services are a similar construct used by the repository pattern often used by the backend to build a superficial and literal layer between code and database.

Entities are interfaces and literal representations of the members of our application.

Step two: Building an adapter

import axios from "axios";

const api = axios.create({
  baseURL: process.env.API_BASE,
});

export default api;

/adapters/api.ts

The code above is very simple, we are just creating a new instance of axios and exporting it to the rest of the application.

Third step: Assembling the entity

The entity is just a type with its respective attributes.

export type TUser = {
  name: string;
  email: string;
};

/entities/user.ts

Last step: Finally the services

export const registerUser = (user: TUser) => {
  return api.post("api/user", user);
}

export const getUser = (id: number) => {
  return api.get(`api/user/${id}`, user);
}

/services/user.ts
Ui

Our ui is composed of two inputs and a button with their respective data-testid

<Input data-testid="inputName" />
<Input data-testid="inputEmail" />
<Button data-testid="submit" type="submit">Save</Button>

Writing the tests

First let's mock the service

import * as user from "/services/user.ts";

jest.spyOn(user, "registerUser").mockImplementation(() =>
   Promise.resolve({
      message: "created"
   })
);

The magic is in the code above, we are exporting the entire service file and telling spyOn to look at it as a function object

it("Must submit a new user", async () => {
  const { getAllByTestId } = render(<User />);

  const name = getAllByTestId("inputName")[0] as   HTMLInputElement;
  const email = getAllByTestId("inputEmail")[0] as HTMLInputElement;
  const submit = getAllByTestId("submit");

  fireEvent.change(email, { target: { value: "email@email.com" } });
  fireEvent.change(name, { target: { value: "Miguel" } });
  fireEvent.submit(submit);
  await waitFor(() => 
        expect(user.registerUser).toHaveBeenCalledTimes(1));
  });

In this case we expect our form to call our registration function at least once.

And we reached the end of the tests, the big point is in the import of the service that will be a mock. Take a good look at how the spy function works.

Time is very important, thanks for sharing a little bit of yours with me 😊.

How and why to use infer in typescript

Miguel — Wed, 20 Oct 2021 09:28:54 +0000

Hi everyone, how are you today? Hope you all are doing well!

Today I'm going to explain how hell works and why it's important in conditional structures in typescript. Initially the concept is relatively simple, but the implementation makes us question its real reason for use.

First, it is important to note that the use of hell is directly related to ternary conditions in the typescript. But why?

If we can infer T, G will be the result, if not, F will be the result

The purpose of inference is to test whether an inference is possible, see the example:

It turns out that when we use our custom type we will have never as an answer when trying to infer an object with no return.

Take one more example, if S cannot infer in the sentence pattern it will return never.

There is great power when using inference in conjunction with generics and conditional structures in typescript. They are very useful when in recursive conditional structures in typescript.

I tried to show you real use cases from hell and maybe you don't get the theory at first, but if you have any questions just send me a message and I'll be happy to answer.

Time is very important, thanks for sharing a little bit of yours with me 😊.

How does pick work in typescript ⛏️

Miguel — Mon, 09 Aug 2021 02:09:39 +0000

Hi everyone, how are you today? Hope you all are doing well!

Preface

Today we are going to understand how the pick utility works and how it is built!

Concepts

First, it is important to understand that the
Typescript is considered a
superset of Javascript, is responsible for adding static type definitions.

Types provide a way to describe the shape of objects, allowing TypeScript to verify that the code is working correctly.

To work

The pick utility builds a new type based on the set of properties chosen in the second generic position.See an example:

type Water = {
  hydrogen: number;
  oxygen: number;
};

type Electrolysis = Pick<Water, "hydrogen">;

const electrolysis: Electrolysis = {
  hydrogen: 2,
};

In this case, we are extracting hydrogen from the water type to create a new type, in this case electrolysis

This produces an exothermic reaction. In the case of hydrogen and oxygen, the energy released is almost impossible to control, and most often leads to an explosion.

But how does the pick do it?

First, we must understand what mapping functions are.

A mapped type is a generic type that uses a union of key properties to iterate through keys to create a new type.

See an example:

P will interact about id and name. T[P] returns the readonly type of iterated position.

keyof produces a string or numeric literal union of keys of type.

Deconstructing the pick utility

In this case we use a generic to capture the keys we want and restrict with extends, after that we use the mapping function to traverse all K (parameters passed to generic)!

this is magic! Time is very important, thanks for sharing a little bit of yours with me 😊.

How to create a custom many to many relationship in TypeORM

Miguel — Tue, 03 Aug 2021 01:23:36 +0000

Hi guys, how are you today? I hope you are fine!

Preface

Many-to-many relationships are quite common when you're developing any kind of app, from food stores to large inventory.

Most of the time this relationship is not simple and you need to add more information in the pivo table (table generated from the relationship). We will learn how to make this custom relationship using typeORM.

Concepts

First of all let's review some concepts:

The purpose of typeORM is to support JavaScript features that help you develop any type of application that uses databases - from small applications with a few tables to large-scale enterprise applications with multiple databases.

The many-to-many relationship infers that A can have many B and B can have many A. In other words, both sides can report a variety on the other side.

To work

After all the initial configuration of typeORM, we need to generate the models and migrations.

In this example, we will build heroes that can have different individualities.

We can create models with the following command:



typeorm  entity:create -n Hero

Our hero will have a name and skills. Put this in your model:




@Entity("heros")
class Hero {
  @PrimaryGeneratedColumn("increment")
  id: number;

  @Column({ length: 30 })
  name: string;

  @ManyToMany(() => Skill)
  @JoinTable({
    name: "hero_skills",
  })
  skills: Skill[];
}

export default Hero;

src/models/Hero.ts

and...



typeorm  entity:create -n Skill



@Entity("skills")
class Skill {
  @PrimaryGeneratedColumn("increment")
  id: number;

  @Column()
  skill: string;
}

export default Skill;

src/models/Skill.ts

And here comes the magic, let's create a model to reference the relationship!



typeorm  entity:create -n HeroSkills

And inside let's put:



@Entity("hero_skills")
class HeroSkills {

  @Column({ type: "text" })
  description: string;

  @Column({ type: "int" })
  episode: number;

  @PrimaryColumn({ type: "int" })
  skills_id: number;

  @PrimaryColumn({ type: "int" })
  heros_id: number;

  @OneToOne(() => Hero)
  @JoinTable()
  hero: Hero;

  @OneToOne(() => Skill)
  @JoinTable()
  skill: Skill;
}

export default HeroSkills;

src/models/HeroSkills.ts

In this case, we'll show you when a hero first demonstrated his individuality and what he looks like.

Let's do migrations now



typeorm migration:create -n CreateHeroTable



...
  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.createTable(
      new Table({
        name: "heros",
        columns: [
          {
            name: "id",
            type: "int",
            isPrimary: true,
            generationStrategy: "increment",
          },
          {
            name: "name",
            type: "varchar",          
          },
          {
            name: "skills_id",
            type: "int",          
          },
        ],
        foreignKeys: [
          {
            name: "Skills",
            referencedTableName: "skills",
            referencedColumnNames: ["id"],
            columnNames: ["skills_id"],
            onDelete: "CASCADE",
            onUpdate: "CASCADE",
          },
        ],
      })
    );
  }
...

src/database/migrations/CreateHeroTable.ts

Note that the foreign key relationship is explicit.

*In the case of a many-to-many relationship, it does not matter in which table the relationship will be explicit, as long as the relationship exists



....
  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.createTable(
      new Table({
        name: "skills",
        columns: [
          {
            name: "id",
            type: "int",
            isPrimary: true,
            generationStrategy: "increment",
          },
          {
            name: "skill",
            type: "varchar",
          },
        ],
      })
    );
  }
...

src/database/migrations/CreateSkillsTable.ts

Now let's go to the relational migration:



typeorm migration:create -n CreateHeroSkillsTable



...
 await queryRunner.createTable(
      new Table({
        name: "hero_skills",
        columns: [
          {
            name: "id",
            type: "int",
            isPrimary: true,
            generationStrategy: "increment",
          },
          {
            name: "description",
            type: "text",
          },
          {
            name: "episode",
            type: "int",
          },
          {
            name: "heros_id",
            type: "int",
          },
          {
            name: "skills_id",
            type: "int",
          },
        ],
        foreignKeys: [
          {
            name: "Hero",
            referencedTableName: "heros",
            referencedColumnNames: ["id"],
            columnNames: ["heros_id"],
            onDelete: "CASCADE",
            onUpdate: "CASCADE",
          },
          {
            name: "Skill",
            referencedTableName: "skills",
            referencedColumnNames: ["id"],
            columnNames: ["skills_id"],
            onDelete: "CASCADE",
            onUpdate: "CASCADE",
          },
        ],
      })
    );
...

And finally run:



typeorm migration:run

If all goes well, all tables will be created with their respective relationships!

Time is very important, thanks for sharing a little bit of yours with me 😊.

Deploy your Vue aplication in less than 5 minutes.

Miguel — Mon, 05 Apr 2021 15:01:10 +0000

Begin

Hey guys, performing a deploy tends to be a task commonly portrayed as problematic. Based on that, I wrote this article teaching how to do the same without major complications and in a short time.

First of all it is important that you have an account at:

Starting with git.

This article takes into account that you already have an instantiated vue project and just wanted to deploy it.

Create an empty Git repository.

$ git init

After creating the project repository, we will create a connection between it and our local project.

$ git remote add origin https://github.com/user/repo.git

In your project, create the static.json file with the following content:

{
    "root": "dist",
    "clean_urls": true,
    "routes": {
      "/**": "index.html"
     }
}

Change these lines in the package.json file:

| change the line server to start

  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

After that manages the build in the cli of your application:

$ yarn run build

make sure you have removed the /dist directory from your .gitignore file

All set, let's upload our application to github with the following commands:

$ git add .
$ git commit -m "build: heroku config"
$ git push

Heroku config

Create a app in heroku.

Select the github option and search for your project:

In the settings tab, press add buildpacks and enter the url:https://github.com/heroku/heroku-buildpack-static

Buildpacks provide framework and runtime support for apps. Buildpacks typically examine your apps to determine what dependencies to download and how to configure the apps to communicate with bound services.

Lastly...

Set enable automatic deploys and deploy branch.

If everything went well, the information that the deployment was successful will appear on your dashboard and your app will be ready for use.

Time is very important, thanks for sharing a little bit of yours with me 😊.

Produtividade no front-end com a utilização de mocks.

Miguel — Fri, 02 Apr 2021 22:25:36 +0000

Durante o processo de desenvolvimento de uma aplicação é provável que em algum momento você irá desejar realizar determinado teste de uma feature (funcionalidade do sistema que entrega um benefício ou resolve um problema) que ainda não foi desenvolvida pelo back-end do projeto.

Todo esse processo é pensado ignorando a utopia, onde a logística de um projeto funciona perfeitamente e as tarefas são distribuídas de forma que o desenvolvimento de todas as partes do mesmo ensamblem, porém o universo é entropia, portanto comumente são utilizados mocks para realizar esse teste de integração.

Mas o que é um mock?

Um mock é a abstração do comportamento de uma entidade que ele está representando. Baseado no comportamento citado acima, o comportamento pode representar o retorno de um api rest, uma vez que a mesma ainda não foi desenvolvida, mas pode-se considerar um padrão de retorno.

Como criar um mock?

mockapi.io

Hodiernamente existem diversas técnicas e tecnologias para realizar a construção de uma abstração de um objeto. O mockapi.io é um desses serviços que provem diversas funcionalidades para construção de um mock, entre elas está a geração de dados falsos para simular de forma semelhante informações reais.

Após toda configuração, o mockapi gera um endereço para vocês realizar os teste baseados em uma api rest.

curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X GET https://6067732f98f405001728edf3.mockapi.io/users/
HTTP/1.1 200 OK
Server: Cowboy
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: X-Requested-With,Content-Type,Cache-Control,access_token
Content-Type: application/json
Content-Length: 5479
Etag: "-1074860086"
Vary: Accept-Encoding
Date: Fri, 02 Apr 2021 21:36:29 GMT
Via: 1.1 vegur

[{"id":"1","createdAt":"2021-04-02T16:50:39.873Z","name":"Rudolph Ryan","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/jacobbennett/128.jpg"},
{"id":"2","createdAt":"2021-04-02T02:42:21.504Z","name":"Alvera Predovic","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/paulfarino/128.jpg"},
{"id":"3","createdAt":"2021-04-01T23:53:59.741Z","name":"Jedediah Kirlin","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/vanchesz/128.jpg"},
{"id":"4","createdAt":"2021-04-02T01:43:26.824Z","name":"Twila McDermott Jr.","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/simobenso/128.jpg"},
{"id":"5","createdAt":"2021-04-02T17:12:51.473Z","name":"Eli Feil","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/rez___a/128.jpg"}]

O mockapi é extremamente competente no âmbito que se compromete a resolver os problemas, porém sua versão gratuita lhe permite a criação de apenas uma rota.

json-server

Diferente do mockapi.io, o json-server é um pacote do npm que estimula a criação de um mock baseado em um arquivo json.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Utilizando:

json-server --watch db.json

Considerações

Ambos os serviços são de suma importância caso você deseja solucionar os problemas citados acima. Espero de coração que esse artigo seja útil no seu âmbito profissional e pessoal. O tempo é muito importante, obrigado por compartilhar um pouco do seu comigo 😊.

The Guard Statement: Guard clause ou Early return.

Miguel — Mon, 18 Jan 2021 20:46:06 +0000

Estruturas condicionais são sem duvida um dos assuntos mais importantes no âmbito computacional, indiferentemente do nível ou paradigma empregado. Apesar de possuir uma grande responsabilidade no desenvolvimento de aplicações, a utilização de profusas estruturas condicionais pode comprometer a legibilidade do código e aumentar a carga cognitiva do desenvolvedor responsável.

"Decisões são importantes."

O que é Guard Clause? 🤔

Guard clause ou Early return são termos utilizados ao arquitetarmos uma estrutura sequencial de código condicional, normalmente reconhecido como pré condição.

Comumente podemos construir Guard clauses respeitando 3 padrões:

Processa os parâmetros e retorna caso algum deles não respeite nossa regra de negócio;
Verifica o estado de um objeto e retorna um valor, sujeitado-se ao estado passado;
Elimina casos triviais.

Esses padrões são baseados na filosofia de "Handle errors in the same place where you detected them(Trate os erros no mesmo local onde os detectou)."

Como desenvolver um Guard Clause? 🧑🏻‍💻

Imagine um cenário em que estamos construindo uma batalha medieval e nosso guerreiro precisar lutar, porem para lutar nosso guerreiro precisa de determinados requisitos.



const getWarriorStatus = ({status}) => {
  let responseWarrior;
  if (status.stamina < 10){
    responseWarrior = isExhausted();
  }
  else {
    if (!status.equipped){
      responseWarrior = equip();
    }
    else {
      if (!status.blessed){
        responseWarrior = toBless();
      }
      else{
        responseWarrior = battle();
      }
    }
  }
  return responseWarrior;
}

Olhando o código assim podemos concluir que o mesmo não se torna escalável caso o guerreiro comece a conquistar novo atributos.



const getWarriorStatus = ({status}) => {
  if (status.stamina < 10){
    return isExhausted();
  }
  if (!status.equipped){
    return equip();
  }
  if (!status.blessed){
    return toBless();
  }
  return battle();
}

Aplicando os conceitos de Guard Clause conseguimos transformar o código outrora obsoleto em um produto agradável e escalável.

Obrigado por me deixar fazer parte do seu tempo! 🥰

Referências:

Vue composition api: Guia prático para alquimistas.

Miguel — Wed, 30 Dec 2020 00:09:21 +0000

Bom dia, site.

Hoje venho compartilhar um pouco do conhecimento adquirido nas ultimas semanas estudando a nova api do vue, a VUE COMPOSITION API.

Sumário:

1. Introdução: Boas vindas, jovem mago;
2. Setup(): O cérebro do componente;
2.1 JSX;
2.2 Capturando Props;
2.3 Context;
3. Reatividade: A lei da Alquimia;
3.1 Reactive;
3.2 Ref;
3.3 Reactive ou ref?;
4. Computed: O watch que observa diferente;
5. ReadOnly: Simple;
6. Watch: O olhar sanguinário do vigia;
7. Ciclos de vida;

Introdução, O problema dos mixins.

Boas vindas, jovem mago.

Primeiramente deve-se entender o processo que ocasionou o desenvolvimento da composition api. Apesar das inúmeras features da segunda versão do vue, o mesmo ainda possuía uma defasagem problemática em relação ao encapsulamento de código de forma performática utilizando mixins.

É provável que o instanciamento de dois ou mais mixins não possam ser utilizados de forma isócrona, por exemplo, se ambos mixins utilizam o método foo(), o método será interrompido pois o método remanescente irá sobrescrever o precedentemente.

Harmonizar centenas de funções em projetos que dependem de ser altamente escaláveis pode ser um grande problema, pois você deve refatorar o mixin e depois realizar o mesmo processo em todos os componentes que implementam o mesmo.

Esse é apenas um dos nêmesis que o composition api foi forjado para resolver, veremos mais nos próximos tópicos desse artigo.

Setup(): O cérebro do componente.

Considere o método setup como o cérebro do componente, pois é a partir do mesmo que iremos definir os demais métodos e instanciaremos nossas variáveis, não ficou muito claro ainda, não é mesmo? Sem problemas, veja a imagem abaixo:

Considerando o tempo de execução da aplicação, o método setup() se encontra no ciclo beforeCreate().

Observe que o objeto mage não é reativo, veremos mais sobre reatividade no próximo capitulo.

Acessando as props de um componente.

Podemos acessar as propriedades de um componente através do primeiro parâmetro de do método setup:

Não force a desestruturação das propriedades pois você perderá a reatividade e receberá um erro no console e seu componente não será montado.

Para encerrar esse capítulo precisamos falar um pouco sobre o context, que é o segundo parâmetro recebido por setup(), em suma, o context obtêm todo objeto de instancia previamente exibida pelo this da segunda versão do vue.

retorno fornecido pelo context:

attrs: (...)
emit: (...)
expose: exposed => {…}
props: (...)
slots: (...)

Uma vez que setup() é chamado antes do contexto, o this como conhecemos não está disponível!

Reatividade: A lei da Alquimia.

Considero essa a mudança mais considerável para a versão antecedente do vue, outrora, utilizávamos a propriedade data como mecanismo de definição de valores reativos.

Existem algumas formas de transformar uma variável comum, em uma variável reativa:

Utilizando reactive , pegamos um objeto e retornamos um proxy reativo do original.

import { reactive } from 'vue'
  export default {
    setup() {
      const mage = reactive({
        type: 'fire',
        strong: 8
      })

      const changeTypeOfMage = () => mage.type = 'water'

      return {
        mage,
        changeTypeOfMage
      }
    }
  }

Nota-se que retornamos o método que muda o type do nosso objeto mage, uma vez que o método será utilizado dentro do jsx, como observamos nos capítulos anteriores.

Se você deseja transformar um tipo de dado primitivo em uma propriedade reativa, utilize o hook ref.

import { ref } from 'vue'
  export default {
    setup() {
      let isMage = ref(true)
      const notMage = () => isMage.value = !isMage.value;
      return {
        isMage,
        notMage
      }
    }
  }

Quando usar reactive e quando usar ref?

Vamos para lei da alquimia geral, tenha pretensão de usar ref para tipos primitivos, como: String, Number, BigInt, Boolean, Symbol, Null e Undefined. Para objetos onde a teremos uma deep reactive, utilize reactive.

Computed: O watch que observa diferente.

Assim como o computed da versão anterior, pense em uma variável que retorna uma função, a diferença dessa vez é que o computed do vue composition api retorna 2 métodos: o get() que retorna uma função com o dado imutável e não reativo, e o método set(), que consegue mutar essa regra e mudar os valores contidos no retorno do computed;

<template>
  <p>Name: {{mage.name}}</p>
  <p>Type: {{mage.type}}</p>
  <p>Strong: {{mage.strong}}</p>
  <p>Status: {{status}}</p>
  <button @click="enchant">enchant armor</button>
  <button @click="disenchant">disenchant armor</button>
</template>

<script>
<template>
  <p>Name: {{mage.name}}</p>
  <p>Type: {{mage.type}}</p>
  <p>Strong: {{mage.strong}}</p>
  <p>Status: {{status}}</p>
  <button @click="enchant">enchant armor</button>
  <button @click="poison">poison armor</button>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const mage = reactive({
      type: 'fire',
      strong: 4,
      name: 'Black Mage',
    })

    const status = computed({
      get: () => mage.strong > 7 ? 'stronger' : 'weak',
      set: (value) => mage.type = value
    })

    const enchant = () => mage.strong = mage.strong + 4
    const poison = () => {
      mage.strong = mage.strong - 4;
      status.value = 'poisoned'
    }

    return { mage, status, enchant, poison }
  },
};
</script>

Observe o caso acima, declaramos um objeto inferindo que ele seja uma mago e que possua tais atributos, o computed está ali para observar o nível de força de nosso mago e mudar seu status caso ele se torne fraco ou forte, para pegar esse detalhe utilizamos seu método get() como explicado acima, porem por default o status se torna imutável e não reativo, para isso utilizamos o set() definido no computed para atribuir um novo status ao nosso mago. Ainda ficou com alguma dúvida? copie e execute o código, verá que na prática irá fazer mais sentido!

Readonly: Literalmente isso.

O hook readonly pega um objeto (reativo ou simples) ou um ref e retorna um proxy somente leitura para o original. Um proxy somente leitura: qualquer propriedade aninhada acessada também será somente leitura.

Readonly: Watch: O olhar sanguinário do vigia.

O watchEffect é uma novidade também, porem com grandes poderes vem grandes responsabilidades, a utilização watcheffect pode ter N aplicação uma vez que ela se transforma qualquer dado inferido no setup como um dado observável.

Considere o código construído no exemplo do computed, caso você queira observar a mudança constante do nível de força de nosso mago você adicionaria o código abaixo:

watchEffect(() => console.log(mage.strong));

Comumente ao ciclo de vida do componente, o watchEffect é desfeito toda vez que nosso componente morre.

Ciclos de vida.

Apesar da mudança de alguns nomes, grande parte dos hooks ainda possuem suas respectivas funções, exceto o setup() e dois novos hooks: onRenderTracked e onRenderTriggered.

Antigo	Novo
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

-Como utilizar os hooks?

const Mage = {
  setup() {
    onMounted(() => {
      console.log('Drop!')
    })
    onUpdated(() => {
      console.log('New Level!')
    })
    onUnmounted(() => {
      console.log('Dead!')
    })
  }
}

Em minha concepção essa são as mudanças fundamentais realizadas na nova versão do vue, em breve postarei a parte 2 e nela irei explicar um pouco sobre injeção de dependência, vue3 com typescript, unity testes e alguns tips de reatividade.

Obrigado por ler até aqui, o objetivo desse post é deixar a sintaxe e esclarecer alguns pontos sobre o vue composition api, não deixe de entrar em contato ou escrever um comentário caso eu tenha errado em algum momento.

PARTE 2: undefined

Como expor seu localhost para teste em um cenário de desenvolvimento.

Miguel — Sat, 19 Dec 2020 22:30:56 +0000

Bom dia site,

Venho hoje compartilhar uma ferramenta que outrora utilizava para outros fins acadêmicos e que hoje utilizo para compartilhar informações como minha equipe de desenvolvimento, como o preview de uma aplicação local ou o compartilhamento de um banco de dados através de uma api sem a realização prévia de um deploy.

Isso tudo é possível através de uma ferramenta chamada ngrok, o mesmo tem como finalidade criar proxy reverso que estabelece um túnel seguro de um localhost para um serviço da web, como a captura e analise de todo o tráfego no túnel para inspeção e reprodução.

Mas e o firewall?

Como o ngrok é baseado em tuneis, a conexão preliminar é feita sempre do lado do cliente criando uma conexão tcp, onde muitos soquetes lógicos são criados por meio de conexões de soquete físicas, essa técnica é chamada Multiplexing.

Como criar um túnel para minha aplicação?

Imagine o determinado cenário de uma pequena api com uma rota get:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('ngrok server!')
})

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`)
})

Nota-se que nosso servidor está escutando a porta 3000, guarde essa informação pois ela é importante.

Bom, agora precisamos baixar o ngrok para realizar a exposição.

Let's start with alchemy 🧙🏽‍♂️

Entre no site oficial da ferramenta ngrok e crie uma conta, esse processo é bem simples uma vez que ela oferece suporte de inscrição pelo github e demais serviços.

Após o registro, você deve estar vendo uma tela parecida com essa:

Faça o download para seu ambiente de uso.

Por padrão a ferramenta vem compactada e se você estiver usando linux pode realizar o processo de descompactação com o seguinte comando:

unzip /path/to/ngrok.zip

Defina as permissões do arquivo com:

chmod +x ngrok

e execute o mesmo com a hash disponível no seu perfil do site oficial.

./ngrok authtoken _SUA_HASH_

Por fim, vamos realizar o processo de exposição com a ferramenta, como nossa aplicação está rodando na porta 3000 o processo terá que ser feito da seguinte maneira:

./ngrok http 3000

E voilà.

Agora temos nosso servidor prontinho e exposto para toda web!

Considerações finais

Esse é meu primeiro post aqui, desde já, peço desculpa caso tenha errado em algum momento. Estou aberto a criticas e podem me acompanhar ou bater uma prosa através das minhas redes sociais: