Aprenda a criar um redirecionador de links com Python! Descubra como fazer uma réplica do Bitly para criar links de redirecionamento curtos e personalizados.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vou te mostrar passo a passo como criar um redirecionador de links com Python.
Você aprenderá a criar uma versão semelhante ao Bitly, que permite criar links mais curtos que redirecionam para o link original. Essa ferramenta torna seus links mais visuais e fáceis de compartilhar.
Por exemplo, podemos pegar o link do Intensivão de JavaScript: https://dlp.hashtagtreinamentos.com/javascript/intensivao/inscricao-org e encurtá-lo para algo como bit.ly/intensivao-js-hashtag usando o site do Bitly.
Nesta aula, vou mostrar como esse sistema funciona e como criar seu próprio site para realizar esses redirecionamentos automáticos usando Python!
Antes de iniciar o desenvolvimento do nosso redirecionador de links com Python, é muito importante entender e planejar o que desejamos construir. Essa etapa é fundamental e nos orientará ao longo do processo de desenvolvimento do site.
O nosso site será composto por duas diferentes páginas. Começando pela página inicial, nela teremos um formulário que solicitará ao usuário o link original (o link que ele deseja modificar) e o caminho do link, que será o resultado dessa modificação.
Nessa mesma página, exibiremos o link final já modificado, permitindo que o usuário o copie e utilize conforme necessário.
Além disso, criaremos outra página que redirecionará o usuário para o link original a partir do link modificado que criamos.
Agora, vamos seguir adiante e aprender como implementar tudo isso!
A primeira etapa para iniciar o nosso redirecionador de links com Python é instalar a biblioteca Flask. O Flask é um micro framework muito conhecido e amplamente utilizado para desenvolvimento web com Python.
Para começar, crie um arquivo chamado main.py, onde desenvolveremos nosso código. Em seguida, abra o terminal do seu editor de códigos e digite o seguinte comando para instalar o Flask:
pip install flaskAgora que o Flask está instalado, vamos importá-lo para dentro do nosso projeto e criar o aplicativo, que será a base do nosso site.
Usando o seguinte código padrão, presente na documentação do Flask, podemos criar o aplicativo:
from flask import Flask
app = Flask(__name__)Para executar o nosso site, precisamos adicionar o seguinte trecho de código:
if __name__ == "__main__":
app.run(debug=True)Ao definir o parâmetro debug=True, podemos testar o nosso site durante o desenvolvimento.
Se você deseja entender melhor os processos de criação de sites com Flask, pode acessar esta aula aqui.
Agora podemos prosseguir para o próximo passo do desenvolvimento do nosso redirecionador de links com Python.
Para cada página que desejamos ter em nosso site, é necessário criar uma rota específica. Vamos começar criando a rota para a página inicial (homepage) e definindo a função que irá carregá-la.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def homepage():
return "Meu site no ar"
if __name__ == "__main__":
app.run(debug=True)Nesse código, definimos a rota padrão (“/”) e associamos a função homepage() a ela. Isso significa que quando acessarmos o link correspondente, a função homepage() será executada e exibirá a mensagem “Meu site no ar”.
Dessa forma ao executarmos o código, será gerado um link para acessar o nosso site em um servidor local.
Ao acessar esse link, veremos a homepage do site.
Porém, nós não queremos que nosso site exiba apenas um texto padrão. Queremos criar um formulário para que o usuário possa preenchê-lo e, em seguida, exibir o link modificado para que o usuário possa copiá-lo. Para isso, em vez de retornar um texto padrão, iremos retornar uma página HTML.
Para realizar isso, vamos importar a função render_template em nosso código e defini-la como o retorno de nossa função homepage, carregando nosso arquivo HTML.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def homepage():
return render_template("homepage.html")
if __name__ == "__main__":
app.run(debug=True)Além disso, precisamos criar o arquivo HTML que será a nossa página inicial. Para fazer isso, o Flask segue uma estrutura padrão na qual os arquivos HTML são armazenados dentro de uma pasta chamada templates.
Portanto, vamos criar uma pasta chamada templates dentro do nosso projeto e, dentro dela, o arquivo homepage.html. Certifique-se de seguir essa estrutura para que o Flask possa localizar corretamente o arquivo HTML.
Dentro do arquivo, vamos digitar ! e pressionar Enter para que o VS Code crie a estrutura básica do nosso arquivo HTML. Essa funcionalidade não é exclusiva do VS Code, outros editores de código, como o PyCharm, também possuem essa capacidade. No entanto, estou usando o VS Code para esta aula.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Para esse projeto, não nos preocuparemos tanto com a edição visual do nosso site, mas você pode personalizá-lo e fazer as edições no HTML como preferir. Vamos criar apenas um site básico para aprender a criar nosso encurtador e redirecionador de links com Python.
Dentro do HTML, adicionaremos apenas o básico que precisamos que seja exibido na homepage do nosso site. Isso inclui um título <h1>, um formulário <form> com dois subtítulos <h3> e dois inputs <input>. Um dos inputs será para o link original e o outro para o caminho do link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Redirecionador de Links </h1>
<form>
<h3>Link Original</h3>
<input type="text" required placeholder="https://meulink.com">
<h3>Caminho do Link</h3>
<input type="text" required placeholder="/caminho-do-link">
</form>
</body>
</html>Observe que as tags <input> não precisam de uma tag de fechamento. E dentro dessas tags, passamos alguns atributos, como type=”text” (para um input do tipo texto), required (para tornar os inputs obrigatórios) e placeholder (para exibir um texto enquanto o usuário não digita nada dentro deles).
Vamos salvar esse arquivo HTML e nosso arquivo main.py. Em seguida, acesse a página do nosso site novamente e atualize-a para ver como ficou até agora.
Agora vamos adicionar um botão para o usuário enviar o formulário dentro do nosso arquivo HTML. Adicione uma tag de botão <button> com o atributo type=”submit”, indicando que é um botão que enviará informações para o nosso site.
Além disso, precisamos adicionar alguns atributos à tag <form> para que o formulário envie as informações corretamente.
O parâmetro method=”POST” define que o método usado pelo formulário é o POST, pois ele enviará informações. O argumento action define o link para onde o formulário será redirecionado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Redirecionador de Links </h1>
<form method="POST" action="{{ url_for('homepage') }}">
<h3>Link Original</h3>
<input type="text" required placeholder="https://meulink.com">
<h3>Caminho do Link</h3>
<input type="text" required placeholder="/caminho-do-link">
<button type="submit">Enviar</button>
</form>
</body>
</html>Note que usamos o valor “{{ url_for(‘homepage’) }}” como argumento para o atributo action. Isso é uma estrutura do Flask que permite passar uma variável Python dentro do código HTML.
Essa estrutura é uma forma mais inteligente de redirecionar o usuário para a nossa homepage. Em vez de passarmos a URL diretamente, utilizamos a função url_for para atribuir essa variável. Isso evita problemas caso o endereço para a nossa página inicial seja alterado, garantindo que a página seja encontrada quando o formulário for enviado.
Atenção: Repare que, como usamos aspas duplas fora da variável, dentro dela precisamos utilizar aspas simples.
Entretanto, não é suficiente apenas incluir essa variável no nosso código HTML. Precisamos defini-la no nosso arquivo main.py. Para isso, vamos importar a função url_for do Flask no nosso arquivo Python.
A função url_for serve para obter o link associado a uma função específica na nossa página. Neste caso, url_for está pegando o link atribuído à função homepage.
Caso futuramente o link para a página inicial seja alterado, essa função irá automaticamente obter o novo link, desde que o nome da função associada à página inicial não seja alterado. No nosso caso, a função é homepage().
from flask import Flask, render_template, url_for
app = Flask(__name__)
@app.route("/")
def homepage():
return render_template("homepage.html")
if __name__ == "__main__":
app.run(debug=True)Dessa forma, nosso formulário está pronto. No entanto, observe que nosso formulário envia informações para a homepage do nosso site, mas até o momento não há um tratamento adequado na rota da nossa homepage para receber essas informações.
Para isso, precisamos permitir os métodos GET e POST na nossa rota. O método GET é utilizado para obter informações da nossa página, enquanto o método POST permite o envio do formulário.
Além disso, é necessário importar o objeto request do Flask, que será responsável por gerenciar a requisição feita pelo usuário ao nosso site. Esse objeto contém as informações sobre a requisição do usuário, incluindo os dados enviados por meio do formulário criado.
from flask import Flask, render_template, url_for, request
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def homepage():
if request.method == "POST":
link_original = request.form["link_original"]
caminho = request.form["caminho_do_link"]
else:
return render_template("homepage.html")
if __name__ == "__main__":
app.run(debug=True)Com o if que construímos dentro da nossa função homepage, verificamos se a requisição do usuário é do tipo POST. Caso seja, iremos gerar o link pronto para o usuário, ou seja, o link final após as modificações. Caso contrário (else), ou seja, caso a requisição não seja do tipo POST, o usuário será direcionado para a homepage do nosso site.
No entanto, ainda não temos nenhum campo no nosso arquivo HTML definido como “link_original” ou “caminho_do_link”. Portanto, precisamos editar nossas tags de input, adicionando a elas o parâmetro name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Redirecionador de Links </h1>
<form method="POST" action="{{ homepage }}">
<h3>Link Original</h3>
<input type="text" required placeholder="https://meulink.com" name="link_original">
<h3>Caminho do Link</h3>
<input type="text" required placeholder="/caminho-do-link" name="caminho_do_link ">
<button type="submit">Enviar</button>
</form>
</body>
</html>Dessa forma, quando o usuário submeter o formulário, nosso site irá capturar as informações desses inputs para gerar o link final que será passado ao usuário. No entanto, dentro do nosso site, é necessário relacionar o link original com o caminho do link.
O correto seria armazenar essa informação dentro de um banco de dados, no qual atribuiríamos ao caminho do link o link original para o qual ele deve redirecionar. Como estamos fazendo apenas um exemplo para demonstrar como é feito, irei utilizar um dicionário Python.
from flask import Flask, render_template, url_for, request
app = Flask(__name__)
links = {}
@app.route("/", methods=["GET", "POST"])
def homepage():
if request.method == "POST":
link_original = request.form["link_original"]
caminho = request.form["caminho_do_link"]
links[caminho] = link_original
return f"Seu link é: {request.url_root}{caminho}"
else:
return render_template("homepage.html")
if __name__ == "__main__":
app.run(debug=True)Dessa forma, estamos criando um dicionário Python vazio. Quando o usuário submete o link original juntamente com o novo caminho para esse link, armazenamos essas informações em nosso dicionário, utilizando o caminho do link como chave e o link original como valor.
Além disso, precisamos retornar para o usuário o link final gerado, que é composto pelo endereço_do_nosso_site/caminho. Para isso, utilizamos request.url_root, que nos permite obter o link original da requisição (URL da homepage), e concatenamos com o caminho criado.
Vamos salvar nosso arquivo main.py e nosso arquivo homepage.html, e atualizar nosso site para testar se tudo está funcionando corretamente. Neste exemplo, utilizaremos o link do início da aula sobre o Intensivão de JavaScript.
Podemos observar que o site está funcionando corretamente conforme o planejado. Ele gerou o link encurtado com o caminho personalizado que definimos.
É importante ressaltar que, como não fizemos o deploy e a hospedagem desse site, ele está gerando o link com o nosso servidor local. No caso de um deploy, o “127.0.0.1:5000” seria substituído pelo nome do nosso domínio.
Entretanto, nosso redirecionador de links com Python ainda não está completo. Embora ele gere o link final corretamente, ao tentar acessar esse link, iremos nos deparar com um erro de página não encontrada.
Isso ocorre porque ainda não criamos a página responsável pelo redirecionamento. Vamos criá-la agora. Dentro do nosso arquivo main.py, importaremos o redirect e definiremos uma segunda rota.
from flask import Flask, render_template, url_for, request, redirect
app = Flask(__name__)
links = {}
@app.route("/", methods=["GET", "POST"])
def homepage():
if request.method == "POST":
link_original = request.form["link_original"]
caminho = request.form["caminho_do_link"]
links[caminho] = link_original
return f"Seu link é: {request.url_root}{caminho}"
else:
return render_template("homepage.html")
@app.route("/<caminho>")
def redirecionar(caminho):
link_original = links.get(caminho)
if link_original:
return redirect(link_original)
else:
return "Página não encontrada", 404
if __name__ == "__main__":
app.run(debug=True)A rota “/<caminho>” será responsável por realizar o redirecionamento. Como esse caminho é dinâmico, utilizaremos <caminho> como variável na rota. Dessa forma, podemos passar esse caminho para a função redirecionar().
Dentro dessa função, verificaremos se o caminho presente na URL existe dentro do dicionário links. Para isso, faremos uma busca utilizando o método get() e armazenaremos o resultado na variável link_original.
Se o caminho for encontrado no dicionário, o get() retornará o link original correspondente a esse caminho. Caso não encontre, a variável link_original permanecerá vazia.
Por isso, criamos o bloco condicional if dentro da função redirecionar(). Ele verifica se a variável link_original não está vazia. Se não estiver vazia, significa que o caminho foi encontrado no dicionário links. Nesse caso, redirecionamos o usuário para o link original que foi modificado.
Caso a variável link_original esteja vazia, significa que o caminho não foi encontrado no dicionário. Assim, retornamos a mensagem de “Página não encontrada” juntamente com o código de erro HTTP 404.
Agora, podemos salvar nosso arquivo main.py, atualizar o site e acessar novamente o link do Intensivão de JavaScript que criamos anteriormente. Desta vez, ele nos redirecionará corretamente para a página desejada.
Nosso redirecionador de links com Python agora está totalmente funcional. Para garantir que o link original inserido pelos usuários seja válido, podemos realizar uma validação no formulário HTML. Podemos atualizar o tipo de input do link original de text para url.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Redirecionador de Links </h1>
<form method="POST" action="{{ homepage }}">
<h3>Link Original</h3>
<input type="url" required placeholder="https://meulink.com" name="link_original">
<h3>Caminho do Link</h3>
<input type="text" required placeholder="/caminho-do-link" name="caminho_do_link">
<button type="submit">Enviar</button>
</form>
</body>
</html>Agora, quando o usuário tentar inserir algo que não seja um link válido, o site irá detectar e informá-lo, não permitindo a criação de um link personalizado inválido.
Nessa aula, mostrei como criar um redirecionador de links com Python, passo a passo utilizando o framework Flask.
Criamos uma versão simplificada do Bitly, permitindo que os usuários encurtem e gerem links personalizados que redirecionam para o link original correspondente. Essa ferramenta é extremamente útil para tornar os links mais atraentes e visualmente agradáveis aos usuários.
Esse foi um projeto simplificado do que podemos fazer com Flask. Poderíamos ter criado sistemas de autenticação, validação pelos formulários do Flask, entre outras funcionalidades. Além de fazer a criação de banco de dados e o deploy desse projeto.
Caso você tenha interesse em saber como fazer tudo isso e construir um site completo com Flask do zero, acesse nosso minicurso gratuito.
Para acessar outras publicações de Python, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador