Ana içeriğe geç

Yerel Geliştirme Kurulumu

Bu uygulama Expo SDK 54, Expo Router ve özel geliştirme istemcisi (expo-dev-client) kullanır. Expo Go ile çalışmaz.

Gereksinimler

  • Node.js ^18.17.0 veya >=20.5.0
  • npm 10.9.7 (package.json içinde sabitlenmiş; pnpm değil npm kullanın)
  • iOS geliştirme için Xcode ve CocoaPods
  • Android geliştirme için Android Studio (Android native projesi ilk build sırasında üretilir)

İlk kurulum kontrol listesi

Adımları sırayla uygulayın:

  1. Depoyu klonlayın
  2. npm install
  3. cp .env.example .env çalıştırın ve gerçek backend ile Firebase değerlerini girin
  4. ios/ dizininin mevcut olduğundan emin olun (ios/ dizini nasıl elde edilir)
  5. cd ios && pod install && cd ..
  6. Terminal 1: npx expo start -c
  7. Terminal 2: npm run ios (veya npm run android)

  8. adımı atlamayın. Native uygulama açılmadan önce Metro çalışıyor olmalıdır.

ios/ dizini nasıl elde edilir

ios/ klasörü native Xcode projesidir. Bu uygulamada iOS geliştirme için gereklidir. npm install ile oluşmaz ve git'e eklenmez.

Bu depo Expo prebuild kullanır. Her geliştirici ios/ dizinini app.config.ts dosyasından yerelde üretir.

Klonladıktan sonra ios/ üretin

Depo kökünde, .env yapılandırıldıktan sonra:

npx expo prebuild --platform ios

Bu komut app.config.ts dosyasını okur ve şunları oluşturur:

  • ios/Podfile
  • ios/Gezen.xcodeproj
  • ios/Gezen/ native kaynak dosyaları

Ardından pod kurun:

cd ios
pod install
cd ..

ios/ dizinini git'e commit etmeyin. Makine tarafından üretilir ve .gitignore içindedir; istediğiniz zaman yeniden oluşturulabilir.

android/ eksikse üretin

Bu depo her zaman android/ klasörü içermeyebilir. Android için aynı yöntemi kullanın:

npx expo prebuild --platform android
npm run android

ios/ ne zaman yeniden üretilir

Native projeyi yalnızca şu durumlarda yeniden üretin:

  • Native Expo modülü eklediniz veya kaldırdınız
  • Expo, app.config.ts içine plugin eklemenizi söyledi
  • ios/ bozuldu veya bağımlılıklarla uyumsuz hale geldi

Komut:

npx expo prebuild --clean --platform ios
cd ios && pod install && cd ..
npm run ios

--clean, ios/ dizinini silip yeniden oluşturur. Korumanız gereken manuel native değişiklikler varsa bunu gelişigüzel çalıştırmayın.

Yapmamanız gerekenler

  • npm install ile ios/ oluşacağını beklemeyin
  • Bu proje için Expo Go kullanmayın
  • Özel native ihtiyaç yoksa ios/ içindeki kodu el ile düzenlemeyin

Bağımlılıkları kurun

npm install

Ortam değişkenlerini yapılandırın

cp .env.example .env

Backend API URL'leri

Frontend backend IP veya portu sabit kodlamaz. Tam URL'leri .env dosyasından okur.

Değişken Amaç Gerekli format
EXPO_PUBLIC_API_URL Ana backend /api ile biten tam URL, örneğin http://192.168.10.135:8000/api
EXPO_PUBLIC_TASK_PHOTO_API_URL Görev fotoğrafı backend'i /api/v1 ile biten tam URL, örneğin http://192.168.10.135:8000/api/v1

Yerel ağ backend'i için örnek .env:

EXPO_PUBLIC_API_URL=http://192.168.10.135:8000/api
EXPO_PUBLIC_TASK_PHOTO_API_URL=http://192.168.10.135:8000/api/v1

Üretim tarzı HTTPS için örnek .env:

EXPO_PUBLIC_API_URL=https://sales.iqvizyon.com/api
EXPO_PUBLIC_TASK_PHOTO_API_URL=https://api.example.com/api/v1

Uygulama POST /auth/token isteğini şuraya gönderir:

<EXPO_PUBLIC_API_URL>/auth/token

Firebase ve diğer zorunlu değişkenler

Değişken Amaç
EXPO_PUBLIC_FIREBASE_PROJECT_ID Firebase proje ID'si
EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET Firebase depolama bucket'ı
EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Firebase messaging sender ID
EXPO_PUBLIC_FIREBASE_IOS_API_KEY Firebase iOS API anahtarı
EXPO_PUBLIC_FIREBASE_IOS_APP_ID Firebase iOS uygulama ID'si
EXPO_PUBLIC_FIREBASE_ANDROID_API_KEY Firebase Android API anahtarı
EXPO_PUBLIC_FIREBASE_ANDROID_APP_ID Firebase Android uygulama ID'si

Gerekli değerlerden biri eksikse uygulama açılmaz. Değerler app.config.ts üzerinden Expo runtime config'e yüklenir ve app/config/runtimeConfig.ts tarafından okunur.

Yoksayılması gereken eski dosya

app/constants.ts içinde eski yorum satırı API URL'leri vardır. Uygulama ağ çağrıları için bu dosyayı kullanmaz. Yalnızca .env geçerlidir.

.env değiştirdikten sonra

Expo, .env dosyasını Metro başlarken okur. Metro çalışırken .env kaydetmek yeterli değildir.

  1. Metro'yu durdurun (Ctrl+C)
  2. Önbelleği temizleyerek yeniden başlatın:
npx expo start -c
  1. Uygulamayı simülatörden yeniden açın veya npm run ios çalıştırın

Normal .env değişiklikleri için native rebuild gerekmez. Metro yeniden başlatması gerekir.

Yeni URL'nin yüklendiğini doğrulamak için başarısız bir login log'una bakın. İstek gerçek host'unuzu göstermeli, your-api-host.example.com değil.

iOS CocoaPods kurulumu

ios/ mevcut olduktan ve native bağımlılık değiştikten sonra:

cd ios
pod install
cd ..

Metro'yu başlatın

npx expo start -c

Bu terminali açık bırakın. "Metro on 8081 is not running" görürseniz Metro çalışmıyor demektir.

8081 portu doluysa:

npx expo start --port 8082 -c

Native uygulamayı derleyin ve çalıştırın

Metro tek başına yeterli değildir. Native dev client derlenip kurulmalıdır.

İkinci terminalde:

npm run ios

Android için:

npm run android

İki terminal akışı

Terminal Komut Amaç
1 npx expo start -c Metro'yu çalışır tutar
2 npm run ios veya npm run android Native dev client'ı derler ve başlatır

Native modüller ve development build

Native iOS veya Android kodu içeren kütüphaneler mevcut uygulama binary'sine hot-reload ile eklenmez.

Native bağımlılık eklediğinizde:

  1. npx expo install <paket-adı>
  2. Gerekirse app.config.ts içine plugin ekleyin
  3. cd ios && pod install && cd ..
  4. npm run ios

Sorun giderme

Cannot find native module 'ExpoSecureStore'

  1. npx expo install expo-secure-store
  2. app.config.ts içinde 'expo-secure-store' plugin'i olsun
  3. cd ios && pod install && cd ..
  4. Metro açıkken npm run ios
  5. Gerekirse simülatörden Gezen uygulamasını silin
  6. Son çare:
npx expo prebuild --clean --platform ios
cd ios && pod install && cd ..
npm run ios

.env düzenledikten sonra uygulama hâlâ your-api-host.example.com çağırıyor

Metro, .env kaydedilmeden önce başlatılmış veya eski config önbellekte kalmış demektir.

  1. Metro'yu durdurun
  2. .env içinde gerçek URL'niz olduğunu doğrulayın
  3. npx expo start -c çalıştırın
  4. Uygulamayı yeniden başlatın

Doğru backend URL'si ile network error

  1. Backend'in .env içindeki host ve portta çalıştığını doğrulayın
  2. Mac'iniz ile backend makinesinin aynı ağda olduğunu doğrulayın
  3. Mac'inizden test edin:
curl -i http://192.168.10.135:8000/api/auth/token

Host ve portu kendi değerlerinizle değiştirin.

ios/ veya Podfile eksik

npx expo prebuild --platform ios
cd ios && pod install && cd ..

Faydalı scriptler

npm start
npm run ios
npm run android
npm run web
npm test
npm run lint

İlgili dokümantasyon