Zo bouw je een receptenapp: recepten, porties, boodschappenlijsten en zoeken

Een receptenapp is een verzameling recepten met goede zoekfunctie, duidelijke kookpagina's en een paar keukenhulpjes: porties schalen, eenheden omrekenen en recepten omzetten in een boodschappenlijst. Of het nu je familiekookboek is, een foodblog met receptkaarten, of een receptenproduct voor anderen: de ene beslissing die alles laat werken is ingrediënten opslaan als gestructureerde data, niet als een alinea tekst. Doe dat goed, en de nuttige functies worden eenvoudig.

Bepaal wat voor receptenapp het is

Het datamodel is hetzelfde voor alle vier. Wat verschilt is wie mag schrijven en of zoekmachines pagina's moeten vinden.

Wat een receptenapp nodig heeft

Pagina's

• Receptenlijst of home: kaarten met foto, titel, totale tijd en labels.
• Receptpagina: de kookweergave met foto, porties-regeling, ingrediëntenlijst, genummerde stappen, notities.
• Zoeken en filters: op naam, op ingrediënt, op label (vegetarisch, snel, dessert), op tijd.
• Recept toevoegen en bewerken: een formulier dat ingrediënten regel voor regel verwerkt.
• Verzamelingen: "Doordeweeks", "Kerst", "Mams recepten".
• Boodschappenlijst: samengesteld uit één of meerdere recepten.

Data

• Recepten: titel, slug, beschrijving, porties, voorbereidingstijd, bereidingstijd, foto, labels, bron, auteur, zichtbaarheid.
• Ingrediënten: recept, positie, hoeveelheid, eenheid, naam, opmerking ("fijngesneden"), optionele groep ("Voor de saus").
• Stappen: recept, positie, tekst, optionele timer.
• Verzamelingen en items in verzamelingen.
• Items op de boodschappenlijst: gebruiker, naam van het ingrediënt, hoeveelheid, eenheid, afgevinkt.

Hoeveelheden moeten getallen zijn. "1 ½ kop" wordt hoeveelheid 1.5, eenheid kop. Houd een kleine lijst van eenheden bij die de app begrijpt, en sta vrije tekst toe ("een snufje", "naar smaak") zonder hoeveelheid.

Rechten

Een persoonlijk kookboek heeft één account en privérecepten nodig. Een familiekookboek heeft gedeelde verzamelingen nodig die meerdere mensen kunnen bewerken. Een publieke site heeft lezers (zonder login) en redacteuren nodig. Een gemeenschap heeft leden nodig die hun eigen recepten bezitten, en moderatoren die alles kunnen verbergen.

De functies die het de moeite waard maken

Porties schalen. Vermenigvuldig elke hoeveelheid met nieuwe porties ÷ oorspronkelijke porties. Toon zinvolle breuken (¾ kop, niet 0,75 kop) en rond lastige hoeveelheden af. Sommige dingen schalen niet lineair — kruiden, baktijden, pannenformaten — dus een korte notitie bij het recept helpt.

Eenheden omrekenen. Een schakelaar metrisch/Amerikaans. Rereken volumes en gewichten om binnen hun eigen type; kopjes bloem omrekenen naar grammen vraagt een dichtheid per ingrediënt, een latere functie, niet een eerste.

Kookmodus. Grote tekst, één stap tegelijk of een scrollbare lijst met aanvinkvakjes, en het scherm dat wakker blijft tijdens het koken (browsers ondersteunen op veel apparaten een screen wake lock). Dit is de functie waar mensen je dankbaar voor zijn.

Boodschappenlijst. Combineer ingrediënten uit verschillende recepten, voeg hetzelfde ingrediënt met dezelfde eenheid samen, groepeer per gangpad, en laat mensen items afvinken in de winkel.

Zoeken op ingrediënt. "Wat kan ik maken met kip en prei?" werkt alleen omdat ingrediënten afzonderlijke records zijn. Zie hoe je zoeken aan je app toevoegt.

SEO voor openbare receptpagina's

Als mensen je recepten via zoekmachines moeten vinden, heeft elk recept een eigen URL, een unieke titel en beschrijving nodig, en receptinhoud die al in de HTML staat wanneer de pagina laadt, in plaats van later door JavaScript getekend. Voeg schema.org Recipe-gestructureerde data toe — ingrediënten, stappen, tijden, porties, afbeelding — gegenereerd uit je database, zodat die altijd overeenkomt met de pagina. Voeg alleen beoordelingen toe als echte mensen ze op de pagina hebben achtergelaten. Onze gids over wat gestructureerde data is legt de markup uit, en de documentatie van Google somt de velden op die het gebruikt.

Voorbeeld van een eerste prompt

Bouw een familie-receptenapp, eerst ontworpen voor telefoons. Elk recept heeft een titel, foto, porties, voorbereidings- en bereidingstijd, labels, ingrediënten en genummerde stappen. Sla elk ingrediënt op als een eigen record met hoeveelheid, eenheid, naam en opmerking, gegroepeerd in optionele onderdelen zoals "Voor de saus". De receptpagina heeft een porties-regeling die elke hoeveelheid schaalt en vriendelijke breuken toont, een schakelaar metrisch/Amerikaans, en een kookmodus met grote tekst, aanvinkvakjes voor stappen en een scherm dat wakker blijft. Zoek op receptnaam of ingrediënt, en filter op label en totale tijd. Gebruikers kunnen recepten in verzamelingen opslaan en één of meer recepten aan een boodschappenlijst toevoegen die overeenkomende ingrediënten samenvoegt en waarop ik items kan afvinken. Gezinsleden loggen in met e-mail en wachtwoord en delen één kookboek dat iedereen kan bewerken. Sla alles op in een database en foto's in bestandsopslag. Voeg zes voorbeeldrecepten toe.

Bouw het stap voor stap

1. Receptpagina met voorbeeldgegevens. Maak de kookweergave uitstekend op een telefoon, voordat je iets anders doet.
2. Gestructureerd invoeren van ingrediënten. Een formulier waarin elke regel hoeveelheid, eenheid, ingrediënt en opmerking is. Bied ook een vak "plak een lijst" aan dat tekst in regels splitst, waarna de kok alles kan verbeteren wat verkeerd is gesplitst.
3. Schalen en eenheden. Test met lastige gevallen: ⅓ kop verdubbeld, 1 ei gehalveerd, "zout naar smaak".
4. Zoeken en filters.
5. Boodschappenlijst. Voeg "2 uien" en "1 ui" samen tot "3 uien"; houd verschillende eenheden apart in plaats van te gokken.
6. Login en delen. Zie hoe je login aan je app toevoegt.
7. Foto's. Verklein ze bij het uploaden zodat pagina's snel blijven.
8. Openbare pagina's en markup (als de site openbaar is). Publiceer daarna en controleer de bron van een receptpagina.

Veelgemaakte fouten

• Ingrediënten als één tekstveld. Je verliest schalen, boodschappenlijsten en zoeken op ingrediënt.
• Decimalen op het scherm. "0,333 kop" is onbruikbaar. Toon breuken.
• Levensverhaal vóór het recept. Zet in je eigen app de ingrediënten bovenaan, met een link "naar het recept" als er een verhaal is.
• Volledige fotoformaten. Telefoonfoto's zijn groot; verklein en comprimeer ze.
• Recepten van andere sites openbaar kopiëren. Importeren voor persoonlijk gebruik is één ding; de tekst en foto's van anderen opnieuw publiceren is iets anders.
• Nepbeoordelingen in gestructureerde data. Zoekmachines kunnen misleidende markup bestraffen.
• Voedingswaarden als exacte cijfers presenteren. Als je voedingswaarden berekent, zeg dan dat het een schatting is en noem de databron.

Wanneer een kant-en-klare receptenapp beter is

Als je je eigen recepten wilt bewaren en koken, importeren gevestigde receptenmanagers al van websites, synchroniseren ze tussen apparaten en werken ze offline. Voor een foodblog verwerken bloggingplatforms met een receptkaart-plugin markup en printweergaven meteen.

Bouw zelf wanneer je iets wilt wat die tools niet doen: een receptensysteem voor een bedrijf met kostprijs- of allergenenregistratie, een kookboek met een eigen structuur voor een grote familie, recepten die gekoppeld zijn aan een weekmenu of winkel, of een ontwerp dat helemaal van jou is. Als het plannen van de maaltijden van de week het echte doel is, lees dan daarna hoe je een maaltijdplannerapp bouwt.

Bouwen met Mythex

Op Mythex beschrijf je de receptenapp in de chat, controleer je de kookweergave in de weergave op telefoonformaat van de live voorvertoning, en publiceer je hem naar een publiek adres dat familie of lezers op hun telefoon kunnen openen en aan hun startscherm kunnen toevoegen. Mythex voegt een eigen Postgres-database toe voor recepten en ingrediënten, en bestandsopslag voor foto's wanneer de app dat nodig heeft. Login is bring-your-own: jij kiest de aanpak en de agent koppelt die. Op Pro kan Mythex de app ook verpakken als Android- en iPhone-app, die naar interne tests in Google Play en TestFlight gaat. Voor een openbare receptensite, zie de sjabloon voor foodblogs en onze gids over een mobielvriendelijke webapp bouwen.

Veelgestelde vragen