Panduan

Cara Bina Aplikasi Resipi: Resipi, Penskalaan, Senarai Beli-Belah dan Carian

Aplikasi resipi ialah koleksi resipi dengan carian yang baik, halaman memasak yang jelas dan beberapa pembantu dapur — menskalakan hidangan, menukar unit, dan menukar resipi menjadi senarai beli-belah. Sama ada ia buku masakan keluarga anda, blog makanan dengan kad resipi atau produk resipi untuk orang lain, satu keputusan yang menjadikan segala-galanya berfungsi ialah menyimpan bahan sebagai data berstruktur, bukan sebagai perenggan teks. Betulkan itu dan ciri-ciri berguna menjadi mudah.

Tentukan jenis aplikasi resipi itu

JenisSiapa menambah resipiApa yang paling penting
Buku masakan peribadi atau keluargaAnda dan beberapa saudaraKemasukan yang mudah, import daripada pautan, peribadi secara lalai
Laman resipi atau blog makananAnda atau pasukan andaFoto, SEO, markup resipi, halaman yang pantas
Komuniti resipiAhliAkaun, penyederhanaan, penilaian, laporan
Produk resipi untuk perniagaanKakitangan (kit hidangan, jenama pemakanan, kumpulan restoran)Konsistensi, data pemakanan, kos

Model data adalah sama untuk keempat-empatnya. Yang berubah ialah siapa boleh menulis, dan sama ada halaman perlu ditemui oleh enjin carian.

Apa yang diperlukan oleh aplikasi resipi

Halaman

  • Senarai atau laman utama resipi — kad dengan foto, tajuk, jumlah masa dan tag.
  • Halaman resipi — paparan memasak: foto, kawalan hidangan, senarai bahan, langkah bernombor, nota.
  • Carian dan penapis — mengikut nama, mengikut bahan, mengikut tag (vegetarian, pantas, pencuci mulut), mengikut masa.
  • Tambah dan sunting resipi — borang yang mengendalikan bahan baris demi baris.
  • Koleksi — “Hari bekerja”, “Krismas”, “Resipi Mak”.
  • Senarai beli-belah — dibina daripada satu atau beberapa resipi.

Data

  • Resipi — tajuk, slug, perihalan, hidangan, masa sediakan, masa masak, foto, tag, sumber, pengarang, keterlihatan.
  • Bahan — resipi, kedudukan, kuantiti, unit, nama, nota (“dicincang halus”), kumpulan pilihan (“Untuk sos”).
  • Langkah — resipi, kedudukan, teks, pemasa pilihan.
  • Koleksi dan item koleksi.
  • Item senarai beli-belah — pengguna, nama bahan, kuantiti, unit, ditanda.

Kuantiti hendaklah nombor. “1 ½ cawan” menjadi kuantiti 1.5, unit cawan. Simpan senarai kecil unit yang difahami aplikasi, dan benarkan teks bebas (“secubit”, “mengikut rasa”) tanpa kuantiti.

Kebenaran

Buku masakan peribadi memerlukan satu akaun dan resipi peribadi. Buku masakan keluarga memerlukan koleksi kongsi yang boleh disunting oleh beberapa orang. Laman awam memerlukan pembaca (tanpa log masuk) dan editor. Komuniti memerlukan ahli yang memiliki resipi mereka sendiri dan moderator yang boleh menyembunyikan apa sahaja.

Ciri yang menjadikannya berbaloi digunakan

Penskalaan hidangan. Darabkan setiap kuantiti dengan hidangan baharu ÷ hidangan asal. Paparkan pecahan yang munasabah (¾ cawan, bukan 0.75 cawan) dan bundarkan jumlah yang janggal. Ada bahan yang tidak berskala secara linear — perisa, masa membakar, saiz kuali — jadi nota ringkas pada resipi membantu.

Penukaran unit. Suis metrik/AS. Tukar isipadu dan berat dalam jenis masing-masing; menukar cawan tepung kepada gram memerlukan ketumpatan bagi setiap bahan, iaitu ciri kemudian, bukan ciri pertama.

Mod memasak. Teks besar, satu langkah pada satu masa atau senarai boleh tatal dengan kotak semak, dan skrin kekal menyala semasa memasak (pelayar menyokong wake lock skrin pada banyak peranti). Inilah ciri yang membuatkan orang berterima kasih kepada anda.

Senarai beli-belah. Gabungkan bahan daripada beberapa resipi, gabungkan bahan yang sama dengan unit yang sama, kumpulkan mengikut lorong kedai, dan benarkan orang menanda item semasa membeli.

Carian mengikut bahan. “Apa yang boleh saya masak dengan ayam dan daun bawang?” hanya berfungsi kerana bahan ialah rekod berasingan. Lihat cara menambah carian pada aplikasi anda.

SEO untuk halaman resipi awam

Jika orang patut menemui resipi anda melalui carian, setiap resipi memerlukan URL sendiri, tajuk dan perihalan yang unik, dan kandungan resipi yang berada dalam HTML semasa halaman dimuatkan dan bukan dilukis kemudian oleh JavaScript. Tambah data berstruktur schema.org Recipe — bahan, langkah, masa, hidangan, imej — dijana daripada pangkalan data anda supaya sentiasa sepadan dengan halaman. Sertakan penilaian hanya jika orang sebenar meninggalkannya pada halaman. Panduan kami tentang apa itu data berstruktur menerangkan markup itu, dan dokumentasi Google sendiri menyenaraikan medan yang digunakannya.

Contoh prompt pertama

Bina aplikasi resipi keluarga, direka untuk telefon dahulu. Setiap resipi mempunyai tajuk, foto, hidangan, masa sediakan dan masa masak, tag, bahan dan langkah bernombor. Simpan setiap bahan sebagai rekod sendiri dengan kuantiti, unit, nama dan nota, dikumpulkan dalam bahagian pilihan seperti “Untuk sos”. Halaman resipi mempunyai kawalan hidangan yang menskalakan setiap kuantiti dan memaparkan pecahan yang mesra, suis unit metrik/AS, dan mod memasak dengan teks besar, kotak semak langkah dan skrin yang kekal menyala. Cari mengikut nama resipi atau bahan, dan tapis mengikut tag dan jumlah masa. Pengguna boleh menyimpan resipi ke dalam koleksi dan menambah satu atau lebih resipi ke senarai beli-belah yang menggabungkan bahan yang sepadan dan membenarkan saya menanda item. Ahli keluarga log masuk dengan e-mel dan kata laluan dan berkongsi satu buku masakan yang boleh disunting oleh semua. Simpan semuanya dalam pangkalan data dan foto dalam storan fail. Tambah enam resipi contoh.

Langkah membina

  1. Halaman resipi dengan data contoh. Jadikan paparan memasak cemerlang di telefon sebelum apa-apa yang lain.
  2. Kemasukan bahan berstruktur. Borang di mana setiap baris ialah kuantiti, unit, bahan dan nota. Tawarkan juga kotak “tampal senarai” yang memecahkan teks kepada baris, kemudian biarkan tukang masak membetulkan apa-apa yang terpecah dengan salah.
  3. Penskalaan dan unit. Uji dengan kes janggal: ⅓ cawan didarab dua, 1 biji telur dibahagi dua, “garam mengikut rasa”.
  4. Carian dan penapis.
  5. Senarai beli-belah. Gabungkan “2 biji bawang” dan “1 biji bawang” menjadi “3 biji bawang”; kekalkan unit berbeza berasingan dan bukannya meneka.
  6. Log masuk dan perkongsian. Lihat cara menambah log masuk pada aplikasi anda.
  7. Foto. Ubah saiz semasa muat naik supaya halaman kekal pantas.
  8. Halaman dan markup awam (jika awam). Kemudian terbitkan dan semak sumber halaman resipi.

Kesilapan biasa

  • Bahan sebagai satu medan teks. Anda kehilangan penskalaan, senarai beli-belah dan carian bahan.
  • Perpuluhan pada skrin. “0.333 cawan” tidak boleh digunakan. Paparkan pecahan.
  • Kisah hidup sebelum resipi. Pada aplikasi anda sendiri, letakkan bahan berhampiran bahagian atas, dengan pautan “lompat ke resipi” jika ada cerita.
  • Foto saiz penuh. Foto telefon besar; ubah saiz dan mampatkannya.
  • Menyalin resipi laman lain secara awam. Mengimport untuk kegunaan peribadi adalah satu perkara; menerbitkan semula teks dan foto orang lain ialah perkara lain.
  • Penilaian palsu dalam data berstruktur. Enjin carian boleh menghukum markup yang mengelirukan.
  • Nombor pemakanan dibentangkan sebagai tepat. Jika anda mengira pemakanan, nyatakan ia anggaran dan sebut sumber datanya.

Apabila aplikasi resipi siap sedia adalah lebih baik

Jika anda mahu menyimpan dan memasak resipi sendiri, aplikasi pengurus resipi yang mapan sudah mengimport daripada laman web, menyegerak merentasi peranti dan berfungsi luar talian. Untuk blog makanan, platform blog dengan pemalam kad resipi mengendalikan markup dan paparan cetak secara terus.

Bina sendiri apabila anda mahukan sesuatu yang alat-alat itu tidak lakukan: sistem resipi untuk perniagaan dengan kos atau penjejakan alergen, buku masakan yang dikongsi merentasi keluarga besar dengan struktur anda sendiri, resipi yang dihubungkan dengan rancangan hidangan atau kedai, atau reka bentuk yang sepenuhnya milik anda. Jika merancang hidangan mingguan adalah matlamat sebenar anda, baca cara bina aplikasi perancang hidangan seterusnya.

Membinanya dengan Mythex

Di Mythex, anda menerangkan aplikasi resipi dalam sembang, menyemak paparan memasak dalam bingkai bersaiz telefon pratonton langsung, dan menerbitkannya ke alamat awam yang boleh dibuka oleh keluarga atau pembaca di telefon mereka serta ditambah ke skrin utama. Mythex menambah pangkalan data Postgres khusus untuk resipi dan bahan serta storan fail untuk foto apabila aplikasi memerlukannya. Log masuk ialah bawa-sendiri: anda memilih pendekatannya dan ejen memasangnya. Pada Pro, Mythex juga boleh membungkusnya sebagai aplikasi Android dan iPhone, dihantar ke ujian dalaman Google Play dan TestFlight. Untuk laman resipi awam, lihat templat blog makanan dan panduan kami tentang membina aplikasi web yang mesra mudah alih.

Soalan lazim

Bagaimana saya menyimpan resipi dalam pangkalan data?

Simpan bahan sebagai baris berasingan dengan kuantiti, unit, nama bahan dan nota pilihan, dan bukannya sebagai satu blok teks. Struktur itulah yang membolehkan penskalaan hidangan, penukaran unit, pembinaan senarai beli-belah dan carian mengikut bahan.

Bolehkah aplikasi resipi mengimport resipi daripada laman web lain?

Banyak laman resipi menerbitkan data Recipe schema.org dalam halaman mereka, yang boleh dibaca oleh aplikasi untuk mengimport tajuk, bahan dan langkah. Anggap import sebagai penanda buku peribadi: menerbitkan semula teks dan foto resipi orang lain secara awam boleh melanggar hak cipta.

Bagaimana resipi muncul dengan foto dan penilaian dalam Google?

Google boleh memaparkan hasil kaya resipi apabila halaman menyertakan data berstruktur Recipe yang sah, mengikut dokumentasi Google sendiri. Sertakan penilaian hanya jika ia penilaian sebenar yang dipaparkan pada halaman, dan uji halaman dengan Rich Results Test Google.

Patutkah aplikasi resipi menjadi laman web atau aplikasi telefon?

Aplikasi web yang mesra mudah alih ialah permulaan yang praktikal: ia berfungsi pada mana-mana telefon, boleh ditambah ke skrin utama, dan halaman resipi boleh ditemui melalui carian. Aplikasi natif sesuai kemudian jika anda memerlukan penggunaan luar talian atau ciri peranti yang web tidak dapat tawarkan.

Mythex · Pricing · Bina apa sahaja dengan AI · Templat laman web dan aplikasi · Mythex dibandingkan · Glosari pembinaan aplikasi AI · Alat percuma untuk membina aplikasi dengan AI · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)