Forem: Guilherme Freitas

Como criar uma packege/lib npm ?

Guilherme Freitas — Sat, 06 May 2023 21:26:05 +0000

Como criar um Packege npm ?

Hoje veremos o comando NPM na criação de pacotes npm.

Criando sua conta no npm

Primeiro precisamos ter uma conta no site npm

Adicione sua conta ao npm na sua maquina

$ npm adduser [nome do usuario]

Criando o projeto

$ npx tsdx create mylib

Criando o componente

Nesse exemplo usaremos styled-components então instale antes de continuar o tutorial

$npm install styled-componentes && npm install @types/styled-componets

Agora sim, criamos o componente

import React from "react";
import { ReactNode } from "react";
import ThemeProvider from "../../provider/theme-provider";
import styled from "styled-components";

interface ButtonStyleProps {
  variant: string
}

export const ButtonStyle = styled.button<ButtonStyleProps>`
  ${({theme, variant})=>{
    return {
      color: theme[variant].text,
      backgroundColor: theme[variant].background,
      padding: '10px 20px',
      cursor: 'pointer',
      fontWeight: '500',
      margin: '10px 0',
      width: '100%',
    }
  }}
`

export interface ButtonProps {
  children: ReactNode
  variant?: 'dark' | 'light';
  onclick: (e:  React.MouseEvent<HTMLButtonElement>) => void;
  type?: 'submit' | 'button' | 'reset';
  name?: string;
}

export function Button({
  children,
  onclick,
  name='formulario',
  type = 'submit',
  variant = 'light'
}: ButtonProps){
  return (
    <ThemeProvider>
      <ButtonStyle
        name={name}
        type={type}
        onClick={onclick}
        variant={variant}>
        {children}
      </ButtonStyle>
    </ThemeProvider>
  )
}

Versionando a lib

Existem 3 formas de versionamento, patch, minor, major, cada uma com um propósito diferente. Conforme explicado abaixo.

O comando npm version patch

O comando serve para atualizar apenas uma Correção: quando corrigir falhas mantendo compatibilidade.
EX: 0.1.0
Apos o comando 0.1.1

$ npm version patch

O comando npm version minor

O comando serve para atualizar versão Menor: quando adicionar funcionalidades mantendo compatibilidade, e
EX: 0.1.0
Apos o comando 0.2.0

$ npm version minor

O comando npm version major

O comando serve para atualizar versão Maior: quando fizer mudanças incompatíveis na API,
EX: 0.1.0
Apos o comando 2.0.0

$ npm version major

O comando npm publish

O comando serve para publicar o projeto

$ npm publish

Criando um script

Podemos criar um script para rodar na linha de comando e agilizar as coisas.
Adicione na parte de script do packege.json a linha de código "deploy" : "npm version patch && npm publish" em seguida rode o comando:

$ npm run deploy

Assim enviaremos nosso projeto para o npm

Usando nossa lib

Para usar a lib basta instalar ela via npm ou yarn

$ npm install [nome da lib]

Como fazer webscraping em paginas dinâmicas e paginas estaticas

Guilherme Freitas — Thu, 13 Apr 2023 16:09:21 +0000

Oque é web scraping

É uma forma de mineração que permite a extração de dados de sites da web convertendo-os em informação estruturada para posterior análise. O tipo mais básico de coleta é o download manual das páginas, copiando e colando o conteúdo, e isso pode ser feito por

Diferença entre páginas estáticas e dinâmicas

Primeiro vamos temos que saber diferenciar a pagina que queremos realizar o scraping.

Um site estático é aquele com conteúdo estável, onde cada usuário vê exatamente a mesma coisa em cada página individual.
Um site dinâmico é aquele em que o conteúdo é carregado de forma dinâmica, permitindo que ele mude de acordo com o usuário.

Web scraping em páginas Estáticas

Para realizar um scraping de uma página estática vamos usar uma lib do python muito famosa para esta função que é a beautifulsoup4

Vamos rodar o comando abaixo para instalar a lib, de preferencia em um ambiente virtual.

$ pip install beautifulsoup4

Após realizar a instalação da lib podemos começar a usala, primeiro precisamos do nosso html, para isso usaremos o site do imdb com os melhores 250 filmes https://www.imdb.com/chart/top/?ref_=nv_mv_250.

Usaremos a lib urllib.request nativa do python para abrir um arquivo html.

from bs4 import BeautifulSoup
from urllib.request import urlopen

html = urlopen("https://www.imdb.com/chart/top/?ref_=nv_mv_250")
bs = BeautifulSoup(html, 'html.parser')

Temos que ve na nossa pagina html qual o valor da tag e da classe css que estão localizado os dados que queremos extrair, no caso dos nossos filmes, estão na tag td com classe titleColumn. Passamos esses valores para nos bs.find_all() e criamos uma lista para armazenar o resultado.

filmes = bs.find_all('td', {'class': 'titleColumn'})

lista_filmes = []

Agora é só iterar sobre nossa variavel filmes, informar para o elemento qual tag desejamos que ele pegue os dados a e passar o resultado em formato de string para nossa lista.

for filme in filmes:
    item = filme.findChildren("a")
    lista_filmes.append(item[0].text)

Podemos criar um arquivo txt e salvar os nomes dos filmes no mesmo arquivo.

arquivo_txt = open("nomes_filmes.txt", "w")

for filme in lista_filmes:
    arquivo_txt.write(f'{filme}\n')

E assim finalizamos o scraping de uma página html estática.

Web scraping em paginas Dinâmicas

Scraping em páginas dinâmicas exigem um pouco mais de complexidade, porém são os meus favoritos.

As paginas dinamicas possuem a presença do JavaScript, onde fazem requisições para o backend baseadas nos usuarios.
Sabendo disso, o que podemos fazer para realizar o scraping é simular a inteção humana.

Introdução as tecnologias utilizadas

Vamos a uma rápida introdução as tecnologias que usaremos.

O Selenium

O selenium tem o objetivo de automazinar a navegação no browser.
É conjunto de ferramentas de código aberto multiplataforma, usado para testar aplicações web pelo browser de forma automatizada.

O webdriver

WebDriver é uma API e protocolo que define uma interface de linguagem neutra para controlar o comportamento dos navegadores da web. Cada navegador é apoiado por uma implementação WebDriver específica, chamada de driver.

Começando

Nesse tutorial usaremos o Google Chrome.
Primeiro precisamos instalar o webdriver, para isso é necessario que você saiba a versão do seu navegador.

Entre nesse link para realizar o download do webdriver.

Caso esteja utilizando WSL2 você pode seguir esse tutorial para instalar o webdriver no WSL2

Agora precisamos instalar o selenium de preferencia em um ambiente virtual.

Nesse link se encontra a Documentação do seleminum para python.

Vamos instalar as libs do nosso projeto.

$ pip install selenium
$ pip install webdriver-manager
$ pip install beautifulsoup4

Vamos importar os modulos do nosso projeto.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from bs4 import BeautifulSoup
import time

O site que usaremos como exemplo sera uma tabela com resultados do NBA https://stats.nba.com/players/traditional/?PerMode=Totals&Season=2019-20&SeasonType=Regular%20Season&sort=PLAYER_NAME&dir=-1

Primeiro vamos configurar nosso webdriver.

install_chrome = ChromeDriverManager().install()
config = Service(install_chrome)
browser = webdriver.Chrome(service=config)

Caso você não queria que a janela do navegador abra, você pode usar colocar na configuração a opção --headless conforme está o código abaixo, porem nesse tutorial para fins didaticos usaremos sem essa opção.

install_chrome = ChromeDriverManager().install()
config = Service(install_chrome)
options = webdriver.ChromeOptions()
options.add_argument("--headless")

browser = webdriver.Chrome(service=config, options=options)

Agora iremos abrir nosso link do NBA e para um comportamente mais próximo do comportamento humano usaremos o time.sleep(2) para nosso script esperar 2 segundos antes de ir para o próximo passo

browser.get("https://stats.nba.com/players/traditional/?PerMode=Totals&Season=2019-20&SeasonType=Regular%20Season&sort=PLAYER_NAME&dir=-1")

time.sleep(2)

Podemos executar código javascript no nosso navegador, então vamos realizar uma rolangem de scroll na página.

browser.execute_script("window.scroll(0, 300)")

Para esse tutorial iremos extrair o nome dos jogadores. Para isso iremos pegar o valor xpath da nossa tag tbody, pois é nela que contem o valor dos resultados.

element = browser.find_element('xpath', '//*[@id="__next"]/div[2]/div[2]/div[3]/section[2]/div/div[2]/div[3]/table/tbody')

html = element.get_attribute('outerHTML')

Agora é só passar nossa variavel html para nossa bs e gerar nossos dados em um arquivo txt

bs = BeautifulSoup(html, 'html.parser')
nomes = bs.find_all("td", {'class' : 'Crom_text__NpR1_ Crom_primary__EajZu Crom_stickySecondColumn__29Dwf'})

lista_nomes = []

for nome in nomes:
    item = nome.findChildren('a')
    lista_nomes.append(item[0].text)

arquivo_txt = open('nomes_jogadores.txt', "w")

for nome in lista_nomes:
    arquivo_txt.write(f'{nome}\n')

Conclusão

Nesse post vemos como realizar um scraping em dois modelos de páginas, as estáticas e as dinâmicas.

22 comandos do Git que podem fazer a diferença no dia a dia

Guilherme Freitas — Tue, 04 Apr 2023 12:55:00 +0000

1. git init

O comando git init ajuda na criação do diretório .git inicial em um projeto novo. A pasta .git se encontra oculta e você deve desabilitar o recurso no caso do Windows para vê-la. No caso do Linux, você pode usar o comando 'll', 'ls -a' ou 'la' para visualizar os diretorios ocultos . É recomendado que ninguém adultere o conteúdo da pasta .git.

$ git init <nome do repositorio>

2. git clone

Este comando é usado para obter um repositório de uma URL existente.

$ git clone <url do repositorio>

Caso queira clonar apenas uma branch especifica:

$ git clone --branch <nome da branch> <url do repositorio>

Clone um repositorio com todas as branchs

$ git clone --mirror <URL_do_repositório>

3. git log

O comando “ git log ” lista todos o historico de commits do seu projeto, junto com algumas outras informações sobre como o commit foi feito.

$ git log

Voce também pode usar git log --oneline para reduzir o numero de informações

$ git log --oneline

4. git config

O comando ajuda a definir os valores de configuração para e-mail, nome de usuário, formatos de arquivo, algoritmo de arquivo preferencial e muitos outros atributos. O exemplo do comando é o seguinte:

$ git config --global user.name "Seu nome"
$ git config --global user.email "Seu e-mail"

5. git pull

O comando git pull é usado para buscar e baixar conteúdo de repositórios remotos e fazer a atualização imediata ao repositório local para que os conteúdos sejam iguais.

$ git pull <url do repositorio>

6. git status

Informa o status do branch, para saber se existem arquivos modificados.

$ git status

7. git add

O comando 'git add' ajuda a adicionar modificações de arquivo, atualmente no diretório de trabalho para o índice do usuário. O comando ajuda a adicionar arquivos não rastreados que estão prontos para serem confirmados no repositório remoto. O exemplo de uso do comando 'git add' é o seguinte.

$ git add <meuarquivo>

8. git commit

O comando git commit captura as alterações atualmente preparadas do projeto.

$ git commit <nome do arquivo> -m "<informações sobre o commit>"

Para fazer correção do ultimo commit.

$ git commit <nome do arquivo> -m "<informações sobre o commit> --amend"

9. git push

O comando envia todos os objetos locais modificados para o repositório remoto e, em seguida, aumentar suas ramificações.

$ git push origin main

Caso queira deletar uma branch remotamente voce pode usar o comando abaixo:

$ git push origin --delete <branch>

10. git restore

O comando retorna o arquivo informado.

$ git restore --source <sha do commit> <nome do arquvio>

11. git checkout

O comando serve para criar uma nova branch.

$ git checkout -b <nome da branch>

12. git switch

O comando muda para a branch informada.

$ git switch <nome da branch>

13. git remote

O comando é usado para conectar o repositório git local ao servidor remoto.

$ git remote add <variavel> <link servidor remoto>

Pode usar para mostrar

$ git remote show origin

14. git branch

O comando lista todas as branchs do projeto

$ git branch

Voce pode usar tambem $ git branch -d para deletar um branch local

15. git rm

Este comando é usado para excluir um arquivo específico do diretório de trabalho atual e preparar a exclusão.

$ git rmr <nomeDoArquivo>

16. git merge

O comando faz a união da branch atual com a branch informada.

$ git merge <branch>

17. git reset

Caso voce tenha adicionado todos os arquivos ao stage do commit voce pode usar git reset para remover um arquivo do stage.
Rode um git status após executar o comando para vê oque aconteceu

$ git reset -- <nome_arquivo>

18. git add -i

Agora caso queira remover mais de um arquivo do stage, você pode usar o git add -i usar a opção 3: revert que é o valor de revert e
digitar o numero dos arquivos que não quer commitar agora.

$ git add -i

Você pode adicionar ao stage utilizando a opão 4: add untracked

19. git reset --soft

Esse comando irá deletar os ultimos commits

$ git reset --soft HEAD~[numero de commits]

20. git reset --hard

Esse comando irá deletar todos os commits

$ git reset --hard

21. git fetch

O comando git fetch irá buscar todas as informações sobre branches e tags do repositório remoto (chamado de "origin" por padrão) e atualizar o seu repositório local com essas informações.

$ git fetch origin <repositorio git>

22. git branch -a

Você verá uma lista de todas as branches locais e remotas.

$ git branch -a

23. Bônus

Faça um git clone de uma branch especifica e depois suba o commit para branch desejada

git clone <URL do Repositório>
cd <Nome do Repositório>
git fetch --all
git branch -a
git checkout <nome-da-branch>
git add <arquivo-a-ser-commitado>
git commig -m <seu commit>
git push origin <nome-branch>