Nota da tradução: o artigo abaixo foi escrito por Quincy Larson em inglês e fala a respeito de podcasts em inglês. Há, certamente, diversas alternativas em português, como o próprio podcast do freeCodeCamp no idioma. No artigo, trataremos apenas de podcasts em inglês para aqueles que desejam praticar o idioma e se interar das novidades do mundo da tecnologia diretamente em inglês.

Os podcasts são uma ótima maneira de se aprender sobre tecnologia em qualquer lugar. Eles podem expor você a uma ampla variedade de ferramentas e conceitos.

Desde que comecei a aprender a programar em 2012, ouvi milhares de horas de podcasts sobre tecnologia, geralmente enquanto me exercitava ou ia para o trabalho. Muitos desses podcasts ainda estão em alta. Este artigo se concentrará nesses recursos de aprendizado comprovados pelo tempo.

Uma observação antes de começarmos: antes que você comece a me enviar tweets sobre como deixei de fora seu podcast favorito, observe que excluí intencionalmente a maioria dos podcasts voltados para negócios e notícias. Em vez disso, concentrei-me em podcasts dirigidos por desenvolvedores e que têm os desenvolvedores em mente como público principal.

Posso dizer com segurança que todos esses podcasts são sólidos. Se você é um desenvolvedor ou está interessado em se tornar um desenvolvedor, esses podcasts o divertirão e iluminarão seus caminhos. Aproveite.

O melhor podcast de desenvolvimento para a web: SyntaxFM

Sou fã de longa data de Scott Tolinski (um dançarino de break que se tornou desenvolvedor e dirige o canal LevelUpTuts no YouTube) e do icônico desenvolvedor canadense Wes Bos. Esses dois formam uma dupla carismática. Juntos, eles já apresentaram mais de 320 episódios de seu podcast SyntaxFM.

A cada episódio, Scott e Wes compartilham ferramentas e técnicas de desenvolvimento para a Web e frequentemente entrevistam alguns dos principais desenvolvedores da área.

Fique atento às suas dicas "saborosas" de CSS e JavaScript e ao seu senso de humor saudável.

Navegue pelos episódios da SyntaxFM aqui.

O melhor podcast para código aberto: The Changelog

O The Changelog é, a esta altura, uma instituição. Nos últimos anos, eles entrevistaram os criadores de uma grande variedade de projetos de código aberto.

Os principais anfitriões, Adam Stacoviak e Jerod Santo, são, eles mesmos, desenvolvedores. Eles mantêm uma comunidade on-line de última geração e incorporam toneladas de ferramentas de código aberto em sua própria plataforma.

Tive a honra de passar um tempo com eles na casa de Adam, em Houston, e entrevistá-los para o 10º aniversário do podcast.

Recomendo que você se inscreva e também navegue pelos mais de 400 episódios em seus arquivos (muitos deles têm até transcrições).

Navegue pelos episódios do The Changelog aqui.

O melhor podcast para aprender a programar: Learn to Code With Me

Em mais de 100 episódios, Laurence Bradford entrevistou uma grande variedade de desenvolvedores autodidatas. Aqui estão algumas das carreiras de pessoas que ela entrevistou antes de se tornarem desenvolvedores:

• seguranças de aeroporto
• pais que ficam em casa
• pastores
• professores
• e muito mais

Ela também tem episódios que servem como guias para encontrar clientes freelance, escolher o laptop certo e aprender a programar enquanto cria os filhos. Recomendamos fortemente.

Navegue pelos episódios do Podcast Learn to Code With Me Podcast aqui.

O melhor podcast focado em desenvolvedores-empreendedores: o podcast Indie Hackers

Grande parte do mundo da tecnologia pensa nos negócios como uma série de rodadas de financiamento de capital de risco que levam a uma eventual "saída". Há, no entanto, milhares de empresas bem-sucedidas administradas pelos próprios desenvolvedores, muitas vezes sem nenhum financiamento externo.

Essas são as empresas "bootstrapped" nas quais Courtland Allen, engenheiro treinado no MIT e que se tornou fundador, se dedica em seu podcast Indie Hackers.

Ao longo dos anos, Courtland entrevistou quase 200 fundadores – a maioria dos quais começou como desenvolvedores em tempo integral em outras empresas que iniciaram um projeto paralelo. Muitos desses projetos paralelos se transformaram em negócios lucrativos.

Em cada uma de suas entrevistas, Courtland faz com que esses desenvolvedores compartilhem seus números de receita com os ouvintes e tenta descobrir como eles foram tão bem-sucedidos. Ao longo do caminho, ele geralmente descobre insights que outros desenvolvedores podem usar para iniciar seus próprios negócios.

Navegue pelos episódios do podcast Indie Hackers aqui.

O melhor podcast sobre JavaScript: JS Party

O ecossistema JavaScript é enorme e diversificado, assim como esta lista de podcasts.

Toda semana, um painel rotativo de veteranos em JavaScript fala sobre novas bibliotecas, práticas recomendadas emergentes e outras mudanças que afetam os desenvolvedores.

Alguns dos muitos participantes frequentes do painel incluem:

• Desenvolvedora JS e professora Divya Sasidharan
• Palestrante de Stanford e pioneiro do código aberto Feross Aboukhadijeh
• Entusiasta do TypeScript Nick Nisi
• Defensor da descentralização Mikeal Rogers
• E engenheiro de software Amal Hussein

É um grupo divertido de pessoas que não apenas são apaixonadas por JavaScript, mas também fizeram contribuições significativas para a linguagem ao longo dos anos.

Veja os episódios do JS Party aqui.

O melhor podcast sobre Python: Talk Python to Me

Toda semana, o desenvolvedor Michael Kennedy explora o ecossistema Python e seus muitos aplicativos. Ao longo do caminho, ele entrevista entusiastas do Python de uma variedade de campos, incluindo:

• Desenvolvimento para a web
• Ciência de dados
• Aprendizado de máquina
• E o meio acadêmico

Com mais de 300 episódios para ouvir, o Talk Python To Me é uma ótima maneira de se expor a alguns dos pacotes mais poderosos do Python.

Navegue pelos episódios do podcast Talk Python To Me aqui.

O melhor podcast para desenvolvedores iniciantes na área: o podcast Code Newbie

Em setembro de 2014 – apenas um mês antes do lançamento do freeCodeCamp – Saron Yitbarek lançou o podcast Code Newbie. Lembro-me com carinho de ter ouvido os primeiros episódios enquanto fazia corridas noturnas por São Francisco após sessões de programação que duravam o dia inteiro. Havia uma eletricidade no ar enquanto eu a ouvia entrevistar desenvolvedores de software autodidatas, alguns dos quais eram ainda mais novos na área do que eu.

Saron, é claro, tornou-se basicamente o rosto do movimento aprender a programar. Ela criou a Codeland Developer Conference, o excelente podcast Command Line Heroes podcast. Porém, ela ainda grava novos episódios do Code Newbie, e eles são tão empolgantes quanto eram em 2014.

Ela já tem 261 episódios e não mostra sinais de estar diminuindo o ritmo. Se você se encontra no "deserto do desespero" ao aprender a programar e precisa de uma injeção de energia positiva, este é o podcast para você.

Navegue pelos episódios do Code Newbie Podcast aqui.

O melhor podcast sobre aprendizado de máquina: Practical AI

O aprendizado de máquina tem inúmeras aplicações promissoras em tudo, desde carros autônomos até diagnósticos médicos. Quanto disso, no entanto, é exagero e quanto disso vai realmente acontecer nas próximas décadas?

O podcast Practical AI se concentra em implementações reais de ferramentas de aprendizado de máquina. Ele é apresentado por profissionais experientes que sabem do que estão falando: o cientista de dados Daniel Whitenack e o engenheiro de software Chris Benson.

Em 120 episódios, Daniel e Chris entrevistam engenheiros que estão trabalhando com grandes conjuntos de dados – empresas de cartão de crédito, redes sociais e até mesmo governos. Eles o ajudam a analisar os mais recentes desenvolvimentos de aprendizado de máquina por meio de uma perspectiva mais prática.

Navegue pelos episódios de Practical AI aqui.

O podcast mais atencioso de desenvolvedores: Developer Tea

Nos últimos 5 anos, o diretor de engenharia da PBS (e piloto de avião treinado) Jonathan Cutrell compartilhou inúmeras dicas para desenvolvedores.

Muitos de seus 650 episódios são monólogos em que ele medita sobre um aspecto específico da experiência do desenvolvedor. Outros episódios são entrevistas íntimas com desenvolvedores que exploram temas de propósito e habilidade.

Este é um ótimo podcast para sessões de audição mais curtas, já que a maioria dos episódios tem apenas 15 ou 20 minutos de duração. Esses episódios o deixarão energizado e pronto para trabalhar com programação.

Navegue pelos episódios do Podcast Developer Tea aqui.

O melhor podcast para desenvolvedores de nível médio: o Ladybug Podcast

O Ladybug Podcast é apresentado por quatro desenvolvedoras proeminentes de diversas origens – algumas autodidatas e outras com diplomas em Ciências da Computação – trabalhando com uma variedade de conjuntos de tecnologia: Emma Bostian, Sidney Buckner, Ali Spittel e Kelly Vaughn.

Além de tópicos técnicos complexos, elas se concentram no crescimento da carreira, no desenvolvimento pessoal e até têm uma espécie de clube do livro, no qual todas leem o mesmo livro e o discutem.

Elas começaram o podcast em junho de 2019 e já publicaram mais de 65 episódios que você pode ouvir.

Navegue pelos episódios do Ladybug Podcast aqui.

O melhor podcast para UI/UX Design: O ShopTalk Podcast

Este é outro podcast de longa duração realizado por desenvolvedores famosos. Chris Coyier, criador do CSS Tricks e do CodePen, se junta ao desenvolvedor e prolífico podcaster Dave Rupert. Juntos, eles falam sobre design para a web:

• Acessibilidade
• Estéticas
• Desempenho
• Interação Humano-Computador
• E mergulhe nos mínimos detalhes

Em mais de 400 episódios, Chris e Dave exploram uma variedade de ferramentas antigas e novas. Tudo, desde o WordPress até o JAMstack.

Se você é um desenvolvedor que está começando a trabalhar com design – ou um designer que está começando a trabalhar com desenvolvimento – este é o podcast para você.

Navegue pelos episódios do ShopTalk Show aqui.

O melhor podcast voltado para a educação de desenvolvedores: The Hanselminutes Podcast

Este é, de longe, o podcast mais antigo desta lista. Sua origem remonta a 2006, antes mesmo de a maioria das pessoas ter ouvido o termo "podcast".

Scott Hanselman é um desenvolvedor e educador prolífico – principalmente em sua função de evangelista de desenvolvedores da Microsoft.

Em quase 800 episódios, Scott conversa com desenvolvedores de software de todas as áreas e de todos os cantos do mundo. Ele até incluiu transcrições completas de todos os seus episódios, para torná-los mais acessíveis a falantes não nativos do inglês.

Navegue pelos episódios do Podcast Hanselminutes aqui.

Os 3 Melhores podcasts para segurança cibernética (porque todos os três valem ouro)

Isso nos leva àquela que é, na minha humilde opinião, a área mais empolgante do podcasting de tecnologia: segurança da informação. O reino dos chapéus pretos, chapéus brancos e atores em nível estadual – todos competindo para ver quem pode hackear quem e quem pode defender melhor seus sistemas.

Melhor podcast de segurança cibernética nº 1: Cyberwire Daily

Ouvir o Cyberwire Daily é uma boa maneira de ficar por dentro dos tópicos emergentes e, ao mesmo tempo, aumentar seu conhecimento prévio sobre segurança.

Não sou especialista em segurança, mas a segurança é uma parte importante de minhas discussões diárias. Ela permeia quase todas as decisões que nossa organização sem fins lucrativos toma como equipe. Portanto, considero este podcast uma parte vital de minha educação continuada.

Há mais de 1.500 episódios anteriores do Cyberwire Daily para navegar. É um registro vivo de notícias sobre segurança cibernética que remonta a 2015.

Navegue pelos episódios do CyberWire Daily Podcast aqui.

Melhor podcast de segurança cibernética nº 2: Malicious Life

O Malicious Life é um podcast baseado em uma narrativa de um desenvolvedor misterioso com um sotaque legal que parece trabalhar para uma consultoria de segurança chamada Cybereason.

A cada episódio, o podcast conta uma história pouco conhecida por trás de hacks interessantes de toda a história da segurança cibernética. Até o momento, há mais de 110 episódios, o que é um catálogo bastante antigo para você absorver.

Navegue pelos episódios de Malicious Life aqui.

Melhor podcast de segurança cibernética nº 3: Darknet Diaries

Isso nos leva ao último podcast desta lista. Este talvez seja o podcast de tecnologia não noticioso mais popular do momento: Darknet Diaries.

Neste podcast, o anfitrião Jack Rhysider se concentra principalmente em criminosos capacitados pela tecnologia. Ele realmente atrai você com sua habilidade de contar histórias e produção de primeira linha.

Também digno de nota: Jack é bastante acessível em relação às métricas de seu podcast. Se estiver pensando em iniciar seu próprio podcast de tecnologia, não deixe de ler o relatório de avaliação de 2020 dele.

Quando descobri Darknet Diaries em 2017, imediatamente voltei e ouvi o catálogo inteiro durante uma viagem de carro. Se você acabar fazendo o mesmo, não deixe de me marcar no Twitter e me dizer qual é o seu episódio favorito.

Navegue pelos episódios de Darknet Diaries aqui.

Como eu ouço podcasts

Muitas pessoas me perguntam como eu ouço podcasts. Bem, chame-me de antiquado, mas eu uso apenas a aplicação de podcast padrão do meu iPhone. É gratuita, não há anúncios e não estou compartilhando meus dados com terceiros.

Ouço tudo em velocidade 2. Faço uso intenso do botão "pular 15 segundos para frente".

Uma área em que a aplicação de podcast da Apple deixa a desejar é seu mecanismo de busca. Portanto, para fazer a busca, uso uma ferramenta incrível de mecanismo de busca de podcast criada pelo colaborador do freeCodeCamp, Wenbin Fang, chamada ListenNotes.com. Ele é extremamente rápido e tem muitos recursos úteis, inclusive um conveniente player de podcast baseado em HTML5.

Gosto tanto do ListenNotes que, para este artigo, eu teria feito um link apenas para o ListenNotes. Essa é a qualidade da experiência do usuário.

Porém, eu não queria privar esses incríveis criadores de podcasts dos visitantes e dos backlinks rel="doFollow". Esses criadores de podcasts merecem toda a atenção que seus sites podem receber.

Outro fato interessante: Wenbin é um fanático por podcasts e criou algumas maneiras inovadoras de enfileirar podcasts e de ouvi-los em qualquer lugar. Se quiser se tornar um superusuário de podcasts como ele, experimente o método dele também (texto em inglês).

De minha parte, isso é tudo. Espero que você aprenda muito com esses podcasts e aproveite esses recursos de aprendizagem gratuitos para se tornar um desenvolvedor melhor. Boa programação.

Nota da tradução: o artigo a seguir foi escrito quando o React estava em sua versão 16.7.0. No momento da tradução, ele se encontra em sua versão 18.2.0 e houve muitas mudanças no comportamento dos componentes – em especial, com a questão de roteamento. Caso deseje realizar o processo tal e qual ele está neste artigo, sugerimos a instalação da versão 16.7.0 do React para seguir o passo a passo. Para isso, use o comando npm install react@16.7.0.

Você já se perguntou como as aplicações em tempo real são criadas? Já percebeu a importância e os casos de uso de aplicações em tempo real?

Se você está curioso sobre as perguntas acima e precisa de respostas, então este artigo é para você.

Primeiro, vamos identificar alguns casos de uso que precisam de aplicações em tempo real:

1. Obter atualizações de localização do seu táxi em um mapa de uma aplicação de reserva de táxi.
2. Receba novas mensagens instantaneamente em sua aplicação de bate-papo favorito.
3. Atualização de informações sobre pedidos de comida para a cozinha de seu restaurante favorito.

Todos esses são cenários comuns do nosso dia a dia, em que não podemos tolerar um atraso na atualização das informações e, portanto, precisamos de comunicação em tempo real.

Tecnologias que podem ser usadas para comunicação em tempo real são:

1. Short Polling: AJAX, cria tráfego intenso.
2. Long Polling: Igual ao AJAX, mas o servidor retém a resposta até que tenha uma atualização. Depois de recebê-la, o client envia outra solicitação e precisa que o cabeçalho adicional seja percorrido para frente e para trás, causando sobrecarga adicional.
3. Web Sockets: possibilitam a abertura de comunicação interativa entre o client e o servidor. É possível enviar uma solicitação para o servidor e receber respostas orientadas por eventos sem consultar o servidor para obter uma resposta, o que torna os Web Sockets a melhor opção para o nosso caso de uso.

Informações mais detalhadas sobre as três tecnologias acima podem ser lidas aqui (texto em inglês).

Vamos aprender a criar uma aplicação em tempo real, abordando o seguinte cenário: imagine que você está sentado em seu restaurante favorito e tem um menu digital. Você faz o pedido e a cozinha é atualizada sobre ele em tempo real. Quando a cozinha termina de fazer o pedido, ela também o atualiza em tempo real.

Características detalhadas:

1. Realizar o pedido: interface para selecionar a quantidade e fazer o pedido de um item alimentar selecionado para a cozinha.
2. Cozinha: interface que pode ser aberta em várias cozinhas e atualiza em tempo real os chefs e cozinheiros com relação ao total de pedidos criados e à quantidade prevista de itens alimentícios, dando a eles a flexibilidade de atualizá-los. Também possui uma funcionalidade para baixar o relatório na forma de uma planilha do Excel.
3. Mudança prevista: interface para atualizar a quantidade prevista de itens alimentares.

Para uma melhor compreensão, abra-o em diferentes abas/dispositivos ao mesmo tempo para ver a alteração dos dados em tempo real.

O código-fonte está aqui. Sinta-se à vontade para criar algo inovador/útil com base nele.

Então, vamos começar.

Stack de tecnologias:

Front-end: React.js, Reactstrap, Socket.io

Back-end: Node.js (Express), MongoDB, Socket.io

Estrutura de pastas:

/*
Vá para o diretório raiz no código-fonte e encontre os arquivos mencionados abaixo. Essa arquitetura ajuda a criar uma grande aplicação modular.
*/
backend-my-app/ /* Código do back-end da aplicação */
 server.js       /* O código do soquete e do back-end fica aqui*/
 build/      /* Opcional para a implementação da build do front-end */ 
 package.json /* Dependências do back-end */
 ...
public/
src/  /*      Código-fonte do front-end      */
 global/      /*   Componentes usados em todos os lugares   */
  header.css
  header.js     
 main/           
  Kitchen.js
  PlaceOrder.js
  UpdatePredicted.js
 App.js   /* Lógica de roteamento e parte de montagem dos componentes */
package.json /* Dependências do front-end */ 
 ............

Explicação do código-fonte:

Front-end:

git clone https://github.com/honey93/OrderKitchen.git
cd OrderKitchen
npm install
npm start

Pacotes utilizados:

1. Reactstrap: componentes do bootstrap 4 fáceis de usar.
2. Socket.io: o Socket.io é uma biblioteca que permite a comunicação em tempo real, bidirecional e baseada em eventos entre o navegador e o servidor.
3. react-html-table-to-excel: fornece uma geração de arquivos Excel (.xls) no lado do client a partir de um elemento de tabela HTML.
4. react-router-dom: vinculações do DOM para o React Router. Ele consiste em vários componentes importantes, como BrowserRouter, usado quando há um servidor para lidar com solicitações dinâmicas, Switch, Route etc.

Componente App

Caminho: src/App.js

Este componente contém a lógica de roteamento principal do front-end. Esse arquivo é usado em src/index.js dentro do módulo Browser Router. O código abaixo demonstra uma das abordagens para manter sua aplicação modular.

import React, { Component } from "react";
import "./App.css";
import { Header } from "./global/header";
import { Switch, Route } from "react-router-dom";
import PlaceOrder from "./main/PlaceOrder";
import UpdatePredicted from "./main/UpdatePredicted";
import Kitchen from "./main/Kitchen";
/*O componente <Route> é a parte principal do React Router. Em qualquer lugar em que você queira renderizar apenas o conteúdo com base no nome do caminho do local, você deve usar um elemento <Route>. */
/* O componente Route espera uma propriedade de caminho, que é uma cadeia de caracteres que descreve o nome do caminho ao qual a rota corresponde */
/* O <Switch> iterará as rotas e renderizará apenas a primeira que corresponder ao nome do caminho atual */
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/" component={PlaceOrder} />
          <Route path="/updatepredicted" component={UpdatePredicted} />
          <Route path="/kitchen" component={Kitchen} />
        </Switch>
      </div>
    );
  }
}
export default App;

Componente do cabeçalho

Caminho: src/global/header.js

Este componente será comum e usado em todas as seções, como Realizar Pedido (em inglês, Place Order), Mudança Prevista (em inglês, Change Predicted), Cozinha (em inglês, Kitchen). Essa abordagem ajuda a evitar a duplicação de código e mantém a aplicação modular.

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import socketIOClient from "socket.io-client";
import "./header.css";
// O cabeçalho cria links que podem ser usados para navegar
// entre as rotas.
var socket;
class Header extends Component {
/* Cria um client do Socket e o exporta no final para ser usado nos componentes Place Order, Kitchen etc. */
  constructor() {
    super();
    this.state = {
      endpoint: 'http://localhost:3001/'
    };
socket = socketIOClient(this.state.endpoint);
  }
render() {
    return (
      <header>
        <nav>
          <ul className="NavClass">
            <li>
              <NavLink exact to="/">
                Place Order
              </NavLink>
            </li>
            <li>
              <NavLink to="/updatepredicted">Change Predicted </NavLink>
            </li>
            <li>
              <NavLink to="/kitchen"> Kitchen </NavLink>
            </li  >
          </ul>
        </nav>
      </header>
    );
  }
}
export { Header, socket };

Componente da cozinha

Caminho: src/main/Kitchen.js

A lógica da UI da tela da Cozinha e o código html residem neste componente:

import React, { Component } from "react";
import { Button, Table, Container } from "reactstrap";
import { socket } from "../global/header";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
class Kitchen extends Component {
  constructor() {
    super();
    this.state = {
      food_data: []
      // é onde estamos nos conectando com os soquetes,
    };
  }
getData = foodItems => {
    console.log(foodItems);
    this.setState({ food_data: foodItems });
  };
changeData = () => socket.emit("initial_data");
/* Assim que o componente for montado, ou seja, no método componentDidMount, dispara o evento initial_data para obter os dados para inicializar o Kitchen Dashboard */
/* Adiciona o ouvinte change_data para ouvir todas as alterações feitas pelos componentes Fazer pedido e Pedido previsto */ 
componentDidMount() {
    var state_current = this;
    socket.emit("initial_data");
    socket.on("get_data", this.getData);
    socket.on("change_data", this.changeData);
  }

/* Remove o ouvinte antes de desmontar o componente para evitar a adição de vários ouvintes no momento da revisão */
componentWillUnmount() {
    socket.off("get_data");
    socket.off("change_data");
  }
/* Quando Done (Pronto) é clicado, essa função é chamada e o evento mark_done é emitido, o qual é ouvido no back-end, explicado mais adiante*/
markDone = id => {
    // console.log(predicted_details);
    socket.emit("mark_done", id);
  };
getFoodData() {
    return this.state.food_data.map(food => {
      return (
        <tr key={food._id}>
          <td> {food.name} </td>
          <td> {food.ordQty} </td>
          <td> {food.prodQty} </td>
          <td> {food.predQty} </td>
          <td>
            <button onClick={() => this.markDone(food._id)}>Done</button>
          </td>
        </tr>
      );
    });
  }
render() {
    return (
      <Container>
        <h2 className="h2Class">Kitchen Area</h2>
        <ReactHTMLTableToExcel
          id="test-table-xls-button"
          className="download-table-xls-button"
          table="table-to-xls"
          filename="tablexls"
          sheet="tablexls"
          buttonText="Download as XLS"
        />
<Table striped id="table-to-xls">
          <thead>
            <tr>
              <th>Name</th>
              <th>Quantity</th>
              <th>Created Till Now</th>
              <th>Predicted</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>{this.getFoodData()}</tbody>
        </Table>
      </Container>
    );
  }
}
export default Kitchen;

Componente Fazer Pedido

Caminho: src/main/PlaceOrder.js

import React, { Component } from "react";
import { Button, Table, Container } from "reactstrap";
import { socket } from "../global/header";
class PlaceOrder extends Component {
  constructor() {
    super();
    this.state = {
      food_data: []
      // é onde estamos nos conectando com os soquetes,
    };
  }
getData = foodItems => {
    console.log(foodItems);
    foodItems = foodItems.map(food => {
      food.order = 0;
return food;
    });
    this.setState({ food_data: foodItems });
  };
componentDidMount() {
    socket.emit("initial_data");
    var state_current = this;
    socket.on("get_data", state_current.getData);
  }
componentWillUnmount() {
    socket.off("get_data", this.getData);
  }
// Função para fazer o pedido.
sendOrder = id => {
    var order_details;
    this.state.food_data.map(food => {
      if (food._id == id) {
        order_details = food;
      }
      return food;
    });
    console.log(order_details);
    socket.emit("putOrder", order_details);
    var new_array = this.state.food_data.map(food => {
      food.order = 0;
      return food;
    });
    this.setState({ food_data: new_array });
  };
// Altera a quantidade no estado que é emitido para o back-end no momento da realização do pedido.
changeQuantity = (event, foodid) => {
    if (parseInt(event.target.value) < 0) {
      event.target.value = 0;
    }
    var new_array = this.state.food_data.map(food => {
      if (food._id == foodid) {
        food.order = parseInt(event.target.value);
      }
      return food;
    });
    this.setState({ food_data: new_array });
  };
// Obtém os dados iniciais
getFoodData() {
    return this.state.food_data.map(food => {
      return (
        <tr key={food._id}>
          <td> {food.name} </td>
          <td>
            <input
              onChange={e => this.changeQuantity(e, food._id)}
              value={food.order}
              type="number"
              placeholder="Quantity"
            />
          </td>
          <td>
            <button onClick={() => this.sendOrder(food._id)}>Order</button>
          </td>
        </tr>
      );
    });
  }
render() {
    return (
      <Container>
        <h2 className="h2Class">Order Menu</h2>
        <Table striped>
          <thead>
            <tr>
              <th>Product</th>
              <th>Quantity</th>
              <th>Order</th>
            </tr>
          </thead>
          <tbody>{this.getFoodData()}</tbody>
        </Table>
      </Container>
    );
  }
}
export default PlaceOrder;

Mais uma seção chamada Atualizar caminho previsto (em inglês, Update Predicted Path): src/main/UpdatePredicted.js, semelhante à seção acima, está no repositório de código.

Back-end

Iniciando o back-end:

cd backend-my-app
npm install
node server.js

Pacotes utilizados:

1. Monk: uma pequena camada que oferece melhorias simples, mas substanciais, na usabilidade do uso do MongoDB no Node.JS.
2. Socket.io: o Socket.io é uma biblioteca que permite a comunicação em tempo real, bidirecional e baseada em eventos entre o navegador e o servidor.

3. Express: estrutura da Web rápida e minimalista para o node.

Código principal

Caminho: backend-my-app/server.js

const express = require("express");
const http = require("http");
const socketIO = require("socket.io");
// Cadeia de conexão do banco de dados MongoDb hospedado no Mlab ou localmente
var connection_string = "**********";
// O nome da coleção deve ser "FoodItems", pois há apenas uma coleção no momento.
// O formato do documento deve ser o mencionado abaixo, pelo menos um desses documentos:
// {
//     "_id": {
//         "$oid": "5c0a1bdfe7179a6ca0844567"
//     },
//     "name": "Veg Roll",
//     "predQty": 100,
//     "prodQty": 295,
//     "ordQty": 1
// }
const db = require("monk")(connection_string);
const collection_foodItems = db.get("FoodItems");
// nossa porta do localhost
const port = process.env.PORT || 3000;
const app = express();
// nossa instância de servidor
const server = http.createServer(app);
// Isso cria nosso soquete usando a instância do servidor
const io = socketIO(server);
io.on("connection", socket => {
// console.log("New client connected" + socket.id);
// console.log(socket);
// Retornando os dados iniciais do menu de comida da coleção FoodItems
  socket.on("initial_data", () => {
    collection_foodItems.find({}).then(docs => {
      io.sockets.emit("get_data", docs);
    });
  });
// A realização do pedido é chamada em /src/main/PlaceOrder.js do Frontend
  socket.on("putOrder", order => {
    collection_foodItems
      .update({ _id: order._id }, { $inc: { ordQty: order.order } })
      .then(updatedDoc => {
        // Emissão de evento para atualizar a Cozinha aberta nos dispositivos com os valores do pedido em tempo real
        io.sockets.emit("change_data");
      });
  });
// Conclusão do pedido, chamada a partir de /src/main/Kitchen.js
  socket.on("mark_done", id => {
    collection_foodItems
      .update({ _id: id }, { $inc: { ordQty: -1, prodQty: 1 } })
      .then(updatedDoc => {
        // Atualizar as diferentes áreas da cozinha com o status atual.
        io.sockets.emit("change_data");
      });
  });

// Funcionalidade para alterar o valor da quantidade prevista, chamada de /src/main/UpdatePredicted.js
  socket.on("ChangePred", predicted_data => {
    collection_foodItems
      .update(
        { _id: predicted_data._id },
        { $set: { predQty: predicted_data.predQty } }
      )
      .then(updatedDoc => {
        // Evento de soquete para atualizar a quantidade prevista na cozinha
        io.sockets.emit("change_data");
      });
  });

// A desconexão é acionada quando um cliente deixa o servidor
  socket.on("disconnect", () => {
    console.log("user disconnected");
  });
});
/* As etapas mencionadas abaixo são executadas para retornar a compilação do Front-end do create-react-app da pasta de compilação do Back-end.*/
app.use(express.static("build"));
app.use("/kitchen", express.static("build"));
app.use("/updatepredicted", express.static("build"));
server.listen(port, () => console.log(`Listening on port ${port}`));

Banco de dados: MongoDB

Mlab: banco de dados como um serviço para o MongoDB

Nome da coleção: FoodItems

Formato do documento: é necessário pelo menos um documento na coleção FoodItems com o formato mencionado abaixo.

{
"name": "Veg Roll",  // Nome do alimento
"predQty": 100,  // Quantidade prevista
"prodQty": 295,  // Quantidade produzida
"ordQty": 1   // Quantidade total do pedido
}

Espero que você tenha entendido como criar uma aplicação modular em tempo real usando a pilha MERN. Se você achou útil, deixe uma estrela no repositório do GitHub do projeto e compartilhe com seus amigos também.

Nota da tradução: no momento desta tradução, a versão mais recente do Node é a versão 18.17.1. Se você quiser utilizar a versão mais recente do Node, substitua "12.18.1" sempre que aparecer em alguma instrução do texto por "18.17.1".

A versão mais recente do script "nvm-sh" é a 'v0.39.5'. Caso queira utilizar essa versão, substitua 'v0.35.3' pelo 'v0.39.5' no comando utilizado durante a instalação no Mac OS e Linux.

Antes de começar a criar aplicações incríveis com o NodeJS, você precisa instalá-lo. Felizmente, a instalação do NodeJS é muito simples.

Neste tutorial, abordaremos como instalar o NodeJS/NPM no

• macOS/Linux
• Windows

Depois de instalar o NodeJS/NPM, você pode facilmente fazer o upgrade/downgrade para qualquer versão do Node com um comando. O tutorial em vídeo a seguir mostra como fazer o download do NodeJS em sua máquina.

Guia de instalação para Mac OS e Linux

Abra um novo terminal. Digite o seguinte e pressione Enter:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Feche seu terminal, abra um novo e digite o seguinte:

nvm ls

Você verá algo parecido com isto:

system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)
nvm_list_aliases:36: no matches found: /Users/adeelimran/.nvm/alias/lts/*

Em seguida, em seu terminal, digite:

nvm install 12.18.1

Depois de instalado, ele estará pronta para ser usado. Para usar essa versão, basta digitar isto em seu terminal:

nvm use 12.18.1

Agora que ele está instalado, vamos verificá-lo fazendo o seguinte:

node --v

É isso! Você terminou. Divirta-se.

Agora, se no futuro, por algum motivo, você quiser desinstalar o NVM (do inglês, Node Version Manager), basta abrir o terminal e digitar o seguinte:

rm -rf $NVM_DIR ~/.npm ~/.bower

Guia de instalação para Windows

Primeiro, acesse a área de versões no repositório do nvm-windows https://github.com/coreybutler/nvm-windows/releases.

Em seguida, escolha o arquivo nvm-setup.zip e faça o download.

Depois que o arquivo for baixado, descompacte-o, clique no instalador e siga as etapas (estou usando o 7zip para extração de arquivos .zip, porque ele é GRATUITO).

Em seguida, para verificar se o nvm está instalado corretamente, abra um novo terminal de prompt de comando e digite nvm. Quando for verificado que ele está instalado, você poderá passar para a próxima etapa.

Instale o NodeJS usando o nvm desta maneira:

nvm install <numero_da_versao> // Vamos supor que seja a versão 12.18.1

A versão pode ser uma versão do NodeJS ou "latest" (para a versão mais recente e estável).

Para usar a versão específica do node que você acabou de instalar, basta digitar o seguinte no terminal:

nvm use 12.18.1;

Verifique a versão do node com node -v. Isso deve mostrar a versão 12.18.1 em seu terminal.

Se você quiser instalar outra versão do Node, repita as etapas com uma versão diferente.

Agora, você deve ter uma versão funcional do NodeJS em execução em sua máquina. Boa programação, pessoal. 🙂

Se você achou este guia útil, envie uma mensagem para o autor no Twitter.

Escrito por: Nikola Otasevic

Apesar de terem uma experiência significativa na criação de produtos de software, muitos engenheiros ficam nervosos com a ideia de passar por uma entrevista sobre programação com foco em algoritmos. Entrevistei centenas de engenheiros na Refdash, no Google e em startups das quais fiz parte. Algumas das perguntas mais comuns que deixam os engenheiros desconfortáveis são as que envolvem Programação Dinâmica (PD).

Muitas empresas de tecnologia gostam de fazer perguntas sobre PD em suas entrevistas. Embora possamos discutir se elas são eficazes para avaliar a capacidade de alguém para desempenhar uma função de engenheiro, a PD continua a ser uma área que atrapalha os engenheiros no caminho para encontrar um emprego que eles amam.

Programação Dinâmica – previsível e preparável

Um dos motivos pelos quais acredito que as perguntas sobre PD podem não ser a melhor maneira de se testar a capacidade de engenharia é o fato de serem previsíveis e fáceis de combinar com padrões. Elas nos permitem filtrar muito mais a preparação do que a capacidade de engenharia.

Essas perguntas normalmente parecem bastante complexas por fora e podem dar a impressão de que a pessoa que as resolve é muito boa em algoritmos. Da mesma forma, as pessoas que talvez não consigam superar alguns conceitos de PD que confundem a mente podem parecer muito fracas em seu conhecimento de algoritmos.

A realidade, porém, é diferente. O maior fator em seu desempenho é a preparação. Portanto, vamos nos certificar de que todos estejam preparados para elas de uma vez por todas.

7 etapas para resolver um problema de Programação Dinâmica

No restante deste artigo, examinarei uma receita que você pode seguir para descobrir se um problema é um "problema de PD", bem como para encontrar uma solução para esse problema. Especificamente, vou seguir as seguintes etapas:

1. Reconhecer um problema de PD
2. Identificar as variáveis do problema
3. Expressar claramente a relação de recorrência
4. Identificar os casos básicos
5. Decidir se você deseja implementá-lo de maneira iterativa ou recursiva
6. Adicionar memoização
7. Determinar a complexidade de tempo

Exemplo de problema de PD

Com o objetivo de ter um exemplo das abstrações que farei, vou apresentar um exemplo de problema. Em cada uma das seções, farei referência ao problema, mas você também pode ler as seções independentemente do problema.

Declaração do problema:

Neste problema, estamos em uma bola que salta loucamente e tentamos parar, evitando "estacas" que ficam no caminho.

As regras são:

1) Você recebe um caminho plana com várias estacas. O caminho é representado por um array de booleanos que indica se um determinado ponto (discreto) tem ou não tem uma estaca. O booleano diz True se não houver uma estaca e False se houver.

Exemplo de representação do array:

2) Você tem uma velocidade inicial S. S é um número inteiro não negativo em um determinado ponto e indica o quanto você avançará no próximo salto.

3) Sempre que aterrissar em um ponto, você poderá ajustar sua velocidade em até mais ou menos 1 unidade antes do próximo salto.

4) Você deseja parar com segurança em qualquer lugar do caminho (não precisa ser no final do array). Você para quando sua velocidade se torna 0. No entanto, se você parar em um estaca em qualquer ponto, sua bola saltitante maluca explode e o jogo acaba.

O resultado da função deve ser um booleano indicando se podemos parar com segurança em qualquer lugar do caminho.

Etapa 1: reconhecer um problema de Programação Dinâmica

Primeiro, vamos deixar claro que a PD é, essencialmente, apenas uma técnica de otimização. A PD é um método para resolver problemas, dividindo-os em um conjunto de subproblemas mais simples, resolvendo cada um desses subproblemas apenas uma vez e armazenando suas soluções. Na próxima vez em que o mesmo subproblema ocorrer, em vez de recalcular sua solução, basta consultar a solução calculada anteriormente. Isso economiza tempo de computação às custas de um gasto modesto (espera-se) em espaço de armazenamento.

Reconhecer que um problema pode ser resolvido com o uso da PD é a primeira etapa e, muitas vezes, a mais difícil para resolvê-lo. O que você deve perguntar a si mesmo é se a solução do seu problema pode ser expressa como uma função de soluções de pequenos problemas semelhantes.

No caso do nosso problema de exemplo, dado um ponto no caminho, uma velocidade e o caminho à frente, poderíamos determinar os pontos onde poderíamos saltar em seguida. Além disso, parece que o fato de podermos parar no ponto atual com a velocidade atual depende apenas do fato de podermos parar no ponto para o qual escolhemos ir em seguida.

Isso é ótimo porque, ao avançarmos, encurtamos o caminho e tornamos nosso problema menor. Devemos ser capazes de repetir esse processo até chegarmos a um ponto em que seja óbvio que podemos parar.

Reconhecer um problema de Programação Dinâmica geralmente é a etapa mais difícil para resolvê-lo. A solução do problema pode ser expressa como uma função de soluções de pequenos problemas semelhantes?

Etapa 2: identificar as variáveis do problema

Agora, estabelecemos que há alguma estrutura recursiva em nossos subproblemas. Em seguida, precisamos expressar o problema em termos dos parâmetros da função e ver quais desses parâmetros estão mudando.

Normalmente, nas entrevistas, você terá um ou dois parâmetros variáveis, mas, tecnicamente, pode ser qualquer número. Um exemplo clássico de um problema com um parâmetro variável é "determinar o n-ésimo número de Fibonacci". Um exemplo de problema de dois parâmetros variáveis é "Calcular a distância de edição entre strings". Se você não estiver familiarizado com esses problemas, não se preocupe.

Uma maneira de determinar o número de parâmetros variáveis é listar exemplos de vários subproblemas e comparar os parâmetros. A contagem do número de parâmetros variáveis é importante para determinar o número de subproblemas que temos de resolver. Ela também é importante por si só, pois nos ajuda a fortalecer a compreensão da relação de recorrência da etapa 1.

Em nosso exemplo, os dois parâmetros que podem mudar em cada subproblema são:

1. Posição no array (P)
2. Velocidade (S)

É possível dizer que o caminho à frente também está mudando, mas isso seria redundante, considerando que o caminho imutável inteiro e que a posição (P) já contêm essas informações.

Agora, com esses dois parâmetros variáveis e outros parâmetros estáticos, temos a descrição completa dos nossos subproblemas.

Identifique os parâmetros variáveis e determine o número de subproblemas.

Etapa 3: expressar claramente a relação de recorrência

Essa é uma etapa importante que muitos atravessam rapidamente para poderem começar a programar. Expressar a relação de recorrência do modo mais clara possível fortalecerá sua compreensão do problema e facilitará significativamente todo o resto.

Depois de descobrir que a relação de recorrência existe e especificar os problemas em termos de parâmetros, essa deve ser uma etapa natural. Como os problemas se relacionam entre si? Em outras palavras, vamos supor que você tenha calculado os subproblemas. Como você calcularia o problema principal?

Veja como pensamos sobre isso em nosso problema de exemplo:

Como você pode ajustar sua velocidade em até 1 antes de pular para a próxima posição, há apenas 3 velocidades possíveis e, portanto, 3 pontos que poderiam ser o próximo.

Em termos mais formais, se nossa velocidade for S, posição P, poderíamos ir de (S, P) para:

1. (S, P + S); # se não alterarmos a velocidade
2. (S — 1, P + S — 1); # se alterarmos a velocidade em -1
3. (S + 1, P + S + 1); # se alterarmos a velocidade em +1

Se conseguirmos encontrar uma maneira de parar em qualquer um dos subproblemas acima, também poderemos parar em (S, P). Isso ocorre porque podemos fazer a transição de (S, P) para qualquer uma das três opções acima.

Normalmente, esse é um bom nível de compreensão do problema (explicação em inglês simples), mas, às vezes, você também pode querer expressar a relação matematicamente. Vamos chamar uma função que estamos tentando calcular de canStop (possível de parar). Então:

canStop(S, P) = canStop(S, P + S) || canStop(S — 1, P + S — 1) || canStop(S + 1, P + S + 1)

Certo! Parece que temos nossa relação de recorrência!

Relação de recorrência: supondo que você tenha calculado os subproblemas, como você calcularia o problema principal?

Etapa 4: identificar os casos básicos

Um caso básico, ou de base, é um subproblema que não depende de nenhum outro subproblema. Para encontrar esses subproblemas, você normalmente quer experimentar alguns exemplos, ver como o problema se simplifica em subproblemas menores e identificar em que ponto ele não pode ser mais simplificado.

O motivo pelo qual um problema não pode ser simplificado ainda mais é que um dos parâmetros se tornaria um valor que não é possível, dadas as restrições do problema.

Em nosso problema de exemplo, temos dois parâmetros variáveis, S e P. Vamos pensar sobre quais valores possíveis de S e P podem não ser legais:

1. P deve estar dentro dos limites do caminho determinada
2. Não é possível que runway[P] (o ponto P no array runway) seja false, pois isso significaria que cairemos sobre uma estaca
3. S não pode ser negativo, e um S==0 indica que paramos

Às vezes, pode ser um pouco desafiador converter as afirmações que fazemos sobre os parâmetros em casos básicos de programação. Isso ocorre porque, além de listar as afirmações para que o código pareça conciso e não verifique condições desnecessárias, você também precisa pensar em quais dessas condições são possíveis.

No nosso exemplo:

1. P < 0 || P >= comprimento do caminho parece fazer sentido. Uma alternativa poderia ser considerar fazer de P == fim do caminho um caso básico. No entanto, é possível que um problema se divida em um subproblema que vá além do final do caminho. Portanto, precisamos realmente verificar a desigualdade.
2. Isso parece bastante óbvio. Podemos simplesmente verificar se runway[P] é false.
3. Semelhante ao caso número 1, poderíamos simplesmente verificar se S < 0 e S == 0. No entanto, aqui podemos raciocinar que é impossível que S seja < 0 porque S diminui em no máximo 1. Assim, teria que passar pelo caso S == 0 antes. Portanto, S == 0 é um caso base suficiente para o parâmetro S.

Etapa 5: decidir se você deseja implementá-lo de maneira iterativa ou recursiva

A maneira como falamos sobre as etapas até agora pode levá-lo a pensar que devemos implementar o problema de modo recursivo. No entanto, tudo o que falamos até agora é completamente indiferente ao fato de você decidir implementar o problema recursiva ou iterativamente. Em ambas as abordagens, você teria que determinar a relação de recorrência e os casos de base.

Para decidir se a opção é iterativa ou recursiva, você deve pensar cuidadosamente sobre as vantagens e desvantagens.

Os problemas de estouro de pilha (do inglês, stack overflow) costumam ser um obstáculo e um motivo pelo qual você não gostaria de ter recursão em um sistema de produção (back-end). No entanto, para fins de entrevista, contanto que você mencione as vantagens e desvantagens, normalmente não terá problemas com nenhuma das implementações. Você deve se sentir à vontade para implementar ambas.

Em nosso problema específico, implementei as duas versões. Aqui está o código em Python para isso:
Uma solução recursiva (os trechos de código originais podem ser encontrados aqui):

Uma solução iterativa: (os trechos de código originais podem ser encontrados aqui)

Etapa 6: adicionar memoização

Memoização é uma técnica que está intimamente associada à PD. Ela é usada para armazenar os resultados de chamadas de funções dispendiosas, retornando o resultado em cache quando as mesmas entradas ocorrerem novamente.

Por que estamos adicionando memoização à nossa recursão? Encontramos os mesmos subproblemas que, sem a memoização, são computados repetidamente. Essas repetições muitas vezes levam a complexidades de tempo exponenciais.

Em soluções recursivas, adicionar memoização deve ser simples. Vejamos por quê. Lembre-se de que a memoização é apenas um cache dos resultados da função. Há ocasiões em que você deseja se desviar dessa definição para conseguir algumas otimizações menores, mas tratar a memoização como um cache de resultados de funções é a maneira mais intuitiva de implementá-la.

Isso significa que você deve:

1. Armazenar o resultado da função na memória antes de cada declaração de retorno
2. Procurar na memória o resultado da função antes de começar a fazer qualquer outro cálculo

Abaixo vemos o código acima com a memoização adicionada. As linhas adicionadas estão destacadas (os trechos de código originais podem ser encontrados aqui):

Para ilustrar a eficácia da memoização e das diferentes abordagens, vamos fazer alguns testes rápidos. Farei um teste de estresse com os três métodos que vimos até agora. Aqui está a configuração:

1. Criei um caminho com 1000 metros de comprimento e estacas em locais aleatórios (optei por uma probabilidade de 20% de uma estaca estar em um determinado local)
2. initSpeed (velocidade inicial) = 30
3. Executei todas as funções 10 vezes e medi o tempo médio de execução

Aqui estão os resultados (em segundos):

Você pode ver que a abordagem recursiva pura leva cerca de 500 vezes mais tempo do que a abordagem iterativa e cerca de 1300 vezes mais tempo do que a abordagem recursiva com memoização. Observe que essa discrepância cresceria rapidamente com o comprimento do caminho. Eu o encorajo a tentar executar esse teste por conta própria.

Etapa 7: determinar a complexidade do tempo

Existem algumas regras simples que podem facilitar muito o cálculo da complexidade do tempo de um problema de programação dinâmica. Aqui estão duas etapas que você precisa seguir:

1. Contar o número de estados — isso dependerá do número de parâmetros variáveis em seu problema
2. Pense no trabalho realizado por cada estado. Em outras palavras, se tudo o mais, exceto um estado, tiver sido computado, quanto trabalho terá de ser feito para computar esse último estado?

Em nosso problema de exemplo, o número de estados é |P| * |S|, onde

• P é o conjunto de todas as posições (|P| indica o número de elementos em P)
• S é o conjunto de todas as velocidades

O trabalho realizado por cada estado é O(1) nesse problema porque, considerando todos os outros estados, basta examinar 3 subproblemas para determinar o estado resultante.

Como observamos no código anterior, |S| é limitado pelo comprimento do caminho. Portanto, poderíamos dizer que o número de estados é |P|² e, como o trabalho realizado por cada estado é O(1), a complexidade de tempo total é O(|P|²).

No entanto, parece que |S| pode ser ainda mais limitado, porque se fosse realmente |P|, é muito claro que não seria possível parar, porque você teria que saltar o comprimento de todo o caminho no primeiro movimento.

Então, vamos ver como podemos colocar um limite mais estreito em |S|. Vamos chamar a velocidade máxima de S. Suponha que estejamos partindo da posição 0. Com que rapidez poderíamos parar se estivéssemos tentando parar o mais rápido possível e se ignorássemos as estacas possíveis?

Na primeira iteração, teríamos de chegar pelo menos ao ponto (S-1), ajustando nossa velocidade em zero para -1. A partir daí, avançaríamos pelo menos (S-2) passos e assim por diante.

Para um caminho de comprimento L, o seguinte deve ser válido:

=> (S-1) + (S-2) + (S-3) + ….+ 1 < L

=> S*(S-1) / 2 < L

=> S² — S — 2L < 0

Se você encontrar as raízes da função acima, elas serão:

r1 = 1/2 + sqrt(1/4 + 2L) e r2 = 1/2 — sqrt(1/4 + 2L)

Podemos escrever nossa inequação como:

(S — r1) * (S — r2) <; 0

Considerando que S — r2 > 0 para qualquer S > 0 e L > 0, precisamos do seguinte:

S — 1/2 — sqrt(1/4 + 2L) <; 0

=> S < 1/2 + sqrt(1/4 + 2L)

Essa é a velocidade máxima que poderíamos ter em um caminho de comprimento L. Se tivéssemos uma velocidade maior do que essa, teoricamente, não poderíamos parar, independentemente da posição das estacas.

Isso significa que a complexidade total do tempo depende apenas do comprimento do caminho L, assim:

O(L * sqrt(L)) que é melhor do que O(L²)

O(L * sqrt(L)) é o limite superior da complexidade de tempo

Parabéns! Você conseguiu! :)

As 7 etapas que seguimos devem dar a você uma estrutura para resolver sistematicamente qualquer problema de programação dinâmica. Recomendo fortemente que você pratique essa metodologia em mais alguns problemas para aperfeiçoar sua técnica.

Aqui estão algumas das próximas etapas que você pode seguir

1. Amplie o problema de exemplo tentando encontrar um caminho para um ponto de parada. Resolvemos um problema que informa se você pode parar, mas e se você também quisesse saber as etapas a serem seguidas para parar eventualmente ao longo do caminho? Como você modificaria a implementação existente para fazer isso?
2. Se quiser solidificar sua compreensão da memoização e entender que ela é apenas um cache de resultados de uma função, leia sobre decorators em Python ou conceitos semelhantes em outras linguagens. Pense em como eles permitiriam que você implementasse a memoização em geral para qualquer função que queira memoizar.
3. Trabalhe em mais problemas de PD seguindo as etapas que fizemos. Você sempre pode encontrar vários deles on-line (por exemplo, no LeetCode ou no GeeksForGeeks). Ao praticar, lembre-se de uma coisa: aprenda ideias, não aprenda problemas. O número de ideias é significativamente menor e é um espaço mais fácil de conquistar, o que também será muito mais útil para você.

Quando achar que já superou essas ideias, confira o Refdash, onde você é entrevistado por um engenheiro sênior e recebe um feedback detalhado sobre sua programação, algoritmos e projeto de sistema.

Publicado originalmente no blog do Refdash. O Refdash é uma plataforma de entrevistas que ajuda os engenheiros a entrevistar anonimamente engenheiros experientes das principais empresas, como Google, Facebook ou Palantir, e obter um feedback detalhado. O Refdash também ajuda os engenheiros a descobrir oportunidades de trabalho incríveis com base em suas habilidades e interesses.

Restavam quinze minutos. Eu sabia que não conseguiria.

Passei dois meses estudando para minha primeira entrevista técnica.

Achei que estava preparada, mas, quando a entrevista estava chegando ao fim, percebi: eu não tinha a menor ideia de como resolver os problemas de programação.

Entre todos os tutoriais que vi quando estava aprendendo a programar, nenhum deles incluía uma abordagem para resolver problemas de programação.

Eu tinha que encontrar um método para resolver problemas – minha carreira como desenvolvedora dependia disso.

Imediatamente, comecei a pesquisar métodos. Encontrei um. De fato, o que descobri foi uma estratégia inestimável. Era um método em quatro etapas testado pelo tempo que, de algum modo, estava fora do radar no ecossistema de desenvolvedores.

Neste artigo, abordarei esse método de solução de problemas em quatro etapas que você pode usar para começar a resolver problemas de programação com confiança.

A solução de problemas de programação não é apenas parte do processo de entrevista de emprego para desenvolvedores – é o que um desenvolvedor faz o dia todo. Afinal de contas, escrever código é resolver problemas.

Um método para solucionar problemas

Esse método foi extraído do livro How to Solve It, de George Pólya. Ele foi lançado originalmente em 1945 e já vendeu mais de um milhão de cópias.

Seu método de solução de problemas tem sido usado e ensinado por muitos programadores, desde professores de ciência da computação (veja o curso Intro to CS, da Udacity, ministrado pelo professor David Evans) até professores modernos de desenvolvimento da Web, como Colt Steele.

Vamos solucionar um problema simples de programação usando o método de solução de problemas em quatro etapas. Isso nos permite ver o método em ação à medida que aprendemos. Usaremos JavaScript como nossa linguagem de escolha. O problema é o seguinte:

Crie uma função que some dois números e retorne esse valor.

Há quatro etapas no método de solução de problemas:

1. Compreender o problema.
2. Elaborar um plano.
3. Executar o plano.
4. Olhar para trás.

Vamos começar com a primeira etapa.

Etapa 1: entender o problema

Ao receber um problema de codificação em uma entrevista, é tentador se apressar em programar. Isso é difícil de evitar, especialmente se você tiver um limite de tempo.

Entretanto, tente resistir a esse impulso. Certifique-se de que você realmente entendeu o problema antes de começar a resolvê-lo.

Leia o problema. Se estiver em uma entrevista, você pode ler o problema em voz alta, se isso o ajudar a se acalmar.

Ao ler o problema, esclareça qualquer parte dele que você não tenha entendido. Se estiver em uma entrevista, você pode fazer isso perguntando ao entrevistador sobre a descrição do problema. Se estiver sozinho, pense e/ou pesquise no Google partes da pergunta que talvez não tenha compreendido.

Essa primeira etapa é fundamental, pois, muitas vezes, não dedicamos tempo para entender completamente o problema. Se você não entender completamente o problema, será muito mais difícil resolvê-lo.

Para ajudá-lo a entender melhor o problema, pergunte a si mesmo:

Quais são as entradas?

Que tipos de entradas serão usadas nesse problema? Neste exemplo, as entradas são os argumentos que nossa função receberá.

Só de ler a descrição do problema até agora, sabemos que as entradas serão números. Porém, para sermos mais específicos sobre quais serão as entradas, podemos perguntar:

"As entradas serão sempre apenas dois números? O que deve acontecer se nossa função receber como entrada três números?"

Aqui, poderíamos pedir esclarecimentos ao entrevistador ou analisar melhor a descrição do problema.

O problema de progamação pode ter uma nota dizendo: "Você só deve esperar duas entradas para a função". Se for esse o caso, você sabe como proceder. Você pode ser mais específico, pois, provavelmente, perceberá que precisa fazer mais perguntas sobre os tipos de entradas que pode estar recebendo.

As entradas serão sempre números? O que a nossa função deve fazer se recebermos as entradas "a" e "b"? Esclareça se nossa função sempre receberá números ou não.

Opcionalmente, você pode anotar as possíveis entradas em um comentário de código para ter uma ideia de como elas serão:

//entradas: 2, 4

Depois, pergunte:

Quais são as saídas?

O que essa função retornará? Nesse caso, a saída será um número que é o resultado das duas entradas de números. Certifique-se de entender quais serão seus resultados.

Crie exemplos.

Depois de entender o problema e conhecer as possíveis entradas e saídas, você pode começar a trabalhar em alguns exemplos concretos.

Os exemplos também podem ser usados como verificações de integridade para testar seu eventual problema. A maioria dos editores de desafios de código em que você trabalhará (seja em uma entrevista ou apenas usando um site como o Codewars ou o HackerRank) tem exemplos ou casos de teste já escritos para você. Mesmo assim, escrever seus próprios exemplos pode ajudá-lo a consolidar sua compreensão do problema.

Comece com um ou dois exemplos simples de possíveis entradas e saídas. Vamos voltar à nossa função de adição.

Vamos chamar nossa função de "add" (em português, adicionar ou somar).

O que é um exemplo de entrada? Um exemplo de entrada pode ser:

// add(2, 3)

Qual é a saída para isso? Para escrever o exemplo de saída, podemos escrever:

// add(2, 3) ---> 5

Isso indica que nossa função receberá uma entrada de 2 e 3 e retornará 5 como saída.

Crie exemplos complexos.

Ao analisar exemplos mais complexos, você pode reservar um tempo para procurar casos extremos que talvez precisem ser considerados.

Por exemplo, o que devemos fazer se nossas entradas forem strings em vez de números? Se tivermos como entrada duas strings, por exemplo, add('a', 'b'), como proceder?

Seu entrevistador talvez diga para retornar uma mensagem de erro se houver entradas que não sejam números. Nesse caso, você pode adicionar um comentário de código para lidar com a questão, se ajudar a lembrar que isso é algo necessário.

// retornar erro se as entradas não forem números.

Seu entrevistador também pode dizer a você para presumir que suas entradas serão sempre números e, nesse caso, você não precisará escrever nenhum código adicional para lidar com esse caso extremo de entrada específico.

Se você não tem um entrevistador e está apenas resolvendo esse problema, o problema pode dizer o que acontece quando você insere dados inválidos.

Por exemplo, alguns problemas dirão: "Se houver zero entradas, retorne indefinido". Para casos como esse, você pode, opcionalmente, escrever um comentário.

// Verifique se não há entradas.

// Se não houver entradas, retorne indefinido.

Para nossos propósitos, assumiremos que nossas entradas serão sempre números. Porém, em geral, é bom pensar em casos extremos.

O professor de ciência da computação David Evans recomenda escrever o que os desenvolvedores chamam de código defensivo. Pense no que poderia dar errado e em como seu código poderia se defender contra possíveis erros.

Antes de passarmos para a etapa 2, vamos resumir a etapa 1: entender o problema:

- Leia o problema.

- Quais são as entradas?

- Quais são as saídas?

- Crie exemplos simples. Em seguida, crie exemplos mais complexos.

Etapa 2: elaborar um plano para solucionar o problema

Em seguida, elabore um plano de como resolverá o problema. Ao elaborar um plano, escreva-o em pseudocódigo.

Pseudocódigo é uma descrição em linguagem simples das etapas de um algoritmo. Em outras palavras, o pseudocódigo é o plano passo a passo de como resolver o problema.

Escreva as etapas que você precisa seguir para resolver o problema. Para um problema mais complicado, você teria mais etapas. Para esse problema, você poderia escrever:

// Crie uma variável de soma.

// Adicione a primeira entrada à segunda entrada usando o operador de adição.

// Armazene o valor de ambas as entradas na variável de soma.

// Retorne como saída a variável de soma.

Agora, você tem seu plano passo a passo para resolver o problema.

Para problemas mais complexos, o professor Evans observa: "Considere sistematicamente como um ser humano resolve o problema". Ou seja, esqueça por um momento como seu código pode resolver o problema e pense em como você o resolveria como um ser humano. Isso pode ajudá-lo a ver as etapas com mais clareza.

Etapa 3: executar o plano (resolver o problema)

A próxima etapa da estratégia de solução de problemas é resolver o problema. Usando seu pseudocódigo como guia, escreva seu código real.

O professor Evans sugere que você se concentre em uma solução simples e mecânica. Quanto mais fácil e simples for a solução, maior a probabilidade de você programá-la corretamente.

Usando nosso pseudocódigo, poderíamos escrever o seguinte:

function add(a, b) {
 const sum = a + b;
 return sum;
}

O professor Evans acrescenta: lembre-se de não otimizar prematuramente. Ou seja, você pode ficar tentado a começar a dizer: "Espere, estou fazendo isso e o código será ineficiente!"

Primeiro, pegue sua solução simples e mecânica.

Se você não conseguir resolver todo o problema, o que fazer? Caso haja uma parte dele que você ainda não sabe como resolver, como proceder?

Colt Steele dá um ótimo conselho aqui: se você não conseguir resolver parte do problema, ignore a parte difícil que está atrapalhando. Em vez disso, concentre-se em tudo o mais que você pode começar a escrever.

Ignore temporariamente a parte difícil do problema que você não está entendendo bem e escreva as outras partes. Depois de fazer isso, volte à parte mais difícil.

Isso permite que você termine pelo menos uma parte do problema. Muitas vezes, você perceberá como lidar com a parte mais difícil do problema quando voltar a ela.

Etapa 4: analisar o que você fez

Quando sua solução estiver funcionando, reserve um tempo para refletir sobre ela e descobrir como fazer melhorias. Esse pode ser o momento de refatorar sua solução para torná-la mais eficiente.

Ao analisar seu trabalho, aqui estão algumas perguntas que Colt Steele sugere que você faça a si mesmo para descobrir como pode melhorar sua solução:

• Você pode obter o resultado de modo diferente? Que outras abordagens são viáveis?
• Você consegue entendê-lo em uma olhada rápida? Faz sentido?
• Você pode usar o resultado ou o método em outro problema?
• Você pode melhorar o desempenho de sua solução?
• Você consegue pensar em outras maneiras de refatorar?
• Como outras pessoas resolveram esse problema?

Uma maneira de refatorar nosso problema para tornar nosso código mais conciso é remover nossa variável e usar um retorno implícito:

function add(a, b) {
 return a + b;
}

Com a etapa 4, seu problema pode nunca parecer concluído. Até mesmo os grandes desenvolvedores ainda escrevem códigos que, mais tarde, olham e querem mudar. Essas são perguntas de orientação que podem ajudá-lo.

Se ainda tiver tempo em uma entrevista, você pode passar por essa etapa e melhorar sua solução. Se estiver programando por conta própria, reserve um tempo para revisar essas etapas.

Quando estou praticando programar por minha conta, quase sempre observo as soluções existentes que são mais elegantes ou eficazes do que as que eu criei.

Conclusão

Neste artigo, examinamos a estratégia de solução de problemas em quatro etapas para resolver problemas de programação.

Vamos analisá-las aqui:

• Etapa 1: entender o problema
• Etapa 2: criar um plano passo a passo de como você resolverá o problema
• Etapa 3: executar o plano e escrever o código real
• Etapa 4: analisar o que foi feito e, possivelmente, refatorar sua solução se ela puder ser melhor.

Praticar esse método de resolução de problemas me ajudou imensamente em minhas entrevistas técnicas e em meu trabalho como desenvolvedora.

Se você não se sentir confiante quando se trata de resolver problemas de programação, lembre-se de que a solução de problemas é uma habilidade que qualquer pessoa pode aprimorar com o tempo e a prática.

Boa sorte!

Se você gostou deste artigo, participe do clube de programação da autora, onde os participantes enfrentam desafios de programação juntos todos os domingos e apoiam uns aos outros à medida que aprendem novas tecnologias.

Se você tiver comentários ou perguntas sobre esta publicação, sinta-se à vontade para enviar um tweet para a autora.

Esta é uma pergunta muito comum entre os novos desenvolvedores do React. É uma pergunta que eu tinha quando estava começando com o React e o Node.js. Neste breve exemplo, mostrarei como fazer com que o create-react-app funcione com o back-end com o Node.js e o Express.

create-react-app

Crie um projeto usando create-react-app.

npx create-react-app example-create-react-app-express

Crie um diretório /client no diretório example-create-react-app-express e mova todo o código boilerplate do React criado pelo create-react-app para esse novo diretório client.

cd example-create-react-app-express
mkdir client

O servidor com Node e Express

Crie um arquivo package.json dentro do diretório raiz (example-create-react-app-express) e copie o seguinte conteúdo:

{
  "name": "example-create-react-app-express",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

Observe que estou usando concurrently para executar a aplicação do React e o servidor ao mesmo tempo. O marcador –kill-others-on-fail eliminará outros processos se um deles for encerrado com um código de status diferente de zero.

Instale o nodemon globalmente e as dependências do servidor:

npm i nodemon -g
yarn

Crie um arquivo server.js e copie o seguinte conteúdo:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

app.listen(port, () => console.log(`Listening on port ${port}`));

Este é um servidor Express simples que será executado na porta 5000 e terá duas rotas de API: GET - /api/hello e POST -/api/world.

Nesse ponto, você pode executar o servidor Express com o seguinte comando (ainda dentro do diretório raiz):

node server.js

Agora, navegue até http://localhost:5000/api/hello e você verá o seguinte:

Vamos testar a rota POST quando criarmos a aplicação em React.

A aplicação em React

Agora, vá para o diretório do client onde está a nossa aplicação em React.

Adicione a seguinte linha ao arquivo package.json criado pelo create-react-app.

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

A chave para usar um servidor de back-end do Express com um projeto criado com create-react-app é usar um proxy. Isso informa ao servidor de desenvolvimento do webpack para fazer proxy das nossas solicitações de API para o nosso servidor de API, já que o nosso servidor do Express está sendo executado em localhost:5000.

Agora, modifique o ./client/src/App.js para chamar o back-end da API Express. As alterações estão em negrito.

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {
  state = {
    response: '',
    post: '',
    responseToPost: '',
  };
  
  componentDidMount() {
    this.callApi()
      .then(res => this.setState({ response: res.express }))
      .catch(err => console.log(err));
  }
  
  callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);
    
    return body;
  };
  
  handleSubmit = async e => {
    e.preventDefault();
    const response = await fetch('/api/world', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();
    
    this.setState({ responseToPost: body });
  };
  
render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <p>{this.state.response}</p>
        <form onSubmit={this.handleSubmit}>
          <p>
            <strong>Post to Server:</strong>
          </p>
          <input
            type="text"
            value={this.state.post}
            onChange={e => this.setState({ post: e.target.value })}
          />
          <button type="submit">Submit</button>
        </form>
        <p>{this.state.responseToPost}</p>
      </div>
    );
  }
}

export default App;

Criamos o método callApi para interagir com o caminho do GET da API do Express. Depois, chamamos esse método em componentDidMount e, por fim, definimos o estado para a resposta da API, que será "Hello From Express".

Observe que não usamos um URL totalmente qualificado http://localhost:5000/api/hello para chamar nossa API, mesmo que nossa aplicação do React seja executada em uma porta diferente (3000). Isso se deve à linha do proxy que adicionamos ao arquivo package.json anteriormente.

Temos um formulário com uma única entrada. Quando enviado, chama handleSubmit, que, por sua vez, chama o caminho POST do Express API, salva a resposta no estado e exibe uma mensagem para o usuário: I received your POST request. This is what you sent me: [message from input].

Agora, abra o arquivo ./client/src/App.css e modifique a classe .App-header da seguinte forma (alterações em negrito)

.App-header {
...
  min-height: 50%;
...
  padding-bottom: 10px;
}

Executando a aplicação

Se o servidor ainda estiver em execução, interrompa-o pressionando Ctrl+C no terminal.

No diretório raiz do projeto, execute o seguinte:

yarn dev

Isso iniciará a aplicação do React e executará o servidor ao mesmo tempo.

Agora, navegue até http://localhost:3000 e você verá a aplicação do React exibindo a mensagem proveniente do nosso caminho GET do Express. Legal!

Agora, digite algo no campo de entrada e envie o formulário. Você verá a resposta do caminho POST do Express exibida logo abaixo do campo de entrada.

Por fim, dê uma olhada no seu terminal e verá a mensagem que enviamos do client, porque chamamos console.log no corpo da solicitação no caminho POST Express.

Implementação de produção no Heroku

Abra o server.js e substitua pelo conteúdo a seguir:

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// API calls
app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')));
    
  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

app.listen(port, () => console.log(`Listening on port ${port}`));

Abra o arquivo ./package.json e adicione o seguinte à entrada de scripts

"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

O Heroku executará o script start por padrão e isso servirá à nossa aplicação. Em seguida, queremos instruir o Heroku a criar nossa aplicação do client. Fazemos isso com o script heroku-postbuild.

Agora, vá até o Heroku (em inglês) e faça login (ou abra uma conta, se ainda não tiver uma).

Crie uma aplicação e dê um nome a ela.

Clique na aba Deploy e siga as instruções de implantação (que eu acho que são bastante autoexplicativas, não há motivo para repeti-las aqui).

É isso! Você pode abrir sua aplicação clicando no botão Open app, no canto superior direito do painel do Heroku da sua aplicação.

Outras opções de implementação

Escrevo sobre outras opções de implementação aqui:

• Netlify (em inglês)
• Now (em inglês)
• Heroku (explicação mais detalhada - em inglês)

Estrutura do projeto

Esta será a estrutura final do projeto:

Acesse o código completo no repositório do GitHub.

Obrigado pela leitura! Espero que você tenha gostado.

Você pode seguir o autor no Twitter, GitHub, Medium, LinkedIn ou em todos eles.

Esta postagem foi publicada originalmente no blog pessoal do autor.

Atualização em 25/08/19: o autor estava em processo de desenvolver uma aplicação para web de orações, chamada "My Quiet Time - A Prayer Journal". Para ver algumas capturas de tela de modelos, acesse o link a seguir: http://pc.cd/Lpy7. Se quiser saber mais sobre a aplicação, o autor deixou disponível o endereço no Twitter para dúvidas sobre a aplicação.

Uma observação breve – este artigo é sobre a teoria de como quebrar senhas. Entender como os criminosos cibernéticos executam ataques é extremamente importante para entender como proteger sistemas contra esses tipos de ataques.

A tentativa de invadir um sistema que você não possui é provavelmente ilegal em sua jurisdição (além disso, invadir seus próprios sistemas pode violar – e, muitas vezes, viola – qualquer garantia para aquele produto).

Vamos começar com o básico. O que é um ataque de força bruta?

Este tipo de ataque envolve tentativas repetidas de entrar como usuário, tentando cada combinação possível de letras, números e caracteres (usando ferramentas automatizadas).

Isto pode ser feito tanto on-line (assim, em tempo real, tentando continuamente diferentes combinações de nome de usuário/senha em contas como redes sociais ou sites bancários) ou off-line (por exemplo, se você obteve um conjunto de senhas hashed e está tentando decifrá-las off-line).

A abordagem off-line nem sempre é possível (pode ser difícil obter um conjunto de senhas hashed), mas é muito menos barulhento. Isto porque uma equipe de segurança provavelmente notará o excesso de tentativas de acesso fracassadas na mesma conta, mas, se você conseguir quebrar a senha off-line, não terá um registro de tentativas de acesso fracassadas.

Isto é relativamente fácil com uma senha curta. Torna-se exponencialmente mais difícil com uma senha mais longa, devido ao grande número de possibilidades.

Por exemplo, se você souber que alguém está usando uma senha de 5 caracteres, composta apenas de letras minúsculas, o número total de senhas possíveis é 26^5 (26 possíveis escolhas para a primeira letra, 26 possíveis escolhas para a segunda letra etc.) ou 11.881.376 combinações possíveis.

Porém, se alguém estiver usando uma senha de 11 caracteres, apenas de letras minúsculas, o número total de senhas possíveis é 26 ^11, ou 3.670.344.486.987.776 de possíveis senhas.

Quando você adiciona letras maiúsculas, caracteres especiais e números, isto se torna ainda mais difícil e consome muito mais tempo para descobrir. Quanto mais senhas possíveis houver, mais difícil é para alguém conseguir entrar com sucesso com um ataque de força bruta.

Como se proteger

Este tipo de ataque pode ser evitado de duas maneiras diferentes. Primeiro, você pode usar senhas suficientemente longas e complexas (pelo menos 15 caracteres). Você também pode usar senhas únicas para cada conta (use um gerenciador de senhas!) para reduzir o perigo de violação de dados.

Uma equipe de segurança pode bloquear uma conta após um certo número de tentativas de acesso fracassadas. Eles também podem forçar um método secundário de verificação, como o Captcha, ou usar autenticação em 2 fatores (2FA), que requer um segundo código (por SMS ou e-mail, com base em aplicativos ou chaves de hardware).

Aqui está um artigo (em inglês) sobre como executar um ataque com força bruta.

Como você pode decifrar senhas mais rapidamente?

Um ataque de dicionário envolve a tentativa de entrar repetidamente, tentando várias combinações incluídas em um "dicionário" predefinido, ou lista de combinações.

Isto geralmente é mais rápido que um ataque de força bruta porque as combinações de letras e números já foram computadorizadas, economizando tempo e poder de processamento.

Porém, se a senha for suficientemente complexa (por exemplo, 1098324ukjbfnsdfsnej) e não aparecer no "dicionário" (a lista predefinida de combinações com as quais você está trabalhando), o ataque não vai funcionar.

É frequentemente bem-sucedido porque, muitas vezes, quando as pessoas escolhem senhas, elas escolhem palavras comuns ou variações dessas palavras (por exemplo, "password" ou "p@SSword").

Um hacker também pode usar este tipo de ataque quando sabe ou adivinha uma parte da senha (por exemplo, o nome de um cão, os aniversários de crianças, ou um aniversário - informações que um hacker pode encontrar em páginas de redes sociais ou outros recursos de código aberto).

Medidas de proteção similares às descritas acima contra ataques por força bruta podem impedir que estes tipos de ataques sejam bem sucedidos.

O que você pode fazer se já tiver uma lista de senhas hashed?

As senhas são armazenadas no arquivo /etc/shadow para Linux e C:\Windows\System32\config para Windows (que não estão disponíveis enquanto o sistema operacional é inicializado).

Se você conseguiu obter este arquivo, ou se obteve um hash de senha de uma maneira diferente, com sniffing do tráfego da rede, pode tentar quebrar a senha "off-line".

Enquanto os ataques acima requerem tentativas repetidas de acesso, se você tiver uma lista de senhas hashed, pode tentar quebrá-las em sua máquina, sem desencadear alertas gerados por repetidas tentativas de acesso fracassadas. Então, você só tentará fazer o acesso uma vez, depois de ter quebrado a senha com sucesso (e, portanto, não haverá nenhuma tentativa de acesso fracassada).

Você pode usar ataques de força bruta ou ataques de dicionário contra os arquivos de hash, podendo ter sucesso dependendo da força do hash.

Espere aí – o que é hashing?

35D4FFEF6EF231D998C6046764BB935D

Reconhece essa mensagem? Ela diz: "Hi my name is megan"

7DBDA24A2D10DAF98F23B95CFAF1D3AB

Este é o primeiro parágrafo deste artigo. Sim, parece um absurdo, mas na verdade é um hash.

Uma função hash permite que um computador insira uma string (alguma combinação de letras, números e símbolos), pegue essa string, misture-a e produza uma string de comprimento fixo. É por isso que ambas as strings acima são do mesmo tamanho, mesmo que as entradas das strings fossem de tamanhos muito diferentes.

Os hashes podem ser criados a partir de praticamente qualquer conteúdo digital. Basicamente, todo o conteúdo digital pode ser reduzido a binário, ou a uma série de 0s e 1s. Portanto, todo o conteúdo digital (imagens, documentos etc.) pode ser transformado em hashes.

Há muitas funções de hashing diferentes, algumas mais seguras do que outras. Os hashes acima foram gerados em MD5 (MD significa "Message Digest"). Diferentes funções também diferem no tamanho do hash que produzem.

O mesmo conteúdo na mesma função de hash produzirá sempre o mesmo hash. Entretanto, mesmo uma pequena mudança alterará completamente o hash. Por exemplo, o hash:

2FF5E24F6735B7564CAE7020B41C80F1

É o hash para "Hi my name is Megan". Colocar o M em Megan em letra maiúscula mudou completamente o hash acima.

Os hashes também são funções unidirecionais (o que significa que não podem ser revertidos). Isto significa que os hashes (únicos e unidirecionais) podem ser usados como um tipo de impressão digital para o conteúdo.

Qual o exemplo de como os hashes são usados?

Hashes podem ser usados como verificação de que uma mensagem que não tenha sido alterada.

Quando você envia um e-mail, por exemplo, você poderá fazer um hash de todo o e-mail e enviá-lo. Então, o destinatário pode executar a mensagem recebida através da mesma função de hash para verificar se a mensagem foi alterada durante o envio. Se os dois hashes corresponderem, a mensagem não foi alterada. Se não corresponderem, a mensagem foi alterada.

Além disso, as senhas geralmente são utilizadas em hash quando são armazenadas. Quando um usuário digita sua senha, o computador calcula o valor do hash e o compara com o valor do hash armazenado. Desse modo, o computador não armazena as senhas em texto claro (assim, alguns hackers bisbilhoteiros não podem roubá-las).

Se alguém é capaz de roubar o arquivo de senha, os dados são inúteis porque a função não pode ser revertida (embora existam maneiras, como tabelas arco-íris, de descobrir que o texto simples cria um hash conhecido).

Qual é o problema dos hashes?

Se um hash pode obter dados de qualquer comprimento ou conteúdo, há possibilidades ilimitadas de dados que podem ser tratados com hash.

Como um hash converte o texto em um conteúdo de comprimento fixo (por exemplo, 32 caracteres), há um número finito de combinações de um hash. Trata-se de um número muito grande de possibilidades, mas não infinito.

Eventualmente, dois conjuntos diferentes de dados produzirão o mesmo valor de hash. Isto é chamado de colisão.

Se você tiver um hash e estiver tentando passar por cada um dos valores possíveis de texto sem formatação para encontrar o texto sem formatação que corresponda ao seu hash, será um processo muito longo, muito difícil.

É possível que você não se importe que dois hashes colidam

Isto é chamado de "paradoxo do aniversário" em matemática. Em uma turma de 23 alunos, a probabilidade de alguém ter um aniversário em um dia específico é de cerca de 7%, mas a probabilidade de duas pessoas compartilharem o mesmo aniversário é de cerca de 50%.

O mesmo tipo de análise pode ser aplicado às funções de hash para encontrar quaisquer dois hashes que combinem (ao invés de um hash específico que combine com o outro).

Para evitar isto, você pode usar funções de hash mais longas, como a SHA3, onde a possibilidade de colisões é menor.

Você pode tentar gerar suas próprias funções de hash para SHA3 aqui e para MD5 aqui.

Você pode tentar fazer hashes de força bruta, mas isso leva muito tempo. A maneira mais rápida de se fazer isso é usando tabelas arco-íris (texto em inglês) – elas são semelhantes a ataques de dicionário.

Parece realmente fácil de ser invadido. Devo ficar preocupado?

O mais importante a lembrar sobre o hacking é que ninguém quer fazer mais trabalho do que aquilo que tem que fazer. Por exemplo, os hashes de força bruta podem ser extremamente demorados e difíceis. Se houver uma maneira mais fácil de obter sua senha, provavelmente é isso que uma pessoa mal-intencionada tentará primeiro.

Isso significa que possibilitar as melhores práticas básicas de segurança cibernética é provavelmente a maneira mais fácil de evitar ser invadido. De fato, a Microsoft relatou recentemente (texto em inglês) que apenas habilitar o 2FA acabará bloqueando 99,9% dos ataques automatizados.

Leitura adicional (em inglês):

10 most popular password cracking tools

Todos os dias, os desenvolvedores usam várias aplicações e executam comandos no terminal. Essas aplicações podem incluir um navegador, editor de código, terminal, aplicação de videochamada ou reprodutor de música.

Para cada uma dessas aplicações de software que você abre ou comando que executa, ele cria um processo ou tarefa.

Uma bela característica do sistema operacional Linux e dos computadores modernos em geral é que eles fornecem suporte para multitarefas. Assim, vários programas podem ser executados simultaneamente.

Você já se perguntou como você pode verificar todos os programas em execução na sua máquina? Se já fez isso, este artigo é para você, pois vou mostrar aqui como listar, gerenciar e eliminar todos os processos em execução em sua máquina Linux.

Pré-requisitos

• Uma distro Linux instalada.
• Conhecimento básico em navegação pela linha de comando.
• Um sorriso no rosto 😀

Uma introdução rápida aos processos no Linux

Um processo é uma instância de um programa de computador em execução que você pode encontrar em um programa de software ou comando.

Por exemplo, se você abrir o editor do Visual Studio Code, isso criará um processo que somente será finalizado uma vez que você termine ou feche o Visual Studio Code.

Da mesma forma, quando você executa um comando no terminal (tipo curl ifconfig.me), ele cria um processo que só vai parar quando o comando terminar de executar ou for finalizado.

Como listar os processos em execução no Linux com o comando ps

Você pode listar os processos em execução usando o comando ps (ps significa process status). O comando ps exibe seus processos em execução no momento e em tempo real.

Para testar isso, basta abrir o terminal e executar o comando ps, assim:

Isto mostrará o processo que está em execução em quatro colunas:

• PID retorna o ID exclusivo do processo
• TTY retorna o tipo de terminal em que você está logado
• TIME retorna a quantidade total de uso da CPU
• CMD retorna o nome do comando que iniciou o processo.

Você pode escolher exibir um determinado conjunto de processos usando qualquer combinação das opções (como -A -a, -C, -c, -d, -E, -e, -u, -X, -x, entre outros).

Se você especificar mais de uma dessas opções, todos os processos que forem combinados por, pelo menos, uma das opções indicadas serão exibidas.

Digite man ps no seu terminal para ler o manual do comando ps, que tem uma referência completa para todas as opções e suas utilizações.

Para mostrar todos os processos em execução para todos os usuários na sua máquina, incluindo os seus nomes de usuário, e para mostrar processos não conectados ao seu terminal, é possível usar o comando abaixo:

ps aux

Aqui está uma descrição do comando:

• ps: é o comando de status do processo.
• a: exibe informações sobre os processos de outros usuários, bem como os seus.
• u:  exibe os processos pertencentes aos nomes de usuário especificados.
• x: inclui processos que não possuem terminal de controle.

Isso exibirá o processo para o shell atual em onze colunas:

• USER retorna o nome de usuário de quem está executando o processo
• PID retorna o ID de processo exclusivo
• %CPU retorna a porcentagem de uso da CPU
• %MEM retorna a porcentagem de uso da memória
• VSV retorna o tamanho virtual em Kbytes
• RSS retorna o tamanho do conjunto residente
• TT retorna o nome do terminal de controle
• STAT retorna o estado do processo simbólico
• STARTED retorna a hora de início
• CMD retorna o comando que iniciou o processo.

Como listar processos em execução no Linux usando os comandos top e htop

Você também pode usar o comando top do gerenciador de tarefas no Linux para ver uma lista ordenada em tempo real dos processos principais que usam mais memória ou CPU.

Digite top em seu terminal e você terá um resultado como o que você vê na captura de tela abaixo:

Você pode digitar q para sair da sessão.

Uma alternativa ao top é o htop que fornece um monitor de sistema interativo para visualizar e gerenciar processos. Ele também exibe uma lista ordenada em tempo real de processos com base em seu uso de CPU. Você pode facilmente pesquisar, filtrar e matar processos em execução.

O htop não está instalado no Linux por padrão. Então, você precisa instalá-lo usando o comando abaixo ou baixar os binários para sua distro Linux preferida.

sudo apt update && sudo apt install htop

Basta digitar htop em seu terminal e você terá um resultado como o que você vê na captura de tela abaixo:

Como encerrar processos em execução no Linux

Encerrar um processo significa que você termina uma aplicação ou comando em execução. Você pode encerrar um processo executando o comando kill com o ID do processo ou o comando pkill juntamente ao nome do processo, assim:

kill [PID]

ou

pkill [COMMAND]

Para encontrar o ID de um processo em execução, você pode usar o comando pgrep seguido do nome do processo, deste modo:

pgrep iTerm2

Para encerrar o processo iTerm2 na captura de tela acima, usaremos qualquer um dos comandos abaixo. Isto terminará e fechará automaticamente o processo iTerm2 (aplicação).

kill 25781

ou

kill iTerm2

Conclusão

Quando você lista processos em execução, geralmente é uma lista longa e agrupada. Você pode canalizá-la através de poucas palavras para exibir a saída do comando uma página de cada vez em seu terminal assim:

ps aux | less

Também é possível exibir apenas um processo específico que corresponda a um nome específico, assim:

ps aux | grep Chrome

Espero que, agora, você entenda o que são processos no Linux e como gerenciá-los usando os comandos ps, top e htop. Certifique-se de verificar o manual para cada comando, executando man ps, man top ou man htop, respectivamente. O manual inclui uma referência abrangente que você pode verificar se precisar de mais ajuda em qualquer ponto.

Obrigado pela leitura! Tudo de bom! 💙