React Native Restoran listeleme uygulaması (Demo)
Herkese Selam!
Öncelikle geçtiğimiz günlerde ilk sunumumu yaptığım için fazlasıyla mutluyum. Bana hatta bize bu fırsatı veren GDGTekirdağ ekibine ne kadar teşekkür etsem azdır.
Uygulamayı anlatmadan önce etkinlikle ilgili konuşmak istiyorum. Üç arkadaş, kaynayan kanımızla yazılım geliştirmekle ilgili bir şeyler yapmak için uğraşıyorduk. Mustafa Flutter ben ise hali hazırda React Native çalışıyordum. Aynı projeyi her iki dilde de yazarak kıyaslayabileceğimiz ve Özkan Hürcan’ ın Back-End tarafında bizi desteklemesiyle oluşturduğumuz projeyi insanlara anlatmak istedik. Keyifli geçen bir etkinlik sonrasında konuşmacı olarak biz çok şey öğrendik.
Uygulamaya geçelim.
Uygulamada göstermek istediğimiz bazı şeyler vardı. Bunlardan birincisi navigation. Navigation olarak genelikle react-native-router-flux kullanıyorum. Her ne kadar versiyon 4' te hatalar olsada önceki versiyonlarında oldukça iyi çalışıyor.
Göstermek istediğim bir diğer şey ise Google Maps API. Bunun için ise react-native-maps kütüphanesini kullanıyorum. Uygulama içerisinde istediğim yerde ihtiyacımız olan boyutta harita kullanabileceğimiz mükemmel bir kütüphane imkanı sunuyor. Ayrıca yol tarifi almak için farklı bir kütüphane kullanmamız gerekiyor.
Göstermek istediğim son kütüphane ise axios. Bu kütüphane ise JSON’dan veri çekerken işinizi çok fazla kolaylaştırıyor.
Biraz da kod yazalım.
Öncelikle bir React Native projesi oluşturuyoruz.react-native init project
Daha sonra router’ı kuruyoruz.npm install react-native-router-flux
Bu konuda 3.40.1 versiyonunu kullanmanızı tavsiye ederim zira daha sorunsuz çalışmakta.
Yapmamız gereken ilk şey, bir router.js dosyası oluşturmak ve geçiş yapıcağımız sayfaları buraya eklemek.
Bu noktada gösterecek henüz tek bir sayfamız olduğu için sadece onu tanıttık. Daha sonrada istediğimiz stilleri vererek şöyle bir görüntü elde ettik.
Daha sonraki işlem ise Google maps’ i uygulamamız içinde kullanmak oluyor. Bu kütüphaneyi nasıl kullanabileceğinize dair şu muhteşem yazıyı da buraya bırakıyorum.
Gerekli işlemleri yaptıktan sonra kodumuzun bu şekilde olması gerekiyor.
Aslında burada koordinat verdiğimiz yerin deltalar ile haritanın ne kadar bir genişlikteki alanı göstereceğinin kararını veriyoruz. Tabi tüm bu işlemleri Google Maps API’ ını kullanarak gerçekleştiriyoruz. Bu yüzden bir API anahtarına ihtiyacımız var. Bunun için ise burayı kullanabiliriz. Bu işlemin sonucunda ekran çıktısı şu şekilde olacaktır.
Şimdiki adımda ise JSON’ dan verileri axios yardımıyla çekip ilk ekranımızda listeleyelim. Bunun için öncelikle bilgisayarımıza axios’u kurmamız gerekiyor.
Bunun için konsola şu kodu yazmamız gerekiyor.
npm install react-native-axios
Ardından data adında bir State oluşturup çektiğimiz verileri bunun içerisine koyalım.
Burada axios’un get methoduyla verilerimizi çektik ve state’ imize bunları aktardık. Ardından bu verileri listelerken kullanacağımız kendi bileşenlerimizi oluşturalım. Bunun için ayrı bir Card.js dosyası oluşturuyoruz ve bu dosya içerisine listeleme bileşenimizi oluşturuyoruz.
Gerekli stilleri verdikten sonra bu komponentimizi Home.js dosyamıza import edelim. Daha sonrasında ise tüm verileri listelemek için render methodunda çağıralım.
Bu işlemin sonunda ekran çıktımız şu şekilde olmalı.
Artık ilk ekranımız tamamlandı. İkinci ekran için öncelikle Router.js dosyasında ikinci ekranı ekliyoruz.
Daha sonrasında ikinci ekranda listelemek istediğimiz fiyat ve ürün bilgisini actions methodunun içerisinde gönderiyoruz. Bu komutu ikinci ekrana geçtiğimiz yer olan Card komponentinin içine yazıyoruz.
Actions.Menu({ data: props.data});
Ardından onPress() içerisinde bu methodu çağırarak içerisindeki data’yı props.data olarak gönderiyoruz.
Bu işlem ile birlikte ikinci ekranımıza giden bilgilerde sadece fiyat ve menü bilgisini çekerek onları listeleyelim. Fakat bu sefer komponent oluşturmak yerine sadece <Text> komutu içerisinde listeleyelim.
Bu işlemin sonucunda da ikinci ekranımız şu şekilde gözükecek.
Son olarak yapmamız gereken işlem ise haritadaki noktalara işaretleyici ve açıklama eklemek. Bunun için react-native-maps kütüphanesinin Marker ve Callout komutlarını kullanılıyoruz. Bu komutların her birini <MapView> içerisinde kullanmalıyız.
Bu işlem esnasında bir mapping işlemiyle koordinatları ve restoran isimlerini listeliyoruz. Bu işlemlerden sonra ekran çıktımız şu şekilde olacaktır.
Tüm bu işlemler sonrasında uygulamamız tamamlanmış oluyor. Sonuç olarak birkaç ek paket ve framework sayesinde bu kadar basit bir uygulama yapabiliyoruz.
