🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[Python] Introdução ao Módulo json! Domine o Formato de Dados Essencial para Desenvolvimento Web

Para executar Python no prompt de comando ou PowerShell no seu PC, é necessário baixar e instalar o Python.
Se ainda não o fez, consulte o artigo Instalação do Python e configuração do ambiente de desenvolvimento para instalar o Python.

Olá! Estou compartilhando o conhecimento que adquiri no processo de criar um site do zero com a ajuda da IA, mesmo sem saber nada de programação até poucos meses atrás.

O que vem à sua mente quando ouve "JSON"? Você pode pensar: "Parece complicado..." ou "Isso é coisa de especialista em web, né?". Eu também pensava assim no início. Mas quando se trata de desenvolvimento web, especialmente para criar "sites dinâmicos" modernos, o JSON é inevitável e, depois que você se familiariza, torna-se um parceiro incrivelmente confiável.

Neste artigo, vou explicar como manipular dados JSON com maestria usando o módulo json do Python, da maneira mais clara possível, compartilhando os pontos em que eu mesmo travei. O objetivo é que, ao terminar de ler, você possa colocar a mão na massa e sentir de verdade: "Ah, então é assim que se usa JSON!". Preparei muitos "códigos funcionais" que você pode copiar e colar, então vamos experimentar juntos aquele momento "Funcionou!".

Afinal, o que é JSON? E por que é necessário para o desenvolvimento web?

Vamos deixar as definições difíceis de lado por um momento. Simplificando bastante, JSON é uma "linguagem comum para que diferentes programas troquem informações".

Por exemplo, digamos que o Sr. Python, rodando no backend do seu site (o servidor), tenha as informações do perfil de um usuário (nome, idade, hobbies, etc.). Você quer passar essa informação para o Sr. JavaScript, que está rodando no frontend (o navegador) que o usuário vê, para exibir um belo cartão de perfil.

  1. O Sr. Python traduz as informações que ele tem para a linguagem universal "JSON" e as envia.
  2. O Sr. JavaScript recebe esse JSON e o traduz de volta para uma linguagem que ele entende.
  3. A informação é transmitida com sucesso e o cartão de perfil é exibido!

Dessa forma, o JSON é uma "ponte" indispensável para a troca de dados entre o lado do servidor e o front-end. Ao buscar dados como previsões do tempo ou notícias de uma API da Web (um mecanismo para obter dados de serviços externos), este formato JSON é usado em quase 100% dos casos. Conveniente, não é?

Os 4 Feitiços Básicos para Manipular JSON em Python

O Python já vem com um módulo padrão chamado json para lidar com este formato super útil. Não é necessário pip install; você pode usá-lo imediatamente, apenas escrevendo import json.

Este módulo tem muitos recursos, mas, como iniciante, você só precisa memorizar as quatro funções (feitiços mágicos) a seguir para começar!

Pensou: "Nossa, os nomes são parecidos e confusos!"? Tudo bem, eu também pensei (risos). Existe uma maneira fácil de lembrar.

Basta lembrar que os que terminam com s (dumps, loads) são para lidar com Strings. Os que não têm o s lidam diretamente com arquivos. Agora você não vai mais se confundir!

1. Convertendo Dados do Python para uma String JSON: json.dumps()

Primeiro, vamos tentar converter um dicionário do Python (dict) em uma string no formato JSON. Este é o básico do básico. 


# python-code
import json

# Dados de dicionário em Python
user_data = {
    "name": "CopiCode Zé",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# Converte o dicionário Python para uma string JSON
json_string = json.dumps(user_data)

print(json_string)
# Vamos verificar o tipo também
print(type(json_string))

Resultado da Execução:


{"name": "CopiCode Z\u00e9", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
<class 'str'>

[Ponto de Dificuldade #1] Caracteres não-ASCII aparecem como `\uXXXX`!

Se você olhou o resultado acima e pensou: "Ué, por que o nome parece com símbolos estranhos?", você tem um ótimo olho para detalhes. Este é um tipo de "texto corrompido", e foi algo em que fiquei muito preso no início.

A razão é que o json.dumps(), por padrão, "escapa" qualquer caractere não-ASCII (basicamente, caracteres além das letras e números padrão do inglês). Para consertar isso, você adiciona um pequeno truque: ensure_ascii=False. 


# python-code
import json

user_data = {
    "name": "CopiCode Zé",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# Adicione ensure_ascii=False para exibir caracteres não-ASCII como são
json_string_jp = json.dumps(user_data, ensure_ascii=False)

print(json_string_jp)

Resultado da Execução:


{"name": "CopiCode Zé", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}

Sucesso, o nome agora é exibido corretamente! Se você estiver criando serviços para um público que não fala inglês, este ensure_ascii=False é um parceiro quase essencial.

[Ponto de Dificuldade #2] O JSON é uma linha única e difícil de ler!

Outro problema. À medida que seus dados aumentam, tudo fica espremido em uma única linha, tornando a leitura muito difícil. Isso também pode ser resolvido com uma opção. Especificar o indent (indentação) adicionará quebras de linha e recuo para torná-lo legível para humanos. O número representa a quantidade de espaços, e 4 é comumente usado. 


# python-code
import json

user_data = {
    "name": "CopiCode Zé",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# Especifique ambos ensure_ascii=False e indent=4
json_string_pretty = json.dumps(user_data, ensure_ascii=False, indent=4)

print(json_string_pretty)

Resultado da Execução:


{
    "name": "CopiCode Zé",
    "age": 30,
    "is_creator": true,
    "skills": [
        "HTML",
        "CSS",
        "JavaScript",
        "Python"
    ]
}

O que você acha? Ficou muito mais fácil de ler agora, certo? Essas duas opções são frequentemente usadas juntas, então certifique-se de lembrá-las. A documentação oficial do Python também explica essas opções em detalhes.

2. Convertendo uma String JSON de Volta para Dados do Python: json.loads()

A próxima é a operação inversa. Vamos converter uma "string" no formato JSON recebida de uma API Web ou de outro lugar de volta para um dicionário Python com o qual podemos trabalhar. Usaremos o loads, aquele com o `s`. 


# python-code
import json

# Suponha que uma string como esta seja recebida de uma API Web
received_json_string = """
{
    "id": "001",
    "productName": "Teclado Incrível",
    "price": 15800,
    "inStock": true
}
"""

# Converte a string JSON para um dicionário Python
product_data = json.loads(received_json_string)

print(product_data)
# Vamos verificar o tipo também
print(type(product_data))

# Agora que é um dicionário, podemos acessar valores pela chave
print(f"Nome do Produto: {product_data['productName']}")
print(f"Preço: {product_data['price']}")

Resultado da Execução:


{'id': '001', 'productName': 'Teclado Incrível', 'price': 15800, 'inStock': True}
<class 'dict'>
Nome do Produto: Teclado Incrível
Preço: 15800

A string JSON foi brilhantemente convertida em um dicionário Python (dict)! Agora podemos processar os dados livremente ou extrair apenas as informações de que precisamos.

3. Escrevendo Dados do Python em um Arquivo JSON: json.dump()

Em seguida, temos as operações de arquivo. Usaremos o dump() sem o `s`. Isso é frequentemente usado para salvar configurações de sites ou resultados de processamento em um arquivo.

O dump() aceita dois argumentos. O primeiro são os dados do Python que você deseja escrever, e o segundo é um objeto de arquivo. Usar a sintaxe with open(...) é a maneira segura e comum de fazer isso. 


# python-code
import json

# Dados de configuração para salvar
app_settings = {
    "theme": "dark",
    "language": "portuguese",
    "notifications": {
        "email": True,
        "push": False
    },
    "version": "1.0.2"
}

# 'w' significa modo de escrita (write)
# Especificar encoding='utf-8' é uma boa prática ao incluir caracteres não-ASCII
with open('settings.json', 'w', encoding='utf-8') as f:
    # indent e ensure_ascii também podem ser usados aqui
    json.dump(app_settings, f, indent=4, ensure_ascii=False)

print("Configurações salvas no arquivo settings.json.")

Ao executar este código, um arquivo chamado settings.json será criado no mesmo diretório do seu script Python. O conteúdo dele deve estar no mesmo formato de fácil leitura de quando usamos o dumps com indentação.

4. Lendo um Arquivo JSON para Dados do Python: json.load()

Finalmente, vamos ler o arquivo settings.json que acabamos de criar. Como é uma operação de arquivo, usaremos o load() sem o `s`. 


# python-code
import json
import os # Importe o módulo os para verificar a existência do arquivo

file_path = 'settings.json'

# Verifica se o arquivo existe
if os.path.exists(file_path):
    # 'r' significa modo de leitura (read)
    with open(file_path, 'r', encoding='utf-8') as f:
        # Apenas passe o objeto de arquivo
        loaded_settings = json.load(f)

    print("Configurações carregadas de settings.json.")
    print(loaded_settings)
    
    # Processa os dados carregados
    print(f"Configuração de tema atual: {loaded_settings['theme']}")
else:
    print(f"Erro: {file_path} não encontrado.")
    print("Por favor, execute o código de exemplo do json.dump() primeiro.")

Resultado da Execução:


Configurações carregadas de settings.json.
{'theme': 'dark', 'language': 'portuguese', 'notifications': {'email': True, 'push': False}, 'version': '1.0.2'}
Configuração de tema atual: dark

E com isso, você dominou os quatro feitiços básicos! Use dumps/loads com o s para strings, e dump/load sem o s para arquivos. É só isso!

[Copie, Cole e Execute] Prática! Vamos Criar um Cartão de Perfil Dinâmico com Dados JSON

Obrigado por esperar! Este é o clímax do artigo. Vamos usar tudo o que aprendemos até agora para experimentar a ligação entre Python и JavaScript para gerar conteúdo HTML dinamicamente a partir de dados JSON.

Em um ambiente de desenvolvimento real, dados e visualização são separados exatamente dessa maneira. Depois de experimentar isso, você entenderá o verdadeiro poder do JSON!

O Código HTML Completo e Pronto para Rodar

Copie todo o código abaixo, crie um arquivo chamado profile.html e salve-o. Em seguida, abra esse arquivo em seu navegador da web. 

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perfil Gerado a partir de Dados JSON</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background-color: #1e1e1e;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            padding: 2rem;
            width: 320px;
            border: 1px solid #333;
        }
        .card h1 {
            color: #669df6;
            margin-top: 0;
            border-bottom: 2px solid #669df6;
            padding-bottom: 0.5rem;
        }
        .card p {
            line-height: 1.6;
        }
        .card .label {
            font-weight: bold;
            color: #8ab4f8;
        }
        .skills {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .skills li {
            background-color: #333;
            padding: 0.3rem 0.8rem;
            border-radius: 1rem;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

<!-- O cartão de perfil será inserido aqui -->
<div id="profile-container"></div>

<!-- 
    [Isto é Importante!]
    Normalmente, esses dados JSON vêm de um servidor rodando Python.
    Neste exemplo, para simular esse comportamento, estamos incorporando
    os dados JSON diretamente dentro de uma tag <script>.
-->
<script id="user-json-data" type="application/json">
{
    "name": "Bot Assistente de IA",
    "age": 2,
    "bio": "Sou um assistente de IA ótimo em Python e JavaScript. Estou aqui para dar o meu melhor para apoiar o seu desenvolvimento web!",
    "is_active": true,
    "skills": ["Análise de Dados", "Desenvolvimento Web", "Processamento de Linguagem Natural", "Depuração"]
}
</script>

<script>
    // Este código JavaScript roda no navegador
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Pega a string JSON da tag <script>
        var jsonScriptTag = document.getElementById('user-json-data');
        var jsonString = jsonScriptTag.textContent;

        // 2. Converte a string JSON em um objeto JavaScript
        var userData = JSON.parse(jsonString);

        // 3. Monta o conteúdo HTML usando os dados buscados
        var container = document.getElementById('profile-container');
        
        // Gera o HTML para a lista de habilidades
        var skillsHtml = userData.skills.map(function(skill) {
            return '<li>' + skill + '</li>';
        }).join('');

        // Cria o HTML completo do cartão de perfil com concatenação de strings
        var profileCardHtml = 
            '<div class="card">' +
                '<h1>' + userData.name + '</h1>' +
                '<p><span class="label">Idade:</span> ' + userData.age + ' anos</p>' +
                '<p><span class="label">Bio:</span> ' + userData.bio + '</p>' +
                '<p><span class="label">Status:</span> ' + (userData.is_active ? 'Ativo' : 'Inativo') + '</p>' +
                '<h2 style="color: #669df6; font-size: 1.2em;">Habilidades</h2>' +
                '<ul class="skills">' +
                    skillsHtml +
                '</ul>' +
            '</div>';

        // 4. Insere o HTML montado na página
        container.innerHTML = profileCardHtml;
    });
</script>

</body>
</html>

Ao abri-lo no seu navegador, você deve ver um cartão de perfil bem estilizado. E, no entanto, você não escreveu os elementos do cartão diretamente no arquivo HTML!

Neste código, o JavaScript abaixo lê os dados JSON escritos dentro de <script id="user-json-data">. A função JSON.parse() é a versão JavaScript do json.loads() do Python. Em seguida, ele usa esses dados para construir dinamicamente o HTML e inseri-lo no local com id="profile-container".

No desenvolvimento web real, o servidor Python gera dinamicamente esta parte de dados JSON e a incorpora em um modelo HTML para enviar ao navegador. Você acabou de experimentar o mecanismo fundamental de como isso funciona, tudo em um único arquivo. Não é incrível?

Resumo: JSON não é assustador, é a sua melhor arma!

Desta vez, expliquei como lidar com dados usando o módulo json do Python e sua importância no desenvolvimento web, misturado com minhas próprias experiências.

Pode parecer um pouco intimidador no início, mas assim que você entende como o JSON funciona, a gama de sites que você pode criar se expande drasticamente. As possibilidades são infinitas, desde a integração com APIs externas até o salvamento de configurações específicas do usuário.

Sinta-se à vontade para alterar o código neste artigo e experimentar perguntando: "O que acontece se eu mudar isso?". Esse processo de tentativa e erro é o melhor tempero para o seu crescimento como desenvolvedor!

Para o Próximo Passo

Depois de se sentir confortável manipulando dados com JSON, vamos aprender como receber informações de fontes externas ao iniciar um programa. Ser capaz de lidar com argumentos de linha de comando permitirá que você crie ferramentas ainda mais poderosas.

Processe Argumentos de Linha de Comando com o Módulo sys

Modelos Relacionados