React Native ile Mobil Uygulama Geliştirme – 9 – React Native’de Redux Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 9. kısmıdır. Bir önceki makalede (Part 8), React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızıanlattım.

React Native’de Redux Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Redux’la kullanacağımız bazı nesneler ya da kavramlar var. Öncelikle onlardan kısaca bahsetmek gerekebilir. Mantığını anlayabilmemiz için ihtiyacımız olan üç ana kavram; “store”, “reducer” ve “action” diyebiliriz.

store: Redux kütüphanesiyle birlikte yaratacağımız verilerin tutulacağı alan diyebiliriz. Uygulamamızda tek bir adet “store”umuz olacak ve state’lerimizi bu store’un içinde depolayacağız.

reducer: Action’dan gelen verileri süzgeçleyip store’da belirtilen veriyi güncellememizi sağlayan bir araç.

action: Reducer’lara ulaşarak onları tetikleyen, store’daki güncellemesi gereken veriyi yollan bir araç. Neyi güncellemesi gerektiğini adlandırırken “type” ile belirtmemiz gerekirken, değiştirmesi gereken veriyi payload’larla taşır.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Redux, JavaScript uygulamaları için öngörülebilir bir state konteynirdir. Redux sizin için yeniyse, Redux ile ilgili bu yazımızı okumanızı öneririm.

Bu makalede, bir React Native uygulamasında Redux kullanarak kullanıcı verilerini nasıl saklayacağınızı öğreneceksiniz. Uygulama, bir dizi bağlı arkadaşın görüntülendiği bir HomeScreen ve eklenecek potansiyel arkadaşların bir listesini görüntüleyen bir FriendsScreen’e sahip sahte bir sosyal ağdır. Durumu iki ekran arasında paylaşmak için Redux kullanacaksınız.

İlk önce MySocialNetwork adında bir React Native Mobil proje oluşturalım ve konsolda proje dizinine gidelim. Ardından, projede redux ve react-redux kitaplıklarını kurun:

cd MySocialNetwork
npm install
npm install redux@4.0.5 react-redux@7.2.1

Projeniz şimdi kuruldu ve bağımlılıklarınız kuruldu. Projenin kök dizininde FriendsReducer.js isimli bir dosya oluşturalım ve aşağıdaki kodları yazalım.

import { combineReducers } from 'redux';

const INITIAL_STATE = {
  current: [],
  possible: [
    'Alice',
    'Bob',
    'Sammy',
  ],
};

const friendsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    default:
      return state
  }
};

export default combineReducers({
  friends: friendsReducer
});

Bu dosyada, sosyal ağınıza eklemek için olası arkadaşlarınızla bir INITIAL_STATE değişkeni oluşturursunuz. Ardından, friendsReducer’ı arkadaşlar adlı bir özellik olarak dışa aktarıyorsunuz.

Actions, uygulamanızdan Redux deposuna veri gönderen bilgi yüklerini temsil eden JavaScript nesneleridir.

Actions bir türü ve isteğe bağlı bir yükü vardır. Bu örnek, tür ADD_FRIEND olacak ve yük, mevcut arkadaşlar dizisine eklediğiniz bir arkadaşın dizi dizini olacaktır.

FriendsActions.js dosyasını projenin kök düzeyinde oluşturun:

export const addFriend = friendsIndex => (
  {
    type: 'ADD_FRIEND',
    payload: friendsIndex,
  }
);

Bir kullanıcı bir arkadaşa tıkladığında, bu kod friends.possible dizisinden friendsIndex’i alır. Şimdi bu arkadaşı friends.current dizisine taşımak için bu indeksi kullanmanız gerekecek.

FriendsReducer.js: dosyasına geri dönelim.

// ...

const friendsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'ADD_FRIEND':
      // Pulls current and possible out of previous state
      // We do not want to alter state directly in case
      // another action is altering it at the same time
      const {
        current,
        possible,
      } = state;

      // Pull friend out of friends.possible
      // Note that action.payload === friendIndex
      const addedFriend = possible.splice(action.payload, 1);

      // And put friend in friends.current
      current.push(addedFriend);

      // Finally, update the redux state
      const newState = { current, possible };

      return newState;

    default:
      return state
  }
};

// ...

Bu kod, mevcut ve olası arkadaşları önceki durumdan çıkarır. Array.splice(), arkadaşı olası arkadaşlar dizisinden alır. Array.push, arkadaşı mevcut arkadaş dizisine ekler. Değişiklikler yapıldıktan sonra durum güncellenir.

Artık bir reducer and ve bir action’imiz var. Reducer’u uygulamanıza uygulamanız gerekecek.

React Redux’ün Sağlayıcı bileşenini kullanarak uygulamanızın arkadaş durumunu sağlamanız gerekecektir.

App.js’yi açın:

ProvidercreateStore, ve friendsReducer import edin.

import 'react-native-gesture-handler';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import friendsReducer from './FriendsReducer';
import HomeScreen from './HomeScreen';
import FriendsScreen from './FriendsScreen';

// ...
// ...

const store = createStore(friendsReducer);

class App extends React.Component {
  // ...

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeScreen}
            />
            <Stack.Screen
              name="Friends"
              component={FriendsScreen}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    )
  }
}

Artık arkadaşlarınıza uygulamanızdan erişilebilir, ancak onları yine de Ana Ekrana (HomeScreen) ve Arkadaşlar Ekranına (FriendsScreen) eklemeniz gerekir.

Bu adımda, mapStateToProps işlevi ile arkadaşlarınızı ekranlarınız için erişilebilir hale getireceksiniz. Bu işlev, FriendsReducer’daki durumu iki ekrandaki sahne öğelerine eşler.

HomeScreen.js ile başlayalım. HomeScreen.js dosyasını açın:

import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Button } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const mapStateToProps = (state) => {
  const { friends } = state
  return { friends }
};

export default connect(mapStateToProps)(HomeScreen);

Bu kod değişikliği, react-redux ekler ve arkadaşları HomeScreen’de kullanılabilir hale getirir.

Ardından, mevcut arkadaşlar için değerler ekleyin (this.props.friends.current):

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have { this.props.friends.current.length } friends.</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}

Ana Ekranınız şimdi mevcut arkadaşların sayısını gösterecektir. Artık FriendsScreen’e geçebilirsiniz.

FriendsScreen.js’yi açın:

import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Button } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const mapStateToProps = (state) => {
  const { friends } = state
  return { friends }
};

export default connect(mapStateToProps)(FriendsScreen);

Bu kod değişikliği, react-redux ekler ve arkadaşları FriendsScreen’de kullanılabilir hale getirir.

Olası arkadaşlar için değerler ekleyin (props.friends.possible):

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        {
          this.props.friends.possible.map((friend, index) => (
            <Button
              key={ friend }
              title={ `Add ${ friend }` }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

Artık Arkadaşlar Ekranına gittiğinizde, indirgeyiciden tüm olası arkadaşları göreceksiniz.
Son olarak, yeni Redux Arkadaş Ekle seçeneğini FriendsScreen.js’ye ekleyin:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { StyleSheet, Text, View, Button } from 'react-native';
import { addFriend } from './FriendsActions';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        {
          this.props.friends.possible.map((friend, index) => (
            <Button
              key={ friend }
              title={ `Add ${ friend }` }
              onPress={() =>
                this.props.addFriend(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

// ...

const mapDispatchToProps = dispatch => (
  bindActionCreators({
    addFriend,
  }, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(FriendsScreen);

Sosyal ağa iki arkadaş ekleyelim ve kullanıcının mevcut kaç arkadaşı olduğunu görmek için HomeScreen’e geri dönelim:

Bununla birlikte, tüm mantığı App.js’den Redux’a taşıdınız, bu da uygulamanızı özellikle kimlik doğrulama ve veritabanı entegrasyonu gibi daha fazla sayfa ve özellik ekledikçe çok daha esnek hale getiriyor.

Tamamlamadan önce kodu temizleyelim.

Artık Redux kullandığınıza göre, App.js’den geçtiğiniz desteğe artık ihtiyacınız olmayacak.

Eylem türlerinizi ayrı bir dosyada saklayarak temizliği bir adım daha ileri götürebilirsiniz.

‘ADD_FRIEND’ dizesini iki yerde kullanıyorsunuz: eylemde ve arkadaş azaltıcıda. Bu tehlikelidir, çünkü dizeyi bir yerde değiştirirseniz diğerinde değiştirmezseniz başvurunuzu bozabilirsiniz. Uygulamanız büyüdükçe, tüm bu işlem türlerini types.js adlı bir dosyada tutmak mantıklı hale gelir.

Types.js dosyasını kök seviyesinde oluşturun:

export const ADD_FRIEND = 'ADD_FRIEND';

Ardından, yeni ADD_FRIEND’yi kullanmak için FriendsActions.js’yi yeniden düzenleyelim.

import { ADD_FRIEND } from './types';

export const addFriend = friendsIndex => (
  {
    type: ADD_FRIEND,
    payload: friendsIndex,
  }
);

FriendsReducer.js dosyasındaki “ADD_FRIEND” değişkenini ADD_FRIEND değişkenine değiştirin:

import { combineReducers } from 'redux';
import { ADD_FRIEND } from './types';

// ...

const friendsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ADD_FRIEND:
      // ...

    default:
      return state;
  }
};

Bu, uygulamayı daha az kırılgan hale getirir. Uygulamalarınızı geliştirirken, kodu birleştirmek ve kendinizi tekrar etmekten kaçınmak için fırsatların farkında olmalısınız.

Bu öğreticide, reduxreducersactions,ve ölçeklenebilir veri yönetimini (scalable data management) ele aldınız.

Verileri bir veritabanıyla senkronize tutmaktan, kimlik doğrulamasına ve kullanıcı izinlerini takip etmeye kadar Redux ile yapabileceğiniz çok daha fazla şey var.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak: https://www.digitalocean.com/community/tutorials/react-react-native-redux

Database Inspector

Yazılım projeleri oluştururken hazırladığımız veritabanı yapılarını, bir arayüz alanı üzerinden incelemek, değişiklik yapmak her zaman işimizi kolaylaştırır. Android uygulama geliştirme sürecinde yakın zamana kadar local veritabanı üzerinde değişiklikler yapmak, biz geliştiriciler için hayli zordu.

Bu makalemde Android Studio 4.1 ile gelen Database Inspector özelliği sayesinde projelerinizde SQLite veya Room ile oluşan veritabanlarında nasıl kolay bir şekilde sorgular çalıştıracağınızı ve incelemeler yapacağınızı göstereceğim.

İsterseniz makalede kullanacağım Lesson Notes uygulamasını github‘ dan indirip, benim örneklerimi pratik yapabilirsiniz.

Database Inspector Kullanımı

İlk öncelikle Android Studio sürümünüzü 4.1 şeklinde güncellemeniz gerekmektedir.

Android  Studio menüsünde View > Tool Windows > Database Inspector yolunu izleyerek, Database Inspector özelliğini açabilirsiniz.

Database Inspector özelliğini kullanabilmek için test ortamınızın API level 26 veya 26’dan büyük olmalıdır.

Özelliği aktif ettiğim örnek görünüm;

Test cihazınızda daha önceki projelerinizde oluşturduğunuz veritabanları olabilir. Sizin projenize ait veritabanına ulaşmak için Şekil-1 belirttiğim ilgili yerden, projenizin paketini seçmelisiniz.

Şekil-1

Database Inspector Sorgu Çalıştırma

Room kütüphanesi ile veritabanı oluşturduysanız, @Query etiketi içinde olan sorguları hızlıca çalıştırma ve sonucunun gösterilmesi sağlanmaktadır. Klasik SQLite yapısında da benzeri yapı bulunmaktadır. Fakat bu kullanımda, koddaki sorguları çalıştırmak her zaman mümkün olmayabiliyor.

İki farklı şekilde sql sorgularınızı çalıştırabilirsiniz

1- @Query etiketin sol tarafındaki  arama simgesine tıkladığınızda, kodda bulunan sorgu çalışır. Örneğin, id değeri “4463f016-350d-441f-b2a4-26c6b1dba973” olan notu listeleyelim.

 

2- Database Inspector arayüzünde sorgu yazma alanını açarak da sql çalıştırabilirsiniz. Örneğin, bir tane ders notunu veritabanına ekleyip, sonrasında bu kaydı select sql listeleyelim.

 

Veritabanında Kolay Veri Değişikliği Nasıl Sağlanır

Database Inspector kullanarak, çalışan uygulamanın veritabanındaki verileri anlık hızlı bir şekilde değiştirme imkanımız bulunmaktadır.

 

Diğer özellik ise uygulamada verilerle ilgili yapılan  değişiklikleri, anında canlı bir şekilde veritabanında görme imkanımız bulunmaktadır. Bu özelliği kullanabilmek için ilgili tablomuzu açtıktan sonra Live updates checbox seçmeliyiz. Aşağıdaki örnek resimde, “service” notunu eklediğimde otomatik olarak tabloda kayıt olduğunu göreceksiniz.

 

Kaynak

1-https://medium.com/androiddevelopers/database-inspector-9e91aa265316

2- https://developer.android.com/studio/inspect/database