Så bygger du en receptapp: recept, portionsomräkning, inköpslistor och sök

En receptapp är en samling recept med bra sök, tydliga matlagningssidor och några hjälpmedel i köket: skala portioner, omvandla enheter och göra en inköpslista av recepten. Oavsett om det är ditt familjekokbok, en matblogg med receptkort eller en receptprodukt för andra är det ett beslut som gör allt annat möjligt: att lagra ingredienserna som strukturerad data, inte som en textstycke. Får du det rätt blir de användbara funktionerna enkla att bygga.

Bestäm vilken typ av receptapp det är

Typ	Vem lägger till recept	Vad som väger tyngst
Personligt eller familjekokbok	Du och några släktingar	Enkel inmatning, import från länkar, privat som standard
Receptsajt eller matblogg	Du eller ditt team	Foton, SEO, receptmarkering, snabba sidor
Receptgemenskap	Medlemmar	Konton, moderering, betyg, anmälningar
Receptprodukt för ett företag	Personal (en matlådetjänst, ett kostvarumärke, en restaurangkedja)	Konsekvens, näringsdata, kalkylering

Datamodellen är densamma i alla fyra. Det som skiljer är vem som får skriva och om sidorna måste hittas av sökmotorer.

Vad en receptapp behöver

Sidor

Receptlista eller startsida: kort med bild, titel, total tid och taggar.
Receptsida: matlagningsvyn med bild, portionsreglage, ingredienslista, numrerade steg och anteckningar.
Sök och filter: på namn, på ingrediens, på tagg (vegetarisk, snabbt, dessert), på tid.
Lägg till och redigera recept: ett formulär som hanterar ingredienser rad för rad.
Samlingar: "Vardagskvällar", "Jul", "Mammas recept".
Inköpslista: byggd från ett eller flera recept.

Data

Recept: titel, slug, beskrivning, portioner, förberedelsetid, tillagningstid, bild, taggar, källa, författare, synlighet.
Ingredienser: recept, position, mängd, enhet, namn, anteckning ("finhackad"), valfri grupp ("Till såsen").
Steg: recept, position, text, valfri timer.
Samlingar och samlingsposter.
Inköpslistposter: användare, ingrediensnamn, mängd, enhet, avbockad.

Mängder bör vara tal. "1 ½ dl" blir mängd 1.5, enhet dl. Håll en kort lista över enheter appen förstår, och tillåt fri text ("en nypa", "efter smak") utan mängd.

Behörigheter

Ett personligt kokbok behöver ett konto och privata recept. Ett familjekokbok behöver delade samlingar som flera kan redigera. En publik sajt behöver läsare (utan inloggning) och redaktörer. En gemenskap behöver medlemmar som äger sina egna recept och moderatorer som kan dölja vad som helst.

Funktionerna som gör den värd att använda

Skala portioner. Multiplicera varje mängd med nya portioner delat på ursprungliga portioner. Visa rimliga bråk (¾ dl, inte 0,75 dl) och avrunda besvärliga mängder. En del saker skalar inte linjärt: krydda, bakningstider, formstorlekar. En kort anteckning på receptet hjälper.

Enhetsomvandling. En omkopplare mellan metriskt och amerikanskt. Omvandla volymer och vikter inom deras egen typ; att omvandla deciliter mjöl till gram kräver en densitet per ingrediens, vilket är en senare funktion, inte en första.

Matlagningsläge. Stor text, ett steg i taget eller en rullningsbar lista med kryssrutor, och skärmen hålls vaken under matlagningen (webbläsare stöder skärmlås på många enheter). Det här är funktionen folk tackar dig för.

Inköpslista. Kombinera ingredienser från flera recept, slå ihop samma ingrediens med samma enhet, gruppera efter gång i butiken, och låt folk bocka av varor i affären.

Sök på ingrediens. "Vad kan jag göra med kyckling och purjolök?" fungerar bara för att ingredienserna är separata poster. Se hur du lägger till sök i din app.

SEO för publika receptsidor

Om folk ska hitta dina recept via sök behöver varje recept en egen URL, en unik titel och beskrivning, och receptinnehåll som finns i HTML:en när sidan laddas i stället för att ritas senare med JavaScript. Lägg till strukturerad schema.org-data för Recipe (ingredienser, steg, tider, portioner, bild), genererad från din databas så att den alltid stämmer med sidan. Ta bara med betyg om riktiga personer har lämnat dem på sidan. Vår guide om vad strukturerad data är förklarar märkningen, och Googles egen dokumentation listar fälten de använder.

Exempel på första prompt

Bygg en familjereceptapp, designad för telefoner först. Varje recept har en titel, bild, portioner, förberedelse- och tillagningstid, taggar, ingredienser och numrerade steg. Lagra varje ingrediens som en egen post med mängd, enhet, namn och anteckning, grupperad i valfria avsnitt som "Till såsen". Receptsidan har en portionsknapp som skalar varje mängd och visar vänliga bråk, en omkopplare för metriska/amerikanska enheter, och ett matlagningsläge med stor text, kryssrutor för steg och en skärm som hålls vaken. Sök på receptnamn eller ingrediens, och filtrera på tagg och total tid. Användare kan spara recept i samlingar och lägga till ett eller flera recept på en inköpslista som slår ihop matchande ingredienser och låter mig bocka av varor. Familjemedlemmar loggar in med e-post och lösenord och delar ett kokbok som alla kan redigera. Spara allt i en databas och bilder i fillagring. Lägg till sex exempelrecept.

Byggsteg

Receptsidan med exempeldata. Gör matlagningsvyn utmärkt på en telefon innan något annat.
Strukturerad ingrediensinmatning. Ett formulär där varje rad är mängd, enhet, ingrediens och anteckning. Erbjud också en ruta "klistra in en lista" som delar upp text i rader, och låt kocken rätta det som delats fel.
Skalning och enheter. Testa med krångliga fall: ⅓ dl fördubblat, 1 ägg halverat, "salt efter smak".
Sök och filter.
Inköpslista. Slå ihop "2 lökar" och "1 lök" till "3 lökar"; håll olika enheter åtskilda i stället för att gissa.
Inloggning och delning. Se hur du lägger till inloggning i din app.
Bilder. Ändra storlek vid uppladdning så att sidorna går snabbt.
Publika sidor och markering (om publika). Publicera sedan och kontrollera källkoden för en receptsida.

Vanliga misstag

Ingredienser som ett textfält. Du tappar skalning, inköpslistor och sök på ingrediens.
Decimaltal på skärmen. "0,333 dl" är oanvändbart. Visa bråk.
Livsberättelse före receptet. I din egen app, lägg ingredienserna nära toppen, med en länk "hoppa till receptet" om det finns en berättelse.
Foton i full storlek. Mobilbilder är stora; ändra storlek och komprimera dem.
Att publicera andras recept offentligt. Att importera för eget bruk är en sak; att publicera någon annans text och bilder är en annan.
Falska betyg i strukturerad data. Sökmotorer kan straffa vilseledande märkning.
Näringsvärden som presenteras som exakta. Om du räknar ut näringsvärden, skriv att det är en uppskattning och ange datakällan.

När en färdig receptapp är bättre

Om du vill spara och laga dina egna recept har etablerade receptappar redan import från webbsidor, synk mellan enheter och offlineläge. För en matblogg hanterar bloggplattformar med tillägg för receptkort märkning och utskriftsvyer direkt.

Bygg själv när du vill ha något som de verktygen inte gör: ett receptsystem för ett företag med kalkylering eller allergenhantering, ett kokbok som delas i en stor familj med egen struktur, recept kopplade till en matsedel eller en butik, eller en design som är helt din egen. Om det verkliga målet är att planera veckans måltider, läs hur du bygger en måltidsplaneringsapp härnäst.

Bygga det med Mythex

På Mythex beskriver du receptappen i chatten, granskar matlagningsvyn i livevisningens telefonvy, och publicerar den till en offentlig adress som familj eller läsare kan öppna på sina telefoner och lägga på hemskärmen. Mythex lägger till en dedikerad Postgres-databas för recept och ingredienser, och fillagring för bilder när appen behöver det. Inloggning är ta-med-din-egen: du väljer upplägg och agenten kopplar in det. På Pro kan Mythex också paketera den som en Android- och iPhone-app, som skickas till Google Play-intern testning och TestFlight. För en publik receptsajt, se matbloggsmallen och vår guide om hur du bygger en mobilanpassad webbapp.

Frågor

Hur lagrar jag recept i en databas?

Lagra ingredienserna som separata rader med mängd, enhet, ingrediensnamn och en valfri anteckning, i stället för som en textblock. Den strukturen gör det möjligt att skala portioner, omvandla enheter, bygga inköpslistor och söka på ingrediens.

Kan en receptapp importera recept från andra webbplatser?

Många receptsajter publicerar schema.org-data för recept på sina sidor, som en app kan läsa för att importera titel, ingredienser och steg. Behandla importer som personliga bokmärken: att publicera andras recepttexter och foton offentligt kan bryta mot upphovsrätten.

Hur visas recept med bilder och betyg i Google?

Google kan visa receptresultat med bild när en sida innehåller giltig strukturerad data för recept, enligt Googles egen dokumentation. Ta bara med betyg om det är verkliga betyg som visas på sidan, och testa sidan med Googles Rich Results Test.

Ska en receptapp vara en webbplats eller en mobilapp?

En mobilanpassad webbapp är den praktiska starten: den fungerar på alla telefoner, kan läggas på hemskärmen, och receptsidorna går att hitta via sök. En native-app blir aktuell senare, om du behöver användning offline eller enhetsfunktioner som webben inte kan erbjuda.