Expo Framework Temelleri: Evrensel React Native Uygulamaları Geliştirmek İçin Modern Rehberim

Expo Framework Temelleri: Evrensel React Native Uygulamaları Geliştirmek İçin Modern Rehberim

Mobil uygulama geliştirme dünyasında, React Native, tek bir kod tabanıyla hem iOS hem de Android platformları için uygulama oluşturma yeteneğiyle öne çıkıyor. Ancak bu sürecin kurulum ve yönetim karmaşıklığını basitleştiren güçlü bir yardımcı var: Expo Framework. Bu rehber, Expo’nun temel prensiplerini, sunduğu avantajları ve modern React Native uygulamaları geliştirirken nasıl etkili bir şekilde kullanılabileceğini adım adım açıklayarak, geliştiricilere evrensel uygulamalar inşa etme yolculuklarında sağlam bir başlangıç noktası sunmayı amaçlamaktadır.

Expo Nedir ve Neden Kullanmalıyız?

Expo, React Native uygulamaları geliştirmeyi ve dağıtmayı kolaylaştıran açık kaynaklı bir araç seti ve çerçevedir. Geliştiricilerin native modüllerle uğraşmadan, JavaScript ile hızla prototip oluşturmasına, test etmesine ve uygulamalarını yayınlamasına olanak tanır. Expo, geliştirme sürecini hızlandırırken, aynı zamanda evrensel uygulamalar oluşturma potansiyelini de beraberinde getirir.

React Native Geliştirmede Expo’nun Rolü

React Native, JavaScript kullanarak native mobil uygulamalar oluşturmayı mümkün kılar. Ancak, bu uygulamaların cihazın donanımına (kamera, konum, bildirimler vb.) erişmesi gerektiğinde, genellikle native kod (Objective-C/Swift veya Java/Kotlin) yazmak veya mevcut native modülleri entegre etmek gerekir. Bu süreç, özellikle web geliştirme geçmişi olanlar için karmaşık olabilir. Expo, bu native katmanı soyutlayarak, geliştiricilerin sadece JavaScript ile çalışmasına ve birçok cihaz özelliğine hazır API’ler aracılığıyla erişmesine olanak tanır. Bu sayede, geliştiriciler native kod yazma veya derleme ortamları kurma gibi zorluklarla karşılaşmadan hızlıca üretime geçebilirler.

Managed Workflow ve Bare Workflow Farkı

Expo, iki ana iş akışı sunar:

• Managed Workflow: Expo’nun sunduğu tüm kolaylıkları ve araçları kullanırsınız. Uygulamanızın native kod tabanı Expo tarafından yönetilir. Bu, hızlı başlangıç, kolay test ve OTA (Over-the-Air) güncellemeleri gibi avantajlar sunar. Ancak, sadece Expo SDK’sında bulunan native modülleri kullanabilirsiniz. Özel native kod veya çok spesifik native kütüphaneler ekleyemezsiniz.
• Bare Workflow: Bu iş akışı, geleneksel bir React Native projesine daha yakındır. Expo araçlarını kullanmaya devam edersiniz ancak native kod tabanına tam erişiminiz olur. Bu, projenize istediğiniz native modülü ekleyebileceğiniz anlamına gelir. Managed workflow’dan bare workflow’a geçiş yapmak mümkündür (expo eject veya EAS Build ile development client oluşturma gibi yöntemlerle), bu da projeniz büyüdükçe veya özel ihtiyaçlar ortaya çıktıkça esneklik sağlar.

Expo’nun Avantajları: Hızlı Geliştirme ve Evrensel Destek

Expo’nun başlıca avantajları şunlardır:

• Hızlı Kurulum: Geleneksel React Native kurulumuna göre çok daha hızlı ve kolaydır. Native geliştirme ortamları kurmaya gerek kalmaz.
• Basit Geliştirme: JavaScript ile tüm native özelliklere erişim sağlar.
• Evrensel Uygulamalar: Tek bir kod tabanıyla iOS, Android ve hatta web için uygulama geliştirme imkanı sunar.
• Hızlı Test: Expo Go mobil uygulaması sayesinde, uygulamalarınızı fiziksel cihazlarda anında test edebilirsiniz.
• OTA Güncellemeleri: Uygulamanızı App Store veya Google Play Store’a yeniden göndermeden JavaScript kodunuzu güncelleyebilirsiniz.
• Geniş API Desteği: Kamera, konum, bildirimler, dosya sistemi gibi birçok native özelliğe erişim sağlayan zengin bir SDK sunar.

Expo Projesi Başlatma ve Temel Yapı

Yeni bir Expo projesi başlatmak oldukça basittir ve geliştirme ortamınızı hızla hazır hale getirmenizi sağlar.

Gerekli Ortam Kurulumu

Expo ile çalışmaya başlamadan önce, bilgisayarınızda Node.js ve npm (veya yarn) yüklü olmalıdır. Bunlar, React Native ve Expo projelerini çalıştırmak için temel gereksinimlerdir.

# Node.js ve npm yüklü değilse, öncelikle bunları kurun.
# npm'in güncel olduğundan emin olun:
npm install -g npm@latest

Ardından, Expo CLI'yı global olarak yüklemeniz önerilir:

npm install -g expo-cli
# veya yarn kullanıyorsanız:
yarn global add expo-cli

Bu komut, Expo projeleri oluşturmak, çalıştırmak ve yönetmek için kullanacağınız komut satırı aracını kurar.

Yeni Bir Expo Projesi Oluşturma

Expo CLI yüklendikten sonra, yeni bir proje oluşturmak için aşağıdaki komutu kullanabilirsiniz:

npx create-expo-app my-universal-app

my-universal-app yerine projenizin adını yazabilirsiniz. Bu komut, size bir şablon seçeneği sunacaktır:

• blank: Temel bir boş proje.
• tabs: React Navigation ile sekme tabanlı bir navigasyon yapısına sahip örnek bir proje.

Genellikle blank şablonuyla başlamak, projenizi sıfırdan inşa etmek için iyi bir seçenektir. Komut tamamlandığında, projenizin dizinine geçebilir ve uygulamayı başlatabilirsiniz:

cd my-universal-app
npm start
# veya yarn start

Bu komut, geliştirme sunucusunu başlatır ve size bir QR kodu gösterir.

Proje Dizini ve Temel Dosyalar

Yeni oluşturulan Expo projenizin dizin yapısı şuna benzer olacaktır:

my-universal-app/
├── assets/                  # Uygulama kaynakları (resimler, fontlar vb.)
├── node_modules/            # Proje bağımlılıkları
├── .gitignore               # Git tarafından göz ardı edilecek dosyalar
├── app.json                 # Expo projesinin yapılandırma dosyası
├── App.js                   # Uygulamanızın ana bileşeni
├── babel.config.js          # Babel yapılandırması
├── package.json             # Proje meta verileri ve bağımlılıkları
├── README.md                # Proje açıklaması

• App.js (veya App.tsx): Uygulamanızın başlangıç noktası ve ana bileşenidir. Tüm UI ve uygulama mantığı buradan başlar.
• app.json: Expo projenizin manifest dosyasıdır. Uygulamanızın adı, simgesi, splash ekranı, platforma özgü ayarlar ve daha fazlası burada tanımlanır. Bu dosya, uygulamanızın nasıl görüneceğini ve davranacağını belirleyen kritik bir yapılandırma dosyasıdır.
• package.json: Projenizin bağımlılıklarını ve betiklerini içerir.

Expo CLI ve Geliştirici Araçları

Expo CLI, geliştirme sürecinizi yönetmek için bir dizi kullanışlı komut ve araç sunar.

Expo CLI Komutlarına Genel Bakış

Expo CLI, projenizi başlatmaktan, derlemeye kadar birçok işlemi yönetmenizi sağlar. İşte bazı temel komutlar:

Expo Go Uygulaması ile Test Etme

Expo Go, Expo tarafından geliştirilen ücretsiz bir mobil uygulamadır. Bu uygulama, geliştirme aşamasındaki Expo projelerinizi fiziksel bir iOS veya Android cihazda anında test etmenizi sağlar. expo start komutunu çalıştırdığınızda, terminalde veya tarayıcıda görüntülenen QR kodunu Expo Go uygulamasıyla tarayarak uygulamanızı cihazınızda çalıştırabilirsiniz. Bu, emülatör veya simülatör kullanma ihtiyacını ortadan kaldırarak geliştirme döngüsünü inanılmaz derecede hızlandırır.

Hata Ayıklama ve Geliştirici Menüsü

Uygulamanız Expo Go'da çalışırken, cihazınızı sallayarak veya sanal bir cihazda Cmd/Ctrl + M tuşlarına basarak geliştirici menüsünü açabilirsiniz. Bu menüde şunlar bulunur:

• Reload: Uygulamayı yeniden yükler.
• Debug Remote JS: Chrome Geliştirici Araçları'nı kullanarak JavaScript kodunuzda hata ayıklamanızı sağlar.
• Enable Hot Reloading: Kodunuzu kaydettiğinizde uygulamanın otomatik olarak güncellenmesini sağlar.
• Enable Fast Refresh: Bileşen düzeyinde hızlı yenileme sağlar, bu da durumun korunmasına yardımcı olur.
• Show Element Inspector: UI öğelerini incelemenizi sağlar.

Bu araçlar, hataları tespit etmek ve uygulamanızı optimize etmek için paha biçilmezdir.

Expo Bileşenleri ve API'leri ile Çalışma

Expo SDK, React Native'in temel bileşenlerinin yanı sıra, cihazın native özelliklerine erişim sağlayan zengin bir API koleksiyonu sunar.

Expo SDK ve Dahili Modüller

Expo SDK, kamera, konum, bildirimler, dosya sistemi, sensörler ve daha fazlası gibi birçok native cihaza erişim sağlayan önceden oluşturulmuş modüller içerir. Bu modüller, expo install komutuyla kolayca projenize eklenebilir ve ardından JavaScript kodunuzda kullanılabilir. Örneğin, expo-camera, expo-location, expo-notifications gibi paketler, karmaşık native entegrasyonlar yerine basit JavaScript API'leri sunar.

Örnek: Konum Servisleri Kullanımı

Bir kullanıcının konumunu almak için expo-location modülünü kullanabiliriz. İlk olarak, paketi yükleyin:

expo install expo-location

Ardından, App.js dosyanızda aşağıdaki gibi kullanabilirsiniz:

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Konum erişimi reddedildi');
        return;
      }

      let currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation);
    })();
  }, []);

  let text = 'Konum bekleniyor...';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = Enlem: ${location.coords.latitude}, Boylam: ${location.coords.longitude};
  }

  return (
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  paragraph: {
    fontSize: 18,
    textAlign: 'center',
  },
});

Bu örnek, kullanıcının ön plan konum iznini ister ve ardından mevcut konumunu alır ve ekranda gösterir.

Örnek: Görüntü Seçici ve Depolama

Kullanıcının cihaz galerisinden bir görüntü seçmesini sağlamak için expo-image-picker modülünü kullanabiliriz.

expo install expo-image-picker

Kullanım örneği:

import React, { useState } from 'react';
import { Button, Image, View, Platform, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
    marginTop: 20,
  },
});

Bu kod, bir düğmeye basıldığında cihazın görüntü galerisini açar, kullanıcının bir görüntü seçmesine izin verir ve seçilen görüntüyü ekranda gösterir.

Uygulama Yayınlama ve Dağıtım

Uygulamanızı geliştirdikten sonra, onu kullanıcılara ulaştırmanın zamanı gelir. Expo, bu süreci de kolaylaştırır.

Geliştirme Ortamından Yayınlamaya

Managed Workflow'da, uygulamanızı yayınlamak için expo publish komutunu kullanabilirsiniz. Bu komut, uygulamanızın JavaScript kodunu ve kaynaklarını Expo'nun CDN'ine yükler. Bu, özellikle hata düzeltmeleri veya küçük özellik güncellemeleri için hızlı OTA (Over-the-Air) güncellemeleri yapmanızı sağlar. Kullanıcılar, uygulamalarını App Store veya Google Play Store'dan yeniden indirmek zorunda kalmadan en son sürümü otomatik olarak alabilirler.

Android ve iOS için Derleme (Build) Süreci

Uygulamanızı App Store veya Google Play Store'da yayınlamak için native bir derlemeye (APK/AAB veya IPA) ihtiyacınız vardır. Expo, bu süreci de basitleştirir.

# Android için:
eas build -p android --profile production

# iOS için:
eas build -p ios --profile production

Bu komutlar, Expo Application Services (EAS) Build hizmetini kullanarak uygulamanızın native derlemesini oluşturur. EAS Build, bulut tabanlı bir hizmettir ve kendi yerel derleme ortamınızı kurma ihtiyacını ortadan kaldırır. Bu hizmet, sertifika ve sağlama profili yönetimi gibi karmaşık adımları da basitleştirir. Build işlemi tamamlandığında, size indirilebilir bir APK/AAB veya IPA dosyası sağlanır.

OTA Güncellemeleri ve Bakım

Expo'nun en güçlü özelliklerinden biri OTA güncellemeleridir. Uygulamanızın native kodu değişmediği sürece (örneğin, yeni bir Expo SDK sürümüne geçiş veya native modül ekleme), JavaScript kodunuzda yaptığınız değişiklikleri expo publish veya eas update komutlarıyla anında dağıtabilirsiniz. Bu, kullanıcıların her küçük güncelleme için mağazadan yeni bir sürüm indirmesini beklemeden hızlıca hata düzeltmeleri ve yeni özellikler sunmanızı sağlar. Bu, uygulama bakımını ve kullanıcı deneyimini önemli ölçüde iyileştirir.

Expo'nun İleri Düzey Özellikleri ve Sınırlamaları

Expo, geliştiricilere güçlü araçlar sunarken, bazı ileri düzey özellikler ve potansiyel sınırlamaları da beraberinde getirir.

Custom Dev Clients ve EAS Build

EAS Build, Expo'nun modern derleme ve dağıtım platformudur. Geleneksel expo build komutunun yerini almıştır ve çok daha fazla esneklik sunar. EAS Build ile, Managed Workflow'da bile özel native modüller içeren "Development Client"lar oluşturabilirsiniz. Bu, Expo Go'nun aksine, projenize özel native kodları içeren bir geliştirme uygulamasıdır. Böylece, Managed Workflow'un kolaylıklarından faydalanırken, gerektiğinde native modüller ekleyebilme esnekliğine sahip olursunuz.

Web ve Masaüstü Desteği

Expo, React Native for Web projesiyle entegrasyonu sayesinde uygulamalarınızı web platformunda da çalıştırmanıza olanak tanır. expo start --web komutuyla uygulamanızın web sürümünü tarayıcınızda görüntüleyebilirsiniz. Bu, tek bir kod tabanıyla hem mobil hem de web platformlarını hedeflemenizi sağlayarak "evrensel" uygulama geliştirme vizyonunu güçlendirir. Ayrıca, Electron gibi araçlarla masaüstü uygulamaları da oluşturmak mümkündür, ancak bu daha çok deneysel bir alandır.

Sınırlamalar ve Ne Zaman Bare Workflow Tercih Edilmeli

Expo Managed Workflow'un sunduğu kolaylıklar harika olsa da, bazı sınırlamaları vardır:

• Native Modül Kısıtlaması: Yalnızca Expo SDK'sında bulunan veya Expo tarafından desteklenen native modülleri kullanabilirsiniz. Çok özel bir native kütüphaneye ihtiyacınız varsa, Managed Workflow yeterli olmayabilir.
• Uygulama Boyutu: Expo SDK'sının tamamı uygulamanıza dahil edildiği için, başlangıç uygulama boyutu biraz daha büyük olabilir.

Eğer projeniz çok özel native modüllere ihtiyaç duyuyorsa, belirli bir cihaz donanımına doğrudan erişim gerektiriyorsa (örneğin, özel bir Bluetooth cihazı), veya uygulamanızın native kod tabanına tam kontrol sağlamak istiyorsanız, Bare Workflow veya EAS Build ile Custom Dev Client oluşturma seçeneklerini değerlendirmelisiniz. Bu, Expo'nun sunduğu esnekliğin bir göstergesidir; ihtiyacınıza göre Managed ve Bare workflow arasında geçiş yapabilirsiniz.

Sonuç

Expo Framework, React Native ekosistemine yeni başlayanlar ve hızlı prototipleme yapmak isteyen deneyimli geliştiriciler için paha biçilmez bir araçtır. Kurulum kolaylığı, zengin API desteği, hızlı test imkanları ve OTA güncellemeleri gibi özellikleriyle, evrensel mobil uygulamalar geliştirme sürecini önemli ölçüde basitleştirir. Managed Workflow ile hızla başlayabilir, gerektiğinde EAS Build ve Custom Dev Client gibi araçlarla projenizin native yeteneklerini genişletebilirsiniz. Expo, modern uygulama geliştirmenin karmaşıklığını azaltarak, geliştiricilerin daha çok kullanıcı deneyimine ve iş mantığına odaklanmasını sağlayan güçlü bir köprü görevi görür.

SSS (Sık Sorulan Sorular)

1. Expo ücretsiz mi?

Evet, Expo Framework'ün temel kullanımı ve birçok özelliği ücretsizdir. Expo Application Services (EAS) Build gibi bazı bulut tabanlı hizmetler için ücretsiz katmanlar bulunur, ancak daha yüksek kullanım veya gelişmiş özellikler için ücretli planlar mevcuttur.

2. Mevcut bir React Native projesini Expo'ya taşıyabilir miyim?

Mevcut bir "Bare" React Native projesini Managed Expo projesine taşımak genellikle mümkün değildir, çünkü Expo'nun kendi native modül ve proje yapısı vardır. Ancak, Expo projenizi "eject" ederek veya EAS Build ile Custom Dev Client oluşturarak Bare React Native projesine dönüştürebilirsiniz.

3. Expo ile performansı yüksek uygulamalar geliştirebilir miyim?

Kesinlikle. Expo, React Native üzerine inşa edildiği için, React Native'in sunduğu native performans avantajlarından faydalanır. Expo SDK'sındaki modüller de performans odaklıdır. Performans sorunları genellikle uygulamanın JavaScript kodundaki optimizasyon eksikliklerinden veya yanlış kullanımdan kaynaklanır, Expo'nun kendisinden değil.

4. Expo Go nedir?

Expo Go, Expo tarafından geliştirilen ve App Store ile Google Play Store'da bulunan ücretsiz bir mobil uygulamadır. Geliştirme aşamasındaki Expo projelerinizi fiziksel bir cihazda anında test etmenizi sağlar. Terminalde gösterilen QR kodunu tarayarak uygulamanızı cihazınızda çalıştırabilirsiniz.

5. Expo'nun web desteği ne anlama geliyor?

Expo, React Native for Web entegrasyonu sayesinde, yazdığınız React Native kodunu web tarayıcılarında da çalıştırabilir. Bu, tek bir kod tabanıyla hem mobil uygulamalar (iOS/Android) hem de web uygulamaları geliştirebileceğiniz anlamına gelir. Bu, özellikle evrensel bir kullanıcı deneyimi sunmak isteyen projeler için büyük bir avantajdır.