O Python é uma linguagem linda de se programar. Com um ecossistema de pacotes maravilhoso, nela, há bem menos ruído que em outras linguagens, além de ser muito fácil de usar.  

O Python pode ser usado para várias coisas – desde a análise de dados até a programação em back-end. Dentre todas as opções, uma das maneiras mais empolgantes de se usar o Python é o scraping (em português, algo como "raspagem" ou extração) de dados na web.

Neste artigo, abordaremos como utilizar a linguagem Python para fazer scraping na web. Também trabalharemos com uma aula prática e interativa, guiando você à medida que avançamos neste artigo.

Observação: faremos scraping em um site da web hospedado por mim. Assim, poderemos aprender a fazê-lo em segurança. Muitas empresas não permitem o scraping de dados em seus sites. Então, essa será uma boa maneira de aprender. Certifique-se de checar isso antes de começar um scraping de dados na web.

Introdução à aula de scraping de dados na web

Se você quiser programar em paralelo no decorrer deste artigo, pode usar esta aula no codedamn, que consiste em diversos laboratórios que ajudam você a fazer o scraping de dados. Será um exercício prático e interativo no codedamn, muito similar à maneira que você aprende no freeCodeCamp.

Nesta aula, você utilizará essa página para testar o scraping de dados:

https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/  (em inglês)

A aula é composta por sete laboratórios. Você resolverá o que há em cada um ao longo deste artigo. Usaremos o Python 3.8 e o BeautifulSoup 4 para o scraping de dados.

Parte 1: carregando páginas da web com 'request'

Este é o link deste laboratório.

O módulo requests permite que você envie solicitações de HTTP usando o Python.

A solicitação de HTTP retorna um objeto response com todos os dados de resposta (conteúdo, código, status e assim por diante). Aqui vai um exemplo ao pegar HTML de uma página:

import requests

res = requests.get('https://codedamn.com')

print(res.text)
print(res.status_code)

Requerimentos necessários:  

• Pegar o conteúdo do URL a seguir usando o módulo requests: https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/
• Armazenar a resposta recebida (como demonstrado logo abaixo) em uma variável chamada txt    
• Armazenar o código do status (como demonstrado abaixo) em uma variável chamada status
• Imprimir txt e status usando a função print  

Uma vez que você esteja entendendo o que está acontecendo no código abaixo, será bastante simples para você completar este laboratório. Aqui está a solução para ele:  

import requests
# Faça uma solicitação para https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/
# Armazene o resultado na variável 'res'
res = requests.get(
    'https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/')
txt = res.text
status = res.status_code
# Imprima o resultado
print(txt, status)

Vamos prosseguir para a parte 2 agora. Nela, você poderá programar mais, aproveitando o código que já fez até o momento.

Parte 2: extraindo o título com BeautifulSoup  

Este é o link para o laboratório.

Em toda esta lição, você usará uma biblioteca chamada BeautifulSoup no Python para fazer o scraping de dados na web. Algumas funcionalidades que fazem o BeautifulSoup ser uma solução poderosa são:

1. Fornecer muitos métodos simples e expressões "Pythônicas" para a navegação, pesquisa e modificação da árvore do DOM. Não é necessário programar muito para escrever uma aplicação.
2. O BeautifulSoup fica no topo dos analisadores (do inglês, parsers) mais populares de Python, como lxml e html5lib, permitindo que você teste diferentes estratégias de análise ou que faça uma troca entre velocidade e flexibilidade.

Basicamente, o BeautifulSoup pode analisar qualquer coisa que tenha na página da web fornecida.

Aqui está um exemplo simples do BeautifulSoup:

from bs4 import BeautifulSoup

page = requests.get("https://codedamn.com")
soup = BeautifulSoup(page.content, 'html.parser')
title = soup.title.text # Obtém o texto que está entre as tags <title>(...)</title>

Requerimentos necessários:

• Utilizar o pacote requests para pegar o título do URL: https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/
• Utilizar o BeautifulSoup para armazenar o título dessa página dentro de uma variável chamada page_title

Vendo o exemplo abaixo, você pode notar que, uma vez inserido o page.content dentro do BeautifulSoup, você poderá começar a trabalhar com a análise da árvore do DOM de uma maneira bem típica do Python. A solução para o laboratório seria:

import requests
from bs4 import BeautifulSoup

# Fazer uma solicitação para https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Extrair o título da página
page_title = soup.title.text

# Imprimir o resultado
print(page_title)

Esse foi um laboratório simples, onde tivemos que mudar o URL e imprimir o título da página. O código acima passaria nesse laboratório.

Parte 3:  extraindo body e head

Aqui está o link para este laboratório.  

No último laboratório, você viu como extrair o title da página. Da mesma maneira, seria fácil extrair seções mais específicas.

Você também viu que deve usar .text nelas para obter a string, mas você também pode imprimi-las sem utilizar o .text. Isso dará a você a marcação completa. Tente rodar o exemplo abaixo:

import requests
from bs4 import BeautifulSoup

# Fazer uma solicitação
page = requests.get(
    "https://codedamn.com")
soup = BeautifulSoup(page.content, 'html.parser')

# Extrair o título da página
page_title = soup.title.text

# Extrair o body da página
page_body = soup.body

# Extrair a head da página
page_head = soup.head

# Imprimir o resultado
print(page_body, page_head)

Vamos ver como você pode extrair as seções body e head de suas páginas.

Requerimentos necessários:

• Repetir o experimento com o URL: https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/
• Armazenar o título da página (sem usar o .text) do URL em page_title
• Armazenar o conteúdo do body (sem usar o .text) do URL em page_body
• Armazenar o conteúdo da head (sem usar o .text) do URL em page_head

Quando você tentar imprimir page_body ou page_head, verá que eles estarão impressos como strings. Na verdade, porém, quando você colocar print(type page_body), verá que não é exatamente uma string. Mesmo assim, isso funcionará bem.

A solução desse exemplo seria simples, baseada no código abaixo:

import requests
from bs4 import BeautifulSoup

# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Extrair o título da página
page_title = soup.title

# Extrair o body da página
page_body = soup.body

# Extrair a head da página
page_head = soup.head

# Imprimir o resultado
print(page_title, page_head)

Parte 4: selecionando com o BeautifulSoup

Aqui está o link para este laboratório.

Agora que você já explorou algumas partes do BeautifulSoup, veremos como você pode selecionar elementos do DOM com métodos do BeautifulSoup.

Uma vez que você tenha a variável soup (como nos laboratórios anteriores), você pode trabalhar com .select nela, um seletor de CSS dentro do BeautifulSoup. Ou seja, você pode ter acesso à arvore do DOM do mesmo modo como você selecionaria elementos com CSS. Vejamos um exemplo:

import requests
from bs4 import BeautifulSoup

# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Extrair o texto do primeiro <h1>(...)</h1>
first_h1 = soup.select('h1')[0].text

O .select retorna uma lista em Python de todos os elementos. Essa é a razão pela qual você selecionou apenas o primeiro elemento aqui com o índice [0].  

Requerimentos necessários:

• Criar uma variável all_h1_tags. Colocá-la em uma lista vazia.
• Usar .select para selecionar todas as tags <h1> e armazenar seus textos dentro da lista all_h1_tags.
• Criar uma variável seventh_p_text e armazenar o texto do 7º elemento  p  (índice 6) dentro dela.

A solução do laboratório é:

import requests
from bs4 import BeautifulSoup
# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Criar all_h1_tags como uma lista vazia
all_h1_tags = []

# Definir all_h1_tags como todas as tags h1 de soup
for element in soup.select('h1'):
    all_h1_tags.append(element.text)

# Criar seventh_p_text e defini-lo como o texto do 7º elemento p da página
seventh_p_text = soup.select('p')[6].text

print(all_h1_tags, seventh_p_text)

Vamos continuar.

Parte 5: fazendo o scraping dos itens que estão no topo

Aqui está o link deste laboratório.

Agora, extrairemos os itens do topo retirados por scraping do URL https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/

Se você abrir essa página da web em uma nova guia, verá alguns itens no topo dela. Nesse laboratório, sua tarefa é pegar (ou fazer o scraping de) seus nomes e armazená-los em uma lista chamada top_items. Você também extrairá as suas avaliações.

Para concluir esse desafio, preste atenção nos seguintes pontos:

• Use o .select para obter os títulos. (Dica: um seletor para os títulos dos produtos poderia ser a.title)
• Use .select para obter o rótulo de contagem de comentários para esses títulos de produtos.
• Use .select para extrair o contador de avaliações dos títulos desses produtos. (Dica: um seletor para as avaliações poderia ser div.ratings ) Observação: esse é um rótulo completo (ou seja, 2 avaliações), não só um número.
• Crie um dicionário nesse formato:

info = {
   "title": 'Asus AsusPro Adv...   '.strip(),
   "review": '2 reviews\n\n\n'.strip()
}

• Note que você está usando o método strip para remover quaisquer linhas extras ou espaços em branco que possam aparecer no resultado. Isso é algo importante para avançar nesse laboratório.
• Use .append para adicionar esse dicionário em uma lista chamada top_items.
• Imprima essa lista no final usando print.

Há algumas tarefas a serem completadas nesse desafio. Vamos, primeiramente, dar uma olhada na solução para entendermos o que está acontecendo aqui:

import requests
from bs4 import BeautifulSoup
# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Criar top_items como uma lista vazia
top_items = []

# Extrair e armazenar em top_items de acordo com as instruções
products = soup.select('div.thumbnail')
for elem in products:
    title = elem.select('h4 > a.title')[0].text
    review_label = elem.select('div.ratings')[0].text
    info = {
        "title": title.strip(),
        "review": review_label.strip()
    }
    top_items.append(info)

print(top_items)

Note que essa é apenas uma das soluções. Fique à vontade para tentar de outras maneiras. Nessa solução:

1. Primeiro, você selecionará todos os elementos em div.thumbnail, obtendo uma lista de produtos individuais
2. Depois, você realiza uma iteração neles.
3. Você pode usar select outra vez para obter o título, já que ele permite iterar sobre ele mesmo.
4. Note que, agora que você já está rodando um laço para div.thumbnail, o seletor h4 > a.title daria somente um resultado dentro de uma lista. O que você deve fazer é selecionar o elemento de número 0 dessa lista e, então, extrair o seu texto.
5. Agora, você já pode usar strip para remover quaisquer espaços extras contidos no texto e adicionar o texto à sua lista utilizando append.

Simples, não é mesmo?

Parte 6: extraindo links

Aqui está o link deste laboratório  

Até agora, você viu como é possível extrair o texto, ou innerText, dos elementos. Veremos em seguida como é possível extrair os atributos por meio da extração dos links da página.

Aqui está um exemplo de como extrair toda a informação de imagem da página:

import requests
from bs4 import BeautifulSoup
# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Criar top_items como uma lista vazia
image_data = []

# Extrair e armazenar em top_items de acordo com as instruções
images = soup.select('img')
for image in images:
    src = image.get('src')
    alt = image.get('alt')
    image_data.append({"src": src, "alt": alt})

print(image_data)

Nesse laboratório, sua tarefa é extrair o atributo href dos links e seus respectivos textos text. Certifique-se das seguintes coisas:

• Você terá que criar uma lista chamada all_links
• Nessa lista, armazene toda a informação do link. Isso deverá ficar no seguinte formato:

info = {
   "href": "<link here>",
   "text": "<link text here>"
}

• Certifique-se que o seu text esteja sem nenhum espaço em branco.
• Certifique-se de checar se o seu .text é None antes de usar o .strip() nele.
• Armazene todos esses dicionários em all_links
• Use print para imprimir essa lista no final.

Você extrairá os valores dos atributos da mesma maneira que você extrai os valores de um dicionário, usando a função get. Veremos agora a solução para esse laboratório:

import requests
from bs4 import BeautifulSoup
# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Criar top_items como uma lista vazia
all_links = []

# Extrair e armazenar em top_items de acordo com as instruções
links = soup.select('a')
for ahref in links:
    text = ahref.text
    text = text.strip() if text is not None else ''

    href = ahref.get('href')
    href = href.strip() if href is not None else ''
    all_links.append({"href": href, "text": text})

print(all_links)

Aqui, você extrairá o atributo href do mesmo modo que você fez no caso da imagem. A única coisa que você fará de diferente é conferir se ele é None, tal qual fizemos anteriormente. Queremos defini-lo como uma string vazia. Caso contrário, tiraremos o espaço em branco.

Parte 7: gerando CSV a partir de dados

Aqui está o link deste laboratório

Por fim, vamos entender como gerar CSV a partir de um conjunto de dados. Você criará um CSV com os seguintes tópicos:

1. Nome do produto
2. Preço
3. Descrição
4. Avaliações
5. Imagem do produto

Esses produtos estão localizados em div.thumbnail. O padrão do CSV está logo abaixo:

import requests
from bs4 import BeautifulSoup
import csv
# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

all_products = []

products = soup.select('div.thumbnail')
for product in products:
    # TODO: Trabalho
    print("Trabalho com o produto aqui")


keys = all_products[0].keys()

with open('products.csv', 'w', newline='') as output_file:
    dict_writer = csv.DictWriter(output_file, keys)
    dict_writer.writeheader()
    dict_writer.writerows(all_products)

Você deverá extrair os dados do site da web e gerar o CSV para três produtos.

Requerimentos necessários:

• O nome do produto é a versão com o espaço em branco cortado do nome do item (exemplo - Asus AsusPro Adv.)
• Preço é o espaço em branco cortado mas com o rótulo do preço inteiro (exemplo - $1101.83)
• A descrição é a versão com o espaço em branco cortado da descrição do produto (exemplo - Asus AsusPro Advanced BU401LA-FA271G Dark Grey, 14", Core i5-4210U, 4GB, 128GB SSD, Win7 Pro)
• Avaliações são as versões com o espaço em branco cortado do produto (exemplo - 7 avaliações)
• Imagem do produto é o URL (atributo src) da imagem do produto (exemplo - /webscraper-python-codedamn-classroom-website/cart2.png)
• O nome do arquivo CSV deve ser products.csv e deve ser armazenado na mesma pasta que o seu arquivo script.py.

Aqui está a solução para esse laboratório:

import requests
from bs4 import BeautifulSoup
import csv
# Fazer uma solicitação
page = requests.get(
    "https://codedamn-classrooms.github.io/webscraper-python-codedamn-classroom-website/")
soup = BeautifulSoup(page.content, 'html.parser')

# Criar top_items como uma lista vazia
all_products = []

# Extrair e armazenar em top_items de acordo com as instruções
products = soup.select('div.thumbnail')
for product in products:
    name = product.select('h4 > a')[0].text.strip()
    description = product.select('p.description')[0].text.strip()
    price = product.select('h4.price')[0].text.strip()
    reviews = product.select('div.ratings')[0].text.strip()
    image = product.select('img')[0].get('src')

    all_products.append({
        "name": name,
        "description": description,
        "price": price,
        "reviews": reviews,
        "image": image
    })


keys = all_products[0].keys()

with open('products.csv', 'w', newline='') as output_file:
    dict_writer = csv.DictWriter(output_file, keys)
    dict_writer.writeheader()
    dict_writer.writerows(all_products)

O bloco for é o mais interessante aqui. Você extrai todos os elementos e atributos de tudo o que já foi aprendido até agora em todos os laboratórios.

Quando você rodar esse código, terá um bom arquivo CSV. Isso é praticamente todo o básico de scraping de dados com o BeautifulSoup!

Conclusão

Eu espero que essa aula interativa do codedamn tenha ajudado você a entender o básico de scraping de dados com o Python.

Se você gostou desta aula e deste artigo, o autor pede que compartilhe com ele sya opinião no Twitter e no Instagram do autor. Ele adoraria ter o seu feedback!

Se você quiser crescer como desenvolvedor, eu não poderia enfatizar o suficiente os benefícios que você teria ao se juntar a uma comunidade de desenvolvedores. Existem muitas vantagens, da programação em conjunto com outros desenvolvedores ao compartilhamento de conhecimento, mentorias, apoio, ferramentas, revisão de código, a possibilidade de ter suas perguntas respondidas, entre outros.

Comunidades normalmente são construídas em torno de dificuldades em comum de indivíduos que estão aprendendo em uma determinada região. Os objetivos das comunidade diferem nas necessidades coletivas de cada uma.

Ao longo dos anos, essas comunidades cresceram no mundo todo com objetivos e missões diferentes, mas ainda visando proporcionar uma plataforma para que os desenvolvedores possam aprender, interagir, compartilhar ideias, apoiar uns aos outros e crescer.                                                                                                                        

"Se você quiser ir rápido, vá sozinho. Se você quiser ir longe, vá acompanhado." — Provérbio Africano.    

Para melhor ajudar aqueles que estão procurando uma comunidade da qual participar, eu fiz uma lista das 20 melhores comunidades (sem ordem de importância), variando da Engenharia ao Design, Ciência de Dados, Aprendizado de Máquina, Relações ente Desenvolvedores, Escrita Técnica e mais.

1. Women Who Code

A Women Who Code (em português, mulheres que programam) é uma organização internacional sem fins lucrativos para mulheres na tecnologia com eventos, recursos de programação, empregos, mentorias e mais. Elas visam inspirar, apoiar, dar assistência, bem como ajudar mulheres a desenvolverem habilidades técnicas e se sobressaírem em suas carreiras.

Participe agora para ter acesso exclusivo a essa comunidade, aos eventos, bolsas de estudo, ingressos gratuitos para eventos, oportunidades de trabalho e muito mais.

2. Hashnode

A Hashnode é uma comunidade on-line onde desenvolvedores compartilham conhecimento e evoluem em suas carreiras. Desenvolvedores ao redor do mundo participam de discussões acaloradas no Hashnode. Você pode escrever histórias e fazer perguntas abertas ou mais específicas, perguntar anonimamente e fazer enquetes. Também é possível fazer perguntas a equipes técnicas famosas e a influenciadores da área do desenvolvimento ou até mesmo aprender com as histórias de mulheres maravilhosas na tecnologia.

A plataforma DevBlog do Hashnode permite criar seu blog pessoal em um domínio personalizado em poucos passos simples, com tudo o que é necessário para crescer como um blogueiro (sem pagamentos envolvidos, com domínio gratuito, SSL, back-up automático das postagens, markdown, suporte de AMP, entre outros). Adquira seu próprio espaço, faça conteúdos independentes e construa sua autoridade de domínio.

3. freeCodeCamp

O freeCodeCamp é uma organização sem fins lucrativos que ajuda pessoas a aprender a programar de graça através de milhares de vídeos (em inglês), artigos, aulas de programação interativas e milhares de grupos de estudo ao redor do mundo.

Você aprende completando desafios de programação e construindo projetos certificados ao mesmo tempo.

4. StackOverflow

O Stack Overflow é uma página da web focada em perguntas e respostas para programadores com inúmeras perguntas e respostas sobre diversos tópicos na área da programação de computadores.

Você pode aprender através de perguntas que já foram feitas e respondidas, compartilhar seus conhecimentos em programação respondendo algumas dúvidas postadas ou compartilhar suas dúvidas e problemas aqui.

5. HackerNews

O Hacker News é um site que foca em ciências da computação e empreendedorismo onde é possível enviar links para conteúdos mais técnicos.

Esse é um ótimo jeito de promover seus conteúdos a uma variedade de visualizadores e encontrar mais conteúdos incríveis de outros geeks.

6. Hackernoon

O Hackernoon é um site de mídia que entrega histórias e opiniões escritas por profissionais da tecnologia e lido por Tecnólogos, Desenvolvedores de Software, Bitcoiners e entusiastas das Blockchain.

Você pode escrever artigos técnicos aqui e aprender a partir de uma vasta série de conteúdos técnicos disponíveis e irrestritos.

7. SitePoint Community

O SitePoint Community é uma comunidade para designers da web e desenvolvedores criada para discutir tudo que envolva desenvolvimento da web, HTML, CSS, JavaScript, PHP, Photoshop, SEO, entre outros.

Assim como no StackOverflow, é possível perguntar e responder a outras perguntas sobre desenvolvimento da web aqui.

8. Kaggle

O Kaggle é uma comunidade on-line de praticantes de ciência de dados e aprendizado de máquina, com uma publicação ampla de repositório de dados e código com mais de 19 mil bases de dados públicas e 200 mil notebooks abertos. O Kaggle também oferece cursos em Aprendizado de Máquina, Pandas, Python, Deep Learning, Visualização de Dados e SQL, além de discussões para ajudar você a se desenvolver

9. Indie Hackers

Um Hacker Indie é "uma pessoa construindo um projeto on-line que pode gerar renda." A Indie Hackers é uma comunidade global de desenvolvedores que compartilham seus projetos, estratégias e estatísticas de renda que existem por trás das suas empresas e projetos.

Você pode aprender com os fundadores que estão por trás de centenas de negócios de sucesso on-line e se conectar com outros que estão começando e evoluindo suas próprias empresas através de encontros globais, discussões, artigos e muito mais.

10. Code Newbie

A Code Newbie é a comunidade mais acolhedora, constituída por programadores e pessoas que estão aprendendo programação. Ela começou como um chat semanal no Twitter, criado para dar assistência a pessoas nesse processo de aprendizado. Desde então, ela cresceu e se tornou uma comunidade internacional de apoio para os que ainda estão aprendendo a programar.

11. Digital Ocean Community

Esse é um lugar inclusivo, onde desenvolvedores podem encontrar ou dar suporte e contribuir para a comunidade de DevOps e entusiastas de computação na nuvem. A comunidade oferece guias, tutoriais, tendências para desenvolvedores, sessões de perguntas e respostas, entre outros.

12. Product Hunt

A Product Hunt é uma comunidade com produtos maravilhosos apresentados todos os dias. É um lugar onde amantes da tecnologia podem descobrir e compartilhar novidades sobre as mais novas aplicações para dispositivos móveis, sites da web, projetos de hardware, entre outras criações do mundo tecnológico.

13. Reddit

O Reddit é uma comunidade global com milhares de subcomunidades, inúmeros debates e que contém uma rede de diversos streams para desenvolvedores, como r/reactjs, r/vuejs, r/JAMstack_dev, r/Python, entre outros.

14. DevCareer

A DevCareer é uma organização sem fins lucrativos que foca em dar apoio a futuros desenvolvedores com mentorias e recursos que os permitam se tornar desenvolvedores de alto nível. Para os que passam pelo programa, são fornecidos notebooks, espaços para co-working, instrumentos de trabalho, mentorias e colocações em empresas para desenvolvedores de software na África.                        

15. Interaction Design Foundation

O site "The Interaction Design Foundation Community" oferece uma oportunidade bem interessante para designers criarem e aperfeiçoarem seu portfólio enquanto se preparam para trabalhar em Experiência de Usuário. Eles oferecem desde cursos de especialistas em UX, a eventos locais de UX Design em cidades por todo o mundo, debates sobre UX, colaborações, e muito mais.

16. Daily UI

O Daily UI é uma série livre de desafios de Interface de Usuário diários, inspirações de design e recompensas surpresa para fazer com que você se torne um designer melhor em 100 dias. Seu incrível lembrete diário dará a você mais motivação para continuar aprendendo.

17. Dev.to

A DEV é uma comunidade de desenvolvedores de software que se ajudam. O site disponibiliza um espaço para que desenvolvedores colaborem uns com os outros e formem uma rede enquanto aprendem e também compartilham seus conhecimentos.          

18. DevRel Collective

O DevRel Collective é uma comunidade de relações entre desenvolvedores que existe para facilitar o compartilhamento de informação, recursos e, também, promover o incentivo dentro da comunidade DevRel.

Se você for ativamente envolvido em comunidades de desenvolvedores ou gestão de eventos, você deve se juntar a essa comunidade.

19. Facebook Developer Circles

O Developer Circles do Facebook é um programa projetado para criar comunidades locais e organizadas para desenvolvedores. Essas comunidades educam e proporcionam um fórum para discussões e compartilhamento de informação em torno dos temas mais relevantes para desenvolvedores em determinados mercados.

Encontre um DV local mais próximo a você aqui.

20. Google Developer Groups

O GDG reúne desenvolvedores de software com interesses em comum para se encontrarem em reuniões e workshops interativos. A comunidade acolhe a todos que se interessem por tecnologia, desde o nível mais iniciante até profissionais experientes.

Encontre o GDG mais próximo a você aqui.

Conclusão

"Não há poder para mudança maior do que uma comunidade descobrindo o que lhe é importante."  – Margaret J. Wheatley.

Os laços que se criam em comunidades de desenvolvedores evoluíram de somente "grupos técnicos" para "grupos familiares", onde todos são apaixonados por compartilhar conhecimento e ajudar os participantes a atingirem níveis mais altos em suas carreiras.

Maravilhoso, não é? Um viva à nova era, onde compartilhar conhecimentos e ter espírito de união estão se tornando algo comum!

Escrito por: AppSecure

Eu estou publicando isso com a permissão do Facebook sob a política de divulgação responsável. Eles já consertaram essa vulnerabilidade.

Este artigo é sobre uma vulnerabilidade simples que eu descobri no Facebook que eu poderia ter usado facilmente para invadir a conta de outros usuários do Facebook e sem nenhuma interação com eles.

Isso me deu acesso total a contas de outros usuários através da configuração de uma nova senha. Eu pude ver mensagens, cartões de débito/crédito armazenados dentro da sessão de pagamentos, fotos pessoais e outras informações privadas.

O Facebook tomou conhecimento do problema imediatamente, o consertou e me gratificou com uma recompensa de 15 mil dólares com base na gravidade e no impacto dessa vulnerabilidade.

Como a invasão funcionou

Sempre que um usuário se esquece da senha do Facebook, ele tem a opção de redefinir a senha mediante a inserção do seu número de telefone e endereço de e-mail em https://www.facebook.com/login/identify?ctx=recover&lwv=110.

O Facebook, então, enviará um código de seis dígitos para esse número de telefone ou para o endereço de e-mail que o usuário tem que inserir para poder definir a nova senha.

Eu tentei forçar o código de 6 dígitos no www.facebook.com e houve um bloqueio depois de 10-12 tentativas inválidas.

Então, eu procurei pelo mesmo problema no beta.facebook.com e mbasic.beta.facebook.com. Curiosamente, a limitação de taxa não estava presente no endpoint de senha esquecida.

Eu tentei invadir a minha própria conta (já que de acordo com a política do Facebook você não pode prejudicar nenhuma outra conta de usuário) e tive êxito em configurar uma nova senha para a minha conta. Pude, então, usar essa mesma senha para conseguir entrar na minha própria conta invadida.

Uma prova da invasão em vídeo

Como pode ser visto no vídeo, eu fui capaz de definir uma nova senha para o usuário usando força bruta no código que foi enviado para o seu endereço de e-mail e número de telefone.

Solicitação vulnerável

POST /recover/as/code/ HTTP/1.1

Host: beta.facebook.com

lsd=AVoywo13&n=XXXXX

Usar força bruta com o "n" me permitiu definir uma nova senha com sucesso para qualquer usuário do Facebook.

Linha de tempo

22 de fevereiro de 2016 : relato enviado para a equipe do Facebook.

23 de fevereiro de 2016 : o Facebook verificou a solução.

2 de março de 2016 : recebi a recompensa de 15 mil dólares concedida pelo Facebook.

Escrito por: Sam Williams

Você já pensou em se tornar um desenvolvedor de software ou está pensando em trocar de carreira? Este artigo dará a você um plano sólido para aprender desenvolvimento de software e conseguir seu primeiro emprego!

Por que ser um desenvolvedor?

Se você está considerando se tornar um desenvolvedor, mas não tem certeza se é uma boa ideia, aqui estão algumas coisas a se pensar:

1. Há uma demanda muito grande por desenvolvedores — no momento em que este artigo foi escrito, o site Indeed tinha 37.739 anúncios de emprego para 'desenvolvedor' no Reino Unido e 145.640 nos Estados Unidos. Esses números só aumentarão, já que o Departamento de Estatísticas de Trabalho dos Estados Unidos estima um aumento de 17% entre 2014 e 2024.
2. O trabalho pode ser muito variado e interessante — como desenvolvedor, você pode trabalhar em uma variedade de projetos, de sites da web de e-commerce a jogos de computador, de aplicações para dispositivos móveis à inteligência artificial. Quase todas as habilidades são transferíveis entre cada uma dessas áreas. Isso quer dizer que você não estará preso a um só emprego.
3. O trabalho pode ser bastante flexível — como a maior parte do seu trabalho é ler e escrever código, tudo o que você precisa é de um computador. Isso quer dizer que pode ser feito em qualquer lugar, a qualquer hora. Há um número crescente de desenvolvedores que trabalham remotamente em casa ou enquanto viajam ao redor do mundo.

Como se tornar um desenvolvedor

Ser um desenvolvedor requer muitas habilidades e há dois fatores importantes para se desenvolver uma habilidade: a prática eficaz e o apoio de desenvolvedores sênior. Você precisa maximizar ambos para que venha a se tornar o melhor desenvolvedor possível. Há três boas maneiras de se ter certeza de que você está em um caminho rápido para começar a sua carreira de desenvolvedor:

Bootcamps (cursos intensivos de programação)

Estes cursos são excelentes, pois são projetados para pegar alguém com pouca ou nenhuma experiência e torná-lo preparado para conseguir um emprego em três meses. Isso quer dizer muita prática efetiva e uma ajuda imensa dos desenvolvedores que coordenam o bootcamp.

Os problemas que você pode ter com bootcamps é que eles geralmente têm uma duração de três meses de ensino em tempo integral e podem custar de 4 a 20 mil dólares. Isso é muito dinheiro para desembolsar, especialmente se você não estiver recebendo durante esses três meses.

Achando um mentor

Esta é a situação perfeita: você começa a programar e tem um desenvolvedor como seu mentor e tutor. Pode ser algum amigo, um membro da família ou apenas um desenvolvedor que queira ajudar você. Você não terá tanta ajuda como em um bootcamp, mas ter alguém com quem se possa contar quando se encontra um obstáculo é muito útil. Além do mais, ter alguém que acompanhe você e que se certifique que você está dedicando o tempo necessário aos estudos pode ajudar você a se manter no caminho certo.

Isso tudo soa formidável, mas encontrar um mentor pode ser difícil. Nem todo mundo conhece alguém que trabalha como desenvolvedor e isso requer muito trabalho extra para o mentor. Se você conhece algum desenvolvedor, ele pode se recusar a ser seu mentor e você precisará respeitar isso.

Conseguindo um trabalho como desenvolvedor

Isso pode parecer meio estranho, já que você precisa estar apto a programar antes de conseguir um emprego, mas explicarei mais tarde como chegar a esse ponto sem um mentor ou bootcamp. Quando você conseguir seu primeiro emprego, você poderá ter uma imensa vantagem — estará sendo pago para praticar programação enquanto trabalha com desenvolvedores sênior. O que mais você pode querer?  

Trabalhar como um desenvolvedor também deixará você exposto a um lado do desenvolvimento que você não conhecerá nos estudos: o lado comercial. Essa é uma parte imensa do desenvolvimento, já que não há nenhuma razão em fazer um produto que ninguém quer e lidar com clientes é uma habilidade que leva tempo para se aprender.

Começando o planejamento

Como nem todo mundo pode custear um bootcamp ou conhece alguém para ser seu mentor, darei aqui um plano para conseguir seu primeiro emprego como desenvolvedor. Foi praticamente assim que eu fui de engenheiro a desenvolvedor em somente 4 meses (texto em inglês).

Encontrando um emprego

Para criar um bom plano você precisa ter um objetivo em mente. Nossa meta é conseguir um emprego o mais rápido possível, o quanto antes você conseguir seu primeiro emprego, mais rápido terá o estímulo de praticar a programação todos os dias tendo o apoio de desenvolvedores sênior e com o bônus de receber por isso.

Há muitas maneiras de se entrar no mundo do desenvolvimento, desde ciência de dados e inteligência artificial a desenvolvimento de jogos, mas o setor mais fácil para se entrar é o de desenvolvedor para a web. Se você estiver com outros planos no momento, lembre-se de que começar no desenvolvimento para a web não quer necessariamente dizer que você estará preso a isso para sempre. Você aprenderá muito e com isso poderá transferir esse conhecimento adquirido para o campo desejado.

Quando eu procurei por desenvolvedor para a web júnior, a primeira vaga de emprego que eu vi foi para desenvolvedor para a web júnior em front-end. Os requisitos eram os seguintes:

Podemos dar uma olhada em alguns anúncios de empregos similares e achar as exigências que aparecem mais frequentemente. Estas são os mais prováveis:

• Conhecimento em front-end: HTML, CSS e JavaScript
• Habilidade de criar sites responsivos para a web
• Um portfólio demonstrando sua experiência e habilidades
• Conhecimento em controle de versão

Outras habilidades bônus podem incluir:

• Bibliotecas do JavaScript: jQuery, AJAX, Bootstrap
• Conhecimento em depuração (do inglês, debugging)

Criando o plano

Agora que sabemos o que precisamos aprender para cumprir os requisitos, podemos criar um planejamento de como aprender o que precisamos para alcançar nossas metas. Tente seguir esse planejamento passo a passo, já que será muito mais fácil aprender o conteúdo mais avançado se você já souber os que vêm antes.

HTML e CSS

Esses são os blocos construtores da maioria dos sites da web hoje em dia. Você precisa desenvolver um bom entendimento deles se quiser ter uma chance de conseguir um emprego. Por sorte, há centenas de recursos pagos e gratuitos por aí que podem ajudar você a dominar essas competências.

O freeCodeCamp é um site que ensina a você tudo o que envolve o desenvolvimento para a web e é incrível. Ele dá o passo a passo através de pequenas aulas. Foi onde eu aprendi HTML, CSS, e JavaScript!

Começaremos com a certificação de Design Responsivo para Web e com o Básico de HTML e HTML5 e com o CSS Básico. Essas seções introduzirão você ao HTML e ao CSS. Até o final delas, você estará criando formas e estilizando HTML com variáveis em cascatas.

Para aperfeiçoar nosso CSS, completaremos a nossa seção de design visual aplicado até podermos criar uma forma mais complexa usando o CSS e o HMTL. Depois, faremos todo o design responsivo para a web e a seção do CSS Flexbox. Estamos pulando alguns dos desafios e seções por agora, já que o nosso objetivo é aprender o que precisamos imediatamente. As outras seções são ótimas, mas não precisaremos delas no momento.

Agora que aprendemos a usar o HTML e o CSS para construir e estilizar uma página de web, teremos uma prática mais efetiva completando o design responsivo para a web. Esses projetos usarão tudo o que aprendemos até agora para construir cinco sites.

Controle de versão

O controle de versão é um sistema onde você salva arquivos para que possa vê-los novamente no futuro e perceber o que você alterou e em que momento. Isso provavelmente será usado em toda empresa de software em que você for trabalhar. Assim, ter esse conhecimento é muito importante.

Aprenda como instalar o Git, crie uma conta no GitHub e trabalhe com ambos. Há um tutorial ótimo em Uma Introdução ao Git e GitHub (em inglês). Você pode aprender os dois antes mesmo dos projetos de design do HTML e CSS e começar a usar o controle de versão desses projetos.

Quando souber como usar o controle de versão, tente fazer todos os seus projetos em um editor local (como o VS Code) e faça um upload deles para o CodePen quando terminá-los. Trabalhar em um editor local será exatamente o que você fará em um emprego. Isso, portanto, ajudará você a construir mais essa experiência.

Há muitas maneiras de se usar o Git/controle de versão, mas você quer saber como criar um repositório no GitHub, vinculá-lo a uma pasta local, incorporar os trabalhos que você fez e colocar tudo isso no GitHub. Uma vez que você possa fazer isso, será capaz de trabalhar de maneia efetiva e, assim, fazer realmente parte do time de desenvolvedores.

JavaScript

O JavaScript é a linguagem que alimenta 94.8% dos sites da web na internet. Isso representa muitos sites! O JavaScript permite mudar um site de estático para um completamente interativo.

Para aprender JavaScript, podemos fazer o certificação de algoritmos e estruturas de dados em JavaScript, no freeCodeCamp. Como o Javascript é uma parte tão grande dos sites modernos, completaremos toda a grade dessa certificação. Pode parecer muito trabalho, mas quando você trabalha como desenvolvedor para a web, passará a maior parte do tempo escrevendo em JavaScript. Assim, é importante que você realmente tenha capacidade de trabalhar com ele.

Construindo seu portfólio

Para mostrar do que você é capaz, você precisa ter um portfólio para mostrar aos seus possíveis empregadores. Felizmente, você já terá 10 projetos — 5 em HTML e CSS e 5 em JavaScript. Assegure-se de ter todos eles em controle de versão e transferidos para o GitHub para que outras pessoas (futuros empregadores) possam vê-los e saber do potencial do seu trabalho.  

Agora, você poderá voltar ao site de portfólio que você construiu e atualizar com todos os seus projetos novos. Você também pode utilizar seus conhecimentos em JavaScript para adicionar interatividade à sua página. Pode ser uma descrição em pop-up quando o usuário passar sobre um de seus projetos, um slideshow de imagens ou até mesmo um minigame.

A procura de emprego

Se você fez tudo até agora, já deve cumprir os requisitos de muitos empregos para desenvolvedor para a web júnior. Esse é o momento de se candidatar a alguns empregos.

Para se candidatar a maioria dos empregos, você precisara de um currículo (CV). Ele deve destacar seus pontos fortes sem atrair atenção demais a quanto tempo você está programando ou ao fato de que você não tem nenhuma experiência comercial.

Aqui está o CV que eu usei para conseguir meu segundo emprego:  

Saber a quais empregos você deve se candidatar também é importante. Isso pode parecer errado, mas você deveria se candidatar a empregos onde você consegue cumprir 80% (ou mais) dos requisitos. Você sempre pode salientar que, como um desenvolvedor autodidata, você provavelmente atingirá outras exigências mais rápido que os demais.

É claro que isso não quer dizer que você deva se candidatar a todo emprego em que você atenda aos requisitos. Apenas se candidate aos trabalhos que você considere interessantes e que você aceitaria se fossem oferecidos a você.

Usando os recrutadores

Os recrutadores podem ser ferramentas poderosas para conseguir seu primeiro emprego. Eles sabem o que a empresa quer, frequentemente têm empregos que não estão anunciados nos classificados e querem que você consiga o emprego... é assim que eles são pagos.

Para ter certeza de que seu CV estará nas mãos do maior número possível de recrutadores, precisaremos nos candidatar em vários sites. Comece com os sites maiores, como o Indeed e o Total Jobs, mas tente encontrar sites menores também.

Muitos desenvolvedores falam sobre o fato de recrutadores serem "terríveis", mas precisamos nos certificar de que podemos ter neles aliados. Sempre que você falar com um recrutador, assegure-se de ser educado e respeitoso. Se eles sondarem você sobre trabalhos que estão muito aquém do que você deseja, agradeça-os e recuse, mas lembre-os de que tipo de emprego você está procurando.

Meus dois primeiros empregos vieram de recrutadores perguntando sobre um emprego que não era adequado para mim, mas eles tinham outra oferta que era perfeita. Por isso, não seja tão duro com eles.

Continue se aprimorando

Você, provavelmente, não conseguirá uma entrevista e oferta de trabalho na primeira semana em que estiver se candidatando. Você pode não conseguir uma entrevista nem no primeiro mês, mas isso dará a você mais tempo para se aperfeiçoar.

Agora que alcançamos os requisitos básicos, podemos começar a adicionar mais itens interessantes de se ter no kit de ferramentas. Agora é a hora de acrescentar uma nova ferramenta na sua caixa. Incorporar mais habilidades às suas fará com que mais empregadores queiram você e, assim, aumentará suas chances de conseguir uma entrevista. Aqui estão alguns conhecimentos para se adquirir:

Aprenda uma biblioteca

Existem bibliotecas de JavaScript que podem facilitar muito a sua vida. Uma das bibliotecas mais populares é o jQuery, que ajuda com a manipulação do DOM, funções de objetos e de arrays e muito mais.

Eu recomendaria aprender a utilizar o jQuery porque é uma ótima introdução à utilização das bibliotecas em JavaScript. Há vários cursos e tutoriais para aprender jQuery, mas eu ainda prefiro o do freeCodeCamp.

Nota da tradução: no momento da tradução deste texto, outras bibliotecas foram adquirindo uma importância maior no mundo do desenvolvimento e, agora, conhecer bibliotecas como o React, o Vue ou o Angular serão de maior utilidade para você no desenvolvimento para a web.

Completando as aulas de HTML e CSS

Volte para as aulas de HTML e CSS do freeCodeCamp e complete o resto das lições em design visual aplicado, acessibilidade aplicada e CSS Grid.

Aprendendo como o JavaScript funciona

Saber usar o JavaScript é ótimo, mas entender como ele funciona pode ajudar você a se tornar um desenvolvedor muito melhor. Isso permitirá escrever o melhor código possível, já que você saberá o como e o porquê que esse código conserta o problema.

Para atingir esse conhecimento profundo de JavaScript, eu recomendo fortemente a série de livros "You Don't Know JS". Os primeiros dois livros são ótimos para compreender os princípios básicos do JavaScript. Entendê-los dará a você um excelente fundamento com o qual você poderá se tornar um desenvolvedor ainda melhor. Eles podem ser acessados ON-LINE e GRATUITAMENTE ou comprados no formato de capa dura.

Criando projetos

Outro jeito de aperfeiçoar suas habilidades é criando projetos. Eles podem ser qualquer coisa, mas seu objetivo é praticar usando as ferramentas com as quais você tenha menos experiência. Não é bom com arrays? Crie um aplicativo de lista de compras. Um pouco hesitante em estilização? Tente fazer uma cópia exata de algum site da web existente.

Esses projetos deverão aprimorar seus conhecimentos. Então, se for fácil demais ou muito complicado, pare e comece um projeto que se ajuste melhor ao seu nível.

Às vezes, ao criar um projeto, você talvez precise aprender uma habilidade completamente diferente. Aprender enquanto se faz pode ser um aprendizado excelente para algumas pessoas.

Entrevistas

Depois de se candidatar a diversos empregos e de continuar a aprimorar suas habilidades, esperamos que você seja convidado a uma entrevista. Essa é sua hora de brilhar. Há diversos artigos sobre como abordar o processo de entrevistas. Então, eu não examinarei muito a fundo os detalhes aqui, mas destacarei o que este artigo (em inglês) diz:

• Conheça seu CV
• Conheça a empresa
• Pratique suas habilidades
• Seja pontual, educado e confiante
• Faça perguntas
• Acompanhe o processo após a entrevista

Se você seguir todos esses conselhos, você terá uma boa chance de conseguir uma oferta de emprego. Mesmo que não consiga, certifique-se de pedir um feedback para poder usá-lo da melhor maneira na sua próxima entrevista.

Resumo

Se você quer se tornar um desenvolvedor, deve buscar um emprego de desenvolvedor para a web júnior o mais rápido possível para conseguir a experiência e o apoio de desenvolvedores sênior. Para conseguir esse tipo de emprego, você precisa:

• aprender HTML, CSS e JavaScript
• construir um portfólio de projetos menores

Uma vez que você tenha feito isso, você pode começar a se candidatar a vagas de emprego.

Então, prepare-se bem para as entrevistas e continue a adquirir novas habilidades enquanto espera por aquela oferta.

Obrigado por ler este guia para se tornar um desenvolvedor e para conseguir seu primeiro emprego. Se gostou dele, siga o autor no Medium para ver mais dicas e truques para desenvolvedores.