AI ile tarif uygulaması nasıl yapılır

İlk sürümü küçük tutun. Bir tarif uygulaması birçok yöne büyüyebilir, ancak en hızlı yol net bir sürüm 1 oluşturmaktır.

Temel kullanıcı akışına karar verin:

• tarifleri inceleme
• ada veya malzemeye göre arama
• öğün türüne, mutfağa veya hazırlık süresine göre filtreleme
• tarif detay sayfasını açma
• hesap gerekiyorsa favorilere kaydetme

İlk kurulum için ekranları listeleyin:

• ana sayfa veya keşfet ekranı
• tarif listesi ekranı
• tarif detay ekranı
• gerekirse kaydedilen tarifler ekranı
• yalnızca hesap önemliyse basit profil veya oturum açma ekranı

Ardından her tarifin hangi verileri içermesi gerektiğine karar verin:

• başlık
• kısa açıklama
• görsel
• hazırlık süresi
• pişirme süresi
• porsiyon
• malzemeler
• uygulama adımları
• vejetaryen, hızlı, glutensiz gibi etiketler

Ayrıca bunun bir web sitesi mi yoksa mobil uygulama mı olacağına karar verin. Moremade’de web siteleri React + Tailwind kodu olarak oluşturulur. Mobil uygulamalar ise Expo ile React Native içinde geliştirilir. İnsanların çoğunlukla telefonda kullanmasını istiyorsanız, mobil uygulama olarak başlayın.

İlk prompt önemlidir çünkü yapıyı belirler. Ekranlar, veri alanları ve davranışlar konusunda spesifik olun. "Bir tarif uygulaması yap" gibi belirsiz isteklerle başlamayın.

Daha iyi bir prompt şunları açıklar:

• platform: web veya mobil
• hedef kullanıcı
• gerekli ekranlar
• temel etkileşimler
• örnek içerik
• düz ifadelerle görsel stil

İşte iyi bir başlangıç promptu:

Ev aşçıları için React Native (Expo) ile bir mobil tarif uygulaması oluştur. Öne çıkan tarifler ve kategoriler içeren bir ana ekran, öğün türü, mutfak ve hazırlık süresi için arama ve filtreleme bulunan bir keşfet ekranı, görsel, malzemeler, adım adım yöntem, porsiyon, hazırlık süresi, pişirme süresi ve etiketler içeren bir tarif detay ekranı ve kaydedilen tarifler ekranı ekle. 12 tarif için örnek veri kullan. Uygulamayı büyük tarif görselleri, basit bir alt gezinme menüsü ve net boşluklarla temiz ve okunaklı olacak şekilde tasarla. Aramanın ve filtrelerin örnek veriyle çalışmasını sağla.

Bu, projeyi aşırı karmaşıklaştırmadan somut bir ilk taslak üretmek için yeterlidir.

İlk kurulumdan sonra canlı ön izlemeyi açın ve temel noktaları kontrol edin:

• gezinme mantıklı mı
• kullanıcılar tarifleri hızlıca bulabiliyor mu
• tarif detay sayfası yemek yaparken okunaklı mı
• filtreler belirgin mi
• metinler telefon ekranında yeterince büyük mü

Her seferinde tek şeyi değiştiren kısa takip promptları kullanın. Bu, tam bir yeniden tasarım istemekten genellikle daha iyi sonuç verir.

Üç yararlı örnek:

• "Aramayı keşfet ekranının en üstüne taşı, filtreleri yatay bir chip satırında tut ve arama yer tutucusunu 'Tarif veya malzeme ara' yap."
• "Tarif detay ekranında tarifi kaydetmek için sabit bir buton ekle ve daha rahat okumak için malzemeler ve yöntem bölümlerindeki satır aralığını artır."
• "Genel örnek yemekleri daha gerçekçi hafta içi öğünlerle değiştir ve yüksek proteinli, vejetaryen, 30 dakikanın altında gibi etiketler ekle."

Moremade ayrıca bir görsel inceleyici içerir; böylece bir öğeyi işaret edip değiştirebilirsiniz. Ayrıca oluşturulan kaynak kodu daha doğrudan incelemek isterseniz bir kod görünümü de bulunur. Daha sonraki bir değişiklik uygulamayı kötüleştirirse ve geri dönmeniz gerekirse sürüm geçmişi yardımcı olur.

Birçok tarif uygulamasının sürüm 1’de kullanıcı hesabına veya ödemeye ihtiyacı yoktur. Gerçekten bir arka uç özelliği eklemek için nedeniniz yoksa statik örnek verilerle başlayın.

Şunlara ihtiyacınız varsa Supabase kullanın:

• cihazlar arasında kaydedilen tarifler için kullanıcı hesapları
• kullanıcıların oluşturduğu tarifler için bir veritabanı
• yüklenen tarif fotoğrafları için dosya depolama

Şu tür bir şey için ücret almak istiyorsanız Stripe kullanın:

• premium bir öğün planı bölümü
• ücretli tarif paketleri
• gelişmiş özellikler için abonelik

Moremade, Supabase ve Stripe için yerleşik bağlayıcılar içerir. Uygulamanızın yalnızca gezinme, arama ve tarif detaylarına ihtiyacı varsa, başlangıçta ikisini de atlayın. Kullanıcı akışı çalışır hale geldikten sonra daha sonra ekleyebilirsiniz.

Mantıklı bir sıra şöyledir:

1. uygulamayı örnek tariflerle oluşturun
2. ekranları ve etkileşimleri doğrulayın
3. kullanıcıların hesaplara veya kaydedilmiş verilere ihtiyacı varsa Supabase ekleyin
4. yalnızca satın alınabilir net bir ücretli özellik varsa Stripe ekleyin

Bu, ilk sürümü daha basit ve test etmesi daha kolay hale getirir.

Bir tarif uygulaması çoğunlukla mutfaklarda, küçük ekranlarda ve sık sık tek elle kullanılır. Buna göre test edin.

Şunları kontrol edin:

• tarif başlıkları garip şekilde satır atlamıyor mu
• malzeme listeleri hızlıca taranabiliyor mu
• yöntem adımları yeterli boşluğa sahip mi
• filtre kontrolleri başparmakla kullanılabilir mi
• görseller makul boyutlarda yükleniyor mu
• kaydedilen tariflere tekrar ulaşmak kolay mı

Ayrıca gerçekçi içerik uzunluklarıyla test edin. Kısa bir örnek tarif düzgün görünürken gerçek bir tarif düzeni bozabilir.

Bir şey yanlış gelirse, genel şikayetler yerine hedefli promptlar gönderin. Örneğin:

• "Tarif kartlarındaki görsel yüksekliğini azalt, böylece ekranda daha fazla tarif görünsün."
• "Dokunma için malzeme onay kutularını daha büyük yap."
• "Başlığın altında porsiyon, hazırlık süresi ve pişirme süresini tek bir özet satırında göster."

Bir web sitesi yerine mobil uygulama yapıyorsanız bile telefon boyutundaki görünüm alanlarında test edin. Birçok tarif sitesinin kullanımının büyük kısmı mobil tarayıcılardan gelir.

Uygulama dış test için yeterince iyiyse, yayınlayın.

Moremade, tek tıklamayla ücretsiz yourname.moremade.ai alt alan adına yayınlamanıza izin verir. Ücretli planlarda özel alan adı bağlayabilirsiniz. Alan adları Moremade içinde de satın alınabilir.

Erken test için ücretsiz alt alan adı genellikle yeterlidir. Alan adı için ödeme yapmadan veya her ayrıntıyı cilalamadan önce geri bildirim almak istediğinizde kullanışlıdır.

Bir müşteri veya ekiple çalışıyorsanız, tam kaynak kodunu ZIP olarak dışa aktarabilir veya GitHub’a gönderebilirsiniz. Moremade her ikisini de destekler. Bu önemlidir, çünkü kod sizde kalır ve tek bir barındırma düzenine bağlı kalmazsınız.

Mantıklı bir yayın akışı şöyledir:

• geçici bir alt alan adına yayınlayın
• küçük bir grupla test edin
• düzen ve içerik sorunlarını düzeltin
• proje bunu hak ediyorsa daha sonra özel alan adı bağlayın

En büyük hatalar genellikle koddan çok kapsam ve promptlarla ilgilidir.

Şunlara dikkat edin:

• ilk sürümde çok fazla şey istemek
• olmazsa olmaz özellikleri gelecekteki fikirlerle karıştırmak
• ana tarif akışını doğrulamadan önce oturum açma eklemek
• "daha iyi yap" veya "daha modern yap" gibi belirsiz promptlar kullanmak
• uzun malzeme listeleri ve gerçek tarif talimatlarıyla test etmemek
• mobil okunabilirliği göz ardı etmek

Birkaç pratik alışkanlık yardımcı olur:

• sürüm 1’i kısa bir madde listesiyle tanımlayın
• gerçek tariflere benzeyen örnek veriler kullanın
• her seferinde tek bir ekranı veya etkileşimi iyileştirin
• arka uç özelliklerini yalnızca ürün gerçekten ihtiyaç duyduğunda ekleyin
• istikrarlı bir dönüm noktasına geldiğinizde kodu dışa aktarın

Bu süreci takip ederseniz, daha erken çalışan bir tarif uygulamasına sahip olur ve sırada ne yapılacağına dair daha temiz kararlar verirsiniz.