🚀 Mobil Uygulamalarda Yapay Zeka: Fikirden Canlıya AI-Driven Development

Modern yazılım geliştirme dünyasında radikal bir dönüşümün tam ortasındayız. Birkaç yıl öncesine kadar mobil uygulama geliştirmek denildiğinde akla ilk gelen şeyler; aylarca süren ortam kurulumları, native dillerin (Swift/Kotlin) veya cross-platform framework’lerin (React Native/Flutter) dik öğrenme eğrileri, karmaşık state management mimarileri ve bitmek bilmeyen boilerplate kod bloklarıydı.

Bugün ise AI-Driven Development (Yapay Zeka Destekli Geliştirme) paradigması sayesinde, bir yazılım projesinin merkezindeki "zorluk" kavramı tamamen yer değiştirdi.

Bu blog serisinde, yapay zeka araçlarını (Cursor, Composer, LLM'ler) birer "kod üretici" olmanın ötesinde birer mühendislik kaldıracı olarak kullanarak, sıfırdan yayınlanabilir (production-ready) bir mobil pazaryeri uygulamasını—PetVibe'ı—adım adım nasıl inşa ettiğimizi inceleyeceğiz.

Ancak kodlamaya geçmeden önce, bir Yapay Zeka Mühendisi perspektifiyle yazılım geliştirmede değişen dinamikleri doğru okumak kritik önem taşıyor.

💡 Kod Yazmak İşin En Kolay Kısmı mı?

Geleneksel yazılım kültüründe geliştirme süreci (development), projenin en çok vakit alan, en zorlu ve en maliyetli bölümü olarak görülürdü. Oysa günümüz yapay zeka ekosisteminde gerçek şu: Geliştirme kısmı, bir projenin en basit ve en kolay adımıdır.

Neden mi? Çünkü geliştirme sürecinde zaten kuralları belli olan, bilinen bir işi yaparsınız. Söz dizimi (syntax) kuralları, fonksiyon tanımları veya standart API entegrasyonları deterministik yapılardır. Yapay zeka modelleri tam da bu deterministik alanda insan hızının yüzlerce kat üstüne çıkabilmektedir.

Asıl kritik ve zor olan kısım ise bilmediğiniz alandır:

• Bu iş bize hangi ihtiyaçtan geliyor?
• Hangi kitleye dokunuyor?
• Sistem mimarisi, veri akışı ve kullanıcı senaryoları doğru kurgulandı mı?

Bir projenin %80'lik başarısını belirleyen faktör yazılan kodun satır sayısı değil; doğru problemi tanımlamak, doğru ürün gereksinim dökümanını (PRD) kurgulamak ve doğru mimari sınırları çizmektir. Şayet bu analitik kabiliyete ulaştıysanız, YZ araçlarıyla kodlama aşaması sürecin en hızlı akan parçasına dönüşür.

🤖 Yapay Zeka: İkame mi, Kaldıraç mı?

Sektörde sıkça tartışılan "Yapay zeka yazılımcıların yerini mi alıyor?" sorusuna bir AI Engineer gözüyle yanıt vermek gerekir: Yapay zeka kod yazmanın yerini almıyor; mühendislik yeteneklerimizi katlayan bir kaldıraç (leverage) görevi görüyor.

Bir mobil uygulama geliştirirken YZ araçları size şu imkanları sağlar:

1. Context-Aware Development: Proje dökümanlarınızı (PRD), veri modellerinizi ve dizin yapınızı anlayarak projenin bütününe uyumlu kod üretir.
2. Boilerplate Yükünü Kaldırma: Saatler süren navigasyon kurulumları, state bağlantıları veya UI component şablonlarını saniyeler içinde oluşturur.
3. Gerçek Zamanlı Debugging: Karşılaşılan paket uyumsuzluklarını, ortam hatalarını veya veritabanı indeksleme sorunlarını anında tespit edip çözüm önerileri sunar.

Ancak direksiyonda yine mühendis oturur. YZ’ye doğru yönlendirmeleri vermek (Prompt Engineering / Context Building), üretilen çıktıyı mimari açıdan denetlemek ve uçtan uca sistem bütünlüğünü korumak insan zekasının görevidir.

🐾 Blog Serimizin Odağı ve Örnek Projemiz: "PetVibe"

Bu blog serisinde teorik anlatımlardan uzak durup, gerçek hayat senaryosuna dayanan PetVibe adını verdiğimiz Evcil Hayvan Bakım, Gezdirme ve Sosyal Hizmet Pazaryeri uygulamasını sıfırdan hayata geçireceğiz.

PetVibe; tıpkı C2C (Consumer-to-Consumer) hizmet pazaryerlerinde olduğu gibi çift taraflı bir kullanıcı modeline dayanıyor:

• Pet Sahipleri (Client): Seyahate çıkarken, işteykensevimli dostları için güvenilir, konum olarak yakın, şeffaf fiyatlı bakıcı veya gezdirici arayanlar.
• Pet Bakıcıları/Gezdiricileri (Professional): Esnek saatlerde evcil hayvan bakımı hizmeti sunarak gelir elde etmek isteyenler.

---

💡 1. Bölüm: Problemi Anlamak ve Doğru Fikri Olgunlaştırmak (ANLAMAK)

Bir mobil uygulama geliştirme sürecinde developer'ların yaptığı en büyük hatalardan biri, akıllarına gelen ilk fikirle birlikte heyecanla kod editörünü (IDE) açıp doğrudan yazılama gömülmeleridir. Oysa yazılım dünyasının yazılı olmayan ama altın değerinde bir kuralı vardır: Başarılı bir projenin ana unsuru kod yazmak değildir.

Geliştirme süreci, işin kuralı ve yöntemi belli olan en konforlu kısmıdır. Asıl farkı yaratan; kod yazmaya başlamadan önce hangi kitleye ulaştığınızı, onların hangi derdine derman olduğunuzu ve o pazarda nasıl ayakta kalacağınızı anlayabilmektir.

1. Pazar Araştırması (Market Research)

PetVibe özelinde sektöre baktığımızda:

• Global ve Yerel Büyüme: Evcil hayvan sahiplenme oranları son yıllarda dramatik bir şekilde arttı. İnsanlar evcil hayvanlarını birer "sosyal sorumluluk" değil, ailenin bir ferdi olarak görüyor.
• Mevcut Çözümlerin Eksikliği: Pazarda genel ilan siteleri veya kulaktan kulağa yayılan tavsiyeler var. Ancak pet sahipleri için özel olarak tasarlanmış; güvenlik, konum yakınlığı ve canlı iletişim sunan dikey (niche) platformların sayısı oldukça yetersiz.
• Kullanıcı Eğilimleri: Yoğun iş temposu, seyahatler veya acil durumlar nedeniyle insanlar sevimli dostlarını emanet edebilecekleri "güvenilir" ve "hızlı" çözümlere ciddi bir bütçe ayırmaya hazır.

2. Hedef Kitle Belirleme (Target Audience)

Hedef kitlenizi ne kadar geniş tutarsanız, tam isabet nokta vuruşu yapma olasılığınız o kadar düşer. PetVibe için hedef kitlemizi net hatlarla ikiye ayırdık:

1. Hizmet Alanlar (Pet Sahipleri / Client):
   • Yaş Skalası: 20-35 yaş arası genç profesyoneller, öğrenciler ve çalışanlar.
   • İhtiyaç: Gün içinde işte veya seyahatteyken kedisine/köpeğine gözü gibi bakacak, evini açacak veya yürüyüşe çıkaracak güvenilir birini bulmak.
2. Hizmet Verenler (Pet Bakıcıları ve Gezdiricileri / Professional):
   • Yaş Skalası: 18-30 yaş arası hayvanseveler, veterinerlik/hobi öğrencileri veya esnek zamanlı ek gelir arayanlar.
   • İhtiyaç: Hayvan sevgisini kazanca dönüştürmek, kendi çalışma saatlerini ve fiyatını belirlemek.

3. Problemi Tanımlama (Problem Definition)

PetVibe'ın çözdüğü gerçek hayat problemleri:

• Güvensizlik ve Şeffaflık Eksikliği: Rastgele bulunan bakıcıların geçmiş deneyimleri veya diğer kullanıcı değerlendirmeleri bilinmiyor.
• Fiyat Karmaşası ve Gizli Maliyetler: Bakıcının ne kadar ücret istediği, nakit mi yoksa kart mı kabul ettiği veya saatlik tarifesinin ne olduğu önceden öngörülemiyor.
• Konum ve Zaman Kısıtı: Acil bir iş seyahatinde, mahalledeki açık veya yakın bakıcıları harita üstünde anlık görebilme imkanı yok.

Çözümümüz: İhtiyaç sahibinin ilan açtığı, etraftaki bakıcıların bu ilana teklif verdiği, puan/yorum sistemli ve harita destekli şeffaf bir pazar yeri.

4. Çözüm Geliştirme ve MVP Felsefesi

Fikrimiz ve problemimiz netleştikten sonra yapılan en büyük mühendislik hatalarından biri, ürünü ilk günden "tüm hayal edilen özelliklerle" (Full Product) çıkarmaya çalışmaktır. Biz PetVibe projesinde kesin bir şekilde MVP yaklaşımını benimsedik.

MVP Nedir? Bir fikrin, kullanıcıya temel faydasını sağlayacak en minimum düzeydeki çalışan versiyonudur.

[❌ Hatalı Yaklaşım: Full Product]
Fikir ➔ 6 Ay Kodlama (Tüm Özellikler) ➔ Canlıya Çıkış ➔ Kullanıcı Beğenmedi ➔ Devasa Zaman ve Maliyet Kaybı!

[✅ Doğru Yaklaşım: MVP Iteration]
Fikir ➔ 2 Hafta Kodlama (Çekirdek Özellikler) ➔ MVP Canlıya Çıkış ➔ Gerçek Geri Bildirim (Feedback) ➔ Yeni Özellikler

PetVibe MVP Kapsamında Neler Var?

• Kullanıcı kaydı ve rol seçimi (Pet Sahibi vs. Bakıcı).
• Basit ilan oluşturma (Evcil hayvan türü, tarih, konum, bütçe).
• Bakıcıların ilana teklif vermesi (Fiyat ve süre).
• Harita üzerinde bakıcıları görme ve temel Chat/İletişim altyapısı.

5. İş Modeli Geliştirme (Monetization)

PetVibe gibi arz-talep dengesini kuran C2C pazaryerlerinde en sağlıklı model Komisyon (Commission) almaktır.

PetVibe Gelir Modeli: Tamamlanan her bakım veya gezdirme işlemi üzerinden %15-%20 komisyon alınır. Örneğin, 500 TL'lik bir gezdirme teklifi onaylanıp hizmet başarılı bir şekilde tamamlandığında, sistem 100 TL komisyon kesintisi yapar. Bu durum hem hizmet alanı güvenli bir platformda buluşturduğu hem de bakıcıya müşteri sağladığı için her iki taraf için de adil bir değer yaratır.

6. Pazarlama Stratejisi ve Lansman

Pazarlama stratejisi, yapılan ürünün hedef kitleye tanıtım aşamasıdır. PetVibe sürecinde stratejimizi şu kanallar üzerine kurduk:

• Sosyal Medya & İçerik Pazarlaması: "Sevimli dostlarımızın komik anları" gibi organik içeriklerle pet sahiplerini topluluğa çekmek.
• Building in Public (Açıkta Geliştirme): Bu blog serisi ve YouTube videoları gibi süreçler aslında projenin ilk pazarlama adımıdır. Süreci şeffafça paylaşmak, henüz ürün çıkmadan ilk sadık kullanıcı kitlenizi (Early Adopters) oluşturmanızı sağlar.
• Yerel İş Birlikleri: Mahalle veterinerleri ve petshop'lara QR kodlu broşürler bırakarak ilk arz-talep havuzunu oluşturmak.

---

📄 2. Bölüm: Mühendislik Temeli - PRD Dökümanı Hazırlama

Yazılım dünyasında ve özellikle yapay zeka destekli geliştirmede (AI-Driven Development) en sık karşılaşılan tuzak şudur: Yapay zekadan ne istediğinizi tam olarak sistemleştirmezseniz, size tutarsız ve dağınık kod blokları üretir.

İşte bu noktada devreye PRD (Product Requirement Document - Ürün Gereksinim Dökümanı) girer. PRD, geliştirilecek uygulamanın amacını, kullanıcı senaryolarını, teknik gereksinimlerini ve mimari sınırlarını tanımlayan tek gerçek kaynaktır (single source of truth). YZ'ye "Bana bir mobil uygulama yaz" demek yerine hazırladığımız PRD dökümanını verdiğimizde, sistem projenin bütününü anlar ve mimariye tam uyumlu kodlar üretir.

1. PetVibe Tech Stack (Teknoloji Yığını)

• Frontend (Mobil Arayüz): React Native (Expo) - Tek bir kod tabanıyla hem iOS hem Android çıktısı alabilmek, zengin ekosistem ve AI modellerinin (LLM) React Native / TypeScript konusunda devasa veri kümesine sahip olması.
• State Management (Durum Yönetimi): Redux Toolkit / Centralized Store - Kullanıcı oturum durumu, aktif ilanlar ve anlık tekliflerin uygulama genelinde sorunsuz senkronize edilmesi.
• Backend & Veritabanı: Firebase (Authentication & Firestore DB) - MVP aşamasında sunucu (server) yönetimi maliyetini ortadan kaldırmak, Firebase Auth ile hızlı rol tabanlı kayıt oluşturmak ve Firestore ile NoSQL esnekliğinde gerçek zamanlı veri akışı sağlamak.
• Medya Depolama (Storage): Cloudflare R2 / Firebase Storage - Evcil hayvan fotoğrafları ve bakıcı profil görsellerini yüksek hızla ve düşük maliyetle barındırmak.
• Harita & Lokasyon Servisleri: Google Maps API - Pet sahibine en yakın bakıcıları harita üzerinde göstermek ve dinamik mesafe/konum hesabı yapmak.
• Bildirim Sistemi: Firebase Cloud Messaging (FCM) - Yeni teklif geldiğinde veya mesaj alındığında kullanıcılara anlık push bildirim göndermek.

2. PetVibe PRD Dökümanı (Product Requirement Document)

Aşağıdaki PRD dökümanı, Cursor Composer'a doğrudan besleyeceğimiz dökümandır:

# PRODUCT REQUIREMENT DOCUMENT (PRD)

## 1. Proje Tanımı
**Proje Adı:** PetVibe
**Özet:** PetVibe; evcil hayvan sahipleri (Client) ile güvenilir evcil hayvan bakıcıları ve gezdiricilerini (Professional) bir araya getiren konum tabanlı, çift taraflı bir mobil pazaryeri uygulamasıdır.

## 2. Hedef Kitle & Kullanıcı Rolleri
1. **Pet Sahibi (Client):** Evcil hayvanı için bakım veya gezdirme hizmeti arayan kullanıcılar.
2. **Pet Bakıcısı/Gezdiricisi (Professional):** Esnek zamanlı olarak bakım/gezdirme hizmeti veren, profil oluşturan ve ilanlara teklif sunan kullanıcılar.

## 3. Temel Kullanıcı Akışları (User Flow)
### 3.1. Pet Sahibi (Client) Akışı:
- Uygulamaya giriş yapar ("Pet Sahibiyim" seçeneği).
- İlan/Talep Oluşturur: Evcil hayvan türü (Köpek, Kedi vb.), Hizmet Türü (Gezdirme, Evde Bakım), Tarih/Saat, Konum ve Bütçe belirtir.
- Etraftaki bakıcıları Google Maps haritası üzerinden veya liste halinde filtreleyerek inceler.
- İlanına gelen teklifleri (Fiyat + Süre/Açıklama + Bakıcı Puanı) görüntüler.
- İstediği teklifi kabul eder veya reddeder.
- Teklifi kabul edilen bakıcı ile anlık Chat üzerinden mesajlaşır.
- Hizmet tamamlandığında bakıcıyı puanlar (Rating) ve yorum yapar.

### 3.2. Pet Bakıcısı (Professional) Akışı:
- Uygulamaya giriş yapıp profilini tamamlar ("Bakıcıyım" seçeneği).
- Uzmanlık alanlarını (Köpek Gezdirme, Yatılı Bakım), deneyim yılını ve saatlik baz ücretini tanımlar.
- Havuzdaki açık bakım ilanlarını konumuna göre listeler.
- Uygun gördüğü ilana fiyat (TL) ve açıklama içeren teklif gönderir.
- Teklifi kabul edildiğinde push bildirim alır ve müşteri ile mesajlaşmaya başlar.
- İşi tamamlandığında durum güncellemesi yapar ("İş Başladı", "Tamamlandı").

## 4. Teknik Mimari ve Ekran Listesi
### 4.1. Ekranlar (Screens):
1. **Auth & Onboarding:** Splash Screen, Login Screen, Register Screen
2. **Client Ekranları:** Client Home Screen, Create Request Screen, Find Sitter (Map) Screen, Request Detail Screen
3. **Professional Ekranları:** Pro Home Screen, Offer Create Screen, Pro Profile Edit Screen
4. **Ortak Ekranlar:** Sitter Profile Detail Screen, Chat List Screen, Chat Room Screen, Profile Screen

## 5. Veritabanı Şeması (Firestore Collections)
### users Koleksiyonu:
- uid, name, email, role, profileImage, location, rating, experienceYears, skills

### requests Koleksiyonu (Bakım İlanları):
- requestId, clientId, petType, serviceType, date, budget, status, location

### offers Koleksiyonu (Bakıcı Teklifleri):
- offerId, requestId, proId, price, note, status

### chats & messages Koleksiyonu:
- chatId, participants, lastMessage, updatedAt, messages (sub-collection)

3. YZ İle PRD Bağlantısı Nasıl Kurulur?

1. Projemizin ana dizinine PRD.md adıyla bu dökümanı kaydederiz.
2. Cursor IDE üzerinde Composer modunu açıp @PRD.md ifadesiyle dökümanı bağlama (context) ekleriz.
3. Yapay zekaya ilk komutumuzu veririz: "Sana verdiğim PRD dökümanını incele. React Native (Expo) projemizin klasör yapısını (Folder Structure) ve ana navigasyon mimarisini bu dökümanda belirtilen ekranlara göre kurgulamaya başla."

---

🎨 3. Bölüm: Yapay Zeka İle Ekran Tasarımı ve İlk Prototip (ÖN YÜZ GELİŞTİRME - 1)

Bu bölümde, kod yazım sürecinin ilk etabını oluşturan ön yüz (frontend) geliştirme, navigasyon mimarisi ve rol bazlı prototipleme adımlarını ele alacağız.

1. Proje Kurulumu ve AI IDE Entegrasyonu (Cursor Composer)

Geleneksel geliştirmede proje dizin yapısını, bağımlılıkları (dependencies) ve navigasyon paketlerini elle tek tek kurmak ciddi bir vakit kaybıdır. Biz bu süreçte Cursor IDE'nin Composer özelliğinden faydalandık.

Cursor Composer paneline @PRD.md dosyamızı besleyerek ilk talimatımızı verdik: "Sana verdiğim PRD dökümanını incele. React Native (Expo) ortamında PetVibe uygulamamız için gerekli temel klasör yapısını (src/screens, src/navigation, src/components, src/store) ve bağımlılıkları kur. Kodlamaya öncelikle frontend navigasyon yapısı ile başlayalım."

Yapay zeka dökümanı analiz ederek kısa sürede projenin dosya ağacını (file tree) üretti ve react-navigation bağımlılıklarını paket yönetimine ekledi.

2. Rol Tabanlı Akış ve İlk Ekranlar (Role-Based Flow)

PetVibe çift taraflı bir pazaryeri uygulaması olduğu için, kullanıcı uygulamayı ilk açtığında karşısına net bir seçim çıkmalıdır:

• "Pet Sahibiyim" (Client)
• "Pet Bakıcısıyım" (Professional)

// YZ Tarafından Üretilen Rol Seçim Mantığı (Örnek Snippet)
const handleRoleSelect = (selectedRole: 'client' | 'professional') => {
    setRole(selectedRole);
    if (selectedRole === 'client') {
        navigation.navigate('ClientHomeScreen');
    } else {
        navigation.navigate('ProHomeScreen');
    }
};

3. Ekran Skeleton'larının Oluşturulması

PRD dökümanımızda yer alan tüm temel ekranların taslak (skeleton) kodları üretildi:

• Ortak Ekranlar: Splash, Login, Register, Profile
• Client Ekranları: ClientHome, CreateRequest, FindSitterMap, RequestDetail
• Professional Ekranları: ProHome, Offer Create, ProProfileEdit
• Chat Ekranları: ChatList, ChatRoom

4. Karşılaşılan İlk Zorluklar & AI Destekli Debugging

• Problem 1: Dizin Karmaşası (src/ Dizini İthalat Hataları) - Cursor, yeni ekranları ve bileşenleri oluştururken zaman zaman proje kök dizininde unutarak src/screens altına değil, dışarıya rastgele dosyalar çıkardı. Al Çözümü: Composer'a "Mevcut dizin yapısını incele, Usta burada/PetVibe klasör dizini altındaki src/screens yolunu sabitle ve tüm import yollarını otomatik düzelt" komutunu vererek dosya ağacını tek hamlede topladık.
• Problem 2: Simulator / Emulator Ve Reload Hataları - Xcode (iOS Simulator) üzerinde uygulamayı çalıştırırken paket uyumsuzlukları ve ekranın boş/beyaz kalması sorunu yaşandı. Al Çözümü: Terminal çıktısındaki hata logunu kopyalayıp YZ'ye sunduk. YZ eksik react-native-safe-area-context ve react-native-screens yapılandırmalarını tespit ederek App.tsx içerisindeki kaplama bileşenlerini (Provider wrapper) düzeltti.

---

💅 4. Bölüm: UX/UI İyileştirmeleri, Form Validasyonları ve Tasarım Sistematiği

Ham bir prototip ile kullanıcı karşısına çıkmak ya da bir uygulamayı "güvenilir" kılmak mümkün değildir. Özellikle PetVibe gibi platformlarda arayüz tasarımı (UI) ve kullanıcı deneyimi (UX) kritik bir güven unsurudur.

1. Marka Kimliği ve Tasarım Sistematiği (Design System)

Yapay zekaya verdiğimiz yönlendirme şu şekildeydi: "Uygulamanın genelinde kaba ve eski duran tasarımları temizle. Canlı Mor (Primary) ve Doğa Yeşili (Secondary) tonlarında, beyaz alanları bol, son derece modern, şık ve kullanıcıyı cezbeden bir tasarım dili kurgula. Linear gradient kullanımını abartmadan temiz kart yapıları ve yumuşak gölgeler kullan."

// theme.ts - YZ Tarafından Oluşturulan Tasarım Sistematiği
export const Colors = {
    primary: '#7C3AED', // Canlı Mor (Güven & Neşe)
    secondary: '#10B981', // Doğa Yeşili (Sağlık & Canlılık)
    accent: '#F59E0B', // Turuncu/Sarı (Uyarı & Vurgu)
    background: '#F9FAFB', // Yumuşak Beyaz/Gri Arka Plan
    surface: '#FFFFFF', // Kart Arka Planları
    textPrimary: '#1F2937', // Koyu Gri Ana Metin
    textSecondary: '#6B7280', // İkincil Metin
    border: '#E5E7EB', // İnce Ayraç Çizgileri
};

2. Özel Bileşenler: Durum Rozetleri ve Modern Kart Yapıları

• Talep Açıldı (Pending): Sarı/Turuncu rozet
• Devam Ediyor (In Progress): Mavi/Mor rozet
• Tamamlandı (Completed): Yeşil rozet
• İptal Edildi (Cancelled): Kırmızı rozet

3. Form Validasyonları ve İntuitif Input'lar

• Tarih ve Saat Seçici (DateTimePicker): İlan oluştururken tarih ve saatin takvim üzerinden pürüzsüz seçilmesi sağlandı.
• Kategori Seçim Bileşenleri: Evcil hayvan türü ve Hizmet Türü için dokunmatik seçim çipleri kurgulandı.
• Form Validasyonu (Yup & React Hook Form): Boş bırakılan adres veya bütçe alanlarında dinamik uyarı mesajları gösterildi; bütçe alanına negatif değer girilmesi engellendi.

// YZ Tarafından Validasyon Eklemesi Yapılmış Form Yapısı (Örnek)
if (!requestData.petType || !requestData.budget || !requestData.date) {
    Alert.alert("Eksik Bilgi", "Lütfen evcil hayvan türünü, tarihi ve bütçeyi eksiksiz doldurun.");
    return;
}

4. Ekranların Dönüşümü: Öncesi ve Sonrası (Refactoring)

Bu aşamada YZ Composer'a tüm src/screens klasörünü taratarak şu talimatı verdik: "Tüm ekranları incele. Önceden oluşturduğun varsayılan tasarımları yeni theme.ts renk paletine göre revize et. Kullanıcı dostu padding/margin değerleri sağla, butonları erişilebilir kıl ve visual hierarchy kur."

• Profil Sayfası Dönüşümü: Müşteri ve bakıcı için profil sayfaları özelleştirildi. Bakıcı profilinde tamamlanan iş sayısı, puan ortalaması ve biyografi öne çıkarılırken; müşteri profilinde aktif ilanlar ve geçmiş talepler şık sayaçlarla (counters) gösterildi.
• İlan Oluşturma Ekranı: Karmaşık form yapısı adım adım (step-by-step) hissi veren temiz bir akışa kavuşturuldu.

---

⚡ 5. Bölüm: Kompleks Arayüzler, Harita ve Dinamik Veri Akışı

Bir pazaryeri uygulamasını rakiplerinden ayıran ve kullanıcının gözünde "canlı bir platform" haline getiren asıl unsur, dinamik veri akışı ve konum bazlı akıllı etkileşimlerdir.

1. Google Maps ve Lokasyon Bazlı Harita Entegrasyonu

Evcil hayvan sahiplerinin en kritik ihtiyaçlarından biri, sevimli dostlarını teslim edecekleri bakıcının veya gezdiricinin kendilerine ne kadar yakın olduğunu görebilmektir. YZ'ye harita bileşenlerini entegre ederken mesafe hesaplama algoritmasını (Haversine formülü) kullanarak müşterinin konumuna göre bakıcıların uzaklık bilgisini dinamik olarak hesaplayan yardımcı fonksiyonu ürettirdik.

// YZ Tarafından Üretilen Konum Bazlı Harita Marker Mantığı (Örnek)
<MapView style={styles.map} initialRegion={userLocation}>
  {sitters.map((sitter) => (
    <Marker
      key={sitter.id}
      coordinate={sitter.coordinate}
      title={sitter.name}
      description={`${sitter.distance} km | ⭐ ${sitter.rating}`}
      onPress={() => handleSitterSelect(sitter)}
    />
  ))}
</MapView>

2. Dinamik Kategori ve Akıllı Filtreleme

1. Kategori Seçimi: Müşteri ana sayfada "Köpek Gezdirme" kategorisine tıkladığında, FindSitterScreen ekranına kategori parametresi gönderilir.
2. Arama ve Listeleme: Arama çubuğuna yazılan metin (örn: "Ahmet" veya "Elektrik" / "Köpek Eğitimi") ile uzmanlık alanları ve isimler eşzamanlı olarak filtrelenir.

3. Bakıcı Detay ve Değerlendirme Sistemi (Social Proof)

• Metrikler ve Başarı Rozetleri: Bakıcının toplam tamamladığı iş sayısı (örn: 48 Hizmet), ortalama yıldız puanı (örn: 4.9/5) ve deneyim yılı (örn: 3 Yıl Deneyim).
• Kullanıcı Yorumları (Reviews): Önceki pet sahiplerinin bıraktığı gerçek yorumlar, tarih ve verilen puanlar.
• Doğrudan İletişim / Teklif Butonları: Bakıcıya doğrudan mesaj gönderme veya mevcut ilana davet etme aksiyonları.

4. Çift Taraflı İlan ve Teklif Yönetimi Akışı

Uygulamamızın kalbi olan Teklif Mekanizması, müşteri ve bakıcı rolleri arasında pürüzsüz bir köprü kurar:

[Pet Sahibi] ➔ İlan Oluşturur (Köpek Gezdirme, 300 TL Bütçe, Kadıköy)
    ⬇️
[Havuz / Bakıcı Paneli] ➔ Bakıcı ilanı görür ve teklif verir (350 TL, "2 saat gezdirip foto atabilirim")
    ⬇️
[Pet Sahibi Detay] ➔ Müşteri gelen teklifleri (Fiyat + Bakıcı Puanı) kıyaslar
    ⬇️
[Onay / Red] ➔ Teklif Kabul Edilir ➔ Anlık Chat Açılır!

---

🏁 6. Bölüm: Backend Entegrasyonu, Real-Time Chat & Canlı Test

Uygulamayı tamamen işlevsel kılan şey, verilerin bulutta güvenle saklanması ve kullanıcıların anlık olarak birbirleriyle iletişim kurabilmesidir.

1. Kusursuz Açılış Deneyimi: Splash Screen

Mobil uygulamalarda ilk izlenim çok önemlidir. Uygulama açılırken verilerin yüklenme sürecinde kullanıcının boş veya takılan bir ekran görmesini engellemek adına markamıza özel animasyonlu bir Splash Screen hazırladık. PetVibe'ın Mor/Yeşil marka kimliğini yansıtır ve arka planda Firebase oturum kontrolü yapılırken kullanıcıyı eğlenceli bir animasyonla bekletir.

2. Firebase Entegrasyonu ve Gerçek Dünya İndeksleme Zorlukları

Uygulamamızın veritabanı ayağında Firestore NoSQL yapısını kullandık. YZ ile Index yönetimi yaparak:

1. Composite Index Kurulumu: Yapay zeka, chats ve requests koleksiyonları için gerekli olan bileşik indeks (Composite Index) alanlarını (clientId + updatedAt, proId + status) tespit etti.
2. Firestore Rules & Security: Kullanıcıların sadece kendi mesajlarını ve taleplerini okuyabilmesi için gerekli güvenlik kurallarını yapılandırdı.

3. Anlık Mesajlaşma Altyapısı (Real-Time Chat)

Bir pazaryerinin en kritik aşaması, hizmeti alan ile veren kişinin pürüzsüzce haberleşebilmesidir. Yapay zeka ile ChatRoomScreen üzerinde Firestore onSnapshot dinleyicilerini kurarak:

• Mesajların WebSocket mantığında, sayfayı yenilemeye gerek kalmadan anlık olarak ekrana düşmesini sağladık.
• Müşteri ve bakıcı taraflarında okunmayan mesaj uyarılarını senkronize ettik.
• İletişim geçmişini veritabanında tarih sıralı olarak koruduk.

4. Uçtan Uca (End-to-End) Canlı Test Senaryosu

[Müşteri Girişi]
  └─► İlan Açar: "2 Günlük Kedi Bakımı" | Bütçe: 400 TL | Kadıköy
        │
        ▼
[Bakıcı Paneli]
  └─► Açık İlanı Görür ➔ Teklif Verir: 450 TL + "Günde 2 kez fotoğraf atarım"
        │
        ▼
[Müşteri Paneli]
  └─► Anlık Bildirim Düşer ➔ Bakıcının profilini/puanını inceler ➔ TEKLİFİ KABUL EDER
        │
        ▼
[Real-Time Chat]
  └─► İki taraf arasında sohbet penceresi açılır ➔ Adres ve detaylar konuşulur
        │
        ▼
[İş Tamamlama]
  └─► Bakıcı işi bitirir ➔ Müşteri 5 Yıldız ve Yorum verir ➔ %20 Komisyon Hesaplanır

Bu canlı simülasyon sırasında hem Müşteri hem Bakıcı rolleri üzerinden sistem pürüzsüz şekilde çalıştı ve tüm veri akışı Firestore üzerinde başarıyla güncellendi.