DEV Community: Marina Santana

Python web scraping escrever em arquivo json

Marina Santana — Fri, 29 Jan 2021 15:08:14 +0000

Criei um projeto pessoal com o intuito de aprender mais sobre typescript e nextjs no frontend, foi quando me deparei com o seguinte problema, eu teria que exibir aproximadamente 18 dados de 118 elementos da tabela periódica, coletar esses dados seria humanamente inviável, foi assim que tive a ideia de criar esse script.

Configurando o driver

As informações dos elementos serão extraídas do site PubChen, como os dados estão dentro de uma pop-up, utilizarei o selenium para abrir o navegador e extrair as informações, o navegador escolhido foi o chorme, para utilizá-lo é necessário instalar o chormedriver correspondente com a versão do seu navegador.

Instale a biblioteca webdriver e coloque o caminho de instalação do chormedriver;

pip install webdriver

from selenium import webdriver

driver = webdriver.Chrome(  executable_path='C:/Users/{user}/Downloads/chromedriver_win32/chromedriver.exe')

Configurando a leitura da página

Para abrir o navegador é necessário configurar a url e passa-lá como parâmetro para o driver.get, para extrair os dados da página será usado a biblioteca BeautifulSoup.

pip install beautifulsoup4

from bs4 import BeautifulSoup

url = "https://pubchem.ncbi.nlm.nih.gov/periodic-table/#popup=1"

driver.get(url)

content = driver.page_source
soup = BeautifulSoup(content)

Pegando os dados da página

Para extrair os dados da página é necessário inspecionar os elementos da página e pegar os identificadores únicos dos campos de onde texto será extraído.

Como essa parte era repetitiva criei 2 funções uma que extrai o texto da span e outra que extrai o texto da div, no caso da span a class muda de acordo com o elemento selecionado na pop-up então enviei o símbolo químico como parâmetro.

   def find_span(data_label, symbol):
        formatted_string = data_label.format(symbol)
        href = soup.find(
            "a", {"data-label": formated_string})

        if href:
            span = href.find("span", {"class": "capitalized"})
            if span:
                return span.text
            else:
                return "N/A"
        else:
            return "N/A"

   def find_div(class_name):
      div = soup.find(
        "div", {"class": class_name})

      if div:
        return div.text
      else:
        return "N/A" 

  symbol = find_div("f-3")
  name = find_div("f-125 f-lh-15")
  type_element = find_div("f-0875 capitalized f-lh-15")
  standard_state = find_span(
    'Content Link (List View): {}; Standard State Property Value', symbol)
  atomic_mass = find_span(
    "Content Link (List View): {}; Atomic Mass Property Value", symbol)
  electron_configuration = find_span(
    "Content Link (List View): {}; Electron Configuration Property Value", symbol)
  oxidation_states = find_span(
    "Content Link (List View): {}; Oxidation States Property Value", symbol)
  electronegativity = find_span(
    "Content Link (List View): {}; Electronegativity (Pauling Scale) Property Value", symbol)
  atomic_radius = find_span(
    "Content Link (List View): {}; Atomic Radius (van der Waals) Property Value", symbol)
  ionization_energy = find_span(
    "Content Link (List View): {}; Ionization Energy Property Value", symbol)
  electron_affinity = find_span(
    "Content Link (List View): {}; Electron Affinity Property Value", symbol)
  melting_point = find_span(
    "Content Link (List View): {}; Melting Point Property Value", symbol)
  boiling_point = find_span(
    "Content Link (List View): {}; Boiling Point Property Value", symbol)
  density = find_span(
    "Content Link (List View): {}; Density Property Value", symbol)
  year_discovered = find_span(
    "Content Link (List View): {}; Year Discovered Property Value", symbol)

Gravando dados no arquivo

Para gravar os dados no arquivo json é necessário montar o objeto que será enviado para o arquivo.

 data = {"id": id, "symbol": symbol,
            "name": name,
            "type": type_element,
            "standardState": standard_state,
            "atomicMass": atomic_mass,
            "electronConfiguration": electron_configuration,
            "oxidationStates":  oxidation_states,
            "electronegativity": electronegativity,
            "atomicRadius": atomic_radius,
            "ionizationEnergy": ionization_energy,
            "electronAffinity": electron_affinity,
            "meltingPoint": melting_point,
            "boilingPoint": boiling_point,
            "density": density,
            "yearDiscovered": year_discovered}

Depois não esqueça de fechar o navegador;

driver.close()

O último passo é instalar a biblioteca json para que ela salve os dados;

 pip install json

Já com a biblioteca instalada, agora é só passar o json formatado para ela;

with open('data.json', 'w') as f:
    json.dump(data, f)

Pegando os dados de todos os elementos

Agora que o script já está funcionando é preciso fazer ele chamar automaticamente todas às 118 pop-up, será utilizado o while para a repetição da chamada, a cada chamada o id da pop-up vai mudar e todos os dados extraídos serão salvos em um array, para no fim do loop serem salvos no arquivo json.

import json
from selenium import webdriver
from bs4 import BeautifulSoup

driver = webdriver.Chrome(
    executable_path='C:/Users/{user}/Downloads/chromedriver_win32/chromedriver.exe')

array_elements = []

id = 1

while (id <= 118):
    url = "https://pubchem.ncbi.nlm.nih.gov/periodic-table/#popup={}".format(
        id)

    driver.get(url)

    content = driver.page_source
    soup = BeautifulSoup(content)

    def find_span(data_label, symbol):
        formated_string = data_label.format(symbol)
        href = soup.find(
            "a", {"data-label": formated_string})

        if href:
            span = href.find("span", {"class": "capitalized"})
            if span:
                return span.text
            else:
                return "N/A"
        else:
            return "N/A"

    def find_div(class_name):
        div = soup.find(
            "div", {"class": class_name})

        if div:
            return div.text
        else:
            return "N/A"

    symbol = find_div("f-3")
    name = find_div("f-125 f-lh-15")
    type_element = find_div("f-0875 capitalized f-lh-15")
    standard_state = find_span(
        'Content Link (List View): {}; Standard State Property Value', symbol)
    atomic_mass = find_span(
        "Content Link (List View): {}; Atomic Mass Property Value", symbol)
    electron_configuration = find_span(
        "Content Link (List View): {}; Electron Configuration Property Value", symbol)
    oxidation_states = find_span(
        "Content Link (List View): {}; Oxidation States Property Value", symbol)
    electronegativity = find_span(
        "Content Link (List View): {}; Electronegativity (Pauling Scale) Property Value", symbol)
    atomic_radius = find_span(
        "Content Link (List View): {}; Atomic Radius (van der Waals) Property Value", symbol)
    ionization_energy = find_span(
        "Content Link (List View): {}; Ionization Energy Property Value", symbol)
    electron_affinity = find_span(
        "Content Link (List View): {}; Electron Affinity Property Value", symbol)
    melting_point = find_span(
        "Content Link (List View): {}; Melting Point Property Value", symbol)
    boiling_point = find_span(
        "Content Link (List View): {}; Boiling Point Property Value", symbol)
    density = find_span(
        "Content Link (List View): {}; Density Property Value", symbol)
    year_discovered = find_span(
        "Content Link (List View): {}; Year Discovered Property Value", symbol)

    data = {"id": id, "symbol": symbol,
            "name": name,
            "type": type_element,
            "standardState": standard_state,
            "atomicMass": atomic_mass,
            "electronConfiguration": electron_configuration,
            "oxidationStates":  oxidation_states,
            "electronegativity": electronegativity,
            "atomicRadius": atomic_radius,
            "ionizationEnergy": ionization_energy,
            "electronAffinity": electron_affinity,
            "meltingPoint": melting_point,
            "boilingPoint": boiling_point,
            "density": density,
            "yearDiscovered": year_discovered}

    array_elements.append(data)
    id = id + 1

driver.close()
with open('data.json', 'w') as f:
    json.dump(array_elements, f)

Rodando script

Comando

python script.py

Dados exportados

Resultado

Repositórios
Tabela períodica 👩🏿‍💻
Web Scraping 👩🏿‍💻

Seletores css que facilitam a vida de um frontend

Marina Santana — Fri, 29 Jan 2021 15:07:54 +0000

A ideia por trás deste post, é apresentar 3 seletores que tornaram a minha vida como dev frontend mais fácil. 👍🏿

Seletor de Atributo

O seletor de atributo é um dos mais práticos que existem, basicamente você vai estilizar o elemento usando como identificador algum atributo que ele possui, que pode ser o name, type…, no código abaixo temos um exemplo, onde o botão com o name igual a first-button recebe o background vermelho (caso alguém não conheça variável em css recomendo utilizar).

<div>
  <h2>Seletor de Atributo</h2>
  <h3>Exemplo: [name='first-button']</h3>
  <div>
    <button name='first-button'>BOTÃO 1</button>
    <button name="second-button">BOTÃO 2</button>
  </div>
  </div>

button[name='first-button'] {
  background: var(--main-bg-red);
}

Seletor +

O seletor + é um dos meus seletores favoritos, ele serve para estilizar um elemento seguido de outro elemento, no código abaixo temos um exemplo, onde o botão seguido de outro botão recebe como background a cor vermelha.

button + button {
  background: var(--main-bg-red);
}

Seletor :nth-of-type

O seletor :nth-of-type é mais versátil de todos os seletores apresentados, ele é parecido com o :nth-child, mas a diferença é que ele pega diretamente o elemento em vez dos filhos dele, no código abaixo temos um exemplo, onde o botão que está na primeira posição recebe como background a cor vermelha.

button:nth-of-type(1){
  background: var(--main-bg-red);
}

Caso você tenha interesse em descobrir mais sobre os seletores de css recomento dar uma olhada nos links abaixo:

Mozilla
DevMedia
Maujor

Todo list utilizando Context API

Marina Santana — Fri, 29 Jan 2021 15:07:38 +0000

Acessar demo

A ideia por trás deste tutorial é ensinar como utilizar o Context API para facilitar o desenvolvimento da sua aplicação react e evitar em alguns casos a utilização do redux, para gerenciamentos simples de estados globais.

Context

O context é o responsável por gerenciar os estados globais da nossa aplicação, nele ficará o estado a ser compartilhado pelos componentes e os métodos utilizados por eles, nesse caso temos apenas um estado a ser compartilhado, que é o todos e os métodos relacionados a ele são, inserção, atualização e exclusão.

No TodoProvider ficam armazenados o estado e métodos que devem ser compartilhados entre os componentes, ele recebe o parâmetro children, que são os componentes filhos que vão poder consumir tudo que foi declarado dentro dele.

import React, { useState, createContext } from "react";

export const TodoContext = createContext();

const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([
    { id: 1, title: "Estudar react", done: true },
    { id: 2, title: "Estudar webpack", done: false },
    { id: 3, title: "Estudar context", done: false },
    { id: 4, title: "Estudar redux", done: false },
  ]);

  const saveTodo = (todo) => {
    const newTodo = {
      id: todo.length + 1,
      title: todo.title,
      done: false,
    };

    setTodos([...todos, newTodo]);
  };

  const removeTodo = (todoIndex) => {
    todos.splice(todoIndex, 1);

    setTodos([...todos]);
  };

  const checkTodo = (todoIndex) => {
    const todo = todos[todoIndex];
    todo.done = !todo.done;

    setTodos([...todos]);
  };

  return (
    <TodoContext.Provider value={{ todos, saveTodo, checkTodo, removeTodo }}>
      {children}
    </TodoContext.Provider>
  );
};

export default TodoProvider;

Componente do formulário

O componente do formulário é responsável para criação de um novo todo, ele consome o método saveTodo do context.

import React, { useContext, useState } from "react";
import { TodoContext } from "../context/TodoContext";

const TodoForm = () => {
  const { saveTodo } = useContext(TodoContext);
  const [todo, setTodo] = useState();

  const handleSubmit = (event) => {
    event.preventDefault();
    saveTodo(todo);
    event.target.reset();
  };

  const handleInputChange = (event) => {
    setTodo({
      ...todo,
      title: event.target.value,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="form-inline">
      <div>
        <input
          type="text"
          name="title"
          className="form-control"
          placeholder="Nova tarefa"
          onChange={handleInputChange}
        />
        <button type="submit" className="btn btn-default" />
      </div>
    </form>
  );
};

export default TodoForm;

Componente da lista

O componente da lista será responsável por exibir os dados que estão salvos no estado e também por atualizar e excluir algum item da lista, para exibição ele utiliza o map que é um recurso do próprio javascript, já para a exclusão e atualização ele utiliza os métodos removeTodo e checkTodo eles são importados do context.

import React, { useContext } from "react";
import { TodoContext } from "../context/TodoContext";

function TodoList() {
  const { todos, removeTodo, checkTodo } = useContext(TodoContext);

  const handleDelete = (todoIndex) => {
    removeTodo(todoIndex);
  };

  const handleDone = (todoIndex) => {
    checkTodo(todoIndex);
  };

  return (
    <ul>
      {todos.map((todo, index) => (
        <li className="list-group-item" key={index}>
          <div className={todo.done ? "done" : "undone"}>
            <span className="icon" onClick={() => handleDone(index)}></span>
            <span>{todo.title}</span>
            <button
              type="button"
              className="close"
              onClick={() => handleDelete(index)}
            >
              &times;
            </button>
          </div>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

Integração do context com os componentes

Por fim, é necessário fazer a integração dos componentes com o context, esse passo é o mais simples, importamos o nosso provider e colocamos os componentes que compartilham o mesmo estado dentro dele, depois disso todos esses componentes têm acesso ao estado e aos métodos que foram declarados no context.

import React from "react";
import TodoProvider from "./context/TodoContext";
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
import "./style.css";

const App = () => {
  return (
    <TodoProvider>
      <div className="todoForm">
        <h3 className="title">Lista de tarefas</h3>
        <TodoForm />
        <TodoList />
      </div>
    </TodoProvider>
  );
};

export default App;

Obs: Em aplicações mais complexas onde se tem a necessidade de gerenciar muitos estados de diferentes maneiras, é mais recomendado se utilizar o redux ao invés de context api.

Repositório
Todo List 👩🏿‍💻

Modais com React js

Marina Santana — Fri, 29 Jan 2021 00:44:52 +0000

A ideia por trás deste tutorial é a criação de um código dinâmico de modais em React js com a ajuda do Context. Aqui está um exemplo do que eu estou falando.

Componente da Modal

O componente da modal que é um Portal , recebe do Context o apelido da modal que deve ter o estado alterado e a sua ação que é abrir ou fechar, e do seu componente pai ela recebe o children(jsx a ser renderizado) e o apelido do mesmo, para verificar se é essa modal mesmo que o evento está chamando.

import React, { useContext } from "react";
import ReactDOM from "react-dom";
import { ModalContext } from "../context/modal-context";
import { ModalContainer } from "./modal-styles";

interface ModalContextProps {
    isShowing: any;
    handleModal: any;
}

const Modal = ({children, alias}: any) => {
  const { isShowing } = useContext<ModalContextProps>(ModalContext); 
  let arrayModal;

  isShowing.forEach((modal: any) => {      
    if (modal.action === 'open' && alias === modal.alias) {        
        arrayModal = (<ModalContainer>{children}</ModalContainer>
      );
    }
  });  

  return isShowing.length ? ReactDOM.createPortal(arrayModal, document.body) : null;
};

export default Modal;

Página

O página é responsável por enviar o evento que irá chamar ás modais, ela também é responsável por conter o componente que a modal vai renderizar, mencionado anteriormente o children, também é necessário que todo o componente de modal utilizado tenha o seu apelido declarado, como forma de identificação.

import React, { useContext } from 'react';
import { Container} from './home-styles';
import { ModalContext } from '../../context/modal-context';
import Modal from "../../components/modal";
import FirstPortal from "../portal/first-portal/first-portal";
import SecondPortal from '../portal/second-portal/second-portal';
import ThirdPortal from '../portal/third-portal/third-portal';

const FormDynamic: React.FC = () => {

  const { handleModal } = useContext(ModalContext);

  return (
    <Container>
       <button
          onClick={() => handleModal('open', 'first-modal')}>
            Abrir primeira modal
        </button>
       <button
          onClick={() => handleModal('open', 'second-modal')}>
            Abrir segunda modal
        </button>
       <button
          onClick={() => handleModal('open', 'third-modal')}>
            Abrir terceira modal
        </button>

        <Modal alias='first-modal'>
          <FirstPortal/>
        </Modal>
        <Modal alias='second-modal'>
          <SecondPortal/>
        </Modal>
        <Modal alias='third-modal'>
          <ThirdPortal/>
        </Modal>
  </Container>
  );
}

export default FormDynamic;

Conteúdo da modal

O conteúdo a ser renderizado na modal contém tudo o que deve ser exibido ao abrir a modal.

import React, { useContext } from 'react';
import { Portal } from '../portal-styles';
import { RiCloseLine } from "react-icons/ri";
import { ModalContext } from '../../../context/modal-context';

const FirstPortal: React.FC = () => {
  const { handleModal } = useContext(ModalContext);

  return (
  <Portal>
      <RiCloseLine onClick={() => handleModal('close', 'first-modal')}/>
      <h1>Primeira Modal</h1>
      <span>😃</span>
  </Portal>);
}

export default FirstPortal;

Hooks

O hook useModal é reponsável por armazenar os estados e as funções que irão acionar a modal.

import { useState } from "react";

const useModal = () => {
  let [isShowing, setIsShowing] = useState<Array<any>>([]);

  const handleModal = (action:string, alias: string) => {      
    if (action === 'close') {
        const newIsShowing =  isShowing.filter(
            modal => modal.alias !== alias
        );

        setIsShowing(newIsShowing);
    } else {
        setIsShowing([...isShowing, { action: 'open', alias }]);
    }
  };

  return {handleModal, isShowing };
};

export default useModal;

Context

O Context é responsável por ser um intermediário entre os estados e funções armazenados no useModal com o componentes que deve utilizá-lo.

import React, { ContextType, createContext, ReactChild, ReactChildren } from "react";
import useModal from "../hooks/useModal";

interface Props {
    children: ReactChild | ReactChildren;
}

export const ModalContext = createContext<any>({});

let ModalProvider = ({ children }: Props) => {

  const { handleModal, isShowing } = useModal();

  return (
    <ModalContext.Provider value={{ handleModal, isShowing }}>
      {children}
    </ModalContext.Provider>
  );
};

export default ModalProvider;