AI ile Mobil Uygulama Nasıl Geliştirilir

Herhangi bir AI oluşturucu açmadan önce, temel bilgileri sade bir dille yazın.

Kısa tutun:

• uygulama kimin için
• yardımcı olduğu tek ana görev
• ilk ihtiyaç duyacağı 3 ila 5 ekran
• her ekranın gösterdiği veya topladığı veriler
• kullanıcıların hesap oluşturması gerekip gerekmediği
• ödeme gerekip gerekmediği

Basit bir alışkanlık takipçisi örneği:

• kullanıcılar: günlük alışkanlıklarını takip eden kişiler
• ana görev: alışkanlıkları her gün tamamlandı olarak işaretlemek
• ekranlar: ana sayfa, alışkanlık detayı, alışkanlık ekle, profil
• veriler: alışkanlık adı, hedef sıklık, tamamlama geçmişi
• hesaplar: evet, ilerleme cihazlar arasında eşitlenmeli ise
• ödemeler: hayır, ücretli bir katman planlamıyorsanız

Bu adım önemlidir çünkü AI, "bana bir fitness uygulaması yap" gibi geniş fikirlerden ziyade kısıtlarla daha iyi çalışır.

Moremade’de uygulamayı sade bir dille tarif edersiniz ve AI ajanı kaynak kodu yazar. Mobil uygulamalar Expo kullanılarak React Native uygulamaları olarak oluşturulur.

İlk promptunuz şunları içermelidir:

• uygulamanın amacı
• hedef kullanıcılar
• gerekli ekranlar
• her ekrandaki temel eylemler
• görsel stil
• şimdilik nelerin dahil edilmeyeceği

İlk sürümü dar kapsamlı tutun. Bitmiş ürün değil, kullanılabilir bir taslak isteyin.

iPhone ve Android için Habit Day adlı bir mobil uygulama oluşturun. Kullanıcıların günlük alışkanlıklarını takip etmesine yardımcı olsun. Dört ekran oluşturun: Ana Sayfa, Alışkanlık Detayı, Alışkanlık Ekle ve Profil. Ana Sayfa'da bugünün alışkanlıklarını net bir tamamla düğmesiyle gösterin. Alışkanlık Detayı; alışkanlık adını, hedef sıklığı, notları ve son tamamlama geçmişini göstersin. Alışkanlık Ekle ekranında kullanıcı ad girebilsin, günlük veya haftalık sıklık seçebilsin ve kaydedebilsin. Temiz, sade bir düzen, büyük dokunma alanları ve nötr renkler kullanın. Şimdilik ödeme, sosyal özellikler veya bildirimler eklemeyin.

Bu düzeyde ayrıntı, genellikle tek satırlık bir istekten daha iyi bir ilk sonuç üretir.

İlk oluşturmanın ardından canlı önizlemeyi kullanarak uygulamayı bir kullanıcı gibi inceleyin. Eksik durumları, belirsiz etiketleri, garip boşlukları ve gezinme sorunlarını kontrol edin.

Moremade, uygulamayı sohbet ederek değiştirmenize izin verir; ayrıca görsel bir denetçi ve kod görünümü de içerir. Belirli bir öğe sorunluysa, örneğin bir düğme boyutu veya padding, görsel denetçiyi kullanın. Değişiklik davranışı veya ekranlar arası düzeni etkiliyorsa sohbeti kullanın.

İyi takip promptları somuttur. Örneğin:

• "Ana Sayfa ekranında alışkanlık ekle düğmesini sabit bir alt eylem düğmesine taşı ve tamamlanan alışkanlıkları tamamlanmayanların altına yerleştir."
• "Ana Sayfa'da, henüz hiç alışkanlık yokken ne yapılacağını açıklayan bir boş durum ekle; Alışkanlık Ekle ekranını açan bir düğme de olsun."
• "Profil ekranını daha sade yap: avatar yer tutucularını kaldır, yalnızca ad, e-posta ve çıkış düğmesini göster."

Kısa revizyon döngüleri en iyi sonucu verir. İlgili değişikliklerden bir grup yapın, önizlemeyi tekrar kontrol edin, sonra devam edin.

İlk uygulama taslağı her zaman bir backend gerektirmez. Uygulama yalnızca bir prototip veya yerel bir demo ise, hesaplar ya da ödemeler eklemeden önce akışı doğrulayabilirsiniz.

Backend özelliklerine gerçekten ihtiyaç duyduğunuzda, Moremade yerleşik Supabase ve Stripe bağlantıları sunar.

Şu durumlarda Supabase kullanın:

• kullanıcı girişi
• uygulama verileri için veritabanı
• dosya depolama

Tipik örnekler; kaydedilmiş ilerlemeli görev uygulamaları, kullanıcı hesaplı pazar yerleri veya verilerin kalıcı olması gereken iç araçlardır.

Şu durumlarda Stripe kullanın:

• ücretli abonelikler
• tek seferlik satın alımlar
• belirlediğiniz fiyatlarla ödeme alma

Kullanıcı yolculuğunda gerçek bir ödeme adımı yoksa Stripe eklemeyin.

Pratik bir komut şöyle olabilir:

• "Supabase e-posta girişi ekle ve alışkanlıkları kullanıcı başına sakla, böylece her kişi yalnızca kendi verisini görsün."
• "Premium plan için bir Stripe ödeme ekranı ekle, ancak ücretsiz sürümü ödeme olmadan kullanılabilir bırak."

Bu parçaları temel ekranlar çalıştıktan sonra ekleyin. Aksi halde ürün kapsamını ve entegrasyon ayrıntılarını aynı anda ayıklamak zorunda kalırsınız.

Tarayıcı boyutunda bir çerçevede iyi görünen bir mobil uygulama, gerçek bir cihazda yine de başarısız olabilir.

Mümkünse hem iPhone hem Android’de temel noktaları kontrol edin:

• dokunma alanı boyutu
• küçük ekranlarda metnin satır kaydırması
• klavyenin form alanlarını kapatması
• uzun listeler ve kaydırma davranışı
• yüklenme ve boş durumlar
• geri gezinme davranışı

Moremade, mobil uygulamaları React Native ve Expo ile oluşturduğu için, bir sahte maketten ziyade gerçek bir uygulama kod tabanına doğru ilerliyorsunuz. Bu da erken cihaz testini değerli kılar.

Test ederken düzeltmeleri somut istekler halinde yazın:

• "Kaydet düğmesi, Alışkanlık Ekle'de klavye açıldığında gizleniyor. Düğmeyi klavyenin üstünde görünür tutun."
• "Alışkanlık Detayı ekranında notlar alanı ile tamamlama geçmişi listesi arasında daha fazla boşluk gerekiyor."
• "Android'de başlık metnini kısaltın ve iki satıra taşmasını önleyin."

Uygulamanın sağlam hissetmeye başladığı yer genellikle burasıdır.

Paylaşmaya değer bir sürüme geldiğinizde, Moremade üzerinden yayınlayabilirsiniz.

Moremade'in sundukları:

• ücretsiz yourname.moremade.ai alt alan adına tek tıkla yayınlama
• ücretli planlarda özel alan adı bağlama
• Moremade içinde alan adı satın alma
• tam kaynak kodunu istediğiniz zaman ZIP olarak dışa aktarma
• kaynak kodunu GitHub'a gönderme

İç inceleme veya erken geri bildirim için ücretsiz alt alan adı genellikle yeterlidir. Uygulama bir müşteri projesinin parçasıysa veya herkese açık bir lansman yapıyorsanız, ücretli plan kullanın ve özel alan adı bağlayın.

Sürüm geçmişi, değişikliklerin birden fazla turu başladıktan sonra faydalı olan Standard ve Pro planlarda mevcuttur.

Uygulamayı Moremade'den yayınlasanız bile oraya bağlı kalmazsınız. Kaynak kodu ZIP olarak dışa aktarılabilir veya GitHub'a gönderilebilir.

Sorunların çoğu araçtan değil, kapsamdan ve belirsiz talimatlardan kaynaklanır.

Şu hatalara dikkat edin:

• ilk promptta fazla şey istemek
• prototip hedefleri ile üretim gereksinimlerini karıştırmak
• temel akış çalışmadan önce giriş ve ödemeleri eklemek
• "daha iyi yap" gibi tasarım geri bildirimi vermek yerine sorunu adlandırmamak
• gerçek bir telefonda test etmemek
• boş listeler, hatalı form girdisi ve yavaş yükleme durumları gibi uç durumları unutmak

Daha iyi bir süreç şudur:

1. en küçük faydalı sürümü oluşturun
2. önizlemeyi dikkatlice inceleyin
3. somut promptlarla iyileştirin
4. veri veya ödemeleri yalnızca gerekliyse ekleyin
5. yön netleştiğinde kodu dışa aktarın

Bu yaklaşım uygulamayı anlaşılır tutar ve yeniden iş yapmayı azaltır.