Cada recurso usado na internet possui um tipo de mídia, também conhecido como tipo MIME (sigla em inglês para Multipurpose Internet Mail Extension, ou Extensão de Correio da Internet Multifuncional, em português). Essa informação é necessária para transações entre servidores e clients.

O navegador precisa saber qual o tipo dos recursos de mídia que são enviados a ele e como lidar com esses recursos de maneira correta.

A mesma situação acontece com o servidor. Ele precisa saber o tipo de recursos que são enviados a ele para análise e processamento precisos.

O que é a declaração de Content-Type?

O tipo de mídia de qualquer recurso é declarado na propriedade Content-Type no cabeçalho de uma requisição (no client, quando fazendo a requisição ao servidor) e no cabeçalho de resposta (no servidor, quando enviando uma reposta).

Sem declarar explicitamente o tipo de conteúdo de uma fonte, o client pode tentar automaticamente detectar o tipo, mas o resultado pode não ser o mais preciso. Por isso a importância de o declarar explicitamente.

Tipos de mídia

Os tipos de mídia existentes têm diversas formas. Eles são categorizados em vários grupos:

• aplicação (application)
• áudio (audio)
• fonte (font)
• exemplo (example)
• imagem (image)
• mensagem (message)
• modelo (model)
• multiparte (multipart)
• texto (text)
• e vídeo (video)

Essas categorias também têm seus tipos. Por exemplo, application/json é um tipo em application e text/html é um tipo em text.

Você pode encontrar uma lista completa dos tipos de mídia na IANA (uma organização que coordena alguns dos elementos principais da internet).

Todos esses vários tipos de dados, como texto, áudio, imagens, HTML e tantos outros são usados por toda a internet.

O navegador precisa saber o tipo de mídia de um recurso

Como mencionei acima, o navegador precisa saber que tipo de conteúdo ele recebe. Aqui temos um exemplo ilustrativo.

O código abaixo é um servidor do Node que serve um arquivo HTML:

const http = require("http");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
	const filePath = path.join(__dirname, "index.html");
	var stat = fs.statSync(filePath);

	res.writeHead(200, {
		"Content-Type": "text/css",
		"Content-Length": stat.size,
	});

	const readStream = fs.createReadStream(filePath);
	readStream.pipe(res);
});

server.listen(5000);

console.log("Servidor da web do Node.js na porta 5000 em execução.");

Não se preocupe com as especificidades do código. O que importa aqui é o arquivo index.html que estamos servindo e que Content-Type é text/css.

Aqui está o conteúdo de index.html:

<h1>Homepage</h1>

Logicamente, um documento HTML é diferente de um arquivo CSS. Aqui está o resultado em localhost:5000 quando o servidor é iniciado:

Você também pode confirmar a resposta obtida conferindo os cabeçalhos na aba Rede (ou em inglês, Network) das ferramentas do desenvolvedor.

Aqui vemos o resultado em um navegador do Google Chrome:

O navegador obteve o conteúdo como um tipo CSS. Por isso, tentou tratá-lo como um arquivo CSS.

Observe também que o conhecimento pleno do tipo de conteúdo obtido pelo navegador reduz vulnerabilidades de segurança, pois o navegador conhece os padrões de segurança a serem utilizados para os dados em questão.

Agora que você compreendeu o conceito de tipos MIME e sua importância, vamos tratar do JSON.

O tipo correto de Content-Type para JSON

O JSON precisa ser interpretado corretamente pelo navegador para ser usado adequadamente. text/plain era tipicamente usado para JSON, mas, de acordo com a IANA, o tipo MIME oficial para o JSON é application/json.

Isso significa que, quando você estiver enviando JSON para o servidor ou recebendo JSON do servidor, deve sempre declarar o Content-Type do cabeçalho como application/json, pois esse é o padrão que tanto o client quanto o servidor entendem.

Conclusão

Como vimos acima, o servidor (assim como o navegador) precisa saber o tipo de dados enviados a ele, por exemplo, em uma solicitação de POST. Esse é o motivo pelo qual forms com arquivos geralmente contêm o atributo enctype com o valor de multipart/form-data.

Sem codificar a solicitação dessa maneira, a solicitação de POST não dará certo. Além disso, quando o servidor sabe o tipo de dados que foi enviado para ele, ele saberá como fazer o parsing dos dados codificados.

Neste artigo, examinamos o que são os tipos MIME e sua finalidade. Vimos também qual é o tipo oficial de conteúdo para JSON. Espero que você agora saiba da importância de declarar os tipos de recursos quando utilizá-los na internet.

ATUALIZAÇÃO: 13/5/2020 – Os passos da nova caixa de diálogo de compartilhamento estão disponíveis abaixo.

Obrigado, Erica H.!

Você está construindo algum protótipo de aplicação web dinâmica e precisa da colaboração de pessoas que não possuem experiência como desenvolvedoras?

Já participei de um hackathon antes. Mesmo tendo a experiência e o conhecimento em desenvolvimento de aplicações, não tinha habilidade ou tempo suficiente para implementar um aplicação web completa na sprint de 3 dias. Era pouco tempo para ajudar e, assim, foi deixada de lado a possibilidade de assistir a tutoriais e estudar HTML e CSS.

O resultado? Aprendi muito, mas gostaria de ter contribuído mais.

Em um dos hackathons dos quais participei recentemente, encontrei um problema semelhante. Dessa vez, eu não era o novato. Havia no meu time pessoas que não eram engenheiras de software e que queriam ajudar na construção de nosso protótipo de aplicação web. Felizmente, nos deparamos com as planilhas do Google como uma maneira de essas pessoas simularem nosso banco de dados e fazerem com que os desenvolvedores de back-end se conectassem ao endpoint de JSON das planilhas do Google e pudessem, assim, analisá-lo.

Com este guia, você será capaz de:

1. Criar uma planilha nas planilhas do Google.
2. Publicar a planilha na web.
3. Gerar um endpoint de JSON.
4. Tornar a planilha pública para colaboração.
5. Passar o endpoint de JSON para o time de desenvolvedores de back-end.

Após este tutorial, você poderá entrar em equipes dizendo: "Posso ajudar com o back-end!".

Seção 1: Criando uma planilha do Google

Passo 1:

Vá até as planilhas do Google

Passo 2:

Crie uma planilha

Seção 2: Publicando suas planilhas do Google na web

Nota: a atualização da nova caixa de diálogo de compartilhamento a partir de 13/05/2020, localizada após o passo 2.

Passo 1:

Clique em "Arquivo" > "Publicar na web…" (ou, em inglês, como na imagem, File > Publish to the web...).

Passo 2:

Clique em "Publicar" (ou, em inglês, como na imagem, Publish), depois em "OK".

Passo 3:

Não há necessidade de fazer nada aqui.

ATUALIZAÇÃO: 13/05/2020 - Nova caixa de diálogo de compartilhamento

Passo 1:
Clique em "Compartilhar" (ou, em inglês, como na imagem, Share).

Passo 2:

Clique em "Alterar para qualquer pessoa com o link" (ou, em inglês, como na imagem, Change to anyone with the link).

Passo 3:

Clique em "Concluído" (ou, em inglês, como na imagem, Done).

Seção 4: usando suas planilhas das planilhas do Google como endpoint de JSON

Passo 1:

Copie o template de URL e cole na barra de endereços:

https://spreadsheets.google.com/feeds/cells/CÓDIGODASUAPLANILHAGOOGLESHEETS/NÚMERODAPÁGINADAPLANILHA/public/full?alt=json

Passo 2:

Vá até a planilha do Google aberta e verifique a barra de endereços.

Passo 3:

Vá até o template de URL e substitua

• CÓDIGODASUAPLANILHAGOOGLESHEETS por 1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs
• NÚMERODAPÁGINADAPLANILHA por 1

Passo 4:

Recupere o URL do JSON

https://spreadsheets.google.com/feeds/cells/1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs/1/public/full?alt=json

Seção 5: Tornando pública sua planilha do Google (para colaboração e entrada de dados)

Passo 1:

No canto superior direito, clique em "Compartilhar" (ou, em inglês, como na imagem, Share).

Passo 2:

Adicione um nome e clique em "Salvar" (ou, em inglês, como na imagem, Save).

Passo 3:

Clique em "Avançado" (ou, em inglês, como na imagem, Advanced).

Passo 4:

Clique em "Alterar…"  (ou, em inglês, como na imagem, Change).

Passo 5:

Clique em "Ativado — Público na web" (ou, em inglês, como na imagem, ON - Public on the web). Depois, clique em salvar "Salvar" (ou, em inglês, como na imagem, Save).

Pegadinhas comuns:

Se você receber a resposta abaixo, verifique o URL e certifique-se de estar usando o código correto das planilhas do Google na barra de endereço.

Se você receber a resposta abaixo, volte para a Seção 2: Publicando suas planilhas do Google na web.

LinkedIn do autor do texto

Se você estiver tendo problemas em adicionar comentários em seu arquivo JSON, aqui está um bom motivo: o JSON não dá suporte a comentários.

“Removi os comentários do JSON, pois eu vi que pessoas estavam usando os comentários para manter diretivas de parsing, uma prática que destruiria a interoperabilidade,” escreveu Douglas Crockford (texto em inglês), que popularizou o formato de dados baseado em texto.

No entanto, existe uma maneira de contornar isso. É disso que trata este artigo: como adicionar comentários ao seu arquivo JSON.

Adicionar dados como comentários

Uma maneira de contornar a questão dos comentários é adicionar dados ao seu arquivo JSON que funcionem como comentários.

Vamos ver um exemplo, começando com essas informações em nosso arquivo JSON:

{
   "sport": "basketball",
   "coach": "Joe Smith",
   "wins": 15,
   "losses": 5
}

Agora, vamos adicionar outro par chave-valor que servirá como nosso comentário, o qual você pode ver na primeira linha do código abaixo:

{
   "_comment1": "Esse é o meu comentário",
   "sport": "basketball",
   "coach": "Joe Smith",
   "wins": 15,
   "losses": 5
}

Aqui temos outro exemplo. Dessa vez, usamos duas sublinhas no início e no fim da chave:

 "__comment2__": "Esse é outro comentário",

As sublinhas ajudam a diferenciar o comentário do resto dos dados no seu arquivo.

Um aviso

Há um detalhe importante que deve ser observado.

Os comentários que adicionamos em nosso arquivo JSON são incluídos no objeto JSON. Em outras palavras, os comentários são tratados como dados.

É isso o que queremos dizer.

Esse é o código do nosso arquivo, data.json:

{
   "_comment1": "Esse é o meu comentário",
   "sport": "basketball",
   "coach": "Joe Smith",
   "wins": 15,
   "losses": 5
}

Agora, vamos ler esses dados a partir do arquivo, read_comments.py:

import json
with open("data.json", mode="r") as j_object:
   data = json.load(j_object)
print(data)

O resultado incluirá nosso comentário:

{'_comment1': 'Esse é o meu comentário', 'sport': 'basketball', 'coach': 'Joe Smith', 'wins': 15, 'losses': 5}

Podemos até extrair o valor do comentário do objeto JSON: Esse é o meu comentário:

import json
 
with open("data.json", mode="r") as j_object:
   data = json.load(j_object)
   print(data["_comment1"])

Lembre-se de que o comentário é um comentário apenas aos olhos do desenvolvedor — mas o computador o enxerga como dados.

Um tipo diferente de comentário

Essa prática de comentar em JSON é diferente dos comentários em linguagens de programação, como o Python, que tipicamente os ignoram quando o programa é executado.

# Aqui está o meu comentário
word = "house"
for letter in word:
   print(letter)

Quando executamos o programa em Python acima, obtemos as letras da palavra, “house”, mas não vemos o comentário. Ele é ignorado.

Opções para comentar

O JSMin é outra opção a se considerar.

Ele é uma ferramenta que remove espaços em branco e comentários dos arquivos JavaScript. Mas ele também funciona com arquivos JSON. O JSMin remove comentários dos arquivos JSON antes de eles passarem pelo parsing.

Portanto, existem opções para se comentar em arquivos JSON. Embora não sejam soluções perfeitas, pelo menos, há formas de incluir a documentação de que você precisa quando você precisa dela.

A autora escreve sobre aprender a programar e sobre as melhores maneiras de fazer isso. Visite o site da autora em amymhaddad.com.