Introdução ao MERN

Neste artigo, construiremos e implantaremos uma aplicação criada com a stack MERN no Heroku.

MERN, que significa MongoDB, Express, React e Node.js, é uma stack (literalmente, em português, pilha – mas que podemos traduzir como "conjunto de tecnologias") popular usada na construção de aplicações para a web. Ela envolve trabalho de front-end (com React), trabalho de back-end (com Express e NodeJS) e um banco de dados (com MongoDB).

O Heroku, por outro lado, é uma plataforma como serviço (PaaS) que permite aos desenvolvedores criar, executar e operar aplicações inteiramente na nuvem.

Nota da tradução: até pouco tempo atrás, o Heroku dispunha de um espaço gratuito para essas implementações. Hoje em dia, mesmo a camada mais básica da plataforma vem com um custo.

Para o banco de dados, usaremos o MongoDB Atlas, que é um serviço global de banco de dados em nuvem para aplicações modernas. É mais seguro do que ter o MongoDB instalado localmente em nosso servidor e também nos dá espaço para mais recursos em nossos servidores.

Para o front-end, construiremos uma aplicação em React simples, que faz solicitações POST a uma API para adicionar um usuário, também podendo fazer solicitações GET para obter todos os usuários.

Você pode pular para qualquer etapa com o índice listado abaixo.

Índice

• Introdução ao MERN
• Vamos começar a criar
• Construindo a aplicação em React
• Criando o back-end
• Conectando o banco de dados do MongoDB Atlas
• Chamando APIs no front-end
• Implantando no Heroku
• Criando uma aplicação no Heroku
• Configurando o package.json
• Resumo

Vamos começar a criar

Construindo a aplicação em React

Nota: antes de começarmos nosso projeto, o node deve estar instalado em seu computador. O node também nos fornece o npm, que é usado para instalar pacotes.

Instalando o create-react-app

O create-react-app é usado para criar uma aplicação inicial em React.

Nota da tradução: mais recentemente, surgiram alternativas ao create-react-app que consomem menos espaço e são mais práticas para a criação de aplicações em React, como o Vite. O create-react-app, no entanto, segue sendo uma boa alternativa em termos didáticos para quem está começando a aprender.

Se você não tiver o create-react-app instalado, digite o seguinte na linha de comando:

npm i create-react-app -g

O parâmetro -g instala o pacote globalmente.

Criando o diretório do projeto

create-react-app my-project
cd my-project

O primeiro comando acima cria um diretório "my-project" e instala as dependências que serão usadas na aplicação inicial em React. Após terminar a instalação, o segundo comando muda para o diretório do projeto.

Iniciando a aplicação e fazendo as edições necessárias

npm start

O comando acima inicia a aplicação React, que fornece um URL onde você visualiza o projeto. Você pode, então, fazer as edições necessárias, como alterar imagens ou texto.

Instalando o axios

npm i axios --save

O axios é uma biblioteca do JavaScript usada para facilitar requisições HTTP. Ele será usado para enviar requisições do front-end (React) para as APIs fornecidas pelo back-end.

Criando o back-end

O back-end gerencia as APIs, lida com requisições e também se conecta ao banco de dados.

Instalando os pacotes de back-end

npm i express cors mongoose body-parser --save

1. express: "O Express é uma infraestrutura para aplicações da web em Node.js mínima e flexível, que fornece um conjunto robusto de recursos para essas aplicações para a web" – documentação do Express (em inglês)
2. cors: "O CORS é um pacote do Node.js para fornecer um middleware para Connect/Express que pode ser usado para habilitar o CORS com várias opções" – documentação do CORS (em inglês)
3. mongoose: "O Mongoose é uma ferramenta de modelagem de objetos para MongoDB projetada para funcionar em um ambiente assíncrono. O Mongoose suporta promises e funções de callback (retornos de chamada)" – documentação do Mongoose
4. body-parser: "O middleware de análise (e transformação dos dados) do body para o Node.js." – documentação do body-parser (em inglês)

Nota da tradução: body-parser foi descontinuado. A análise e a transformação dos dados, agora, pode ser feita diretamente pelo Express.

Criando a pasta de back-end

mkdir backend
cd backend

Configurando o back-end

Criando um ponto de entrada (entry point) server.js

Primeiro, crie um arquivo server.js, que será o ponto de entrada para o back-end.

touch server.js

No arquivo server.js, digite o seguinte:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path')
const app = express();
require('./database');
-----
app.use(bodyParser.json());
app.use(cors());
-----
// API
const users = require('/api/users');
app.use('/api/users', users);
-----
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build'))
})
-----
const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});

express.static fornece arquivos estáticos que são aqueles construídos quando npm run build é executado em um projeto do React. Lembre-se de que o arquivo compilado está na pasta build.

A partir da nossa configuração, qualquer requisição enviada para /api/users será enviada para a API users que estamos prestes a configurar.

Configurando a API users

mkdir api
touch api/users.js

No arquivo api/users.js, adicione o seguinte:

const express = require('express');
const router = express.Router()
-----
const User = require('../models/User');
-----
router.get('/', (req, res) => {
    User.find()
        .then(users => res.json(users))
        .catch(err => console.log(err))
})
-----
router.post('/', (req, res) => {
    const { name, email } = req.body;
    const newUser = new User({
        name: name, email: email
    })
    newUser.save()
        .then(() => res.json({
            message: "Created account successfully"
        }))
        .catch(err => res.status(400).json({
            "error": err,
            "message": "Error creating account"
        }))
})
module.exports = router 

No código acima, criamos um manipulador de requisições GET e POST, que busca todos os usuários e os publica. Buscar e adicionar um usuário ao banco de dados é auxiliado pelo modelo User que criaremos.

Criando o modelo User

mkdir models
touch models/user.js

No arquivo models/user.js, adicione o seguinte:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
-----
const userSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    }
})
module.exports = mongoose.model("User", userSchema, "users")

No código acima, é criado um esquema para o usuário que contém os campos do usuário. Ao final do arquivo, o modelo ("User") é exportado com o esquema e a coleção ("users").

Conectando o banco de dados do MongoDB Atlas

De acordo com a documentação (em inglês), "o MongoDB Atlas é o serviço global de banco de dados em nuvem para aplicações modernas".

Primeiro, precisamos nos registrar no MongoDB Cloud. Consulte esta documentação (em inglês) para criar uma conta do Atlas e criar seu cluster.

Uma coisa que vale a pena observar é colocar o endereço IP de sua conexão na lista de permissões. Se você ignorar essa etapa, não terá acesso ao cluster, portanto preste atenção nessa parte.

O cluster é um pequeno servidor que gerenciará nossas coleções (semelhante às tabelas em bancos de dados do SQL). Para conectar seu back-end ao cluster, crie um arquivo database.js, que, como você pode ver, é necessário em server.js. Em seguida, digite o seguinte:

const mongoose = require('mongoose');
const connection = "mongodb+srv://username:<password>@<cluster>/<database>?retryWrites=true&w=majority";
mongoose.connect(connection,{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false})
    .then(() => console.log("Database Connected Successfully"))
    .catch(err => console.log(err));

Na variável de conexão, insira seu nome de usuário (para o MongoDB Cloud), sua senha (senha do cluster), seu cluster (endereço do seu cluster) e o banco de dados (nome do seu banco de dados). Tudo isso pode ser facilmente descoberto se você seguir a documentação.

Chamando APIs no front-end

Todas as APIs estarão disponíveis localmente em localhost:5000, assim como configuramos no server.js. Quando implantado no Heroku, o servidor usará a porta fornecida pelo servidor (process.env.PORT).

Para facilitar as coisas, o React nos permite especificar um proxy para o qual as solicitações serão enviadas.

Abra o package.json e, logo antes da última chave, adicione o seguinte:

"proxy": "http://localhost:5000"

Desse modo, podemos enviar solicitações diretamente para api/users. Quando nosso site for implantado e criado, a porta padrão da nossa aplicação será usada com a mesma API.

Abra App.js para o React e adicione o seguinte:

import React, {useState, useEffect} from 'react'
import axios from 'axios';
-----
const App = function () {
	const [users, setUsers] = useState(null);

	const [username, setUsername] = useState("");
	const [email, setEmail] = useState("");
	useEffect(() => {
		axios
			.get("/api/users")
			.then((users) => setUsers(users))
			.catch((err) => console.log(err));
	}, []);

	function submitForm() {
		if (username === "") {
			alert("Please fill the username field");
			return;
		}
		if (email === "") {
			alert("Please fill the email field");
			return;
		}
		axios
			.post("/api/users", {
				username: username,
				email: email,
			})
			.then(function () {
				alert("Account created successfully");
				window.location.reload();
			})
			.catch(function () {
				alert("Could not creat account. Please try again");
			});
	}
	return (
		<>
			<h1>My Project</h1>
			{users === null ? (
				<p>Loading...</p>
			) : users.length === 0 ? (
				<p>No user available</p>
			) : (
				<>
					<h2>Available Users</h2>
					<ol>
						{users.map((user, index) => (
							<li key={index}>
								Name: {user.name} - Email: {user.email}
							</li>
						))}
					</ol>
				</>
			)}

			<form onSubmit={submitForm}>
				<input
					onChange={(e) => setUsername(e.target.value)}
					type="text"
					placeholder="Enter your username"
				/>
				<input
					onChange={(e) => setEmail(e.target.value)}
					type="text"
					placeholder="Enter your email address"
				/>
				<input type="submit" />
			</form>
		</>
	);
};
export default App

Os hooks useState e useEffect são usados ​​para manipular estados e efeitos colaterais (sideEffects). O que basicamente está acontecendo é que o primeiro estado dos usuários é null e 'Loading...' (carregando) é mostrado no navegador.

No useEffect[], [] é usado para especificar que, no estágio componentDidMount (quando o componente é montado), deve-se fazer uma solicitação do Axios para a API, que está sendo executada em localhost:5000. Se obtiver o resultado e não houver nenhum usuário, "No user available" (nenhum usuário disponível) será exibido. Caso contrário, será exibida uma lista numerada dos usuários.

Se você quiser saber mais sobre useState e useEffect, confira este artigo – O que diabos são React Hooks? (em inglês)

Implantando no Heroku

Para implantar sua aplicação no Heroku, você deve ter uma conta por lá.

Vá para a página do Heroku para criar uma conta. Em seguida, consulte a documentação sobre como criar uma aplicação no Heroku. Verifique também a documentação do Heroku CLI. (links em inglês)

Nota da tradução: reforçando, o Heroku não é mais gratuito. Caso seja sua intenção dar sequência a esse processo por lá, saiba que mesmo as alternativas iniciais agora são pagas.

Criando uma aplicação no Heroku

Primeiro, faça login no Heroku:

heroku login

Isso vai redirecionar você para um URL no navegador onde você poderá fazer login. Quando terminar, você poderá continuar no terminal.

No mesmo diretório do projeto em React, execute o seguinte:

heroku create

Isso criará uma aplicação no Heroku e também fornecerá o URL para acessar o aplicativo.

Configurando o package.json

O Heroku usa seu arquivo package.json para saber quais scripts executar e quais dependências instalar para que seu projeto seja executado com sucesso.

No seu arquivo package.json, adicione o seguinte:

{
    ...
    "scripts": {
        ...
        "start": "node backend/server.js",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install npm && run build"
    },
    ...
    "engines": {
        "node": "10.16.0"
    }
}

O Heroku executa uma pós-compilação que, como você poderá ver, instalará suas dependências e executará uma compilação do seu projeto em React. Em seguida, ele iniciará seu projeto com o script start que, basicamente, inicia seu servidor. Depois disso, seu projeto deverá funcionar bem.

engines especifica as versões das engines, como node e npm, a serem instaladas.

Enviando para o Heroku

git push heroku master

O comando acima envia seu código para o Heroku. Lembre-se de incluir arquivos desnecessários em .gitignore.

Após alguns segundos, seu site estará pronto. Se houver algum erro, você pode verificar seu terminal ou acessar seu painel no navegador para visualizar os logs (registros) de criação (da build).

Agora, você pode visualizar seu site no URL que o Heroku enviou quando você executou heroku create.

Isso é tudo que há para fazer. Que bom que você chegou até aqui.

Resumo

É claro que há mais sobre aplicações da stack MERN.

Este artigo não se aprofundou em autenticações, login, sessões e tudo mais. Abordou apenas como implantar aplicações da stack MERN no Heroku e como trabalhar com MongoDB Atlas.

Você pode encontrar outros artigos como este no blog do autor: dillionmegida.com

Obrigado pela leitura.

Escrito por: Rajesh Pillai

Entenda o funcionamento do Node programando pequenos pacotes/módulos

Se você é novo no Node.js, há muitos tutoriais aqui no freeCodeCamp e em outros lugares. Você pode conferir meu artigo All about Core Node.JS (em inglês), por exemplo.

Sem mais delongas, vamos ao assunto em discussão: "Emissores de Eventos". Os emissores de eventos desempenham um papel muito importante no ecossistema do Node.js.

O EventEmitter (Emissor de Eventos) é um módulo que facilita a comunicação/interação entre objetos no Node. O EventEmitter está no centro da arquitetura orientada a eventos assíncrona do Node. Muitos dos módulos internos do Node são herdados do EventEmitter, incluindo frameworks proeminentes, como o Express.js.

O conceito é bastante simples: objetos emissores emitem eventos nomeados, que fazem com que ouvintes (em inglês, listeners) previamente registrados sejam chamados. Assim, um objeto emissor possui basicamente duas funcionalidades principais:

• Emitir eventos nomeados.
• Registrar e cancelar o registro de funções do ouvinte.

É meio como um padrão de desenho pub/sub ou observador (embora não exatamente).

O que criaremos neste tutorial

• classe EventEmitter
• método on/addEventListener
• método off/removeEventListener
• método once
• método emit
• método rawListeners
• método listenerCount

Os recursos básicos acima são suficientes para implementar um sistema completo usando o modelo de eventos.

Antes de entrarmos na programação, vamos dar uma olhada em como usaremos a classe EventEmitter. Observe que nosso código imitará a API exata do módulo "events" do Node.js.

Na verdade, se você substituir nosso EventEmitter pelo módulo "events" integrado do Node.js, você obterá o mesmo resultado.

Exemplo 1 - Crie uma instância de emissor de evento e registre algumas funções de retorno

const myEmitter = new EventEmitter();

function c1() {
   console.log('Ocorreu um evento!');
}

function c2() {
   console.log('E mais outro!');
}

myEmitter.on('eventOne', c1); // Registro para eventOne
myEmitter.on('eventOne', c2); // Registro para eventOne

Quando o evento "eventOne" é emitido, ambas as funções de retorno acima devem ser invocadas.

myEmitter.emit('eventOne');

A saída no console será a seguinte:

Ocorreu um evento!
E mais outro!

Exemplo 2 - Registrando para o evento ser disparado apenas uma vez usando "once"

myEmitter.once('eventOnce', () => console.log('eventOnce disparado apenas uma vez')); 

Emitindo o evento "eventOnce":

myEmitter.emit('eventOne');

A seguinte saída deve aparecer no console:

eventOnce disparado apenas uma vez

Emitir eventos registrados com "once" novamente não terá impacto.

myEmitter.emit('eventOne');

Uma vez que o evento foi emitido apenas uma vez, a instrução acima não terá impacto.

Exemplo 3 - Registrando-se para o evento com parâmetros de função de retorno

myEmitter.on('status', (code, msg)=> console.log(`Obtive ${code} e ${msg}`));

Emitindo o evento com parâmetros:

myEmitter.emit('status', 200, 'ok');

A saída no console será a seguinte:

Obtive 200 e ok

OBSERVAÇÃO: Você pode emitir eventos várias vezes (exceto os registrados com o método "once").

Exemplo 4 - Cancelando o registro de eventos

myEmitter.off('eventOne', c1);

Agora, se você emitir o evento da seguinte forma, nada acontecerá e será um "noop":

myEmitter.emit('eventOne');  // noop

Exemplo 5 - Obtendo contagem de ouvintes

console.log(myEmitter.listenerCount('eventOne'));

OBSERVAÇÃO: Se o registro do evento foi cancelado usando o método "off" ou "removeListener", a contagem será 0.

Exemplo 6 - Obtendo ouvintes brutos

console.log(myEmitter.rawListeners('eventOne'));

Exemplo 7 - Exemplo de demonstração assíncrona

// Exemplo 2->Adaptado de um texto de Sameer Buna. Grato!
class WithTime extends EventEmitter {
  execute(asyncFunc, ...args) {
    this.emit('begin');
    console.time('execute');
    this.on('data', (data)=> console.log('got data ', data));
    asyncFunc(...args, (err, data) => {
      if (err) {
        return this.emit('error', err);
      }
      this.emit('data', data);
      console.timeEnd('execute');
      this.emit('end');
    });
  }
}

Usando o emissor de evento "withTime":

const withTime = new WithTime();

withTime.on('begin', () => console.log('Prestes a executar'));
withTime.on('end', () => console.log('Execução encerrada'));

const readFile = (url, cb) => {
  fetch(url)
    .then((resp) => resp.json()) // Transformar os dados em json
    .then(function(data) {
      cb(null, data);
    });
}

withTime.execute(readFile, 'https://jsonplaceholder.typicode.com/posts/1');

Verifique a saída no console. A lista de postagens será exibida junto com outros logs.

O padrão Observador para nosso emissor de evento

Diagrama visual 1 (métodos em nosso EventEmitter)

Como agora entendemos a utilização da API, vamos programar o módulo.

O código de exemplo completo para a classe EventEmitter

Estaremos preenchendo os detalhes de modo incremental nas próximas seções.

class EventEmitter {
  listeners = {};  // par chave-valor
  
  addListener(eventName, fn) {}
  on(eventName, fn) {}
  
  removeListener(eventName, fn) {}
  off(eventName, fn) {}
  
  once(eventName, fn) {}
  
  emit(eventName, ...args) { }
  
  listenerCount(eventName) {}
  
  rawListeners(eventName) {}
}

Começamos criando o modelo para a classe EventEmitter junto com um objeto para armazenar os ouvintes. Os ouvintes serão armazenados como um par chave-valor. O valor pode ser uma lista (já que para o mesmo evento permitimos que vários ouvintes sejam cadastrados).

1. O método addListener()

Vamos agora implementar o método addListener. Ele recebe um nome de evento e uma função de retorno para ser executada.

addListener(event, fn) {
    this.listeners[event] = this.listeners[event] || [];
    this.listeners[event].push(fn);
    return this;
  }

Uma pequena explicação:

O evento addListener verifica se o evento já está registrado. Se estiver, retorna o array. Caso contrário, o array estará vazio.

this.listeners[event] // retornará o array de eventos ou undefined (registro inicial)

Por exemplo…

Vamos entender isso com um exemplo de uso. Vamos criar um eventEmitter e registrar um "test-event". Esta é a primeira vez que o "test-event" está sendo registrado.

const eventEmitter = new EventEmitter();
eventEmitter.addListener('test-event', 
 ()=> { console.log ("test one") } 
);

Dentro do método addListener():

this.listeners[event] =>  this.listeners['test-event'] 
                  => undefined || []
                  => []

O resultado será:

this.listeners['test-event'] = [];  // empty array

Espero que isso torne o método "addListener" muito claro para decifrar e entender.

Uma observação: várias funções de retornos podem ser registradas para o mesmo evento.

2. O método on()

Este é apenas um apelido para o método "addListener". Usaremos o método "on" mais do que o método "addListener" por uma questão de conveniência.

on(event, fn) {
  return this.addListener(event, fn);
}

3. O método removeListener(event, fn)

O método "removeListener" recebe um nome de evento e a função de retorno como parâmetros. Ele remove o ouvinte mencionado do array de eventos.

OBSERVAÇÃO: Se o evento tiver vários ouvintes, os outros ouvintes não serão afetados.

Primeiro, vamos dar uma olhada no código completo para "removeListener".

removeListener (event, fn) {
    let lis = this.listeners[event];
    if (!lis) return this;
    for(let i = lis.length; i > 0; i--) {
      if (lis[i] === fn) {
        lis.splice(i,1);
        break;
      }
    }
    return this;
}

Aqui está o método "removeListener" explicado passo a passo:

• Obtém o array de ouvintes por evento.
• Se nenhum for encontrado, retornar "this" para encadeamento.
• Se encontrado, percorre todos os ouvintes. Se o ouvinte atual corresponde ao parâmetro "fn", usa o método "splice" do array para removê-lo. Depois, sai do laço.
• Retorna "this" para continuar encadeando.

4. O método off(event, fn)

Este é apenas um apelido para o método "removeListener". Estaremos usando o método "off" mais do que o método "removeListener" por uma questão de conveniência.

off(event, fn) {
    return this.removeListener(event, fn);
  }

5. O método once(eventName, fn)

Adiciona uma função de ouvinte única para o evento chamado "eventName". Na próxima vez que o nome do evento for acionado, esse ouvinte será removido e, em seguida, invocado.

Use para eventos do tipo configuração/inicialização.

Vamos dar uma olhada no código.

once(eventName, fn) {
    this.listeners[event] = this.listeners[eventName] || [];
    const onceWrapper = () => {
      fn();
      this.off(eventName, onceWrapper);
    }
    this.listeners[eventName].push(onceWrapper);
    return this;
}

Aqui está o método "once" explicado passo a passo:

• Obtém o objeto de array de eventos. Se for a primeira vez, o array estará vazio.
• Cria uma função de invólucro chamada "onceWrapper", que invocará a função "fn" quando o evento for emitido e também removerá o ouvinte.
• Adiciona a função de invólucro ao array.
• Retorna "this" para encadeamento.

6. O método emit(eventName, ..args)

Chama de modo síncrono cada um dos ouvintes registrados para o evento com o nome "eventName", na ordem em que foram registrados, passando os argumentos fornecidos para cada um.

Retorna verdadeiro (true) se o evento tiver ouvintes ou falso (false), do contrário.

emit(eventName, ...args) {
    let fns = this.listeners[eventName];
    if (!fns) return false;
    fns.forEach((f) => {
      f(...args);
    });
    return true;
}

Aqui está o método "emit" explicado passo a passo:

• Obtém as funções registradas para o parâmetro nome do evento.
• Se não houver ouvintes, retorna false.
• Para todos os ouvintes de função, invoca a função com os argumentos fornecidos.
• Retorna true quando termina.

7. O método listenerCount(eventName)

Retorna o número de ouvintes escutando o evento com o nome "eventName".

Aqui está o código-fonte:

listenerCount(eventName) {
    let fns = this.listeners[eventName] || [];
    return fns.length;
}

Aqui está o método "listenerCount" explicado passo a passo:

1. Obtém as funções/ouvintes consideradas ou um array vazio se não houver nenhum.
2. Retorna o comprimento (desse array).

8. O método rawListeners(eventName)

Retorna uma cópia do array de ouvintes para o evento com o nome "eventName", incluindo quaisquer invólucros (como os criados por .once()). Os invólucros de .once() nesta implementação não estarão disponíveis se o evento tiver sido emitido uma vez.

rawListeners(event) {
    return this.listeners[event];
}

O código-fonte completo, para referência:

class EventEmitter {
  listeners = {}
  
  addListener(eventName, fn) {
    this.listeners[eventName] = this.listeners[eventName] || [];
    this.listeners[eventName].push(fn);
    return this;
  }

  on(eventName, fn) {
    return this.addListener(eventName, fn);
  }

  once(eventName, fn) {
    this.listeners[eventName] = this.listeners[eventName] || [];
    const onceWrapper = () => {
      fn();
      this.off(eventName, onceWrapper);
    }
    this.listeners[eventName].push(onceWrapper);
    return this;
  }

  off(eventName, fn) {
    return this.removeListener(eventName, fn);
  }

  removeListener (eventName, fn) {
    let lis = this.listeners[eventName];
    if (!lis) return this;
    for(let i = lis.length; i > 0; i--) {
      if (lis[i] === fn) {
        lis.splice(i,1);
        break;
      }
    }
    return this;
  }

  emit(eventName, ...args) {
    let fns = this.listeners[eventName];
    if (!fns) return false;
    fns.forEach((f) => {
      f(...args);
    });
    return true;
  }

  listenerCount(eventName) {
    let fns = this.listeners[eventName] || [];
    return fns.length;
  }

  rawListeners(eventName) {
    return this.listeners[eventName];
  }
}

O código completo está disponível aqui.

Como exercício, sinta-se à vontade para implementar outras APIs de eventos da documentação (em inglês).

Se você gostou deste artigo e deseja ver mais artigos semelhantes, sinta-se à vontade para compartilhá-lo. :)

OBSERVAÇÃO: O código foi otimizado para legibilidade e não para desempenho. Talvez, como exercício, você possa otimizar o código e compartilhá-lo. Não testei completamente para casos extremos e algumas validações podem estar imprecisas, pois foi um rascunho rápido.

Este artigo faz parte de um curso em vídeo que criariei, chamado "Node.JS Master Class — Build Your Own ExpressJS-Like MVC Framework from scratch".

O título do curso, porém, ainda não é definitivo.

O login do Google é um ótimo recurso de login a ser oferecido aos usuários de sua aplicação. Ele facilita para os usuários a criação de uma conta e o login.

Melhor do que isso, o Firebase torna extremamente fácil para os desenvolvedores adicionar suporte ao login do Google. Configurar o ambiente do React Native, no entanto, pode criar alguns desafios, os quais são totalmente tratados neste tutorial.

O React Native e o SDK do Firebase tornam a implementação do login do Google bastante simples. Vamos construir uma aplicação simples que tem apenas um único botão de login do Google. Uma vez que o usuário faça login no Google com sucesso, exibiremos as informações do usuário recuperadas de sua conta do Google, bem como um botão de logout.

Você também pode adicionar o login do Facebook à aplicação se estiver interessado em fornecer ainda mais opções de login para seus usuários. Você pode conferir este guia para login do Facebook no React Native com Firebase (texto em inglês) se quiser aprender mais sobre como configurar o login no Facebook.

Por que usar um botão de login do Google em aplicações para dispositivos móveis?

1. Usar o Google ou outras aplicações de terceiros pode fazer o seu processo de autenticação descomplicado e amigável. Os usuários não precisam perder tempo no processo de registro, o que melhorará tremendamente suas taxas de registro e retenção.
2. É seguro e protegido.
3. Os usuários confiam mais no Google ou no Facebook do que em um portal ou aplicação desconhecida da internet.
4. Ele fornece uma boa experiência ao usuário. Como usuário, temos pouca paciência para qualquer ação ou trabalho que precisemos fazer, especialmente em uma aplicação bastante desconhecida que estamos testando pela primeira vez.

Sem mais delongas, vamos pular diretamente para a parte de desenvolvimento de aplicações deste tutorial.

Configurando o projeto do Firebase

Vá até o console do Firebase e crie um projeto do Firebase:

Aqui, precisaremos configurar o nome do projeto do Firebase e o identificador da aplicação. Então, vamos primeiro criar a aplicação do React Native.

Criando o projeto do React Native

Primeiro, precisamos criar um projeto do React Native usando o seguinte comando:

react-native init instamobile-google-login-demo

Aqui, demos ao projeto o nome instamobile-google-login-demo. Agora, precisamos instalar o pacote react-native-google-signin usando o seguinte comando:

yarn add react-native-google-singin

O pacote react-native-google-signin é usado para implementar as funções de autenticação do Google na aplicação do React Native. Agora, precisamos importar os módulos e componentes necessários do respectivo pacote, conforme mostrado no trecho de código abaixo:

import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from 'react-native-google-signin';

Em seguida, precisamos criar os estados para lidar com o estado de autenticação e as informações do usuário. Para isso, utilizamos o módulo useState, conforme mostrado no trecho de código abaixo:

const [loggedIn, setloggedIn] = useState(false);
const [userInfo, setuserInfo] = useState([]);

Agora, precisamos criar uma função de login para lidar com a autenticação, conforme mostrado no trecho de código abaixo:

_signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const {accessToken, idToken} = await GoogleSignin.signIn();
    setloggedIn(true);
  } catch (error) {
    if (error.code === statusCodes.SIGN_IN_CANCELLED) {
      // usuário cancelou o fluxo de login
      alert('Cancel');
    } else if (error.code === statusCodes.IN_PROGRESS) {
      alert('Signin in progress');
      // operação (por exemplo, o login) já está em andamento
    } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
      alert('PLAY_SERVICES_NOT_AVAILABLE');
      // serviços de execução não disponível ou desatualizado
    } else {
      // algum outro erro ocorreu
    }
  }
};

A seguir, precisamos inicializar a configuração do objeto de login do Google, fazendo uso da função useEffect:

useEffect(() => {
   GoogleSignin.configure({
     scopes: ['email'], // qual API você quer acessar em nome do usuário; o padrão é o email e o perfil
     webClientId:
       '418977770929-g9ou7r9eva1u78a3anassxxxxxxx.apps.googleusercontent.com', // o ID do client do tipo WEB para seu servidor (necessário para verificar o ID do usuário e o acesso off-line)
     offlineAccess: true, // se você deseja acessar a API do Google API em nome do usuário DE SEU SERVIDOR
   });
 }, []);

Por fim, precisamos de uma função que lide com a ação de logout. Para isso, vamos implementar o método signOut, conforme mostrado no trecho de código abaixo:

signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      setloggedIn(false);
      setuserInfo([]);
    } catch (error) {
      console.error(error);
    }
  };

Agora, precisamos apresentar os componentes na tela também. Para isso, vamos fazer uso de vários componentes como View e Button:

return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />

          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <GoogleSigninButton
                style={{width: 192, height: 48}}
                size={GoogleSigninButton.Size.Wide}
                color={GoogleSigninButton.Color.Dark}
                onPress={this._signIn}
              />
            </View>
            <View style={styles.buttonContainer}>
              {!loggedIn && <Text>You are currently logged out</Text>}
              {loggedIn && (
                <Button
                  onPress={this.signOut}
                  title="LogOut"
                  color="red"></Button>
              )}
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );

Agora, se nós executarmos nosso projeto no emulador, teremos os seguintes resultados:

Bem legal, certo? Concluímos a implementação (tanto da interface do usuário quanto da lógica de negócios) a nível do React Native em nosso projeto.

Como você pode ver, temos um botão "Sign in with Google" (Fazer login com o Google, em português) que se converte em um botão de logout assim que a operação de login é concluída com sucesso.

Agora, vamos configurar o pacote do Google SignIn e a aplicação do Firebase.

Configurando os projetos nativos do iOS e do Android

Existem algumas etapas de configuração que precisamos seguir antes que o projeto esteja totalmente funcionando. Elas estão relacionadas principalmente ao verdadeiro lado nativo da aplicação.

Para iOS

No VSCode (ou em qualquer Terminal), basta executar cd ios && pod install. Em seguida, abra o arquivo .xcworkspace no Xcode (da pasta ios) e verifique se os Pods estão incluídos:

Para Android

1. Primeiro, precisamos vincular o módulo nativo.

• Se RN >= 0.60, você não precisa fazer nada, graças à vinculação automática.
• Se RN < 0.60, execute react-native link react-native-google-signin.

2. Atualize o android/build.gradle com a seguinte configuração:

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesAuthVersion = "16.0.1" // <--- use esta versão ou uma mais recente
    }
...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2' // <--- use esta versão ou uma mais recente
        classpath 'com.google.gms:google-services:4.1.0' // <--- use esta versão ou uma mais recente
    }
...
allprojects {
    repositories {
        mavenLocal()
        google() // <--- certifique-se de que isto está incluído
        jcenter()
        maven {
            // Todo o React Native (JS, fontes do Obj-C, binários do Android) é instalado a partir do npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

3. Atualize o android/app/build.gradle com a seguinte configuração:

...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:23.0.1"
    implementation "com.facebook.react:react-native:+"
    implementation(project(":react-native-community_google-signin")) // <--- adicione esta dependência
}

Confira se o react-native link vinculou o módulo nativo – porém, apenas se você usou o react-native link!

Em android/settings.gradle, devemos ter as seguintes configurações:

...
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')

Em seguida, em MainApplication.java , devemos ter o pacote do Google adicionado, conforme o trecho de código a seguir:

import co.apptailor.googlesignin.RNGoogleSigninPackage;  // <--- importar

public class MainApplication extends Application implements ReactApplication {

  ......

  @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNGoogleSigninPackage() // <-- isto precisa estar na lista
      );
    }
  ......

}

Configurando o Firebase

Para iOS

Agora, precisamos começar a configuração do Firebase. No Firebase, precisamos configurar uma aplicação em nuvem do Google. Quando configuramos o método de autenticação no Firebase, no entanto, isso também cria uma aplicação em nuvem do Google.

Primeiro, precisamos criar a aplicação do iOS do Firebase para obter o GoogleServiceinfo.plist, como mostrado na captura de tela abaixo:

Em seguida, copiamos o arquivo GoogleService-info.plist para o projeto do Xcode, como mostrado na captura de tela abaixo:

Agora, precisamos adicionar o ID do client invertido que está presente no arquivo GoogleService-info.plist aos tipos de URL, tal como mostrado na captura de tela abaixo:

O próximo passo é ir até Info → URL Types e preencher o URL Schemes como mostrado na captura de tela abaixo:

Para Android

Primeiro, precisamos criar uma aplicação do Android no Firebase. Para isso, precisamos de um nome de pacote e certificado SHA-1 da nossa aplicação. Em seguida, podemos registrar a aplicação do Firebase, conforme mostrado abaixo:

Podemos obter o nome do pacote em MainApplication.java do nosso projeto, conforme destacado no trecho de código abaixo:

Em seguida, podemos obter a chave SHA-1 no arquivo Keystore. No diretório android/app, podemos executar o comando:

cd android/app ; 
keytool -exportcert -keystore debug.keystore -list -v

Então, a chave SHA-1 aparecerá, conforme mostrado na captura de tela abaixo:

Após criar a aplicação de configuração do Firebase com sucesso, precisamos baixar o arquivo google-services.json e copiá-lo para o diretório, conforme mostrado na captura de tela abaixo:

Agora, a etapa final é configurar um componente de login do Google no Android.

Instalando o pacote do Firebase do React Native

Para instalar o pacote react-native-firebase, versão 6, precisamos executar o seguinte comando no prompt de comando do nosso projeto:

# Using npm 
npm install --save @react-native-firebase/app 
# Using Yarn 
yarn add @react-native-firebase/app

O módulo @react-native-firebase/app deve ser instalado antes de usar qualquer outro serviço do Firebase.

Para iOS

Já adicionamos GoogleService-Info.plist ao Xcode. O que resta é permitir que o Firebase no iOS use as credenciais. O SDK do Firebase para iOS deve ser configurado durante a fase de inicialização da aplicação.

Para fazer isso, precisamos abrir nosso arquivo /ios/{projectName}/AppDelegate.m, e adicionar o seguinte:

Na parte superior do arquivo, precisamos importar o SDK do Firebase:

#import <Firebase.h>

Dentro do método didFinishLaunchingWithOptions existente, precisamos adicionar o seguinte ao topo do método:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Adicione-me --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // Adicione-me --- /\
  // ...
}

Por fim, precisamos executar o seguinte comando para finalizar a instalação do pacote CocoaPods:

cd ios ; pod install

É isso. Concluímos a instalação do pacote principal do Firebase no iOS.

Para Android

Precisamos configurar o Firebase com as credenciais do Android. Para permitir que o Firebase no Android use as credenciais, o plugin google-services deve estar ativado no projeto. Isso requer a modificação em dois arquivos no diretório Android.

Primeiro, adicione o plug-in google-services como uma dependência dentro do arquivo android/build.gradle:

buildscript {
  dependencies {
    // ... outras dependências
    classpath 'com.google.gms:google-services:4.2.0'
    // Adicione-me --- /\
  }
}
// Por fim, execute o plug-in adicionando o seguinte ao final do arquivo /android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

Módulo de autenticação do React Native Firebase

Após a conclusão da instalação, precisamos configurar o pacote pai do Firebase. Em seguida, precisamos instalar o módulo filho para autenticação. Para isso, precisamos abrir um terminal e executar o seguinte comando:

yarn add @react-native-firebase/auth

Para iOS

Precisamos instalar os pods novamente na linha de comando:

cd ios/ && pod install

Para Android

Você pode seguir as instruções na documentação oficial, a qual é necessária somente se você estiver usando o React Native <= 0.59 ou se precisar integrar manualmente a biblioteca.

Ativando o login do Google no Firebase

Precisamos ir ao console do Firebase. Em seguida, na seção Authentication (Autenticação, em português), precisamos clicar em Google, conforme mostrado na captura de tela abaixo:

Em seguida, precisamos habilitar a configuração e salvá-la conforme mostrado na captura de tela abaixo:

No App.js, precisamos importar o auth do pacote Firebase, como mostrado no trecho de código abaixo:

import auth from '@react-native-firebase/auth';

Em seguida, precisamos integrar a configuração de autenticação à função de login. Após um login bem-sucedido, armazenamos o accessToken e o idToken no Firebase. Agora, podemos tentar fazer login com o Google em nossa aplicação do React Native de demonstração.

_signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const {accessToken, idToken} = await GoogleSignin.signIn();
      setloggedIn(true);
      const credential = auth.GoogleAuthProvider.credential(
        idToken,
        accessToken,
      );
      await auth().signInWithCredential(credential);
    } catch (error) {

Agora, concluímos com sucesso a integração do Login do Google em nossa aplicação do React Native:

Podemos ver novos dados que são adicionados ao console do Firebase:

Rastreando o status do usuário

Para verificar o status do login do usuário, usamos o Firebase Auth. Para isso, precisamos adicionar o método onAuthStateChanged ao useEffect para que ele seja executado em cada chamada do evento componentDidMount.

Além disso, precisamos passar um retorno de chamada para a função denominada onAuthStateChanged como um argumento, conforme mostrado no trecho de código abaixo:

useEffect(() => {
    .............
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // remover a inscrição ao desmontar
  }, []);

Na função onAuthStateChanged, tratamos os dados do estado local conforme mostrado no trecho de código abaixo:

function onAuthStateChanged(user) {
    setUser(user);
    console.log(user);
    if (user) setloggedIn(true);
  }

Agora, precisamos armazenar os dados do usuário no estado. Em seguida, tentar exibir os dados do usuário após um login bem-sucedido. Para isso, precisamos usar o seguinte pedaço de código:

{!user && <Text>You are currently logged out</Text>}
{user && (
  <View>
    <Text>Welcome {user.displayName}</Text>
    <Button
      onPress={this.signOut}
      title="LogOut"
      color="red"></Button>
  </View>
)}

Teremos o seguinte resultado em nosso simulador:

Logout do Firebase

Para sair, precisamos remover todas as credenciais do usuário e revogar o token de login do Google.

Primeiro, precisamos aguardar o módulo GoogleSignin revogar o acesso e sair. Em seguida, chamamos o método signOut da autenticação do Firebase para fazer logout com êxito.

A implementação completa do código é fornecida no trecho de código abaixo:

signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      auth()
        .signOut()
        .then(() => alert('Your are signed out!'));
      setloggedIn(false);
      // setuserInfo([]);
    } catch (error) {
      console.error(error);
    }
  };

Como resultado, agora podemos realizar operações de logout, conforme mostrado no trecho de código abaixo:

Conclusão

Neste tutorial, aprendemos como configurar o Login do Google, além de armazenar um token de acesso, aproveitando o Firebase em nosso projeto React Native.

Primeiro, criamos o projeto do React Native com todos os componentes e configurações de funções necessários. Em seguida, aprendemos como configurar o Google Sign In e o Firebase para as plataformas do Android e do iOS. Por fim, configuramos o Firebase na aplicação do React Native usando um pacote do Firebase e exibimos os dados do usuário junto com o botão de logout.

Você pode baixar o código-fonte completo deste tutorial no Github.

A melhor parte é que o Firebase e o Google Auth são compatíveis com todas as linguagens de desenvolvimento para dispositivos móveis, tais como Flutter, Swift ou Kotlin. As etapas de configuração e a abordagem arquitetural são exatamente as mesmas.

Próximos passos

Agora que você aprendeu sobre como configurar o Login do Google com Firebase em aplicações do React Native, aqui estão alguns outros tópicos nos quais você pode dar uma olhada:

• Como criar uma aplicação em React Native e integrá-la com Firebase
• Firebase e React Native —  Notificações push | Armazenamento do Firebase (textos em inglês)
• Mais métodos de autenticação em React Native e Firebase — Login do Google | Login do Facebook | Autenticação OTP/SMS por telefone (textos em inglês)

Se você gostou deste tutorial do React Native, dê uma estrela no repositório do Github e compartilhe-o com sua comunidade. Você pode conferir ainda mais projetos do React Native gratuitos na Instamobile. Obrigado!

Escrever código em Python é uma coisa. Escrever o código em um formato bom é outra. Programadores júniores frequentemente focam em ter a certeza de que seus códigos estão funcionando e se esquecem de formatar o código corretamente ao longo do caminho.

Se você escreve um programa pequeno (com mil linhas de código) você, provavelmente, deixará a formatação do seu código para lá.

Porém, à medida que os programas ficam mais e mais complexos, eles ficam cada vez mais difíceis de entender. Em certo ponto (em torno de 15 mil linhas de código), fica difícil de entender o código que você mesmo escreveu.

A diferença entre trabalhar em um código bem formatado e em um código mal formatado é como a diferença entre morar em um palácio e morar em uma casa suja.

Por que formatar seu código em Python é importante?

Legibilidade

Formatar seu código ajudará você a ler seu código de modo eficiente. Ele parece mais organizado e, quando alguém olhar para ele, terá uma boa impressão.

Ajudará em suas entrevistas de programação

Quando você estiver em uma entrevista de programação, às vezes, os entrevistadores estarão atentos ao fato de você estar ou não formatando o código corretamente. Se você se esquecer dessa formatação, poderá perder sua perspectiva de emprego apenas por causa de seu código mal formatado.

Apoio da equipe

Formatar seu código se torna mais importante quando você está trabalhando em uma equipe. Várias pessoas, provavelmente, estarão trabalhando no mesmo projeto de software. O código que você escreve deve ser entendido por seus colegas de equipe. Caso contrário, torna-se mais difícil trabalhar em conjunto.

Facilita a detecção de bugs

Um código mal formatado pode tornar extremamente difícil a detecção de bugs ou, até mesmo, trabalhar em um programa. Ele também é realmente horrível de se ver. É uma ofensa aos seus olhos.

Pylint e Flake8

A maioria dos desenvolvedores em Python gosta de usar o Pylint ou o Flake8 para verificar seus códigos quanto a erros e regras de estilo.

O Pylint é uma ferramenta que verifica erros em Python. Ele tenta impor um padrão de codificação e procura por coisas que "cheiram mal" no código. Ele também pode procurar por certos erros de tipo, recomendar sugestões sobre como determinados blocos podem ser refatorados e oferecer a você detalhes sobre a complexidade do código.

O Flake8 é uma biblioteca do Python que engloba PyFlakes, pycodestyle e o script de McCabe, de Ned Batchelder. É um ótimo conjunto de ferramentas para verificar sua base de código em relação ao estilo de codificação (PEP8), erros de programação como "biblioteca importada, mas não utilizada", "nome indefinido" e código que não está sendo indentado adequadamente.

O problema é que essas ferramentas apenas relatam os problemas que identificam no código-fonte e deixam o fardo de corrigi-los para os desenvolvedores do Python!

Se tivéssemos uma ferramenta que pudesse identificar e resolver o problema ao mesmo tempo, não seria ótimo? O Black é uma ferramenta que permite que você identifique erros e formate seu código em Python ao mesmo tempo. Assim, você se torna mais produtivo.

Introdução ao Black

Do README do projeto:

Ao usar o Black, você concorda em ceder o controle sobre as minúcias da formatação manual. Em troca, o Black oferece a você velocidade, determinismo e liberdade do pycodestyle reclamando da formatação. Você economizará tempo e energia mental para assuntos mais importantes.

O Black pode reformatar seu arquivo inteiro adequadamente, de acordo com o estilo de código do Black. Isso ajuda seu cérebro a se concentrar no problema que você quer resolver e em programar soluções, em vez de se distrair com a estrutura do código e com pequenas diferenças estilísticas.

Então, vamos ver como usá-lo.

Instalar o Black

O Black pode ser instalado executando pip install black. Ele requer a versão 3.6.0 do Python ou superior para ser executado. Assim que o Black estiver instalado, você terá uma nova ferramenta de linha de comando chamada Black disponível em seu terminal e estará pronto para começar!

Para começar imediatamente com padrões sensatos, escolha o arquivo em Python que deseja formatar e, em seguida, escreva black filename.py no terminal. O Black, então, formatará seu arquivo em Python.

Agora, veremos o que o Black pode nos ajudar a fazer.

Formatar um único arquivo

Vejamos este exemplo simples: aqui estão minhas duas funções no meu arquivo em Python, chamado sample_code.py.

Você pode usar black sample_code.py no terminal para mudar o formato. Após executar o Black, você verá a seguinte saída:

Em seguida, abra o arquivo sample_code.py para ver o código em Python formatado:

O código em Python, agora, está formatado e mais legível.

Formatar múltiplos arquivos

Para formatar mais de um arquivo em Python, escreva black nome_da_pasta/ no terminal.

Três arquivos em Python dentro da pasta chamada python_with_black foram reformatados.

Verificando arquivos para formatação

Se você não quer que o Black altere seu arquivo, mas quer saber se ele acha que um arquivo deveria ser alterado, você pode usar um dos seguintes comandos:

black --check .: esse comando verificará quais arquivos em Python podem ser formatados na pasta atual (mas não os modifica).

black --check --diff file_name.py : esse comando mostra o que precisa ser feito no arquivo, mas não o modifica.

Alterar o número de caracteres por linha

Observe que o padrão do Black é de 88 caracteres para o comprimento da linha, mas você pode alterar isso usando a opção -l ou - -line-length.

Por exemplo, para alterar para 60 caracteres: black -l 60 python_file.py.

Black no Jupyter Notebook

Para usuários do Jupyter Notebook, você ainda pode formatar automaticamente seu código em Python com esta simples extensão chamada Jupyter Black. Esta extensão reformata/embeleza o código em uma célula de código do Notebook usando o Black.

A extensão Jupyter Black fornece

• Um botão para a barra de ferramentas.
• Um atalho de teclado para reformatar a célula de código atual (padrão: Ctrl-B).
• Um atalho de teclado para reformatar todas as células de código (padrão: Ctrl-Shift-B).

Instalar o Jupyter Black

Primeiro, assegure-se de ter instalado jupyter-contrib-nbextensions e black. Então, execute os seguintes comandos.

jupyter nbextension install https://github.com/drillan/jupyter-black/archive/master.zip — user

Em seguida, habilite a extensão executando:

jupyter nbextension enable jupyter-black-master/jupyter-black

Agora, você pode começar a formatar seu código em Python em cada célula do Notebook.

Primeiro, selecione a célula do notebook na qual você deseja formatar seu código em Python. Em seguida, clique no botão de extensão chamado Black.

Então, selecione o botão Jupyter Black:

Integração com o editor

Você pode integrar o Black com os seus editores favoritos. Atualmente, o Black suporta PyCharm/IntelliJ IDEA, Wing IDE, Vim, Visual Studio Code, Sublime Text 3, Atom/Nuclide, Kakoune e Thonny. Siga as instruções aqui para integrar o Black com seu editor favorito (texto em inglês).

Se você quiser aprender mais sobre o Black, recomendo assistir a palestra de Łukasz Langa na PyCon 2019 (em inglês).

Se você aprendeu algo novo ou gostou de ler este artigo, compartilhe-o para que outras pessoas possam vê-lo. Até lá, nos vemos na próxima publicação! Você também pode encontrar o autor pelo Twitter.