React Native Örnek Login Uygulaması #4 SON - Geçmiş, Tekrar Açınca Otomatik Giriş

react-nativereact-native-login-uygulamasıyoutube

2 yıl önce 8 yorum

Merhaba arkadaşlar kaldığımız yerden devam ediyoruz.

İş listemiz şöyle

  • Artık giriş yaptığına ve main'e ulaştığında localStorage'e gelen tocken'ı kaydedeceğiz
  • Önceden kullandığımız navigator elementi yerine router-flux kullanımını uygulayacağız.

Artık start-page.js ile kullancının giriş yapma durumuna göre yönlendirme yapmamız gerekiyor. start-page.js'e geçmeden önce kullacının giriş yapıp yapmadığını döndüren isLogin adında bir fonksiyonu ve setSessionTicket adında giriş ticket parametresini kayıt eden fonksiyonu common/index.js'e yazıyoruz. 

export async function isLogin() {
	var session = await AsyncStorage.getItem("session_ticket");
	if (session != null)
		return true;
	return false;
}

export async function setSessionTicket(ticket) { // giriş yapınca gelen değeri kayıt ediyoruz
	AsyncStorage.setItem("session_ticket", ticket);
}

async olan bir fonksiyonun içinde await kullanılabilir. Bunlar ne peki ? Javascript asenkron bir programlama dilidir. Uzun sürecek bir istekte mesela bir server request, bunu beklemez diğer satıra geçer. Burada await bize bunun bir gecikme olduğunu belirterek diğer satıra geçmemizi engelliyor. O işlem bitene kadar o satırda bekliyor.

Server bize giriş yapınca parametre gönderecek session_ticket adında. Bi ileride artık servis ile ilgili ne göndereceksek bu ticket'ı kullanacağız. Şimdi gelen ticket'ı kontrol edeceğiz ve kayıt edeceğiz. Bunu login-page.js de yapabiliriz.

/* ... login-page.js ... kısa olsun diye yorumlandı */
.then((res) => {
	if (res.session_ticket)
		setSessionTicket(String(res.session_ticket)); // burada kaydediyoruz

	if (res.result != -1)
		Actions.MainPage({type: 'reset'});
	else 
		Alert.alert("Kullanıcı doğrulanamadı");
})

/* ... */

Tamam artık start-page'de bu kontrolü yapmanın zamanı geldi. src/pages/start-page/start-page.js

import React, { Component } from 'react';

import {
	Text,
	Button,
	View,
	Navigator
} from 'react-native';

import {
	isLogin
} from '../../common/index';

export default class StartPage extends Component {
	
	constructor(props) {
		super(props);

		this.isLoginControl();
	}

	async isLoginControl() {
		var present = this;
		isLogin().then((res) => {
			if (res)
				present.props.navigator.push({ // yaptıysa main
					id: 'Main',
					name: 'Main'
				});
			else 
				present.props.navigator.push({ // yapmadıysa login
					id: 'Login',
					name: 'Login'
				});

		})
	}

	render() {
		return(
			<View
				style={{
					flex: 1,
					flexDirection: 'column',
					alignItems: 'center',
					justifyContent: 'center'
				}}>
				<Text>Yükleniyor..</Text>
			</View>
		);
	}
} 

Evet yönlendirmeler ve uygulamamız bitmiş durumda ama 2. görevimiz bitmedi.

React Native Router Flux Nedir ?

React native'de sayfalar arası geçmemizi sağlayan bir eklenti. Navigator ne güne duruyordu ? biz Router Flux kullanıyoruz. Şöyleki: Bizim uygulamamızda main'e yapılan yönlendirmede geri tuşuna basınca veya sola doğru çekince bir önceki sayfaya geri geldi. Bunu önlemek için Navigator değişkeninde oynamalar yapılarak çözüme ulaşılabilir. Ama neden daha iyi bir yapı varken onu kullanmıyoruz. Flux da yönlendirmeler kolay olduğu için onu anlatacağım. Yapmamız gereken şey npm ile kurmak. Github sayfasında yazdığı gibi. 

npm i react-native-router-flux --save

Paket kuruldu. index.ios.js de bulunan yapıyı çevirelim hemen.

/* kısa olsun diye yorumlandı */
import {Actions, Scene, Router} from 'react-native-router-flux';
/* kısa olsun diye yorumlandı */
export default class LoginApp extends Component {

	render() {
		const scenes = Actions.create(
		  <Scene key="root">
		    <Scene key="StartPage" component={StartPage}/>
		    <Scene key="LoginPage" component={LoginPage}/>
		    <Scene key="MainPage" component={MainPage}/>
		  </Scene>
		);

		return <Router scenes={scenes}/>
	}
}

AppRegistry.registerComponent('LoginApp', () => LoginApp);

Burada 3 tane sayfa tanımladık. Şimdi düzenlememiz gereken yerleri değiştirelim. start-page.js'de yapılan yönlendirmeler

/* kısa olsun diye yorumlandı */
import {Actions, Scene, Router} from 'react-native-router-flux';
/* kısa olsun diye yorumlandı */

export default class StartPage extends Component {
	
	constructor(props) {
		super(props);

		this.isLoginControl();
	}

	async isLoginControl() {
		var present = this;
		isLogin().then((res) => {
			if (res)
				Actions.MainPage({type: 'reset'}); // type reset geçmişi temizler 
			else 
				Actions.LoginPage({type: 'reset'});
		})
	}
/* kısa olsun diye yorumlandı */

login-page.js'de yapılan yönlendirmeler

/* kısa olsun diye yorumlandı */
.then((res) => {
	if (res.session_ticket)
		setSessionTicket(String(res.session_ticket));

	if (res.result != -1)
		Actions.MainPage({type: 'reset'}); // giriş yapınca yine reset yapıyor
	else 
		Alert.alert("Kullanıcı doğrulanamadı");
})
/* kısa olsun diye yorumlandı */

Evet arkadaşlar seri bitti :) Anlamadığınız noktalarda yardım isteyin kesinlikle yardım ederim. Diğer konularda görüşmek üzere iyi çalışmalar :)

Not: Bu eğitim serisinin videolarına buradaki linkten erişebilirsiniz. Projenin çalışır halini github'daki profilimde bulabilirsiniz

Yorumlar ({{totalCommentCount}})

  • ahmet özalp

    {{commentLike6Count}} beğenme 2 yıl önce

    merhaba bunun çıkışını nasıl yaparız acaba main sayfasından
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike7Count}} beğenme 2 yıl önce

    Merhaba, çıkış gerken logout diyorsanız. Main sayfasında nerede çıkış yaptırmak istiyorsanız ona bir event bağlayıp event içinde await AsyncStorage.removeItem("session_ticket"); Actions.StartPage({type: 'reset'}) yönlendirmesi yaparak start page üzerinde giriş yapmadığını anlayıp otomatik olarak login-page'e yönlendirir.
    Beğen Beğendin
  • melih

    {{commentLike113Count}} beğenme 6 ay önce

    Merhaba redux yapısı ile kullanıyorum ama sıkıntı çıkıyor müsait iseniz örnek projeyi size atayım yardımcı olur musunuz?
    Beğen Beğendin
  • Kuş Beyin

    {{commentLike114Count}} beğenme 6 ay önce

    hocam yorum yapmak zorunlu mu ? sayfanın ortasına bakmak mümkün değil, zorla buraya geliyor scroll ?
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike116Count}} beğenme 6 ay önce

    Merhaba scroll'da oluşan sorunu bugün giderdim.
    Beğen Beğendin
  • MusTafa

    {{commentLike119Count}} beğenme 4 ay önce

    Actions.Anasayfa({type: 'reset'}); butona onpress ile bu fonksiyonu verdim anasayfa açılıyor ama hemen geri kapanıyor nasıl çözerim?
    Beğen Beğendin
  • Aydın

    {{commentLike124Count}} beğenme 3 ay önce

    Merhaba, öncelikle emeğinize sağlık. Api kullandığım bir mobil uygulamam var, uygulamanın web platformu da mevcut. Firebase ile bildirim ayarlarını yaptım, kullanıcılar arasında bildirim etkileşimi olması için, kullanıcı mobilden login yapınca ona ait bir tokeni kaydedip bildirim için kullanmak istiyorum. Bunu async ile gerçekleştirebilir miyiz ya da nasıl bir yol izlemeliyiz? Teşekkürler
    Beğen Beğendin
  • Rza

    {{commentLike125Count}} beğenme 3 ay önce

    Merhaba, kodalri yazdiktan sonra bazi hatalar cikti onlari cozdum simdi bana register konutu verdikten sonra Alert kisminda <br />... yaziyor fakat ya uye oldunuz ya gecersiz eposta ve s. yazmasi ve bilgileri database ye ( phpmyadmin ) eklemesi gerek bu hatanin ne oldugunu bile tam anlayamadim neden olabilir ? PS. kodlari sizin yazdiginiz deyil kendim onlari okuyarak anlayip tam baska sekilde yazdim
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?