Android ve İOS ‘a SqlLite Pluginini Tanıtma ve React Native ile İlk SqlLite Denemeyimi
Merhaba sevgili yazılım aşıkları,
React Native ile uygulama geliştirirken Data üzerindeki işlemlerimizi serviceler aracılıyla sunucular üzerinde gerçekleştireceğiz. Sadece local’de çalışan uygulamalar günümüzde yok denecek kadar az.Uygulamalar data işimlerini sunucu üzerinde yapıyorlar. Bizde ileri tarihli React Native yazılarımızda yapacağımız örnek uygulamaları bu mantık da geliştirmeye çalışacağız. Geliştirmeye çalışacağız diyorum. Çünkü cihaz üzerinde mutlaka local data tutmamız gerekecek. Böyle bir durumda SqlLite bir seçenek olabilir. Siz altarnetif bir pluging de kullanabilirsiniz.
SqlLite yazısının iki ana amacı olacak.
Birincisi: react-native-sqlite-storage pluginini Andorid ve Ios cihazları için çalışır hale getirmek. Bu mantığı anladığımızda diğer pluginleri kullanırken sıkıntı yaşamayız diye düşünüyorum.
İkincisi: Cihaz üzerinde local data tutmak için yazmamız gereken SQL kodlarını metotlar aracılıyla çağırmamızı sağlamak. Bu sayede SQL kod karmaşasına hiç girmeden geliştireceğimiz uygulamaya adaklanmış olacağız. Pek açık olmadı ama :) ilerleyen bölümde daha açık bir şekilde inceleyeceğiz.
SqlLite konusuna başlamadan önce React Native projesi oluşturmamız gerekiyor. Bunun için react-native init projeismi komutunu terminal üzerinden çalıştırmamız gerekiyor. Ayrıntılı bilgi için React Native 01 ve React Native 02 yazılarımı inceleyebilirsiniz. Yada Aşağıya eklediğim React Native projesinin orjinal dökümanından inceleyebilirsiniz.
Her zaman en iyi seçenek orjinal döküman bence. Yada Microsoft un dökümanları hariç her zaman en iyi seçenek. Evet evet böyle daha doğru oldu. Hayatım boyunca o dökümanlardan hiç birşey anlamadım :( Birilerinin microsoftun dökümanları nasıl takip edilmeli diye bir eğitim seti hazırlaması gerekiyor bence :) Yardım dökümanlarını anlamayıp bunalıma giren yazılımcılar, piskologları zengin etti. Artık bu ve bezeri bölümlerin puanları birinciliğe koşuyor :) Bu yazının kurbanı Microsoft oldu :)
IOS UYGULAMASI İÇERİSİNDE PAKETİ KULLANILABİLİR HALE GETİRME
Uygulamamızı ayağa kaldırdığımıza göre Terminal uygulaması üzerinden projemizin dizinini açıyoruz. Ardından npm install — save react-native-sqlite-storage komutunu çalıştırıyoruz.
React Native projesi içerisine paketi indirdikten sonra IOS Native dosyarına ilgili plugini eklememiz gerekiyor. Bu işlemi otomatik olarak yapabilmek için rnpm paketine ihtiyacımız var.
Paketi bilgisayarımıza indirmek için Terminal üzerinden npm install rnpm -g komutunu çalıştırıyoruz. Bu komut sayesinde rnpm paketini global olarak bilgisayarımıza kurmuş oluyoruz. (Bu komut için proje dizininde olmamıza gereke yok.)
rnpm paketini ayrıntılı olarak incelemek isteyen arkadaşlar. Aşağıdaki linki takip edebilirsiniz.
Son olarak rnpm link komutunu proje dizininde çalıştırdığımızda aşağıdaki gibi bir ekran bizi karşılıyor. Bu kod sayesinde SqlLite kullanabilmemiz için gerekli plugini IOS uygulamamıza otomatik olarak eklenmiş olduk.
Yazıya başlarken bu yazının iki amacı var demiştim. IOS Native kodlarına SqlLite pluginini eklediğimize göre birinci amacımızın ilk yarısına ulaştık. Tamamlamamız için Android Native kodlarınada ilgili plugini dahil etmemiz gerekiyor. Şimdi ikinci amacımız olan rutin olarak tekrarladığımız SQL komutlarını kendi methodlarımız aracılıyla çağırma kısmına geçebiliriz. Bu kütüphaneyi ben yazmadım. İnternet üzerinde araştırma yaparken Abdurrahman Eker in sayfasından ulaştım.Video içerik ve Blog yazısı olarak konuyu incelemiş. Başarılı bir çalışma olmuş. Projeyi npm paketi halinede getirmiş. İncelemek isteyen arkadaşlar için linki aşağıya ekliyorum. Birde bizimle birlikte uygulama geliştirmeye devam edecek arkadaşlada kesin incelesin :) Oradaki methodlar üzerinden SQL işlemlerimizi gerçekleştireceğiz.
Konuyu dallandırmadan devam edelim Proje dosyarımızın içerisine Providers klasörü oluşturuyoruz. Altına SqlService.js isminde bir javascript dosyası oluşturuyoruz. Benim proje dizinin aşağıdaki gibi gözüküyor.
Daha sonra SqlService.js dosyasının içerisine aşağıdaki kodları kopyalıyoruz ve Kaydediyoruz.
IOS uygulamamız için gereken tüm yapılandırmaları tamamladık. Artık index.ios.js dosyası üzerinde SqlLite kodlarını deneyebiliriz. index.ios.js dosyasını aşağıdaki gibi düzenledim.
Yukarıdaki kodlarda SqlService.js sayfaya dahil ettim. Sonra Constructor methot içerisinde TEST isimli bir tablo yoksa oluşturduk. Test tablosu içerisine bir kayıt girdik. Ardından tüm kayıtları consola bastık.
Tabloyu oluşturduğumuz veri tabanı nerde dediğinizi duyar gibiyim. Sağolsun Abdurrahman Eker akardaşımız arka planda react.db isminde bizim yerimize oluşturmuş.
npm start komutu ile sunucumuzu çalıştırıyoruz. Ardından Xcode üzerinden Run butonuna basıyoruz. Bu kısıma kadar bir sorun yoksa aşağıdaki gibi bir ekran bizi karşılıyor.(Önceden uygulama simülatör üzerinde kurulu ise kaldırıp sonra Xcode üzerinden Run butonuna başmanızı öneririm.)
Simülatörümüz üzerinde iken Command+D tuşuna basıyoruz. Aşağıdaki ekran açılıyor. Bu ekrandan Debug JS Remotely seçeneğini seçiyoruz.
EKSİK RESİM
Bir sorun yoksa Crome tarayıcısısı üzerinde http://localhost:8081/debugger-ui adresi otomatik olarak açılıyor. Tabi Chrome tarayıcısı bilgisayarınızda yüklü olması gerekiyor. Buda yetmiyor muş gibi Chrome tarayıcısındada React Developper Tool Eklentisinin ekli olması gerekiyor. Hemen aşağıya linklerini ekliyorum. Kurulumlar tam ama chrome tarayıcısı üzerinde sayfa açılmıyor. O zaman yapacak fazla bir şey kalmadı yukarıdaki yazdığım debugger adresini chrome tarayıcısı üzerinde manuel olarak başlatacağız.
Sonra açılan sayfaya sağ tıklayıp incele seceneğini seçiyorum.
Herhagi bir sorun yoksa eklediğimiz kayıtlar aşağıdaki gibi consola basılması gerekiyor.
Bende 8 tane kayıt gözüküyor. Biraz fazla basmışım tuşlara ondan böyle oldu :) Videoyu kesemedim Kusura bakmayın :) Bizim için önemli olan nokta 2:15. saniyeden başlıyor. Tembelliğinde bu kadarı dediğinizi duyar gibiyim :)
ANDROİD UYGULAMASI İÇERİSİNDE PAKETİ KULLANILABİLİR HALE GETİRME
Android uylamamız içerisinde SqlLite pluginini kullanabilmemiz için react-native-sqlite-storage paketini yüklememiz ve ardından Android klasörü altındaki Native dosyarı içerisinden 3 dosya üzerinde değişiklik yapmamız gerekiyor.
npm install — save react-native-sqlite-storage komutu IOS ve Android için ortak. Üst bölümdeki IOS yapılandırması sırasında proje içerisine react-native-sqlite-storage paketini yüklemiştim. Benim tekrar komutu çalıştırmama gerek yok. Siz IOS yapılandırma sürecini atlayıp buradan devam ediyorsanız çalıştırın.
Paket yükleme işleminden sonra uygulama dizininde bulunan android klasörü içerisindeki değiştirmemiz gereken 3 dosyayı aşadıdaki gibi düzenleyelim.
android/settings.gradle
android/build/build.gradle
android/src/main/java/com/uygulamaIsmi/MainApplication.java
SqlServices.js dosyasını oluşturmuştuk android içinde kodlar ios ile aynı direk olarak index.android.js dosyasını düzenliyoruz. index.ios.js dosyasıyla aynı içeriği yazıyoruz. Kodlar aşağıdaki gibi olacak.
Bu adımıda tamamladıktan sora uygulama dizini altındaki android klasörünü Android Studio ile açıyoruz. Android Studio açıldığında otomatik olarak SqlLite için gerekli olan react-native-sqlite-storage dosyarını uygulama dizinine eklemesi gerekiyor. Uygulama dizini aşağıdaki gibi gözükecek.
Artık Run butonuna tıklıyoruz ve uygulamayı simülatöre gönderiyoruz.
Herhangi bir sorun yoksa IOS bölümünde olduğu gibi Debug sayfasın consol bölümünde eklenen kayılar gösterilecek. Bu sonraki süreci IOS bölümünde ayrıntılı olarak anlattığım için geçiyorum.
GenyMotion simülatöründe Debug işlemini aktif edebileceğimiz seçmeyi içerin sayfa Command+M tuşuyla açılıyor.
Github Üzerinden projeyi indirmek için aşağıdaki linki kullanabilirsiniz.
Yararlı olması dileklerimle. İyi çalışmalar diliyorum.
