O React (também conhecido como React.js) é uma das bibliotecas de desenvolvimento para front-end em JavaScript mais populares. Aqui está uma coleção de sintaxe e uso do React que você pode usar como um guia prático ou referência.

Exemplo de componente do React

Os componentes são reutilizáveis no React.js. Você pode injetar valores nas props, conforme indicado abaixo:

function Welcome(props) {
  return <h1>Olá, {props.name}</h1>;
}

const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

name="Faisal Arkan" será o valor passado por {props.name} a partir da função Welcome(props) e retornará um componente que recebeu o valor name="Faisal Arkan". Depois disso, o React renderizará o elemento em html.

Outras maneiras de se declarar componentes

Há muitas maneiras de se declarar componentes ao usar o React.js. Há dois tipos de componentes: componentes sem estado e componentes com estado.

Com estado

Componentes do tipo classe

class Cat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      humor: 'feliz'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

Sem estado

Componentes funcionais (arrow functions do ES6)

const Cat = props => {
  return (  
    <div>
      <h1>{props.name}</h1>
      <p>{props.color}</p>
    </div>;
  );
};

Componentes de retorno implícito

const Cat = props => 
  <div>
    <h1>{props.name}</h1>
    <p>{props.color}</p>
  </div>;

Os fragmentos são uma forma de renderizar vários elementos sem usar um elemento wrapper. Ao tentar renderizar elementos sem tags envolvendo no JSX, você verá a mensagem de erro "Adjacent JSX elements must be wrapped in an enclosing tag" (Os elementos do JSX adjacentes devem ser envolvidos por tags). Isso ocorre porque, quando o JSX transpila, ele cria elementos com seus nomes de tag correspondentes e não sabe qual nome de tag usar se forem encontrados vários elementos.

No passado, uma solução frequente para isso era usar uma div wrapper para resolver esse problema. No entanto, a versão 16 do React trouxe a adição do Fragment, que faz com que isso não seja mais necessário.

O Fragment atua como um wrapper sem adicionar divs desnecessárias ao DOM. Você pode usá-lo diretamente da importação do React ou desconstruí-lo:

import React from 'react';

class MyComponent extends React.Component {
  render(){
    return (
      <React.Fragment>
        <div>Eu sou um elemento!</div>
        <button>Eu sou outro elemento</button>
      </React.Fragment>
    );
  }
}

export default MyComponent;

// Descontruído
import React, { Component, Fragment } from 'react';

class MyComponent extends Component {
  render(){
    return (
      <Fragment>
        <div>Eu sou um elemento!</div>
        <button>Eu sou outro elemento</button>
      </Fragment>
    );
  }
}

export default MyComponent;

A versão 16.2 do React simplificou ainda mais esse processo, permitindo que tags JSX vazias fossem interpretadas como fragmentos:

return (
  <>
    <div>Eu sou um elemento!</div>
    <button>Eu sou outro elemento</button>
  </>
);

JSX

JSX é a abreviação de JavaScript XML.

JSX é uma expressão que usa instruções HTML válidas no JavaScript. Você pode atribuir essa expressão a uma variável e usá-la em outro lugar. Você pode combinar outras expressões válidas do JavaScript e JSX dentro dessas instruções HTML, colocando-as entre chaves ({}). O Babel também compila o JSX em um objeto do tipo React.createElement().

Expressões de uma linha e de várias linhas

As expressões de linha única são simples de usar.

const one = <h1>Olá mundo!</h1>;

Quando precisar usar várias linhas em uma única expressão do JSX, escreva o código dentro de um único par de parênteses.

const two = (
  <ul>
    <li>Uma</li>
    <li>Duas</li>
  </ul>
);

Usando apenas tags HTML

const greet = <h1>Olá mundo!</h1>;

Combinação de expressões do JavaScript com tags HTML

Podemos usar variáveis do JavaScript entre chaves.

const who = "Quincy Larson";
const greet = <h1>Olá {who}!</h1>;

Também podemos chamar outras funções do JavaScript entre chaves.

function who() {
  return "mundo";
}
const greet = <h1>Olá {who()}!</h1>;

Somente uma única tag pai é permitida

Uma expressão do JSX deve ter apenas uma tag pai. Podemos adicionar várias tags aninhadas somente no elemento pai.

// Isso é válido.
const tags = (
  <ul>
    <li>Uma vez</li>
    <li>Duas vezes</li>
  </ul>
);

// Isso não é válido.
const tags = (
  <h1>Olá mundo!</h1>
  <h3>Esta é minha lista especial:</h3>
  <ul>
    <li>Uma vez</li>
    <li>Duas vezes</li>
  </ul>
);

Exemplo de state no React

O state (ou estado, em português) é o local de onde vêm os dados.

Devemos sempre tentar tornar nosso state o mais simples possível e minimizar o número de componentes com estado. Se tivermos, por exemplo, dez componentes que precisam de dados do estado, devemos criar um componente contêiner que manterá o estado de todos eles.

O state é, basicamente, como um objeto global que está disponível em todos os lugares em um componente.

Exemplo de um componente de classe com estado:

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
      
    // Declaramos o estado conforme mostrado abaixo
    
    this.state = {                           
      x: "Este é o x do estado",    
      y: "Este é o y do estado"
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.x}</h1>
        <h2>{this.state.y}</h2>
      </div>
    );
  }
}
export default App;

Outro exemplo:

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    
    // Declaramos o estado conforme mostrado abaixo
    this.state = {                           
      x: "Este é o x do estado",    
      y: "Este é o y do estado"
    }
  }

  render() {
    let x1 = this.state.x;
    let y1 = this.state.y;

    return (
      <div>
        <h1>{x1}</h1>
        <h2>{y1}</h2>
      </div>
    );
  }
}
export default App;

Atualização do state

Você pode alterar os dados armazenados no state da sua aplicação usando o método setState do seu componente.

this.setState({ value: 1 });

Lembre-se de que setState é assíncrono. Portanto, você deve ter cuidado ao usar o estado atual para definir um novo estado. Um bom exemplo disso seria se você quisesse incrementar um valor em seu state.

O caminho errado

this.setState({ value: this.state.value + 1 });

Isso pode levar a um comportamento inesperado em sua aplicação se o código acima for chamado várias vezes no mesmo ciclo de atualização. Para evitar isso, você pode passar uma função de retorno de chamada do atualizador para setState em vez de um objeto.

O caminho certo

this.setState(prevState => ({ value: prevState.value + 1 }));

A maneira mais limpa

this.setState(({ value }) => ({ value: value + 1 }));

Quando apenas um número limitado de campos no objeto do state é necessário, a destruição do objeto pode ser usada para um código mais limpo.

Exemplo de state x props em React

Quando começamos a trabalhar com componentes do React, frequentemente ouvimos dois termos. Eles são state e props. Portanto, neste artigo, exploraremos o que são esses termos e como eles se diferenciam.

State:

• O state é algo que pertence a um componente. Ele pertence a esse componente específico em que é definido. Por exemplo, a idade de uma pessoa é um state (estado) dessa pessoa.
• O state é mutável, mas ele só pode ser alterado pelo componente que o possui. Assim como eu só posso alterar minha idade, ninguém mais pode.
• Você pode alterar um state usando this.setState()

Veja o exemplo abaixo para ter uma ideia de state:

Person.js

  import React from 'react';

  class Person extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        age:0
      this.incrementAge = this.incrementAge.bind(this)
    }

    incrementAge(){
      this.setState({
        age:this.state.age + 1;
      });
    }

    render(){
      return(
        <div>
          <label>My age is: {this.state.age}</label>
          <button onClick={this.incrementAge}>Grow me older !!<button>
        </div>
      );
    }
  }

  export default Person;

No exemplo acima, age (idade) é o estado do componente Person (pessoa).

Props:

• As props são semelhantes aos argumentos de métodos. Elas são passadas para um componente onde esse componente é usado.
• As props são imutáveis. Elas são somente leitura.
• Veja o exemplo abaixo para ter uma ideia das props:

Person.js

  import React from 'react';

  class Person extends React.Component{
    render(){
      return(
        <div>
          <label>I am a {this.props.character} person.</label>
        </div>
      );
    }
  }

  export default Person;

  const person = <Person character = "good"></Person>

No exemplo acima, const person =  <Person character = "good"></Person>, estamos passando a prop character = "good" para o componente Person.

Ele dá como resultado "I am a good person" (em português, "sou uma boa pessoa" – o que é verdade).

Há muito mais a aprender sobre state e props. Muitas coisas podem ser aprendidas quando você realmente se dedica à programação. Portanto, coloque a mão na massa e saia programando.

Exemplo de componente de ordem superior do React

No React, um componente de ordem superior (do inglês, Higher-Order Component, ou HOC) é uma função que recebe um componente e retorna um novo componente. Os programadores usam HOCs para obter a reutilização da lógica do componente.

Se você já usou o Redux Connect, já trabalhou com componentes de ordem superior.

A ideia central é:

const EnhancedComponent = enhance(WrappedComponent);

Onde:

• enhance é o componente de ordem superior;
• WrappedComponent é o componente que você deseja aprimorar; e
• EnhancedComponent é o componente criado.

Este poderia ser o corpo da HOC aprimorada:

function enhance(WrappedComponent) {
  return class extends React.Component {
    render() {
      const extraProp = 'This is an injected prop!';
      return (
        <div className="Wrapper">
          <WrappedComponent
            {...this.props}
            extraProp={extraProp}
          />
        </div>
      );
    }
  }
} 

Nesse caso, enhance retorna uma classe anônima, que estende React.Component. O novo componente está fazendo três coisas simples:

• Renderizar o WrappedComponent em um elemento div;
• Passar suas próprias props para WrappedComponent; e
• Injetar uma prop adicional a WrappedComponent.

Os HOCs são apenas um padrão que usa o poder da natureza composicional do React. Eles adicionam recursos a um componente. Há muito mais coisas que você pode fazer com eles!

Você já quis criar algo, mas não tinha ideia do que fazer? Assim como os autores, às vezes, têm "bloqueio de escritor", isso também é verdade para os desenvolvedores.

Juntamente com meu amigo Jim, criamos uma coleção de ideias de aplicações que se destina a resolver esse problema de uma vez por todas!

Essas aplicações são:

• ótimas para aprimorar suas habilidades de programação
• ótimas para dar experiência com novas tecnologias
• ótimas para serem adicionadas ao seu portfólio para impressionar seu próximo empregador/cliente
• ótimas para serem usadas como exemplo em tutoriais (artigos ou vídeos)
• fáceis de completar e também facilmente ampliáveis com novos recursos

Esta não é apenas uma simples lista de projetos, mas uma coleção que descreve cada projeto com detalhes suficientes para que você possa desenvolvê-los do zero!

Cada especificação de projeto contém o seguinte:

1. Um objetivo claro e descritivo
2. Uma lista de histórias de usuários que devem ser implementadas. Essas histórias atuam mais como uma diretriz do que como uma lista forçada de tarefas pendentes – sinta-se à vontade para adicionar seus próprios recursos, se desejar
3. Uma lista de recursos adicionais que aprimoram não apenas o projeto básico, mas também suas habilidades ao mesmo tempo
4. Todos os recursos e links para ajudá-lo a encontrar o que você precisa para concluir o projeto

Projetos

Todos os projetos são divididos em três níveis com base no conhecimento e na experiência necessários para concluí-los. Esses níveis são:

1. Iniciante – Desenvolvedores nos estágios iniciais de sua jornada de aprendizado. Aqueles que normalmente se concentram na criação de aplicações voltadas para o usuário.
2. Intermediário – Desenvolvedores em um estágio intermediário de aprendizado e experiência. Eles se sentem confortáveis em UI/UX, usando ferramentas de desenvolvimento e criando aplicações que usam serviços de API.
3. Avançado – Desenvolvedores que têm todos os conhecimentos acima e estão aprendendo técnicas mais avançadas, como a implementação de aplicações de back-end e serviços de banco de dados.

Abaixo, você encontrará 5 projetos para cada uma das camadas (15 no total), mas há mais de 30 projetos (no momento) neste repositório do GitHub. Não deixe de conferir, pois estamos planejando adicionar mais projetos no futuro. Sua ajuda é bem-vinda! Mais informações sobre isso na seção Contribuição abaixo.

1. Aplicação de notas

Nível: 1 - Iniciante

Descrição: Crie e armazene suas anotações para uso posterior!

Histórias de usuário

• O usuário pode criar uma nota
• O usuário pode editar uma nota
• O usuário pode excluir uma nota
• Ao fechar a janela do navegador, as anotações serão armazenadas e, quando o usuário retornar, os dados serão recuperados

Recursos adicionais

• O usuário pode criar e editar uma nota no formato markdown. Ao salvar, ele converterá markdown em HTML
• O usuário pode ver a data em que criou a nota

Links e recursos úteis

• localStorage
• Guia de Markdown (em inglês)
• Marked – um parser de markdown (instruções do projeto em inglês)

Exemplo de projeto

2. Luzes de Natal

Nível: 1 - Iniciante

Descrição: a aplicação de Luzes de Natal depende de seus talentos de desenvolvimento para criar uma exibição de luzes hipnotizantes. Sua tarefa é desenhar sete círculos coloridos em uma fileira e, com base em um cronômetro, alterar a intensidade de cada círculo. Quando um círculo é iluminado, seu antecessor retorna à intensidade normal.

Isso simula o efeito de uma série de luzes piscantes, semelhante às exibidas durante as festas de Natal.

Histórias de usuário

• O usuário pode pressionar um botão para iniciar e parar a exibição
• O usuário pode alterar o intervalo de tempo que controla a mudança na intensidade

Recursos adicionais

• O usuário pode selecionar a cor usada para preencher cada círculo
• O usuário pode especificar o valor da intensidade
• O usuário pode alterar o tamanho de qualquer círculo na linha
• O usuário pode especificar o número de linhas a serem incluídas na exibição, podendo escolher de uma a sete linhas

Links e recursos úteis

• Imagem de amostra
• Adafruit LED Matrix

Exemplo de projeto

3. FlipImage

Nível: 1 - Iniciante

Descrição: É importante que os desenvolvedores da Web compreendam os fundamentos da manipulação de imagens, pois as aplicações avançadas da Web dependem de imagens para agregar valor à interface e à experiência do usuário (UI/UX).

O FlipImage explora um aspecto da manipulação de imagens: a rotação de imagens. Essa aplicação exibe um painel quadrado contendo uma única imagem apresentada em uma matriz 2x2. Usando um conjunto de setas para cima, para baixo, para a esquerda e para a direita adjacentes a cada uma das imagens, o usuário pode virá-las na vertical ou na horizontal.

Você deve usar somente HTML, CSS e Javascript nativos para implementar essa aplicação. Pacotes de imagens e bibliotecas não são permitidos.

Histórias de usuário

• O usuário pode ver um painel contendo uma única imagem repetida em uma matriz 2x2
• O usuário pode virar qualquer uma das imagens na vertical ou na horizontal usando um conjunto de setas para cima, para baixo, para a esquerda e para a direita ao lado da imagem

Recursos adicionais

• O usuário pode alterar a imagem padrão inserindo o URL de uma imagem diferente em um campo de entrada
• O usuário pode exibir a nova imagem clicando no botão "Display" (Exibir) ao lado do campo de entrada
• O usuário poderá ver uma mensagem de erro se o URL das novas imagens não for encontrado

Links e recursos úteis

• Como virar uma imagem (em inglês)
• Criando uma animação de inversão de CSS (em inglês)

Exemplo de projeto

4. Aplicação de questionário

Nível: 1 - Iniciante

Descrição: Pratique e teste seus conhecimentos respondendo a perguntas em uma aplicação de questionário.

Como desenvolvedor, você pode criar uma aplicação de questionário para testar as habilidades em programação de outros desenvolvedores (em HTML, CSS, JavaScript, Python, PHP etc.)

Histórias de usuário

• O usuário pode iniciar o questionário pressionando um botão
• O usuário pode ver uma pergunta com 4 respostas possíveis
• Depois de selecionar uma resposta, exiba a próxima pergunta para o usuário. Faça isso até que o questionário seja concluído
• No final, o usuário pode ver as seguintes estatísticas:

1. Tempo necessário para concluir o questionário
2. Quantas respostas corretas ele obteve?
3. Uma mensagem mostrando se ele foi aprovado ou reprovado no teste

Recursos adicionais

• O usuário pode compartilhar o resultado de um questionário nas mídias sociais
• Adicione vários testes à aplicação. O usuário pode selecionar quais deles deseja responder
• O usuário pode criar uma conta e ter todas as pontuações salvas em seu painel
• O usuário pode concluir um questionário várias vezes

Links e recursos úteis

• Abrir banco de dados de curiosidades (em inglês)

Exemplos de projetos

Aplicação de questionário criada com React (aguarde o carregamento, pois ela está hospedada no Heroku)

5. Conversor de números romanos para decimais

Nível: 1 - Iniciante

Descrição: O sistema numérico representado pelos algarismos romanos teve origem na Roma antiga e continuou sendo a forma usual de escrever números em toda a Europa até o final da Idade Média. Os números romanos, como usados atualmente, empregam sete símbolos, cada um com um valor inteiro fixo.

Veja na tabela abaixo o Símbolo - pares de Valores:

• I — 1
• V — 5
• X — 10
• L — 50
• C — 100
• D — 500
• M — 1000

Histórias de usuário

• O usuário deve ser capaz de inserir um número romano em um campo de entrada
• O usuário poderá ver os resultados em um único campo de saída contendo o equivalente decimal (base 10) do número romano que foi inserido ao pressionar um botão
• Se um símbolo errado for inserido, o usuário deverá ver um erro

Recursos adicionais

• O usuário pode ver a conversão ser feita automaticamente ao digitar
• O usuário deve ser capaz de converter de decimal para romano (e vice-versa)

Links e recursos úteis

• Uma explicação sobre os números romanos

Exemplo de projeto

Conversor de números romanos (instruções em inglês)

6. Aplicação localizadora de livros

Nível: 2 - Intermediário

Descrição: Criar uma aplicação que permita aos usuários pesquisar livros inserindo uma consulta (título, autor etc.). Exibir os livros resultantes em uma lista na página com todos os dados correspondentes.

Histórias de usuário

• O usuário pode inserir uma consulta de pesquisa em um campo de entrada
• O usuário pode enviar a consulta. Isso chamará uma API que retornará um array de livros com os dados correspondentes (título, autor, data de publicação, imagem etc.)
• O usuário pode ver a lista de livros que aparecem na página

Recursos adicionais

• Para cada item da lista, adicionar um link que enviará o usuário a um site externo que tenha mais informações sobre o livro
• Implementar um design responsivo
• Adicionar animações de carregamento

Links e recursos úteis

Você pode usar a API do Google Livros

Exemplo de projeto

Busca de Livros - React

7. Jogo de memória de cartas

Nível: 2 - Intermediário

Descrição: O jogo de memória de cartas é um jogo em que você precisa clicar em uma carta para ver a imagem que está embaixo dela e tentar encontrar a imagem correspondente embaixo das outras cartas.

Histórias de usuário

• O usuário pode ver uma grade com n x n cartas (n é um número inteiro), sendo que todas as cartas estão inicialmente viradas para baixo (estado oculto)
• O usuário pode clicar em um botão para iniciar o jogo e, quando esse botão for clicado, um cronômetro será iniciado
• O usuário pode clicar em qualquer carta para revelar a imagem que está embaixo dela (alterá-la para o estado visível). A imagem será exibida até que o usuário clique em uma segunda carta

Quando o usuário clica na segunda carta:

• Se houver uma correspondência, as duas cartas serão eliminadas do jogo (seja escondendo-as/removendo-as ou deixando-as visíveis)
• Se não houver uma correspondência, as duas cartas voltarão ao seu estado original (estado oculto)
• Quando todas as correspondências tiverem sido encontradas, o usuário poderá ver uma caixa de diálogo com uma mensagem de parabéns e um contador mostrando o tempo que levou para terminar o jogo

Recursos adicionais

• O usuário pode escolher entre vários níveis de dificuldade (Fácil, Médio, Difícil). Aumentar a dificuldade significa: diminuir o tempo disponível para concluir e/ou aumentar o número de cartas
• O usuário pode ver as estatísticas do jogo (número de vezes que ganhou/perdeu, o melhor tempo para cada nível)

Links e recursos úteis

• Wikipédia (em inglês)

Exemplos de projetos

Flip - jogo de memória de cartas (em inglês)

SMB3 Jogo de memória de cartas (em inglês)

8. Gerador de tabelas em markdown

Nível: 2 - Intermediário

Descrição: Crie uma aplicação que converterá uma tabela normal com dados fornecidos pelo usuário (opcionalmente) em uma tabela formatada em markdown.

Histórias de usuário

• O usuário pode criar uma tabela HTML com um determinado número de linhas e colunas
• O usuário pode inserir texto em cada célula da tabela HTML
• O usuário pode gerar uma tabela formatada em markdown que conterá os dados da tabela HTML
• O usuário pode visualizar a tabela formatada em markdown

Recursos adicionais

• O usuário pode copiar a tabela formatada do markdown para a área de transferência pressionando um botão
• O usuário pode inserir uma nova linha ou coluna em um local especificado
• O usuário pode excluir uma linha ou coluna completamente
• O usuário pode alinhar (à esquerda, à direita ou ao centro) uma célula, uma coluna, uma linha ou a tabela inteira

Links e recursos úteis

• Guia de markdown (em inglês)
• Marked - Um analisador de markdown (em inglês)
• Como copiar para a área de transferência (em inglês)

Exemplo de projeto

Gerador de tabelas/Tabelas Markdown (em inglês)

9. Arte com strings

Nível: 2 - Intermediário

Descrição: O objetivo de Arte com strings é proporcionar ao desenvolvedor a prática de criar um gráfico animado simples, usando geometria no algoritmo de animação e criando algo que seja visualmente agradável de assistir.

A Arte com strings desenha uma única linha multicolorida que se move suavemente até que uma extremidade toque em um lado da janela que a envolve. No ponto em que ela toca, um efeito de "salto" é aplicado para mudar sua direção.

Um efeito de ondulação é criado mantendo apenas 10 a 20 imagens da linha à medida que ela se move. As imagens mais antigas são progressivamente desbotadas até desaparecerem.

As bibliotecas de animação não são permitidas. Use apenas HTML/CSS/JavaScript puro.

Histórias de usuário

• Comece desenhando uma linha multicolorida em uma posição aleatória dentro do limite da janela que a envolve
• A cada 20 ms, desenhe uma cópia da linha em uma nova posição com base em uma trajetória – a distância incremental da linha anterior com base nos pontos finais
• Quando um dos pontos de extremidade da linha tocar o limite da janela circundante, mude sua direção e altere aleatoriamente seu ângulo
• Diminua progressivamente a intensidade das linhas antigas de modo que apenas as 10 a 20 linhas mais recentes fiquem visíveis para criar a sensação de movimento ou "ondulação"

Recursos adicionais

• O usuário pode especificar o comprimento da linha e sua velocidade
• O usuário pode especificar as várias linhas dentro da janela, todas se movendo ao longo de diferentes trajetórias e velocidades

Links e recursos úteis

• Uso de animações e transições de várias etapas (em inglês)
• Noções básicas de animação (em inglês)

Exemplo de projeto

Este projeto é muito próximo do que pretendemos aqui, mas tem uma pequena janela de fechamento e é monocromático. Daniel Cortes

10. Aplicação de tarefas por fazer

Nível: 2 - Intermediário

Descrição: A aplicação de tarefas clássica em que o usuário pode anotar todas as coisas que deseja realizar.

Histórias de usuário

• O usuário pode ver um campo de entrada no qual ele pode digitar um item de tarefa
• Ao pressionar Enter (ou um botão), o usuário pode enviar o item de tarefa e pode ver que ele está sendo adicionado a uma lista de tarefas
• O usuário pode marcar uma tarefa como concluída
• O usuário pode remover um item de tarefa pressionando um botão (ou o próprio item de tarefa)

Recursos adicionais

• O usuário pode editar uma tarefa
• O usuário pode ver uma lista com todas as tarefas concluídas
• O usuário pode ver uma lista com todas as tarefas ativas
• O usuário pode ver a data em que criou a tarefa
• Ao fechar a janela do navegador, as tarefas serão armazenadas e, quando o usuário retornar, os dados serão recuperados

Links e recursos úteis

• localStorage (armazenamento local)

Exemplos de projetos

Aplicação de tarefas desenvolvida com React

11. Mecanismo do jogo de batalha naval

Nível: 3 - Avançado

Descrição: O mecanismo do jogo de batalha naval (em inglês, Battleship Game Engine, ou BGE) implementa o clássico jogo de tabuleiro baseado em turnos como um pacote separado de qualquer camada de apresentação. Esse é um tipo de padrão arquitetônico que é útil em muitas aplicações, pois permite que qualquer número de aplicações utilize o mesmo serviço.

O próprio BGE é invocado por meio de uma série de chamadas de função em vez de ações diretamente acopladas do usuário final. Nesse aspecto, o uso do BGE é semelhante ao uso de uma API ou de uma série de rotas expostas por um servidor da web.

Esse desafio exige que você desenvolva o BGE e uma camada de apresentação baseada em texto muito fina para testes, separada do próprio mecanismo. Devido a isso, as histórias de usuário abaixo estão divididas em dois conjuntos: um para o BGE e outro para a camada de apresentação baseada em texto.

O BGE é responsável por manter o estado do jogo.

Histórias de usuário

BGE

• O chamador pode invocar uma função startGame() para iniciar um jogo para um jogador. Essa função gerará um tabuleiro de jogo 8x8 que consiste em 3 navios com uma largura de um quadrado e um comprimento de:

1. Destroyer: 2 quadrados
2. Cruzador: 3 quadrados
3. Navio de guerra: 4 quadrados

startGame() colocará aleatoriamente esses navios no tabuleiro em qualquer direção e retornará um array que representa o posicionamento dos navios.

• O chamador pode invocar uma função shoot() passando as coordenadas de linha e coluna da célula-alvo no tabuleiro de jogo. shoot() retornará indicadores que representam se o tiro resultou em acerto ou erro, o número de navios restantes (ou seja, ainda não afundados), o array de posicionamento de navios e o array atualizado de acertos e erros.

As células no array de acertos e erros conterão um espaço se ainda não tiverem sido alvos, O se tiverem sido alvos, mas nenhuma parte de um navio estava naquele local, ou X se a célula tiver sido ocupada por parte de um navio.

Camada de apresentação baseada em texto

• O usuário pode ver o array de acertos e erros exibido como uma representação bidimensional de caracteres do tabuleiro de jogo retornado pela função startGame().
• O usuário pode ser solicitado a inserir as coordenadas de um quadrado alvo no tabuleiro de jogo.
• O usuário pode ver uma exibição atualizada do array de acertos e erros depois de dar um tiro.
• O usuário pode ver uma mensagem após cada disparo, indicando se o disparo resultou em acerto ou erro.
• O usuário pode ver uma mensagem de parabéns após o tiro que afunda o último navio restante.
• O usuário pode ser solicitado a jogar novamente no final de cada jogo. A recusa em jogar novamente interrompe o jogo.

Recursos adicionais

BGE

• O chamador pode especificar o número de linhas e colunas no tabuleiro do jogo como um parâmetro para a função startGame().
• O chamador pode invocar uma função gameStats() que retorna um objeto Javascript contendo métricas para o jogo atual. Por exemplo, o número de turnos jogados, o número atual de acertos e erros etc.
• O chamador pode especificar o número de jogadores (1 ou 2) ao chamar startGame(), que gerará um tabuleiro para cada jogador preenchido aleatoriamente com navios.

shoot() aceitará o número do jogador para o qual a jogada está sendo realizada, juntamente com as coordenadas da jogada. Os dados retornados serão para esse jogador.

Camada de apresentação baseada em texto

• O usuário pode ver as estatísticas atuais do jogo em qualquer ponto inserindo as estatísticas da frase no lugar das coordenadas do alvo. Observe que isso requer a função gameStats() no BGE.
• O usuário pode especificar que um jogo para dois jogadores deve ser jogado, com cada jogador alternando turnos na mesma sessão de terminal (observe que isso requer os recursos de bônus correspondentes no BGE).
• O usuário pode ver o número do jogador nos alertas associados às entradas em cada turno.
• O usuário pode ver o tabuleiro de ambos os jogadores no final de cada turno.

Links e recursos úteis

• Jogo de Batalha Naval (Wikipédia)
• Regras do jogo de Batalha Naval (Hasbro) (em inglês)

Exemplo de projetos

Este vídeo do YouTube (em inglês) mostra como é jogado um jogo de batalha naval baseado em texto.

O exemplo a seguir é fornecido como uma demonstração do jogo de batalha naval, caso ele não seja familiar para você. Lembre-se de que você deve implementar uma camada de apresentação baseada em texto para teste. Jogo de Batalha Naval por Chris Brody (em inglês).

12. Aplicação de bate-papo

Nível: 3 - Avançado

Descrição: Interface de bate-papo em tempo real em que vários usuários podem interagir entre si enviando mensagens.

Como MVP (Minimum Viable Product – em português, produto viável mínimo), você pode se concentrar na criação da interface de bate-papo. A funcionalidade em tempo real pode ser adicionada posteriormente (nos recursos adicionais).

Histórias de usuário

• O usuário é solicitado a inserir um nome de usuário quando visita a aplicação de bate-papo. O nome de usuário será armazenado na aplicação
• O usuário pode ver um campo de entrada onde pode digitar uma nova mensagem
• Ao pressionar a tecla Enter ou clicar no botão Enviar, o texto será exibido na caixa de bate-papo ao lado do nome de usuário (por exemplo, Fulano: Olá, mundo!)

Recursos adicionais

• As mensagens ficarão visíveis para todos os usuários que estiverem na aplicação de bate-papo (usando WebSockets)
• Quando um novo usuário entra no bate-papo, uma mensagem é exibida para todos os usuários existentes
• As mensagens são salvas em um banco de dados
• O usuário pode enviar imagens, vídeos e links que serão exibidos corretamente
• O usuário pode selecionar e enviar um emoji
• Os usuários podem conversar em particular
• Os usuários podem participar de canais sobre tópicos específicos

Links e recursos úteis

• Socket.io (em inglês)
• Como criar uma aplicação de bate-papo no React.js em 10 minutos - artigo (em inglês)

Exemplo de projeto

13. Linha do tempo do GitHub

Nível: 3 - Avançado

Descrição: As APIs e a representação gráfica de informações são marcas registradas das aplicações modernas da web. O GitHub Timeline combina os dois para criar um histórico visual da atividade de um usuário no GitHub.

O objetivo do GitHub Timeline é aceitar um nome de usuário do GitHub e produzir uma linha do tempo contendo cada repositório, com as anotações dos nomes dos repositórios, a data em que foram criados e suas descrições. A linha do tempo deve ser compartilhada com um possível empregador. Ela deve ser fácil de ler e fazer uso eficaz de cores e tipografia.

Somente os repositórios públicos do GitHub devem ser exibidos.

Histórias de usuário

• O usuário pode inserir um nome de usuário do GitHub
• O usuário pode clicar em um botão "Generate" (Gerar) para criar e exibir a linha do tempo do repositório do usuário nomeado
• O usuário poderá ver uma mensagem de aviso se o nome de usuário do GitHub não for válido.

Recursos adicionais

• O usuário pode ver um resumo do número de repositórios registrados pelo ano em que foram criados

Links e recursos úteis

O GitHub oferece duas APIs que você pode usar para acessar os dados do repositório. Você também pode optar por usar um pacote do NPM para acessar a API do GitHub.

A documentação da API do GitHub pode ser encontrada em:

• GitHub REST API V3 (em inglês)
• GitHub GraphQL API V4 (em inglês)

O código de exemplo que mostra como usar a API do GitHub é:

Você pode usar esse comando CURL para ver o JSON retornado pela API REST V3 para seus repositórios:

curl -u "user-id" https://api.github.com/users/user-id/repos

Exemplos de projetos

14. Soletrar

Nível: 3 - Avançado

Descrição: Saber soletrar é parte fundamental para ser fluente em qualquer idioma. Seja você é uma criança aprendendo a soletrar ou um indivíduo aprendendo um novo idioma, a prática ajuda a solidificar suas habilidades linguísticas.

A aplicação de Soletrar ajuda os usuários a praticar a ortografia reproduzindo a gravação de áudio de uma palavra que o usuário deve soletrar usando o teclado do computador.

Histórias de usuário

• O usuário pode clicar no botão "Play" (Reproduzir) para ouvir a palavra que deve ser digitada
• O usuário pode ver as letras exibidas na caixa de texto de entrada de palavras à medida que são inseridas no teclado
• O usuário pode clicar no botão "Enter" para enviar a palavra que foi digitada na caixa de texto de entrada de palavras
• O usuário pode ver uma mensagem de confirmação quando a palavra correta é digitada
• O usuário pode ver uma mensagem solicitando que a palavra seja digitada novamente quando ela for escrita incorretamente
• O usuário pode ver um registro do número de grafias corretas, o número total de palavras tentadas e uma porcentagem de entradas bem-sucedidas.

Recursos adicionais

• O usuário pode ouvir um som de confirmação quando a palavra for soletrada corretamente
• O usuário pode ouvir um som de aviso quando a palavra for escrita incorretamente
• O usuário pode clicar no botão "Hint" (Dica) para destacar as letras incorretas na caixa de texto de entrada de palavras
• O usuário pode pressionar a tecla "Enter" no teclado para enviar uma palavra digitada ou clicar no botão "Enter" na janela da aplicação

Links e recursos úteis

• Texas Instruments Speak and Spell (em inglês)
• Web Audio API (em inglês)
• Clique e fale (em inglês)

Exemplos de projetos

Assistente de palavras para iOS (em inglês)

Falar e soletrar no Google Play (em inglês)

15. Aplicação de pesquisa

Nível: 3 - Avançado

Descrição: As pesquisas são uma parte valiosa da caixa de ferramentas de qualquer desenvolvedor. Elas são úteis para obter feedback dos usuários sobre uma variedade de tópicos, incluindo satisfação com a aplicação, requisitos, necessidades futuras, problemas, prioridades e incômodos simples, por exemplo.

A aplicação de pesquisa dá a você a oportunidade de aprender desenvolvendo uma aplicação com todos os recursos que podem ser adicionados à sua caixa de ferramentas. Ela oferece a capacidade de definir uma pesquisa, permitir que os usuários respondam dentro de um período de tempo predefinido e tabular e apresentar resultados.

Os usuários dessa aplicação são divididos em duas funções distintas, cada uma com requisitos diferentes:

• Os coordenadores de pesquisa definem e conduzem pesquisas. Essa é uma função administrativa não disponível para usuários normais.
• Respondentes de pesquisas preenchem pesquisas e visualizam resultados. Eles não têm privilégios administrativos na aplicação.
• As ferramentas de pesquisa comerciais incluem a funcionalidade de distribuição que envia questionários em massa para os Respondentes da pesquisa. Para simplificar, esta aplicação pressupõe que os questionários abertos para respostas serão acessados a partir da página da web da aplicação

Histórias de usuário

Geral

• Os coordenadores e respondentes de pesquisas podem definir, conduzir e visualizar pesquisas e resultados de pesquisas em um site comum
• Os coordenadores de pesquisa podem fazer login na aplicação para acessar funções administrativas, como definir uma pesquisa.

Definição de uma pesquisa

• O coordenador de pesquisa pode definir uma pesquisa que contenha de 1 a 10 perguntas de múltipla escolha.
• O coordenador de pesquisa pode definir de 1 a 5 seleções mutuamente exclusivas para cada pergunta.
• O coordenador de pesquisa pode inserir um título para a pesquisa.
• O coordenador de pesquisa pode clicar em um botão "Cancelar" para retornar à página inicial sem salvar o questionário.
• O coordenador do questionário pode clicar em um botão "Salvar" para salvar um questionário.

Realização de uma pesquisa

• O coordenador de pesquisa pode abrir uma pesquisa selecionando-a em uma lista de pesquisas previamente definidas
• Os coordenadores de pesquisa podem fechar uma pesquisa selecionando-a em uma lista de pesquisas abertas
• O respondente da pesquisa pode concluir um questionário selecionando-o em uma lista de questionários abertos
• O respondente da pesquisa pode selecionar respostas para as perguntas da pesquisa clicando em uma caixa de seleção
• Os respondentes do questionário podem ver que uma resposta selecionada anteriormente será automaticamente desmarcada se uma resposta diferente for clicada.
• Os respondentes do questionário podem clicar em um botão "Cancelar" para retornar à página inicial sem enviar a pesquisa.
• Os respondentes do questionário podem clicar no botão "Enviar" para enviar suas respostas ao questionário.
• Os respondentes do questionário podem ver uma mensagem de erro se "Enviar" for clicado, mas nem todas as perguntas tiverem sido respondidas.

Visualização dos resultados da pesquisa

• Os coordenadores e os respondentes de pesquisa podem selecionar a pesquisa a ser exibido em uma lista de questionários fechados
• Os coordenadores e os respondentes da pesquisa podem visualizar os resultados da pesquisa em formato tabular, mostrando o número de respostas para cada uma das seleções possíveis para as perguntas.

Recursos adicionais

• Os respondentes da pesquisa podem criar uma conta exclusiva na aplicação
• Os respondentes da pesquisa podem fazer login na aplicação
• Os entrevistados não podem responder à mesma pesquisa mais de uma vez
• Os coordenadores e os respondentes da pesquisa podem visualizar representações gráficas dos resultados da pesquisa (por exemplo, gráficos de pizza, de barras, de colunas etc.)

Links e recursos úteis

Bibliotecas para a criação de pesquisas: SurveyJS

Alguns serviços de pesquisa comercial incluem: Survey Monkey e TypeForm

Exemplo de projeto

Contribuição

Fique à vontade para contribuir com o projeto no repositório do GitHub! Qualquer contribuição é muito apreciada.

Você pode contribuir de duas maneiras:

1. criar uma issue e nos contar sua ideia. Não se esqueça de usar o rótulo New Idea (nova ideia) nesse caso;
2. fazer o fork do projeto e enviar um PR. Antes de fazer isso, certifique-se de ler e seguir o Guia de Contribuição (você pode encontrá-lo no repositório);

Adicione seus próprios exemplos

Você também pode adicionar seus próprios exemplos aos projetos depois de concluí-los. Eu o encorajo a fazer isso, pois mostrará aos outros as coisas incríveis que você construiu!

Espalhe a palavra!

Se as informações deste artigo e do repositório foram úteis para você de alguma forma, certifique-se de atribuir uma estrela no GitHub. Assim, outras pessoas poderão encontrar o projeto e se beneficiar também! Juntos, podemos crescer e tornar nossa comunidade melhor!

Você tem alguma sugestão sobre como podemos melhorar este projeto em geral? Entre em contato conosco! Gostaríamos muito de ouvir seus comentários!

Principais colaboradores

Florin Pop: Twitter e site.

Jim Medlock: Twitter e Medium

Desafio semanal de programação

Como bônus, há um desafio de programação semanal em que você pode aprender mais praticando suas habilidades em projetos do mundo real. Leia o Guia completo (em inglês) para saber como você pode participar!

Publicado originalmente em www.florin-pop.com (texto original em inglês).

Introdução

Com a Web 3.0 e a blockchain se tornando mais comuns a cada dia, você sabe o que é blockchain? Você conhece suas vantagens técnicas e seus casos de uso?

O objetivo deste tutorial é introduzir a tecnologia de blockchain a partir de uma perspectiva técnica, construindo uma a partir do zero.

Esqueça tudo o que você já ouviu sobre blockchain nas redes sociais. Agora, você construirá um sistema de blockchain do zero para entender realmente as entradas e saídas dessa tecnologia distribuída peer-to-peer.

Depois disso, decida sobre seu futuro e suas vantagens. Alerta de spoiler: você vai se apaixonar pelo software de programação de blockchain.

Como?

Você seguirá a história de um desenvolvedor de software que está procurando revolucionar seu bar local, através da implementação da tecnologia de blockchain para seu sistema de pagamento.

Embora a blockchain tenha vários casos de uso inegáveis, no momento, a aplicação número um são os pagamentos. Isto ocorre porque os bancos ainda estão funcionando em uma infraestrutura ineficiente, com 40 anos de idade, alimentada por arquivos CSV e FTP.

A história vem com muitos fatos engraçados e intrigantes sobre o ecossistema geral da blockchain e diferentes protocolos, como Bitcoin, Ethereum e XRP.

O que você vai criar, aprender e fazer neste tutorial?

• Você vai configurar um projeto na linguagem Go em sua máquina local sem qualquer experiência prévia com GoLang
• Você gerará e distribuirá seus primeiros tokens (ativos digitais) de blockchain.
• Você desenvolverá um banco de dados controlado pela CLI em Go a partir do zero
• Você descobrirá como poucos usuários possuem direitos em suas aplicações favoritas
• Você descobrirá a principal proposta de valor da blockchain
• Você tornará seu BD imutável usando uma função de hash criptográfico segura

Por isso, vamos começar a nossa história.

⭐ Conheça o protagonista, Andrej.

Andrej é dono de um bar à noite e desenvolvedor de software de dia em uma pequena cidade eslovaca chamada Bardejov.

Andrej está cansado de:

• Programação de aplicações sólidas e à moda antiga com PHP/Java/Javascript
• Esquecer quanto dinheiro seus amigos e clientes lhe devem por todos os shots de vodka não pagos de sexta-feira à noite
• Passar tempo coletando e contando moedas, devolvendo troco e geralmente tocando cédulas expostas à COVID-19
• Fazer a manutenção de diferentes fichas plásticas para pebolim, dardos, bilhar e pôquer

Andrej adoraria:

• Ter um histórico auditável perfeito das atividades e vendas do bar para tornar seu bar compatível com as normas fiscais
• Transformar seu bar em um ambiente autônomo, eficiente, descentralizado e seguro, no qual seus clientes possam confiar e apenas se divertir

Seu objetivo é escrever um programa simples e manter todos os saldos de seus clientes de modo virtual.

Andrej compartilha suas ideias aqui:

"Cada novo cliente me dará dinheiro, e eu creditarei para eles uma quantidade equivalente dos meus tokens (moedas/moeda criptográfica)". Os tokens representarão uma unidade monetária dentro e fora do bar.

As pessoas usarão os tokens para todas as funcionalidades do bar, desde pagar bebidas, pedir emprestado e emprestar a seus amigos, até jogar tênis de mesa, pôquer e pebolim.

Ter um bar administrado por meio de tokens gerará um valor imenso para meus clientes. Ao contrário da minha concorrência e de outros bares nesta rua, onde os clientes só gastam dinheiro e conseguem uma ressaca em troca, os clientes que tiverem fichas do meu bar terão direito de acionistas.

Semelhante a possuir uma grande parte das ações de uma empresa, como a Apple ou a Microsoft, os clientes que possuem esses tokens de bar poderão decidir como o bar funcionará através de votação e decisão sobre:

• preços das bebidas
• horário de funcionamento
• novas funcionalidades (TV, jukebox...)
• design interior e exterior
• alocação de lucros
• etc.

Ah, isso será um sonho para programação!

Chamarei os tokens de: tokens do bar das blockchain, ou TBB!"

Agora que Andrej compartilhou seu sonho, vamos começar.

Sumário

• Requisitos
• Configurar o projeto
• 01 | O banco de dados MVP
• 02 | Alterando o estado global do BD
• 03 | Evento monolítico x transação
• 04 | Os seres humanos são gananciosos
• 05 | Por que precisamos da blockchain
• 06 | O hash imutável
• Próximos passos

Requisitos

Vamos nos aprofundar em nosso tutorial. Recomendo mais de 2 anos de experiência em programação em Java/PHP/Javascript ou outra linguagem similar à Go.

Se você quiser ter uma boa introdução rápida para começar, aqui está um curso gratuito (em inglês) que ajudará você.

Você também pode completar as 17 aulas oficiais de Um tour por Go para se familiarizar com a sintaxe do idioma e conceitos básicos (cerca de 20 minutos).

Por que Go?

Porque, assim como a blockchain, é uma tecnologia fantástica para toda a sua carreira de programação. Go é uma linguagem da moda e desenvolvedores de Go são mais bem pagos do que a média das posições em Java/PHP/Javascript.

Go é otimizado para a arquitetura de CPUs multi-core. Você pode gerar milhares de threads leves (rotinas do Go) sem problemas. É extremamente prático para software paralelos e simultâneos, tais como redes de blockchain.

Ao escrever seu software em Go, você atinge um nível semelhante ao do C++ em termos de desempenho, desde o início, sem se matar por ter esquecido de liberar a memória.

Go também compila para binário, o que o torna muito portátil.

Configurar o projeto

Este artigo tem um repositório dedicado e de código aberto no Github, com o código-fonte completo para que você possa compilar o código e executar o programa em sua própria máquina local.

Se você ficar preso em qualquer capítulo ou em uma linha de código em particular, crie uma issue no Github do repositório descrevendo seu problema e eu o ajudarei o quanto antes!

Visite o repositório no Github e siga as instruções de instalação.

01 | O banco de dados MVP

✍ git checkout c1_genesis_json

Andrej dominou os bancos de dados relacionais em SQL nos anos 90. Ele sabe como fazer modelos de dados avançados e como otimizar as consultas em SQL.

Chegou a hora de Andrej alcançar a inovação e começar a criar software para a web 3.0.

Por sorte, após ler o livro "The Lean Startup" na semana passada, Andrej percebe que ainda não deveria projetar demais a solução. Assim, ele escolhe um arquivo JSON simples, mas eficaz, para ser o banco de dados e o produto viável mínimo, ou MVP (do inglês, minimum viable product), do bar.

No início, havia um banco de dados centralizado primitivo.

Resumo:

A blockchain é um banco de dados.

Usuário 1, Andrej

Segunda-feira, 18 de março.

Andrej gera 1 milhão de tokens de utilidade.

No mundo da blockchain, os tokens são unidades dentro do banco de dados da blockchain. Seu valor real em espécie flutua com base em sua demanda e popularidade.

Cada blockchain tem um arquivo "Genesis". O arquivo "Genesis" é usado para distribuir os primeiros tokens aos participantes iniciais da blockchain.

Tudo começa com um simples genesis.json de teste.

Andrej cria o arquivo ./database/genesis.json, onde ele define que o banco de dados do bar da blockchain terá 1 milhão de tokens e que todas elas pertencerão a Andrej:

{
  "genesis_horario": "2019-03-18T00:00:00.000000000Z",
  "chain_id": "the-blockchain-bar-ledger",
  "saldo": {
      "andrej": 1000000
  }
}

Os tokens precisam ter uma "utilidade" real, ou seja, um caso de uso. Os usuários devem ser capazes de pagar com eles a partir do primeiro dia!

Andrej deve estar em conformidade com as regulamentações da lei. É ilegal a emissão de valores não registrados. Por outro lado, os tokens de utilidade estão em conformidade, então ele imprime e cola imediatamente um novo cartaz com os preços na porta do bar.

Andrej atribui um valor monetário inicial a seus tokens para poder trocá-los por euro, dólar ou outra moeda.

1 token TBB = 1€

| Item                      	 | Preco   |
| ------------------------------ | ------- |
| Dose de vodka                	 | 1   TBB |
| Suco de laranja           	 | 5   TBB |
| Hamburguer                	 | 2   TBB |
| Garrafa de vodka Crystal Head  | 950 TBB |

Andrej também decide que deve receber 100 tokens por dia para manter o banco de dados e por ter tido uma ideia tão brilhante e disruptiva.

Fatos interessantes

A primeira genesis Ether (ETH) sobre a blockchain Ethereum foi criada e distribuída aos primeiros investidores e desenvolvedores da mesma maneira que o token de utilidade de Andrej.

Em 2017, durante um boom das ofertas iniciais de moedas (do inglês, Initial Coin Offers, ou ICO) na rede de blockchain Ethereum, os fundadores do projeto escreveram e apresentaram whitepapers aos investidores. Um whitepaper é um documento técnico que esboça uma questão complexa e uma possível solução, destinada a educar e esclarecer sobre um assunto específico. No mundo da blockchain, um whitepaper serve para delinear as especificações de como essa blockchain em particular será e se comportará uma vez desenvolvida.

Os projetos de blockchain aumentaram entre 10 e 300 milhões de euros por ideia de whitepaper.

Em troca de dinheiro (o "financiamento" das ICOs), os nomes dos investidores seriam incluídos nos "balanços de genesis" iniciais, semelhante ao que Andrej fez. As esperanças dos investidores em uma ICO estão no fato de que as moedas de genesis subam de valor e que as equipes entreguem a blockchain delineada.

Naturalmente, nem todas as ideias de whitepaper se concretizam. Investimentos massivos perdidos por ideias pouco claras ou incompletas são a razão pela qual a blockchain recebeu cobertura negativa na mídia através dessas ICOs e para alguns ainda a considerarem uma modinha. A tecnologia da blockchain subjacente, porém, é fantástica e útil, como você aprenderá mais neste artigo. Ela tem sido abusada por alguns maus atores.

Resumo:

A blockchain é um banco de dados.

O fornecimento de tokens, o balanço inicial do usuário e as configurações globais da blockchain são definidas em um arquivo genesis.

02 | Alterando o estado global do BD

✍ git checkout c2_db_changes_txt

Festa chata

Segunda-feira, 25 de Março.

Após uma semana de trabalho, as instalações do bar estão prontas para aceitar os tokens. Infelizmente, ninguém aparece. Então, Andrej pede três doses de vodka para si mesmo e escreve as mudanças no banco de dados em um pedaço de papel:

andrej-3;   // 3 doses de vodka
andrej+3;   // tecnicamente comprando de seu próprio bar
andrej+700; // Recompensa por uma semana de trabalho (7x100 por dia)

Para evitar recalcular o estado mais recente do saldo de cada cliente, Andrej cria um arquivo ./database/state.json, que armazena os saldos em um formato agregado.

Novo estado do BD:

{
  "saldo": {
      "andrej": 1000700
  }
}

Bônus para BabaYaga

Terça-feira, 26 de Março.

Para trazer o público até seu bar, Andrej anuncia um bônus exclusivo de 100% para todos que adquirirem os tokens TBB nas próximas 24 horas.

Ele recebe sua primeira cliente, chamada BabaYaga. BabaYaga pré-compra mil euros em tokens e, para comemorar, gasta imediatamente 1 TBB para uma dose de vodka. Ela tem um problema com a bebida.

Transações do BD escritas em um pedaço de papel:

andrej-2000;   // transfererência para BabaYaga
babayaga+2000; // pré-compra com 100% bônus
babayaga-1;
andrej+1;
andrej+100;    // 1 dia de sol nascendo

Novo estado do BD:

{
  "saldo": {
      "andrej": 998801,
      "babayaga": 1999
  }
}

Fatos interessantes

Os projetos de ICO (ofertas iniciais de moedas, baseadas em whitepaper) de blockhain frequentemente distribuem os tokens de genesis com diferentes bônus, dependendo de quantos deles você compra e de você ter feito isso rapidamente. As equipes oferecem, em média, 10-40% de bônus aos "participantes" iniciais.

A palavra "investidor" é evitada, de modo que os reguladores legais não considerarão os tokens como um valor não registrado. Os projetos argumentariam que seu produto principal, tokens de blockchain, funcionam como "milhas de vôo ou pontos de fidelidade".

Os "participantes", mais tarde, fazem até 1.000% de seu investimento vendendo ao público através de um intercâmbio vários meses depois.

Resumo:

A blockchain é um banco de dados.

O fornecimento de tokens, o balanço inicial do usuário e as configurações globais da blockchain, você define em um arquivo Genesis.

Os balanços de Genesis indicam qual era o estado original da blockchain e nunca são atualizados depois.

As mudanças de estado do banco de dados são chamadas de transações (TX).

03 | Evento monolítico x transação

✍ git checkout c3_state_blockchain_component

Os desenvolvedores acostumados à arquitetura de fornecimento de eventos devem ter reconhecido imediatamente os princípios familiares por trás das transações. Eles estão corretos.

As transações das blockchain representam uma série de eventos. O banco de dados é um estado final agregado, calculado após a repetição de todas as transações em uma sequência específica

Andrej programando

Terça-feira à noite, 26 de março.

É uma noite relaxante de terça-feira para Andrej. Comemorando seu primeiro cliente, ele decide jogar Starcraft e limpar sua máquina de desenvolvimento local, removendo algumas fotos antigas.

Infelizmente, ele pressionou prematuramente a tecla Enter ao digitar um comando de comando de remoção no terminal, sudo rm -rf /. Xiiii!

Todos os seus arquivos, incluindo os arquivos genesis.json e state.json do bar, desapareceram.

Andrej, sendo um desenvolvedor sênior, gritou repetidamente algumas palavras bem alto por alguns segundos, mas não entrou em pânico!

Embora ele não tivesse um back-up, ele tinha algo melhor – um pedaço de papel com todas as transações do banco de dados. A única coisa que ele precisa fazer é reproduzir todas as transações uma a uma e o estado de seu banco de dados será recuperado.

Impressionado com as vantagens da arquitetura baseada em eventos, ele decide ampliar sua solução de banco de dados MVP. Cada atividade do bar, como a compra individual de bebidas, DEVE ser registrada dentro do banco de dados da blockchain.

Cada consumidor será representado no BD utilizando uma estrutura de conta:

type Conta string

Cada Transação (TX – uma mudança de banco de dados) terá os quatro atributos seguintes: de, para, valor e dados.

O atributo de dados com um valor possível (recompensa) captura o bônus de Andrej por inventar a blockchain e aumenta artificialmente a oferta total inicial de tokens TBB (inflação).

type Tx struct {
   De  Account `json:"de"`
   Para    Account `json:"para"`
   Valor uint    `json:"valor"`
   Dado  string  `json:"dado"`
}

func (t Tx) IsReward() bool {
   return t.Dado == "recompensa"
}

O BD de Genesis permanecerá com um arquivo JSON:

{
  "genesis_horario": "2019-03-18T00:00:00.000000000Z",
  "chain_id": "the-blockchain-bar-ledger",
  "saldo": {
      "andrej": 1000000
  }
}

Todas as transações, previamente escritas em um pedaço de papel, serão armazenadas em um banco de dados local de arquivos de texto chamado tx.db, serializado em formato JSON e separado por caracteres de quebra de linha:

{"de":"andrej","para":"andrej","valor":3,"dado":""}
{"de":"andrej","para":"andrej","valor":700,"dado":"recompensa"}
{"de":"andrej","para":"babayaga","valor":2000,"dado":""}
{"de":"andrej","para":"andrej","valor":100,"dado":"recompensa"}
{"de":"babayaga","para":"andrej","valor":1,"dado":""}

O componente mais crucial do banco de dados, que encapsula toda a lógica comercial será o Estado:

type Estado struct {
   Saldos   map[Conta]uint
   txMempool []Tx

   dbFile *os.File
}

A estrutura do Estado saberá sobre todos os saldos de usuários, quem transferiu os tokens TBB para quem e quantos foram transferidos.

É construído através da leitura do saldo inicial de usuários do arquivo genesis.json:

func NewStateFromDisk() (*Estado, error) {
   // Obter o diretorio de trabalho atual
   cwd, err := os.Getwd()
   if err != nil {
      return nil, err
   }

   genFilePath := filepath.Join(cwd, "database", "genesis.json")
   gen, err := loadGenesis(genFilePath)
   if err != nil {
      return nil, err
   }

   saldo := make(map[Conta]uint)
   for conta, saldo := range gen.Saldos {
      saldos[conta] = saldo
   }

Em seguida, os balanços do Estado de genesis são atualizados através da reprodução sequencial de todos os eventos do banco de dados do tx.db:

   txDbFilePath := filepath.Join(cwd, "database", "tx.db")
   f, err := os.OpenFile(txDbFilePath, os.O_APPEND|os.O_RDWR, 0600)
   if err != nil {
      return nil, err
   }

   scanner := bufio.NewScanner(f)
   estado := &Estado{saldos, make([]Tx, 0), f}

   // Iterar sobre cada linha do arquivo tx.db
   for scanner.Scan() {
      if err := scanner.Err(); err != nil {
         return nil, err
      }

      // Converter TX codificado pelo JSON em um objeto (estrutura)
      var tx Tx
      json.Unmarshal(scanner.Bytes(), &tx)

      // Reconstruir o Estado (saldos de usuários),
      // como uma série de eventos
      if err := estado.apply(tx); err != nil {
         return nil, err
      }
   }

   return estado, nil
}

O componente Estado é responsável por:

• Adicionar novas transações ao Mempool
• Validar as transações contra o Estado atual (saldo suficiente do remetente)
• Mudar o estado
• Salvar transações persistentes em disco
• Calcular os saldos de contas através da repetição de todas as transações desde Genesis em uma seqüência

Adicionar novas transações ao Mempool:

func (s *Estado) Add(tx Tx) error {
   if err := s.apply(tx); err != nil {
      return err
   }

   s.txMempool = append(s.txMempool, tx)

   return nil
}

Persistir as transações em disco:

func (s *Estado) Persist() error {
   // Faça uma cópia do mempool porque o s.txMempool será modificado
   // no laço abaixo
   mempool := make([]Tx, len(s.txMempool))
   copy(mempool, s.txMempool)

   for i := 0; i < len(mempool); i++ {
      txJson, err := json.Marshal(mempool[i])
      if err != nil {
         return err
      }

      if _, err = s.dbFile.Write(append(txJson, '\n')); err != nil {
         return err
      }

      // Remover o TX escrito em um arquivo do mempool
      s.txMempool = s.txMempool[1:]
   }

   return nil
}

Mudar, validar o estado:

func (s *Estado) apply(tx Tx) error {
   if tx.IsReward() {
      s.Saldos[tx.To] += tx.Valor
      return nil
   }

   if tx.Valor > s.Saldos[tx.De] {
      return fmt.Errorf("saldo insuficiente")
   }

   s.Saldos[tx.De] -= tx.Valor
   s.Saldos[tx.Para] += tx.Valor

   return nil
}

Construir uma interface de linha de comando (CLI)

Terça-feira à noite, 26 de março.

Andrej quer ter uma maneira conveniente de adicionar novas transações ao seu banco de dados e listar os últimos saldos de seus clientes. Como os programas Go compilam para binário, ele faz uma CLI para seu programa.

A maneira mais fácil de desenvolver programas baseados em CLI em Go é usando a biblioteca de terceiros github.com/spf13/cobra.

Andrej inicializa o gerenciador de dependências de Go para seu projeto, chamado go modules:

✍ cd $GOPATH/src/github.com/web3coach/the-blockchain-way-of-programming-newsletter-edition

✍ go mod init github.com/web3coach/the-blockchain-way-of-programming-newsletter-edition

O comando Go modules buscará automaticamente qualquer biblioteca a que você se referir dentro de seus arquivos Go.

Andrej cria um diretório chamado cmd, com um subdiretório tbb:

✍mkdir -p ./cmd/tbb

Dentro, ele cria um arquivo main.go, servindo como o ponto de entrada da CLI do programa:

package main

import (
    "github.com/spf13/cobra"
    "os"
    "fmt"
)

func main() {
    var tbbCmd = &cobra.Command{
        Use:   "tbb",
        Short: "The Blockchain Bar CLI",
        Run: func(cmd *cobra.Command, args []string) {
        },
    }
    
    err := tbbCmd.Execute()
    if err != nil {
        fmt.Fprintln(os.Stderr, err)
        os.Exit(1)
    }
}

Os programas Go são compilados usando o comando install:

✍ go install ./cmd/tbb/...

go: finding github.com/spf13/cobra v1.0.0
go: downloading github.com/spf13/cobra v1.0.0
go: extracting github.com/spf13/cobra v1.0.0

O Go detectará as bibliotecas ausentes e as buscará automaticamente antes de compilar o programa. Dependendo de seu $GOPATH, o programa resultante será salvo na pasta $GOPATH/bin.

✍echo $GOPATH

/home/web3coach/go

✍which tbb

/home/web3coach/go/bin/tbb

Você pode executar o tbb de seu terminal agora, mas ele não fará nada porque a função Run dentro do arquivo main.go está vazia.

A primeira coisa que Andrej precisa é de suporte de versão para seu programa tbb da CLI.

Ao lado do arquivo main.go, ele cria um comando version.go:

package main

import (
    "fmt"
    "github.com/spf13/cobra"
)

const Major = "0"
const Minor = "1"
const Fix = "0"
const Verbal = "Adicionar TX e listar saldos"

var versionCmd = &cobra.Command{
    Use:   "versão",
    Short: "Descreve a versão.",
    Run: func(cmd *cobra.Command, args []string) {
        fmt.Printf("Versão: %s.%s.%s-beta %s", Major, Minor, Fix, Verbal)
    },
}

Ele compila o programa e o executa:
✍ go install ./cmd/tbb/...
✍ tbb version

Versão: 0.1.0-beta Adicionar TX e listar saldos

Perfeito.

De modo idêntico ao arquivo version.go, ele cria um arquivo balance.go:

func saldosCmd() *cobra.Command {
    var saldosCmd = &cobra.Command{
        Use:   "saldos",
        Short: "Interage com saldos (lista...).",
        PreRunE: func(cmd *cobra.Command, args []string) error {
            return incorrectUsageErr()
        },
        Run: func(cmd *cobra.Command, args []string) {
        },
    }

    saldosCmd.AddCommand(saldosListaCmd)

    return saldosCmd
}

O comando saldos será responsável por carregar o último estado do BD e imprimi-lo para a saída padrão:

var saldosListaCmd = &cobra.Command{
    Use:   "list",
    Short: "Lista todos os saldos.",
    Run: func(cmd *cobra.Command, args []string) {
        estado, err := database.NewStateFromDisk()
        if err != nil {
            fmt.Fprintln(os.Stderr, err)
            os.Exit(1)
        }
        defer estado.Close()

        fmt.Println("Saldos das contas:")
        fmt.Println("__________________")
        fmt.Println("")
        for conta, saldo := range estado.Saldos {
            fmt.Println(fmt.Sprintf("%s: %d", conta, saldo))
        }
    },
}

Andrej verifica se o comando funciona como esperado. Ele deve imprimir os saldos exatos definidos no arquivo Genesis porque o arquivo tx.db ainda está vazio.

✍ go install ./cmd/tbb/...

✍ tbb saldos list

Saldos das contas:
__________________
andrej: 1000000

Funciona bem! Agora, ele só precisa de um comando para registrar a atividade do bar.

Andrej cria o comando ./cmd/tbb/tx.go:

func txCmd() *cobra.Command {
    var txsCmd = &cobra.Command{
        Use:   "tx",
        Short: "Interage com as txs (adicionar...).",
        PreRunE: func(cmd *cobra.Command, args []string) error {
            return incorrectUsageErr()
        },
        Run: func(cmd *cobra.Command, args []string) {
        },
    }

    txsCmd.AddCommand(txAddCmd())

    return txsCmd
}

O comando tbb tx add utiliza a função Estado.Adicionar(tx) para a persistência dos eventos do bar no sistema de arquivos:

func txAddCmd() *cobra.Command {
    var cmd = &cobra.Command{
        Use:   "add",
        Short: "Adiciona novo TX ao banco de dados.",
        Run: func(cmd *cobra.Command, args []string) {
            de, _ := cmd.Flags().GetString(flagDe)
            para, _ := cmd.Flags().GetString(flagPara)
            valor, _ := cmd.Flags().GetUint(flagValor)

            deConta := database.NewAccount(de)
            paraConta := database.NewAccount(para)
            
            tx := database.NewTx(deConta, paraConta, valor, "")

            estado, err := database.NewStateFromDisk()
            if err != nil {
                fmt.Fprintln(os.Stderr, err)
                os.Exit(1)
            }
            
            // Deferir ao final da execução dessa função
            // A executação da seguinte declaração (fechar o arquivo DB com todos os TXs)
            defer estado.Close()
            
            // Adicionar o TX a um array em memória (pool)
            err = estado.Add(tx)
            if err != nil {
                fmt.Fprintln(os.Stderr, err)
                os.Exit(1)
            }
            
            // Limpa os TXs do mempool para o disco
            err = estado.Persist()
            if err != nil {
                fmt.Fprintln(os.Stderr, err)
                os.Exit(1)
            }

            fmt.Println("TX adicionada com sucesso ao ledger.")
        },
    }

O comando tbb tx add tem 3 flags obrigatórias: --de, --para e --valor.

cmd.Flags().String(flagDe, "", "De que conta enviar os tokens")
cmd.MarkFlagRequired(flagDe)

cmd.Flags().String(flagPara, "", "Para que conta enviar os tokens")
cmd.MarkFlagRequired(flagPara)

cmd.Flags().Uint(flagValor, 0, "Quantos tokens enviar")
cmd.MarkFlagRequired(flagValor)

return cmd

A CLI está feita!

Andrej migra todas as transações do papel para o novo BD:

✍ tbb tx add --de=andrej --para=andrej --valor=3

✍tbb tx add --de=andrej --para=andrej --valor=700

✍tbb tx add --de=babayaga --para=andrej --valor=2000

✍tbb tx add --de=andrej --para=andrej --valor=100 --dado=recompensa

✍tbb tx add --de=babayaga --para=andrej --valor=1

Leia todos os TXs a partir do disco e calcule o estado mais recente:

✍ tbb saldos list

Saldos das contas:
__________________
andrej: 998801
babayaga: 1999

Dados do bar restaurados com sucesso! Ufa! Que noite!

Sobre a biblioteca Cobra CLI

O bom da biblioteca Cobra para a programação da CLI está nas características adicionais que ela traz consigo. Por exemplo, agora, você pode executar o comando tbb help e imprimirá todos os subcomandos registrados na TBB com instruções sobre como usá-los.

 tbb help

The Blockchain Bar CLI

Usage:
  tbb [flags]
  tbb [command]

Available Commands:
  balances    Interage com balanços (list...).
  help        Ajuda sobre qualquer comando
  tx          Interage com txs (add...).
  version     Descreve a versão.

Flags:
  -h, --help   ajuda para tbb

Use "tbb [comando] --help" para mais informações sobre um comando.

Fatos interessantes

A perda acidental de dados dos clientes é normal no mundo corporativo nos dias de hoje. A blockchain corrige isso descentralizando o armazenamento de dados.

Há um truque que Andrej introduziu no programa ao pular a verificação de saldos para os TX marcados como "recompensas". Bitcoin e Ethereum funcionam da mesma forma. O saldo da Conta que minerou um bloco aumenta do nada como um assunto de inflação total de fornecimento dos tokens, que afeta toda a cadeia. O fornecimento total de bitcoins é limitado a 21M BTC. Você aprenderá mais sobre "mineração" e "blocos" posteriormente.

Os componentes State (estado) e Mempool não são exclusivos deste programa. Andrej escolheu os nomes e designs para combinar com um modelo simplificado da go-Ethereum, para que você tenha uma ideia do código fonte central do Ethereum.

Resumo:

A blockchain é um banco de dados.

O fornecimento de tokens, os balanços iniciais dos usuários e as configurações globais da blockchain são definidos em um arquivo Genesis.

Os balanços de Genesis indicam qual era o estado original da blockchain e nunca são atualizados depois.

As mudanças de estado do banco de dados são chamadas Transações (TX).

As transações são eventos ao estilo antigo, que representam ações dentro do sistema.

⚒ Código de estudo

Commit: 5d4b0b

Vamos falar sobre a ganância.

04 | Os humanos são gananciosos

✍ git checkout c4_caesar_transfer

A ganância típica dos negócios

Quarta-feira, 27 de março.

BabaYaga investiu um pouco demais. Ela esqueceu que o pagamento do aluguel do apartamento estava chegando e, agora, não tem o dinheiro. BabaYaga chama o proprietário de seu apartamento, César.

BabaYaga: Ei, César, sinto muito, mas não tenho dinheiro para pagar o aluguel este mês...

Caesar: Por que não?

BabaYaga: O ICO do Blockchain Bar ofereceu um bônus enorme e eu comprei 2000 tokens no valor de apenas mil euros. Foi um grande negócio!

César: Do que você está falando? O que é um ICO? O que são tokens? Você pode me pagar de algum outro modo?

BabaYaga: Ah, outra vez, não. Eu posso dar mil tokens TBB, que valem mil euros, e você pode usá-los no bar para pagar suas bebidas! Deixe-me ligar para o dono do bar, Andrej, e fazer a transferência!

César: Muito bem... eu vou aceitar.

Andrej realiza a transferência, mas decide cobrar mais 50 tokens de TBB por ter de fazer os procedimentos. Ele não quer, MAS os acionistas do bar que investiram nele há alguns anos estão forçando-o a gerar lucro o mais rápido possível.

BabaYaga não vai ter problemas com esta taxa relativamente pequena, muito provavelmente, diz Andrej a si mesmo. No final, somente ele tem o acesso ao BD.

// Pagamento do aluguel

✍tbb tx add --de=babayaga --para=cesar --valor=1000

// Cobrança de taxa oculta

✍ tbb tx add --de=babayaga --para=andrej --valor=50

// Nova recompensa por mais um dia de manutenção do BD

✍ tbb tx add --de=andrej --para=andrej --valor=100 --dado=recompensa

Fatos interessantes

O caso de uso número um da blockchain é o bancário. Muitos projetos de blockchain visam otimizar o câmbio nacional e internacional de dinheiro através de diferentes canais de moedas (XRP).

Outros projetos enfocam a liberdade e a identidade própria (SSI, do inglês, Self-sovereign identity) – um movimento digital que reconhece que um indivíduo deve possuir e controlar sua identidade e dinheiro sem as autoridades administrativas intervenientes ou outros intermediários centralizados. A SSI permite que as pessoas interajam no mundo digital com a mesma liberdade e capacidade de confiança que interagem no mundo off-line. (Bitcoin / Ethereum)

Aqui estão alguns fatos interessantes que explicam o porquê de a blockchain ser um ajuste perfeito para substituir a infraestrutura bancária atual de seu banco.

O bom dos tokens é sua fungibilidade - ou seja, sua capacidade de serem comercializados, com cada unidade sendo tão utilizável quanto a próxima. A realização de uma transferência de conta para conta pode ser feita simplesmente mudando o estado do banco de dados. As moedas criptográficas são negociáveis 24 horas por dia, 7 dias por semana.

Você não pode negociar ações diretamente. Você precisa passar por um corretor que participa de uma porcentagem da transação total como taxa (1-3% a 7% do lucro médio anual).

Uma transferência bancária internacional leva entre 3-10 dias úteis e pode custar até 5% do valor transferido! Se você estiver enviando $10.000, poderá ter que pagar até $500. A tecnologia por trás disso nos últimos 40 anos? FTP + arquivos CSV.

Você acha que o mercado de ações é justo? Os bancos, índices e ações são altamente centralizados e controlados por governos e grupos privados de Wall Street. O mercado livre? Wall Street controla o quanto os preços podem saltar/cair em um único dia.

Como exemplo, Wall Street suspendeu a negociação do "Índice S&P 500" após uma queda de 7% para proteger seus investidores e fundos especulativos de perder dinheiro das pessoas que venderam suas ações durante março de 2020, após as notícias da COVID. Posteriormente, o FED imprimiu trilhões de dólares para eles mesmos para apoiar o preço das ações. Se você é um desenvolvedor que gosta de economizar dinheiro e evitar dívidas, suas economias acabarão perdendo valor de um dia para o outro por uma porcentagem ainda desconhecida.

Muitos países estão entrando em rendimentos negativos, um território inexplorado com consequências desconhecidas. O que isto significa? Em breve você terá que pagar ao banco para manter suas economias. Inflação no seu melhor. Você está sendo obrigado a gastar seu dinheiro para apoiar um sistema que você não controla.

⚒ Código de estudo

Commit: 00d6ed

05 | Por que precisamos da blockchain

✍ git checkout c5_broken_trust

BabaYaga busca justiça

Quinta-feira, 28 de março.

BabaYaga entra no bar para seu aniversário.

BabaYaga: Ei, Andrej! Hoje é meu aniversário! Traga-me sua garrafa mais cara!

Andrej: Feliz aniversário! Aqui está: Vodka Crystal Head. Mas você precisa comprar um token TBB adicional. A garrafa custa 950 tokens, e seu saldo é de 949.

BabaYaga: O quê?! Meu saldo deveria ser de 999 TBB!

Andrej: A transferência de fundos para César que você solicitou na semana passada custou 50 tokens.

BabaYaga: Isto é inaceitável! Eu nunca concordaria com uma taxa tão alta. Você não pode fazer isto, Andrej. Confiei em seu sistema, mas você é tão pouco confiável quanto qualquer outro proprietário de empresa. As coisas devem mudar!

Andrej: Muito bem, veja. Você é minha cliente mais fiel e eu não queria cobrar de você, mas meus acionistas me obrigaram.

Deixe-me reprogramar meu sistema e torná-lo completamente transparente e descentralizado. Afinal, se todos fossem capazes de interagir com o bar sem passar por mim, isso melhoraria significativamente a eficiência do bar e equilibraria o nível de confiança!

• Pedir bebidas levaria segundos ao invés de minutos
• Os clientes que esqueceram suas carteiras em casa poderiam pedir emprestado ou emprestar tokens um ao outro
• Eu não teria que me preocupar em perder os dados dos clientes (novamente), pois todos teriam uma cópia dos mesmos
• O banco de dados seria imutável, portanto, uma vez que todos estivessem de acordo sobre um estado específico, ninguém mais poderia mudá-lo ou modificar maliciosamente a história. A imutabilidade também ajudaria nas auditorias fiscais anuais!
• Se os acionistas quisessem introduzir novas taxas ou aumentar as taxas atuais, todos os envolvidos no sistema de blockchain notariam e teriam que concordar com ele. Os usuários e proprietários de empresas teriam até mesmo que se engajar em algum sistema de governança descentralizada em conjunto, baseado na votação, provavelmente. Em caso de desacordo, os usuários se afastam com todos os seus dados!

BabaYaga: Bem, certamente soa bem, mas será que isso é mesmo possível?

Andrej: Sim, eu acho que sim. Com um pouco de hashing, listas vinculadas, estrutura de dados imutável, replicação distribuída e criptografia assimétrica!

BabaYaga: Não faço ideia do que você acabou de dizer, mas vá em frente e faça suas nerdices, Andrej!

Fatos interessantes

Os mineradores Bitcoin e Ethereum também recebem recompensas a cada 15 minutos, aproximadamente, por executar os servidores da blockchain (os nós) e validar as transações.

A cada 15 minutos, um minerador de Bitcoins recebe 12,5 BTC ($100 mil no momento em que este artigo foi escrito) para cobrir o custo de seus servidores + obter algum lucro.

A rede das Bitcoins consome tanta eletricidade quanto o país inteiro da Áustria. Ela é responsável por 0,29% do consumo anual de eletricidade mundial.

Anualmente, ela consome 76,84 TWh, produzindo 36,50 Mt de rastro de carbono de CO2 (Nova Zelândia). Fonte.

Por quê? Você aprenderá mais tarde onde você programará um algoritmo de mineração de Bitcoin a partir do zero!

Observação: nosso algoritmo consumirá um pouco menos de eletricidade🙂

Resumo:

O software, quando não é de código aberto, dá acesso centralizado aos dados privados, o que permite que apenas um punhado de pessoas tenha muito poder. Os usuários não têm escolha, e os acionistas estão no negócio para ganhar dinheiro.

Os desenvolvedores da blockchain visam desenvolver protocolos onde os empresários e usuários das aplicações se sinergizem em uma relação transparente e auditável. As especificações do sistema da blockchain devem ser bem definidas desde o início e só devem mudar se seus usuários o apoiarem.

A blockchain é um banco de dados. O fornecimento de tokens, os saldos iniciais de usuários e as configurações globais da blockchain são definidos em um arquivo Genesis. Os balanços Genesis indicam qual era o estado original da blockchain e nunca são atualizados posteriormente.

As mudanças de estado do banco de dados são chamadas Transações (TX). Transações são eventos à moda antiga que representam ações dentro do sistema.

⚒ Código de estudo

Commit: 642045

06 | O hash imutável

✍ git checkout c6_immutable_hash

A dificuldade técnica começa com esta seção! Os conceitos só vão ficar mais desafiadores mas, ao mesmo tempo, muito empolgantes. Apertem os cintos 😀

Como programar um banco de dados imutável?

Sexta-feira, 29 de março.

Se Andrej quer descobrir como programar um BD imutável, ele tem que entender porque outros sistemas de banco de dados são mutáveis por padrão.

Ele decide analisar uma tabela poderosa do BD do MySQL:

| id | nome     | saldo   |
| -- | -------- | ------- |
| 1  | Andrej   | 998951  |
| 2  | BabaYaga | 949     | 
| 3  | Caesar   | 1000    |

No BD MySQL, qualquer pessoa com acesso e uma razão suficientemente boa pode realizar uma atualização de tabela como, por exemplo:

UPDATE saldo_usuario SET saldo = saldo + 100 WHERE id > 1

A atualização de valores através de diferentes linhas é possível porque as linhas da tabela são independentes, mutáveis e o estado mais recente não é aparente.

Qual é a última mudança no BD? A última coluna mudou? Qual é a última linha inserida? Como Andrej pode saber qual linha foi apagada recentemente? Se as linhas e o estado da tabela estivessem firmemente unidos, dependentes, a atualização da linha 1 geraria uma tabela completamente nova e diferente. Andrej conseguiria sua imutabilidade.

Como você pode saber se algum byte em um banco de dados mudou?

Imutabilidade via funções de hash

Hashing é o processo de tomar uma string de entrada de comprimento arbitrário e produzir uma string de hash de comprimento fixo. Qualquer mudança na entrada, resultará em um hash novo e diferente.

package main

import (
	"crypto/sha256"
	"fmt"
)

func main() {
	saldosHash := sha256.Sum256([]byte("| 1 | Andrej | 99895 |"))
	fmt.Printf("%x\n", saldosHash)
	// Output: 6a04bd8e2...f70a3902374f21e089ae7cc3b200751
	
	// Mudar o saldo de 99895 -> 99896
	
	saldosHashDiff := sha256.Sum256([]byte("| 1 | Andrej | 99896 |"))
	fmt.Printf("%x\n", saldosHashDiff)
	// Saída: d04279207...ec6d280f6c7b3e2285758030292d5e1
}

Experimente: https://play.golang.org/p/FTPUa7IhOCE

Andrej também requer algum nível de segurança para seu banco de dados. Por isso, ele decide por uma função de hash criptográfico com as seguintes propriedades:

• é determinista – a mesma mensagem resulta sempre no mesmo hash
• é rápida para calcular o valor de hash para qualquer mensagem dada
• é inviável gerar uma mensagem a partir de seu valor hash, exceto tentando todas as mensagens possíveis
• uma pequena mudança em uma mensagem deve mudar o valor de hash tão extensivamente que o novo valor de hash pareça não estar relacionado com o antigo valor de hash
• é inviável (texto em inglês) encontrar duas mensagens diferentes com o mesmo valor de hash

Implementando o hashing do conteúdo do BD

Sábado à noite, 30 de março.

Andrej modifica a função Persist() para devolver um novo hash de conteúdo, Snapshot, toda vez que uma nova transação é persistida.

type Snapshot [32]byte

O Snapshot é produzido por esta nova função de hashing seguro sha256:

func (s *Estado) doSnapshot() error {
   // Lê novamente todo o arquivo desde o primeiro byte
   _, err := s.dbFile.Seek(0, 0)
   if err != nil {
      return err
   }

   txsData, err := ioutil.ReadAll(s.dbFile)
   if err != nil {
      return err
   }
   s.snapshot = sha256.Sum256(txsData)

   return nil
}

A função doSnapshot() é chamada pela função Persist() modificada. Quando uma nova transação é escrita no arquivo tx.db, Persist() faz o hash de todo o conteúdo do arquivo e retorna seu hash uma "impressão digital" de 32 bytes.

A partir deste momento, todos podem se referir com 100% de confiança e segurança a qualquer estado particular do banco de dados (conjunto de dados) com um hash específico.

⚓Hora da prática

1/4 Execute o comando da lista de saldos e verifique se os balanços estão de acordo.

✍ tbb saldos list

Saldos das contas em 7d4a360f465d...

| id | nome     | saldo   |
| -- | -------- | ------- |
| 1  | Andrej   | 999251  |
| 2  | BabaYaga | 949     | 
| 3  | Cesar    | 1000    |

2/4 Remova as 2 últimas filas de ./database/tx.db e verifique novamente os saldos.

✍ tbb saldos list

Saldos das contas 841770dcd3...

| id | nome     | saldo   |
| -- | -------- | ------- |
| 1  | Andrej   | 999051  |
| 2  | BabaYaga | 949     | 
| 3  | Cesar    | 1000    |

3/4 Recompense Andrej pelos últimos 2 dias (de 28 a 30 de março):

Transação de recompensa 1:

✍ tbb tx add --de=andrej --para=andrej --valor=100 --dado=recompensa

Persisting new TX to disk:
       {"de":"andrej","para":"andrej","valor":100,"dado":"recompensa"}
       
New DB Snapshot: ff2470c7043f5a34169b5dd38921ba6825b03b3facb83e426
TX persistida com sucesso no ledger.

Transação de recompensa 2:

✍ tbb tx add --de=andrej --para=andrej --valor=100 --dado=recompensa

Persisting new TX to disk:
       {"from":"andrej","to":"andrej","value":100,"data":"reward"}
       
New DB Snapshot: 7d4a360f468b837b662816bcdc52c1869f99327d53ab4a9ca
TX persistida com sucesso no ledger.

4/4 Execute o comando da lista de saldos de tbb e garanta que os balanços e o hash do snapshot sejam os mesmos do início.

✍ tbb saldos list

Saldos das contas em 7d4a360f465d...

| id | nome     | saldo   |
| -- | -------- | ------- |
| 1  | Andrej   | 999251  |
| 2  | BabaYaga | 949     | 
| 3  | Cesar    | 1000    |

Pronto!

Como a função criptográfica de hash sha256 produz a mesma saída (dadas as mesmas entradas, a tx.db atual e 2x tbb tx add), se você seguir os passos exatos em seu próprio computador, você gerará exatamente o mesmo estado e hashes do banco de dados!

Resumo:

O software fechado com acesso centralizado aos dados privados coloca apenas algumas poucas pessoas na posição de poder. Os usuários não têm escolha, e os acionistas estão no negócio para ganhar dinheiro.

Os desenvolvedores da blockchain visam desenvolver protocolos onde os empresários e usuários das aplicações se sinergizem em uma relação transparente e auditável. As especificações da blockchain devem ser bem definidas desde o início e só devem mudar se seus usuários o apoiarem.

A blockchain é um banco de dados imutável. O fornecimento de tokens, os saldos iniciais de usuários e as configurações globais da blockchain que você define em um arquivo Genesis. Os balanços Genesis indicam qual era o estado original da blockchain e nunca são atualizados depois.

As mudanças de estado do banco de dados são chamadas Transações (TX). Transações são eventos à moda antiga que representam ações dentro do sistema.

O conteúdo do banco de dados é passado por uma função de hash criptográfico segura. Os participantes da blockchain usam o hash resultante para referenciar um estado específico do banco de dados.

⚒ Código de estudo

Commit: b99e51

⭐Próximos passos

Você terminou os primeiros capítulos! Parabéns!

█▒▒▒▒▒▒▒▒▒ 10%

Este, porém, foi apenas um aquecimento rápido. A blockchain é uma tecnologia muito desafiadora e extensa. Você precisaria de um livro inteiro explicando como construir o sistema completo e todos os seus componentes a partir do zero. Por isso, escrevi um.

Você pode continuar lendo o próximo capítulo gratuito no eBook com minha versão da newsletter "The Blockchain Way of Programming".

07 | O Modelo de programação da blockchain

• Melhorando o desempenho de um BD imutável
• Batch + Hash + Lista vinculadas ⇒ Blocos
• Migrando de TX.db para BLOCKS.db

Aprendizagem: você redesenha e refatora seu banco de dados MVP e o transforma em uma arquitetura de blockchain.

Continuação do tutorial: https://web3.coach#book

Obrigado por leitura!

Você pode agrupar os dados relacionados em uma única estrutura de dados usando um objeto JavaScript, como este:

const mesa = {
   altura: "1 metro e 20",
   peso: "30 libras",
   cor: "marrom",
   material: "madeira",
 };

Um objeto contém propriedades ou pares chave-valor. O objeto mesa acima tem quatro propriedades. Cada propriedade tem um nome, também chamado de chave, e um valor correspondente.

Por exemplo, a chave altura tem o valor de "1 metro e 20". Juntos, a chave e o valor formam uma única propriedade.

altura: "1 metro e 20",

O objeto mesa contém dados sobre uma mesa. Na verdade, essa é uma razão pela qual você usaria um objeto do JavaScript: para armazenar dados. Também é simples recuperar os dados que você armazena em um objeto. Esses aspectos tornam os objetos muito úteis.

Este artigo trará informações sobre os objetos em JavaScript:

• como criar um objeto
• como armazenar dados em um objeto
• e recuperar dados a partir dele.

Comecemos pela criação de um objeto.

Como criar um objeto em JavaScript

Vou criar um objeto chamado pizza abaixo e acrescentar a ele pares chave-valor.

const pizza = {
   sabor: "queijo",
   molho: "marinara",
   tamanho: "pequeno"
};

As chaves estão à esquerda dos dois pontos : e os valores estão à direita dele. Cada par chave-valor é uma propriedade. Há três propriedades nesse exemplo:

• A  chave sabor tem um valor "queijo".
• A chave molho tem um valor "marinara".
• A chave tamanho tem um valor "pequeno".

Cada propriedade é separada por uma vírgula. As propriedades, juntas, ficam cercadas por chaves {}.

Essa é a sintaxe básica do objeto. Há, porém, algumas regras a serem seguidas ao criar objetos em JavaScript.

Chaves de objetos em JavaScript

Cada chave em seu objeto do JavaScript deve ser uma string, símbolo ou número.

Veja com atenção o exemplo abaixo. Os nomes de chave 1 e 2 são, na verdade, transformados em strings.

const carrinhoCompras = {
   1: "maçã",
   2: "laranja"
};

É uma diferença deixada clara quando se imprime o objeto.

console.log(carrinhoCompras);
//Resultado: { '1': 'maçã', '2': 'laranja' }

Há outra regra a ter em mente sobre nomes de chaves: se seu nome de chave tiver espaços, você precisa deixá-lo entre aspas.

Dê uma olhada no objeto desenvolvedor abaixo. Observe o último nome de chave, "nome do projeto atual". Esse nome de chave contém espaços. Portanto, eu o deixei entre aspas.

const desenvolvedor = {
   nome: "Phil",
   idade: 21,
   desenvolvedorBackend: true,
   linguagens: ["Python", "JavaScript", "Java", "C++"],
   "nome do projeto atual": "O Incrível aplicativo"
};

Valores de objetos em JavaScript

Um valor, por outro lado, pode ser qualquer tipo de dado, incluindo um array, número ou booleano. Os valores no exemplo acima contêm estes tipos: string, inteiro, booleano e array.

Você pode até usar uma função como um valor. Nesse caso, ela é conhecida como método. sons(), no objeto abaixo, é um exemplo.

const animal = {
   tipo: "gato",
   nome: "gatinho",
   sons() { console.log("miau miau") }
};

Agora, vamos supor que você queira adicionar ou excluir um par chave-valor ou que, simplesmente, você queira recuperar o valor de um objeto.

Você pode fazer essas coisas usando a notação de ponto ou de colchetes, sobre as quais falaremos em seguida.

Como a notação de ponto e a notação de colchetes funcionam em JavaScript

A notação de ponto e a notação de colchetes são duas maneiras de acessar e usar as propriedades de um objeto. É provável que você use a notação de pontos com mais frequência. Por isso, vamos começar com ela.

Como adicionar um par chave-valor com notação de pontos em JavaScript

Vou criar um objeto vazio abaixo, chamado livro.

const livro = {};

Para adicionar um par chave-valor usando a notação de ponto, use a sintaxe:

nomeDoObjeto.nomeDaChave = valor

Esse é o código para adicionar a chave (autor) e o valor ("Jane Smith") ao objeto livro:

livro.autor = "Jane Smith";

Aqui está um desdobramento do código acima:

• livro é o nome do objeto
• . (ponto)
• autor é o nome da chave
• = (igual)
• "Jane Smith" é o valor

Quando eu imprimir o objeto livro, verei o novo par chave-valor adicionado.

console.log(livro);
//Resultado: { autor: 'Jane Smith' }

Vou adicionar outro par chave-valor ao objeto livro.

livro.anoPublicacao = 2006;

O objeto livro tem agora duas propriedades.

console.log(livro);
//Resultado: { autor: 'Jane Smith', anoPublicacao: 2006 }

Como acessar dados em um objeto JavaScript usando a notação de ponto

Você também pode usar a notação de ponto em uma chave para acessar o valor relacionado.

Considere este objeto jogadorBasquete.

const jogadorBasquete = {
   nome: "James",
   mediaPontosPorJogo: 20,
   altura: "1,90 m",
   posicao: "ala-armador"
};

Digamos que você queira recuperar o valor "ala-armador". Esta é a sintaxe a ser usada:

nomeDoObjeto.nomeDaChave

Vamos utilizar essa sintaxe para obter e imprimir o valor "ala-armador".

console.log(jogadorBasquete.posicao);
//Resultado: ala-armador

Aqui está um desdobramento do código acima:

• jogadorBasquete é o nome do objeto
• .  (ponto)
• posicao é o nome da chave

Aqui temos outro exemplo:

console.log(jogadorBasquete.nome);
//Resultado: James

Como excluir um par chave-valor em JavaScript

Para excluir um par chave-valor, use o operador de exclusão. Esta é a sintaxe:

delete nomeObjeto.nomeChave

Assim, para apagar a chave altura e seu valor do objeto jogadorBasquete, você escreveria este código:

delete jogadorBasquete.altura;

Como resultado, o objeto jogadorBasquete agora tem três pares chave-valor.

console.log(jogadorBasquete);
//Resultado: { nome: 'James', mediaPontosPorJogo: 20, posicao: 'ala-armador' }

É provável que você use frequentemente a notação de ponto, embora haja certos requisitos a serem observados.

Ao utilizar a notação de ponto, os nomes de chave não podem conter espaços, hifens, ou começar com um número.

Por exemplo, digamos que eu tente adicionar uma chave que contém espaços usando a notação de pontos. Vou receber um erro.

jogadorBasquete.porcentagem de acertos = "75%";
//Resulta em um erro

Portanto, a notação de pontos não funcionará em todas as situações. É por isso que existe outra opção: a notação de colchetes.

Como adicionar um par chave-valor usando notação de colchetes em JavaScript

Assim como a notação de ponto, você pode usar a notação de colchetes para adicionar um par chave-valor a um objeto.

A notação de colchetes oferece mais flexibilidade do que a notação de ponto. Isso porque os nomes de chave podem incluir espaços e hifens, podendo também começar com números.

Vou criar um objeto funcionario abaixo.

const funcionario = {};

Agora, quero adicionar um par chave-valor usando a notação de colchetes. Esta é a sintaxe:

nomeDoObjeto["nomeDaChave"] = valor

Então, é assim que eu adicionaria a chave (ocupação) e o valor (vendas) ao objeto do funcionário:

funcionario["ocupação"] = "vendas";

Aqui está um desdobramento do código acima:

• funcionario é o nome do objeto
• "ocupação" é o nome da chave
• = (igual)
• "vendas" é o valor

Abaixo estão mais alguns exemplos que utilizam a flexibilidade da notação de colchetes para adicionar uma variedade de pares chave-valor.

//Acrescentar um nome de chave com várias palavras
funcionario["viaja frequentemente"] = true;
 
//Adicionar um nome de chave que inclui um hífen
funcionario["Primeiro-território"] = "Chicago";
 
//Adicionar um nome de chave que comece com um número
funcionario["25"] = "total de clientes";

Quando imprimo o objeto funcionário, esta é a aparência:

{
  '25': 'total de clientes',
  ocupacao: 'vendas',
  'viaja frequentemente': true,
  'Primeiro-território': 'Chicago'
}

Com essa informação em mente, podemos adicionar a chave "porcentagem de acertos" ao objeto jogadorBasquete abaixo.

const jogadorBasquete = {
   nome: "James",
   mediaPontosPorJogo: 20,
   altura: "1,90 m",
   posicao: "ala-armador"
};

Você deve se lembrar que a notação de ponto nos deixou com um erro quando tentamos adicionar uma chave que incluía espaços.

jogadorBasquete.porcentagem de acertos = "75%";
//Resulta em um erro

A notação de colchetes, no entanto, evita esses erros, como você pode ver aqui:

jogadorBasquete["porcentagem de acertos"] = "75%";

Este é o resultado quando eu imprimo o objeto:

{
  nome: 'James',
  mediaPontosPorJogo: 20,
  altura: '1,90 m',
  posicao: 'ala-armador',
  'porcentagem de acertos': '75%'
}

Como acessar dados em um objeto do JavaScript usando a notação de colchetes

Você também pode usar a notação de parênteses em uma chave para acessar o valor relacionado.

Vamos recordar do objeto animal do início do artigo.

const animal = {
   tipo: "gato",
   nome: "gatinho",
   sons() { console.log("miau miau") }
};

Vamos obter o valor associado à chave nome. Para isso, envolva o nome da chave entre aspas e coloque-a entre colchetes. Esta é a sintaxe:

nomeDoObjeto["nomeDaChave"]

Aqui está o código que você escreveria com a notação de colchetes:

animal["nome"];

Este é um desdobramento do código acima:

• animal é o nome do objeto
• ["nome"] é o nome da chave entre colchetes

Aqui está outro exemplo.

console.log(animal["sons"]());

//Resultado: 
miau miau
undefined

Note que sons() é um método. Por isso, acrescentei os parênteses no final para invocá-lo.

É assim que você invocaria um método usando a notação de ponto.

console.log(animal.sons());

//Resultado: 
miau miau
undefined

Métodos em objetos do JavaScript

Agora, você já sabe como acessar propriedades específicas. Se, no entanto, você quiser todas as chaves ou todos os valores de um objeto, como faria?

Há dois métodos que darão as informações de que você precisa.

const corredor = {
   nome: "Jessica",
   idade: 20,
   milhasPorSemana: 40,
   corrida: "maratona"
};

Use o método Object.keys() para recuperar todos os nomes de chave de um objeto.

Esta é a sintaxe:

Object.keys(nomeDoObjeto)

Podemos usar esse método no objeto corredor acima.

Object.keys(corredor);

Se você imprimir o resultado, receberá um array das chaves do objeto.

console.log(Object.keys(corredor));
//Resultado: [ 'nome', 'idade', 'milhasPorSemana', 'corrida' ]

Do mesmo modo, você pode usar o método Object.values() para obter todos os valores de um objeto. Esta é a sintaxe:

Object.values(nomeObjeto)

Agora, vamos obter todos os valores do objeto corredor.

console.log(Object.values(corredor));
//Resultado: [ 'Jessica', 20, 40, 'maratona' ]

Tratamos de muitas coisas. Aqui está um resumo das principais ideias:

Objetos

• Usamos objetos para armazenar dados como propriedades (pares chave-valor).
• Os nomes de chave devem ser strings, símbolos ou números.
• Os valores podem ser de qualquer tipo.

Acessar propriedades dos objetos

• Notação de pontos: nomeDoObjeto.nomeDaChave
• Notação de colchetes: nomeDoObjeto["nomeDaChave"]

Excluir uma propriedade

• delete nomeDoObjeto.nomeDaChave
  

Você pode fazer muito com objetos. Agora, você conhece o básico para tirar proveito desse tipo de dados poderoso do JavaScript.

A autora escreve sobre aprender a programar e sobre as melhores maneiras de se fazer isso em seu blog, amymhaddad.com. Ela também usar o Twitter para falar sobre programação, aprendizagem e produtividade: @amymhaddad.

O Visual Studio Code (VS Code) foi projetado para ser leve. Ele tem um conjunto restrito de características principais. Você pode, porém, adicionar características extras através de extensões.

O desempenho, contudo, será inevitavelmente afetado à medida que sua coleção de extensões crescer.

Você avalia o desempenho de uma extensão antes de instalá-la? O que você faz se a inicialização do VS Code crescer? Devido à ausência de pessoas escrevendo sobre esse tópico, acho que as pessoas não sabem.

Neste artigo, vou explicar os fatores que afetam o desempenho de uma extensão. Também vou avaliar o desempenho de algumas extensões populares. Em seguida, vou delinear como você pode verificar o desempenho de seu conjunto de extensões existente e dar algumas dicas gerais de desempenho.

Requisitos mínimos de hardware e software

Antes de entrarmos em extensões, vamos falar brevemente sobre quais são os requisitos mínimos para executar o VS Code.

Um computador comprado nos últimos anos com especificações modestas deve ser capaz de executar o VS Code sem nenhum problema.

Hardware

O hardware mínimo que eu recomendo é:

• Processador de 1.6 GHz ou mais rápido;
• Pelo menos 1 GB of RAM;
• Pelo menos 200 MB de espaço em disco.

Sistemas operacionais

O VS Code foi testado nos seguintes sistemas operacionais:

• Mac OS X Yosemite e posteriores.
• Windows 7 (com .NET Framework 4.5.2), 8.0, 8.1 e 10 (32-bit e 64-bit).
• Linux (Debian): Ubuntu Desktop 14.04, Debian 7.
• Linux (Red Hat): Red Hat Enterprise Linux 7, CentOS 7, Fedora 23.

A comunidade não oficial cria para o Raspberry Pi e para Chromebooks

Jay Rodgers lançou um projeto open-source que realiza builds frequentes do VS Code para Raspberry Pi e Chromebooks.

Tenho mantido o projeto há alguns anos e ele se expandiu do fornecimento de binários para Pi para o fornecimento de suporte e ferramentas para colocar o VS Code em funcionamento em dispositivos ARM de baixo custo que, de outro modo, não o suportariam como os Chromebooks (que agora constituem cerca de 60% dos dispositivos nas escolas).

Se você quiser experimentar por si mesmo, pode seguir as instruções que ele apresentou. Ele tem trabalhado muito para tornar o processo o mais simples possível.

Nem todas as extensões são criadas do mesmo modo

As extensões são carregadas e descarregadas sob diferentes condições. O autor da extensão decide isso. Isto é especificado através de eventos de ativação, que discutiremos mais tarde.

Não há feedback no editor indicando se uma extensão está ativa ou não. Então, como sabemos quando uma extensão está ativa?

A maioria das extensões é escrita em TypeScript, mas elas também podem ser escritas em JavaScript. As extensões podem incluir módulos do Node como dependências.

Você pode agrupar e minificar seus arquivos fonte em um único arquivo, se desejar. A documentação do VS Code recomenda fazer isso para melhorar os tempos de carregamento, mas muitas extensões não o fazem. Essas escolhas afetam o desempenho.

As extensões são, em sua maioria, projetos de código aberto escritos por desenvolvedores. A qualidade do código pode variar. A manutenção do código vai variar, com certeza.

As extensões escritas pela Microsoft não são imunes a essas deficiências, mas são as menos propensas a sofrer com elas.

Critérios para selecionar uma extensão

A maioria das listas de extensões fala sobre as características interessantes, mas pouco mais além disso. Quando algo é muito bom, fale-me um pouco também sobre o contexto, certo?

Alguns dos critérios que eu sugiro envolvem a análise do código fonte. Não se deixe adiar por isso. Reunir os fatos-chave leva apenas alguns minutos. Mostrarei como fazer isso!

1. O recurso que eu preciso já está disponível no VS Code?

Eu demonstrei que você não precisa de muitas extensões populares em um artigo "VS Code: you don't need that extension" (texto em inglês). Você pode consultar a documentação do VS Code para verificar uma característica específica.

2. A extensão tem as características de que eu preciso?

Consulte a página da extensão no Visual Studio Marketplace para descobrir isso.

3. Quando uma extensão está carregada e ativa?

Discutirei isto em detalhes na seção Eventos de ativação. Você precisa verificar o package.json do código fonte para descobrir isso com antecedência.

Você pode executar o comando Desenvolvedor: Desempenho de Inicialização para ver os eventos de ativação das extensões instaladas. Eu discuto isso mais adiante na seção Como verificar o desempenho.

4. Os recursos estão otimizados?

Você precisa verificar o código fonte para ver se ele usa um bundler. Você pode verificar o package.json para ver se a seção de scripts tem uma etapa de pré-construção para o bundling.

O arquivo de extensão VSIX é um repositório comprimido de arquivos para o código e a listagem no Marketplace. Os desenvolvedores frequentemente incluem arquivos desnecessários. Há um arquivo .vscodeignore para excluir arquivos.

O número de arquivos que o VSIX contém tem um impacto sobre o tempo de ativação a frio. O tempo de ativação a frio é a primeira execução da extensão após sua instalação. Ele tende a ser mais lento do que o de outras vezes. Acho que isso ocorre porque o VSIX não está comprimido e está em cache.

Esta é a aparência da extensão Vetur quando você a abre no 7Zip.

5. Houve algum problema de desempenho relatado recentemente que não foi resolvido?

Você pode descobrir isso através da verificação de desempenho da extensão. Você também precisa verificar as issues no repositório do Git.

6. O código tem testes?

A extensão vai ser mais suscetível a erros sem testes. Você precisa verificar o código fonte para ver se há testes.

7. A extensão é mantida ativamente?

A seção Detalhes do projeto (Project Details, em inglês) na página de extensão dá uma visão geral da atividade do repositório público do Git. Em alguns casos, uma extensão pode estar "concluída" (em inglês, Done). Nesse caso, a manutenção não é uma consideração importante.

Eventos de ativação

Eventos de ativação são eventos que acionam a ativação de uma extensão. Eles definem as condições de carregamento e descarregamento de uma extensão.

O autor de uma extensão declara esses eventos no campo activationEvents do package.json (Manifesto de Extensão, em inglês).

Há uma variedade de eventos de ativação à sua escolha. Uma extensão pode ouvir muitos eventos de ativação para produzir um escopo mais específico.

Este é um diagrama de sequência do que acontece quando você lança o VS Code. Ele dá uma ideia da cronologia dos eventos que ocorrem, que afetam quando você pode interagir com o editor e usar certas extensões.

Agora, vou passar pelos eventos de ativação mais importantes. Começarei com o escopo mais amplo e continuarei até atingir o escopo mais restrito.

Evento inicial

O evento de ativação * ativará uma extensão quando o VS Code for iniciado. Essas extensões estarão sempre ativas. Isso impacta o tempo de inicialização do VS Code.

"activationEvents": [
    "*"
]

A documentação do VS Code dá os seguintes conselhos:

Para garantir uma ótima experiência do usuário final, use este evento de ativação em sua extensão somente quando nenhuma outra combinação de eventos de ativação funcionar em seu caso de uso.

Na minha opinião, deve haver um caso especial para conceder a uma extensão esse escopo. É preferível usar pelo menos onStartUpFinished.

Extensões populares com este evento de ativação: ES Lint (11 milhões de instalações), Live Server (7,4 milhões de instalações), GitLens (6,5 milhões de instalações), Beautify (5,4 milhões de  instalações), Bracket Pair Colorizer (3,6 milhões de instalações), Git History (2,9 milhões de instalações), Settings Sync (2 milhões de instalações), indent-rainbow (1,1 milhão de instalações).

Evento onStartupFinished

Esta extensão será ativada algum tempo após o início do VS Code, ou seja, assim como o evento de ativação *, mas não vai desacelerar o início do VS Code.

"activationEvents": [
    "onStartupFinished"
]

Extensões populares com este evento de ativação: Prettier (8,5 milhões de instalações).

Evento onLanguage

Esta extensão será ativada sempre que um arquivo de uma determinada linguagem for aberto.

"activationEvents": [
    "onLanguage:json",
    "onLanguage:markdown",
    "onLanguage:typescript"
]

O evento onLanguage toma um valor identificador de linguagem. Você pode declarar tantas linguagens quantas desejar.

Extensões populares com este evento de ativação: a maioria das extensões na categoria "Linguagens de Programação" no Visual Studio Code Marketplace tem uma entrada onLanguage junto dos outros eventos de ativação, Vetur (5,6 milhões de instalações – ativa somente para Vue), YAML (4,3 milhões de instalações – ativa somente para YAML), Better Comments (1,1 milhão de instalações – ativa somente para linguagens suportadas).

Evento workspaceContains

Esta extensão será ativada sempre que você abrir uma pasta que contenha pelo menos um arquivo que corresponda a um padrão global.

"activationEvents": [
    "workspaceContains:**/package.json"
]

Evento onCommand

Esta extensão será ativada sempre que você invocar um comando.

"activationEvents": [
        "onCommand:vscode-docker.compose.down",
        "onCommand:vscode-docker.compose.restart",
        "onCommand:vscode-docker.compose.up",
        ...
]

Outros eventos de ativação

Você pode ler a lista completa de eventos de ativação na documentação de referência.

As extensões definem um escopo específico de modo consistente?

Não!

Muitas extensões utilizam o evento de ativação *.

É assim que eu classificaria a definição do escopo de algumas das extensões que usei:

• O bom: Vetur, YAML, Better Comments.
• O mau:

Prettier: seria melhor visar apenas as linguagens que ele suporta.

Markdown All in One: está ativo quando um arquivo de marcação está aberto, ou quando o espaço de trabalho contém um README.md. Este último me parece desnecessário.

• O feio: Todas as extensões com o evento de ativação * mencionado acima.

Que impacto pode ter o bundling no desempenho de uma extensão?

Pode causar um grande impacto!

John Papa fala sobre isso em seu artigo "Is Your VS Code Extension Slow? Here's How to Speed it Up!".

Ele revela os resultados de uma revisão de 2 das extensões da Microsoft:

1. Azure Account: o bundling reduziu o tempo de ativação em 50%. O tamanho da extensão foi reduzido de 6,2MB para 840KB através do bundling e excluindo mais arquivos (no arquivo .vscodeignore).
2. Docker: o bundling reduziu o tempo de ativação de 3,5 segundos para menos de 2 segundos. Além disso, uma consideração é o tempo de ativação a frio, que tende a ser mais lento do que outros tempos (tempo de ativação a quente). O tempo de ativação a frio passou de 20 segundos para 2 segundos.

Você pode melhorar sua extensão favorita levantando esta questão com o autor da extensão. O guia do usuário para o bundling de extensões (documentação em inglês) explica como.

Como verificar o desempenho

Você pode executar o comando Desenvolvedor: Exibir Extensões em Execução para obter as estatísticas básicas sobre as extensões em execução. Ele classifica as extensões do maior para o menor tempo de ativação. O tempo é intitulado "Ativação inicial" se a extensão for carregada na inicialização.

Como você pode ver na captura de tela, ele também dá avisos sobre questões de desempenho.

Como mencionado anteriormente, vale notar que o tempo de ativação a frio (a primeira vez que uma extensão é executada) e o tempo de ativação a quente (segunda execução e posteriores) podem variar muito. Por esse motivo, deve-se basear o desempenho típico de uma extensão em uma segunda execução.

Você pode auditar o desempenho de início executando o comando Desenvolvedor: Desempenho de Inicialização. Ele abre um documento com estatísticas detalhadas sobre tópicos tais como: informações do sistema, marcas de desempenho, estatísticas de ativação de extensão, estatísticas de carregamento de módulos e muito mais.

Os resultados são específicos para o projeto atual e quaisquer arquivos abertos quando se executa o comando.

A seção Estatísticas de ativação da extensão dá uma visão mais detalhada do desempenho da extensão. É muito útil para ver os eventos de ativação sem a necessidade de verificar o código fonte de uma extensão.

Você pode ver que o VS Code carrega suas próprias extensões "centrais" para o Git, Emmet e algumas outras também na inicialização. Você não quer que a lista de extensões carregadas na inicialização se torne muito longa!

Pontuação para algumas das extensões mais populares

Estou me concentrando nas extensões que eu mesmo usei aqui. Não quero especular sobre extensões que eu realmente não usei.

ESLint

ESLint é a ferramenta de análise estática mais popular para JavaScript e TypeScript. Ela destaca os problemas no editor com linhas vermelhas em forma de sublinhas.

• Autor: Microsoft.
• Número de instalações: 11 milhões.
• Avaliação no Marketplace: 4.3/5 (156).
• Características principais: relatar problemas de sintaxe. Capacidade de corrigir automaticamente alguns problemas.
• Eventos de ativação: no início (*). Pode ser alterado para onStartupFinished em versões futuras. Veja esta issue em aberto para explicar por que essa escolha foi feita.
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 133KB.
• Tempo de ativação no meu sistema: 39ms.
• Suíte de testes: parece ser muito básica. Apenas um pequeno teste de padrões globais.
• Manutenção ativa: sim.
• Extensões alternativas: JS Hint, TS Lint.

O ESLint é uma ótima extensão. O desempenho é excelente.

É decepcionante que ela seja carregada no início. Se isso o incomoda, você pode tentar JS Hint (escrito pelo mesmo desenvolvedor) para JavaScript e TS Lint para TypeScript. Ou você mesmo pode fazer o fork do projeto e mudá-lo!

Ela é mantida ativamente. Não possui um conjunto significativo de testes.

Nota: 8/10

Prettier - Formatador do código

Prettier é um formatador de código com opinião. Atualmente, ele suporta os seguintes idiomas: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown e YAML.

• Autor: Prettier.
• Número de instalações: 8,5 milhões.
• Avaliação no Marketplace: 3.8/5 (204).
• Características principais: formatação de código.
• Eventos de ativação: onStartupFinished.
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 2,1MB.
• Tempo de ativação em meu sistema: 286ms.
• Suíte de testes: sim. A cobertura parece boa.
• Manutenção ativa: sim.
• Extensões alternativas: Beautify.

O Prettier faz um excelente trabalho na simplificação da formatação de códigos.

O desempenho é bom, mas talvez possa ser melhorado. Ele está no lado mais lento do espectro de ativação.

O escopo de ativação é muito amplo. Seria preferível visar apenas as linguagens suportadas. Encontrei um problema com a formatação de Markdown, por isso não uso atualmente para formatar Markdown. Essas são coisas que podem ser mudadas facilmente.

Nota: 7,5/10.

Live Server

O Live Server lança um servidor de desenvolvimento local para dar uma prévia ao vivo dos seus arquivos HTML e SVG.

• Autor: Retwick Dey.
• Número de instalações: 7,5 milhões.
• Avaliação no Marketplace: 4,5/5 (269).
• Características principais: HTML e SVG pré-visualização ao vivo.
• Eventos de ativação: no início (*).
• Os recursos são otimizados: não.
• Tamanho do arquivo: 2,5MB.
• Tempo de ativação em meu sistema: 2513ms.
• Suíte de testes: sim. Testes básicos.
• Manutenção ativa: não. O último commit foi há um ano. O autor da extensão está à procura de um novo mantenedor.
• Extensões alternativas: não encontrei nenhuma!

Quando funciona, é uma extensão conveniente para o uso.

O desempenho é ruim e a manutenção não é mais realizada.

Eu recomendaria que alguém se tornasse o mantenedor e que a colocasse em ordem. Caso contrário, que se encontre outra extensão para o trabalho.

Nota: 5/10.

GitLens

O GitLens ajuda a visualizar a autoria do código e a explorar os repositórios Git.

• Autor: Eric Amodio.
• Número de instalações: 6,5 milhões.
• Avaliação no Marketplace: 4,86/5 (387)
• Características principais: visualização da autoria do código em um olhar. Ricas vistas laterais da barra lateral dos repositórios git.
• Eventos de ativação: no início (*).
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 1,5MB.
• Tempo de ativação em meu sistema: 35ms.
• Suíte de testes: não.
• Manutenção ativa: sim, mas a atividade recente é baixa. O último compromisso foi há 4 meses.
• Extensões alternativas: nenhuma.

O GitLens é uma boa ideia e pode ser útil para obter perspectivas em uma base de código.

Está bem escrito e o desempenho é excelente.

Usei apenas a extensão das anotações de culpa, mas há muitas características e opções de configuração (135 configurações individuais).

Existem configurações para habilitar cada uma das características, o que é uma abordagem muito boa. Você pode ligar e desligar os codelens facilmente.

Houve uma pausa na atividade recentemente. Não sei se essa é uma situação temporária ou não. Portanto, é difícil dizer quão bem as extensões serão suportadas no futuro. O autor tem detalhes para apoiá-lo.

Nota: 9/10.

Vetur

Suporte à linguagem com o Vue

• Autor: Pine Wu.
• Número de instalações: 5,6 milhões.
• Avaliação no Marketplace: 4,5/5 (117)
• Características principais: destaque da sintaxe. Intellisense. Formatação de código.
• Eventos de ativação: onLanguage: vue.
• Os recursos são otimizados: não.
• Tamanho do arquivo: 70,6 MB.
• Tempo de ativação em meu sistema: 252ms. No entanto, a estatística "Ativar Fim" é de 3943ms!
• Suíte de testes: sim.
• Manutenção ativa: sim.
• Extensões alternativas: nenhuma extensão alternativa óbvia. A formatação pode ser feita com Prettier.

O Vetur é a extensão para o desenvolvimento de aplicações em Vue no VS Code.

As sintaxes destacadas, o Intellisense e o hover são ótimos para o desenvolvimento em Vue.

O tamanho da extensão é ENORME.

O desempenho é um pouco errático. Leva pelo menos 4 segundos na minha máquina para terminar a ativação, o que é muito mais longo do que as características integradas da linguagem JavaScript. Há também um atraso notável para o autocompletar da sintaxe de JavaScript.

Os desenvolvedores estão trabalhando no momento no bundling da extensão. Nesse quesito, portanto, esperamos que haja uma melhoria no desempenho em breve.

Nota: 7/10.

Settings Sync

O Settings Sync sincroniza as configurações usando o GitHub Gist.

• Autor: Shan Khan.
• Número de instalações: 2 milhões.
• Avaliação no Marketplace: 4,61/5 (638)
• Características principais: configurações de sincronização.
• Eventos de ativação: no início (*).
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 1,2 MB.
• Tempo de ativação em meu sistema: 2513ms.
• Suíte de testes: sim.
• Manutenção ativa: não. O último commit foi há 1 ano.
• Extensões alternativas: esse é um recurso integrado no VS Code (documentação em inglês).

Essa foi uma extensão destacada. A sincronização de toda a configuração do seu editor entre as máquinas é superútil.

Desde julho de 2020, a mesma funcionalidade é uma característica integrada no VS Code para isso. A principal diferença é que essa extensão salva suas configurações para um gist, que você tem a opção de compartilhar com outros também.

O tempo de ativação é bastante lento. É justificadamente lento? É difícil dizer.

Meu palpite é que o recurso integrado fará um trabalho melhor eventualmente, pois tem o apoio da Microsoft. A extensão parece não ser mais suportada.

Nota: 8/10.

Markdown All in One

Markdown All in One preenchem muitas de suas necessidades de marcação.

• Autor: Yu Zhang.
• Número de instalações: 1,7 milhões.
• Avaliação no Marketplace: 4,8/5 (90)
• Características principais: edição em estilo "toggle". Tabela de conteúdo.
• Eventos de ativação:  onLanguage: markdown, onCommand: markdown.extension.printToHtmlBatch, workspaceContains: README.md.
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 4,1 MB.
• Tempo de ativação em meu sistema: 195ms.
• Suíte de testes: sim.
• Manutenção ativa: sim.
• Extensões alternativas: Marky Markdown.

É uma extensão ótima e o desempenho é excelente.

Tem muitas características para o meu gosto. Para muitas pessoas, é atraente ter tudo o que possam querer em uma única extensão.

O evento de ativação workspaceContains: README.md parece uma inclusão desnecessária para mim. A maioria dos meus projetos tem um README, mas eu raramente os edito. Portanto, para mim, é como ter a extensão sempre ativa.

A lógica para a tabela de conteúdos é um pouco comum. Ela teve alguns problemas com falsos positivos no passado. Não sei se isso foi completamente eliminado.

O tamanho do arquivo da extensão pode ser reduzido excluindo as capturas de tela README do pacote de extensão.

Nota: 8/10.

Dicas de desempenho geral

Use um SO de 64 bits

Se você atualizar para uma versão de 64 bits de um sistema operacional, pode expandir a quantidade de memória virtual (VM) disponível para o VS Code de 2 GB para 4 GB.

Isto permite que o VS Code possa lidar com cargas de trabalho significativamente maiores quando a VM é necessária.

Desative a restauração do estado do projeto no início da operação

O VS Code restaura automaticamente o estado do projeto a partir da sessão anterior. Isso pode prolongar o tempo necessário para carregar um projeto.

Você pode desativar algumas das configurações de restauração para acelerar o tempo de carregamento:

• Workbench › Editor: Restore View State: ativado por padrão.
• Files: Restore Undo Stack: ativado por padrão.
• Workbench: Startup Editor: controla qual editor é mostrado na inicialização. A página padrão é a de boas-vindas. Você pode defini-la para "nenhuma" para prevenir que qualquer editor apareça na inicialização.

Desative recursos caros que afetam o desempenho de edição

• Minimap: Editor › Minimap: Enabled, ativado por padrão.
• Word wrap: Editor: Word Wrap, desabilitado por padrão.
• CodeLens: Editor: CodeLens, ativado por padrão.
• Format on Save: Editor: Format On Save, desabilitado por padrão.
• Format on Paste: Editor: Format On Paste, desabilitado por padrão.

Desative extensões para um espaço de trabalho

Você pode desativar uma extensão para um espaço de trabalho (projeto).

O mais provável é que você queira fazer isso para extensões que funcionem sempre. Para um projeto Java, você não vai precisar de ESLint!

Você também pode adotar a abordagem oposta. Você pode desativar uma extensão globalmente e somente habilitá-la para um número seleto de projetos.

Crie conjuntos de extensões

Você pode especificar um diretório alternativo para extensões a partir da linha de comando, como abaixo.

code --extensions-dir <dir>

Portanto, se você quiser usar diferentes conjuntos de extensões, você pode. Você pode adicionar um atalho de área de trabalho para isso, ou um alias para executar isto regularmente a partir da linha de comando.

Uma coisa a se ter em mente é a sincronização. Se você sincronizar suas extensões entre máquinas, você pode querer excluir extensões da sincronização. Caso contrário, você pode estragar sua pasta por engano ao trocar.

O ideal é que você não precise fazer isso.

Desative todas as extensões para uma sessão

Você pode iniciar o VS Code com todas as extensões de usuário desabilitadas a partir da linha de comando. Modo Zen no seu máximo!

code --disable-extensions

Solução de problemas de desempenho

Lentidão ou uma tela em branco

O VS Code tem problemas com a aceleração de hardware da GPU (unidade de processamento gráfico) em alguns sistemas. Você pode ver se esse é o caso, desativando a aceleração da GPU.

code --disable-gpu

Para definir isso permanentemente, faça o seguinte:

• Abra a Paleta de Comando (Ctrl+Shift+P).
• Execute o comando Preferências: Configurar Argumentos de Runtime. Esse comando abrirá um arquivo argv.json para configurar argumentos de tempo de execução. Você já pode ver alguns argumentos padrão lá.
• Adicione "disable-hardware-acceleration": true.
• Reinicie o VS Code.

Instalação parece estar corrompida com a mensagem [Unsupported].

O VS Code faz uma verificação de antecedentes quando inicia para verificar se você alterou algum de seus arquivos fonte. Se esse for o caso, você verá o texto [Unsupported] na barra de título.

Uma das causas desse problema pode ser o software antivírus. O VS Code pode ter sido colocado em quarentena por engano ou ter tido arquivos removidos pelo software antivírus (ver questão #94858). Verifique as suas configurações do software antivírus para prevenir isso.

Para resolver essa situação, você pode reinstalar o VS Code. Isso substituirá os arquivos modificados e silenciará o aviso.

Palavras finais

Você não deve precisar comprometer o desempenho para obter as características de que precisa.

A abordagem mais pragmática é incrementar as extensões de que você precisa. Faça um pouco de pesquisa a cada vez e teste a extensão. Antes que você perceba, terá um portfólio incrível de extensões.

Escrito por: David Venturi

Há um ano e meio, desisti de um dos melhores programas de Ciência da Computação do Canadá. Comecei a criar meu próprio programa de mestrado em ciência de dados utilizando recursos on-line. Percebi que podia aprender tudo o que precisava através da edX, do Coursera e da Udacity. Eu podia, inclusive, aprender mais rápido, de modo mais eficiente e por uma pequena parte do valor.

Estou quase terminando agora. Fiz muitos cursos relacionados à ciência de dados e conferi partes de muitos outros. Conheço as opções que estão por aí e quais habilidades são necessárias para os alunos se prepararem para o papel de analista de dados ou de cientista de dados. Assim, comecei a criar um guia de revisão que recomenda os melhores cursos para cada disciplina dentro da ciência de dados.

No primeiro guia desta série, recomendei algumas aulas de programação (texto em inglês) para o cientista de dados iniciante. Depois, foram as aulas de estatística e de probabilidade (texto em inglês). Em seguida, introdução à ciência de dados. Por fim, cursos de visualização de dados (texto em inglês).

Agora, vamos à aprendizagem da máquina.

Para este guia, passei várias horas tentando identificar cada curso de aprendizagem de máquina on-line oferecido a partir de maio de 2017, extraindo informações-chave de seus programas e análises de estudantes e compilando suas classificações. Meu objetivo final era identificar os três melhores cursos disponíveis e apresentá-los a você abaixo.

Para esta tarefa, recorri a ninguém menos do que a comunidade de código aberto da Class Central e ao seu banco de dados de milhares de classificações e análises de cursos.

Desde 2011, o fundador da Class Central, Dhawal Shah, vem se mantendo atento aos cursos on-line, mais do que qualquer outra pessoa no mundo. Dhawal me ajudou pessoalmente a montar esta lista de recursos.

Como escolhemos os cursos que avaliamos

Os cursos precisavam se enquadrar em três critérios:

1. Deveriam ter uma quantidade significativa de conteúdo de aprendizagem de máquina: o ideal é que a aprendizagem de máquina seja o tópico principal. Observe que os cursos de aprendizagem profunda (do inglês, deep learning) são excluídos. Falaremos mais sobre isso depois.
2. Deveriam ser sob demanda ou oferecidos em intervalos mensais curtos.
3. Deveriam ser cursos on-line interativos – sem livros ou tutoriais somente de leitura: embora estes sejam modos viáveis de aprender, o guia se concentra nos cursos. Os cursos que são estritamente baseados em vídeo (isto é, sem questionários, tarefas etc.) também foram excluídos.

Acreditamos ter percorrido todos os cursos notáveis que se encaixam nos critérios acima. Como, aparentemente, existem centenas de cursos na Udemy, optamos por considerar apenas os mais analisados e bem cotados pelos alunos.

Sempre há, porém, a chance de que tenhamos perdido algo.

Como avaliamos os cursos

Compilamos as classificações médias e o número de análises da Class Central e de outros locais de revisão para calcular uma classificação média ponderada para cada curso. Lemos análises por texto e utilizamos este feedback para complementar as classificações numéricas.

Fizemos decisões subjetivas em termos do programa de cada curso com base em três fatores:

1. Explicação do fluxo de trabalho de aprendizagem da máquina: o curso descreve os passos necessários para executar um projeto de sucesso em aprendizagem de máquina? Veja a próxima seção para saber o que implica um fluxo de trabalho típico.
2. Tratamento das técnicas e dos algoritmos de aprendizagem de máquina: uma variedade de técnicas (por exemplo, regressão, classificação, agrupamento, etc.) e algoritmos (por exemplo, dentro da classificação: Naive Bayes, árvores de decisão, máquinas vetoriais de suporte etc.) são tratados ou apenas alguns poucos são selecionados? É dada preferência a cursos que cubram mais, sem poupar dos detalhes.
3. Utilização de ferramentas comuns em ciência de dados e aprendizagem de máquina: o curso é ministrado usando linguagens de programação populares como Python, R e/ou Scala? As bibliotecas populares dentro dessas linguagens são examinadas? Embora não sejam necessárias, elas são úteis e, portanto, é dada uma ligeira preferência aos cursos que tratam dessas bibliotecas.

O que é aprendizagem de máquina? O que é um fluxo de trabalho?

Uma definição popular tem origem em uma declaração de Arthur Samuel, em 1959: aprendizagem de máquina é um subcampo da ciência da computação que "dá aos computadores a capacidade de aprender sem serem explicitamente programados". Na prática, isto significa desenvolver programas de computador que podem fazer previsões com base em dados. Assim como os humanos podem aprender com a experiência, os computadores também podem fazê-los, sendo que, neste caso dados equivalem à experiência.

Um fluxo de trabalho de aprendizagem de máquina é o processo necessário para a realização de um projeto de aprendizagem de máquina. Embora os projetos individuais possam diferir, a maioria dos fluxos de trabalho compartilha de várias tarefas comuns: avaliação de problemas, exploração dos dados, pré-processamento de dados, treinamento/teste/desenvolvimento de modelos etc. Abaixo, você encontrará uma visualização útil destas etapas principais:

O curso ideal introduz todo o processo e fornece exemplos interativos, tarefas e/ou questionários onde os alunos podem realizar cada tarefa por conta própria.

Estes cursos cobrem a aprendizagem profunda?

Em primeiro lugar, vamos definir a aprendizagem profunda, ou, em inglês, deep learning. Aqui está uma descrição sucinta:

"A aprendizagem profunda é um subcampo de aprendizagem de máquina preocupado com os algoritmos inspirados na estrutura e função do cérebro, chamados de redes neurais artificiais".

—Jason Brownlee, do Domínio da Aprendizagem de Máquina

Como seria de se esperar, partes de alguns dos cursos de aprendizagem de máquina contêm conteúdo sobre aprendizagem profunda. No entanto, optei por não incluir cursos que sejam somente de aprendizagem profunda. Se você estiver interessado na aprendizagem profunda especificamente, temos este este artigo (texto em inglês) para você:

Minhas três principais recomendações nessa lista seriam:

• Creative Applications of Deep Learning with TensorFlow, da Kadenze
• Neural Networks for Machine Learning, da Universidade de Toronto (ensinado por Geoffrey Hinton), na Coursera
• Deep Learning A-Z™: Hands-On Artificial Neural Networks, de Kirill Eremenko, Hadelin de Ponteves e a equipe da SuperDataScience, na Udemy

Pré-requisitos recomendados

Vários cursos listados abaixo pedem aos estudantes que tenham experiência prévia em programação, cálculo, álgebra linear e estatística. Estes pré-requisitos são compreensíveis, dado que a aprendizagem da máquina é uma disciplina avançada.

Alguns desses assuntos não são familiares? Boas notícias! Parte desta experiência pode ser adquirida através de nossas recomendações nos dois primeiros artigos (o de programação e o de estatísticas – ambos os textos em inglês) deste Guia de Carreira em Ciência de Dados. Vários cursos de alto nível abaixo também fornecem revisões leves de cálculo e de álgebra linear e destacam os aspectos mais relevantes para a aprendizagem de máquina para os menos familiarizados.

Nossa escolha como o melhor curso de aprendizagem de máquina é...

• Machine Learning (da Universidade de Stanford, na Coursera)

Este curso da Universidade de Stanford na Coursera é, claramente, o vencedor atual em termos de classificação, análises e adequação do programa de estudos. Ensinado pelo famoso Andrew Ng, fundador do Google Brain e ex-cientista chefe da Baidu, essa foi a aula que acabou gerando a Coursera. Tem uma classificação média ponderada de 4,7 estrelas sobre 422 avaliações.

Lançado em 2011, ele cobre todos os aspectos do fluxo de trabalho de aprendizagem da máquina. Embora tenha um escopo menor do que a classe original de Stanford na qual se baseia, ainda consegue cobrir um grande número de técnicas e algoritmos. O tempo estimado de conclusão é de onze semanas, com duas semanas dedicadas às redes neurais e a aprendizagem profunda. Opções gratuitas e pagas estão disponíveis.

Andrew Ng é um instrutor dinâmico, mas gentil, com uma experiência palpável. Ele inspira confiança, especialmente ao compartilhar dicas práticas de implementação e avisos sobre armadilhas comuns. É fornecido uma revisão de álgebra linear e o autor destaca os aspectos de cálculo mais relevantes para a aprendizagem da máquina.

A avaliação é automática e feita através de questionários de múltipla escolha que seguem cada lição e tarefas de programação. As (oito) tarefas podem ser concluídas no MATLAB ou no Octave, que é uma versão de código aberto do MATLAB. Andrew Ng explica sua escolha de linguagem:

No passado, tentei ensinar a aprendizagem de máquina usando uma grande variedade de linguagens de programação, incluindo C++, Java, Python, NumPy e também o Octave... o que eu vi depois de ter ensinado a aprendizagem de máquina por quase uma década é que você aprende muito mais rápido se usar Octave como seu ambiente de programação.

Embora o Python e o R sejam, provavelmente, escolhas mais utilizadas com o aumento da popularidade dessas linguagens (texto em inglês), os comentários das análises observam que isso não deve impedi-lo de acompanhar o curso.

Alguns comentários de destaque observaram o seguinte:

De renome de longa data no mundo da MOOC, o curso de aprendizagem de máquina de Stanford é realmente a introdução definitiva ao tópico. O curso cobre amplamente todas as principais áreas da aprendizagem de máquina... o Prof. Ng precede cada segmento com uma discussão motivadora e exemplos.

Andrew Ng é um professor talentoso e capaz de explicar assuntos complicados de um modo muito intuitivo e claro, incluindo a matemática por trás de todos os conceitos.  Altamente recomendado.

O único problema que vejo com este curso é que ele estabelece expectativas muito altas para outros cursos em termos de comparação.

Uma nova introdução ao tema com um professor brilhante

• Machine Learning (criado pela Universidade de Columbia, na edX)

Este é um curso relativamente novo que faz parte dos MicroMasters (em português, algo como "micromestrados") de Inteligência Artificial da edX. Embora seja mais novo e não tenha um grande número de análises, as que tem são excepcionalmente fortes. O professor John Paisley é mencionado como sendo brilhante, claro e inteligente. O curso tem uma classificação média ponderada de 4,8 estrelas em 10 análises.

O curso também cobre todos os aspectos do fluxo de aprendizagem da máquina e mais algoritmos do que a oferta da Stanford acima. O curso da Universidade de Columbia é uma introdução mais avançada, com os comentários observando que os alunos devem se sentir confortáveis com os pré-requisitos recomendados (cálculo, álgebra linear, estatística, probabilidade e programação).

Questionários (11), tarefas de programação (4) e um exame final são os modos de avaliação. Os alunos podem usar Python, Octave ou MATLAB para completar as tarefas. O tempo total estimado do curso é de oito a dez horas por semana durante doze semanas. Ele é gratuito com um certificado verificado disponível para compra.

Abaixo estão algumas das análises acima mencionadas:

Ao longo de todos os meus anos [como aluno] encontrei professores que não são brilhantes, professores que são brilhantes mas não sabem como explicar as coisas claramente e professores que são brilhantes e sabem como explicar as coisas claramente. O Dr. Paisley pertence ao terceiro grupo.

Este é um ótimo curso... a linguagem do instrutor é precisa e isso é, na minha opinião, um dos pontos mais fortes do curso. As palestras são de alta qualidade e os slides também são ótimos.

O Dr. Paisley e seu supervisor são ... alunos de Michael Jordan, o pai da aprendizagem de máquina. [Dr. Paisley] é o melhor professor de ML (Machine Learning - Aprendizagem de Máquina) de Columbia por causa de sua capacidade de explicar as coisas claramente. Em torno de 240 alunos selecionaram seu curso neste semestre, o maior número entre todos os professores [que ensinam] aprendizagem de máquina em Columbia.

Uma introdução prática em Python e em R de especialistas do setor

• Machine Learning A-Z™: Hands-On Python & R In Data Science (Kirill Eremenko, Hadelin de Ponteves e a equipe da SuperDataScience, na Udemy)

Machine Learning A-Z™, da Udemy, é uma oferta impressionantemente detalhada, que fornece instrução tanto em Python quanto em R, o que é raro e não pode ser dito de nenhum dos outros cursos superiores. Tem uma classificação média ponderada de 4,5 estrelas, com 8.119 análises, o que o torna o curso mais analisado dentre os que revisamos.

Ele cobre todo o fluxo de aprendizagem da máquina e um número quase absurdo de algoritmos nas 40,5 horas de vídeo sob demanda. O curso tem uma abordagem mais aplicada e é mais leve em termos de matemática do que os dois cursos acima. Cada seção começa com um vídeo "intuitivo" de Eremenko, que resume a teoria subjacente do conceito que está sendo ensinado. Hadelin de Ponteves, então, mostra a implementação com vídeos separados, tanto para Python quanto para R.

Como "bônus", o curso inclui modelos de código em Python e em R para que os alunos possam baixar e utilizar em seus próprios projetos. Há questionários e desafios de lição de casa, embora estes não sejam os pontos fortes do curso.

Eremenko e a equipe da SuperDataScience são reverenciados por sua capacidade de "tornar o complexo simples". Além disso, os pré-requisitos listados são "apenas matemática do ensino médio". Portanto, este curso pode ser uma opção melhor para aqueles desencorajados com as ofertas de Stanford e de Columbia.

Algumas das análises mais destacadas observaram o seguinte:

O curso é produzido profissionalmente, a qualidade do som é excelente e as explicações são claras e concisas... é um valor incrível para seu investimento financeiro e de tempo.

Foi espetacular poder acompanhar o curso em duas linguagens de programação diferentes simultaneamente.
Kirill (Eremenko) é um dos melhores instrutores da Udemy (se não da internet) e eu recomendo que se faça qualquer aula que ele ensine. ... Este curso tem muito conteúdo, de verdade!

Os concorrentes

Nossa escolha número 1 teve uma classificação média ponderada de 4,7 de 5 estrelas em 422 análises. Vejamos as outras alternativas, ordenadas por classificação decrescente. Lembramos que cursos que sejam apenas de aprendizagem profunda não estão incluídos neste guia – você pode encontrá-los aqui (texto em inglês).

The Analytics Edge (Instituto de Tecnologia de Massachusetts/edX): mais focado na análise em geral, embora abranja vários tópicos de aprendizagem de máquina. Utiliza R. Narrativa forte, que aproveita exemplos familiares do mundo real. Desafiador. Dez a quinze horas por semana ao longo de doze semanas. Gratuito, com um certificado verificado disponível para compra. Tem uma classificação média ponderada de 4,9 estrelas em 214 análises.

Python for Data Science and Machine Learning Bootcamp (Jose Portilla/Udemy): tem grande parte do conteúdo de aprendizagem de máquina, mas cobre todo o processo de ciência de dados. Mais uma introdução muito detalhada ao Python. Curso surpreendente, embora não ideal para o escopo deste guia. 21,5 horas de vídeo sob demanda. O custo varia, dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,6 estrelas em 3316 análises.

Data Science and Machine Learning Bootcamp with R (Jose Portilla/Udemy): os comentários para o curso de Portilla acima também se aplicam aqui, exceto pelo fato de que o curso é em linguagem R. 17,5 horas de vídeo sob demanda. O custo varia, dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,6 estrelas em 1317 análises.

Machine Learning Series (Lazy Programmer Inc./Udemy): ensinado por um cientista de dados/engenheiro de software de big data/engenheiro de software full-stack com um currículo impressionante, Lazy Programmer tem atualmente uma série de 16 cursos focados na aprendizagem de máquina na Udemy. No total, os cursos têm mais de 5 mil classificações e quase todas elas têm 4,6 estrelas. A descrição de cada curso individual fornece um ordenamento útil do curso. Utiliza Python. O custo varia, dependendo dos descontos da Udemy, que são frequentes.

Machine Learning (Georgia Tech/Udacity): uma compilação do que eram três cursos separados: aprendizagem supervisionada, sem supervisão e aprendizagem de reforço. Parte do Nanodegree de Engenheiro de Aprendizagem de Máquina, da Udacity, e do mestrado on-line (OMS), da Georgia Tech. Os vídeos são curtos, como é o estilo da Udacity. Os professores são simpáticos. O tempo estimado é de quatro meses. Gratuito. Tem uma classificação média ponderada de 4,56 estrelas em 9 análises.

Implementing Predictive Analytics with Spark in Azure HDInsight (Microsoft/edX): introduz os conceitos centrais de aprendizagem de máquina e uma variedade de algoritmos. Tira proveito de várias grandes ferramentas de dados amigáveis, incluindo Apache Spark, Scala e Hadoop. Utiliza tanto Python, quanto R. Quatro horas por semana durante seis semanas. Gratuito com um certificado verificado disponível para compra. Tem uma classificação média ponderada de 4,5 estrelas em 6 análises.

Data Science and Machine Learning with Python — Hands On! (Frank Kane/Udemy): utiliza Python. Kane tem nove anos de experiência na Amazon e na IMDb. Nove horas de vídeo sob demanda. O custo varia, dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,5 estrelas em 4139 análises.

Scala and Spark for Big Data and Machine Learning (Jose Portilla/Udemy): o foco é em "Big Data", especificamente na implementação em Scala e Spark. Dez horas de vídeo sob demanda. O custo varia, dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,5 estrelas em 607 análises.

Machine Learning Engineer Nanodegree (Udacity): o principal programa de Machine Learning do Udacity, que apresenta o melhor sistema de análise de projetos e suporte de carreira. O programa é uma compilação de vários cursos individuais da Udacity, que são gratuitos. Co-criado pela Kaggle. Cronograma estimado de seis meses. Atualmente, custa US$ 199 por mês, com um reembolso de 50% da mensalidade disponível para aqueles que se formarem dentro de 12 meses. Tem uma classificação média ponderada de 4,5 estrelas em 2 análises.

Learning From Data (Introductory Machine Learning) (California Institute of Technology/edX): a inscrição está, atualmente, fechada na edX, mas também está disponível através da plataforma independente da CalTech (veja abaixo). Tem uma classificação média ponderada de 4,49 estrelas em 42 análises.

Learning From Data (Introductory Machine Learning) (Yaser Abu-Mostafa/California Institute of Technology): "um verdadeiro curso da Caltech, não uma versão diluída". As revisões observam que é excelente para entender a teoria da aprendizagem de máquina. O professor, Yaser Abu-Mostafa, é popular entre os estudantes e também escreveu o livro didático no qual este curso se baseia. Os vídeos são as aulas gravadas (com slides das aulas) e se encontram no YouTube. As tarefas de casa são arquivos em formato .pdf. A experiência do curso para estudantes on-line não é tão adequada quanto as três principais recomendações. Tem uma média ponderada de 4,43 estrelas em 7 análises.

Mining Massive Datasets (Universidade de Stanford): aprendizagem de máquina com foco em "Big Data". Introduz modernos sistemas de arquivos distribuídos e MapReduce. Dez horas por semana durante sete semanas. Gratuito. Tem uma classificação média ponderada de 4,4 estrelas em 30 análises.

AWS Machine Learning: A Complete Guide With Python (Chandra Lingam/Udemy): um foco único na aprendizagem de máquina baseado em nuvem e, especificamente, nos Amazon Web Services. Utiliza Python. Nove horas de vídeo sob demanda. O custo varia dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,4 estrelas em 62 análises.

Introduction to Machine Learning & Face Detection in Python (Holczer Balazs/Udemy): utiliza Python. Oito horas de vídeo sob demanda. O custo varia, dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,4 estrelas em 162 análises.

StatLearning: Statistical Learning (Universidade de Stanford): baseado no excelente livro didático, "An Introduction to Statistical Learning, with Applications in R" e ensinado pelos professores que o escreveram. Os revisores observam que o MOOC não é tão bom quanto o livro, citando exercícios "pouco desafiadores" e vídeos medíocres. Cinco horas por semana durante nove semanas. Gratuito. Tem uma classificação média ponderada de 4,35 estrelas em 84 análises.

Machine Learning Specialization (Universidade de Washington/Coursera): grandes cursos, mas as duas últimas aulas (incluindo o projeto final) foram canceladas. Os revisores observam que esta série é mais digerível (leia-se: mais fácil para aqueles sem formação técnica sólida) do que outros cursos de aprendizagem de máquina de ponta (por exemplo, o de Stanford ou o da Caltech). Esteja ciente de que a série está incompleta, sem os sistemas de recomendação, sem aprendizagem profunda e sem um resumo. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 4,31 estrelas em 80 análises.

From 0 to 1: Machine Learning, NLP & Python-Cut to the Chase (Loony Corn/Udemy): "uma abordagem lúcida e breve, mas confiante, sobre as técnicas de aprendizagem de máquina". Ensinado por uma equipe de quatro pessoas com décadas de experiência no setor. Utiliza o Python. O custo varia dependendo dos descontos da Udemy, que são frequentes. Tem uma classificação média ponderada de 4,2 estrelas em 494 análises.

Principles of Machine Learning (Microsoft/edX): utiliza R, Python e a aprendizagem de máquina do Microsoft Azure. Parte do programa do certificado em Ciência de Dados da Microsoft Professional. Três a quatro horas por semana durante seis semanas. Gratuito com um certificado verificado disponível para compra. Tem uma classificação média ponderada de 4,09 estrelas em 11 análises.

Big Data: Statistical Inference and Machine Learning (Universidade de Tecnologia de Queensland/Aprendizagem Futura): um breve e agradável curso exploratório de aprendizagem de máquina, com foco em Big Data. Trata de algumas ferramentas, como R, H2O Flow e WEKA. Apenas três semanas de duração, com uma recomendação de duas horas por semana, mas um dos comentários observa que seis horas por semana seriam mais apropriadas. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 4 estrelas em 4 análises.

Genomic Data Science and Clustering (Bioinformática V) (Universidade da Califórnia, San Diego/Coursera): para aqueles interessados na intersecção entre a informática e a biologia e em como ela representa uma importante fronteira na ciência moderna. Foca no clustering dos dados e na redução da dimensionalidade. Faz parte da especialização em Bioinformática da Universidade da Califórnia/San Diego. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 4 estrelas em 3 análises.

Intro to Machine Learning (Udacity): prioriza a amplitude do tópico e as ferramentas práticas (em Python) em vez da profundidade e da teoria. Os instrutores, Sebastian Thrun e Katie Malone, tornam essa aula divertida. Consiste em vídeos curtos e questionários seguidos de um miniprojeto para cada aula. Atualmente, faz parte do Nanodegree de Analista de Dados, da Udacity. Tempo estimado de dez semanas. Gratuito. Tem uma classificação média ponderada de 3,95 estrelas em 19 análises.

Machine Learning for Data Analysis (Universidade Wesleyan/Coursera): uma breve introdução à aprendizagem de máquina e a alguns algoritmos selecionados. Abrange árvores de decisão, florestas aleatórias, regressão de laço e clustering de k-means. Parte da especialização em Análise de Dados e Interpretação, da Wesleyan. Tempo estimado de quatro semanas. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 3,6 estrelas em 5 análises.

Programming with Python for Data Science (Microsoft/edX): produzido pela Microsoft em parceria com o Coding Dojo. Utiliza Python. Oito horas por semana durante seis semanas. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 3,46 estrelas em 37 análises.

Machine Learning for Trading (Georgia Tech/Udacity): foca na aplicação de abordagens probabilísticas de aprendizagem de máquina para a tomada de decisões comerciais. Utiliza o Python. Faz parte do Nanodegree de Engenheiro de Aprendizagem de Máquina, da Udacity, e do OMS (mestrado on-line) da Georgia Tech. Tempo estimado de quatro meses. Gratuito. Tem uma classificação média ponderada de 3,29 estrelas em 14 análises.

Practical Machine Learning (Johns Hopkins University/Coursera): uma breve introdução prática a uma série de algoritmos de aprendizagem de máquina. Várias análises de uma ou duas estrelas expressando uma variedade de preocupações. Parte da especialização em ciência de dados da Johns Hopkins University. Quatro a nove horas por semana durante quatro semanas. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 3,11 estrelas em 37 análises.

Machine Learning for Data Science and Analytics (Universidade Columbia/edX): introduz uma ampla gama de tópicos de aprendizagem de máquina. Algumas análises negativas fortes, com preocupações que incluem as escolhas de conteúdo, falta de tarefas de programação e apresentação pouco inspiradora. Sete a dez horas por semana durante cinco semanas. Gratuito, com um certificado verificado disponível para compra. Tem uma classificação média ponderada de 2,74 estrelas em 36 análises.

Recommender Systems Specialization (Universidade de Minnesota/Coursera): forte foco em um tipo específico de aprendizagem de máquina – sistemas de recomendação. Uma especialização de quatro cursos mais um projeto final, que é um estudo de caso. Ensinado usando o LensKit (um kit de ferramentas de código aberto para sistemas de recomendação). Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 2 estrelas em 2 análises.

Machine Learning With Big Data(Universidade da Califórnia, San Diego/Coursera): críticas fortes, que destacam instrução e avaliação deficientes. Alguns notaram que levaram apenas horas para completar o curso inteiro. Parte da Especialização em Big Data da UCSD. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 1,86 estrela em 14 análises.

Practical Predictive Analytics: Models and Methods (Universidade de Washington/Coursera): uma breve introdução aos conceitos centrais de aprendizagem da máquina. Um dos comentários observou que não havia questionários e que as tarefas não eram desafiadoras. Parte da especialização em Ciência de Dados em escala, da Universidade de Washington. De seis a oito horas por semana durante quatro semanas. Opções gratuitas e pagas disponíveis. Tem uma classificação média ponderada de 1,75 estrelas em 4 análises.

Os cursos abaixo tiveram uma ou nenhuma revisão desde maio de 2017:

Machine Learning for Musicians and Artists (Goldsmiths, Universidade de Londres/Kadenze): único. Os estudantes aprendem algoritmos, ferramentas de software e melhores práticas de aprendizagem de máquina para dar sentido ao gesto humano, ao áudio musical e a outros dados em tempo real. Sete sessões de duração. Opções de auditoria (grátis) e premium ($10 USD por mês) disponíveis. Tem uma análise com 5 estrelas.

Applied Machine Learning in Python (Universidade de Michigan/Coursera): ensinado usando Python e o kit de ferramentas do scikit-learn. Parte da especialização em Ciência de Dados Aplicada com Python. Programado para começar em 29 de maio. Opções gratuitas e pagas disponíveis.

Applied Machine Learning (Microsoft/edX): ensinado usando várias ferramentas, incluindo Python, R e a aprendizagem de máquina do Microsoft Azure (observação: a Microsoft produz o curso). Inclui laboratórios práticos para reforçar o conteúdo das aulas. Três a quatro horas por semana durante seis semanas. Gratuito com um certificado verificado disponível para compra.

Machine Learning with Python (Big Data University): ensinado usando Python. Voltado para iniciantes. Tempo estimado de conclusão de quatro horas. A Big Data University é afiliada à IBM. Gratuito.

Machine Learning with Apache SystemML (Big Data University): ensinado utilizando o Apache SystemML, que é uma linguagem de estilo declarativa projetada para a aprendizagem de máquina em larga escala. Tempo estimado de conclusão de oito horas. A Big Data University é afiliada à IBM. Gratuito.

Machine Learning for Data Science (Universidade da Califórnia, San Diego/edX): não foi lançado até janeiro de 2018. Exemplos de programação e tarefas estão em Python, usando Jupyter Notebooks. Oito horas por semana durante dez semanas. Grauito com um certificado verificado disponível para compra.

Introduction to Analytics Modeling(Georgia Tech/edX): o curso anuncia R como sua principal ferramenta de programação. Cinco a dez horas por semana, durante dez semanas. Gratuito com um certificado verificado disponível para compra.

Predictive Analytics: Gaining Insights from Big Data (Queensland University of Technology/FutureLearn): breve visão geral de alguns algoritmos. Utiliza a plataforma Vertica Analytics da Hewlett Packard Enterprise como uma ferramenta aplicada. Data de início a ser anunciada. Duas horas por semana ao longo de quatro semanas. Gratuito com um certificado de conclusão disponível para compra.

Introducción al Machine Learning (Universitas Telefónica/Miríada X): ensinado em espanhol. Uma introdução à aprendizagem de máquina que abrange a aprendizagem supervisionada e não supervisionada. Um total de vinte horas estimadas em quatro semanas.

Machine Learning Path Step (Dataquest): ensinado em Python usando a plataforma interativa do Dataquest no navegador. Múltiplos projetos guiados e um projeto de bônus onde você cria seu próprio sistema de aprendizagem de máquina usando seus próprios dados. Assinatura necessária.

Os seis cursos a seguir são oferecidos pela DataCamp. O estilo de ensino híbrido da DataCamp aproveita a instrução baseada em vídeo e texto, com muitos exemplos através de um editor de código no navegador. Uma assinatura é necessária para o acesso total aos cursos.

Introduction to Machine Learning(DataCamp): abrange algoritmos de classificação, regressão e agrupamento. Utiliza R. Quinze vídeos e 81 exercícios com um tempo estimado de seis horas.

Supervised Learning with scikit-learn (DataCamp): utiliza Python e scikit-learn. Trata de algoritmos de classificação e regressão. Dezessete vídeos e 54 exercícios com um tempo estimado de quatro horas.

Unsupervised Learning in R(DataCamp): fornece uma introdução básica ao clustering e redução da dimensionalidade em R. Dezesseis vídeos e 49 exercícios com um tempo estimado de quatro horas.

Machine Learning Toolbox (DataCamp): ensina as "grandes ideias" sobre aprendizagem de máquina. Utiliza R. 24 vídeos e 88 exercícios, com um tempo estimado de quatro horas.

Machine Learning with the Experts: School Budgets (DataCamp): um estudo de caso de uma competição de aprendizagem de máquina sobre DrivenData. Envolve a construção de um modelo para classificar automaticamente os itens no orçamento de uma escola. O curso "Supervised Learning with scikit-learn" da DataCamp é um pré-requisito. Quinze vídeos e 51 exercícios com um tempo estimado de quatro horas.

Unsupervised Learning in Python (DataCamp): trata de uma variedade de algoritmos de aprendizagem não supervisionada usando Python, scikit-learn e scipy. O curso termina com os alunos criando um sistema de recomendação para recomendar músicos populares. Treze vídeos e 52 exercícios com um tempo estimado de quatro horas.

Machine Learning (Tom Mitchell/Carnegie Mellon University): curso de iniciação à aprendizagem de máquina da Carnegie Mellon. Um pré-requisito para seu segundo curso de pós-graduação, "Statistical Machine Learning". Aulas de nível universitário com problemas práticos, tarefas de casa e uma avaliação de meio de semestre (todos com soluções) disponíveis on-line. Também há uma versão de 2011 do curso. A Carnegie Mellon University é uma das melhores escolas de pós-graduação para o estudo de aprendizagem de máquina e tem todo um departamento dedicado à área. Gratuito.

Statistical Machine Learning (Larry Wasserman/Carnegie Mellon University): provavelmente, o curso mais avançado deste guia. Um acompanhamento do curso Machine Learning, da Carnegie Mellon. Aulas de nível universitário com problemas práticos, tarefas de casa e uma avaliação de meio de semestre (todos com soluções) disponíveis on-line. Gratuito.

Undergraduate Machine Learning (Nando de Freitas/Universidade de British Columbia): um curso de graduação em aprendizagem de máquina. As aulas são filmadas e colocadas no YouTube, com os slides postados no site do curso. As tarefas do curso também são postadas (mas sem as soluções). Nando de Freitas é agora professor em tempo integral na Universidade de Oxford e recebe elogios por sua capacidade de ensino em vários fóruns. Versão para pós-graduandos disponível (veja abaixo).

Machine Learning (Nando de Freitas/Universidade de British Columbia): um curso de pós-graduação em aprendizagem de máquina. Os comentários sobre o curso de graduação de Nando de Freitas (acima) também se aplicam aqui.

Para encerrar

Este é o quinto de uma série de seis artigos que tratam dos melhores cursos on-line para se lançar no campo da ciência dos dados. Tratamos de programação no primeiro artigo (texto em inglês), estatística e probabilidade no segundo artigo (texto em inglês), introdução a ciência de dados no terceiro artigo e visualização de dados no quarto (texto em inglês).

A parte final desta série será um resumo desses artigos, juntamente aos melhores cursos on-line para outros tópicos-chave, tais como discussão de dados, bancos de dados e até mesmo engenharia de software.

Se você estiver procurando uma lista completa de cursos on-line de Ciência de dados, você pode encontrá-los na página sobre Data Science and Big Data da Class Central.

Se você gostou de ler este texto, confira alguns outros artigos da Class Central (em inglês):

Here are 250 Ivy League courses you can take online right now for free

The 50 best free online university courses according to data

Esta é uma versão condensada do artigo original, publicado na Class Central, onde o autor incluiu um programa detalhado dos cursos.

Em 2017, passei por algumas entrevistas de programação e recebi ofertas de várias grandes empresas de tecnologia. Foi naquele momento que decidi compartilhar o que tinha aprendido neste artigo.

Acabo de atualizá-lo para este ano para que seja superútil e relevante se você estiver procurando emprego agora.

Apesar de ter notas decentes tanto na minha disciplina básica de algoritmos, quanto na minha disciplina de estruturas de dados no curso de Ciência da Computação na universidade, estremeço ao pensar em passar por uma entrevista de programação que se concentre em algoritmos.

Assim, passei os últimos três meses descobrindo como melhorar minhas habilidades em programação para entrevistas e, no fim, recebi ofertas de grandes empresas de tecnologia, como Google, Facebook, Airbnb, Lyft, Dropbox e muitas outras.

Neste artigo, compartilharei as ideias e dicas que recebi ao longo do caminho. Candidatos experientes também podem esperar perguntas sobre design de sistemas, mas isso está fora do escopo deste artigo.

Muitos dos conceitos algorítmicos testados em entrevistas de programação não são aquilo que costumo usar no trabalho, onde sou um engenheiro de front-end (web). Naturalmente, me esqueci um pouco desses algoritmos e estruturas de dados, que aprendi principalmente durante o primeiro e o segundo anos da minha faculdade.

É estressante ter que produzir código (funcional) em uma entrevista enquanto alguém examina cada toque no teclado que você faz. O pior é que, como entrevistado, você é encorajado a comunicar seu processo de pensamento em voz alta ao entrevistador.

Eu costumava pensar que ser capaz de pensar, programar e comunicar simultaneamente era um feito impossível, até que percebi que a maioria das pessoas simplesmente não é boa em entrevistas de programação quando começam. Ser entrevistado é uma habilidade em que se pode melhorar estudando, preparando-se e praticando para isso.

Minha busca de emprego recente me levou a uma jornada para melhorar minhas habilidades para as entrevistas de programação. Os engenheiros de front-end gostam de se queixar de como o atual processo de contratação é ruim, pois as entrevistas técnicas podem incluir habilidades não relacionadas ao desenvolvimento de front-end. Por exemplo, escrever um algoritmo de resolução de labirintos e mesclar duas listas ordenadas de números. Como engenheiro de front-end, eu entendo bem o motivo da reclamação.

O front-end é um domínio especializado, onde os engenheiros têm que se preocupar com muitas questões relacionadas às compatibilidades do navegador, o Modelo de Objeto do Documento (DOM - Document Object Model), desempenho do JavaScript, layouts do CSS e assim por diante. É incomum para os engenheiros de front-end implementar alguns dos complexos algoritmos testados em entrevistas.

Em empresas como Facebook e Google, as pessoas são engenheiras de software em primeiro lugar, especialistas de domínio em segundo.

Infelizmente, as regras são estabelecidas pelas empresas, não pelos candidatos. Há uma grande ênfase nos conceitos gerais da informática, como algoritmos, padrões de design e estruturas de dados – habilidades essenciais que um bom engenheiro de software deve possuir. Se você quer o trabalho, você tem que jogar de acordo com as regras estabelecidas pelos mestres do jogo – e melhorar suas habilidades para as entrevistas de programação!

Este artigo está estruturado nas duas seções seguintes. Sinta-se à vontade para pular para a seção que interessa a você.

• O formato das entrevistas de programação e como se preparar para elas.
• Dicas úteis para cada tópico de algoritmos (arrays, árvores, programação dinâmica etc.), juntamente com perguntas práticas recomendadas pelo LeetCode para rever os conceitos centrais e melhorar nesses tópicos.

O conteúdo deste artigo pode ser encontrado aqui (em inglês). Lá, farei atualizações quando necessário.

Se você está interessado no conteúdo de front-end, confira meu manual de entrevistas para front-end aqui (em inglês).

Escolhendo uma linguagem de programação

Antes de mais nada, você precisa escolher uma linguagem de programação para sua entrevista de programação algorítmica.

A maioria das empresas permitirá que você programe na linguagem de sua escolha. A única exceção que eu conheço é o Google. Lá, é permitido que seus candidatos escolham apenas entre Java, C++, Python, Go ou JavaScript.

Na maioria das vezes, recomendo o uso de uma linguagem com a qual você esteja extremamente familiarizado, em vez de uma linguagem que é nova para você, mas que a empresa utiliza amplamente.

Há algumas linguagens que são mais adequadas do que outras para as entrevistas de programação. Também há algumas outras que você vai querer evitar, com certeza.

A partir da minha experiência como entrevistador, a maioria dos candidatos escolhe Python ou Java. Outras linguagens comumente selecionadas incluem JavaScript, Ruby e C++. Eu evitaria absolutamente linguagens de mais baixo nível, como o C ou o Go, simplesmente porque elas não possuem funções de biblioteca padrão e estruturas de dados.

Pessoalmente, o Python é normalmente a minha escolha para os algoritmos de programação durante as entrevistas. Ele é sucinto e tem uma enorme biblioteca de funções e estruturas de dados.

Uma das principais razões que me faz recomendar o Python é o fato de ele usar APIs consistentes, que operam em diferentes estruturas de dados, tais como len(), for ... in ... e notação de corte (do inglês, slicing) em sequências (strings, listas e tuplas). Obter o último elemento em uma sequência é arr[-1] e revertê-lo é simplesmente arr[::-1]. Você pode conseguir muito com pouca sintaxe em Python.

O Java também é uma escolha decente. Como, no entanto, você terá que declarar constantemente os tipos em seu código, isso significa digitar mais. Isso diminuirá a velocidade na qual você programa e digita. Essa questão fica mais aparente quando você tiver que escrever em um quadro branco durante entrevistas no local.

As razões para escolher ou não escolher C++ são similares às de Java. No fim, Python, Java, e C++ são escolhas decentes. Se você está usando Java há algum tempo e não tem tempo para se familiarizar com outra linguagem, recomendo que se mantenha fiel ao Java em vez de pegar o Python do zero. Isto o ajudará a evitar de ter que usar uma linguagem para o trabalho e outra para entrevistas. A maior parte do tempo, o que trava é o pensamento, não a escrita.

Uma exceção à convenção de permitir que o candidato "escolha a linguagem de programação que quiser" é quando a entrevista é para um cargo específico de domínio, como funções de engenheiro de front-end, iOS ou Android. Você precisa estar familiarizado com algoritmos de programação em JavaScript, Objective-C, Swift e Java, respectivamente.

Se você precisar usar uma estrutura de dados que a linguagem não suporte, como uma fila ou pilha em JavaScript, pergunte ao entrevistador se você pode assumir que tem uma estrutura de dados que implementa certos métodos com complexidades de tempo especificadas. Se a implementação dessa estrutura de dados não for crucial para a solução do problema, o entrevistador normalmente a permitirá.

Na realidade, estar ciente das estruturas de dados existentes e selecionar as estruturas apropriadas para resolver o problema em questão é mais importante do que conhecer os intrincados detalhes de implementação.

Revise sua Ciência da Computação básica

Se você estiver fora da faculdade há algum tempo, é altamente aconselhável rever os fundamentos de computação. Eu prefiro revisar enquanto pratico. Eu revejo minhas anotações da faculdade e reviso os vários algoritmos enquanto trabalho nos problemas de algoritmos do LeetCode e do Cracking the Coding Interview.

Se você estiver interessado em como as estruturas de dados são implementadas, confira Lago, um repositório do GitHub contendo estruturas de dados e exemplos de Algoritmos em JavaScript.

Domínio através da prática

Em seguida, adquira familiaridade e domínio dos algoritmos e estruturas de dados em sua linguagem de programação escolhida.

Pratique e resolva questões de algoritmos na linguagem de sua escolha. Embora o Cracking the Coding Interview seja um bom recurso, prefiro resolver problemas digitando o código, deixando-o rodar e obtendo feedback instantâneo.

Há vários juízes on-line, tais como o LeetCode, o HackerRank e o CodeForces para você praticar perguntas on-line e se acostumar a linguagem. Pela minha experiência, as perguntas do LeetCode são mais parecidas com as perguntas feitas em entrevistas. As perguntas do HackerRank e do CodeForces são mais parecidas com as perguntas da programação competitiva.

Se você praticar perguntas suficientes do LeetCode, há uma boa chance de que você veja ou complete uma das suas perguntas reais de entrevista (ou alguma variante dela).

Aprenda e compreenda as complexidades de tempo e de espaço das operações comuns na sua linguagem escolhida. Para Python, esta página virá a calhar. Aprenda também sobre o algoritmo de ordenação subjacente a ser usado na função sort() da linguagem e as suas complexidades de tempo e de espaço (em Python é o TimSort, que é um híbrido).

Depois de completar uma pergunta do LeetCode, normalmente acrescento as complexidades de tempo e espaço do código escrito como comentários acima do corpo da função. Utilizo os comentários para me lembrar de comunicar a análise do algoritmo após ter completado a implementação.

Leia sobre o estilo de programação recomendado para a sua linguagem e mantenha-se fiel a ele. Se escolher Python, consulte o Guia de Estilo PEP 8 (em inglês). Se escolher Java, consulte o Guia de Estilo de Java do Google (em inglês).

Aprenda e esteja familiarizado com as armadilhas e problemas comuns da linguagem. Se os apontar durante a entrevista e se evitar cair neles, ganhará pontos a mais e impressionará o entrevistador, independentemente de o entrevistador estar familiarizado com a linguagem ou não.

Obtenha uma ampla exposição a questões de vários tópicos. Na segunda metade do artigo, menciono tópicos de algoritmos e as questões úteis para a prática de cada tópico. Faça cerca de 100 a 200 perguntas do LeetCode e você deverá se sair bem.

Se preferir cursos onde a aprendizagem seja mais estruturada, aqui ficam algumas recomendações. De modo algum é obrigatório fazer cursos on-line para passar em entrevistas.

• O AlgoMonster visa ajudá-lo a passar na entrevista técnica no mais curto espaço de tempo possível. Criado por engenheiros do Google, o AlgoMonster utiliza uma abordagem baseada em dados para ensinar os padrões de perguntas-chave mais úteis e tem conteúdos para ajudar a rever rapidamente algoritmos e estruturas de dados básicos. O melhor de tudo é que o AlgoMonster não é baseado em assinaturas – pague uma taxa única e obtenha acesso vitalício.
• Grokking the Coding Interview: Patterns for Coding Questions, da Educative, expande as questões práticas recomendadas neste artigo, mas aborda a prática a partir de uma perspectiva de padrão de perguntas, que é uma abordagem com a qual também concordo para a aprendizagem e com a qual me habituei pessoalmente a melhorar na programação de entrevistas. O curso permite praticar perguntas selecionadas em Java, Python, C++, JavaScript e também fornece exemplos de soluções nessas linguagens. Aprenda e compreenda os padrões em vez de memorizar as respostas.

Logicamente, pratique, pratique e pratique um pouco mais!

Fases de uma entrevista de programação

Parabéns! Você está pronto para pôr as suas capacidades em prática! Em uma entrevista de programação, será feita uma pergunta técnica pelo entrevistador. Você escreverá o código em tempo real, em um editor colaborativo (tela do telefone) ou em um quadro branco (no local) e terá 30 a 45 minutos para resolver o problema. É aqui que a verdadeira diversão começa!

O seu entrevistador procurará ver se você preenche os requisitos para o cargo. Cabe a você mostrar para ele que possui as competências necessárias. Inicialmente, pode parecer estranho falar enquanto programa, já que a maioria dos programadores não tem o hábito de explicar em voz alta os seus pensamentos enquanto escrevem o código.

No entanto, é difícil para o entrevistador saber o que você está pensando simplesmente olhando para o seu código. Se comunicar a sua abordagem ao entrevistador mesmo antes de começar a programar, pode validar a sua abordagem com eles. Dessa forma, os dois podem chegar a acordo sobre uma abordagem aceitável.

Preparação para uma entrevista remota

Para telas de telefones e entrevistas remotas, tenha à disposição um papel e uma caneta ou lápis para fazer anotações ou diagramas. Se for feita uma pergunta sobre árvores e gráficos, geralmente ajuda desenhar exemplos da estrutura de dados.

Use fones de ouvido. Certifique-se de que se encontra em um ambiente calmo. Não queira segurar o telefone com uma mão e escrever com a outra. Tente evitar o uso de alto-falantes. Se o feedback for ruim, a comunicação fica mais difícil. Ter que repetir apenas resultará em perda de tempo valioso.

O que fazer quando você receber a pergunta

Muitos candidatos começam a programar assim que ouvem a pergunta. Isso geralmente é um grande erro. Primeiro, reserve um momento e repita a pergunta para o entrevistador para ter certeza de que você entendeu a pergunta. Se você tiver entendido mal a pergunta, o entrevistador poderá esclarecê-la.

Sempre busque esclarecimento sobre a questão ao ouvi-la, mesmo que você ache que é clara. Você pode descobrir que escapou alguma coisa. Isso também permite ao entrevistador saber que você está atento aos detalhes.

Considere fazer as seguintes perguntas:

• Qual é o tamanho da entrada?
• Qual é o tamanho do intervalo de valores?
• Que tipo de valores existem? Existem números negativos? Pontos flutuantes? Haverá entradas vazias?
• Há duplicatas dentro da entrada?
• Quais são alguns casos extremos da entrada?
• Como a entrada é armazenada? Se você receber um dicionário de palavras, é uma lista de strings ou um trie?

Depois de ter esclarecido suficientemente o escopo e a intenção do problema, explique ao entrevistador sua abordagem de alto nível, mesmo que seja uma solução ingênua. Se você estiver preso, considere várias abordagens e explique em voz alta porque elas podem ou não funcionar. Às vezes, seu entrevistador pode deixar passar dicas que o levarão no caminho certo.

Comece com uma abordagem de força bruta. Comunique-a ao entrevistador. Explique as complexidades de tempo e espaço e esclareça o motivo de tentar a força bruta é ruim. É improvável que a abordagem de força bruta seja aquela que você utilizará em programação. Neste ponto, o entrevistador normalmente fará a temida pergunta "Podemos fazer melhor?". Isso significa que estão procurando por uma abordagem mais otimizada.

Essa é geralmente a parte mais difícil da entrevista. Em geral, procure por trabalhos repetidos e tente otimizá-los, potencialmente armazenando o resultado calculado em algum lugar. Consulte-o mais tarde, em vez de calculá-lo novamente. A seguir, forneço algumas dicas para abordar detalhadamente questões específicas do tópico.

Só comece a programar depois que você e seu entrevistador tiverem concordado em uma abordagem e que você tenha recebido um sinal positivo para seguir em frente.

Começando a programar

Use um bom estilo para escrever seu código. Ler código escrito por outros geralmente não é uma tarefa agradável. Ler código horrivelmente formatado escrito por outros é ainda pior. Seu objetivo é fazer seu entrevistador entender seu código para que possa avaliar rapidamente se seu código faz o que se supõe que faça e se resolve um determinado problema.

Use nomes de variáveis claros e evite nomes que sejam letras únicas, a menos que sejam para a iteração. Entretanto, se você estiver programando em um quadro branco, evite usar nomes extensos de variáveis. Isso reduz a quantidade de escrita que você terá que fazer.

Sempre explique ao entrevistador o que você está escrevendo ou digitando. Não se trata de ler, textualmente, para o entrevistador o código que você está produzindo. Fale sobre a seção do código que você está implementando atualmente em nível superior. Explique por que ele é escrito assim e o que está tentando alcançar.

Ao copiar e colar em código, considere se é necessário. Às vezes, é; às vezes, não é. Se você se encontrar copiando e colando um grande pedaço de código abrangendo várias linhas, provavelmente é um indicador de que você pode reestruturar o código, extraindo essas linhas em uma função. Se for apenas uma única linha que você copiou, geralmente está bem.

Entretanto, lembre-se de alterar as respectivas variáveis em sua linha de código copiada, onde for relevante. Erros de cópia e colagem são uma fonte comum de bugs, mesmo na programação do dia a dia!

Após a programação

Depois de terminar de programar, não anuncie imediatamente ao entrevistador que você está pronto. Na maioria dos casos, seu código geralmente não está perfeito. Ele pode conter bugs ou erros de sintaxe. O que você precisa fazer é revisar seu código.

Primeiro, olhe seu código do início ao fim. Olhe para ele como se fosse escrito por outra pessoa, como se você o estivesse vendo pela primeira vez e tentando detectar erros nele. Isso é exatamente o que seu entrevistador estará fazendo. Revise e corrija quaisquer problemas que você possa encontrar.

Em seguida, apresente pequenos casos de teste e execute o código passo a passo (não seu algoritmo) com essas amostras de entrada.

Os entrevistadores gostam quando você lê suas mentes. O que eles costumam fazer depois que você termina de programar é fazer você escrever testes. É uma grande vantagem se você escrever testes para seu código antes mesmo que eles o peçam para fazer isso. Você deve estar emulando um depurador ao passar por seu código. Anote ou diga a eles os valores de certas variáveis enquanto você percorre com o entrevistador as linhas de código.

Se houver grandes pedaços duplicados de código na sua solução, reestruture o código para mostrar ao entrevistador que você valoriza a programação de qualidade. Além disso, procure lugares onde você possa fazer uma avaliação de curto-circuito.

Por fim, forneça as complexidades de tempo e espaço de seu código e explique por que ele é assim. Você pode fazer anotações em partes do seu código com suas várias complexidades de tempo e espaço para demonstrar sua compreensão do código. Você pode até mesmo fornecer as APIs de sua linguagem de programação escolhida. Explique quaisquer trade-offs na sua abordagem atual em comparação com abordagens alternativas, possivelmente em termos de tempo e espaço.

Se seu entrevistador estiver satisfeito com a solução, a entrevista geralmente termina aqui. Também é comum que o entrevistador faça perguntas de extensão, como, por exemplo, sobre como você lidaria com o problema se toda a entrada for muito grande para caber na memória, ou se a entrada chegar como uma stream. Essa é uma pergunta posterior comum no Google, onde eles se preocupam muito com a escala.

A resposta é geralmente uma abordagem de dividir e conquistar – realizar o processamento distribuído dos dados e somente ler certas partes da entrada do disco para a memória, gravar a saída de volta para o disco e combiná-los mais tarde.

Prática com entrevistas simuladas

Os passos mencionados acima podem ser repetidamente ensaiados até que você os tenha interiorizado completamente e eles se tornem normais para você. Uma boa maneira de praticar é fazer uma parceria com um amigo e revezar nas entrevistas um com o outro.

Um grande recurso para a preparação de entrevistas de programação é o interview.io. Essa plataforma oferece entrevistas práticas gratuitas e anônimas com engenheiros do Google e do Facebook, que podem levar a empregos e estágios reais.

Em virtude de ser anônimo durante a entrevista, o processo de entrevista inclusiva é imparcial e de baixo risco. No final da entrevista, tanto o entrevistador quanto o entrevistado podem dar feedback um ao outro com o objetivo de ajudar um ao outro a melhorar.

Sair-se bem nas entrevistas simuladas desbloqueará a página de empregos para os candidatos e permitirá que eles marquem entrevistas (também anônimas) com empresas de ponta, como Uber, Lyft, Quora, Asana, entre outras. Para aqueles que são novatos nas entrevistas de programação, uma entrevista demonstrativa pode ser visualizada neste site. Observe que o site exige que os usuários façam o registro.

Já usei a interviewing.io, tanto como entrevistador quanto como entrevistado. A experiência foi ótima. Aline Lerner, a CEO e cofundadora do interviewing.io, e sua equipe são apaixonados por revolucionar o processo de entrevistas de programação e por ajudar os candidatos a melhorar suas habilidades de entrevista.

Ela também publicou uma série de artigos relacionados às entrevistas de programação no blog interviewing.io. Recomendo inscrever-se o mais cedo possível no interviewing.io, mesmo que ele esteja em estágio beta, para aumentar a probabilidade de receber um convite.

Outra plataforma que permite praticar entrevistas de programação é a Pramp. Enquanto a interview.io combina potenciais candidatos a empregos com entrevistadores experientes em programação, a Pramp adota uma abordagem diferente. A Pramp combina você com outro colega que também é um candidato a emprego. Os dois se revezam assumindo as funções de entrevistador e entrevistado. A Pramp também prepara perguntas e fornece soluções e dicas para orientar o entrevistado.

Vá em frente e conquiste

Depois de fazer uma quantidade razoável de perguntas no LeetCode e de ter prática suficiente em entrevistas simuladas, vá em frente e ponha à prova suas novas habilidades de entrevista.

Inscreva-se em suas empresas favoritas ou, melhor ainda, obtenha indicações de seus amigos que trabalham para essas empresas. As indicações tendem a ser notadas mais cedo e a ter uma taxa de resposta mais rápida do que se você se candidatar sem uma indicação. Boa sorte!

Dicas práticas para questões de programação

Esta seção mergulha profundamente em dicas práticas para tópicos específicos de algoritmos e estruturas de dados que aparecem frequentemente em questões de programação. Muitas questões de algoritmos envolvem técnicas que podem ser aplicadas a questões de natureza similar.

Quanto mais técnicas você tiver em seu arsenal, maiores serão suas chances de passar na entrevista. Para cada tópico, há também uma lista de perguntas recomendadas, que é valiosa para dominar os conceitos centrais. Algumas das perguntas só estão disponíveis com uma assinatura paga do LeetCode, que, na minha opinião, vale o dinheiro se você conseguir um emprego.

Dicas gerais

Valide sempre a entrada em primeiro lugar. Verifique se as entradas são inválidas, vazias, negativas ou diferentes. Nunca assuma que são dados parâmetros válidos. Como alternativa, esclareça com o entrevistador se você pode assumir que a entrada é válida (geralmente, sim), o que pode poupar seu tempo de escrever o código que faz a validação da entrada.

Há algum requerimento de complexidade de tempo e espaço ou restrições?

Verificar a existência de erros off-by-one (texto em inglês).

Em linguagens onde não há coerção automática de tipo, verifique se a concatenação de valores é do mesmo tipo: int, str e list.

Depois de terminar seu código, use alguns exemplos de entradas para testar sua solução.

O algoritmo deve ser executado várias vezes, talvez em um servidor da web? Em caso positivo, a entrada pode provavelmente ser pré-processada para melhorar a eficiência em cada chamada à API.

Use uma mistura dos paradigmas de programação funcional e imperativa:

• Escreva funções puras com a maior frequência possível.
• Use funções puras porque são mais fáceis de pensar a respeito e podem ajudar a reduzir erros em sua implementação.
• Evite a alteração dos parâmetros passados para sua função, especialmente se eles forem passados por referência, a menos que você esteja seguro do que está fazendo.
• Atinja um equilíbrio entre precisão e eficiência. Use a quantidade certa de código funcional e imperativo, quando apropriado. A programação funcional é normalmente cara em termos de complexidade espacial devido à não mutação e à alocação repetida de novos objetos. Por outro lado, o código imperativo é mais rápido porque você opera com objetos existentes.
• Evite confiar em variáveis globais mutáveis. As variáveis globais introduzem o estado.
• Certifique-se de que você não mudará acidentalmente as variáveis globais, especialmente se você tiver que confiar nelas.

Geralmente, para melhorar a velocidade de um programa, podemos escolher entre usar uma estrutura de dados ou um algoritmo apropriado ou usar mais memória. É uma troca clássica de espaço e tempo.

As estruturas de dados são suas armas. Escolher a arma certa para a batalha certa é a chave para a vitória. Conheça os pontos fortes de cada estrutura de dados e a complexidade de tempo para suas várias operações.

As estruturas de dados podem ser aumentadas para alcançar uma complexidade de tempo eficiente através de diferentes operações. Por exemplo, um HashMap pode ser usado juntamente com uma lista duplamente vinculada para alcançar a complexidade de tempo O(1) tanto para a operação de get como para a de put em um cache LRU (em inglês, onde LRU significa "menos recentemente usado").

Os HashMaps são provavelmente a estrutura de dados mais comumente usada para questões de algoritmos. Se você estiver preso a uma pergunta, seu último recurso pode ser enumerar através das possíveis estruturas de dados (felizmente não existem tantas) e considerar se cada uma delas pode ser aplicada ao problema. Isto tem funcionado para mim às vezes.

Se você estiver fazendo coisas apressadamente em seu código, declare isso em voz alta ao seu entrevistador e explique a ele o que você faria fora de um ambiente de entrevista (sem restrições de tempo). Por exemplo, explique que você escreveria uma regex para fazer o parsing de uma string em vez de usar split, que não cobre todos os casos.

Sequência

Observações

Arrays e strings são considerados sequenciais (uma string é uma sequência de caracteres). Há dicas para lidar tanto com arrays quanto com strings que serão abordadas aqui.

Há valores duplicados na sequência? Eles afetariam a resposta?

Verifique a sequência fora dos limites.

Esteja atento ao fatiamento (do inglês, slicing) ou à concatenação de sequências em seu código. Tipicamente, o fatiamento e as sequências concatenadas requerem tempo O(n). Use índices de início e fim para demarcar um subarray ou uma substring sempre que possível.

Às vezes, você percorre a sequência a partir do lado direito em vez do lado esquerdo.

Dominar a técnica de janela deslizante (texto em inglês) que se aplica a muitos problemas de substring ou subarray.

Quando são dadas duas sequências para processar, é comum ter um índice por sequência a ser percorrida. Por exemplo, usamos a mesma abordagem para unir dois arrays ordenados.

Casos limítrofes

• Sequência vazia
• Sequência com 1 ou 2 elementos
• Sequência com elementos repetidos

Array

Observações

O array é ordenado ou parcialmente ordenado? Se for, alguma forma de busca binária deve ser possível. Isto geralmente significa que o entrevistador está procurando uma solução que seja mais rápida do que o O(n).

Você pode ordenar o array? Às vezes, ordenar o array primeiro pode simplificar significativamente o problema. Certifique-se de que a ordem dos elementos do array não precisa ser preservada antes de tentar ordená-lo.

Para perguntas onde a soma ou a multiplicação de um subarray está envolvida, a pré-computação usando hashing ou um prefixo, soma de sufixos ou produto pode ser útil.

Se você receber uma sequência e o entrevistador pedir espaço O(1), talvez seja possível usar o próprio array como uma tabela de hash. Por exemplo, se o array tiver valores apenas de 1 a N, onde N é o comprimento do array, deixe negativo o valor naquele índice (menos um) para indicar a presença daquele número.

Perguntas práticas (exemplos em inglês do LeetCode)

• Duas somas
• Melhor hora para comprar e vender ações
• Contém duplicata
• Produto do Array Exceto Self
• Subarray máximo
• Subarray máximo do produto
• Encontrar o mínimo em um array ordenado e girado
• Busca em um array ordenado e girado
• Soma3
• Contêiner com mais água

Binário

Links de estudo

• Bits, bytes, construindo com binário (em inglês)

Observações

Às vezes, são feitas perguntas que envolvem representações binárias e operações bitwise. Você deve saber como converter um número de decimal para binário e vice-versa em sua linguagem de programação escolhida.

Alguns trechos úteis:

• O teste do k-ésimo bit está definido: num & (1 << k) != 0
• Defina o k-ésimo bit: num |= (1 < << k)
• Desligue o k-ésimo bit: num &= ~(1 <<< k)
• Alterne o k-ésimo bit: num ^= (1 < << k)
• Para verificar se um número é uma potência de 2: num & num - 1 == 0.

Casos limítrofes

• Verificação de sobrefluxo/baixo fluxo
• Números negativos

Perguntas práticas (exemplos em inglês do LeetCode)

• Soma de dois inteiros
• Número de 1 Bits
• Contagem de Bits
• Número em falta
• Bits Reversos

Programação dinâmica

Links de estudo

• Desmistificando a programação dinâmica (texto em inglês)

Observações

A Programação Dinâmica (DP) é normalmente usada para resolver problemas de otimização. Alaina Kafkes escreveu um artigo fantástico sobre a solução de problemas de DP. Você deve lê-lo.

A única maneira de melhorar no DP é com a prática. É preciso muita prática para reconhecer que um problema pode ser resolvido pela PD.

Para otimizar o espaço, às vezes não é necessário armazenar a tabela de DP inteira na memória. Os dois últimos valores ou as duas últimas filas da matriz serão suficientes.

Perguntas práticas (exemplos em inglês do LeetCode)

• 0/1 Mochila
• Escada
• Mudança de moeda
• O maior aumento subsequente
• Subsequências mais longas comuns
• Problema de quebra de palavras
• Soma combinada
• Assalto à casa e Assalto à casa II
• Formas de decodificação
• Caminhos únicos
• Jogo de pular

Geometria

Observações

Ao comparar a distância euclidiana entre dois pares de pontos, o uso de dx² + dy² é suficiente. É desnecessário estabelecer a raiz quadrada do valor.

Para descobrir se dois círculos se sobrepõem, verifique se a distância entre os dois centros dos círculos é menor do que a soma de seus raios.

Grafos

Links de estudo (textos em inglês)

• Da teoria à prática: representando grafos
• Mergulhar fundo através de um grafo: travessia DFS
• Tornando o grafo mais amplo: travessia BFS

Observações

Esteja familiarizado com as várias representações de grafos e algoritmos de pesquisa de grafos, bem como com suas complexidades de tempo e espaço.

Você pode receber uma lista de arestas e ser encarregado de construir seu próprio grafo a partir das arestas para realizar uma travessia. As representações de grafos comuns são:

• Matriz adjacente
• Lista adjacente
• HashMap dos HashMaps

Algumas entradas parecem ser árvores, mas, na verdade, são grafos. Esclareça isto com seu entrevistador. Nesse caso, você terá que lidar com ciclos e manter um conjunto de nós visitados quando estiver percorrendo os grafos.

Algoritmos de busca de grafos

• Comum: busca primeiramente em largura (BFS), busca primeiramente em profundidade (DFS)
• Incomum: ordenação topológica, o algoritmo de Dijkstra
• Raro: algoritmo Bellman-Ford, algoritmo Floyd-Warshall, algoritmo Prim e algoritmo Kruskal

Nas entrevistas de programação, os grafos são comumente representados como matrizes 2D, onde as células são os nós e cada célula pode percorrer até suas células adjacentes (para cima, para baixo, para a esquerda e para a direita). Portanto, é importante estar familiarizado com a travessia de uma matriz 2-D.

Ao atravessar recursivamente a matriz, certifique-se sempre de que sua próxima posição esteja dentro dos limites da matriz. Mais dicas para fazer a DFS em uma matriz podem ser encontradas aqui (em inglês). Um modelo simples para fazer a DFS em uma matriz é algo parecido com isto:

def traverse(matrix):
  rows, cols = len(matrix), len(matrix[0])
  visited = set()
  directions = ((0, 1), (0, -1), (1, 0), (-1, 0))
  def dfs(i, j):
    if (i, j) in visited:
      return
    visited.add((i, j))
    # Traverse neighbors
    for direction in directions:
      next_i, next_j = i + direction[0], j + direction[1]
      if 0 <= next_i < rows and 0 <= next_j < cols: # Check boundary
        # Add any other checking here ^
        dfs(next_i, next_j)
  for i in range(rows):
    for j in range(cols):
      dfs(i, j)

Casos limítrofes

• Grafo vazio
• Grafo com um ou dois nós
• Grafos desconjuntados
• Grafos com ciclos

Perguntas práticas (exemplos em inglês do LeetCode)

• Clonar grafo
• Cronograma do curso
• Dicionário de alienígenas
• Fluxo de água do Atlântico Pacífico
• Número de ilhas
• Árvore válida de grafo
• Número de componentes conectados em um grafo indireto
• Sequência consecutiva mais longa

Intervalo

Observações

Perguntas de intervalo são perguntas que dão uma série de arrays de dois elementos (um intervalo). Os dois valores representam um valor inicial e um valor final. As perguntas de intervalo são consideradas parte da família de arrays, mas envolvem algumas técnicas comuns. Portanto, elas têm sua própria seção especial.

Um exemplo de intervalo de arrays: [[1, 2], [4, 7]].

As perguntas de intervalo podem ser complicadas para aqueles que não têm experiência com elas. Isto se deve ao grande número de casos a serem considerados quando os arrays de intervalo se sobrepõem.

Esclareça com o entrevistador se [1, 2] e [2, 3] são considerados intervalos sobrepostos, pois isso afeta a forma como você vai escrever suas verificações de igualdade.

Uma rotina comum para perguntas de intervalo é ordenar o conjunto de intervalos pelo valor inicial de cada intervalo.

Esteja familiarizado com escrever código para verificar se dois intervalos se sobrepõem e para unir dois intervalos sobrepostos:

def is_overlap(a, b):
  return a[0] < b[1] and b[0] < a[1]
  
def merge_overlapping_intervals(a, b):
  return [min(a[0], b[0]), max(a[1], b[1])]

Casos limítrofes

• Intervalo único
• Intervalos não sobrepostos
• Um intervalo totalmente consumido dentro de outro intervalo
• Intervalos em duplicata

Perguntas práticas (exemplos em inglês do LeetCode)

• Intervalo de inserção
• Intervalos de merging
• Salas de reunião e Salas de reunião II
• Intervalos não sobrepostos

Lista vinculada

Observações

Como os arrays, listas vinculadas são usadas para representar dados sequenciais. O benefício das listas vinculadas é que a inserção e exclusão de código de qualquer parte da lista é O(1), enquanto, nos arrays, os elementos têm que ser mudados.

Adicionar um nó fictício na cabeça e/ou na cauda pode ajudar a lidar com muitos casos limítrofes onde as operações têm que ser realizadas na cabeça ou na cauda. A presença de nós fictícios garante que as operações nunca terão sido executadas na cabeça ou na cauda. Os nós fictícios removem a dor de cabeça de escrever verificações condicionais para lidar com indicações nulas. Certifique-se de removê-los ao final da operação.

Às vezes, os problemas de listas vinculadas podem ser resolvidos sem armazenamento adicional. Tente pegar ideias emprestadas para reverter um problema de lista vinculada.

Para exclusão em listas vinculadas, você pode modificar os valores dos nós ou alterar os ponteiros dos nós. Você pode precisar manter uma referência ao elemento anterior.

Para particionar as listas vinculadas, crie duas listas vinculadas separadas e junte-as novamente.

Os problemas de listas vinculadas compartilham semelhanças com problemas de array. Pense em como você resolveria um problema de array e o aplicaria a uma lista vinculada.

Duas abordagens de ponteiro também são comuns para listas vinculadas:

• Obtendo o k-ésimo nó a partir do último nó: use dois ponteiros, onde um está k nós à frente do outro. Quando o nó à frente chega ao fim, o outro nó está k nós atrás.
• Detectando ciclos: use dois ponteiros, onde um ponteiro aumenta duas vezes mais do que o outro. Se os dois ponteiros se encontrarem, significa que há um ciclo.
• Obtendo o nó do meio: use dois ponteiros. Um ponteiro incrementa duas vezes mais que o outro. Quando o nó mais rápido chegar ao final da lista, o mais lento estará no meio.

Esteja familiarizado com as seguintes rotinas, pois muitas perguntas da lista vinculada fazem uso de uma ou mais destas rotinas em sua solução.

• Contar o número de nós na lista vinculada
• Reverter uma lista vinculada no local
• Encontre o nó central da lista vinculada usando ponteiros rápidos ou lentos
• Fazer a fusão (do inglês, merge) de duas listas juntas

Casos limítrofes

• Nó único
• Dois nós
• A lista vinculada tem um ciclo. Esclareça com o entrevistador se pode haver um ciclo na lista. Normalmente, a resposta é não.

Perguntas práticas (exemplos em inglês do LeetCode)

• Reverter uma lista vinculada
• Detectar ciclo em uma lista vinculada
• Fusão de duas listas ordenadas
• Fusão de listas K ordenadas
• Remover o nó do fim da lista
• Reordenar a lista

Matemática

Observações

Se o código envolver divisão ou módulo, lembre-se de verificar a divisão ou o módulo em função do caso com 0 (zero).

Quando uma pergunta envolve "um múltiplo de um número", o módulo pode ser útil.

Verifique e administre overflow e underflow se estiver usando uma linguagem tipada como Java e C++. No mínimo, mencione que o overflow ou que o underflow é possível e pergunte se você precisa lidar com ele.

Considere números negativos e números de ponto flutuante. Isso pode parecer óbvio, mas quando você está sob pressão em uma entrevista, muitos pontos óbvios passam despercebidos.

Se a pergunta for para implementar um operador como potência, raiz quadrada ou divisão, e se for para ser mais rápido que O(n), a busca binária é geralmente a abordagem.

Algumas fórmulas comuns

• Soma de 1 para N = (n+1) * n/2
• Soma de progressões geométricas = 2⁰ + 2¹ + 2² + 2³ + … 2^n = 2^(n+1)-1
• Permutações de N = N! / (N-K)!
• Combinações de N = N! / (K! * (N-K)!)

Casos limítrofes

• Divisão por 0
• Overflow e underflow de números inteiros

Perguntas práticas (exemplos em inglês do LeetCode)

• Potência(x, n)
• Raiz quadrada(x)
• Inteiro para palavras em inglês

Matriz

Notas

Uma matriz é um array bidimensional. As questões envolvendo matrizes estão geralmente relacionadas à programação dinâmica ou à travessia do grafo.

Para perguntas que envolvam travessia ou programação dinâmica, faça uma cópia da matriz com as mesmas dimensões e inicializada com valores vazios. Utilize esses valores para armazenar o estado visitado ou a tabela de programação dinâmica. Esteja familiarizado com esta rotina:

rows, cols = len(matrix), len(matrix[0])
copy = [[0 for _ in range(cols)] for _ in range(rows)

• Muitos jogos baseados em grade podem ser modelados como uma matriz, como, por exemplo, o Jogo da Velha, Sudoku, palavras cruzadas, Ligue 4 e Batalha Naval. Não é raro ser solicitada a verificação da condição de vencedor do jogo. Para jogos como o Jogo da Velha, o Ligue 4 e as Palavras Cruzadas, a verificação tem que ser feita vertical e horizontalmente. Um truque é escrever o código para verificar a matriz para as células horizontais. Em seguida, transpor a matriz, reutilizando a lógica usada para verificação horizontal para verificar as células originalmente verticais (que agora são horizontais).
• A transposição de uma matriz em Python é simples:

transposed_matrix = zip(*matrix)

Casos limítrofes

• Matriz vazia. Verifique se nenhuma das matrizes tem comprimento 0.
• Matriz 1 x 1.
• Matriz com apenas uma linha ou coluna.

Perguntas práticas (exemplos em inglês do LeetCode)

• Definir a matriz zero
• Matriz espiral
• Rotacionar imagem
• Caça-palavras

Recursão

Observações

A recursividade é útil para a permutação, pois gera todas as combinações e perguntas baseadas em árvores. Você deve saber como gerar todas as permutações de uma sequência, bem como lidar com as duplicatas.

Lembre-se sempre de definir um caso base para que sua recorrência termine.

A recorrência utiliza implicitamente uma pilha. Assim, todas as abordagens recursivas podem ser reescritas iterativamente usando uma pilha.

Cuidado com os casos em que o nível de recorrência vai muito fundo e causa um transbordamento de pilha (o limite padrão em Python é 1000). Você pode receber pontos de bônus por apontar isso para o entrevistador.

A recursividade nunca terá complexidade espacial O(1) porque uma pilha está envolvida, a menos que haja uma otimização da chamada de cauda (TCO). Descubra se a linguagem escolhida dá suporte à TCO.

Perguntas práticas (exemplos em inglês do LeetCode)

• Subconjuntos e Subconjuntos II
• Número II Strobogrammatic

String

Observações

Leia as dicas acima sobre sequências. Elas também se aplicam às strings.

Pergunte sobre o conjunto de caracteres de entrada e a distinção entre maiúsculas e minúsculas. Normalmente, os caracteres são limitados a caracteres latinos em letras minúsculas – por exemplo, de a até z.

Quando você precisa comparar strings onde a ordem não é importante (como o anagrama), você pode considerar o uso de um HashMap como um contador. Se sua linguagem tiver uma classe de contador embutida como no Python, peça para usar isso em seu lugar.

Se você precisa manter um contador de caracteres, um erro comum é dizer que a complexidade de espaço necessária para o contador é O(n). O espaço necessário para um contador é O(1) e não O(n). Isto porque o limite superior é o intervalo de caracteres, que, normalmente, é uma constante fixa de 26. O conjunto de entrada é apenas de caracteres latinos em letras minúsculas.

As estruturas de dados comuns para a busca eficiente de strings são:

• Árvore de Trie/Prefixos
• Árvore de Sufixos

Algoritmos de strings comuns são:

• Rabin Karp, que realiza buscas eficientes de substrings, utilizando um hash "rolante"
• KMP, que realiza buscas eficientes de substrings

Caracteres não repetentes

Use uma máscara de 26 bits para indicar quais caracteres latinos em letras minúsculas estão dentro da string.

mask = 0
for c in set(word):
  mask |= (1 << (ord(c) - ord('a')))

Para determinar se duas strings têm caracteres em comum, execute & nas duas máscaras de bits. Se o resultado não for zero, mascara_a & mascara_b > 0 , então as duas strings têm caracteres em comum.

Anagrama

Um anagrama é um trocador de palavras ou jogo de palavras. É o resultado de reorganizar as letras de uma palavra ou frase para produzir uma nova palavra ou frase, enquanto usa todas as letras originais apenas uma vez. Em entrevistas, normalmente só nos preocupamos com palavras sem espaços nelas.

Para determinar se duas strings são anagramas, existem algumas abordagens plausíveis:

• A ordenação de ambas as strings deve produzir a mesma string resultante. Isso leva tempo O(nlgn) e espaço O(lgn).
• Se mapearmos cada caractere para um número primo e multiplicarmos cada número mapeado juntos, os anagramas devem ter o mesmo múltiplo (decomposição do fator primo). Isto leva tempo O(n) e espaço O(1).
• A contagem da frequência dos caracteres ajudará a determinar se duas strings são anagramas. Isso também leva tempo O(n) e espaço O(1)

Palíndromo

Um palíndromo é uma palavra, frase, número ou outra sequência de caracteres que é lido do mesmo modo para trás e para frente, tais como "madam" ou "racecar".

Aqui estão maneiras de determinar se uma string é um palíndromo:

• Reverta a string e ela deve ser igual a si mesma.
• Ter dois ponteiros no início e no final da string. Mova os ponteiros para dentro até que eles se encontrem. Em qualquer momento, os caracteres em ambos os ponteiros devem coincidir.

A ordem dos caracteres dentro da string importa, portanto, os HashMaps geralmente não são úteis.

Quando se trata de contar o número de palíndromos, um truque comum é ter dois ponteiros que se movem para fora e para longe do meio. Note que os palíndromos podem ter um comprimento par ou ímpar. Para cada posição de pivô central, é necessário verificá-la duas vezes: uma vez que inclua o caractere e outra sem o caractere.

• Para as substrings, você pode terminar antecipadamente uma vez que não haja correspondência.
• Para as subsequentes, use programação dinâmica, pois existem subproblemas sobrepostos. Confira esta pergunta (em inglês, no LeetCode).

Casos limítrofes

• String vazia
• String de um único caractere
• Strings com apenas um caractere distinto

Perguntas práticas (exemplos em inglês do LeetCode)

• A substring mais longa sem repetição de caracteres
• Substituição mais longa de caracteres repetitivos
• Substring mínimaqde janela
• Codificação e decodificação de strings
• Anagrama válido
• Anagramas de grupo
• Parênteses válidos
• Palíndromo válido
• Substring palindrômica mais longa
• Substrings palindrômicas

Árvore

Links de estudo (em inglês)

• Folheie até as árvores binárias

Observações

Uma árvore é um grafo acíclico, não direcionado e conectado.

A recursividade é uma abordagem comum para as árvores. Quando você perceber que o problema da subárvore pode ser usado para resolver o problema inteiro, tente usar a recursividade.

Ao utilizar a recorrência, lembre-se sempre de verificar o caso base, geralmente onde o nó é nulo.

Quando você for solicitado a atravessar uma árvore por nível, use a busca em profundidade.

Às vezes, é possível que sua função recursiva precise retornar dois valores.

Se a questão envolver a soma dos nós ao longo do caminho, certifique-se de verificar se os nós podem ser negativos.

Você deve estar muito familiarizado com a escrita de travessias de pré-ordem, dentro da ordem e pós-ordem recursivamente. Como extensão, desafie-se escrevendo-as iterativamente. Às vezes, os entrevistadores pedem aos candidatos a abordagem iterativa, especialmente se o candidato terminar de escrever a abordagem recursiva muito rapidamente.

Árvore binária

A travessia em ordem de uma árvore binária é insuficiente para serializar uma árvore de maneira única. Também é necessária a travessia pré-ordem ou pós-ordem.

Árvore de busca binária - Binary search tree (BST)

A travessia em ordem de uma BST dará a você todos os elementos em ordem.

Esteja muito familiarizado com as propriedades de uma BST. Valide se uma árvore binária é uma BST. Isso aparece com mais frequência do que o esperado.

Quando uma pergunta envolve uma BST, o entrevistador geralmente está procurando uma solução que funcione mais rápido que a O(n).

Casos limítrofes

• Árvore vazia
• Nó único
• Dois nós
• Árvore muito desbalanceada (como uma lista vinculada)

Perguntas práticas (exemplos em inglês do LeetCode)

• Profundidade máxima da árvore binária
• A mesma árvore
• Árvore binária invertida ou virada
• Soma máxima do caminho da árvore binária
• Travessia de ordem de nível de árvore binária
• Serializar e desserializar a árvore binária
• Subárvore de outra árvore
• Construir a árvore binária a partir da travessia de pré-ordem e em ordem
• Validar árvore de busca binária
• K-ésimo menor elemento de uma BST
• O menor ancestral comum da BST

Tries

Links de estudo (em inglês)

• Tentando entender as tries
• Implemente a Trie (Árvore de prefixos)

Observações

Tries são árvores especiais (árvores de prefixos) que tornam mais eficiente a busca e o armazenamento de strings. As tries têm muitas aplicações práticas, tais como a realização de buscas e o fornecimento de autocompletar. É útil conhecer essas aplicações comuns para que você possa identificar facilmente quando um problema pode ser resolvido de modo eficiente usando uma trie.

Às vezes, o pré-processamento de um dicionário de palavras (dado em uma lista) em uma trie melhorará a eficiência da busca por uma palavra de comprimento k, entre n palavras. A busca torna-se O(k) em vez de O(n).

Esteja familiarizado com a implementação, a partir do zero, de uma classe Trie e seus métodos add, remove e search.

Perguntas práticas (exemplos em inglês do LeetCode)

• Implemente Trie (Prefixo Árvore)
• Adicionar e pesquisar palavra
• Caça-palavras II

Heap

Links de estudo (em inglês)

• Aprendendo a amar os Heaps

Observações

Se você vir um k superior ou inferior mencionado na pergunta, geralmente, é um sinal de que uma heap pode ser usada para resolver o problema, como em K elementos mais frequentes.

Se você precisar dos k elementos superiores, use uma heap de tamanho k. Faça a iteração através de cada elemento, inserindo-o na heap. Sempre que o tamanho da heap exceder k, remova o elemento menor. Isso garantirá que você tenha os k elementos maiores.

Perguntas práticas (exemplos em inglês do LeetCode)

• Fusão de listas K ordenadas
• K elementos mais frequentes
• Encontre a mediana do fluxo de dados

Conclusão

As entrevistas de programação são difíceis. Felizmente, no entanto, você pode melhorar para elas, estudando e praticando para elas e fazendo entrevistas simuladas.

Recapitulando: para se sair bem nas entrevistas de programação:

1. Decida sobre uma linguagem de programação
2. Estude fundamentos da Ciência da Computação
3. Pratique a solução de questões de algoritmos
4. Internalize o que se faz e o que não se faz nas entrevistas
5. Pratique através de entrevistas técnicas simuladas
6. Faça a entrevista com sucesso e consiga o emprego

Seguindo essas etapas, você melhorará suas habilidades em entrevistas de programação e estará um passo mais próximo (ou provavelmente mais) de conseguir o emprego dos seus sonhos.

Sucesso para você!

O conteúdo deste artigo também pode ser encontrado aqui. Atualizações futuras serão publicadas lá. Pedidos de sugestões e correções são bem-vindos.

Se você gostou deste artigo, compartilhe-o com seus amigos!

Você pode seguir o autor no GitHub e no Twitter.

Os Cron Jobs são normalmente usados para agendar comandos em um horário específico. Você pode usá-los para tarefas como executar backups, monitorar o status do sistema ou executar tarefas de manutenção do sistema.

Os Cron Jobs são utilitários úteis para os administradores de sistemas. Quando você está administrando um sistema na nuvem, os Cron Jobs ainda são muito úteis – afinal, você ainda precisa fazer muitas tarefas administrativas nos sistemas.

Uma maneira de executar Cron Jobs na nuvem é usar uma função como um serviço (FaaS), como a Lambda no ecossistema AWS.

As funções executam quando são acionadas para isso e executam o código na nuvem sem a necessidade de prover ou manter qualquer infraestrutura. Elas também podem ser configuradas para serem executadas em um determinado momento ou com certa periodicidade, como os Cron Jobs tradicionais.

Neste artigo, usarei o ecossistema AWS para mostrar um exemplo concreto de como criar um Cron Job usando uma função na nuvem.

Eventos da Amazon CloudWatch

A fim de usar a função Lambda como um Cron Job, precisamos entender os eventos da Amazon CloudWatch.

Os eventos da Amazon CloudWatch são enviados quando há mudanças nos recursos da AWS. Esses eventos podem acionar uma função AWS Lambda. Quando os seus recursos da AWS mudam de estado, eles automaticamente enviam eventos CloudWatch para o stream de eventos.

Portanto, você pode criar uma regra que aciona uma função Lambda específica quando algo acontece. Por exemplo, você pode invocar automaticamente uma função Lambda quando há uma mudança em um grupo AutoScaling.

Além disso, os eventos CloudWatch podem invocar uma função Lambda para ser executada regularmente. Deste modo, você pode ter, por exemplo, uma função Lambda que desativa todos os seus testes e desenvolvimento em EC2 depois das 18h e outra que os ativa após as 8h.

Configurando a demonstração

Quero mostrar a você um exemplo de uma função Lambda que pode realizar ações em suas instâncias da EC2. Vou usar o AWS SAM para definir a minha função Lambda como infraestrutura como código.

Se você quiser experimentar essa demonstração, precisará ter uma conta na AWS e uma ou mais instâncias da EC2 configuradas em sua conta da AWS. Estas são as que vamos manipular a partir das funções Lambda. As instâncias da EC2 são a versão da AWS das máquinas virtuais na nuvem.

Você pode tentar a demonstração no IDE AWS Cloud9 (um IDE baseado em navegador), já que o AWS SAM já está configurado nesse IDE. Se você quiser saber como usar a IDE AWS Cloud9 para operar as funções Lambda, você pode conferir este vídeo (em inglês).

Neste exemplo, vamos começar e parar as instâncias da EC2 usando duas funções Lambda da AWS diferentes, que são acionadas em um determinado momento. Vamos iniciar as instâncias às 8h todos os dias e desativá-las às 18h, quando o dia terminar.

Para isso, vamos usar um evento CloudWatch para acionar a função Lambda no momento certo, além do AWS SDK para realizar as operações nas instâncias.

O código finalizado para o exemplo está disponível neste repositório do GitHub. Para que esse código funcione no IDE AWS Cloud9, você precisa configurar a sua conta do GitHub no IDE para poder clonar o projeto e depois cloná-lo dentro do IDE.

Quando tiver isso pronto, basta executar este comando dentro do diretório clonado:

$ sam deploy --guided

Ao executar esse comando, você receberá um conjunto de perguntas que precisa responder para configurar o projeto para que ele seja executado com sucesso.

A primeira coisa que você precisa definir é um nome para o seu projeto. Em seguida, você definirá a região onde ele está sendo implantado – escolha a mesma região onde estão suas instâncias da EC2. Depois, precisamos dar ao roteiro de deploy uma lista das instâncias que queremos manipular. Estamos prontos – o deploy do projeto será feito em nossa conta da AWS.

Definindo a função AWS Lambda

A primeira coisa que quero mostrar a você é como definimos uma função AWS Lambda, que é acionada em um tempo específico usando o AWS SAM. Esta definição estará no arquivo chamado "template.yml".

Essa é a aparência de uma função. Vejamos as linhas importantes:

A primeira linha é o nome da função – nesse caso, "StartInstanceFunction".

Depois, temos a definição de "Properties". A primeira propriedade é o "Handler". Aqui, especificaremos o módulo (arquivo) onde está o código que precisa ser executado e, depois, o método dentro desse módulo.

Então, temos "CodeUri", que é o caminho que mostra onde encontrar esse arquivo. Nesse caso, nosso código estará dentro de um diretório chamado "cron" em um arquivo chamado "handler.js" e em um método chamado "startInstance".

Depois disso, temos a definição de "Runtime". Usarei o NodeJS versão 12, mas você pode usar Python, Java, Go, C# ou qualquer outra linguagem de sua preferência. A Lambda suporta múltiplos tempos de execução desde o princípio e você pode usar seu próprio ambiente de tempo de execução, se quiser (links em inglês).

Temos a definição de "Environment", que usaremos para definir a única variável de ambiente. Essa variável nos permitirá enviar o código dinamicamente para diferentes instâncias de ids, dependendo da configuração de quando fazemos o deploy.

Depois disso, temos uma seção chamada "Policies", que é onde definimos as permissões que essa função Lambda específica terá.

É importante saber que todas as funções Lambda são criadas sem nenhuma permissão. Isso significa que elas não podem fazer nada em nenhum outro recurso da AWS.

Para que essa função Lambda possa iniciar uma instância da EC2, ela precisa de permissões para fazer essa ação específica sobre esse recurso específico da AWS. Nessa política específica, estamos concedendo permissões para iniciar TODAS as instâncias da EC2 nessa conta da AWS. TODAS são representadas com o "*" na seção de recursos.

Se você tiver esse código em produção, recomendo que você limite os recursos exatamente àqueles que você deseja que essa função Lambda possa iniciar.

Finalmente, a última seção é a seção "Events". Aqui, definiremos como essa função Lambda será acionada. Essa função será acionada com um evento CloudWatch agendado, que acionará a Lambda todos os dias às 8 da manhã. Basicamente, às 8 todos os dias, ela ativará todas as instâncias da EC2 que você especificar.

Há muitas regras para formar essa expressão Cron: por exemplo, para dizer que você gostaria que ela funcionasse apenas de segunda a sexta-feira (em inglês, MONday-FRIday), escreva cron(0 8 ? * MON-FRI *). Você pode encontrar mais informações no site da documentação dos eventos CloudWatch aqui.

Programando a função AWS Lambda

Agora que definimos a função Lambda, precisamos fornecer algum código para ela. Na pasta "cron", no arquivo "handler.js", precisamos adicionar o método chamado "startInstance", que tem esta aparência:

Este método será chamado quando a função for acionada todos os dias às 8 horas da manhã. Ele obterá a lista de instâncias da EC2 a partir de uma variável de ambiente em que passamos todas as ids de instâncias durante o tempo de deploy. Em seguida, ele criará um array com essas instâncias.

Quando tiver esse array, ele chamará o AWS SDK e enviará o array de ids de instâncias como um parâmetro. Se houver algum erro, ele o registrará e o completará. Imediatamente após essa Lambda terminar a execução, você pode ir até o seu console da EC2 e ver que suas instâncias foram ativadas.

A função de desativar as instâncias da EC2 é muito semelhante, com algumas pequenas diferenças. Você pode encontrar o código para essa função neste link e verificá-lo.

Executando o Cron Job

Para executar esse Cron Job, não há muito o que fazer. Depois de feito o deploy das duas funções em sua conta da AWS, na mesma região em que as suas instâncias estão, elas executarão e farão o que foram programadas para fazer.

Agora, é preciso esperar até as 8h ou 18h para ver se elas funcionam. Se você quiser testar agora mesmo, mude o horário do evento na definição Lambda para um horário que sirva para você. Certifique-se de que a instância esteja ligada se você estiver planejando desligá-las ou o contrário, para que você possa ver as mudanças.

Espere e veja o que acontece no console da EC2. Logo após a configuração, você verá a instância ser ativada ou desativada na hora que você configurar. Isto continuará para sempre até que você remova as funções Lambda.

Limpeza da sua conta AWS

Após completar essa demonstração, recomendo que você desligue (ou remova a instância que criou para testar) e remova as funções Lambda que você acabou de criar.

A remoção das funções Lambda é tão fácil quanto colocá-las no seu serviço CloudFormation. Em seu console de gerenciamento da AWS, remova a pilha de recursos que o AWS SAM criou.

Não se esqueça de encerrar e remover as instâncias da EC2 se você as criou apenas para essa demonstração.

Para concluir

As funções AWS Lambda são uma ferramenta muito útil para realizar todos os tipos de tarefas em sua conta da AWS. Você pode, basicamente, obter notificações de qualquer mudança nos recursos da AWS através dos eventos CloudWatch e, então, pode acessar quase todos os serviços usando o AWS SDK. Assim, você pode realizar todos os tipos de tarefas de manutenção e tarefas automatizadas em sua infraestrutura.

Obrigado pela leitura.

A autora se chama Marcia Villalba, advocate de desenvolvimento da AWS e apresentadora de um canal no YouTube chamado FooBar, onde você encontrará mais de 250 tutoriais em vídeo sobre Serverless, AWS e práticas de engenharia de software.

Neste artigo, você construirá uma aplicação de gerenciamento de livros em React do zero.

Ao criar essa aplicação, você aprenderá:

1. Como realizar operações de CRUD
2. Como usar o React Router para navegação entre rotas
3. Como usar a API React Context para passar dados através de rotas
4. Como criar um hook personalizado em React
5. Como armazenar dados em armazenamento local para persistir mesmo após a atualização da página
6. Como gerenciar os dados armazenados no armazenamento local usando um hook personalizado

e muito mais.

Usaremos hooks do React para construir esta aplicação. Portanto, se você é novo no React Hooks, confira meu artigo Introdução ao React Hooks (texto em inglês) para aprender o básico.

Quer aprender Redux desde o início absoluto e construir uma aplicação de pedido de comida a partir do zero? Confira o curso Mastering Redux.

Configuração inicial

Crie um projeto utilizando o create-react-app:

npx create-react-app book-management-app

Uma vez criado o projeto, exclua todos os arquivos da pasta src e crie os arquivos index.js e styles.scss dentro da pasta src. Além disso, crie as pastas components, context, hooks e router dentro da pasta src.

Instale as dependências necessárias:

yarn add bootstrap@4.6.0 lodash@4.17.21 react-bootstrap@1.5.2 node-sass@4.14.1 react-router-dom@5.2.0 uuid@8.3.2

Abra styles.scss e adicione este conteúdo a ela.

Como criar as páginas iniciais

Crie um novo arquivo Header.js dentro da pasta components com o seguinte conteúdo:

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
  return (
    <header>
      <h1>Book Management App</h1>
      <hr />
      <div className="links">
        <NavLink to="/" className="link" activeClassName="active" exact>
          Books List
        </NavLink>
        <NavLink to="/add" className="link" activeClassName="active">
          Add Book
        </NavLink>
      </div>
    </header>
  );
};

export default Header;

Aqui, adicionamos dois links de navegação usando o componente NavLink do react-router-dom: um para ver uma lista de todos os livros e o outro para adicionar um novo livro.

Estamos usando o NavLink em vez da tag de âncora (<a />). Portanto, a página não será atualizada quando um usuário clicar em qualquer um dos links.

Crie um arquivo chamado BooksList.js dentro da pasta components com o seguinte conteúdo:

import React from 'react';

const BooksList = () => {
  return <h2>List of books</h2>;
};

export default BooksList;

Crie um arquivo chamado AddBook.js dentro da pasta components com o seguinte conteúdo:

import React from 'react';
import BookForm from './BookForm';

const AddBook = () => {
  const handleOnSubmit = (book) => {
    console.log(book);
  };

  return (
    <React.Fragment>
      <BookForm handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  );
};

export default AddBook;

Neste arquivo, exibimos um componente BookForm (formulário de livros, que ainda não criamos).

Para o componente BookForm, passamos o método handleOnSubmit para que possamos fazer o processamento mais tarde, quando enviarmos o formulário.

Agora, crie um arquivo BookForm.js dentro da pasta components com o seguinte conteúdo:

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
import { v4 as uuidv4 } from 'uuid';

const BookForm = (props) => {
  const [book, setBook] = useState({
    bookname: props.book ? props.book.bookname : '',
    author: props.book ? props.book.author : '',
    quantity: props.book ? props.book.quantity : '',
    price: props.book ? props.book.price : '',
    date: props.book ? props.book.date : ''
  });

  const [errorMsg, setErrorMsg] = useState('');
  const { bookname, author, price, quantity } = book;

  const handleOnSubmit = (event) => {
    event.preventDefault();
    const values = [bookname, author, price, quantity];
    let errorMsg = '';

    const allFieldsFilled = values.every((field) => {
      const value = `${field}`.trim();
      return value !== '' && value !== '0';
    });

    if (allFieldsFilled) {
      const book = {
        id: uuidv4(),
        bookname,
        author,
        price,
        quantity,
        date: new Date()
      };
      props.handleOnSubmit(book);
    } else {
      errorMsg = 'Please fill out all the fields.';
    }
    setErrorMsg(errorMsg);
  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    switch (name) {
      case 'quantity':
        if (value === '' || parseInt(value) === +value) {
          setBook((prevState) => ({
            ...prevState,
            [name]: value
          }));
        }
        break;
      case 'price':
        if (value === '' || value.match(/^\d{1,}(\.\d{0,2})?$/)) {
          setBook((prevState) => ({
            ...prevState,
            [name]: value
          }));
        }
        break;
      default:
        setBook((prevState) => ({
          ...prevState,
          [name]: value
        }));
    }
  };

  return (
    <div className="main-form">
      {errorMsg && <p className="errorMsg">{errorMsg}</p>}
      <Form onSubmit={handleOnSubmit}>
        <Form.Group controlId="name">
          <Form.Label>Book Name</Form.Label>
          <Form.Control
            className="input-control"
            type="text"
            name="bookname"
            value={bookname}
            placeholder="Enter name of book"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group controlId="author">
          <Form.Label>Book Author</Form.Label>
          <Form.Control
            className="input-control"
            type="text"
            name="author"
            value={author}
            placeholder="Enter name of author"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group controlId="quantity">
          <Form.Label>Quantity</Form.Label>
          <Form.Control
            className="input-control"
            type="number"
            name="quantity"
            value={quantity}
            placeholder="Enter available quantity"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group controlId="price">
          <Form.Label>Book Price</Form.Label>
          <Form.Control
            className="input-control"
            type="text"
            name="price"
            value={price}
            placeholder="Enter price of book"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Button variant="primary" type="submit" className="submit-btn">
          Submit
        </Button>
      </Form>
    </div>
  );
};

export default BookForm;

Vamos entender o que estamos fazendo aqui.

Inicialmente, definimos um estado como um objeto usando o hook useState para armazenar todos os detalhes inseridos deste modo:

const [book, setBook] = useState({
    bookname: props.book ? props.book.bookname : '',
    author: props.book ? props.book.author : '',
    quantity: props.book ? props.book.quantity : '',
    price: props.book ? props.book.price : '',
    date: props.book ? props.book.date : ''
  });

Como usaremos o mesmo componente BookForm para adicionar e editar o livro, verificamos primeiro se a prop book é passada ou não usando o operador ternário.

Se a prop tiver sido passada, definimos a prop como o valor passado, Do contrário, a definimos como uma string vazia ('').

Não se preocupe se isso parece complicado agora. Você entenderá melhor quando criarmos as funcionalidades iniciais.

Em seguida, adicionamos um state para exibir uma mensagem de erro e usamos a sintaxe de desestruturação da ES6 para nos referirmos a cada uma das propriedades dentro do state assim:

const [errorMsg, setErrorMsg] = useState('');
const { bookname, author, price, quantity } = book;

A partir do componente BookForm, retornamos um formulário onde inserimos o nome do livro, autor do livro, quantidade e preço. Usamos o react-bootstrap para exibir o formulário em um formato mais bonito.

Cada campo de entrada adicionou um manipulador de eventos onChange, que chama o método handleInputChange.

Dentro do método handleInputChange, adicionamos uma declaração de mudança para alterar o valor do state com base no campo de entrada que é alterado.

Quando digitarmos qualquer coisa no campo de entrada quantity, event.target.name será a quantidade para corresponder ao primeiro caso do switch. Dentro desse caso switch, verificamos se o valor inserido é um número inteiro sem um ponto decimal.

Se for um número inteiro, simplesmente atualizamos o state conforme mostrado abaixo:

if (value === '' || parseInt(value) === +value) {
  setBook((prevState) => ({
    ...prevState,
    [name]: value
  }));
}

Portanto, o usuário não poderá inserir nenhum valor decimal para o campo de entrada quantity.

Para o caso do switch de price, estamos verificando um número decimal com apenas dois algarismos após a vírgula. Depois, adicionamos uma verificação de expressão regular come esta aparência: value.match(/^\d{1,}(\d{0,2})?$/).

Se o valor de price corresponder à expressão regular, atualizamos o state.

Observação: tanto para os casos de switch de quantity como de price, verificamos valores vazios como este: value === ''. Isso é para permitir que o usuário exclua totalmente o valor inserido, se necessário.

Sem essa verificação, o usuário não poderá excluir o valor inserido pressionando Ctrl + A + Delete.

Para todos os outros campos de entrada, será executado o caso switch que atualizará o state com base no valor inserido pelo usuário.

Em seguida, uma vez enviado o formulário, o método handleOnSubmit será chamado.

Dentro desse método, verificamos primeiro se o usuário digitou todos os detalhes usando o método de array every:

const allFieldsFilled = values.every((field) => {
  const value = `${field}`.trim();
  return value !== '' && value !== '0';
});

O método de array every é um dos métodos de array mais úteis em JavaScript.

Confira o meu artigo aqui para aprender sobre os métodos mais úteis de array JavaScript junto com o seu suporte ao navegador.

Se todos os valores forem preenchidos, criaremos um objeto com eles. Também chamamos o método handleOnSubmit passando livro como argumento. Caso contrário, definimos uma mensagem de erro.

O método handleOnSubmit é passado como uma prop do componente AddBook.

if (allFieldsFilled) {
  const book = {
    id: uuidv4(),
    bookname,
    author,
    price,
    quantity,
    date: new Date()
  };
  props.handleOnSubmit(book);
} else {
  errorMsg = 'Please fill out all the fields.';
}

Note que, para criar uma ID única, chamamos o método uuidv4() a partir do pacote uuid do npm.

Agora, crie um arquivo AppRouter.js dentro da pasta router com o seguinte conteúdo:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../components/Header';
import AddBook from '../components/AddBook';
import BooksList from '../components/BooksList';

const AppRouter = () => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route component={BooksList} path="/" exact={true} />
            <Route component={AddBook} path="/add" />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

Aqui, estabelecemos rotas para vários componentes como BooksList e AddBook usando a biblioteca react-router-dom.

Se você é novo no React Router, confira meu curso gratuito de Introdução ao React Router (em inglês).

Agora, abra o arquivo src/index.js e adicione o seguinte conteúdo a ele:

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './router/AppRouter';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';

ReactDOM.render(<AppRouter />, document.getElementById('root'));

Agora, inicie a aplicação do React, executando o seguinte comando a partir do terminal:

yarn start

Você verá a tela a seguir ao acessar a aplicação em http://localhost:3000/.

Como você pode ver, conseguimos adicionar corretamente um livro e exibi-lo no console.

Em vez de logar no console, no entanto, vamos adicioná-lo ao armazenamento local.

Como criar um hook personalizado para armazenamento local

O armazenamento local é surpreendente. Ele nos permite armazenar facilmente os dados da aplicação no navegador e é uma alternativa aos cookies para o armazenamento de dados.

A vantagem de se usar o armazenamento local é que os dados serão salvos permanentemente no cache do navegador até que os excluamos manualmente para podermos acessá-los mesmo após a atualização da página. Como você deve saber, os dados armazenados no state do React serão perdidos uma vez que atualizarmos a página.

Há muitos casos de uso para o armazenamento local. Um deles é para armazenar itens do carrinho de compras para que não sejam excluídos mesmo que atualizemos a página.

Para adicionar dados ao armazenamento local, usamos o método setItem, fornecendo uma chave e um valor:

localStorage.setItem(key, value)

Tanto a chave quanto o valor precisam ser strings. Podemos, contudo, armazenar o objeto JSON também usando o método JSON.stringify.

Para aprender em detalhes sobre o armazenamento local e sobre suas diversas aplicações, confira este artigo (em inglês).

Crie um arquivo useLocalStorage.js dentro da pasta hooks com o seguinte conteúdo:

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    try {
      const localValue = window.localStorage.getItem(key);
      return localValue ? JSON.parse(localValue) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useLocalStorage;

Aqui, usamos um hook useLocalStorage, que aceita uma key e um initialValue.

Para declarar o state usando o hook useState, estamos usando inicialização preguiçosa (em inglês).

Assim, o código dentro da função passada para useState será executado apenas uma vez, mesmo que o hook useLocalStorage seja chamado várias vezes em cada renderização da aplicação.

Então, inicialmente, estamos verificando se existe algum valor no armazenamento local com a key fornecida e retornamos o valor usando o método JSON.parse:

try {
  const localValue = window.localStorage.getItem(key);
  return localValue ? JSON.parse(localValue) : initialValue;
} catch (error) {
  return initialValue;
}

Depois, se houver alguma mudança em key ou em value, atualizaremos o armazenamento local:

useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);

return [value, setValue];

Em seguida, estamos retornando value armazenado no armazenamento local e a função setValue que chamaremos para atualizar os dados do armazenamento local.

Como usar o hook de armazenamento local

Agora, vamos usar este hook chamado useLocalStorage para que possamos adicionar ou remover dados do armazenamento local.

Abra o arquivo AppRouter.js e use o hook de useLocalStorage dentro do componente:

import useLocalStorage from '../hooks/useLocalStorage';

const AppRouter = () => {
 const [books, setBooks] = useLocalStorage('books', []);
 
 return (
  ...
 )
}

Agora, precisamos passar books e setBooks como props para o componente AddBook para que possamos adicionar o livro ao armazenamento local.

Portanto, mude a rota a partir deste código:

<Route component={AddBook} path="/add" />

para o código abaixo:

<Route
  render={(props) => (
    <AddBook {...props} books={books} setBooks={setBooks} />
  )}
  path="/add"
/>

Aqui, estamos usando o padrão de renderização de props para passar as props padrão do React Router juntamente com books e setBooks.

Confira o meu curso gratuito de Introdução ao React Router (em inglês) para entender melhor esse padrão de renderização de props e a importância de se usar a palavra-chave render em vez de component.

Seu arquivo AppRouter.js terá agora esta aparência:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../components/Header';
import AddBook from '../components/AddBook';
import BooksList from '../components/BooksList';
import useLocalStorage from '../hooks/useLocalStorage';

const AppRouter = () => {
  const [books, setBooks] = useLocalStorage('books', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route component={BooksList} path="/" exact={true} />
            <Route
              render={(props) => (
                <AddBook {...props} books={books} setBooks={setBooks} />
              )}
              path="/add"
            />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

Agora, abra AddBook.js e substitua o seu conteúdo com o seguinte código:

import React from 'react';
import BookForm from './BookForm';

const AddBook = ({ history, books, setBooks }) => {
  const handleOnSubmit = (book) => {
    setBooks([book, ...books]);
    history.push('/');
  };

  return (
    <React.Fragment>
      <BookForm handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  );
};

export default AddBook;

Primeiro, usamos a sintaxe de desestruturação da ES6 para acessar as props history, books e setBooks no componente.

A prop history é passada automaticamente pelo React Router a cada componente mencionado na <Route />. Passamos as props books e setBooks do arquivo AppRouter.js.

Armazenamos todos os livros adicionados em um array. Dentro do método handleOnSubmit, chamamos a função setBooks passando um array ao adicionar primeiro um livro recém-adicionado e depois fazendo o spread de todos os livros já adicionados no array books, como mostrado abaixo:

setBooks([book, ...books]);

Aqui, adicionamos primeiro o livro recém-adicionado e, depois, fazemos o spread dos livros já adicionados, pois queremos que o último livro seja exibido primeiro quando mostrarmos a lista de livros mais tarde.

Você, no entanto, pode mudar a ordem se quiser:

setBooks([...books, book]);

Isto adicionará o livro recém-adicionado no final de todos os livros já adicionados.

Podemos usar o operador spread, pois sabemos que books é um array (que iniciamos como um array vazio [] no arquivo AppRouter.js, como mostrado abaixo):

 const [books, setBooks] = useLocalStorage('books', []);

Então, uma vez que o livro é adicionado ao armazenamento local chamando o método setBooks, dentro do método handleOnSubmit, estamos redirecionando o usuário para a página Books List usando o método history.push:

history.push('/');

Agora, vamos verificar se conseguimos salvar ou não os livros no armazenamento local.

Como você pode ver, o livro está sendo corretamente adicionado ao armazenamento local (e você pode confirmar isso na aba Applications das ferramentas de desenvolvedor do Chrome).

Como exibir os livros adicionados na interface de usuário

Agora, vamos exibir os livros adicionados na UI (interface do usuário) no menu de Books List.

Abra o AppRouter.js e passe books e setBooks como props para o componente BooksList.

O seu arquivo AppRouter.js terá esta aparência agora:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../components/Header';
import AddBook from '../components/AddBook';
import BooksList from '../components/BooksList';
import useLocalStorage from '../hooks/useLocalStorage';

const AppRouter = () => {
  const [books, setBooks] = useLocalStorage('books', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route
              render={(props) => (
                <BooksList {...props} books={books} setBooks={setBooks} />
              )}
              path="/"
              exact={true}
            />
            <Route
              render={(props) => (
                <AddBook {...props} books={books} setBooks={setBooks} />
              )}
              path="/add"
            />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

Aqui, acabamos de alterar a primeira rota relacionada ao componente BooksList.

Agora, crie um arquivo Book.js dentro da pasta components com o seguinte conteúdo:

import React from 'react';
import { Button, Card } from 'react-bootstrap';

const Book = ({
  id,
  bookname,
  author,
  price,
  quantity,
  date,
  handleRemoveBook
}) => {
  return (
    <Card style={{ width: '18rem' }} className="book">
      <Card.Body>
        <Card.Title className="book-title">{bookname}</Card.Title>
        <div className="book-details">
          <div>Author: {author}</div>
          <div>Quantity: {quantity} </div>
          <div>Price: {price} </div>
          <div>Date: {new Date(date).toDateString()}</div>
        </div>
        <Button variant="primary">Edit</Button>{' '}
        <Button variant="danger" onClick={() => handleRemoveBook(id)}>
          Delete
        </Button>
      </Card.Body>
    </Card>
  );
};

export default Book;

Agora, abra o arquivo BooksList.js e substitua o seu conteúdo pelo seguinte código:

import React from 'react';
import _ from 'lodash';
import Book from './Book';

const BooksList = ({ books, setBooks }) => {

  const handleRemoveBook = (id) => {
    setBooks(books.filter((book) => book.id !== id));
  };

  return (
    <React.Fragment>
      <div className="book-list">
        {!_.isEmpty(books) ? (
          books.map((book) => (
            <Book key={book.id} {...book} handleRemoveBook={handleRemoveBook} />
          ))
        ) : (
          <p className="message">No books available. Please add some books.</p>
        )}
      </div>
    </React.Fragment>
  );
};

export default BooksList;

Neste arquivo, estamos percorrendo booksem um laço usando o método de array map e passando os livros como uma prop para o componente Book.

Note que também estamos passando a função handleRemoveBook como uma prop para que possamos excluir qualquer livro que queiramos.

Dentro da função handleRemoveBook, estamos chamando a função setBooks usando o método de array filter para manter somente os livros que não correspondem ao ID do livro fornecido.

const handleRemoveBook = (id) => {
    setBooks(books.filter((book) => book.id !== id));
};

Agora, se você verificar a aplicação acessando http://localhost:3000/, poderá ver o livro adicionado na interface do usuário.

Vamos adicionar outro livro para verificar todo o fluxo.

Como você pode ver, quando adicionamos um novo livro, somos redirecionados para a página da lista onde podemos excluir o livro. Você pode ver que ele é instantaneamente excluído da UI, bem como do armazenamento local.

Quando atualizamos a página, além disso, os dados não se perdem. Esse é o poder do armazenamento local.

Como editar um livro

Já temos a funcionalidade de adicionar e excluir os livros. Agora, vamos adicionar um modo de editar os livros que temos.

Abra Book.js e mude o código abaixo:

<Button variant="primary">Edit</Button>{' '}

para este código:

<Button variant="primary" onClick={() => history.push(`/edit/${id}`)}>
  Edit
</Button>{' '}

Aqui, adicionamos um manipulador de eventos onClick para redirecionar o usuário para a rota /edit/id_do_livro quando clicamos no botão de edição.

Não temos, entretanto, acesso ao objeto history no componente Book, pois a prop history é passada somente aos componentes que são mencionados em <Route />.

Estamos renderizando o componente Book dentro do componente BookList para que possamos ter acesso a history somente dentro do componente BookList. Então, podemos passá-la como uma prop ao componente Book.

Em vez disso, no entanto, o React Router oferece uma maneira fácil de usar o hook useHistory.

Importe o hook useHistory no topo do arquivo Book.js:

import { useHistory } from 'react-router-dom';

e, dentro do componente Book, chame o hook useHistory.

const Book = ({
  id,
  bookname,
  author,
  price,
  quantity,
  date,
  handleRemoveBook
}) => {
  const history = useHistory();
  ...
}

Agora, temos acesso ao objeto history dentro do componente Book.

O arquivo Book.js terá agora este aparência:

import React from 'react';
import { Button, Card } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';

const Book = ({
  id,
  bookname,
  author,
  price,
  quantity,
  date,
  handleRemoveBook
}) => {
  const history = useHistory();

  return (
    <Card style={{ width: '18rem' }} className="book">
      <Card.Body>
        <Card.Title className="book-title">{bookname}</Card.Title>
        <div className="book-details">
          <div>Author: {author}</div>
          <div>Quantity: {quantity} </div>
          <div>Price: {price} </div>
          <div>Date: {new Date(date).toDateString()}</div>
        </div>
        <Button variant="primary" onClick={() => history.push(`/edit/${id}`)}>
          Edit
        </Button>{' '}
        <Button variant="danger" onClick={() => handleRemoveBook(id)}>
          Delete
        </Button>
      </Card.Body>
    </Card>
  );
};

export default Book;

Crie um arquivo chamado EditBook.js dentro da pasta components com o seguinte conteúdo:

import React from 'react';
import BookForm from './BookForm';
import { useParams } from 'react-router-dom';

const EditBook = ({ history, books, setBooks }) => {
  const { id } = useParams();
  const bookToEdit = books.find((book) => book.id === id);

  const handleOnSubmit = (book) => {
    const filteredBooks = books.filter((book) => book.id !== id);
    setBooks([book, ...filteredBooks]);
    history.push('/');
  };

  return (
    <div>
      <BookForm book={bookToEdit} handleOnSubmit={handleOnSubmit} />
    </div>
  );
};

export default EditBook;

Aqui, para o manipulador de eventos onClick do botão Edit, redirecionamos o usuário para a rota /edit/id_do_livro – essa rota, no entanto, ainda não existe. Portanto, vamos criá-la primeiro.

Abra o AppRouter.js e, antes da tag final de Switch, adicione mais duas rotas:

<Switch>
...
<Route
  render={(props) => (
    <EditBook {...props} books={books} setBooks={setBooks} />
  )}
  path="/edit/:id"
/>
<Route component={() => <Redirect to="/" />} />
</Switch>

A primeira rota é para o componente EditBook. Aqui, o caminho é definido como /edit/:id onde :id representa qualquer id aleatória.

A segunda rota serve para lidar com todas as outras rotas que não correspondem a nenhuma das rotas mencionadas.

Assim, se acessarmos qualquer rota aleatória, como /help ou /contact, redirecionaremos o usuário para a rota /, que é a do componente BooksList.

O arquivo AppRouter.js terá agora esta aparência:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../components/Header';
import AddBook from '../components/AddBook';
import BooksList from '../components/BooksList';
import useLocalStorage from '../hooks/useLocalStorage';

const AppRouter = () => {
  const [books, setBooks] = useLocalStorage('books', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route
              render={(props) => (
                <BooksList {...props} books={books} setBooks={setBooks} />
              )}
              path="/"
              exact={true}
            />
            <Route
              render={(props) => (
                <AddBook {...props} books={books} setBooks={setBooks} />
              )}
              path="/add"
            />
            <Route
              render={(props) => (
                <EditBook {...props} books={books} setBooks={setBooks} />
              )}
              path="/edit/:id"
            />
            <Route component={() => <Redirect to="/" />} />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

Vamos verificar a funcionalidade de edição do aplicativo.

Como você pode ver, somos capazes de editar o livro com sucesso. Vamos entender como isso funciona.

Primeiro, dentro do arquivo AppRouter.js, temos uma rota como esta:

<Route
  render={(props) => (
    <EditBook {...props} books={books} setBooks={setBooks} />
  )}
  path="/edit/:id"
/>

e dentro do arquivo Book.js, temos um botão de edição, como este:

<Button variant="primary" onClick={() => history.push(`/edit/${id}`)}>
  Edit
</Button>

Assim, sempre que clicarmos no botão Edit para qualquer um dos livros, estamos redirecionando o usuário para o componente EditBook usando o método history.push, passando o id do livro a ser editado.

Depois, dentro do componente EditBook, usamos o hook useParams fornecido pelo react-router-dom para acessar props.params.id.

Portanto, as duas linhas abaixo são idênticas.

const { id } = useParams();

// A linha de código acima equivale à linha abaixo

const { id } = props.match.params;

Uma vez que tenhamos obtido essa identificação, usaremos o método de array find para encontrar o livro específico a partir da lista de livros com a id correspondente fornecida.

const bookToEdit = books.find((book) => book.id === id);

e esse livro específico é passado para o componente BookForm como uma prop book:

<BookForm book={bookToEdit} handleOnSubmit={handleOnSubmit} />

Dentro do componente BookForm, definimos o state como mostrado abaixo:

const [book, setBook] = useState({
  bookname: props.book ? props.book.bookname : '',
  author: props.book ? props.book.author : '',
  quantity: props.book ? props.book.quantity : '',
  price: props.book ? props.book.price : '',
  date: props.book ? props.book.date : ''
});

Aqui, verificamos se a prop book existe. Se existir, usamos os detalhes do livro passado como uma prop. Caso contrário, inicializamos o state com um valor vazio ('') para cada propriedade.

Cada um dos elementos de entrada forneceu uma prop value, que estamos definindo a partir do state, deste modo:

<Form.Control
  ...
  value={bookname}
  ...
/>

Podemos, porém, melhorar um pouco a sintaxe de useState dentro do componente BookForm.

Ao invés de definir diretamente um objeto para o hook useState, podemos usar a inicialização preguiçosa como fizemos no arquivo useLocalStorage.js.

Assim, mude o código abaixo:

const [book, setBook] = useState({
  bookname: props.book ? props.book.bookname : '',
  author: props.book ? props.book.author : '',
  quantity: props.book ? props.book.quantity : '',
  price: props.book ? props.book.price : '',
  date: props.book ? props.book.date : ''
});

para este código:

const [book, setBook] = useState(() => {
  return {
    bookname: props.book ? props.book.bookname : '',
    author: props.book ? props.book.author : '',
    quantity: props.book ? props.book.quantity : '',
    price: props.book ? props.book.price : '',
    date: props.book ? props.book.date : ''
  };
});

Em função dessa mudança, o código para definir o state não será executado em cada renderização da aplicação. Ele será executado apenas uma vez quando o componente for montado.

Note que a renderização do componente acontece em cada state ou mudança de prop.

Se você verificar a aplicação, verá que a aplicação funciona exatamente como antes, sem qualquer problema. Nós apenas melhoramos um pouco o desempenho da aplicação.

Como usar a API React Context

Agora, terminamos de construir toda a funcionalidade da aplicação. Se você, no entanto, verificar o arquivo AppRouter.js, verá que cada Rota parece um pouco complicada. Isso ocorre porque estamos passando as mesmos props books e setBooks para cada um dos componentes, usando o padrão de renderização de props.

Assim, podemos usar a API React Context para simplificar esse código.

Note que este é um passo opcional. Você não precisa usar a API React Context, já que estamos passando as props com apenas um nível de profundidade, o código atual está funcionando perfeitamente bem e não usamos nenhuma abordagem errada para passar as props

Apenas para tornar o código do Router mais simples e para dar uma ideia de como aproveitar o poder da API React Context, usaremos a API em nossa aplicação.

Crie um arquivo BooksContext.js dentro da pasta de contexto com o seguinte conteúdo:

import React from 'react';

const BooksContext = React.createContext();

export default BooksContext;

Agora, dentro do arquivo AppRouter.js, importe o contexto exportado acima.

import BooksContext from '../context/BooksContext';

e substitua o componente AppRouter pelo código abaixo:

const AppRouter = () => {
  const [books, setBooks] = useLocalStorage('books', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <BooksContext.Provider value={{ books, setBooks }}>
            <Switch>
              <Route component={BooksList} path="/" exact={true} />
              <Route component={AddBook} path="/add" />
              <Route component={EditBook} path="/edit/:id" />
              <Route component={() => <Redirect to="/" />} />
            </Switch>
          </BooksContext.Provider>
        </div>
      </div>
    </BrowserRouter>
  );
};

Aqui, convertemos o padrão de renderização das props para as rotas normais e adicionamos todo o bloco de Switch dentro do componente BooksContext.Provider assim:

<BooksContext.Provider value={{ books, setBooks }}>
 <Switch>
 ...
 </Switch>
</BooksContext.Provider>

Aqui, para o componente BooksContext.Provider, fornecemos uma prop value ao passar os dados que queremos acessar dentro dos componentes mencionados em Route.

Assim, agora, cada componente declarado como parte da Route poderá acessar books e setBooks através da API React Context.

Agora, abra o arquivo BooksList.js e remova as props books e setBooks que estão desestruturadas, pois não estamos mais passando diretamente as props.

Importe o BooksContext e useContext na parte superior do arquivo:

import React, { useContext } from 'react';
import BooksContext from '../context/BooksContext';

Acima da função handleRemoveBook, adicione o seguinte código:

const { books, setBooks } = useContext(BooksContext);

Aqui, estamos retirando os livros e os adereços de BooksContext usando o hook useContext.

O arquivo BooksList.js terá agora esta aparência:

import React, { useContext } from 'react';
import _ from 'lodash';
import Book from './Book';
import BooksContext from '../context/BooksContext';

const BooksList = () => {
  const { books, setBooks } = useContext(BooksContext);

  const handleRemoveBook = (id) => {
    setBooks(books.filter((book) => book.id !== id));
  };

  return (
    <React.Fragment>
      <div className="book-list">
        {!_.isEmpty(books) ? (
          books.map((book) => (
            <Book key={book.id} {...book} handleRemoveBook={handleRemoveBook} />
          ))
        ) : (
          <p className="message">No books available. Please add some books.</p>
        )}
      </div>
    </React.Fragment>
  );
};

export default BooksList;

Agora, faça mudanças similares no arquivo AddBook.js.

O arquivo AddBooks.js terá agora esta aparência:

import React, { useContext } from 'react';
import BookForm from './BookForm';
import BooksContext from '../context/BooksContext';

const AddBook = ({ history }) => {
  const { books, setBooks } = useContext(BooksContext);

  const handleOnSubmit = (book) => {
    setBooks([book, ...books]);
    history.push('/');
  };

  return (
    <React.Fragment>
      <BookForm handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  );
};

export default AddBook;

Note que, aqui, ainda estamos usando a desestruturação para a prop history. Apenas removemos books e setBooks da sintaxe de desestruturação.

Agora, faça mudanças similares no arquivo EditBook.js.

O arquivo EditBooks.js terá agora esta aparência:

import React, { useContext } from 'react';
import BookForm from './BookForm';
import { useParams } from 'react-router-dom';
import BooksContext from '../context/BooksContext';

const EditBook = ({ history }) => {
  const { books, setBooks } = useContext(BooksContext);
  const { id } = useParams();
  const bookToEdit = books.find((book) => book.id === id);

  const handleOnSubmit = (book) => {
    const filteredBooks = books.filter((book) => book.id !== id);
    setBooks([book, ...filteredBooks]);
    history.push('/');
  };

  return (
    <div>
      <BookForm book={bookToEdit} handleOnSubmit={handleOnSubmit} />
    </div>
  );
};

export default EditBook;

Se você verificar a aplicação, verá que ela funciona exatamente como antes, mas agora estamos usando a API React Context.

Se você quiser entender a API React Context em detalhes, confira este artigo (texto em inglês).

Obrigado pela leitura!

Você pode encontrar o código-fonte completo para esta aplicação neste repositório.

Quer aprender todas as características do ES6+ em detalhes, incluindo let e const, promises, vários métodos de promises, desestruturação de arrays e objetos, arrow functions, async/await, importação e exportação e muito mais?

Confira o livro do autor, Mastering Modern JavaScript (em inglês). Esse livro cobre todos os pré-requisitos para aprender React e ajuda você a se tornar melhor em JavaScript e React.

Confira uma prévia do conteúdo do livro gratuitamente aqui (em inglês).

Além disso, você pode conferir o curso gratuito do autor, Introdução ao React Router (em inglês) para aprender React Router do zero.

Deseja manter-se atualizado com o conteúdo regular sobre JavaScript, React, Node.js? Siga o autor no LinkedIn.

Meu artigo anterior descreveu como você pode entrar no desenvolvimento em front-end (texto em inglês). Ele também discutiu como o front-end pode ser um lugar cheio de perigos – pisar no lugar errado e você ficará sobrecarregado com os muitos frameworks do ecossistema do JavaScript.

Neste artigo, vamos ver como você pode entrar no desenvolvimento em back-end. Ao longo do caminho, vou responder a algumas das perguntas mais comuns que as pessoas me fazem sobre o assunto.

O que é o desenvolvimento em back-end?

O desenvolvimento em front-end envolve o que um usuário vê na tela quando abre um URL específico de sua propriedade. Mesmo em um ambiente completamente estático (apenas com HTML/CSS), quando alguém abre um site da web, algum servidor no planeta precisa responder a você com esses arquivos HTML e CSS.

Esse servidor é apenas um computador, como aquele que você mesmo usa para navegar na internet. Ele, no entanto, foi ajustado para o desempenho, não tendo componentes desnecessários como um mouse ou teclado anexado. Ele também fica com milhares de outros computadores, provavelmente em um depósito de dados.

A programação desses computadores de algum modo especial é chamada de desenvolvimento em back-end.

Você pode pensar que o desenvolvimento em back-end é chamado assim porque ele funciona por trás daquilo que o usuário enxerga. Um visitante do seu site nunca realmente "acessa" completamente o back-end. Ele apenas se comunica com o seu servidor, seja diretamente através de portas para acesso muito limitado (como a transferência de arquivos HTML/CSS) ou nem mesmo isso - enterrado profundamente sob CDNs ou firewalls (como no caso do Cloudflare).

Agora que temos uma compreensão básica do que significa desenvolvimento em back-end, vamos entrar em algumas questões reais.

É necessário o conhecimento de programação em front-end para o back-end?

Resposta curta: Não.

O desenvolvimento em back-end, como mencionado acima, envolve a programação de um computador que provavelmente está do outro lado do planeta, responsável por responder ao que seus usuários dizem a partir dos seus próprios computadores.

Se você é um desenvolvedor em back-end em tempo integral, você realmente não precisa se importar com o que acontece dentro daqueles arquivos HTML, CSS e JavaScript que você envia para o navegador do usuário. Ao invés disso, você tem que se concentrar mais no desempenho do servidor, no código do servidor e na produção.

O que acontece no desenvolvimento em back-end?

Bem, seguindo os livros, você pode dizer que uma pessoa que programa uma aplicação que pode responder a solicitações HTTP é um desenvolvedor em back-end.

Na realidade, porém, às vezes, os desenvolvedores em back-end são capazes de fazer muito mais do que apenas escrever scripts de servidor. Eles têm o conhecimento para configurar servidores proxies reversíveis (NGiNX/HAProxy), permitir a compressão e outras formas de acelerar o site, além de configurar um ambiente do Docker de produção.

Para se qualificar como desenvolvedor em back-end, eu diria que as habilidades mínimas que você precisa são:

1. Bom conhecimento sobre uma linguagem de programação na qual você pode escrever servidores HTTP. Exemplos: C#, Java, Node, PHP, Python etc. (há muitas!)
2. Gerenciar para hospedagem usando cPanel (tradicional) ou usando o terminal do bash (cloud hosting/tradicional)
3. Trabalhar com sistemas de controle de versão (VCS) como o Git para gerenciar e fazer a implantação das builds

Assim como todo jogo vem com especificações mínimas e recomendadas, para os desenvolvedores em back-end, as minhas especificações recomendadas seriam (incluindo as habilidades mínimas):

1. NGiNX, para itens de arquivos estáticos e gerenciamento de servidores
2. Habilidades de gerenciamento de banco de dados (SQL/NoSQL)
3. Segurança do back-end (escrever código seguro e robusto, executar aplicações em contêineres do Docker com privilégios limitados, proteção contra ataques DdoS)
4. Balanceamento automático/balanceamento de carga

Muito bem, já falei muito sobre o necessário para o desenvolvimento em back-end. Como, no entanto, você pode se torna um desenvolvedor em back-end?

Comece com os requisitos mínimos

Como eu disse, para o back-end, assim como nos jogos, temos um conjunto de requisitos mínimos e requisitos recomendados. Os requisitos mínimos consistem em 3 coisas:

Aprenda uma linguagem de programação de back-end

Quando as pessoas aprendem sozinhas, elas geralmente não têm uma equipe ou alguém que possa fazer o desenvolvimento do front-end. Elas estão todas por conta própria. Portanto, muitas vezes, você terá que criar páginas da web e servidores por conta própria, ao menos no início.

Existem muitas opções de linguagens de programação de back-end. Não consigo pensar em nenhuma linguagem de sistema popular que não suporte servidores HTTP desde o início. A vantagem de se escolher o Node é que suas habilidades de JavaScript do front-end são transferíveis para o back-end.

No entanto, você pode escolher entre uma variedade de linguagens, como Java, C++, C#, Python, PHP, entre outras.

Como escolher uma, você pode se perguntar. A resposta é a mesma que foi dada no artigo de desenvolvimento em front-end: você tem que tentar tudo inicialmente e ver qual é aquela que é melhor com você.

O Node é fácil, já que você deve ter feito a programação em JavaScript para o front-end. Se, no entanto, você é um desenvolvedor Python ou Java, pode achar essas fáceis de entender. Isso depende completamente da sua profissão e do seu gosto.

Aprenda mais sobre como administrar a hospedagem

Já se foram os dias em que você precisava comprar servidores manualmente e configurá-los em sua casa, conectar-se ao provedor e fazer tudo isso você mesmo. Essa é a era da computação em nuvem. Agora, ao hospedar seu site da web, você tem 2 opções, em especial:

1. Ir para servidores de hospedagem gerenciada, como a HostGator ou o GoDaddy.
2. Ir para provedores de hospedagem em nuvem, como a GCP, a AWS ou a DigitalOcean.

Qual é a diferença entre os dois? Em ambos os casos, os servidores são de propriedade e operados pelas respectivas empresas. A grande diferença, porém, é que a hospedagem gerenciada é mais amigável para as interfaces gráficas, tem um rico conjunto de ferramentas para ver o sistema de arquivos, monitorar o uso, gerenciar seus e-mails oficiais de domínio, fazer upload/download de arquivos de seu servidor e assim por diante. É, basicamente, uma configuração para pessoas com menos habilidades técnicas.

Por esse motivo, não recomendo sites gerenciados, como a HostGator ou o GoDaddy, para desenvolvedores experientes. Mesmo assim, pode ser uma boa plataforma para cometer erros e aprender com eles, principalmente porque você normalmente tem planos pré-pagos para eles. Você também terá uma boa interface para gerenciar as coisas, o que não permite que você faça com que suas contas aumentem exponencialmente por acidente.

Quando, no entanto, você começar a se acostumar, recomendo que você mude para um provedor na nuvem. Isso tira todas as ferramentas legais do cPanel que você usava para gerenciar arquivos e pastas em servidores. Ao mesmo tempo, o desafiará muito a elevar o nível de suas habilidades.

Hoje, muitos provedores na nuvem também oferecem um teste gratuito decente, para que você possa realmente experimentar a plataforma deles antes de entrar em pleno funcionamento. Eu hospedo meu site para desenvolvedores – o codedamn – na DigitalOcean e acho que ele tem um bom equilíbrio entre complexidade e recursos do site.

Você pode usar este link para se inscrever na DigitalOcean e obter US$ 100 de créditos gratuitos. As instâncias da DigitalOcean custam cerca de US$ 5 por mês. Então, você tem cerca de 20 meses nessa instância. Ótimo negócio, não é?

De qualquer forma, você pode escolher qualquer provedor na nuvem. Então, é importante aprender a gerenciar o servidor usando apenas a linha de comando usando o ssh nela.

Saiba mais sobre sistemas de controle de versão

Existem outras soluções além do Git para SCVs. O Git, porém é a solução mais usada e a mais simples de entender.

Pessoalmente, pode ser que você não goste do Git de imediato, mas você entenderá porque ele é tão importante no momento em que você começar a trabalhar em equipe, em vários recursos simultaneamente em seu projeto.

O Git permite que você gerencie o seu fluxo de trabalho utilizando commits e branches. Os commits são como pontos de verificação em sua base de código – aqueles para os quais você pode sempre retornar se estragar tudo.

As branches são como realidades alternativas do seu projeto, onde algo completamente diferente poderia acontecer. Essas realidades alternativas podem ser criadas a partir de qualquer ponto no tempo e podem ser mescladas novamente a qualquer momento.

Se essas realidades puderem ser mescladas com compatibilidade, tudo bem. Se houver algum conflito (como se você estivesse vivo em uma realidade e morto em outra), você terá que fazer uma escolha manualmente. Outras mudanças podem ser mescladas automaticamente.

O Git é superinteressante. Quando você o dominar, vai querer usá-lo em cada projeto. Você conseguirá manter um histórico do seu trabalho de modo eficiente (ele comprime e armazena apenas a diferença entre os commits).

Também é possível criar repositórios do Git on-line, em sites como o GitHub, que atua como uma fonte central de verdade para o seu site. Sites como o GitHub podem ser configurados com hooks especiais da web, que podem realmente atualizar o seu site sempre que você adicionar um novo ponto de verificação (um novo commit) sem que você precise ir manualmente ao servidor e atualizá-lo você mesmo.

Tenha as habilidades recomendadas

Eu acredito firmemente em aprender fazendo. A melhor maneira de se fazer algo vem da necessidade ou do interesse. Quando você se considerar suficientemente bom com os requisitos mínimos, é hora de adquirir as habilidades recomendadas. Essas incluem todas as ferramentas, como o Docker e o NGiNX, mencionadas acima.

O DevOps também é algo que se encaixa muito bem com os desenvolvedores em back-end. Você pode tentar explorar o TravisCI ou o CircleCI para builds automatizadas. Integração e Implantação Contínuas (CI/CD) é um tópico que poderia levar a outro artigo inteiro. Por isso, não vou entrar no assunto. Na verdade, uma vez configurado corretamente, isso lhe poupará uma quantidade ridícula de tempo de desenvolvimento!

Depois, temos os bancos de dados, que eu coloquei nas habilidades recomendadas. Você vai, contudo, precisar de bancos de dados para praticamente qualquer aplicação que envolva algum tipo de persistência de dados gerada pelo usuário.

Os bancos de dados são geralmente fáceis de começar a trabalhar, mas mais difíceis de manter e de ajustar corretamente. A melhor maneira de se começar a trabalhar em uma pilha de tecnologia em back-end é ter tudo junto em um único servidor – o código de sua aplicação, os servidores proxy reversos, o banco de dados e assim por diante. Então, conforme você se torna mais proficiente em cada parte, você pode desacoplá-la da lógica de negócios existente.

Ao fazer isso, você está possibilitando uma arquitetura que pode ser altamente escalonável. Uma aplicação intensiva do banco de dados poderia ter uma solução otimizada para eles. Um site com tráfego intenso deve ter um bom mecanismo de CDN para descarregar ativos estáticos e assim por diante.

Conclusão

Há muito o que aprender, mas tudo isso é possível se você não desistir. Conte ao autor o que você pensou sobre este artigo através do Twitter e do Instagram do autor. Ele gostará muito de se conectar com os leitores por lá!

Além disso, se estiver interessado, confira o codedamn – uma plataforma voltada para o desenvolvedor para o aprendizado de tecnologias como o desenvolvimento em back-end! O autor, inclusive, já publicou um vídeo no YouTube sobre como rodar seu próprio servidor de sites da web simples em apenas 2 minutos! Confira o e diga ao autor o que você acha pelas redes sociais mencionadas acima!

Se você usa GitHub sem configurar uma chave SSH, não sabe o que está perdendo. Basta pensar que todo esse tempo que você passou inserindo o seu endereço de e-mail e senha no console toda vez que faz um commit poderia ter sido gasto programando.

Bem, não mais. Aqui está um guia rápido para gerar e configurar uma chave SSH no GitHub para que você nunca mais tenha que autenticar da maneira antiga.

Verificar a existência de uma chave SSH

Primeiro, verifique se você já gerou chaves SSH para a sua máquina. Abra um terminal e digite o seguinte comando:

ls -al ~/.ssh

Se você já gerou chaves SSH, você deve ver um resultado semelhante a este:

-rw-------  1 user_name user_name  1766 Jul  7  2018 id_rsa
-rw-r--r--  1 user_name user_name   414 Jul  7  2018 id_rsa.pub
-rw-------  1 user_name user_name 12892 Feb  5 18:39 known_hosts

Se suas chaves já existem, pule adiante para a seção Copiar a sua chave SSH pública abaixo.

Se você não vê nenhum resultado ou se aquele diretório não existe (você recebe uma mensagem No such file or directory), execute:

mkdir $HOME/.ssh

Em seguida, gere um novo conjunto de chaves com:

ssh-keygen -t rsa -b 4096 -C your@email.com

Agora, verifique se as suas chaves existem com o comando ls -al ~/.ssh e certifique-se de que o resultado seja similar ao listado acima.

Observação: as chaves SSH são sempre geradas como um par de chaves, uma pública (id_rsa.pub) e uma privada (id_rsa). É extremamente importante que você nunca revele sua chave privada e somente use sua chave pública para coisas como a autenticação no GitHub. Você pode ler mais sobre como os pares de chaves SSH/RSA funcionam aqui (texto em inglês).

Adicionar a chave SSH ao ssh-agent

O ssh-agent é um programa que começa quando você faz o login e armazena as suas chaves privadas. Para que funcione corretamente, ele precisa estar funcionando e ter uma cópia da sua chave privada.

Primeiro, certifique-se de que o ssh-agent está funcionando com:

eval "$(ssh-agent -s)" # for Mac and Linux

ou:

eval `ssh-agent -s`
ssh-agent -s # for Windows

Em seguida, adicione a sua chave privada ao ssh-agent com:

ssh-add ~/.ssh/id_rsa

Copiar a sua chave SSH pública

A seguir, você precisa copiar a sua chave SSH pública para a área de transferência.

Para Linux ou Mac, imprima o conteúdo da sua chave pública para o console com:

cat ~/.ssh/id_rsa.pub # Linux

Em seguida, selecione e copie o resultado.

Para o Windows, basta executar:

clip < ~/.ssh/id_rsa.pub # Windows

Adicionar a sua chave SSH pública ao GitHub

Vá para a sua página de configurações do GitHub e clique no botão "New SSH key":

Em seguida, dê à sua chave um título reconhecível e cole sua chave pública (id_rsa.pub):

Finalmente, teste a sua autenticação com:

ssh -T git@github.com

Se você seguiu todas estas etapas corretamente, você deve ver esta mensagem:

Hi your_user_name! You've successfully authenticated, but GitHub does not provide shell access.

Mais informações sobre o SSH (textos em inglês):

• Ultimate guide to SSH
• A top-down intro to SSH

Quando você aprende a programar pela primeira vez, é comum aprender arrays como a "principal estrutura de dados".

Em algum momento, você também aprenderá sobre tabelas hash. Se você estiver buscando o diploma em Ciência da Computação, você terá que fazer uma disciplina de estrutura de dados. Você também aprenderá sobre listas vinculadas, filas e pilhas. Essas estruturas de dados são chamadas de estruturas de dados "lineares", pois todas elas têm um início e um fim lógicos.

Quando começamos a aprender sobre árvores e grafos, pode ficar bastante confuso. Neles, não armazenamos dados de forma linear. As duas estruturas armazenam dados de um modo específico.

Este artigo é para ajudá-lo a entender melhor a estrutura de dados de árvore e para esclarecer qualquer confusão que você possa ter sobre ela.

Nele, vamos aprender:

• O que é uma árvore
• Exemplos de árvore
• Sua terminologia e como ela funciona
• Como implementar estruturas de árvore em código.

Vamos começar esta jornada de aprendizagem :)

Definição

Ao começar a programar, é comum entender melhor as estruturas de dados lineares do que estruturas de dados como árvores e grafos.

As árvores são conhecidas como uma estrutura de dados não linear. Elas não armazenam dados de modo linear. Elas organizam os dados de modo hierárquico.

Vamos examinar exemplos da vida real!

O que quero dizer quando digo de modo hierárquico?

Imagine uma árvore genealógica com relacionamentos de todas as gerações: avós, pais, filhos, irmãos e assim por diante. Geralmente, organizamos as árvores genealógicas de modo hierárquico.

O desenho acima é a minha árvore genealógica. Tossico, Akikazu, Hitomi e Takemi são meus avós.

Toshiaki e Juliana são meus pais.

TK, Yuji, Bruno e Kaio são os filhos dos meus pais (eu e meus irmãos).

A estrutura de uma organização é outro exemplo de uma hierarquia.

Em HTML, o Modelo de Objeto de Documento (em inglês, DOM, ou Document Object Model) funciona como uma árvore.

A tag HTML contém outras tags. Temos uma tag head e uma tag body. Essas tags contêm elementos específicos. A tag head tem tags meta e tags title. A tag body tem elementos que aparecem na interface do usuário, como h1, a, li, entre outros.

Uma definição técnica

Uma árvore é um conjunto de entidades chamadas nós. Os nós são conectados por arestas. Cada nó contém um valor ou dados e pode ou não ter um nó filho.

O primeiro nó da árvore é chamado de raiz. Se este nó raiz é conectado por outro nó, a raiz é então um nó pai e o nó conectado é um nó filho.

Todos os nós das árvores são conectados por links chamados arestas. Essa é uma parte importante das árvores, porque elas gerenciam a relação entre os nós.

As folhas são os últimos nós de uma árvore. Elas são os nós sem filhos. Como árvores reais, temos a raiz, os ramos e, finalmente, as folhas.

Outros conceitos importantes a serem entendidos são altura e profundidade.

A altura de uma árvore é o tamanho do caminho mais longo até uma folha.

A profundidade de um nó é o tamanho do caminho percorrido do nó até a raiz.

Resumo da terminologia

• A raiz é o nó mais alto da árvore
• A aresta é a ligação entre dois nós
• O filho é um nó que tem um nó pai
• O pai é um nó que tem uma aresta apontando para um nó filho
• A folha é um nó que não tem nós filhos na árvore
• A altura é o tamanho do caminho mais longo até uma folha
• A profundidade é o tamanho do caminho percorrido do nó até a raiz

Árvores binárias

Agora, vamos discutir um tipo específico de árvore. Nós a chamamos de árvore binária.

"Na ciência da computação, uma árvore binária é uma estrutura de dados em árvore na qual cada nó tem, no máximo, dois filhos, que são referidos como o filho da esquerda e o filho da direita". - Wikipédia

Então, vejamos um exemplo de árvore binária.

Vamos programar uma árvore binária

A primeira coisa que precisamos ter em mente quando implementamos uma árvore binária é o fato de ela ser uma coleção de nós. Cada nó tem três atributos: value, left_child (o filho da esquerda) e right_child (o filho da direita).

Como implementamos uma árvore binária simples que inicializa com estas três propriedades?

Vamos dar uma olhada.

class BinaryTree:
    def __init__(self, value):
        self.value = value
        self.left_child = None
        self.right_child = None

Aqui está. Esta é a nossa classe de árvore binária.

Quando instanciamos um objeto, passamos value (os dados do nó) como um parâmetro. Olhe para left_child e para right_child. Os dois estão definidos como None (Nenhum).

Por quê?

Porque quando criamos nosso nó, ele não tem filhos. Temos apenas os dados do nó.

Vamos testá-lo:

tree = BinaryTree('a')
print(tree.value) # a
print(tree.left_child) # None
print(tree.right_child) # None

É isso.

Podemos passar a string 'a' como o valor para nosso nó da árvore binária. Se imprimirmos value, left_child e right_child, podemos ver os valores.

Vamos para a parte de inserção. O que precisamos fazer aqui?

Vamos implementar um método para inserir um novo nó à direita e à esquerda.

Aqui estão as regras:

• Se o nó atual não tiver um filho da esquerda, criamos apenas um nó e o configuramos como left_child do nó atual.
• Se ele tiver o filho da esquerda, criamos um nó e o colocamos no lugar da filho da esquerda atual. Alocamos este nó filho da esquerda como o novo nó left_child.

Vamos representar isso com um desenho :)

Aqui está o código:

def insert_left(self, value):
    if self.left_child == None:
        self.left_child = BinaryTree(value)
    else:
        new_node = BinaryTree(value)
        new_node.left_child = self.left_child
        self.left_child = new_node

Novamente, se o nó atual não tiver um filho da esquerda, apenas criamos um nó e o configuramos como left_child do nó atual. Como alternativa, criamos um nó e o colocamos no lugar do left_child atual. Alocamos este nó como o novo nó left_child.

Fazemos a mesma coisa para inserir um nó do filho da direita.

def insert_right(self, value):
    if self.right_child == None:
        self.right_child = BinaryTree(value)
    else:
        new_node = BinaryTree(value)
        new_node.right_child = self.right_child
        self.right_child = new_node

Feito. :)

Porém, temos que testá-lo.

Vamos construir a seguinte árvore:

Para resumir a ilustração desta árvore:

• o nó a será a raiz da nossa árvore binária
• o filho da esquerda de a é o nó b
• o filho da direita de a é o nó c
• o filho da direita de b é o nó d (o nó b não tem um filho da esquerda)
• o filho da esquerda de c é o nó e
• o filho da direita de c é o nó f
• tanto o nó e como o nó f não têm filhos

Portanto, aqui está o código para a árvore:

a_node = BinaryTree('a')
a_node.insert_left('b')
a_node.insert_right('c')

b_node = a_node.left_child
b_node.insert_right('d')

c_node = a_node.right_child
c_node.insert_left('e')
c_node.insert_right('f')

d_node = b_node.right_child
e_node = c_node.left_child
f_node = c_node.right_child

print(a_node.value) # a
print(b_node.value) # b
print(c_node.value) # c
print(d_node.value) # d
print(e_node.value) # e
print(f_node.value) # f

A inserção está feita.

Agora temos que pensar na travessia da árvore.

Temos aqui duas opções: a Busca em Profundidade (DFS - Depth-First Search) e a Busca em Largura (BFS - Breadth-First Search).

• DFS "é um algoritmo para fazer uma travessia ou pesquisar a estrutura de dados em árvore. Ele começa pela raiz e explora o máximo possível ao longo de cada ramo antes de retroceder". – Wikipedia
• BFS "é um algoritmo para fazer uma travessia ou pesquisar a estrutura de dados em árvore. Ele começa na raiz da árvore e explora os nós vizinhos primeiro antes de passar para os vizinhos do nível seguinte". – Wikipedia

Portanto, vamos analisar os tipos de travessia de árvores.

Busca em Profundidade (DFS - Depth-First Search)

A DFS explora todo um caminho até uma folha antes de retroceder (backtracking) e explorar outro caminho. Vamos dar uma olhada em um exemplo com este tipo de travessia.

O resultado para este algoritmo será 1–2–3–4–5–6–7.

Por quê?

Vamos dividi-lo em partes.

1. Comece na `raiz` (1). Imprima-a.

2. Vá para o filho da esquerda (2). Imprima-o.

3. Então, vá para o filho da esquerda (3). Imprima-o. (Este nó não tem filhos)

4. Retroceda e vá para filho da direita (4). Imprima-o. (Este nó não tem filhos)

5. Retroceda, vá para nó raiz e vá para o filho da direita (5). Imprima-o.

6. Vá para o filho da esquerda (6). Imprima-o. (Este nó não tem filhos)

7. Retroceda e vá para filho da direita (7). Imprima-o. (Este nó não tem filhos)

8. Feito.

Quando vamos a fundo até uma folha e retrocedemos, isso é chamado de algoritmo DFS.

Agora que estamos familiarizados com esse algoritmo de travessia, discutiremos os tipos de DFS: pré-ordem, em ordem e pós-ordem.

Pré-ordem

Isso é exatamente o que fizemos no exemplo acima.

1. Imprimir o valor do nó.
2. Ir para o filho da esquerda e imprimi-lo se, e somente se, tiver um filho da esquerda.
3. Ir para o filho da direita e imprimi-lo se, e somente se, tiver um filho da direita.

def pre_order(self):
    print(self.value)

    if self.left_child:
        self.left_child.pre_order()

    if self.right_child:
        self.right_child.pre_order()

Em ordem

O resultado do algoritmo em ordem para este exemplo da árvore é 3–2–4–1–6–5–7.

Começamos da esquerda primeiro, depois pegamos o do meio e, por fim, o da direita.

Agora, vamos transformar isso em código.

def in_order(self):
    if self.left_child:
        self.left_child.in_order()

    print(self.value)

    if self.right_child:
        self.right_child.in_order()

1. Vá para o filho da esquerda e imprima-o se, e somente se, tiver um filho da esquerda.
2. Imprima o valor do nó
3. Vá para o filho da direita e imprima-o se, e somente se, tiver um filho da direita.

Pós-ordem

O resultado do algoritmo de pós-ordem para este exemplo de árvore é 3–4–2–6–7–5–1.

Começamos com a esquerda, seguindo da direita e depois o meio.

Vamos transformar isso em código.

def post_order(self):
    if self.left_child:
        self.left_child.post_order()

    if self.right_child:
        self.right_child.post_order()

    print(self.value)

1. Vá para o filho da esquerda e imprima-o se, e somente se, tiver um filho da esquerda.
2. Vá até o filho da direita e imprima-o se, e somente se, tiver um filho da direita.
3. Imprima o valor do nó

Busca em largura (BFS - Breadth-First Search)

O algoritmo BFS atravessa a árvore nível por nível e profundidade por profundidade.

Aqui está um exemplo que ajuda a explicar melhor este algoritmo:

Portanto, atravessamos nível por nível. Neste exemplo, o resultado é 1–2–5–3–4–6–7.

• Nível/Profundidade 0: somente o nó com valor 1
• Nível/Profundidade 1: nós com valores 2 e 5
• Nível/Profundidade 2: nós com valores 3, 4, 6, e 7

Agora, vamos transformar isso em código.

def bfs(self):
    queue = Queue()
    queue.put(self)

    while not queue.empty():
        current_node = queue.get()
        print(current_node.value)

        if current_node.left_child:
            queue.put(current_node.left_child)

        if current_node.right_child:
            queue.put(current_node.right_child)

Para implementar um algoritmo de BFS, usamos a estrutura de dados da fila para ajudar.

Como funciona?

Aqui está a explicação.

1. Primeiro adicione o nó raiz na fila (Queue) com o método put.
2. Itere enquanto a fila não estiver vazia.
3. Obtenha o primeiro nó na fila, depois imprima o seu valor.
4. Acrescentar o filho da esquerda e o filho da direita na fila (se o nó atual tiver filhos).
5. Feito. Imprimiremos o valor de cada nó, nível por nível, com nosso ajudante de fila.

Árvore binária de busca

"Uma árvore binária de busca é às vezes chamada de árvore binária ordenada ou classificada, e mantém seus valores em ordem, para que a busca e as outras operações possam usar o princípio da busca binária" - Wikipedia

Uma propriedade importante de uma árvore binária de busca é que o valor de um nó da árvore binária de busca é maior que o valor dos descendentes do seu filho da esquerda, mas menor que o valor dos descendentes de seu filho da direita".

Aqui está uma descrição da ilustração acima:

• A está invertido. A subárvore 7-5-8-6 precisa estar do lado direito e a subárvore 2-1-3 precisa estar do lado esquerdo.
• B é a única opção correta. Ela satisfaz a propriedade da árvore binária de busca.
• C tem um problema: o nó com o valor 4. Ele precisa estar do lado esquerdo da raiz porque é menor do que 5.

Vamos programar uma árvore de busca binária!

Agora é hora de programar!

O que veremos aqui? Vamos inserir novos nós, procurar um valor, deletar nós e o equilíbrio da árvore.

Vamos começar.

Inserção: adicionar novos nós à nossa árvore

Imagine que temos uma árvore vazia e que queremos adicionar novos nós com os seguintes valores nesta ordem: 50, 76, 21, 4, 32, 100, 64, 52.

A primeira coisa que precisamos saber é se 50 é a raiz de nossa árvore.

Podemos agora começar a inserir nó por nó.

• 76 é maior que 50, portanto insira 76 no lado direito.
• 21 é menor do que 50, portanto insira 21 no lado esquerdo.
• 4 é menor do que 50. O nó com valor 50 tem um filho da esquerda 21. Como 4 é menor do que 21, insira-o no lado esquerdo deste nó.
• 32 é menor do que 50. O nó com valor 50 tem um filho da esquerda 21. Como 32 é maior que 21, insira 32 no lado direito deste nó.
• 100 é maior que 50. O nó com valor 50 tem um filho da direita 76. Como 100 é maior que 76, insira 100 no lado direito deste nó.
• 64 é maior que 50. O nó com valor 50 tem um filho da direita 76. Como 64 é menor que 76, insira 64 no lado esquerdo deste nó.
• 52 é maior que 50. O nó com valor 50 tem um filho da direita 76. Como 52 é menor do que 76, o nó com valor 76 tem um filho da esquerda 64. 52 é menor do que 64, portanto insira 54 no lado esquerdo deste nó.

Você percebe um padrão aqui?

Vamos analisar.

1. O valor do novo nó é maior ou menor que o do nó atual?
2. Se o valor do novo nó for maior que o nó atual, vá para a subárvore à direita. Se o nó atual não tiver um filho da direita, insira-o lá ou retroceda para o passo nº 1.
3. Se o valor do novo nó for menor do que o nó atual, vá para a subárvore à esquerda. Se o nó atual não tiver um filho da esquerda, insira-o lá ou retroceda para o passo nº 1.
4. Não tratamos de casos especiais aqui. Quando o valor de um novo nó for igual ao valor atual do nó, use a regra número 3. Considere a inserção de valores iguais no lado esquerdo da subárvore.

Agora vamos transformar isso em código.

class BinarySearchTree:
    def __init__(self, value):
        self.value = value
        self.left_child = None
        self.right_child = None

    def insert_node(self, value):
        if value <= self.value and self.left_child:
            self.left_child.insert_node(value)
        elif value <= self.value:
            self.left_child = BinarySearchTree(value)
        elif value > self.value and self.right_child:
            self.right_child.insert_node(value)
        else:
            self.right_child = BinarySearchTree(value)

Parece muito simples.

A parte poderosa desse algoritmo é a parte de recursão, que está nas linhas 9 e 13. As duas linhas de código chamam o método insert_node e o utilizam para seus filhos à esquerda e filhos à direita, respectivamente. As linhas 11 e 15 são as que fazem a inserção para cada filho.

Vamos procurar o valor do nó... ou não...

O algoritmo que construiremos agora é o de buscas. Para um determinado valor (número inteiro), diremos se nossa árvore de busca binária tem ou não esse valor.

Um item importante a ser observado é como definimos o algoritmo de inserção de árvores. Primeiro, temos nosso nó raiz. Todos os nós da subárvore da esquerda terão valores menores que o nó raiz. Todos os nós da subárvore da direita terão valores maiores que o nó raiz.

Vamos dar uma olhada em um exemplo.

Imagine que temos esta árvore.

Agora, queremos saber se temos um nó baseado no valor 52.

Vamos analisar.

1. Começamos com o nó raiz como nosso nó atual. O valor dado é menor do que o valor do nó atual? Se sim, buscaremos esse valor na subárvore da esquerda.
2. O valor dado é maior do que o valor do nó atual? Se sim, buscaremos esse valor na subárvoreda direita.
3. Se as regras nº 1 e 2 forem falsas, podemos comparar o valor do nó atual e o valor dado se forem iguais. Se a comparação retornar True, podemos dizer: "Sim! Nossa árvore tem o valor dado", caso contrário, dizemos: "Não, não tem".

Agora, vamos transformar isso em código.

class BinarySearchTree:
    def __init__(self, value):
        self.value = value
        self.left_child = None
        self.right_child = None

    def find_node(self, value):
        if value < self.value and self.left_child:
            return self.left_child.find_node(value)
        if value > self.value and self.right_child:
            return self.right_child.find_node(value)

        return value == self.value

Vamos detalhar o código:

• As linhas 8 e 9 estão sob a regra nº 1.
• As linhas 10 e 11 estão sob a regra nº 2.
• A linha 13 está sob a regra nº 3.

Como testamos isso?

Vamos criar a nossa árvore binária de busca, inicializando o nó raiz com o valor 15.

bst = BinarySearchTree(15)

Agora, vamos inserir muitos nós novos.

bst.insert_node(10)
bst.insert_node(8)
bst.insert_node(12)
bst.insert_node(20)
bst.insert_node(17)
bst.insert_node(25)
bst.insert_node(19)

Para cada nó inserido, testaremos se o nosso método find_node realmente funciona.

print(bst.find_node(15)) # True
print(bst.find_node(10)) # True
print(bst.find_node(8)) # True
print(bst.find_node(12)) # True
print(bst.find_node(20)) # True
print(bst.find_node(17)) # True
print(bst.find_node(25)) # True
print(bst.find_node(19)) # True

Sim, ele funciona para esses valores dados! Vamos testar para um valor que não existe em nossa árvore de busca binária.

print(bst.find_node(0)) # False

Sim. Nossa busca está feita.

Eliminação: remoção e organização

A eliminação é um algoritmo mais complexo porque precisamos tratar de casos diferentes. Para um determinado valor, precisamos remover o nó com este valor. Imagine os seguintes cenários para este nó: ele não tem filhos, tem um único filho ou tem dois filhos.

• Cenário nº 1: um nó sem filhos (nó folha).

#        |50|                              |50|
#      /      \                           /    \
#    |30|     |70|   (DELETE 20) --->   |30|   |70|
#   /    \                                \
# |20|   |40|                             |40|

Se o nó que queremos excluir não tem filhos, simplesmente o excluímos. O algoritmo não precisa reorganizar a árvore.

• Cenário nº 2: um nó com apenas um filho (filho da esquerda ou filho da direita).

#        |50|                              |50|
#      /      \                           /    \
#    |30|     |70|   (DELETE 30) --->   |20|   |70|
#   /            
# |20|

Neste caso, nosso algoritmo precisa fazer com que o pai do nó aponte para o nó filho. Se o nó for o filho da esquerda, fazemos com que o pai do filho da esquerda aponte para o filho. Se o nó for o filho da direita do seu pai, fazemos com que o pai do filho da direita aponte para o filho.

• Cenário nº 3: uim nó com dois filhos.

#        |50|                              |50|
#      /      \                           /    \
#    |30|     |70|   (DELETE 30) --->   |40|   |70|
#   /    \                             /
# |20|   |40|                        |20|

Quando o nó tem dois filhos, precisamos encontrar o nó com o valor mínimo, a começar pelo filho da direita do nó. Colocaremos este nó com o valor mínimo no lugar do nó que queremos remover.

É hora de transformar isso em código.

def remove_node(self, value, parent):
    if value < self.value and self.left_child:
        return self.left_child.remove_node(value, self)
    elif value < self.value:
        return False
    elif value > self.value and self.right_child:
        return self.right_child.remove_node(value, self)
    elif value > self.value:
        return False
    else:
        if self.left_child is None and self.right_child is None and self == parent.left_child:
            parent.left_child = None
            self.clear_node()
        elif self.left_child is None and self.right_child is None and self == parent.right_child:
            parent.right_child = None
            self.clear_node()
        elif self.left_child and self.right_child is None and self == parent.left_child:
            parent.left_child = self.left_child
            self.clear_node()
        elif self.left_child and self.right_child is None and self == parent.right_child:
            parent.right_child = self.left_child
            self.clear_node()
        elif self.right_child and self.left_child is None and self == parent.left_child:
            parent.left_child = self.right_child
            self.clear_node()
        elif self.right_child and self.left_child is None and self == parent.right_child:
            parent.right_child = self.right_child
            self.clear_node()
        else:
            self.value = self.right_child.find_minimum_value()
            self.right_child.remove_node(self.value, self)

        return True

1. Primeiro: observe o valor dos parâmetros e o pai. Queremos encontrar o nó que tem este valor. O nó pai é importante para a remoção do nó.
2. Segundo: observe o valor de retorno. Nosso algoritmo retornará um valor booleano. Ele retorna True se encontrar o nó e o remove. Caso contrário, ele retornará False
3. Da linha 2 à linha 9: começamos a procurar o nó que tem o valor que estamos procurando. Se o valor for menor que o valor atual, vamos para a subárvore da esquerda, recursivamente (se, e somente se, o nó atual tiver um filho da esquerda). Se o valor for maior, vamos para a subárvore da direita, recursivamente.
4. Linha 10: começamos a pensar sobre o algoritmo de remoção.
5. Da linha 11 à linha 13: cobrimos o nó sem filhos. É o filho da esquerda do seu pai. Removemos o nó definindo o filho da esquerda do pai como None.
6. Linhas 14 e 15: cobrimos o nó sem filhos. É o filho da direita do seu pai. Removeremos o nó definindo o filho da direita do pai como None.
7. Método de limpeza do nó: mostrarei o código de clear_node abaixo. Ele define os nós do filho da esquerda, do filho da direita e o valor do nó para None.
8. Da linha 16 à linha 18: cobrimos o nó com apenas um filho (filho da esquerda). É o filho da esquerda do seu pai. Ajustamos o filho da esquerda do pai para o filho da esquerda do nó (o único filho que ele tem).
9. Da linha 19 à linha 21: cobrimos o nó com apenas um filho (filho da esquerda), e ele é o filho da direita do seu pai. Configuramos o filho da direita do pai para o filho da esquerda do nó (o único filho que ele tem).
10. Da linha 22 à linha 24: cobrimos o nó com apenas um filho (filho da direita), e ele é o filho da esquerda do seu pai. Configuramos o filho da esquerda do pai para o filho da direita do nó (o único filho que ele tem).
11. Da linha 25 à linha 27: cobrimos o nó com apenas um filho (filho da direita), e ele é o filho da direita do seu pai. Colocamos o filho da direita do pai no filho da direita do nó (o único filho que ele tem).
12. Da linha 28 à linha 30: cobrimos o nó com o filho da esquerda e o filho da direita. Obtemos o nó com o menor valor (o código é mostrado abaixo) e o configuramos com o valor do nó atual. Termine removendo o menor nó.
13. Linha 32: se encontrarmos o nó que estamos procurando, ele precisa retornar True. Da linha 11 à linha 31, tratamos desse caso. Então, basta retornar True e pronto.

• Para usar o método clear_node: configure o valor None para todos os três atributos — (value, left_child e right_child)

def clear_node(self):
    self.value = None
    self.left_child = None
    self.right_child = None

• Para usar o método find_minimum_value: desça para a esquerda. Se não conseguirmos encontrar mais nós, encontramos o menor.

def find_minimum_value(self):
    if self.left_child:
        return self.left_child.find_minimum_value()
    else:
        return self.value

Agora vamos testá-lo.

Usaremos esta árvore para testar nosso algoritmo remove_node.

#        |15|
#      /      \
#    |10|     |20|
#   /    \    /    \
# |8|   |12| |17| |25|
#              \
#              |19|

Vamos remover o nó com o valor 8. É um nó sem filho.

print(bst.remove_node(8, None)) # True
bst.pre_order_traversal()

#     |15|
#   /      \
# |10|     |20|
#    \    /    \
#   |12| |17| |25|
#          \
#          |19|

Agora, vamos remover o nó com o valor 17. É um nó com apenas um filho.

print(bst.remove_node(17, None)) # True
bst.pre_order_traversal()

#        |15|
#      /      \
#    |10|     |20|
#       \    /    \
#      |12| |19| |25|

Finalmente, removeremos um nó com dois filhos. Esta é a raiz da nossa árvore.

print(bst.remove_node(15, None)) # True
bst.pre_order_traversal()

#        |19|
#      /      \
#    |10|     |20|
#        \        \
#        |12|     |25|

Os testes agora estão prontos. :)

Isso é tudo por enquanto!

Parabéns por terminar este conteúdo denso. É realmente difícil entender um conceito que não conhecemos, mas você conseguiu. :)

Este é mais um passo adiante na minha jornada de aprendizagem e domínio de algoritmos e estruturas de dados. Você pode ver a documentação de minha jornada completa aqui na minha publicação Renaissance Developer (em inglês).

Divirta-se, continue aprendendo e programando.

Twitter e Github do autor. ☺

Recursos adicionais (em inglês)

• Introdução à estrutura de dados em árvore, da mycodeschool
• Como não ser atropelado pelas árvores, do talentoso Vaidehi Joshi
• Introdução às árvores, palestra do professor Jonathan Cohen
• Introdução às árvores, palestra do professor David Schmidt
• Introdução às árvores, palestra do professor Victor Adamchik
• Árvores com Gayle Laakmann McDowell
• Implementação de árvores binárias e testes, por TK
• Curso do Coursera: Estruturas de dados, da Universidade da Califórnia, San Diego
• Curso do Coursera: Estruturas de Dados e desempenho, da Universidade da Califórnia, San Diego
• Conceitos e implementação da árvore binária de busca, de Paul Programming
• Implementação da árvore binária de busca e testes, por TK
• Algoritmo de remoção de nó da árvore binária de busca, de GeeksforGeeks
• Algoritmo de remoção de nó da árvore binária de busca, de Algolist
• Aprendendo Python do zero ao herói
• Travessia de árvores, da Wikipédia

Recursos adicionais (em português)

• Árvore, da Wikipedia

Em JavaScript, os objetos são usados para armazenar múltiplos valores como uma estrutura de dados complexa.

Um objeto é criado com chaves {...} e uma lista de propriedades. Uma propriedade é um par de chave-valor, onde a chave deve ser uma string e o valor pode ser de qualquer tipo.

Por outro lado, os arrays são uma coleção ordenada que pode conter dados de qualquer tipo. Em JavaScript, os arrays são criados com colchetes [...] e permitem a duplicação de elementos.

Até a ES6 (ECMAScript 2015), os objetos e arrays em JavaScript eram as estruturas de dados mais importantes para lidar com coleções de dados. A comunidade de desenvolvedores não tinha muitas opções além dessas duas. Mesmo assim, uma combinação de objetos e arrays era capaz de lidar com dados em muitos cenários.

No entanto, havia algumas falhas:

• As chaves dos objetos só podiam ser do tipo string.
• Os objetos não mantinham a ordem dos elementos inseridos neles.
• Os objetos carecem de alguns métodos úteis, o que os torna difíceis de usar em algumas situações. Por exemplo, não se pode calcular facilmente o tamanho (length) de um objeto. Além disso, a enumeração de um objeto não é tão direta.
• Os arrays são coleções de elementos que permitem duplicatas. O suporte a arrays que tenham apenas elementos distintos requer lógica e código adicionais.

Com a introdução do ES6, obtivemos duas novas estruturas de dados que abordam as falhas mencionadas acima: Map e Set. Neste artigo, analisaremos as duas estruturas de perto e entenderemos como utilizá-las em diferentes situações.

Map em JavaScript

O map é uma coleção de pares chave-valor onde a chave pode ser de qualquer tipo. O map lembra a ordem original em que os elementos foram adicionados a ele, o que significa que os dados podem ser recuperados na mesma ordem em que foram inseridos.

Em outras palavras, o map tem características tanto do objeto quanto do array:

• Como um objeto, ele suporta a estrutura de pares chave-valor.
• Como um array, ele se lembra da ordem de inserção.

Como criar e inicializar um map em JavaScript

Um map pode ser criado assim:

const map = new Map();

Isso retornará um map vazio:

Map(0) {}

Outro modo de criar um map é com valores iniciais. Veja como criar um map com três pares chave-valor:

const freeCodeCampBlog = new Map([
  ['nome', 'freeCodeCamp'],
  ['tipo', 'blog'],
  ['autor', 'Tapas Adhikary'],
]);

Isso retornará um map com três elementos:

Map(3) {"nome" => "freeCodeCamp", "tipo" => "blog", "autor" => "Tapas Adhikary"}

Como adicionar valores a um map em JavaScript

Para adicionar valor a um map, use o método set(chave, valor).

O método set(chave, valor) toma dois parâmetros, chave e valor, onde a chave e o valor podem ser de qualquer tipo, um primitivo (booleano, string, número etc.) ou um objeto:

// Cria um map
const map = new Map();

// Adiciona valores ao map
map.set('nome', 'freeCodeCamp');
map.set('tipo', 'blog');
map.set('autor', 'Tapas Adhikary');

Resultado:

Map(3) {"nome" => "freeCodeCamp", "tipo" => "blog", "autor" => "Tapas Adhikary"}

Observe que, se você usar a mesma chave para adicionar um valor a um map várias vezes, ele sempre substituirá o valor anterior:

// Adicionar um escritor diferente
map.set('autor', 'Outra pessoa!');

Assim, o resultado seria:

Map(3) 
{"nome" => "freeCodeCamp", "tipo" => "blog", "autor" => "Outra pessoa!"}

Como obter valores de um map em JavaScript

Para obter um valor de um map, use o método get(chave):

map.get('nome'); // retorna freeCodeCamp

Tudo sobre chaves nos maps em JavaScript

As chaves em um map podem ser de qualquer tipo, um primitivo ou um objeto. Essa é uma das maiores diferenças entre o map e os objetos regulares em JavaScript, onde a chave só pode ser uma string:

// cria um Map
const funMap = new Map();

funMap.set(360, 'Número da minha casa'); // número como chave
funMap.set(true, 'Eu escrevo blogs!'); // booleano como chave

let obj = {'nome': 'tapas'}
funMap.set(obj, true); // objeto como chave

console.log(funMap);

Aqui está o resultado:

Map(3) 
{
  360 => "Número da minha casa", 
  true => "Eu escrevo blogs!", 
  {…} => true
}

Um objeto regular do JavaScript sempre trata a chave como uma string. Mesmo quando você a passa como um primitivo ou objeto, ela converte internamente a chave em uma string:

// Cria um objeto vazio
const funObj = {};

// Adiciona uma propriedade. Nota, passando a chave como um número.
funObj[360] = 'My House Number';

// Retorna true porque o número 360 foi convertido na string '360' internamente!
console.log(funObj[360] === funObj['360']);

Propriedades de map e métodos em JavaScript

O map em JavaScript tem propriedades e métodos incorporados que o tornam fácil de usar. Aqui estão alguns dos métodos mais comuns:

• Use a propriedade size para saber quantos elementos estão em um map:
• Busque um elemento com o método has(chave):
• Remova um elemento com o método delete(chave):
• Use o método clear() para remover todos os elementos do map de uma só vez:

console.log('O tamanho do map é', map.size);

// retorna true se o mapa tem um elemento com a chave "John".
console.log(map.has('John')); 


// retorna false se o map não tiver um elemento com a chave "Tapas".
console.log(map.has('Tapas')); 

map.delete('Sam'); // remove o elemento com chave "Sam".

// limpa o map, removendo todos os elementos
map.clear(); 

map.size // retornará, 0

O mapIterator: keys(), values() e entries() em JavaScript

Os métodos keys(), values() e entries() retornam um MapIterator, o que é excelente, pois você pode usar um laço for-of ou forEach diretamente sobre ele.

Primeiro, crie um mapsimples:

const ageMap = new Map([
  ['Jack', 20],
  ['Alan', 34],
  ['Bill', 10],
  ['Sam', 9]
]);

• Obtenha todas as chaves:
• Obtenha todos os valores:
• Obtenha todas as entradas (pares chave-valor):

console.log(ageMap.keys());

// Resultado:

// MapIterator {"Jack", "Alan", "Bill", "Sam"}

console.log(ageMap.values());

// Resultado:

// MapIterator {20, 34, 10, 9}

console.log(ageMap.entries());

// Resultado

// MapIterator {"Jack" => 20, "Alan" => 34, "Bill" => 10, "Sam" => 9}

Como iterar sobre um map em JavaScript

Você pode usar os laços forEach ou for-of para iterar sobre um map:

// com forEach
ageMap.forEach((value, key) => {
   console.log(`${key} tem ${value} anos de idade!`);
});

// com for-of
for(const [key, value] of ageMap) {
  console.log(`${key} tem ${value} anos de idade!`);
}

O resultado será o mesmo em ambos os casos:

Jack tem 20 anos de idade!
Alan tem 34 anos de idade!
Bill tem 10 anos de idade
Sam tem 9 anos de idade!

Como converter um objeto em um map em JavaScript

Você pode encontrar uma situação na qual você precisa converter um objeto em uma estrutura semelhante a um map. Você pode usar o método de objeto entries para fazer isso:

const address = {
  'Tapas': 'Bangalore',
  'James': 'Huston',
  'Selva': 'Srilanka'
};

const addressMap = new Map(Object.entries(address));

Como converter um map em um objeto em JavaScript

Se você quiser fazer o contrário, você pode usar o método fromEntries:

Object.fromEntries(map)

Como converter um map em um array em JavaScript

Há algumas maneiras de converter um map em um array:

• Usando Array.from(map):
• Usando o operador spread:

const map = new Map();
map.set('leite', 200);
map.set("chá", 300);
map.set('café', 500);

console.log(Array.from(map));

console.log([...map]);

Map x objeto: quando você deve usá-los?

O map tem características tanto do objeto quanto do array. Entretanto, o map é mais como um objeto do que um array devido à natureza do armazenamento dos dados no formato chave-valor.

A similaridade com os objetos termina aqui. Como você já viu, o map é diferente em muitos aspectos. Então, qual você deve usar e quando? Como você decide?

Use map quando:

• As suas necessidades não são tão simples assim. Você pode querer criar chaves que não sejam strings. Armazenar um objeto como uma chave é uma abordagem muito poderosa. O map dá a você esse poder por padrão.
• Você precisa de uma estrutura de dados onde os elementos possam ser solicitados. Os objetos regulares não mantêm a ordem de suas entradas.
• Você está procurando flexibilidade sem depender de uma biblioteca externa como o lodash. Você pode acabar usando uma biblioteca como o lodash porque não encontrou métodos como has(), values(), delete() ou uma propriedade size com um objeto normal. O map facilita isso para você, fornecendo todos esses métodos por padrão.

Use um objeto quando:

• Você não tem nenhuma das necessidades listadas acima.
• Você depende de JSON.parse(), pois um map não pode ser analisado por ele.

Set em JavaScript

Um set é uma coleção de elementos únicos que podem ser de qualquer tipo. O set é também uma coleção ordenada de elementos, o que significa que os elementos serão recuperados na mesma ordem em que foram inseridos.

Um set em JavaScript se comporta do mesmo modo que um conjunto matemático.

Como criar e inicializar um Set em JavaScript

Um novo set pode ser criado assim:

const set = new Set();
console.log(set);

O resultado será um set vazio:

Set(0) {}

Veja aqui como criar um set com alguns valores iniciais:

const fruitSet = new Set(['🍉', '🍎', '🍈', '🍏']);
console.log(fruitSet);

Resultado:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Propriedades e métodos dos sets em JavaScript

O set tem métodos para adicionar um elemento a ele, excluir elementos dele, verificar se existe um elemento nele e limpá-lo completamente:

• Use a propriedade size para saber o tamanho do set. Ele retorna o número de elementos contidos nele:
• Use o método add(elemento) para adicionar um elemento ao set:

set.size

// Cria um set - saladSet
const saladSet = new Set();

// Adiciona alguns vegetais a ele
saladSet.add('🍅'); // tomate
saladSet.add('🥑'); // abacate
saladSet.add('🥕'); // cenoura
saladSet.add('🥒'); // pepino

console.log(saladSet);


// Resultado

// Set(4) {"🍅", "🥑", "🥕", "🥒"}

Eu amo tomates! Que tal adicionar mais um?

Oh, não! Eu não posso – o set é uma coleção de elementos únicos:

saladSet.add('🍅');
console.log(saladSet);

O resultado é o mesmo de antes – nada foi adicionado ao saladSet.

• Use o método has(elemento) para procurar se temos uma cenoura (🥕) ou um brócolis (🥦) no set:
• Use o método delete(elemento) para remover o abacate(🥑) do set:

// A salada tem uma 🥕, então retorna true
console.log('A salada tem uma cenoura?', saladSet.has('🥕'));

// A salada não tem um 🥦, então retorna false
console.log('A salada tem brócolis?', saladSet.has('🥦'));

saladSet.delete('🥑');
console.log('Eu não gosto de 🥑, remova da salada:', saladSet);

Agora, nosso set de saladas é o seguinte:

Set(3) {"🍅", "🥕", "🥒"}

• Use o método clear() para remover todos os elementos do set:

saladSet.clear();

Como iterar sobre um set em JavaScript

O set tem um método chamado values() que retorna um SetIterator para obter todos os seus valores:

// Cria um Set
const houseNos = new Set([360, 567, 101]);

// Obtenha o SetIterator utilizando o método values()
console.log(houseNos.values());

Resultado:

SetIterator {360, 567, 101}

Podemos usar um laço forEach ou for-of sobre isso para recuperar os valores.

Curiosamente, o JavaScript tenta tornar o set compatível com o map. É por isso que encontramos nele dois métodos que vimos em map, keys() e entries().

Como set não tem chaves, o método SetIterator retorna um SetIterator para recuperar os seus valores:

console.log(houseNos.keys());

// Resultado

// console.log(houseNos.keys());

Com map, o método entries() retorna um iterador para recuperar pares chave-valor. Novamente, não há chaves em um set, então entries() retorna um SetIterator para recuperar pares valor-valor:

console.log(houseNos.entries());

// Resultado

// SetIterator {360 => 360, 567 => 567, 101 => 101}

Como enumerar sobre um set em JavaScript

Podemos enumerar sobre um set usando os laços forEach e for-of:

// com forEach

houseNos.forEach((valor) => {
   console.log(valor);
});


// com for-of

for(const valor of houseNos) {
   console.log(valor);
 }

O resultado de ambos é:

360
567
101

Sets e arrays em JavaScript

Um array, como um set, permite adicionar e remover elementos. O set, no entanto, é bem diferente e não se destina a substituir os arrays.

A maior diferença entre um array e um set é que os arrays permitem que você tenha elementos duplicados. Além disso, algumas das operações de set, como delete() são mais rápidas do que as do array, como shift() ou splice().

Pense em set como uma extensão de um array regular, apenas com mais capacidades. A estrutura de dados do set não é uma substituição do array. Ambos podem resolver problemas interessantes.

Como converter um set em um array em JavaScript

A conversão de um set em um array é simples:

const arr = [...houseNos];
console.log(arr);

Valores únicos de um array utilizando o set em JavaScript

Criar um set é uma maneira realmente fácil de remover valores duplicados de um array:

// Cria um array mixedFruit com algumas frutas duplicadas
const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈'];

// Passa o array para criar um set de frutas únicas
const mixedFruitSet = new Set(mixedFruit);

console.log(mixedFruitSet);

Resultado:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Set e objetos em JavaScript

Um set pode ter elementos de qualquer tipo, até mesmo objetos:

// Cria um objeto pessoa
const person = {
   'name': 'Alex',
   'age': 32
 };

// Cria um set e adiciona o objeto a ele
const pSet = new Set();
pSet.add(person);
console.log(pSet);

Resultado:

Não há surpresas aqui - o set contém um elemento que é um objeto.

Vamos mudar uma propriedade do objeto e adicioná-la ao set novamente:

// Muda o nome da pessoa
person.name = 'Bob';

// Adiciona o objeto pessoa ao set novamente
pSet.add(person);
console.log(pSet);

Qual você acha que será a saída? Dois objetos pessoa ou apenas um?

Aqui está a saída:

O set é uma coleção de elementos únicos. Ao mudar a propriedade do objeto, não mudamos o objeto em si. Portanto, o set não permitirá a duplicação de elementos.

O set é uma ótima estrutura de dados a ser usada para além dos arrays em JavaScript. No entanto, ele não tem uma grande vantagem sobre os arrays regulares.

Use set quando precisar manter um conjunto distinto de dados para realizar operações de conjuntos, como união, interseção, diferença e assim por diante.

Em resumo

Aqui está um repositório no GitHub onde você pode encontrar todo o código-fonte usado neste artigo. Se você o achou útil, mostre o seu apoio dando uma estrela ao repositório: https://github.com/atapas/js-collections-map-set

Você também pode gostar de alguns dos meus outros artigos (em inglês):

• My Favorite JavaScript Tips and Tricks
• JavaScript equality and similarity with ==, === and Object.is()

Se este artigo foi útil, compartilhe-o para que outros também possam ler. Você pode entrar em contato com autor pelo Twitter (@tapasadhikary), fazer seus comentários, ou segui-lo por lá.

Neste artigo, vamos explorar três maneiras diferentes de se fazer um botão em HTML agir como um link.

Estes são os métodos que vamos analisar:

1. Estilizar um link para parecer um botão
2. Usar os atributos action e formaction em um formulário
3. Usar o evento onclick do JavaScript

Primeiro, porém, vamos dar uma olhada na abordagem errada.

Por que esta abordagem com um elemento não funciona?

O trecho de código abaixo leva ao site do freeCodeCamp quando ele é clicado.

  <a href="https://www.freecodecamp.org/">
    <button>freeCodeCamp</button>
  </a> 

No entanto, essa não é uma marcação válida em HTML.

O elemento a pode ser envolvido por parágrafos inteiros, listas, tabelas e assim por diante. É possível usar até mesmo seções inteiras, desde que não haja conteúdo interativo dentro delas (por exemplo, botões ou outros links). - Fonte: Grupo de Trabalho de Tecnologia de Aplicação de Hipertexto Web

Essa é considerada uma má prática, pois torna difícil entender a intenção do usuário.

Os links devem navegar o usuário para outra parte da página da web ou para um site da web externo. Os botões devem realizar uma ação específica como o envio de um formulário.

Quando você aninha um dentro do outro, isso torna confusa a ação que você quer realizar. É por isso que é melhor não aninhar um botão dentro de um elemento de âncora.

Como estilizar um link que se pareça com um botão com CSS

Esta primeira abordagem não utiliza, de fato, um botão. Podemos estilizar uma tag de âncora para que se pareça com um botão usando o CSS.

Este é o estilo padrão do HTML para um elemento de âncora.

Podemos adicionar uma classe ao elemento de âncora e depois usar esse seletor de classe para estilizar o elemento.

  <a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se você quiser que o link abra em uma nova página, pode adicionar o atributo target="_blank", assim:

  <a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Então, podemos adicionar uma cor de fundo e mudar a cor da fonte, desse modo:

.fcc-btn {
  background-color: #199319;
  color: white;
}

O próximo passo é adicionar algum preenchimento (em inglês, padding) ao redor do texto:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
}

Finalmente, podemos usar a propriedade text-decoration para remover o sublinhado do texto:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}

Agora temos um elemento de âncora que se parece com um botão.

Também podemos tornar este "botão" um pouco mais interativo mudando a cor de fundo, dependendo do estado do link.

.fcc-btn:hover {
  background-color: #223094;
}

Poderíamos deixar o design mais intrincado, mas a ideia é apenas mostrar o básico de como estilizar um link para que se pareça um botão.

Você também poderia optar por usar uma biblioteca do CSS, como o Bootstrap.

  <a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se o seu projeto já inclui o Bootstrap, você pode usar os estilos de botões incorporados. Eu, no entanto, não importaria o Bootstrap apenas para estilizar um link.

Quais são os problemas com esta abordagem?

Há algumas discussões sobre o fato de ser uma boa prática criar links estilizados como botões. Alguns argumentarão que os links devem sempre se parecer com links e que os botões devem sempre se parecer com botões.

No livro da web chamado Resilient Web Design, Jeremy Keith afirma que

Um material não deve ser usado como substituto para outro. Caso contrário, o resultado final será enganoso.

Por que eu me dei ao trabalho de trazer à tona esse debate?

O meu objetivo não é fazer com que você escolha um lado do debate em vez do outro. Só quero que vocês estejam cientes dessa discussão em andamento.

Como usar os atributos action e formaction para fazer um botão de formulário

Como usar o atributo action

Outra alternativa seria aninhar o botão dentro de um formulário e usar o atributo action.

Exemplo de entrada:

  <form action="https://www.freecodecamp.org/">
    <input type="submit" value="freeCodeCamp">
  </form>

Exemplo de botão:

  <form action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Este seria o estilo padrão do botão.

Poderíamos usar os mesmos estilos anteriores, mas teríamos que adicionar o ponteiro do cursor e definir o atributo border como none, assim:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

Como utilizar o atributo formaction

Similar à abordagem anterior, podemos criar um formulário e utilizar o atributo formaction.

Exemplo de entrada:

  <form>
    <input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
  </form>

Exemplo de botão:

  <form>
    <button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
  </form>

Você só pode usar o atributo formaction com inputs e buttons que tenham os atributos type="image" ou type="submit".

Isso está semanticamente correto?

Embora essa pareça ser uma solução funcional, há uma questão a respeito de isso ser ou não semanticamente correto.

Estamos usando as tags de formulário, mas isso não funciona como um formulário real. O objetivo de um formulário é coletar e enviar dados do usuário.

Estamos, no entanto, usando o botão de envio para levar o usuário para outra página ou seção.

Quando se trata de semântica, essa não é uma boa prática de uso das tags de formulário.

Efeitos colaterais do uso dos atributos action e formaction

Quando você clica no botão, algo interessante acontece com o URL. O URL agora tem um ponto de interrogação ao final.

O motivo dessa mudança é porque o formulário está usando o método GET. Você poderia mudar para o método POST, mas pode haver casos onde isso também não seja o ideal.

  <form method="POST" action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Embora essa abordagem produza uma marcação válida em HTML, ela vem com esse efeito colateral não intencional.

Como usar o evento onclick do JavaScript para fazer um botão

Nas abordagens anteriores, analisamos as soluções em HTML e em CSS. Também podemos usar o JavaScript para alcançar o mesmo resultado.

Exemplo de input:

 <form>
    <input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
 </form>

Exemplo de button:

<button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</button>  

location.href representa a localização de um URL específico. Nesse caso, o window.location.href retornará https://www.freecodecamp.org/.

Desvantagens dessa abordagem

Embora essa solução funcione, há alguns problemas potenciais a serem considerados.

Se o usuário tiver decidido desativar o JavaScript em seu navegador, claramente, essa solução não funcionará. Infelizmente, isso poderá levar a uma má experiência para o usuário.

Conclusão

O objetivo deste artigo é mostrar três maneiras diferentes de se fazer botões agirem como links.

A primeira abordagem foi estilizar um link para que se parecesse com um botão. Também analisamos no debate se é uma boa ideia mudar a aparência dos links para se parecerem com outro elemento.

A segunda abordagem utilizou formulários e os atributos action e formaction. Também aprendemos, contudo, que essa abordagem tem alguns efeitos colaterais com o URL e não é semanticamente correta.

A terceira abordagem utilizou o evento onclick do JavaScript e window.location.href. Também aprendemos, porém, que essa abordagem pode não funcionar se o usuário decidir desativar o JavaScript em seu navegador.

Como desenvolvedor, é realmente importante observar os prós e os contras de uma abordagem específica antes de incorporá-la em seu projeto.

Espero que tenham gostado deste artigo e aprendido algumas coisas na leitura.

Desejo a você uma ótima programação! 😀

O atributo role (em português, "função" ou "papel") descreve a função de um elemento em programas que podem fazer uso dele, como leitores de tela ou lupas.

Exemplo de uso:

<a href="#" role="button">Link de botão</a>

Os leitores de tela lerão esse elemento como um "botão" ao invés de um "link".

Há quatro categorias de roles:

• Roles abstratos
• Roles de widget
• Roles de estrutura de documento
• Roles de ponto de referência

Mais informações sobre os atributos do HTML (textos em inglês):

atributo <script src>

atributo <a href>

atributo <a target>

atributo <body background>

atributo <p align>

atributo <img src>

<font> attribute

Atributos em HTML

Os elementos em HTML podem ter atributos, que contêm informações adicionais sobre o elemento.

Os atributos do HTML geralmente vêm em pares nome-valor. Eles sempre vão na tag de abertura de um elemento. O nome do atributo diz que tipo de informação você está fornecendo sobre o elemento e o valor dele é a informação real.

Por exemplo, um elemento âncora (<a>) em um documento em HTML cria links para outras páginas ou outras partes da página. Você usa o atributo href na tag de abertura de <a> para informar ao navegador para onde o link envia um usuário.

Aqui está um exemplo de um link que envia os usuários para a página inicial do freeCodeCamp:

<a href="www.freecodecamp.org">Clique aqui para visitar o freeCodeCamp!</a>

Observe que o nome do atributo (href) e o valor ("www.freeCodeCamp.org") são separados com um sinal de igual. As aspas cercam o valor.

Existem muitos atributos diferentes em HTML, mas a maioria deles trabalha apenas com certos elementos do HTML. Por exemplo, o atributo href não funcionará se for colocado em uma tag <h1>.

No exemplo acima, o valor fornecido para o atributo href poderia ser qualquer link válido. Entretanto, alguns atributos têm apenas um conjunto de opções válidas que você pode usar, ou os valores precisam estar em um formato específico. O atributo lang diz ao navegador o idioma padrão do conteúdo em um elemento <html>. Os valores para o atributo lang devem usar o idioma padrão ou os códigos de país, como en para o inglês ou it para o italiano.

Atributos booleanos

Alguns atributos do HTML não precisam de um valor porque eles têm apenas uma opção. Eles são chamados de atributos booleanos. A presença do atributo em uma tag o aplicará a esse elemento do HTML. Entretanto, não há problema de escrever o nome do atributo e defini-lo como a única opção do valor. Neste caso, o valor é normalmente o mesmo que o atributo nome.

Por exemplo, o elemento <input> em um formulário pode ter um atributo required (em português, obrigatório). Isso exige que os usuários preencham esse item antes de poderem enviar um formulário.

Aqui estão exemplos de sintaxe que fazem a mesma coisa:

<input type="text" required >
<input type="text" required="required" >