Fullstack Mobil — Bölüm 1: Proje Mimarisi ve Kurulum

Merhaba arkadaşlar, bugün yeni bir seriye başlıyoruz — React Native + ASP.NET Core API ile baştan sona mobil uygulama geliştireceğiz. 5 bölüm sürecek bu seride bir blog/haber uygulaması yapacağız: backend tarafında .NET 9 API + EF Core, frontend'de RN + Expo, aralarında JWT ile güvenli iletişim ve sonunda hem API'yi buluta hem uygulamayı mağazalara çıkaracağız. Başlamadan bir kahve alın, uzun bir yol.

Neden İki Tarafı Birden?
Mobil uygulama geliştirirken yaygın olarak yapılan hata, önce frontend'i yazıp sonra backend'i düşünmek. Ama iki tarafın birlikte tasarlanması çok daha sağlıklı:

- API sözleşmesi baştan belirlenir, istemci ve sunucu takımı paralel çalışabilir
- Değişiklik maliyeti azalır — versiyonlama, DTO'lar, error formatları tek elden
- Yeniden kullanılabilirlik — aynı API'ye web, masaüstü, IoT istemciler de bağlanabilir

Bu serinin temel amacı: her iki tarafı da kendiniz yazabilecek donanıma sahip olmak.

Serinin Planı
5 bölümde nereye varıyoruz:

- Bölüm 1 (şimdi): Proje mimarisi, monorepo yaklaşımı, iki projeyi de kurma, dev stack
- Bölüm 2: Backend — ASP.NET Core API + EF Core ile CRUD
- Bölüm 3: JWT Authentication — API token üretir, RN token'ı saklayıp kullanır
- Bölüm 4: RN Frontend — ekranlar, navigation, API entegrasyonu (Axios, React Query)
- Bölüm 5: Production Deploy — API'yi buluta, uygulamayı TestFlight/Play Store'a

Teknoloji Stack'i
Bu serideki seçimlerimiz:

Backend:
- .NET 9 + ASP.NET Core Web API
- EF Core 9 + SQL Server (yerelde LocalDB, production'da Azure SQL)
- JWT ile authentication
- Swagger / OpenAPI ile dokümantasyon
- Serilog ile loglama

Frontend:
- React Native + Expo (bare workflow değil, başlangıç için daha hızlı)
- TypeScript (JavaScript değil — büyük projelerde TS hayat kurtarır)
- React Navigation (Stack + Tab)
- Axios + TanStack Query (React Query) — API istekleri için
- Zustand — hafif state yönetimi (Redux'a alternatif)
- AsyncStorage — token persistence

Monorepo mu, Ayrı Repo mu?
Benim tavsiyem yeni başlayanlar için monorepo. Tek git deposu içinde iki klasör:

BlogApp/
├── api/              # ASP.NET Core API
│   ├── BlogApp.Api.sln
│   ├── src/
│   └── ...
├── mobile/           # React Native (Expo)
│   ├── package.json
│   ├── App.tsx
│   └── ...
├── .gitignore        # hem .NET hem Node için
└── README.md

Avantajları:

- API ve mobil versiyonlar birlikte yaşar — atomic commit mümkün
- CI/CD daha basit
- Takımda tek onboarding

Dezavantajı: İki dünya farklı araçlar gerektiriyor (dotnet CLI + node/npm). Ama modern IDE'lerde ikisini birden açabilirsiniz (VS Code öneririm).

Ön Gereksinimler
Makinenizde şunlar olmalı:

- .NET 9 SDK (dotnet --version)
- Node.js 18+ (node --version)
- Git
- VS Code veya Visual Studio 2022
- Expo Go telefonunuzda (test için)

iOS simulator için Mac + Xcode, Android emulator için Android Studio gerekir ama başlangıçta Expo Go ile telefondan test yetiyor.

Projeyi Kuralım
Monorepo klasörünü oluşturup her iki projeyi iç klasörlerde başlatalım:

# Monorepo kök klasörü
mkdir BlogApp && cd BlogApp
git init

# Backend API
dotnet new webapi -n BlogApp.Api -o api

# Mobile (Expo)
npx create-expo-app@latest mobile --template blank-typescript

# Genel .gitignore (ikisi için de)
echo "bin/
obj/
node_modules/
.expo/
*.user
.vs/
.env" > .gitignore

IDE tarafinda: Visual Studio tarafinda Dosya > Yeni > Proje ile bu sihirbaz aciliyor. Backend icin ASP.NET Core sablonunu secip .NET 9.0 hedefliyoruz; mobil kismi ayri bir klasorde Expo/CLI ile kuruyoruz.

Şimdi klasör yapınız şöyle görünmeli:

BlogApp/
├── api/
│   ├── BlogApp.Api.csproj
│   ├── Program.cs
│   └── Controllers/WeatherForecastController.cs
├── mobile/
│   ├── package.json
│   ├── App.tsx
│   └── tsconfig.json
└── .gitignore

Ortak Tip Tanımları (Bonus)
API ile mobil arasında aynı veri modelini kullanacaksak, TypeScript tip tanımlarını manuel yazmak can sıkıcı. Bir çözüm: OpenAPI'den otomatik tip üretme:

# mobile klasöründe
npm install -D openapi-typescript
npx openapi-typescript http://localhost:5000/openapi/v1.json -o src/api-types.ts

Bu komut API'nizden TypeScript tip dosyası üretir. Her API değişikliğinden sonra bir kere çalıştırırsınız, mobil tarafta tam tip güvenliği elde edersiniz. Production projemde bunu CI'da otomatik yapıyorum — hayat kurtarıcı.

Geliştirme Ortamı — Hot Reload Her İki Tarafta
Bu seride size tavsiyem: iki terminal pencere açın. Birinde:

cd api
dotnet watch run

Diğerinde:

cd mobile
npx expo start

Artık API'de C# dosyasına her kaydettiğinizde dotnet watch otomatik yeniden derler. Expo tarafında JS/TSX kaydedince Expo Go telefonda 1 saniyede yenilenir. İki taraflı hot reload inanılmaz motive edici.

Network İpuçları — Mobil API Erişimi
Bir noktada mobildeki uygulamanın bilgisayardaki API'ye erişmesi gerekiyor. Dikkat edilecek şeyler:

- Telefon ve bilgisayar aynı Wi-Fi ağında olmalı
- localhost kullanmayın — mobilde kendi cihazına işaret eder. Bilgisayarınızın yerel IP'sini kullanın (ipconfig / ifconfig)
- API'yi 0.0.0.0 üzerinde dinlet: dotnet run --urls http://0.0.0.0:5000
- Windows Firewall'u 5000 için açmak gerekebilir

// mobile/src/api.ts
export const API_BASE_URL = __DEV__
  ? 'http://192.168.1.42:5000'  // kendi IP'n
  : 'https://api.blogapp.com';

README — Takım Çalışması İçin
Projenizin kök klasöründe bir README.md oluşturun ve şunları yazın:

# BlogApp

React Native mobile app + ASP.NET Core 9 API

## Prerequisites
- .NET 9 SDK
- Node.js 18+
- Expo Go (for testing)

## Setup

    # API
    cd api && dotnet restore && dotnet run

    # Mobile (yeni terminalde)
    cd mobile && npm install && npx expo start

## Architecture
See docs/architecture.md

Basit ama yeni katılan her ekip arkadaşının hayatını kolaylaştırır.

Özet
Bu ilk bölümde projemizin iskeletini oluşturduk: monorepo yapısı, teknoloji seçimleri, iki uçlu dev ortamı, network detayları. Elinizde artık çalışan bir api/ ve mobile/ klasörü var — ikisi de hello world döndürür ama temel hazır.

Bir sonraki bölümde backend'e yoğunlaşacağız: EF Core ile veritabanı modelleri, CRUD endpoint'leri, DTO pattern ve migrations. Yorumlarınızı bekliyorum, yolculuğumuz başladı...