Como criar um app de receitas: receitas, ajuste de porções, listas de compras e busca

Um app de receitas é uma coleção de receitas com boa busca, páginas de preparo claras e alguns auxiliares de cozinha — ajustar porções, converter unidades e transformar receitas em lista de compras. Seja um livro de receitas da família, um blog de culinária com cartões de receita ou um produto de receitas para outras pessoas, a decisão que faz todo o resto funcionar é guardar os ingredientes como dados estruturados, e não como um parágrafo de texto. Acerte isso e os recursos úteis ficam fáceis.

Decida que tipo de app de receitas é

O modelo de dados é o mesmo nos quatro casos. O que muda é quem pode escrever e se as páginas precisam ser encontradas por buscadores.

O que um app de receitas precisa

Páginas

• Lista ou início de receitas — cartões com foto, título, tempo total e etiquetas.
• Página da receita — a visão de preparo: foto, controle de porções, lista de ingredientes, passos numerados, observações.
• Busca e filtros — por nome, por ingrediente, por etiqueta (vegetariana, rápida, sobremesa), por tempo.
• Adicionar e editar receita — um formulário que trata os ingredientes linha por linha.
• Coleções — “Dias de semana”, “Natal”, “Receitas da mamãe”.
• Lista de compras — montada a partir de uma ou várias receitas.

Dados

• Receitas — título, slug, descrição, porções, tempo de preparo, tempo de cozimento, foto, etiquetas, origem, autor, visibilidade.
• Ingredientes — receita, posição, quantidade, unidade, nome, observação (“picado fino”), grupo opcional (“Para o molho”).
• Passos — receita, posição, texto, cronômetro opcional.
• Coleções e itens de coleção.
• Itens da lista de compras — usuário, nome do ingrediente, quantidade, unidade, marcado.

As quantidades devem ser números. “1 ½ xícara” vira quantidade 1.5, unidade xícara. Mantenha uma pequena lista de unidades que o app entende, e permita texto livre (“uma pitada”, “a gosto”) sem quantidade.

Permissões

Um livro de receitas pessoal precisa de uma conta e receitas privadas. Um livro de família precisa de coleções compartilhadas que várias pessoas possam editar. Um site público precisa de leitores (sem login) e editores. Uma comunidade precisa de membros que sejam donos das próprias receitas e moderadores que possam ocultar qualquer coisa.

Os recursos que tornam o app útil

Ajuste de porções. Multiplique cada quantidade por porções novas ÷ porções originais. Mostre frações sensatas (¾ de xícara, e não 0,75 xícara) e arredonde quantidades estranhas. Algumas coisas não escalam de forma linear — temperos, tempos de forno, tamanhos de forma —, então uma observação curta na receita ajuda.

Conversão de unidades. Uma alternância entre métrico e US. Converta volumes e pesos dentro do próprio tipo; converter xícaras de farinha em gramas exige uma densidade por ingrediente, um recurso para mais tarde, e não para a primeira versão.

Modo cozinha. Texto grande, um passo por vez ou uma lista rolável com caixas de seleção, e a tela mantida acesa durante o preparo (navegadores oferecem um wake lock de tela em muitos aparelhos). É o recurso que as pessoas mais agradecem.

Lista de compras. Combine ingredientes de várias receitas, una o mesmo ingrediente com a mesma unidade, agrupe por seção do mercado, e deixe as pessoas marcarem os itens no mercado.

Busca por ingrediente. “O que dá para fazer com frango e alho-poró?” só funciona porque os ingredientes são registros separados. Veja como adicionar busca ao seu app.

SEO para páginas públicas de receitas

Se você quer que as pessoas encontrem as suas receitas pela busca, cada receita precisa de uma URL própria, de um título e descrição únicos, e de conteúdo que esteja no HTML quando a página carrega, e não desenhado depois pelo JavaScript. Adicione dados estruturados schema.org do tipo Recipe — ingredientes, passos, tempos, porções, imagem — gerados a partir do seu banco, para que correspondam sempre à página. Inclua avaliações somente se pessoas reais as deixaram na página. Nosso guia sobre o que são dados estruturados explica a marcação, e a documentação do próprio Google lista os campos que ele usa.

Exemplo de primeiro prompt

Crie um app de receitas da família, pensado primeiro para o celular. Cada receita tem título, foto, porções, tempo de preparo e de cozimento, etiquetas, ingredientes e passos numerados. Guarde cada ingrediente como um registro próprio, com quantidade, unidade, nome e observação, agrupados em seções opcionais como “Para o molho”. A página da receita tem um controle de porções que ajusta todas as quantidades e mostra frações amigáveis, uma alternância entre unidades métricas e US, e um modo cozinha com texto grande, caixas para marcar os passos e uma tela que fica acesa. Busque pelo nome da receita ou por ingrediente, e filtre por etiqueta e tempo total. Os usuários podem salvar receitas em coleções e adicionar uma ou mais receitas a uma lista de compras que une ingredientes iguais e me deixa marcar os itens. Os membros da família fazem login com e-mail e senha e compartilham um só livro de receitas que todos podem editar. Salve tudo em um banco de dados e guarde as fotos no armazenamento de arquivos. Adicione seis receitas de exemplo.

Etapas de construção

1. Página da receita com dados de exemplo. Deixe a visão de preparo excelente no celular antes de qualquer outra coisa.
2. Cadastro estruturado de ingredientes. Um formulário em que cada linha é quantidade, unidade, ingrediente e observação. Ofereça também uma caixa de “colar uma lista” que divide o texto em linhas, e então deixe o cozinheiro corrigir o que foi dividido de forma errada.
3. Ajuste de porções e unidades. Teste casos complicados: ⅓ de xícara dobrado, 1 ovo pela metade, “sal a gosto”.
4. Busca e filtros.
5. Lista de compras. Una “2 cebolas” e “1 cebola” em “3 cebolas”; mantenha unidades diferentes separadas em vez de adivinhar.
6. Login e compartilhamento. Veja como adicionar login ao seu app.
7. Fotos. Redimensione no upload para que as páginas continuem rápidas.
8. Páginas públicas e marcação (se for público). Depois publique e confira o código-fonte de uma página de receita.

Erros comuns

• Ingredientes em um único campo de texto. Você perde o ajuste de porções, as listas de compras e a busca por ingrediente.
• Decimais na tela. “0,333 xícaras” não serve para nada. Mostre frações.
• História de vida antes da receita. No seu próprio app, coloque os ingredientes perto do topo, com um link “ir para a receita” se houver uma história.
• Fotos em tamanho original. Fotos de celular são grandes; redimensione e comprima.
• Copiar receitas de outros sites publicamente. Importar para uso pessoal é uma coisa; republicar o texto e as fotos de outra pessoa é outra.
• Avaliações falsas nos dados estruturados. Buscadores podem penalizar marcações enganosas.
• Valores nutricionais apresentados como exatos. Se você calcula a nutrição, diga que é uma estimativa e informe a fonte dos dados.

Quando um app de receitas pronto é melhor

Se você quer salvar e fazer as suas próprias receitas, apps consolidados de gerenciamento de receitas já importam de sites, sincronizam entre dispositivos e funcionam offline. Para um blog de culinária, plataformas de blog com plugins de cartão de receita cuidam da marcação e das versões para impressão sem esforço.

Construa o seu quando quiser algo que essas ferramentas não fazem: um sistema de receitas para uma empresa, com cálculo de custos ou controle de alérgenos, um livro de família grande com uma estrutura própria, receitas ligadas a um planejador de refeições ou a um mercado, ou um design totalmente seu. Se planejar as refeições da semana é o objetivo real, leia em seguida como criar um app de planejamento de refeições.

Construindo com a Mythex

Na Mythex você descreve o app de receitas no chat, confere a visão de preparo na moldura do tamanho de celular da prévia ao vivo, e publica em um endereço público que a família ou os leitores podem abrir no celular e adicionar à tela inicial. A Mythex adiciona um banco Postgres dedicado para receitas e ingredientes, e armazenamento de arquivos para as fotos quando o app precisar. O login é com o provedor que você escolher: você decide a abordagem e o agente a conecta. No plano Pro, a Mythex também pode empacotar o app como aplicativo para Android e iPhone, enviado para testes internos no Google Play e no TestFlight. Para um site público de receitas, veja o template de blog de culinária e nosso guia sobre como criar um app web adaptado para celular.

Perguntas