Pedro Cabido - freeCodeCamp.org

Enviar e-mails usando Python

Pedro Cabido — Sat, 12 Feb 2022 05:18:41 +0000

Artigo original: Send Emails Using Python

Tradução em português continental (europeu)

Como um exercício de aprendizagem, recentemente eu fui a fundo no Python 3 para ver como é que conseguiria enviar uma certa quantidade de e-mails. Poderão haver métodos mais simples de fazer isto em ambiente de produção. No entanto, este método resultou para mim.

Portanto, este é o cenário: temos os nomes e endereços de e-mail de um grupo de contactos. Vamos querer enviar uma mensagem para cada um desses contactos, enquanto adicionamos "Querido [nome]" ao topo da mensagem.

Por uma questão de simplicidade, guardaremos os detalhes dos contactos em um ficheiro em vez de em uma base de dados. Também poderemos guardar o template da mensagem que desejamos enviar num ficheiro.

O módulo smtplib do Python é basicamente tudo o que precisamos para enviar e-mails simples, sem linha de assunto ou outra informação adicional. Mas, para e-mails reais, precisamos de linhas de assunto e muitas outras informações - talvez até imagens e anexos.

É aqui que o módulo de e-mail do Python nos é útil. Atenção que não é possível enviar mensagens de e-mail usando exclusivamente o módulo de email. Precisamos de uma combinação do email e do smtplib.

É aconselhável ver a documentação oficial completa de ambos os módulos.

Aqui estão os quatro passos básicos para enviar e-mails usando Python:

Configurar o servidor SMTP e conectar-se à sua conta.
Criar o objecto da mensagem MIMEMultipart e adicionar-lhe os cabeçalhos apropriados para From, To e para o campo Subject.
Adicionar o corpo da mensagem.
Enviar a mensagem usando o servidor SMTP.

Agora, vou guiá-lo por todo o processo.

Vamos dizer que temos o ficheiro de contactos mycontacts.txt como o seguinte:

user@computer ~ $ cat mycontacts.txt
john johndoe@example.com
katie katie2016@example.com

Cada linha representa um único contacto. Temos o nome seguido do endereço de e-mail. Estamos a guardar tudo em letras minúsculas. Vamos deixar para a lógica do programa, converter qualquer campo para letras maiúsculas ou para início de frase se necessário. Tudo isto é muito fácil em Python.

De seguida, temos o template da mensagem no ficheiro message.txt.

user@computer ~ $ cat message.txt 

Querido ${PERSON_NAME}, 

Isto é uma mensagem de teste.
Tenha um bom fim-de-semana.

Cumprimentos.

Reparou na palavra “${PERSON_NAME}”? Isto é um template string em Python. Template strings podem ser trocadas facilmente com outras strings; neste exemplo, ${PERSON_NAME} vai ser trocado pelo nome da pessoa, como veremos de seguida.

Agora, vamos começar com o código em Python. Primeiro, precisamos de ler os contactos do ficheiro mycontacts.txt. Vamos também generalizar isto na sua própria função.

	# Function to read the contacts from a given contact file and return a
	# list of names and email addresses
	def get_contacts(filename):
	names = []
	emails = []
	with open(filename, mode='r', encoding='utf-8') as contacts_file:
	for a_contact in contacts_file:
	names.append(a_contact.split()[0])
	emails.append(a_contact.split()[1])
	return names, emails

view raw read_contacts.py, hospedado com ❤ no GitHub

A função get_contacts() recebe um nome de um ficheiro como argumento. Ela abrirá o ficheiro, lerá cada linha (ou seja, cada contacto), dividirá no nome e no e-mail e depois vai acrescentá-los em duas listas separadas. Finalmente, a função retorna as duas listas.

Também precisamos de uma função para ler o ficheiro do template (como o message.txt) e retornar um objecto Template feito com os seus conteúdos.

	from string import Template

	def read_template(filename):
	with open(filename, 'r', encoding='utf-8') as template_file:
	template_file_content = template_file.read()
	return Template(template_file_content)

view raw read_template.py, hospedado com ❤ no GitHub

Tal como a função anterior, esta também recebe o nome do ficheiro como argumento.

Para enviar o e-mail, vamos ter de usar o SMTP (Simple Mail Transfer Protocol). Como mencionado anteriormente, o Python fornece bibliotecas para gerir esta tarefa.

	# import the smtplib module. It should be included in Python by default
	import smtplib
	# set up the SMTP server
	s = smtplib.SMTP(host='your_host_address_here', port=your_port_here)
	s.starttls()
	s.login(MY_ADDRESS, PASSWORD)

view raw setup_smtp.py, hospedado com ❤ no GitHub

No código acima, vamos importar a smtplib e então criar a instância SMTP que vai encapsular a ligação SMTP. Ela recebe como parâmetro o endereço do host e o número da porta. Ambos dependem inteiramente nas definições de SMTP do nosso provedor de e-mail particular. No caso do Outlook, por exemplo, a linha 4 de cima seria:

s = smtplib.SMTP(host='smtp-mail.outlook.com', port=587)

Aqui, deverá ser utilizado o endereço do host e o número da porta do nosso fornecedor de e-mail para que tudo funcione.

MY_ADDRESS e PASSWORD acima, são duas variáveis que mantêm o endereço de e-mail completo e a password da conta que estamos a utilizar.

Agora, será um bom momento para extrair a informação de contacto e o template da mensagem usando as funções que definimos acima.

names, emails = get_contacts('mycontacts.txt')  # lê contactos
message_template = read_template('message.txt')

Agora, para cada um dos contactos, vamos enviar um e-mail separado.

	# import necessary packages
	from email.mime.multipart import MIMEMultipart
	from email.mime.text import MIMEText

	# For each contact, send the email:
	for name, email in zip(names, emails):
	msg = MIMEMultipart() # create a message

	# add in the actual person name to the message template
	message = message_template.substitute(PERSON_NAME=name.title())

	# setup the parameters of the message
	msg['From']=MY_ADDRESS
	msg['To']=email
	msg['Subject']="This is TEST"

	# add in the message body
	msg.attach(MIMEText(message, 'plain'))

	# send the message via the server set up earlier.
	s.send_message(msg)

	del msg

view raw send_email.py, hospedado com❤ no GitHub

Para cada name e email (do ficheiro de contactos), vamos criar um objecto MIMEMultipart, configurando os headers do tipo conteúdo From, To, Subject como um dicionário de palavras-chave. Depois, vamos anexar o corpo da mensagem ao objecto MIMEMultipart como simples texto. Será relevante ler a documentação para encontrar mais informação sobre outros tipos de MIME que é possível experimentar.

Também, de notar na linha 10 (do código acima), que estamos a substituir ${PERSON_NAME} com o nome que está a ser extraído do ficheiro de contactos usando o mecanismo de templates em Python.

Neste caso em particular, estamos a eliminar o objecto MIMEMultipart e a recriá-lo de cada vez que iterarmos através do ciclo for.

Assim que isto está feito, poderemos enviar mensagens usando a útil função do objecto SMTP send_message(), a qual criámos anteriormente.

Aqui está o código completo:

E aqui estamos! Acredito que o código agora é suficientemente claro.

Fique à vontade para copiar o código e alterá-lo como for necessário.

Para além da documentação oficial do Python, também quero mencionar este recurso (em inglês), que me ajudou imenso.

Feliz programação :)

Este post foi originalmente publicado aqui (em inglês). Obrigado pela leitura!

Tutorial de React Router – como usar render, redirect, switch, link e mais, com exemplos de código

Pedro Cabido — Thu, 10 Feb 2022 12:40:17 +0000

Artigo original: React Router Tutorial – How to Render, Redirect, Switch, Link, and More, With Code Examples

Tradução em português continental (europeu)

Se só agora começou com React, provavelmente a sua cabeça ainda está a dar voltas relativamente ao conceito de Single-Page App (SPA) ou Aplicação de Página Única.

Tradicionalmente, o roteamento funciona assim: vamos imaginar que escreveu /contact como URL. O navegador, então, fará uma solicitação GET para o servidor e este devolverá uma página HTML como resposta.

Com o novo paradigma de SPA, no entanto, todos as solicitações do URL são servidos usando código do lado do client.

Se aplicarmos isto ao contexto do React, cada página será um componente do React. O React-Router combina o URL e carrega o componente para essa página específica.

Tudo acontece tão rápido e na perfeição, que o utilizador obtém uma experiência parecida com uma aplicação nativa no navegador. Não há uma página branca entre as transições de roteamento.

Neste artigo, aprenderemos como usar o React-Router e seus componentes para criar uma Single-Page App. Para isso, vamos abrir o nosso editor de texto favorito e vamos começar.

Configurar o projecto

Vamos criar um novo projecto do React correndo o seguinte comando:

yarn create react-app react-router-demo

Usaremos o yarn para instalar dependências, mas, em alternativa, também poderá ser utilizado o npm.

A seguir, vamos instalar o react-router-dom.

yarn add react-router-dom

Para o estilo dos componentes, usaremos o framework Bulma CSS. Por isso, vamos adicioná-la também.

yarn add bulma

A seguir, vamos importar bulma.min.css no ficheiro index.js e limpar todo o código desnecessário do ficheiro App.js.

import "bulma/css/bulma.min.css";

Agora que temos o projecto configurado, vamos começar por criar alguns componentes da página.

Criar os componentes da página

Vamos criar a pasta pages dentro da pasta src, onde colocaremos todos os componentes da página.

Para esta demonstração, vamos criar três páginas - a página principal (Home), Sobre (About) e a página do perfil (Profile).

Vamos colar o seguinte código nos componentes Home e About.

// pages/Home.js

import React from "react";

const Home = () => (
  
    Esta é a página principal
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida,
      risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros
      nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum,
      lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio.
    
  
);

export default Home;

// pages/About.js

import React from "react";

const About = () => (
  
    Esta é a página Sobre
    
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus
      et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat,
      in efficitur arcu congue. Nam fermentum commodo egestas.
    
  
);

export default About;

Mais tarde, no artigo, criaremos a página de perfil.

Vamos começar por criar a barra de navegação para a nossa aplicação. Este componente fará uso do componente do react-router-dom.

Vamos criar a pasta "components" dentro da pasta src.

// components/Navbar.js

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
  	
      
      	{/* ... */}
      
    
  );
 };
 
 export default Navbar;

A variável de estado isOpen será usada para acionar o menu nos dispositivos móveis ou tablets.

Para isso, vamos adicionar o menu hamburguer.

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
  	
      
      
           setOpen(!isOpen)}
          >
            
            
            
          
        
      	{/* ... */}
      
    
  );
 };

Para adicionar o link no menu, vamos usar o componente do react-router-dom.

O componente NavLink fornece uma forma declarativa para navegar pela aplicação. É parecido com o componente Link, à excepção de que se pode aplicar um estilo activo no link se ele estiver activo.

Para especificar qual a rota para onde navegar, usamos a propriedade to e passamos o nome do caminho.

A propriedade activeClassName adicionará uma classe active no link se ele estiver activo.


	Home

No navegador, o componente NavLink é renderizado como uma marca com o atributo href com o valor que foi passado na propriedade to.

Além disso, aqui vamos especificar a propriedade exact para que combine precisamente com o URL.

Vamos adicionar todos os links e terminar o componente Navbar.

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    
      
        
           setOpen(!isOpen)}
          >
            
            
            
          
        

        
          
            
              Página Principal
            

            
              Sobre
            

            
              Perfil
            
          

          
            
              
                Log in
              
            
          
        
      
    
  );
};

export default Navbar;

De notar que adicionámos aqui um botão de Login. Voltaremos ao componente Navbar outra vez quando discutirmos as rotas protegidas, mais à frente neste guia.

Renderizar as páginas

Agora que o componente Navbar está configurado, vamos adicioná-lo à página e começar a renderizar as páginas.

Uma vez que a barra de navegação é um componente comum a todas as páginas, em vez de chamar o componente em cada uma das páginas, utilizaremos uma abordagem diferente e optaremos por renderizar a Navbar em um layout comum.

// App.js

function App() {
  return (
    <>
      
      
        {/* Renderize a página aqui */}
      
    
  );
}

Agora, vamos adicionar os componentes da página ao container.

// App.js

function App() {
  return (
    <>
      
      
        
      	
      
    
  );
}

Se virmos os resultados agora, vamos notar que ambos os componentes de página, da página principal e de Sobre são renderizados na página. Isso acontece porque ainda não adicionámos nenhuma lógica de roteamento.

Vamos precisar de importar o componente BrowserRouter do React Router para adicionar a capacidade de rotear os componentes. Tudo o que precisamos de fazer é envolver todos os componentes da página dentro do componente BrowserRouter. Isto fará com que todos os componentes da página tenham lógica de roteamento. Perfeito!

Mais uma vez, no entanto, nada vai mudar com os resultados - ainda veremos ambas as páginas a ser renderizadas. Precisamos de renderizar o componente da página só quando o URL combina com um caminho em particular. É aqui que o componente Route do React Router entra em jogo.

O componente Router tem uma propriedade path, que aceita o caminho da página. O componente da página deverá ser envolvido com o Router, como mostrado abaixo:

Vamos fazer o mesmo para o componente Home.

A propriedade exact acima, diz ao componente Router para combinar exactamente com o caminho. Se não adicionarmos a propriedade exact o caminho /, combinará com todas as rotas a começar com /, incluindo /about.

Se formos agora ver os resultados, continuaremos a ver ambos os componentes a serem renderizados. No entanto, se formos a /about, notaremos que somente o componente About é renderizado. Este comportamento acontece porque o roteador continua a combinar o URL com as rotas, mesmo depois de já ter combinado com a rota inicial.

Temos então de dizer ao roteador para parar de fazer combinações assim que combinar com uma rota. Isto é feito usando o componente Switch do React Router.

function App() {
  return (
    
      
      
        
          
            
          
          
            
          
        
      
    
  );
}

E aqui temos! Configurámos com sucesso o roteamento na nossa aplicação React.

Rotas protegidas e redirecionamentos

Ao trabalhar com aplicações do mundo real, teremos determinadas rotas por trás de sistemas de autenticação. Teremos rotas ou páginas que só conseguirão ser acedidas por um utilizador autenticado. Nesta secção, aprenderemos como implementar estas rotas.

Por favor, observe-se que não criaremos nenhum formulário de autenticação nem teremos um servidor para autenticar utilizadores. Em uma aplicação real, não implementaremos a autenticação da forma como é demonstrada aqui.

Vamos criar o componente da pagina de perfil, que so deverá ser acedido por um utilizador autenticado.

// pages/Profile.js

import { useParams } from "react-router-dom";

const Profile = () => {
  const { name } = useParams();
  return (
    
      Esta é a página de perfil
      
        
          {name}
        
        
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
          Pellentesque risus mi, tempus quis placerat ut, porta
          nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
          purus diam, et dictum felis venenatis efficitur. Aenean ac{" "}
          eleifend lacus, in mollis lectus. Donec sodales, arcu et
          sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
          magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales
          sem.
        
      
    
  );
};

Vamos pegar o nome do utilizador vindo do URL usando os parâmetros da rota.

Adicionamos a rota Profile (perfil) no roteador.

Neste momento a página de perfil pode ser acedida diretamente. Por isso, para a tornar uma rota autenticada, vamos criar um componente de alta ordem (em inglês, HOC ou high-order component) para envolver a lógica de autenticação.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    // ...
  };

  return AuthRoute;
};

Para determinar se um utilizador está autenticado ou não, usamos o token de autenticação guardado no navegador quando o utilizador se autentica. Se o utilizador não estiver autenticado, redirecionamos o utilizador para a página principal. O componente Redirect do React Router pode ser usado para redirecionar o utilizador para outro caminho.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    if (isAuth) {
      return ;
    } else {
      return ;
    }
  };

  return AuthRoute;
};

Também poderemos passar outros tipos de informação do utilizador, tais como o nome e o ID de utilizador, usando as propriedades do componente envolvente.

De seguida, usamos o HOC withAuth no componente de perfil.

import withAuth from "../components/withAuth";

const Profile = () => {
 // ...
}

export default withAuth(Profile);

Agora, se tentarmos visitar /profile/JohnDoe, seremos redirecionados para a página principal. Isto acontece porque o token de autenticação não está gravado na memória do nosso navegador.

Muito bem, então, vamos voltar para o componente da Navbar e adicionar as funcionalidades de Login e Logout. Quando o utilizador é autenticado, mostra o botão de Logout, mas quando o utilizador não está autenticado, mostramos o botão de Login.

// components/Navbar.js

const Navbar = () => {
	// ...
    return (
    	
        
        	{/* ... */}
            
            
              
                {!isAuth ? (
                  
                ) : (
                  
                )}
              
            
          
        
        
    );
}

Quando o utilizador clica no botão de Login, vamos colocar um token falso na memória local e redirecionar o utilizador para a página de perfil.

Não poderemos, no entanto, utilizar o componente Redirect neste caso – precisamos de direcionar o utilizador programaticamente. Por razões de segurança, os tokens sensíveis usados para autenticação são normalmente guardados nos cookies.

O React Router tem o HOC withRouter, que tira partido da API History ao injectar o objecto history nas propriedades do componente. Para além disso, passa para o componente envolvente as propriedades match e location.

// components/Navbar.js

import { NavLink, withRouter } from "react-router-dom";

const Navbar = ({ history }) => { 
  const isAuth = !!localStorage.getItem("token");

  const loginUser = () => {
    localStorage.setItem("token", "some-login-token");
    history.push("/profile/Vijit");
  };

  const logoutUser = () => {
    localStorage.removeItem("token");
    history.push("/");
  };
  
  return ( 
   {/* ... */}
  );
};

export default withRouter(Navbar);

E voilà! É isto. Também conquistámos a terra das rotas autenticadas. Assista a esta apresentação aqui e encontre o código completo neste repositório para referência.

Conclusão

Espero que agora já tenha uma pequena ideia de como funciona o roteamento em geral no lado do cliente e de como implementar o roteamento em React utilizando a biblioteca React Router.

Neste guia, aprendemos os componentes vitais do React Router como Route, withRouter, Link e por aí em diante, mas também alguns conceitos avançados como rotas autenticadas, que são necessárias para construir uma aplicação.

Verifica a documentação do React Router para obter uma visão mais detalhada de cada um dos componentes.

Pedro Cabido - freeCodeCamp.org

Enviar e-mails usando Python

Tutorial de React Router – como usar render, redirect, switch, link e mais, com exemplos de código

Configurar o projecto

Criar os componentes da página

Esta é a página principal

Esta é a página Sobre

Criar o componente Navbar

Renderizar as páginas

Rotas protegidas e redirecionamentos

Esta é a página de perfil

Conclusão