Introdução
Neste projeto, aprenderemos como criar um encurtador de URL usando Python e Flask. Um encurtador de URL é uma ferramenta que pega uma URL longa e a converte em uma URL mais curta e gerenciável. Isso pode ser útil para compartilhar links em mídias sociais ou em e-mails, bem como para tornar URLs longas mais amigáveis.
👀 Pré-visualização
🎯 Tarefas
Neste projeto, você aprenderá:
- Como configurar uma pasta de projeto e criar os arquivos necessários para o encurtador de URL.
- Como configurar um banco de dados SQLite para armazenar as URLs originais e suas URLs encurtadas correspondentes.
- Como gerar URLs curtas usando caracteres aleatórios.
- Como criar uma página de índice onde os usuários podem enviar uma URL para ser encurtada e exibir a URL encurtada.
- Como redirecionar os usuários para a URL original quando eles digitam uma URL encurtada.
- Como criar uma página de histórico para exibir todas as URLs que foram encurtadas.
- Como executar o projeto e testá-lo em um navegador da web.
🏆 Conquistas
Após concluir este projeto, você será capaz de:
- Entender como configurar um projeto Flask e criar os arquivos necessários.
- Utilizar SQLite para criar um banco de dados e executar consultas.
- Gerar caracteres aleatórios para as URLs curtas.
- Desenvolver templates HTML e estender templates base.
- Lidar com envios de formulários e exibir conteúdo dinâmico usando Flask.
- Implementar redirecionamento de URL com base na entrada do usuário.
Criando os Arquivos do Projeto
Para começar, precisamos criar uma pasta de projeto e adicionar os seguintes arquivos a ela:
app.py: Este arquivo conterá todo o código para o nosso encurtador de URL.templates/index.html: Este arquivo conterá o código HTML para a página de índice do nosso site.templates/history.html: Este arquivo conterá o código HTML para a página de histórico do nosso site.templates/base.html: Este arquivo conterá o código HTML base que será usado tanto emindex.htmlquanto emhistory.html.
cd ~/project
touch app.py
mkdir templates
touch templates/index.html templates/history.html templates/base.html
Configurando o Banco de Dados
Nosso encurtador de URL precisará de um banco de dados para armazenar as URLs originais e suas URLs encurtadas correspondentes. Usaremos SQLite para nosso banco de dados, que é um sistema de gerenciamento de banco de dados leve e fácil de usar.
Para configurar o banco de dados, primeiro precisamos importar os módulos necessários em app.py:
## app.py
from flask import Flask, render_template, request, redirect
import string
import random
import sqlite3
Em seguida, precisamos conectar-nos ao banco de dados SQLite e criar um objeto cursor:
## Connect to the SQLite database
conn = sqlite3.connect("urls.db", check_same_thread=False)
db = conn.cursor()
Então, podemos criar uma tabela em nosso banco de dados para armazenar as URLs:
## Create the URLs table if it doesn't exist
db.execute(
"""CREATE TABLE IF NOT EXISTS urls
(id INTEGER PRIMARY KEY AUTOINCREMENT,
original_url TEXT NOT NULL,
short_url TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)"""
)
conn.commit()
Gerando URLs Curtas
Para gerar URLs curtas, usaremos uma combinação de letras e números aleatórios. Isso pode ser alcançado usando os módulos string e random em Python. Criaremos uma função chamada generate_short_url() que retornará uma string aleatória de 6 caracteres:
def generate_short_url():
characters = string.ascii_letters + string.digits
short_url = "".join(random.choice(characters) for _ in range(6))
return short_url
Criando a Página de Índice
A página de índice do nosso site permitirá que os usuários enviem uma URL para ser encurtada. Ela também exibirá a URL encurtada assim que for gerada. O código HTML para esta página pode ser encontrado em templates/index.html.
Primeiro, precisamos estender o template base.html e criar um formulário para os usuários enviarem suas URLs:
{% extends "base.html" %} {% block content %}
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-900 mb-8">Shorten Your URL</h1>
<form action="/" method="POST" class="w-full max-w-sm mx-auto">
<div
class="flex items-center border-2 border-blue-500 rounded overflow-hidden"
>
<input
type="text"
name="original_url"
placeholder="Enter URL"
class="appearance-none bg-transparent border-none w-full text-gray-700 py-2 px-4 leading-tight focus:outline-none"
/>
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r focus:outline-none"
>
Shorten
</button>
</div>
</form>
{% if short_url %}
<div class="mt-4">
<p class="text-lg text-gray-700">
Short URL:
<a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
>{{ request.host_url }}{{ short_url }}</a
>
</p>
</div>
{% endif %}
</div>
{% endblock %}
Em index.html, temos um formulário com um único campo de entrada para o usuário inserir sua URL. O formulário será enviado para a mesma página, então definimos o atributo action como /. Também definimos o atributo method como POST para que os dados do formulário sejam enviados no corpo da requisição.
Agora, precisamos adicionar templates/base.html:
<!doctype html>
<html>
<head>
<title>URL Shortener</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav class="p-6 bg-white flex justify-between items-center">
<a href="/" class="text-2xl font-bold text-gray-900">URL Shortener</a>
<div>
<a href="/" class="text-gray-800 mr-6">Home</a>
<a href="/history" class="text-gray-800">History</a>
</div>
</nav>
<main class="container mx-auto max-w-xl pt-8 min-h-screen">
{% block content %} {% endblock %}
</main>
</body>
</html>
Em base.html, temos uma barra de navegação no topo da página com links para a página inicial e a página de histórico. Também temos um elemento main que conterá o conteúdo de cada página. O bloco content é onde o conteúdo de cada página será inserido.
Também precisamos adicionar o código necessário em app.py para lidar com os envios de formulários e gerar a URL encurtada:
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
original_url = request.form["original_url"]
short_url = generate_short_url()
## Insert the original and short URLs into the database
db.execute(
"INSERT INTO urls (original_url, short_url) VALUES (?, ?)",
(original_url, short_url),
)
conn.commit()
return render_template("index.html", short_url=short_url)
return render_template("index.html")
Em index(), verificamos se o método da requisição é POST. Se for, pegamos a URL original dos dados do formulário e geramos uma URL curta. Em seguida, inserimos as URLs original e curta no banco de dados e renderizamos o template index.html com a URL curta.
Redirecionando para a URL Original
Quando um usuário digita uma URL encurtada, queremos redirecioná-lo para a URL original correspondente. Para fazer isso, precisamos criar uma função que recuperará a URL original do banco de dados com base na URL encurtada:
@app.route("/<short_url>")
def redirect_to_url(short_url):
## Retrieve the original URL from the database based on the short URL
db.execute("SELECT original_url FROM urls WHERE short_url=?", (short_url,))
result = db.fetchone()
if result:
original_url = result[0]
return redirect(original_url)
return render_template("index.html")
Criando a Página de Histórico
A página de histórico exibirá todas as URLs que foram encurtadas, juntamente com suas URLs originais e a data em que foram adicionadas. O código HTML para esta página pode ser encontrado em templates/history.html.
Primeiro, precisamos estender o template base.html e adicionar uma tabela para exibir as URLs:
{% extends "base.html" %} {% block content %}
<div class="w-full overflow-x-auto">
<table class="w-full bg-white rounded shadow overflow-hidden">
<thead class="bg-gray-200">
<tr>
<th
class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
>
Original URL
</th>
<th
class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
>
Short URL
</th>
<th
class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
>
Date
</th>
</tr>
</thead>
<tbody>
{% for result in results %}
<tr class="hover:bg-gray-100">
<td class="border-t">
<p class="py-3 px-4">{{ result[0] }}</p>
</td>
<td class="border-t">
<a
href="{{ request.host_url }}{{ result[1] }}"
class="py-3 px-4 text-blue-500 hover:text-blue-700"
>{{ request.host_url }}{{ result[1] }}</a
>
</td>
<td class="border-t">
<p class="py-3 px-4">{{ result[2] }}</p>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
Também precisamos adicionar o código necessário em app.py para recuperar as URLs do banco de dados e passá-las para o template:
@app.route("/history")
def history():
## Retrieve all URLs from the database, ordered by the most recent ones
db.execute(
"SELECT original_url, short_url, created_at FROM urls ORDER BY created_at DESC"
)
results = db.fetchall()
return render_template("history.html", results=results)
Executando o Projeto
Adicione o seguinte código ao final de app.py:
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=8080)
Depois que os módulos estiverem instalados, podemos executar nosso projeto executando python app.py em nosso terminal. Isso iniciará o servidor de desenvolvimento Flask e nosso site estará acessível em http://localhost:8080.
Mude para a aba 8080 e atualize a página. Você deve ver o seguinte:
Resumo
Neste projeto, aprendemos como criar um encurtador de URL usando Python e Flask. Primeiro, configuramos os arquivos de projeto e o banco de dados necessários, depois criamos funções para gerar URLs curtas e lidar com envios de formulários. Também aprendemos como recuperar e exibir as URLs do banco de dados. Com este projeto, você agora pode criar seu próprio encurtador de URL e personalizá-lo ao seu gosto.
