Forem: Alan Pereira

Iniciante: Abrindo seus projetos com VSCode através do terminal

Alan Pereira — Thu, 27 Jul 2023 04:39:15 +0000

Muitas pessoas que estão iniciando na programação e utilizam o VSCode ainda abrem os seus projetos da maneira "lenta", indo pelo menu de Arquivo e selecionando uma pasta para abrir.

No entanto, a medida que vamos tendo mais projetos e trabalhando cada vez mais com programação, essa acaba sendo uma maneira menos prática, e como desenvolvedores nós sempre estamos tentando encontrar uma maneira de fazer as coisas melhores, por mais simples que sejam.

Por isso, uma das formas mais práticas de se abrir diferentes projetos pelo VSCode é através da linha de comando, e hoje vou te mostrar como.

Disclaimer: Fiz este tutorial para usuários de Windows, se você usa outro sistema operacional, o método é similar mas provavelmente será diferente em algum ponto.

Utilizando comando code

O comando code permite abrir um arquivo ou pasta no terminal, para isso, basta digitar code caminho_do_arquivo_ou_pasta e o VSCode irá abrir automaticamente no arquivo/pasta selecionado. Neste sentido, o que eu costumo fazer é navegar via Explorer até a pasta que eu quero, e só assim a partir daí abrir um terminal na pasta desejada (usando shift + botão direito e abrindo o Power Shell). A partir daí eu aplico o comando code .. Veja um exemplo:

Mas eu tenho o comando code?

Se você ainda não adicionou o comando do VSCode pelo seu terminal ou não sabe se o adicionou, para verificar é muito simples. Abra uma pasta de um projeto qualquer e tente digitar o comando code . no terminal.

Caso você não tenha o comando instalado no seu terminal, uma mensagem de erro deve aparecer. Segue um exemplo usando o Windows:

Adicionando o comando code

Existem algumas maneiras de instalar esse comando para ser usado direto no seu terminal. A primeira dela é apresentada da forma mais óbvia: no próprio instalador. Quando instalamos o VSCode (pelo menos no Windows, não sei nos outros SO), é só você marcar a opção “Add to path”.

Desta forma, da próxima vez que você abrir o seu terminal de preferência, o comando code estará pronto para ser usado.

Caso esse comando não apareça: Fiz alguns testes e pesquisas, e pelo Windows, parece que o VSCode não fornece mais a opção de adicionar esse comando ao path posteriormente. Portanto recomendo salvar todas as suas configurações na nuvem através da sincronização de opções, permitindo que você desinstale o VSCode e reinstale-o sem perder nada e ativando a opção do passo anterior no instalador.

Finalmente, desta forma você agora conseguirá abrir os seus arquivos e projetos de forma muito mais rápida e eficiente no VSCode. E aí, sabia dessa? Se foi útil, deixa um ❤️

Adicionando o Prettier ao seu projeto JavaScript/TypeScript

Alan Pereira — Fri, 20 Jan 2023 00:23:19 +0000

Uma das maiores dificuldades de quem está iniciando em programação é o uso correto de nomenclaturas, regras de sintaxe e desatenção a detalhes que podem acabar sacrificando o seu tempo de estudo em busca de correções de escrita e erros de digitação.

Felizmente, existe uma maneira de facilitar a sua vida para que a sua IDE faça essas correções automaticamente, salvando um tempo precioso de digitação. E a ferramenta para isso é o Prettier.

Através dele, podemos configurar regras específicas de como a sintaxe do seu código deve se comportar, corrigindo automaticamente eventuais erros e criando uma padronização, independente de quem esteja trabalhando no projeto.

Vejamos um exemplo. Podemos estabelecer as seguintes regras:

{
    "semi": true, // As declarações devem terminar com semicolon (ponto e vírgula ;)
    "singleQuote": true, // Strings devam utilizar por padrão aspas simples
}

Com estas regras, a partir da declaração seguinte, o Prettier poderá fazer a formatação automática do seu código:

const variavelAntes = "variável antes do Prettier"

const variavelDepois = 'variável depois do Prettier';

Podemos utilizar o Prettier com uma certa profundidade, trazendo um leque de regras que irá nos ajudar a deixar nosso código padronizado e, como o próprio nome sugere, mais bonito. Então vamos botar a mão na massa e configurar essa belezinha no nosso projeto.

Pré-requisitos

VSCode: Usaremos as configurações do Prettier no VSCode, então fique esperto para configurar caso você utilize outra IDE
Um projeto Node com package.json em Javascript ou Typescript
npm ou yarn instalado

Instalação

Adicionaremos o Prettier como uma dependência de desenvolvimento. Podemos fazer isso utilizando o comando npm:

npm install -D prettier

Ou yarn:

yarn add -D prettier

Dica: Para evitar conflito na instalação de pacotes, sempre use somente um dos dois comandos. Evite misturar o yarn e o npm no seu projeto pois cada gerenciador de pacotes irá criar o seu próprio arquivo lock.

Em outras palavras, se escolher o yarn, evite ter o arquivo package-lock.json no projeto (pode deletar sem medo). Se escolher o npm, evite ter o arquivo yarn.lock.

Caso o Prettier tenha sido adicionado com sucesso no seu projeto, seu arquivo package.json deve ter o pacote do Prettier nas dependências de desenvolvimento:

"devDependencies": {
  "prettier": "^2.8.3"
}

Setup inicial do Prettier

Agora que nos certificamos de ter o pacote instalado no nosso projeto, inseriremos as primeiras regras de sintaxe. Para isso, devemos criar um arquivo chamado .prettierrc na raíz do projeto.

Vamos inserir algumas regras básicas nele:

{
    "semi": true,
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 2,
    "bracketSpacing": true
}

O que cada uma dessas regras fazem?

semi - Insere ponto e vírgula ao final de declarações
singleQuote - Strings devem ser incluídas por padrão em aspas simples
printWidth - Especifica o tamanho máximo de linha no código
tabWidth - As tabulações terão por padrão um espaçamento de tamanho 2
bracketSpacing - Valores dentro de chaves ({}) virão espaçados

Você pode conferir essas e outras regras nas documentações do Prettier

Usando o Prettier através da linha de comando

Já temos tudo pronto para testar o funcionamento do Prettier. Se você está adicionando o Prettier a um projeto já existente, você pode rodar o comando diretamente e ver se ele funciona de acordo com as regras que você estabeleceu. Mas caso esteja começando um projeto novo e fazendo o setup do Prettier, iremos testar criando um arquivo em src/index.js.

É um arquivo simples para testar as configurações do Prettier. Iremos inserir apenas o seguinte código:

const testPrettier = {mensagem: "isso é um teste do prettier"}

Para que o Prettier faça sua mágica, adicionaremos o comando de correção no nosso arquivo package.json. Caso não haja o objeto scripts, use o exemplo abaixo para adicionar no seu package.json. Mas caso já possua, só adicione o comando format:

{
    "scripts": {
        ...
        "prettier-format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' --config ./.prettierrc"
    }
}

Agora execute o comando usando o seu gerenciador de pacotes:

npm:

npm run prettier-format

yarn > yarn prettier-format

Olhando novamente para o arquivo src/index.js, a nossa variável deverá estar formatada assim:

const testPrettier = { mensagem: 'isso é um teste do prettier' };

Voilá! Temos nosso código formatado do jeitinho que queríamos. Mas não acaba por aí porque o tópico a seguir vai mudar a sua vida!

Usando o Prettier através do VSCode diretamente

Até então, o que foi feito aqui já é uma grande ajuda em termos de correção de sintaxe e padronização de código. Mas a maior vantagem do Prettier vem agora: A integração com o VSCode!

Através dela, o código será formatado automaticamente sem a necessidade do uso de comandos. Isso mesmo. Então vamos por a mão na massa e ver o funcionamento na prática.

O primeiro passo para fazer essa integração é ir na aba de extensões do VSCode (penúltimo ícone ou apenas Cmd + Shift + X ou CTRL + Shift + X) e procurar pela extensão do Prettier. Basta instalar e ela será adicionada ao seu VSCode.

O segundo passo é adicionar o Prettier como o editor padrão do VSCode. Para isso abra o menu arquivo>preferências>configurações

No campo de busca procure por formatter (ou formatador) e selecione o Prettier como formatador padrão do VSCode:

Por último, faremos com que o Prettier execute nossas regras automaticamente toda vez que salvarmos um arquivo ou colarmos um código no nosso projeto. Para isso, abriremos o arquivo de preferências em JSON do VSCode através do comando CTRL + Shift + P e selecionaremos para abrir o arquivo JSON:

Neste arquivo, adicionaremos duas configurações novas: O editor.formatOnSave e o editor.formatOnPaste, como no exemplo abaixo:

{
    ...
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true
}

Se tudo der certo, seu Prettier estará integrado com o VSCode, lendo as regras do arquivo .prettierrc na pasta raíz do seu projeto e aplicando essas regras toda vez que você salvar um arquivo ou colar um código.

Bônus

No arquivo JSON de preferências você pode determinar regras para linguagens específicas. Por exemplo, desativar a correção ao salvar e colar para arquivos typescript, por exemplo:

{
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.formatOnPaste": false,
        "editor.formatOnSave": false
    }
}

Conclusão

Espero que este artigo sirva de guia para uma primeira configuração do prettier e que agora seu código se torne mais legível e bonito!

Teve algum problema? Comenta aqui em baixo!

Se este link foi útil pra você ou você quer apoiar o meu trabalho,
deixa seu like ou estrelinha aí e compartilhe ❤️

Links úteis

Entendendo Callbacks no JavaScript

Alan Pereira — Wed, 26 Oct 2022 13:18:53 +0000

Escrevi um artigo sobre Promises e Async / Await, recentemente, na intenção de contribuir com a comunidade BR e solidificar meus conhecimentos. No entanto, é impossível falar de Promises sem antes desenrolar um assunto fundamental: As Callbacks. Se você tem a intenção de entender melhor como funciona o JavaScript de forma assíncrona, este é o primeiro passo.

Então vamos nessa? Simbora.

O funcionamento do JavaScript

Imagine uma sequência de instruções qualquer, como uma receita de bolo. Para fazer o bolo, basta seguirmos cada passo dessa receita na ordem correta, certo?

1. Misturar as gemas, açúcar e margarina
2. Acrescentar leite, fermento e farinha de trigo
3. Despejar a massa numa forma
4. Assar a 180ºC por 40 minutos

O JavaScript funciona de maneira similar. Uma sequência de instruções do algoritmo será executada na ordem de cima para baixo.


function primeiraMensagem () {
    console.log('Essa mensagem vem por primeiro');
}

function segundaMensagem() {
    console.log('Essa mensagem vem por segundo');
}

primeiraMensagem();
segundaMensagem();

// Output:
// Essa mensagem vem por primeiro
// Essa mensagem vem por segundo

A semântica do Callback

É comum que a execução de código siga uma determinada ordem. Vejamos um outro exemplo. Dessa vez utilizaremos a função setTimeout para fazer com que a primeira mensagem demore 3 segundos para ser exibida. Vamos ver o resultado?


function primeiraMensagem () {
    console.log('Essa mensagem vem por primeiro');
}

setTimeout(primeiraMensagem(), 3000);

Output

Você tem alguma ideia do que pode ter causado este erro? Na verdade, eu gostaria que você observasse duas coisas:

A função primeiraMensagem é executada automaticamente, sem a espera dos 3 segundos
A função setTimeout lança um erro de callback inválida.

Quando executamos primeiraMensagem(), com os parênteses no final, faz com que a função seja Invocada. Ou seja, ordenamos a execução imediata da mesma. E quando o setTimeout procurou o que havia no primeiro parâmetro, não encontrou nada (recebeu undefined), já que primeiraMensagem já havia sido executada.

Para entender completamente, vamos para um exemplo parecido, mas dessa vez retirando os parênteses no final de primeiraMensagem().


function primeiraMensagem () {
    console.log('Essa mensagem vem por primeiro');
}

setTimeout(primeiraMensagem, 3000);

Output

Voilá! O que entendemos disso? No cenário acima existe uma diferença semântica na função primeiraMensagem de passá-la como argumento, sem os parênteses. Estas são as famosas callbacks. Ou seja, ela não está sendo invocada diretamente, e sim sendo passada como parâmetro para que outra função, a setTimeout, a chame (CALL) novamente (BACK).

Neste segundo exemplo, podemos passar uma função como callback para que a função recebeCallback possa chamar (e executar) essa função dentro dela.

function recebeCallback(callbackRecebida) {
    const numeroAleatorio = Math.floor(Math.random() * 101);

    callbackRecebida(numeroAleatorio);
}

function imprimeValor(valorParaImprimir) {
    console.log(valorParaImprimir);
}

recebeCallback(imprimeValor);

Output

A função imprimeValor será responsável somente por imprimir o valor que recebe como parâmetro.
A função recebeCallback será invocada recebendo imprimeValor como callback e assim seguirá:
1. Gerar um número aleatório de 1 a 100;
2. Invocar a callback imprimeValor recebida como parâmetro que consequentemente imprimirá no console o número aleatório

Usando o JavaScript assíncrono com as callbacks

Aprendemos como passar funções como callbacks, agora vamos entender a maior vantagem das callbacks: a utilização do Javascript de maneira assíncrona!

O próximo exemplo reutiliza as duas funções do início do artigo primeiraMensagem() e segundaMensagem(). Na função primeiraMensagem() configuramos uma espera de 3 segundos para execução e logo em seguida iremos chamar a função segundaMensagem(). Qual deverá ser o output? Vamos ver.


function primeiraMensagem () {
    console.log('Essa mensagem vem por primeiro');
}

function segundaMensagem() {
    console.log('Essa mensagem vem por segundo');
}

setTimeout(primeiraMensagem, 3000);
segundaMensagem();

// Output:
// Essa mensagem vem por segundo
// ... 5 segundos depois
// Essa mensagem vem por primeiro

Output

O que aconteceu? Se o código é sempre executado de cima para baixo, por que o JavaScript não esperou que a primeira mensagem fosse exibida antes da segunda?

Neste caso o JavaScript leu o código corretamente, executou a ação dos 3 segundos para exibir a mensagem e continuou a execução de forma síncrona do restante do código. Ou seja, ele leu setTimeout, mandou a execução acontecer e continuou a ler a próxima linha de código que neste caso foi segundaMensagem().

Mas esse não é o output que queríamos, certo? Queríamos que segundaMensagem() fosse executada somente após primeiraMensagem(). E se fizéssemos uma modificação? Vamos incluir segundaMensagem() como callback de primeiraMensagem() e fazer com que essa callback seja executada 2 segundos depois da execução da primeira.


function primeiraMensagem(callback) {
    console.log('Essa mensagem vem por primeiro');

    setTimeout(callback, 2000);
}

function segundaMensagem() {
    console.log('Essa mensagem vem por segundo');
}

setTimeout(primeiraMensagem(segundaMensagem), 3000);

Agora sim, desta forma segundaMensagem() só será executada 2 segundos após a execução de primeiraMensagem(). Vamos para o output?

Output

Ué, o erro de undefined novamente? Se olharmos com atenção notaremos que cometemos um erro fatal. Ao passarmos segundaMensagem como callback de primeiraMensagem, abrimos os parêtenses de primeiraMensagem fazendo com que essa seja executada imediatamente e deixasse de ser passada como callback.

Então como fazer com que ainda que passando segundaMensagem como parâmetro, consigamos manter primeiraMensagem como callback? Neste caso usaremos as funções anônimas, também conhecidas como arrow functions.

Uma rápida explicação de função anônima

Escreverei um artigo em mais detalhes sobre funções anônimas em breve, mas por enquanto só entenda que:

function funcaoNaoAnonima() {
    console.log('Este é um exemplo de uma função não anônima');
}

Pode ser transcrita também da seguinte forma:

() => console.log('Este é um exemplo de função anônima');

De volta ao assunto.

Ao criar uma função anônima que tem como única utilidade retornar a invocação de primeiraMensagem, podemos manter primeiraMensagem em sua forma de callback.


function primeiraMensagem(callback) {
    console.log('Essa mensagem vem por primeiro');

    setTimeout(callback, 2000);
}

function segundaMensagem() {
    console.log('Essa mensagem vem por segundo');
}

setTimeout(() => primeiraMensagem(segundaMensagem), 3000);

Output

Agora sim! Neste caso a função anônima será a chave para destrancarmos o poder das callbacks. Para mergulhar um pouco mais afundo nessa maravilhosa funcionalidade, iremos adicionar um último degrau de complexidade em nossos exemplos. Dessa vez faremos com que segundaMensagem também receba um parâmetro. Neste caso será a mensagem que gostaríamos de imprimir no console.

Primeiro vamos escrever da forma "errada", para entendermos a correta.

function primeiraMensagem(callback) {
    console.log('Essa mensagem vem por primeiro');

    setTimeout(callback, 2000);
}

function segundaMensagem(mensagem) {
    console.log(mensagem);
}

setTimeout(() => primeiraMensagem(segundaMensagem('Essa mensagem vem por segundo')), 3000);

Não precisamos nem executar o código acima para vermos o erro de passarmos segundaMensagem() com os parênteses, estaremos dando uma ordem de execução e desestruturando a callback. Neste caso também usaremos a função anônima para permitir que passemos um parâmetro dentro de segundaMensagem().

function primeiraMensagem(callback) {
    console.log('Essa mensagem vem por primeiro');

    setTimeout(callback, 2000);
}

function segundaMensagem(mensagem) {
    console.log(mensagem);
}

setTimeout(() => primeiraMensagem(() => segundaMensagem('Essa mensagem vem por segundo')), 3000);

Output

O problema do uso das Callbacks: O Callback Hell

Através das callbacks, somos capazes de manipular a ordem de execução das funções. Até aqui os exemplos foram simples e didáticos. No entanto, o mundo real é mais complicado e algumas aplicações se tornam complexas.

O uso das callbacks em projetos complexos cria um problema de legibilidade de código e torna seu uso mais difícil, quer ver? Vamos para um exemplo onde temos 5 funções que imprimem mensagens, uma sendo executada 2 segundos depois da outra e recebendo a mensagem como parâmetro. Como essas funções seriam escritas normalmente?

function primeiraMensagem(callback, mensagem) {
    console.log(mensagem);

    setTimeout(callback, 2000);
}

function segundaMensagem(callback, mensagem) {
    console.log(mensagem);

    setTimeout(callback, 2000);
}

function terceiraMensagem(callback, mensagem) {
    console.log(mensagem);

    setTimeout(callback, 2000);
}

function quartaMensagem(callback, mensagem) {
    console.log(mensagem);

    setTimeout(callback, 2000);
}

function quintaMensagem(mensagem) {
    console.log(mensagem);
}

setTimeout(() => primeiraMensagem(
    () => segundaMensagem(
        () => terceiraMensagem(
            () => quartaMensagem(
                () => quintaMensagem('Quinta mensagem'),
            'Quarta mensagem')
        , 'Terceira mensagem')
    , 'Segunda mensagem')
, 'Primeira mensagem'), 3000);

Output

Veja que a medida que são adicionadas novas chamadas de callbacks, a complexidade irá aumentar e a compreensão do código ficará mais difícil. Em casos mais extremos seu código vai parecer que foi cortado ao meio pelo Hadouken do Ryuu.

Felizmente existe uma maneira de evitar que esse tipo de problema aconteça. E estamos falando das Promises! E para a conveniência de todos, eu tenho um artigo explicando o assunto também!

Conclusão

Ufa! Chegamos ao final, e tenho certeza que daqui pra frente Callback é um assunto mais claro para você. Agora é só praticar!

Agradecimentos e crédito à Ania Kubów e Mario Souto que também dão excelentes explicações acerca do assunto.

Agradecimentos também aos meus colegas Élisson Michael e Edgard Leal pelas sugestões e revisão.

Teve algum problema? Comenta aqui em baixo!

Se este link foi útil pra você ou você quer apoiar o meu trabalho,
deixa seu like aí e compartilhe ❤️

Introdução a Promises, Async / Await no JavaScript

Alan Pereira — Wed, 20 Jul 2022 04:47:30 +0000

Sabe a sensação de nunca ter entendido um assunto importantíssimo da maneira como deveria? Pois é. Sou eu com Promises. Neste sentido, resolvi escrever esse artigo para que entendamos com calma do que se trata essas tais promessas.

Mas antes de entrar nesse tópico, é de fundamental importância entender como funcionam as callbacks no JavaScript. Felizmente, eu já tenho um artigo sobre isso que você pode conferir aqui.

Então vamos ao assunto!

O que são as Promises, afinal?

Promise é uma ferramenta extremamente útil e muito usada em JavaScript pois permite que se execute uma sequência de comandos de forma assíncrona. Em outras palavras, permite executar duas partes do seu código ao mesmo tempo.

Neste sentido, você terá diversas vantagens como manipular o seu código de maneira mais eficiente, manipular os dados em chamadas de APIs e tratar os erros de maneira mais limpa.

Vamos a um exemplo de uma sequência de comandos síncrona (tradicional) de uma função que soma dois números e retorna uma outra função com a resposta:

function sumNumbers() {
    let result = 1 + 1;

    if (result == 2) {
        successCallback();
    } else {
        errorCallback();
    }
}

function successCallback() {
    console.log("Funcionou. A soma de 1 + 1 é 2")
}

function errorCallback() {
    console.log("Oops! Algo deu errado.");
}

sumNumbers();

// output: Funcionou. A soma de 1 + 1 é 2

Agora vamos refazer o código anterior para que desta vez ele retorne uma Promise. Esta Promise simplificará o uso dos callbacks, veja só.

Para isso, se cria um new Promise, que é uma classe que retornará um objeto. Na criação desta classe passaremos como parâmetro uma função anônima, que por sua vez receberá os parâmetros resolve e reject.

Ficou confuso? Calma que no exemplo ficará mais claro, mas por enquanto atente-se a esses parâmetros resolvee reject. O que esses parâmetros querem dizer? Querem dizer que se o código correr da maneira como deveria, ele executará o trecho resolve do código. Caso algum erro aconteça, ele executará o trecho reject.

Esses caras resolve e reject são o que chamamos de callbacks.

let p = new Promise((resolve, reject) => {
    let a = 1 + 1;
    if (a == 2) {
        resolve('Success');
    } else {
        reject('Failed');
    }
});

Por enquanto entramos somente na parte da criação da Promise, agora vamos chamá-la. com o .then, podemos forçar que o código só prossiga com a execução da função após que uma anterior seja resolvida. Veremos isso mais à frente, mas por enquanto se atente a forma como fazemos a chamada da Promise:

p.then((message) => {
    console.log('Esse é o then: ' + message);
}).catch((err) => {
    console.log('Esse é o catch: ' + err);
});

// output: Esse é o then: Success

// Caso mudássemos a condicional a == 2 para qualquer outro valor, provavelmente o output seria o do catch:
// output: Esse é o catch: Failed

Criando Promises

Por enquanto vimos os conceitos básicos de promise como por exemplo usá-las através do .then e .catch, mas vamos adicionar uma pitada de complexidade e tentar ir para um exemplo mais robusto de como fazer com que qualquer função retorne uma Promise.

Neste caso temos duas funções callbacks síncronas chamadas errorCallback e callback. Elas retornarão um objeto com a propriedade name e message. Uma função comum com sua chamada seria algo assim:

const myName = 'Alan';

function whoAreYouCallback(callback, errorCallback) {
    if (myName != 'Alan') {
        errorCallback({
            name: 'Algo deu errado',
            message: myName + ' não é meu nome.'
        })
    } else {
        callback({
            name: myName,
            message: 'Olá, mundo!'
        });
    }
}

whoAreYouCallback((result) => {
    console.log(result.name + "? Sou eu! " + result.message);
}, (error) => {
    console.log(error.name + '. ' + error.message);
})

// output: Alan? Sou eu! Olá, mundo!

Agora para retornar uma promise, você verá que não precisaremos adicionar os errorCallback e callback nos parâmetros da função, apenas faremos com que essa função retorne uma Promise diretamente.

Para retornar uma promise, adicionamos o return new Promise(função anônima) com as callbacks de parâmetro da função anônima.

Para a chamada de Promise, adicionamentos o .then para tratar o cenário de sucesso e o .catch para o cenário de falha:

const myName = 'Alan';

function whoAreYouCallback() {
    return new Promise((resolve, reject) => {
        if (myName != 'Alan') {
        reject({
            name: 'Algo deu errado',
            message: myName + ' não é meu nome.'
        })
    } else {
        resolve({
            name: myName,
            message: 'Olá, mundo!'
        });
    }
    })
}

whoAreYouCallback()
    .then((result) => {
        console.log(result.name + "? Sou eu! " + result.message);
    }).catch((error) => {
        console.log(error.name + '. ' + error.message);
    })

// output: Alan? Sou eu! Olá, mundo!

O superpoder da Promise: Determinando a ordem de chamada das funções

Agora que sabemos usar as Promises, podemos ativar o seu superpoder: Fazer com que o código prossiga somente após a execução de uma determinada promise e permitindo que você controle a ordem e quando fará a execução do seu código. Neste sentido, basta aninharmos o próximo .then sendo passado como parâmetro no resultado da promise anterior.

Neste exemplo vamos criar duas promises e chamaremos através do método tradicional .then/.catch:


// Criando a primeira promise

function bestF1DriverEver(driver) {
    return new Promise((resolve, reject) => {
        if (driver === 'Senna') {
            resolve ({
                success: true,
                driverName: 'Ayrton Senna',
                msg: driver + ' é o melhor piloto de F1 de todos os tempos!'
            });
        } else {
            reject ({
                success: false,
                msg: 'Esse não é o melhor piloto!'
            });
        }
    });
}

// Criando a segunda promise

function bestF1Car(response) {
    return new Promise((resolve, reject) => {
        if (response.success) {
            resolve('McLaren MP4/4 pilotada por ' + response.driverName);
        } else {
            reject('Resposta errada! Tente de novo')
        }
    });
}

// Chamando uma promise e depois a outra

bestF1DriverEver('Senna')
    .then(response => {
        console.log('Verificando resposta...');
        return bestF1Car(response);
    })
    .then(response => {
        console.log('Encontrando o melhor carro...');
        console.log(response);
    })
    .catch(err => {
        console.log(err.msg);
    })

// output: Verificando resposta...
// output: Encontrando o melhor carro...
// output: McLaren MP4/4 pilotada por Ayrton Senna

Se caso quiséssemos criar mais chamadas consecutivas de promises para executar o código em uma determinada ordem somente após o término da execução de uma outra função anterior, basta adicionarmos mais .then na chamada retornando a promise anteriormente usada, como foi o caso da return bestF1Car(response).

No exemplo anterior, vimos que a segunda promise confere se o resultado da primeira promise foi um sucesso. Caso positivo, ela também seguirá no cenário de sucesso.

Porém, essa chamada de promise acaba gerando um problema: A partir da chamada de mais de uma promise, vai-se criando um aninhamento de .then retornando a próxima promise. Em uma chamada de muitas promises, isso pode tornar o código complexo e ilegível.

Async / Await

Para resolver o problema da complexidade de aninhamentos de .then, o async / await vem para simplificar o trabalho de chamada de promises.

O primeiro passo é explicitar que a função será assíncrona adicionando o prefixo async na chamada das promises, para então chamar as promises desejadas na ordem que desejada de execução utilizando o prefixo await.

Com as duas promises criadas no exemplo anterior, poderíamos chamá-las dessa forma:

async function runPromises() {

    const bestF1DriverResponse = await bestF1DriverEver('Senna');

    console.log(bestF1DriverResponse);

    const bestF1CarResponse = await bestF1Car(bestF1DriverResponse);

    console.log(bestF1CarResponse);
}

runPromises()

// output: {
//  "success": true,
//  "driverName": "Ayrton Senna",
//  "msg": "Senna é o melhor piloto de F1 de todos os tempos!"
//}

// output: McLaren MP4/4 pilotada por Ayrton Senna

E caso o parâmetro passado faça cair no erro .catch da promise? Neste caso, é necessário envelopar nossas chamadas dentro de um bloco try / catch para fazer o tratamento do erro.

async function runPromises() {

    try {
        // chamando a promise com o parâmetro errado
        const bestF1DriverResponse = await bestF1DriverEver('Piquet');

        console.log(bestF1DriverResponse);

        const bestF1CarResponse = await bestF1Car(bestF1DriverResponse);

        console.log(bestF1CarResponse);
    } catch (err) {
        console.log(err.msg);
        // Como o parâmetro passado foi errado, ele cairá neste bloco catch
    }
}

runPromises()

// output: Esse não é o melhor piloto!

O uso do async / await junto com try / catch é uma grande vantagem pois o try / catch irá capturar erros de promise no reject como também pode capturar outros erros também.

Guia Rápido

O que é uma promise?

É um objeto que "encapsula" o estado de uma execução (sucesso ou falha) e executa callbacks com base neste estado.

Qual é a relação entre `Promise` e `callback`?

As callbacks são parâmetros dentro da função de uma promise que são responsáveis para designar como a promise irá se comportar dependendo do seu resultado. As duas principais callbacks usadas são resolve e reject.

Resolve: Se a promise funcionar como esperada, essa callback irá retornar a sequência de resolução do código.
Reject: Se a promise não funcionar como esperada, essa callback irá retornar um erro para a chamada da promise.

Qual é a relação entre `Promise` e `Async / Await`?

Async / Await é uma forma mais simples de se chamar promises. Para usá-los, nós precisamos ter uma promise criada, uma função com o prefixo async onde será inserida as chamadas da promise com o prefixo await.

O que `Async / Await` faz com nosso código?

Irá executar o bloco .then sem a necessidade de aninhá-los para cada chamada de promise, tornando o código mais legível. Além disso, para tratar erros apropriadamente, é importante que envolva as chamadas da promises await em torno de um bloco try / catch.

Existe algo a mais para saber sobre promises?

Sim, recentemente o Node.JS teve um update com o Promise.all para chamar várias promises em ainda menos linhas de código.

Ah, e nunca se esqueça que você pode sempre contar com o MDN Docs para aprender de uma fonte confiável!

Conclusão

Acredito que a partir daqui cobrimos os principais tópicos acerca de Promises e Async/Await. Agora é só praticar!

Agradecimentos ao meu techlead, Edgard Leal, que sempre me apoia em meus estudos e me incentiva a ser um profissional melhor.

Agradecimentos também ao pessoal do Código Fonte TV, que com os vídeos me deram uma base importantíssima para o conteúdo deste artigo.

Teve algum problema? Comenta aqui em baixo!

Se este link foi útil pra você ou você quer apoiar o meu trabalho,
deixa seu like aí e compartilhe ❤️

[Iniciante, JavaScript] Desafio Avançando Dias: Praticando Arrays, Loops e Funções

Alan Pereira — Wed, 01 Sep 2021 22:41:19 +0000

Recentemente estava ajudando um amigo a resolver um exercício de Javascript que usava fundamentos interessantes não só da linguagem mas como da própria lógica de programação.

São fundamentos básicos porém importantes e que, se bem aplicados, serão de grande ajuda para quem está iniciando sua jornada na programação.

Por isso, resolvi trazer a explicação do desafio aqui, destrinchando os conceitos utilizados de forma didática e resolvendo o exercício passo a passo

O Problema

Desenvolva uma função que avance os dias da semana, retornando o dia da semana que corresponda a um dia inicial mais a quantidade de dias avançado por um número inteiro. Tanto o dia inicial quanto a quantidade de dias avançados deverão ser passados por parâmetro.

Neste sentido, tanto o parâmetro de dia inicial como o retorno do dia da semana deverão ser String no formato "Sexta-feira", "Quinta-feira", "Sábado"... Validações de formato não são necessárias.

Por exemplo: Os parâmetros passados são "Terça-feira" e 5. A função deverá avançar cinco dias e retornar "Domingo". Ou então como parâmetro é passado "Quarta-feira" e 8. A função deverá avançar oito dias da semana e retornar "Quinta-feira".

Caso pretenda resolver por conta própria antes de ver a resolução, este é um bom momento para isso. Quando se sentir pronto, é só seguir com o artigo!

A solução

1. Montando a função

Antes de mais nada deveremos montar a própria função. Neste caso, nossa função irá receber duas informações como parâmetro, o dia da semana inicial e a quantidade de dias a serem avançados.

function avancarDias(dia, quantidade) {

}

2. Declaração do Array

Aqui teremos todos os dias da semana em um único array. Neste sentido, quando quisermos retornar um dia específico, devemos apenas retornar a posição do Array que corresponda ao dia em questão.

function avancarDias(dia, quantidade) {
let diasSemana = ["Segunda-feira", "Terca-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado", "Domingo"];

}

Com isso, se quisermos acessar "Segunda-feira", basta acessarmos a posição zero do array diasSemana (diasSemana[0]).

3. Parâmetro dia

Para o primeiro parâmetro, dia da semana, ele deverá ser recebido como String no mesmo formato dos dias da semana como escritos no Array (por exemplo: dia receberá "Quinta-feira").

Mas como indicar para a nossa função que o parâmetro dia "Quinta-feira" corresponde à quarta posição do array (diasSemana[3])?

Para isso, usaremos um método do JavaScript chamado indexOf. O que ele faz? Bom, é sempre bom ler alguma documentação explicativa mas basicamente o indexOf irá receber um valor e procurar este valor no array. Caso seja encontrado, ele irá retornar o índice ao qual corresponda a este valor.

Em outras palavras, ele irá procurar no nosso array diasSemana pelo valor que foi passado no parâmetro dia. Caso encontre, retornará a posição do mesmo no array, ou retornará -1 caso não encontre.

A aplicação prática seria assim:

function avancarDias(dia, quantidade) {
  let diasSemana = ["Segunda-feira", "Terca-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado", "Domingo"];

  let indiceDia = diasSemana.indexOf(dia);
}

Caso o parâmetro dia receba "Quinta-feira", o método indexOf irá procurar no array diasSemana e irá retornar o índice onde encontra-se quinta-feira (3) já que diasSemana[3] = "Quinta-feira".

Caso ainda tenha ficado alguma dúvida de como funciona o indexOf, recomendo esta documentação do Mozilla Web Docs. Mas caso esteja acompanhando, vamos para o próximo ponto!

4. Parâmetro quantidade

Agora precisamos tratar o parâmetro de quantidade de dias a serem avançados. Neste sentido, precisamos fazer uma lógica que consiga fazer a quantidade de dias avançados percorrer o nosso array em loop. Ou seja, depois de atingir a última posição, ele volta para a primeira. Mas como fazer isso?

Como já disse antes, usaremos um loop!

Para que a quantidade não ultrapasse o tamanho do Array, o nosso loop irá diminuir por 7 (quantidade de dias da semana) toda vez que a quantidade for maior ou igual aos próprios dias da semana. Neste sentido se quantidade recebe 42, o loop fará:

43-7 = 36
- Em seguida:
36 - 7 = 29
- Em seguida:
29 - 7 = 22
- Em seguida:
22 - 7 = 15
- Em seguida:
15 - 7 = 8
- Em seguida:
8 - 7 = 1

Ou seja, nossa lógica fará com que avancemos 43 dias. Começando por uma segunda-feira, avançando 43 dias, o dia final será uma terça-feira!

Em código, o loop ficará da seguinte forma:

function avancarDias(dia, quantidade) {
    let diasSemana = ["Segunda-feira", "Terca-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado", "Domingo"];

    let indiceDia = diasSemana.indexOf(dia);

    while (quantidade >= 7) {
        quantidade -= 7;
    }
}

5. Juntando os dois parâmetros

Agora que temos a lógica de cada parâmetro pronta, podemos juntá-los. A partir de um dia inicial (parâmetro dia), avançamos uma quantidade e dias (parâmetro quantidade) e retornamos o dia da semana em questão. Para isso, basta somarmos os dois índices (tanto o indiceDia quanto o quantidade).

O resultado será a posição certa no array que indica o dia final após os cálculos. A função, finalmente, só precisará retornar este valor!

function avancarDias(dia, quantidade) {
  let diasSemana = ["Segunda-feira", "Terca-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado", "Domingo"];
  let indiceDia = diasSemana.indexOf(dia);

  let indiceAtualizado = indiceDia + quantidade;
  while (indiceAtualizado >= 7) {
    indiceAtualizado -= 7;
  }

  return diasSemana[indiceAtualizado];
}

6. Refinando o código

Um último toque de acabamento para o código ficar bonito, podemos substituir o número de dias fixo da semana (7) pelo tamanho do Array, já que caso o índice seja maior do que o array, subtraia pelo seu próprio tamanho.

Neste caso o 7 poderia ser substituído por diasSemana.length, já que o tamanho do Array é o próprio 7.

Finalizando, o código ficaria:

function avancarDias(dia, quantidade) {
  let diasSemana = ["Segunda-feira", "Terca-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado", "Domingo"];
  let indiceDia = diasSemana.indexOf(dia);

  let indiceAtualizado = indiceDia + quantidade;
  while (indiceAtualizado >= diasSemana.length) {
    indiceAtualizado -= diasSemana.length;
  }

  return diasSemana[indiceAtualizado];
}

7. Desafio completo!

Apesar de ser um código de apenas 11 linhas, muitos conceitos importantes de JavaScript e lógica de programação são aplicados. Se você conseguiu otimizar esse código ainda mais, me mande sua sugestão que eu ficaria satisfeito em receber!

No mais, se você aprendeu alguma coisa com este artigo ou achou útil, deixe aquele ❤️ ou salve 🔖 nos seus favoritos. Ficarei feliz também em receber eventuais feedbacks ou caso tenha ficado com alguma dúvida, pode me mandar uma mensagem no meu Instagram ou LinkedIn.

Github do Projeto: https://github.com/alantsx/diaSemana

See ya later!

Atualizando seu projeto no GitHub

Alan Pereira — Sat, 25 Jul 2020 03:19:02 +0000

Um passo a passo rápido para você subir a nova versão do seu projeto do GitHub

Uma das formas mais eficientes de mostrar que você é um programador ativo é fazendo uploads no GitHub. Afinal, não tem nada mais cool do que ver o seu perfil cheio dos quadradinhos verdes.

O problema é que muitos iniciantes só sobem o projeto no GitHub quando ele está pronto e acabam perdendo a oportunidade de não só fazer o backup do progresso do trabalho como também de manter o seu perfil sempre ativamente alimentado. Então hoje eu resolvi falar sobre esse método muito simples para você manter os seus projetinhos do GitHub sempre atualizados junto com os arquivos locais.

Antes de mais nada, se você quer aprender a fazer um repositório novo no GitHub, segue este tutorial aqui.

Bom, mãos à obra!

Tenha certeza que o seu git está instalado. No terminal ou prompt de comando cheque através do comando git -v;
Abra o Git Bash ou terminal na pasta onde está o seu projeto. Presume-se que o repositório já esteja iniciado no GitHub, mesmo que apenas com o ReadMe;
Adicione todos os arquivos para serem validados como upload através do comando git add .;
Se o seu projeto local já possuir uma URL de origem definida pule este passo. Se não possuir, como é o caso de você iniciar um repositório sem fazer upload de arquivos ou somente com um ReadMe, você pode definir uma. Para isso, vá no repositório criado e no botão Code copie a URL que é disponibilizada:

Posteriormente execute git remote add origin URL-DO-REPOSITÓRIO;
Incorpore as mudanças do seu projeto remoto com seu projeto local utilizando git pull origin master.
Dica: Você pode checar quais arquivos sofreram mudanças e serão upados através do comando git status;
Confirme as alterações entre o projeto remoto e o projeto local usando o comando git commit -m "descrição do commit";
Jogue o projeto para a nuvem usando git push origin master. O terminal irá pedir o seu login e senha do GitHub para realizar esse processo e você finalmente terá seu projeto atualizado.

Teve algum problema? Comenta aqui em baixo!

Se este link foi útil pra você ou você quer apoiar o meu trabalho,
deixa seu like aí e compartilhe ❤️

[BotTelegram PT.2] Criando seu próprio bot no Telegram usando NodeJS + Deploy na nuvem via Heroku

Alan Pereira — Sat, 04 Jul 2020 22:26:38 +0000

Na parte anterior iniciamos o setup básico e a primeira funcionalidade de um bot no Telegram usando a API do NodeJS. Neste tutorial faremos o deploy do bot usando uma hospedagem grátis com o Heroku.

Então partiu pro código.

1. O que precisaremos?

1.1 Git instalado;

1.2 Cadastro no Heroku feito;

1.3 Cliente do Heroku instalado;

2. Configurações prévias: Comando start

Quando sua aplicação sobe para o Heroku, ele possui um modus operandis padrão de executar o comando npm start. O que acontece é que sem uma configuração prévia o seu bot simplesmente não vai abrir o index.js, já que o comando para que ele rode seja node index.js.

Então para resolver isso é muito simples, nós iremos fazer um script que executará node index.js quando o comando npm start rodar.

No seu arquivo package.json procure pela parte de script e adicione o script "start": "node index.js". Caso o script não exista, você pode criar em formato JSON. Ele deve ficar mais ou menos assim:

3. Configurações prévias: Express e direcionamento de portas

Para que seu bot fique online sem problemas no Heroku, você precisa dizer para a hospedagem na nuvem quais portas utilizar. Caso contrário, o Heroku simplesmente desliga a sua aplicação. Neste sentido, a melhor dependência que resolva esse problema é o Express.

Então com o terminal aberto dentro da pasta da sua aplicação adicionaremos o Express como dependência:
npm install express

Dentro do seu arquivo principal (nesse tutorial o index.js) importe o express usando var express = require('express');

Inicie a função do express com var app = express(); e vamos fazer a configuração das portas:

Como o Heroku fornece dinâmicamente a porta à ser utilizada pelo app, usaremos o método process.env.PORT para capturar a porta passada pelo Heroku OU então caso a porta não seja passada usaremos uma porta padrão:
app.set('port', (process.env.PORT || 5000));

Também podemos criar um log para dizer em qual porta a aplicação estará rodando:
app.get('/', function(request, response) { var result = 'App is running' response.send(result); }).listen(app.get('port'), function() { console.log('App is running, server is listening on port ', app.get('port')); });

Você pode conferir um artigo do FAQ do Heroku em inglês explicando melhor sobre o uso do Express com o Heroku

4. Fazendo o deploy para o Heroku

Finalmente nossa aplicação está pronta e bonita para ir online! Então com o seu terminal aberto na pasta do seu projeto vamos iniciar a última etapa.

4.1 Com a sua conta no Heroku criada, execute o comando no terminal heroku login, siga os passos para fazer o login na plataforma;

4.2 Execute heroku create para criar uma nova aplicação no Heroku (frisando mais uma vez que o terminal precisa estar na pasta da aplicação);

4.3 Execute heroku config:set TOKEN=Token_unico_da_sua_aplicação_fornecida_pelo_BotFather.

E depois execute heroku config:set HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2) para configurar o ambiente;

4.4 O padrão agora é parecido com fazer o upload de repositórios para o github usando o git.

4.4.1 Para usar o git para subir os arquivos comece selecionando todos os arquivos da pasta com git add .

4.4.2 Faça o commit com git commit -m "primeiro commit"

4.4.3 Finalmente jogue para a pasta root da sua aplicação no Heroku com git push heroku master;

4.4.4 Seja feliz com o seu bot rodando na nuvem

5. Outras informações importantes

5.1 Caso você venha a ter algum erro com o seu bot, você pode checar os últimos logs do console usando o comando heroku logs, o que pode te auxiliar a resolver eventuais problemas;

5.2 Esse método de deploy é totalmente grátis e, por consequência, existem limitações. Você possui um limite de mais ou menos 600 horas por mês com a sua aplicação rodando online e ela entrará em modo soneca após 30 minutos de inatividade. Existem métodos para adicionar mais horas sem pagar nada e adicionar addons que permitem o seu bot não entrar em modo soneca, mas fica para um outro tutorial.

5.3 Caso você venha a ter um erro de "deprecated Automatic enabling of cancellation of promises is deprecated", tente adicionar o comando process.env.NTBA_FIX_319 = 1; na primeira linha do seu index.js. Ou só adicione isso para se prevenir deste erro.

5.4 Se este link lhe foi útil, deixe seu ❤️

Alan Pereira
Meu LinkedIn
Meu GitHub
Meu Instagram

[BotTelegram PT.1] Criando seu próprio bot no Telegram usando NodeJS + Deploy na nuvem via Heroku

Alan Pereira — Mon, 15 Jun 2020 00:13:06 +0000

Bots são uma das ferramentas incríveis do Telegram que o faz se destacar entre os aplicativos de troca de mensagem instantânea. Entre seus muitos usos, os bots podem ser utilizados para:

Envio automático e customizado de mensagens, áudios, arquivos, links (uma forma de ter notícias customizadas de forma automática direto pelo Telegram, por exemplo);
Integrar com diversos serviços como email, música, youtube;
Aceitar pagamentos;
Criar jogos...

Enfim, basicamente os bots no Telegram são limitados apenas pela imaginação, criatividade e habilidade de seu criador. Diante dessa utilidade e da minha pretensão clara de converter o maior número possível de pessoas para essa plataforma incrível, eu resolvi começar essa série de tutoriais onde estarei abordando como desenvolver o seu próprio bot e inserir diversas funcionalidades interessantes usando NodeJS. Então sem mais delongas, mãos à obra!

1. Configurando o ambiente

1.1 Talvez isso pareça óbvio, mas vai mesmo assim: Você precisa ter o NodeJS instalado. Caso não o tenha, visite o site oficial, e configure o seu Node;

Como opção para usuários de Ubuntu, segue um tutorial meu de como instalar o Node versão LTS

1.2 Crie a pasta do seu projeto e o arquivo principal nela, para mim ele se chamará index.js;

1.3 Abra o terminal na pasta e instale esta API que usaremos como base executando o comando:
npm install --save node-telegram-bot-api;

2. Pedindo a benção do Botfather

Em sua plena ironia, o Telegram possui um bot para a criação de bots. O Botfather é responsável pela criação, edição e gerenciamento de todos os bots. Então tudo que envolva o seu bot dentro de opções do Telegram, você trata direto com ele.

2.1 Dentro do seu Telegram abra uma conversa com @botfather;

2.2 Para iniciar a conversa com o Botfather, use o comando /start. Uma lista de opções aparecerá para você;

2.3 O comando /newbot irá iniciar uma série de diálogos para a criação do seu bot. Você deverá fornecer o nome e o username (@) do bot;

2.4 Ao final da criação, ele irá te fornecer um TOKEN único para o Bot. Este é uma espécie de senha. Ele é indivudal e a chave para controlar todas as configurações e tudo que o Bot pode fazer, então mantenha esse TOKEN seguro com você

3. Hora do código

3.1 Primeiro vá no seu arquivo index.js. Puxaremos a dependência do node-telegram-bot-api:
const TelegramBot = require('node-telegram-bot-api');

3.2 Segundo inseriremos o TOKEN fornecido pelo BotFather:
const TOKEN = 'seu-token-aqui';

3.3 Agora podemos finalmente criar o objeto TelegramBot:
const bot = new TelegramBot( TOKEN, { polling: true });

4. Primeira funcionalidade e rodando o bot

Agora o bot está pronto para rodar, basta fazermos as funcionalidades que desejamos.

4.1 Como primeira funcionalidade para teste, o bot responderá de volta a qualquer mensagem:

//Função 'Mensagem recebida' bot.on('message', (msg) => { const chatId = msg.chat.id; bot.sendMessage(chatId, 'Mensagem recebida'); });

Onde:

bot.on é quando o bot perceberá o evento;
'message' o evento a ser percebido;
(msg) o parâmetro que foi enviado;
const chatId = msg.chat.id o bot identifica o id do chat para responder no chat correto;
bot.sendMessage(chatId, 'Mensagem recebida') a função enviar mensagem que receberá o ID do chat e enviará de volta a mensagem 'Mensagem recebida`

4.2 Para rodarmos o bot, vá no Terminal de comando na pasta do projeto e execute o index.js atráves do:
node index.js

Por hoje é isso! As próximas partes do tutorial irão abordar a hospedagem grátis do Heroku e mais funcionalidades para o bot.

Você pode conferir a Parte 2 aqui!

Outros links que podem ser úteis para desenvolver bots no Telegram:

Se este link lhe foi útil, deixe seu ❤️

Alan Pereira
Meu LinkedIn
Meu GitHub
Meu Instagram

Subindo seu repositório no GitHub através da linha de comando

Alan Pereira — Fri, 12 Jun 2020 00:53:06 +0000

Um passo a passo rápido para quem pretende subir o seu repositório no GitHub!

Tenha certeza que o seu git está instalado. No terminal ou prompt de comando cheque através do comando git -v
No GitHub, crie um novo repositório. Na tela onde pede para fazer upload ou criar aquivos, guarde o link HTTPS que será gerado
Abra o Git Bash ou terminal na pasta onde está o seu projeto
Inicie a pasta como um repositório do Git através do comando:
git init
Em seguida, adicione os arquivos de configuração para preparar o commit:
git add .
Opcional: Adicione um arquivo readme caso não tenha iniciado o repositório com ele:
git add README.md
Crie um novo commit para os arquivos que irá subir para o repositório:
git commit -m "first commit"
Suba seus arquivos utilizando a URL gerada no passo 2 no seguinte comando:
git remote add origin URL-GERADA-PELO-PASSO-2-AQUI
Autorize o upload com seu login e senha:
git push -u origin master

Se este link lhe foi útil, deixe seu ❤️.

Como instalar a última versão LTS do NodeJS no Ubuntu

Alan Pereira — Thu, 11 Jun 2020 01:15:12 +0000

O interpretador de texto de JavaScript NodeJS certamente é uma das melhores ferramentas para quem quer desenvolver para web e mobile. No entanto, um dos problemas que novos usuários de Ubuntu poderão se deparar é com a instalação padrão do Node pelo terminal que instala uma versão mais antiga do que a já publicada.

Porém, utilizando o Personal Package Archive podemos resolver esse problema. Então, siga os 3 passos a seguir e não perca mais tempo para começar o seu projeto:

Adicione o Node.JS PPA

Última Versão LTS: Aqui você pode settar a instalação da ultima versão LTS do NodeJS na versão 12.X. Abra o terminal do Ubuntu e execute:

sudo apt-get install curl curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

Instale o Node.JS através do apt-get

Agora com a versão para download configurada, podemos executar a instalação normalmente:

sudo apt-get install nodejs

Verifique a versão do NodeJS e NPM

Perfeito. Provavelmente tudo certo para rodar. Podemos conferir a versão instalada.

O NodeJS vem por padrão com o gerenciador de pacotes NPM instalado. Então além de verificar a instalação correta do NodeJS, você também pode verificar que o NPM foi instalado:

node -v
Output Esperado: v.12.14 ou maior

npm -v
Output Esperado: v.6.12 ou maior

Se este link lhe foi útil, deixe seu ❤️.

Forem: Alan Pereira

Iniciante: Abrindo seus projetos com VSCode através do terminal

Utilizando comando code

Mas eu tenho o comando code?

Adicionando o comando code

Adicionando o Prettier ao seu projeto JavaScript/TypeScript

Pré-requisitos

Instalação

Setup inicial do Prettier

Usando o Prettier através da linha de comando

Usando o Prettier através do VSCode diretamente

Bônus

Conclusão

Links úteis

Entendendo Callbacks no JavaScript

O funcionamento do JavaScript

A semântica do Callback

Usando o JavaScript assíncrono com as callbacks

Uma rápida explicação de função anônima

O problema do uso das Callbacks: O Callback Hell

Conclusão

Introdução a Promises, Async / Await no JavaScript

O que são as Promises, afinal?

Criando Promises

O superpoder da Promise: Determinando a ordem de chamada das funções

Async / Await

Guia Rápido

O que é uma promise?

Qual é a relação entre Promise e callback?

Qual é a relação entre Promise e Async / Await?

O que Async / Await faz com nosso código?

Existe algo a mais para saber sobre promises?

Conclusão

[Iniciante, JavaScript] Desafio Avançando Dias: Praticando Arrays, Loops e Funções

O Problema

A solução

1. Montando a função

2. Declaração do Array

3. Parâmetro dia

4. Parâmetro quantidade

5. Juntando os dois parâmetros

6. Refinando o código

7. Desafio completo!

Atualizando seu projeto no GitHub

Um passo a passo rápido para você subir a nova versão do seu projeto do GitHub

[BotTelegram PT.2] Criando seu próprio bot no Telegram usando NodeJS + Deploy na nuvem via Heroku

1. O que precisaremos?

2. Configurações prévias: Comando start

3. Configurações prévias: Express e direcionamento de portas

4. Fazendo o deploy para o Heroku

5. Outras informações importantes

[BotTelegram PT.1] Criando seu próprio bot no Telegram usando NodeJS + Deploy na nuvem via Heroku

1. Configurando o ambiente

2. Pedindo a benção do Botfather

3. Hora do código

4. Primeira funcionalidade e rodando o bot

Subindo seu repositório no GitHub através da linha de comando

Um passo a passo rápido para quem pretende subir o seu repositório no GitHub!

Como instalar a última versão LTS do NodeJS no Ubuntu

Adicione o Node.JS PPA

Instale o Node.JS através do apt-get

Verifique a versão do NodeJS e NPM

Qual é a relação entre `Promise` e `callback`?

Qual é a relação entre `Promise` e `Async / Await`?

O que `Async / Await` faz com nosso código?