Como Criar um Conversor de Moedas com Django

By

Fala, dev em ascensão! Que tal aprender Django criando algo útil e muito bacana? Neste guia, vamos construir juntos um conversor de moedas que transforma valores de dólar em reais (e vice-versa), usando Python, Django e um pouco de CSS para deixar tudo bonito.

O objetivo é que você se divirta, aprenda a criar um projeto real e ainda possa mostrar isso para os amigos e familiares. Pronto para começar? Então bora!

O que é Django?

Antes de mergulharmos no código, deixa eu te explicar rapidinho: Django é um framework web escrito em Python. É tipo uma caixa de ferramentas cheia de coisas prontas que te ajudam a criar sites e aplicativos sem precisar reinventar a roda.

Com Django, você pode fazer coisas como:

  • Criar sites dinâmicos.
  • Conectar sua aplicação a bancos de dados.
  • Criar APIs (interfaces para conectar diferentes sistemas).

Em resumo: é uma mão na roda para quem quer programar para a web!

Preparando o Terreno

Antes de começar, você precisa instalar algumas ferramentas no seu computador:

  1. Python (versão 3.8 ou superior) - Download Python
  2. Pip (gerenciador de pacotes do Python).
  3. Django (nós vamos instalar mais à frente).
  4. Um editor de código. Recomendo o VS Code ou o PyCharm.


Criando um Ambiente Virtual

Um ambiente virtual é como uma "bolha" no seu sistema, onde você pode instalar pacotes sem interferir em outras partes do computador. Para criar um ambiente virtual, siga estes passos:

1. Abra o terminal ou prompt de comando.

2. Navegue até a pasta onde você quer criar o projeto. Por exemplo:

cd caminho/para/sua/pasta

3. Crie o ambiente virtual com o comando:

python -m venv env

Aqui, (env) é o nome do ambiente virtual. Você pode escolher outro nome, se preferir.

4. Ative o ambiente virtual:

  • Windows:
.\env\Scripts\activate
  • Mac/Linux:
source env/bin/activate

Você verá algo como (env) antes do cursor no terminal. Isso significa que o ambiente virtual está ativo.

Agora que o ambiente está pronto, podemos instalar o Django dentro dele.


Instalando Django

Com o ambiente virtual ativo, digite:

pip install django

Isso vai baixar e instalar o Django no seu ambiente virtual. Para verificar se deu certo, digite:

django-admin --version

Se aparecer algo como 5.1.5 (versão do Django neste momento, mas estes números podem mudar dependendo de quando você estará seguindo este tutorial), é porque tudo funcionou!


Criando o Projeto Django

Iniciando o Projeto

No terminal, escolha a pasta onde você quer criar o projeto e digite:

django-admin startproject conversor_moedas .

Agora, execute o servidor do Django:

python manage.py runserver

Abra seu navegador e acesse http://127.0.0.1:8000. Se você vir a página inicial do Django, parabéns! Seu projeto está no ar.


Configurando o App Conversor

No Django, dividimos nossos projetos em "apps", que são como módulos do site. Para criar o app do conversor, digite:

python manage.py startapp conversor

Isso vai criar uma pasta conversor dentro do projeto. Agora, precisamos dizer ao Django que esse app existe. Antes de seguirmos para os próximos passos, seria interessante trabalharmos a partir de agora com uma IDE para facilitar o desenvolvimento do nosso projeto. Neste tutorial, irei utilizar o Visual Studio Code, e para isto, irei digitar no terminal:

. code

Com o Visual Studio aberto, configure a pasta do seu projeto.

No terminal do VS Code, ative também o ambiente virtual.

  • Windows:
.\env\Scripts\activate
  • Mac/Linux:
source env/bin/activate

Agora vá até a pasta do projeto, cujo nome é conversor_moedas e procure pelo arquivo settings.py.

No arquivo settings.py, encontre a lista INSTALLED_APPS e adicione:'conversor',

Salve o arquivo.


Criando as Views

As views são responsáveis pela lógica da nossa aplicação, por isto elas serão muito importantes aqui e com elas podemos realizar o nosso objetivo que é converter valores entre dólares americanos (USD) e reais brasileiros (BRL), utilizando a cotação atual obtida de uma API. 

Abra o arquivo views.py dentro da pasta conversor para desenvolvermos o nosso código:

Importações Iniciais

O código começa com os seguintes imports:


from django.shortcuts import render
from django import forms
import requests

Instale a biblioteca requests através do terminal:

pip install requests

Veremos agora um pouco sobre o que significa as importações:

  • django.shortcuts.render: É usado para renderizar páginas HTML no Django. Basicamente, conecta o back-end com o front-end.
  • django.forms: Permite criar formulários no Django, como campos para entrada de dados.
  • requests: Biblioteca externa em Python para fazer requisições HTTP, usada aqui para buscar a cotação da moeda em tempo real.

Criando o Formulário de Conversão

O formulário é uma classe definida assim:


class FormularioConversor(forms.Form):
    valor = forms.FloatField(
        label='Valor', 
        min_value=0, 
        widget=forms.NumberInput(attrs={'placeholder': 'Digite o valor'})
    )
    tipo_conversao = forms.ChoiceField(
        label='Converter de',
        choices=(('usd_to_brl', 'Dólar para Real'), ('brl_to_usd', 'Real para Dólar'))
    )

Como funciona:

1.valor: É um campo onde o usuário insere um número decimal.

  • O min_value=0 impede que valores negativos sejam aceitos.
  • O placeholder mostra o texto "Digite o valor" dentro do campo de entrada.

2. tipo_conversao: É um campo para o usuário escolher o tipo de conversão:

  • usd_to_brl: Para converter de Dólar para Real.
  • brl_to_usd: Para converter de Real para Dólar.

Exemplo no formulário:

Se você abrir essa página no navegador, verá:
  • Um campo para digitar o valor.
  • Um menu de opções com "Dólar para Real" e "Real para Dólar".

Função para Obter a Cotação da Moeda

Aqui está a função que busca a cotação atual do Dólar em relação ao Real:


def obter_cotacao():
    try:
        response = requests.get('https://api.exchangerate-api.com/v4/latest/USD')
        response.raise_for_status()
        dados = response.json()
        return dados['rates']['BRL']
    except Exception as e:
        print(f"Erro ao obter a cotação: {e}")
        return None

Detalhes importantes:

requests.get: Faz uma requisição à API pública para pegar os dados de câmbio da moeda.A URL usada retorna informações sobre as taxas de câmbio do Dólar Americano.

response.json(): Extrai os dados da resposta no formato JSON (uma estrutura de dados muito usada na web).

return dados['rates']['BRL']: A função retorna a cotação do Real (BRL) em relação ao Dólar (USD).

Tratamento de erros: Caso a API falhe ou esteja indisponível, o programa imprime uma mensagem de erro no console e retorna None.

Exemplo de retorno: Se a cotação for 5.10, essa função retornará 5.10.

Função Principal: conversor_moeda

Essa é a função principal, que coordena o comportamento da página e do formulário.

def conversor_moeda(request):

Passo a passo da função:

1. Busca a cotação:

cotacao = obter_cotacao()

A cotação é buscada pela função obter_cotacao. Se a cotação for None (ou seja, a API falhou), uma página de erro é exibida:

if cotacao is None:
    return render(request, 'erro.html', {'mensagem': 'Erro ao obter a cotação. Tente novamente mais tarde.'})

2. Processa o formulário:

Quando o usuário envia o formulário (método POST), o código verifica se os dados preenchidos são válidos:

if request.method == 'POST':
    formulario = FormularioConversor(request.POST)
    if formulario.is_valid():
        valor = formulario.cleaned_data['valor']
        tipo_conversao = formulario.cleaned_data['tipo_conversao']

Aqui, cleaned_data pega os dados do formulário, já validados:

  • valor: É o número que o usuário digitou.
  • tipo_conversao: Mostra se o usuário escolheu "usd_to_brl" ou "brl_to_usd".

    • 3. Realiza a conversão: Com os dados em mãos, o código calcula o valor convertido:

    if tipo_conversao == 'usd_to_brl':
    resultado_conversao = f"{valor * cotacao:,.2f} BRL"
elif tipo_conversao == 'brl_to_usd':
    resultado_conversao = f"{valor / cotacao:,.2f} USD"

  • Se for de Dólar para Real: Multiplica o valor pela cotação.
  • Se for de Real para Dólar: Divide o valor pela cotação.

    • Formatação:

    O valor convertido é formatado com duas casas decimais e substitui os separadores decimais para o padrão brasileiro:

    • , como separador decimal.
    • . como separador de milhares.

    4. Exibe o formulário: Se o método da requisição não for POST, ou seja, quando o usuário abrir a página pela primeira vez, um formulário vazio é exibido:

    else:
    formulario = FormularioConversor()
    resultado_conversao = f"{valor / cotacao:,.2f} USD"

    Retorna a página renderizada: No final, a função retorna a página HTML com o formulário, o resultado da conversão (se houver) e a cotação atual:

    return render(request, 'conversor/conversor_moeda.html', {
    'formulario': formulario,
    'resultado_conversao': resultado_conversao,
    'cotacao': f"{cotacao:,.2f} BRL".replace(',', 'X').replace('.', ',').replace('X', '.')
})

    Resumo

    Este código:

  • Cria um formulário para conversão entre Dólar e Real.
  • Busca a cotação do Dólar em tempo real usando uma API.
  • Faz o cálculo com base no valor digitado e no tipo de conversão escolhido.
  • Exibe o resultado na tela junto com a cotação atual.

    • Exemplo Prático

    Este código:

    1. O usuário abre a página e vê:

    • Campo para digitar o valor: "100".
    • Opções: "Dólar para Real".
    • Cotações exibidas: 5.10 BRL.

    2. Ao clicar em "Converter", o resultado será:

    • R$510,00 BRL.

    Se optar por converter de Real para Dólar, o resultado seria:

    • $19,61 USD.

    Esse código é perfeito para aprender conceitos básicos de APIs, formulários e lógica condicional no Django!

    Aqui está o código completo do arquivo views.py

    from django.shortcuts import render
from django import forms
import requests

class FormularioConversor(forms.Form):
    valor = forms.FloatField(
        label='Valor', 
        min_value=0, 
        widget=forms.NumberInput(attrs={'placeholder': 'Digite o valor'})
    )
    tipo_conversao = forms.ChoiceField(
        label='Converter de',
        choices=(('usd_to_brl', 'Dólar para Real'), ('brl_to_usd', 'Real para Dólar'))
    )

def obter_cotacao():
    try:
        response = requests.get('https://api.exchangerate-api.com/v4/latest/USD')
        response.raise_for_status()
        dados = response.json()
        return dados['rates']['BRL']
    except Exception as e:
        print(f"Erro ao obter a cotação: {e}")
        return None

def conversor_moeda(request):
    resultado_conversao = None
    cotacao = obter_cotacao()

    if cotacao is None:
        return render(request, 'erro.html', {'mensagem': 'Erro ao obter a cotação. Tente novamente mais tarde.'})

    if request.method == 'POST':
        formulario = FormularioConversor(request.POST)
        if formulario.is_valid():
            valor = formulario.cleaned_data['valor']
            tipo_conversao = formulario.cleaned_data['tipo_conversao']

            if tipo_conversao == 'usd_to_brl':
                resultado_conversao = f"{valor * cotacao:,.2f} BRL".replace(',', 'X').replace('.', ',').replace('X', '.')
            elif tipo_conversao == 'brl_to_usd':
                resultado_conversao = f"{valor / cotacao:,.2f} USD".replace(',', 'X').replace('.', ',').replace('X', '.')
    else:
        formulario = FormularioConversor()

    return render(request, 'conversor/conversor_moeda.html', {
        'formulario': formulario,
        'resultado_conversao': resultado_conversao,
        'cotacao': f"{cotacao:,.2f} BRL".replace(',', 'X').replace('.', ',').replace('X', '.')
    })


    Configurando as URLs

    Abra o arquivo urls.py do projeto e adicione:

    from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('conversor.urls')), 
]

    Agora, na pasta do app conversor, crie um arquivo também com o nome urls.py e adicione:

    from django.urls import path
from . import views

urlpatterns = [
    path('', views.conversor_moeda, name='conversor_moeda'),
]


    Construindo o Template HTML

    Crie uma pasta chamada templates dentro do app conversor. Dentro dela, crie um arquivo chamado conversor_moeda.html com este conteúdo. A estrutura deverá ser assim: conversor -> templates -> conversor -> conversor_moeda.html. 

    <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conversor de Moeda</title>
    <link rel="stylesheet" href="{% static 'conversor/css/styles.css' %}">

    <!-- Importando fontes do Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Conversor de Moeda</h1>
        <p>Insira o valor e escolha o tipo de conversão.</p>
        <form method="post">
            {% csrf_token %}
            {{ formulario.as_p }}
            <button type="submit">Converter</button>
        </form>

        {% if resultado_conversao %}
            <div class="resultado">
                {{ resultado_conversao }}
            </div>
        {% endif %}

        {% if cotacao %}
            <p class="cotacao" style="margin-top: 20px;">Cotação atual do dólar: <strong>{{ cotacao }}</strong></p>
        {% endif %}
    </div>
    <footer>
        Desenvolvido por Alleart
    </footer>
</body>
</html>


    Adicionando Estilo com CSS

    Crie uma pasta static/conversor/css e dentro dela, um arquivo chamado styles.css. Adicione este código:

    /* Definindo o estilo global da página */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

/* Estilo do body */
body {
    background: linear-gradient(135deg, #d9eaf7, #f0f7fc);
    color: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

/* Container principal */
.container {
    background-color: white;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    text-align: center;
}

/* Título principal */
h1 {
    font-family: 'Lexend', sans-serif;
    color: #333;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Parágrafo de introdução */
p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
}

/* Alinhamento e espaçamento dos labels */
label {
    display: block;
    text-align: left; 
    margin-bottom: 5px; 
    font-weight: bold; 
    color: #2a3d66;
    font-size: 1rem; 
}

/* Adicionando espaçamento entre os campos do formulário */
form > p {
    margin-bottom: 20px; 
}


/* Estilo do formulário */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Estilo para o campo input */
input {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #5a91c1;
    border-radius: 5px;
    background-color: #f7fafd;
    color: #333;
    transition: all 0.3s ease;
    outline: none;
}

/* Efeito ao focar no input */
input:focus {
    border-color: #2a3d66;
    box-shadow: 0 0 5px rgba(42, 61, 102, 0.5);
}

/* Estilo para o campo select */
select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #5a91c1;
    border-radius: 5px;
    background-color: #f7fafd;
    color: #333;
    transition: all 0.3s ease;
    outline: none;
}

/* Estilo para o botão */
button {
    width: 100%;
    padding: 14px;
    font-size: 1.2rem;
    background-color: #5a91c1; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efeito ao passar o mouse sobre o botão */
button:hover {
    background-color: #2a3d66;
}

/* Efeito ao pressionar o botão */
button:active {
    background-color: #1d2b48;
    transform: scale(0.98);
}

/* Estilo para o resultado */
.resultado {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #d1ecf9; 
    border: 1px solid #5a91c1; 
    color: #2a3d66; 
}

/* Estilo das mensagens */
.message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    background-color: #f7fafd; 
    border: 1px solid #5a91c1;
    color: #2a3d66; 
}

/* Mensagem de sucesso */
.message.success {
    background-color: #d1ecf9; 
    border-color: #5a91c1; 
}

/* Mensagem de erro */
.message.error {
    background-color: #f9dede;
    border-color: #f44336;
    color: #a94442; 
}

/* Estilo do rodapé */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2a3d66; 
    color: white;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
}

    No início do arquivo HTML, adicione o seguinte código, para que o template carregue os estilos CSS:

    {% load static %}


    Testando o Projeto

    Agora que tudo está pronto, execute o servidor novamente:

    python manage.py runserver

    Acesse http://127.0.0.1:8000 no navegador e veja seu conversor funcionando!

    Caso prefira, pode baixar, clicando aqui, o código completo hospedado no GitHub. Aproveitei e deixei o código bem comentado para ficar mais fácil ainda de entender como funciona.

    Espero que  tenha gostado deste tutorial. Até a próxima! 

    Nenhum comentário:

    Postar um comentário