React Native ve Firebase Kullanarak ToDo App Yapıyoruz

Yeni bir programlama diline başlandığında ve gelişmek istendiğinde yapılması gerekenlerden biri de kuşkusuz bolca proje ve uygulama yapmaktır. Bu projelerden ilki genel olarak bir Yapılacaklar Listesi hazırlama uygulaması olarak karşımıza çıkıyor.

Programlamaya başladığımda Türkçe kaynak bulmakta oldukça zorlandım ve bu süreç gerçekten yorucu geçti. İngilizce bilseniz de bazı şeyleri anadilinizde okumanın daha akılda kalıcı olduğunu düşünüyorum. Bu sebeple öğrendiklerimi artık bu profilde belirli aralıklarla paylaşmayı ve bu alana ilgisi olanlara yardımcı olmayı hedefliyorum. Eğer sayfamı takip ederseniz React Native ve Firebase kullanarak yapacağım 6 bölümlük serinin diğer bölümleri de yayınlandığında erişebilirsiniz. Dilerseniz Serinin ilk bölümü olan Todo App uygulamasına başlayalım.

Kod yazmaya başlamadan önce uygulamamızın nasıl görüneceği ve neler yapmamız gerektiğini kesinleştirebilmek için tasarım oluşturmamız gerek. Bunu kağıt kalem ile istediğiniz şekilde yapabilirsiniz. Ben tasarımlarımı figma.com üzerinden hazırlıyorum. Bunu öğrenmek size görsel açıdan iyi bir rehber ve ilerisi için güzel bir yatırım olacaktır. YouTube’da Adem İlter kanalında çok güzel bir seri var izlemenizi öneririm.

Yapacağımız uygulamanın genel görünümü yukarıdaki gibi olacak.

Tasarım belli olduğuna göre projemizi oluşturup gerekli paketleri yükleyelim. Ben uygulamayı yaparken expo kullanıyorum. Önizlemeleri telefonumdan takip edicem. Siz de expo.io sitesinden nasıl kurulduğunu öğrenebilirsiniz.

expo init Firebase-TodoApp // bu komutla dosyamızı oluşturuyoruz
npm start                  // bu komutla projeyi başlatıyoruz.

Projemizi oluşturduğumuza ve expo kullanarak telefonumuza bağladığımıza göre. Proje dosyamızı Kod editöründe (Ben Visual Studio Code kullanıyorum) açabiliriz. Karşımıza çıkan App.js sayfasını ana sayfamız olarak adlandırabiliriz. Uygulama içindeki tüm dosyalar bu sayfadan çağrılır ve yönetilir. Projemizin düzenli olması ve tekrar kullanılabilir bileşenlerden oluşmasını istediğimiz için ana dizin üzerinde src klasörü oluşturuyoruz ardından aşağıdaki gibi düzenliyoruz.

1. Button.js

İlk olarak Button componentini oluşturalım. Burada butonu 2 farklı yerde kullanacağımız için kod tekrarını önlemek için onPress ve title atayarak diğer sayfalarda istediğimiz gibi kullanabiliriz. Tasarımmda gösterildiği gibi koda döküyoruz.

2. Input.js

Liste adını gireceğimiz bölüm için kullanacağımız input alanını aşağıdaki gibi hazırlayalım. Burada title, onChangeText ve placeholder parametrelerini tanımlıyoruz. Kullanılacak yerlerde bu parametreleri kullanacağız.

3. PrimaryTitle.js

Sayfalarımızın her biri için farklı başlıklar kullanacağımız için burada bir title componenti oluşturuyoruz ve istediğimiz herhangi bir sayfada bu bileşeni import ederek kullanabiliriz.

4. AddList.js

Uygulamamızda yeni listeler oluşturmamız için gerekli olan sayfayı AddList.js sayfamızda oluşturduk. Aşağıda görüldüğü gibi daha önceden oluşturduğumuz Title, Input ve Button componentlerini dahil ettik. Kullanılan iconları dilediğiniz siteden .png/.jpeg formatında indirerek kullanabiliriz.

5. List.js

Bu sayfa eklediğimiz bir listenin nasıl görüneceğini ve liste adını ve basıldığında açılacak olan liste modelını tanımlıyoruz. Görünümü kendi projenize göre düzenleyebilirsiniz.

6. ListModal.js

Her listemizin açıldığında ve bir madde eklediğimizde oluşacak sayfayı burada hazırlıyoruz. Bir madde eğer yapıldıysa üzeri çizilecek ve checkbox yapıldı halini alacak. Bu sayfada da title ı import ediyoruz.

7. App.js

Bu sayfayı anasayfamız olarak kullandım. Sayfalarımızı ve componentleri import ederek başlıyoruz ve devamında state tanımlıyoruz. FlatList kullanarak listelerimiz render ediyoruz.

Firebase de Proje Oluşturma ve Liste Bilgilerini Tutma

1. Proje Oluştur

2. Projeye isim ver

3. Web kısmını seçerek uygulamamıza ekleyelim

4. Proje Key leri projeye özeldir paylaşmamanızı öneririm. Bunları kullanıcaz kopyalayıp Fire.js dosyasına koyabilirsin.

5. Kullanıcıların giriş yapması için anonim olanı etkinleştiriyoruz.

6. Database oluşturalım ve isimlendirelim.

Firebase de yapılması gerekenler bu şekilde bundan sonrası için firebase e veri gönderme ve alma kısımlarını Fire.js sayfasında yapıcaz.Öncelikle firebase i projeye dahil ediyoruz.

npm i firebase 
npm i base-64 /// base-64 hatası alırsanız indirmeniz gerekir.

8. Fire.js

Böylelikle projemizi tamamlamış olduk firebase de oluşturduğunuz database e bakarsanız verilerinizin oluştuğunu göreceksiniz. Umarım faydalı olmuştur. React Native ve Firebase ile bir kaç proje daha burada paylaşıyor olucam . Takip edebilirsiniz. Bol şans.