Bu çalışma Uygulamalı React Native Eğitimi - Film Uygulaması eğitiminde geliştirilen örnek projeyi anlatır. API'den alınan film verilerini ana ekran, arama, detay ve favoriler ekranlarında gösteren bir mobil uygulama geliştir.
Başlamadan önce
JavaScript bilgisi ve React bileşenleri, state ve hook kullanımı hakkında temel deneyim. React Native geliştirme ortamını kurabilen bir bilgisayar gerekir.
Kullanılan teknolojiler
React Native, JavaScript, API, React Hooks.
Eğitimde ele alınan özellikler
- Ana ekran, film detayı, arama ve favoriler ekranları
- Tema seçenekleri ve ortak arayüz değerleri
- API istekleri, environment variable ve useMovies hook'u
- Film arama ile detay ekranı arasında veri akışı
Projeyi hangi adımlarla geliştirebilirsin?
- React Native projesini ve geliştirme ortamını kur. Renkler ve ortak değerleri düzenleyerek ekranların temelini hazırla.
- Ana ekran ve detay bileşenlerini geliştir. API'den gelen filmleri arayüzde gösterecek veri akışını oluştur.
- Arama ekranını film sonuçları ve detay seçimiyle birleştir. Veri yüklenirken ve sonuç bulunamadığında ekranın davranışını değerlendir.
- Favoriler ve tema akışlarını tamamla. Farklı ekran boyutlarında uygulamanın okunabilirliğini ve gezinme davranışını kontrol et.
Çalışmanı nasıl kontrol edebilirsin?
- Arama sonucundan doğru filmin detayına gidiliyor mu?
- Yükleme ve bağlantı hatası sırasında ekran anlaşılır mı?
- Favoriye ekleme ve çıkarma arayüzde tutarlı görünüyor mu?
- Tema değiştiğinde metinler ve kontroller okunabilir kalıyor mu?
Kendi projenle pratiği genişlet
Favoriler için sıralama veya kişisel bir izleme listesi ekle. API anahtarlarının kullanım koşullarını incele ve uygulamanın hata durumlarını geliştir. Özelliklerini bir README içinde ekran akışlarıyla birlikte anlat.
Eklediğin özellikleri ve karşılaştığın hataları kısa notlarla kaydet. Bir özelliği hangi dosyalarda geliştirdiğini göstermek için küçük commit'ler oluştur. Projeni paylaşırken kullanılan araçları, çalıştırma adımlarını ve örnek ekran akışlarını açıkla.