İçindekiler
Geliştirme Ortamı Kurulumu
macOS Kurulumu
# Xcode yükle (App Store'dan)
xcode-select --install
# Homebrew kur
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Node.js kur (LTS)
brew install node
# Watchman kur (React Native için)
brew install watchman
# CocoaPods kur (iOS için)
sudo gem install cocoapods
# Android Studio indir
brew install --cask android-studio
# Java JDK (Android build için)
brew install openjdk@17
Avantaj: iOS + Android her ikisi de geliştirilebilir
Windows Kurulumu
# Node.js indir (LTS)
winget install OpenJS.NodeJS.LTS
# Android Studio indir
winget install Google.AndroidStudio
# JDK 17 kur
winget install Microsoft.OpenJDK.17
# Environment variables ayarla
# ANDROID_HOME = C:\Users\[USER]\AppData\Local\Android\Sdk
# Path'e ekle:
# %ANDROID_HOME%\platform-tools
# %ANDROID_HOME%\emulator
# Expo CLI
npm install -g expo-cli
Not: Windows'ta sadece Android geliştirilebilir (iOS için Mac gerekir)
React Native & Expo
React Native, JavaScript ve React ile native mobil uygulamalar geliştirmenizi sağlar. Expo ise React Native geliştirmeyi dramatik şekilde kolaylaştıran bir platformdur.
Instagram, Facebook, Discord, Shopify gibi büyük şirketler React Native kullanır. Expo SDK 54+ ile kamera, bildirimler, haritalar gibi native özellikler tek komutla eklenebilir.
React
JavaScript/TS
Cross-Platform
Expo ile Hızlı Başlangıç
# Yeni Expo projesi oluştur
npx create-expo-app@latest MyApp
cd MyApp
# Geliştirme sunucusunu başlat
npx expo start
# Telefonunuzda test etmek için:
# 1. "Expo Go" uygulamasını indirin (iOS/Android)
# 2. QR kodu tarayın
# 3. Uygulamanız anında açılır!
# Template ile oluşturma
npx create-expo-app@latest MyApp --template tabs
npx create-expo-app@latest MyApp --template blank-typescript
Expo Router (File-Based Routing)
# Dosya yapısı = Route yapısı
app/
├── _layout.tsx # Root layout
├── index.tsx # / (Ana sayfa)
├── about.tsx # /about
├── (tabs)/ # Tab navigation grubu
│ ├── _layout.tsx # Tab layout
│ ├── index.tsx # Tab 1
│ ├── explore.tsx # Tab 2
│ └── profile.tsx # Tab 3
├── (auth)/ # Auth grubu
│ ├── login.tsx # /login
│ └── register.tsx # /register
├── product/
│ └── [id].tsx # /product/123 (dynamic)
└── +not-found.tsx # 404 sayfası
NativeWind (Tailwind for RN)
# NativeWind kurulumu
npx expo install nativewind tailwindcss
# Kullanım örneği
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View className="flex-1 bg-gray-900 items-center justify-center">
<Text className="text-3xl font-bold text-white">
Hello World!
</Text>
<Text className="text-gray-400 mt-2">
NativeWind ile Tailwind kullanımı
</Text>
</View>
);
}
Flutter ile Mobil Geliştirme
Flutter, Google tarafından geliştirilen, Dart dili ile tek kod tabanından iOS, Android, Web ve Desktop uygulamalar oluşturabileceğiniz bir UI framework'tür.
BMW, Google Pay, Alibaba gibi şirketler Flutter kullanır. Kendi rendering engine'i (Skia/Impeller) sayesinde 60/120 FPS smooth animasyonlar sunar.
Dart
Google
4 Platform
# Flutter kurulumu
# macOS
brew install --cask flutter
# Flutter kurulumunu kontrol et
flutter doctor
# Yeni proje oluştur
flutter create my_app
cd my_app
# Çalıştır
flutter run # Bağlı cihazda
flutter run -d chrome # Web'de
flutter run -d macos # Desktop'ta
# Hot reload: r (terminal) veya Ctrl+S (IDE)
React Native vs Flutter Karşılaştırma
| Kriter | React Native | Flutter |
|---|---|---|
| Dil | JavaScript / TypeScript | Dart |
| Öğrenme Eğrisi | Kolay (React biliyorsanız) | Orta (Dart öğrenmek gerek) |
| Performans | İyi (New Architecture ile) | Çok İyi (Kendi engine'i) |
| UI Component | Native platform componentleri | Kendi widget sistemi |
| Ekosistem | Dev npm ekosistemi | Büyüyen pub.dev |
| Hot Reload | Evet (Fast Refresh) | Evet (Stateful HR) |
| AI Araç Desteği | Mükemmel (JS/TS yaygınlığı) | İyi (Dart desteği artıyor) |
| Vibe Coding İçin | Mükemmel seçim | İyi seçim |
Hangisini Seçmeliyim?
- React Native: Web geliştirme bilginiz varsa, JavaScript/TypeScript deneyiminiz varsa, AI araçlarından maksimum faydalanmak istiyorsanız
- Flutter: Sıfırdan başlıyorsanız, yüksek performanslı animasyonlar istiyorsanız, web + desktop + mobile hepsini tek kodla yapmak istiyorsanız
AI ile Mobil Geliştirme Workflow
1
Planlama & Wireframe
ChatGPT veya Claude ile uygulama mimarisini planlayın. Ekranları, navigasyonu ve veri akışını belirleyin.
2
UI Component Geliştirme
v0.dev ile UI tasarımı, Claude Code ile component kodlaması. NativeWind/Tailwind ile styling.
3
Backend & API Entegrasyon
Supabase/Firebase backend, ChatGPT ile API endpoint tasarımı, Claude Code ile entegrasyon.
4
Test & Debug
Claude Code ile test yazımı, bug fix. Expo Go ile gerçek cihaz testi.
5
Build & Deploy
EAS Build ile App Store/Play Store build. OTA updates ile anında güncelleme.
Proje Örnekleri ve AI Promptlar
E-Ticaret Uygulaması
React Native Expo ile bir e-ticaret
uygulaması oluştur:
- Tab navigation (Home, Search, Cart, Profile)
- Ürün listeleme (FlatList, image, fiyat)
- Ürün detay sayfası
- Sepet yönetimi (Zustand state)
- NativeWind ile dark theme styling
- Supabase backend entegrasyonu
- TypeScript strict mode
Fitness Tracker
Flutter ile bir fitness tracker yaz:
- Material 3 tasarım
- Workout timer (countdown + stopwatch)
- Egzersiz listesi ve planları
- Progress charts (fl_chart paketi)
- SharedPreferences ile local storage
- Günlük/haftalık istatistikler
- Motivasyon bildirimleri
Chat Uygulaması
Expo ile gerçek zamanlı chat app:
- Supabase Realtime ile mesajlaşma
- Expo Router ile navigation
- Kullanıcı authentication
- Online/offline durum göstergesi
- Mesaj okundu bildirimi
- Fotoğraf gönderme (expo-image-picker)
- Push notifications (expo-notifications)
Not Defteri
Expo ile Notion benzeri not uygulaması:
- Markdown editor
- Klasör yapısı ile organizasyon
- Arama fonksiyonu
- SQLite ile offline storage
- Cloud sync (Supabase)
- Dark/Light theme toggle
- Rich text formatting
App Store / Play Store Yayınlama
EAS Build (Expo Application Services)
# EAS CLI kurulumu
npm install -g eas-cli
# Expo hesabı ile login
eas login
# Build konfigürasyonu oluştur
eas build:configure
# Android APK/AAB build
eas build --platform android
# iOS build (Apple Developer hesabı gerekir)
eas build --platform ios
# Her iki platform aynı anda
eas build --platform all
# App Store'a gönder
eas submit --platform ios
# Play Store'a gönder
eas submit --platform android
# OTA Update (anında güncelleme)
eas update --branch production --message "Bug fix v1.0.1"
App Store (iOS)
- Apple Developer hesabı: $99/yıl
- Review süresi: 1-3 gün
- Screenshots: 6.7" ve 5.5" zorunlu
- Privacy policy URL gerekli
Play Store (Android)
- Google Play hesabı: $25 (tek seferlik)
- Review süresi: birkaç saat - 7 gün
- AAB formatı zorunlu (2024+)
- Content rating anketi gerekli