0:01 merhaba arkadaşlar bize öncesi son konumuz olarak bugün fetching işleminden bahsedeceğiz bununla ilgili projeyi hemen başlatmak istiyorum buluşturmak istiyorum rn Fching tabii projemi başlatmak için yazmam gereken şey Expo init ve proje adım RN fetching buraya geldi gördüğünüz gibi bastım enterada şunun içerisine şimdi oluşturuluyor burada yeni sayfalar oluşturmayacağım burada sadece doğrudan uygulamayı gerçekleştireceğiz arkadaşlar peki fetching işlemi nedir react native fetching nedir arkadaşlar biliyorsunuz ki biz verilerimizi eee bir API üzerinden
0:47 çekerek veri tabanından çekeceğiz apı üzerinden çekerek gösterimini sağlayacağız arkadaşlar fching işlemi işte API verilerini çekerek daha doğrusu API verilerini çekmeye yarıyor eee fetching işlemi sonrasında biz çektiğimiz verileri ister metin olarak ister liste olarak gösterebiliriz çok basit bir kullanımım var bundan bahsedeceğim internette hazır olan bazı API veriler var oradaki kaynaklardan bir veri çekimi gerçekleştireceğiz sonrasında da bunu bir listeye aktararak listede göstermeye çalışacağız arkadaşlar projem tamamlandı proje klasörüme yerleşiyorum arkadaşlar şu an CD RN fetching dedim hatta bir de başlatalım projemizi de npx Expo
1:35 Start android cihazımız da projemiz de başlasın şuradan A harfine basıyorum bu arada fetching işlemi yapabilmemiz için use state ve use effect'e ihtiyacımız da var arkadaşlar eee neden ihtiyacınız var e çekme işlemini ne zaman yapmak istiyorsunuz mesela bir butona basıldığında mı ya da sayfa yüklendiğinde mi biz şu an sayfa yüklendiğinde çekilsin diyeceğiz evet ana sayfamız geldi gördüğünüz üzere arkadaşlar buraya eee EPPJS sayfası geldi direkt EPPJS'de bu işlemi gerçekleştireceğim sizler isterseniz ayrı sayfalar oluşturabilirsiniz arkadaşlar tabii şöyle bir önce bir
2:22 göstereyim genel kullanımından da bahsetmek istiyorum react native.dev dokümantasyonunda fetching şuraya arama butonuna fetch ya da fetching diye yazdığınızda network fetching diye bir şey geliyor zaten arkadaşlar burada aslında kullanımına yönelik en güzel örnek şurası bakın diyor ki siz fonksiyonunuzu çağırdığınızda ister use effect içinde yapın isterseniz doğrudan sayfanızın içerisinde yapın e ne yap fching işlemini şurasıyla gerçekleştirin diyor bu bir kaynak bu kaynaktan yanıtları alın jason formatında alın sonra bunları da işte veri setini aktarabilirsiniz veri yapabilirsiniz hata olursa da hata mesajı gösterin aslında biz bu yapıyı izleyeceğiz şimdi yazarken zaten göreceğiz arkadaşlar bu
3:07 arada ben verileri nereden alacağımı da göstereyim size jasonplholder.com diye bir site var arkadaşlar şöyle ana sayfasını açalım burada eee çeşitli API formatında çeşitli veriler mevcut mesela postlar yorumlar albümler fotoğraflar 100 tane içerik varmış post varmış ben burayı kaynak olarak kullanacağım arkadaşlar bu adresi kopyalıyorum o nedenle şurada gördüğünüz adresi kopyalıyorum eee geldim sonrasında ne yapıyoruz şu texti bir silelim şöyle şurayı bir sildim arkadaşlar bu benim p.jgsm burada bir tane öncelikle şey oluşturmak istiyorum ha burada değil e use state ve use effecti nerede oluşturuyorduk yukarıda
3:54 arkadaşlar JSX arasında değil burada oluşturmamız gerekiyor const peki ne yapacağım verim olacak benim sonra bu verim değişecek set veri hım başlangıçta boş bir veri olacak use state ve başlangıçta ne dedik boş olacak güzel bu daha sonrasında ne olacak arkadaşlar sayfa yüklendiğinde sayfa yüklendiğinde use effect sayfa yüklendiğinde diyebilmemiz için buna ihtiyacım var tabii ki evet şöyle sayfa yüklendiğinde ne yapsın arkadaşlar şu parantezin içerisindeki işlemler gerçekleşsin işte burada fetching işlemini gerçekleştireceğiz bakın fetch
4:39 gördüğünüz gibi fetch yazdım hatta şöyle bir fench bundle değil karıştırmıyoruz fch yazdık açtık parantezimizi ve kaynağımızı buraya yazıyoruz kaynağımızı yazdık güzel fch işlemi gerçekleştir sonra den sonra arkadaşlar response şurada bakın response bunu ne yap arkadaşlar respons jin C'sin formatına çevir güzel evet e tabii şurada bir fonksiyonumuz daha şeyimiz daha var h
5:25 nokta stand sonrasında ise arkadaşlar bir verimiz vardı hatırlıyorsanız yukarıda verimizi ne yapalım arkadaşlar ayarlayalım nasıl ayarlayalım diyelim ki set veri set veri veri olarak ayarla dedik arkadaşlar tabii burada e şunu parantez içerisine süslü parantez içerisine alalım tek satırlık gerçi tek satırlık süreçlerde çok problem olmama durumu yüksek ama eee birden fazla satır olduğunu düşünebiliriz bazen catch eğer bu işlemleri yaparken herhangi bir hatayla karşılaşırsam
6:11 error error ne yapsın arkadaşlar eğer bir hatayla karşılaşırsa da şöyle yine süslü parantez içerisinde bir uyarı versin bize alert veriler çekilemedi hı hı güzel veriler çekilemedi diye bir uyarı versin süslü parantezimiz bitti aslında feching işlemi bu kadar yani şimdi biz bunları çektik veri yani şu başlangıçta oluşturduğumuz boş olan veri setimizin içerisine ne yaptık arkadaşlar aktardık bundan sonraki kısım verilerimizi şurada gösterebilmek başka hiçbir şey değil arkadaşlar buraya geliyorum verilerimi göstermek için listeleme yapmak istiyorum ve liste içinde biliyorsunuz biz neyi kullanmıştık flat dis
6:57 kullanmıştık bunun ilk parametresi data idi ve bunu da arkadaşlar süslü parantez içerisinde süslü parantez içerisinde belirtiyorduk neydi peki bizim datamızı tutan şu an artık datamızı tutan kısım arkadaşlar veri bakın burada çektik veriyi aktardık çünkü tamam sonrasında yapmamız gereken neydi arkadaşlar bu arada şunu bir şöyle kapatayım şu kızarıklık bir gitsin h bunu bir render etmek arkadaşlar render item güzel render item açtık parantezimiz süslü parantezimiz ıtem dedik şuraya geldik ayıralım bunları ve tekrar parantezimizi
7:42 açtık burada da arkadaşlar bir metin oluşturuyoruz ve neler görünmesini istiyorsak bunları göstermesini sağlayacağız burada item item no name bunlar nereden geldi peki item ıtem nne ne şuraya geldiğinizde bakın ID'si var a namei yokmuş bu arada title title alalım biz item.title ıtem aldık ıtem title title şuraya gelelim title güzel verilerimizin e title'ını da almış olduk
8:28 şuna biraz bir stil vereyim azıcık büyütelim arkadaşlar bunu da style eş font size 2 20 biraz daha büyük görünsün listemiz arkadaşlar bakalım herhangi bir şey var mı eksiğimiz hatamız ya da uyarımız kaydedelim projemizi de bir görüntüleyelim zaten listemiz gelmiş bakın bir tire deyip title'larını buraya yazmış durumda title'lar nerede bakın sunt out vesaire diye başlıyor quey diye başlıyor ikincisi listelemiş durumda biz buna çeşitli eee biçimlendirmeler gerçekleştirebiliriz arka plan rengini
9:14 değiştirebiliriz vesaire yani internetteki bir API'yi çektik apı verilerini çektik bunları ne yaptık arkadaşlar sonra çekerek veri isimli use state ile veri isimli değişkenimizi aktardık veya bileşenimize aktardık diyelim burada daha çok bileşen kelimesi tercih ediliyor daha sonrasında bir flat list ile de bunu listeleme işlemini gerçekleştirdik çok daha basit bir şekilde peki post değil mesela kaynağımızı değiştirelim commands desek neler var burada name varmış güzel e şunu alalım copy geldim koduma gelecektim kaynağımı değiştiriyorum sadece aslına bakarsanız ctrlv bu sefer ne var
10:01 arkadaşlar title yok title yerine name var kaydettim evet gördüğünüz gibi bu sefer verilerim şuradaki verilerim olarak geldi peting işlemi çok teferruatlı çok karışık bir işlem değil eee birçok yerde kopyala yapıştırla bile kullanabilirsiniz belki de eee bu kadarcık arkadaşlar siz istediğiniz sayfada göstermek istediğiniz sayfada bunu uygulayabilirsiniz vize öncesi son konumuz buydu eee şu ana kadar olan uygulamaları şurada yapmış olduğum bakın 1 2 3 4 5 6 uygulama galiba bunların hepsini kitapta eee paylaşacağım aynı zamanda kitap linki üzerinden de kitap
10:47 sayfam üzerinden de edinebilirsiniz hepinize kolaylıklar diliyorum başarılar arkadaşlar
