React Native SQLite Kullanımı

Biliyorsunuz ki son dönemde Scode uygulamasının iOS ve Android versiyonlarını yayınladık. React Native ile geliştirdiğimiz uygulamamızın geliştirme sürecinde çok şey öğrendim. Bu öğrendiklerimi de bir teknik yazı olarak karşınıza çıkarmayı diliyorum.

Uygulama içerisinde kullanıcının verilerini tutmak, çevrimdışı çalışmak ve bunu senkronize etmek gerekebilir. Scode içerisinde genel olarak bunu gerçekleştiriyoruz. Online & Offline çalışma ile kullanıcı bitirdiği bölümleri ve puanları kaydediyor. Bunu çok iyi bir şekilde yapabilmek için aslında uygulama içi bir veritabanı kullanmak en iyisi

Bu senaryodan yola çıkarak React Native ile SQLite kullanımı ve rahat bir şekilde nasıl SQL kodlarını çalıştırabileceğimize bakalım.

Var olan veya yeni projemizin üzerine öncelikle React Native SQLite paketini kuralım

1.Kurulum

Yarn ile

yarn add react-native-sqlite-storage

npm ile

npm i react-native-sqlite-storage --save

2. Android için paket kurulumu

— Kurulum içerisinde “//yeni eklenen” satırlarına dikkat edelim —

  1. android/settings.gradle dosyasının sonuna aşağıdaki iki satırı ekleyelim
...
include ':react-native-sqlite-storage'
project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')

2. android/app/build.gradle içerisinde dependencies içerisine aşağıdaki compile edilmesi gereken paketi ekleyelim

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
...
compile project(':react-native-sqlite-storage') //Yeni Eklenen
}

3. android/app/src/main/java/com … şeklinde giden klasör içerisinde MainApplication.java dosyası içerisinde düzenleme yapacağız. Öncelikle import bölümüne aşağıdaki koda benzer bir şekilde ekleyelim

Ve sonrasında getPackages method içerisinde SQLitePackage class ımızı ekleyelim.

3. iOS için paket kurulumu

SQLite paketini projemize link komutu ile linkleme işlemi gerçekleştirelim. Böylelikle iOS tarafında ilgili projenin bağlanmasını sağlayalım.

react-native link react-native-sqlite-storage

Ardından iOS projemizin içerisindeki proje adının olduğu klasör içine “www” klasörü oluşturup SQLite db mizi içerisine koyalım. Ardından XCode’u açalım ve bu klasörü projemize ekleyelim.

Gelen ekranda aşağıdaki gibi değişikliklerimizi yapalım.

Projemize www klasörünü ekledikten sonra tüm işlemler tamamdır.

4. Kullanımı

Projemizin ana klasörü içerisine www klasörü oluşturup içerisine SQLİte veritabanımızı ekleyelim ve artık kod yazmaya başlayalım

Normalde SQLite için SQL Query leri işlem yapmanız gerekir ama development için sizi yorabilir. Bunun için, Cordova geliştirdiğim zamanlar kullandığım websqlite kütüphanesini React Native ile kullanacağız. Öncelikle bunun için aşağıdaki paketi kurmamız gerekiyor

yarn ile

yarn add websqlite

npm ile

npm i websqlite --save

Bu işlemleri yaptıktan sonra SQLite işlemlerini yapmak için bir class yazalım. Ana dizine src adında bir klasör açalım, içine data.js dosyası oluşturalım ve aşağıdaki kodları ekleyelim

Ardından aynı klasöre index.js dosyası oluşturalım ve aşağıdaki kodları ekleyelim

Sonra da index.ios.js ve index.android.js dosyalarını aşağıdaki kod ile değiştirelim

5. Sonuç

UI açısından çok kaliteli olmasa da çalıştığını gösteren bir Screenshot eklersek aşağıdaki gibidir.

Android

iOS

Projeye Github üzerinden ulaşabilirsiniz. Takip etmeyi unutmayalım

Daha fazlası için Twitter ve Github üzerinden takip etmeyi unutmayın

Sevgiler
@PeaceCwz