React Native Örnek Login Uygulaması #3 - Ajax kullanımı, İstekler ve Uyarılar

react-nativereact-native-login-uygulamasıyoutube

2 yıl önce 4 yorum

Merhaba, bu bölümde sunucuya istek atıp o istek doğrultusunda kullanıcı adı doğru mu ? yanlış mı ? hesaplayarak kullanıcıya Alert vermek.

İş listemiz şöyle:

  • common'a servis isteğini kolaylaştırmak için bir fonksiyon yazacağız
  • Login'de giriş butonuna tıkladığı anda text'lerden değerleri alarak o değerlere göre servis isteği atacak
  • gelen değerin sonucuna bakarak giriş yapıp yapmadığını bildirecek

Öncelikle ben php ile bir api yazmakla başlıyorum. Daha önce bir makalede bundan bahsetmiştim aynı dosya, değişen birşey yok yinede yazayım. localhost/index.php

<?php
    // kendi domainim dısındaki scriptlere izin veriyorum
	if (isset($_SERVER['HTTP_ORIGIN'])) {
		header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
		header('Access-Control-Allow-Credentials: true');
		header('Access-Control-Max-Age: 86400');
	} 

	if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

		if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
			header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 

		if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
			header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
	
		exit(0);
	}
	if (isset($_POST["userName"]) && isset($_POST["userPassword"]) ) {
		if ($_POST["userName"] == "root" && $_POST["userPassword"] == "1234") { // şifre kontrolü
			echo json_encode(["result" => 1]);
			die();
		}
	}
	// şifre hatalıysa zaten buraya gelir
	echo json_encode(["result" => -1]);
?>

Bu api bize userName ve userPassword parametrelerine bakarak result değerini 1 ise giriş başarılı -1 ise hata veya başarısız olarak dönderiyor.

Bizde bu değere bakarak işlem yapacağız. Öncelikle login-page.js de bulunan goLogin fonksiyonunu react native dokümanında bulunan fetch fonksiyonu ile çalışacak bir hale getirmemiz gerekiyor

// giriş isteği atacağımız ve yükleceğimiz fonksiyon
goLogin() {
	fetch('http:/192.168.1.100/index.php') // kendi bilgisayarımın ip'si sizinki farklı olabilir
    .then((res) => res.json()) // gelen datayı parse ediyoruz
    .then((res) => {
    	Alert.alert("data", JSON.stringify(res)); // burada ise yazdırıyoruz
    })
    .catch((error) => {
		Alert.alert("data", "Sunucuya bağlanırken bir hata oluştu");
    });
}

Şu anda bir parametre göndermiyorum sadece çalıştığını görmek için fonksiyonu yazdım. Şimdi ise değerleri göndermem için kullanmam gereken serialize fonksiyonu gerekli, ismi serializeKey bu fonksiyonu src/common/index.js e yazmam gerekiyor.

export function serializeKey(data) {
	var formBody = [];
	for (var property in data) {
	  var encodedKey = encodeURIComponent(property);
	  var encodedValue = encodeURIComponent(data[property]);
	  formBody.push(encodedKey + "=" + encodedValue);
	}
	formBody = formBody.join("&");
	return formBody;
}

İçindeki değerleri almam gereken TextInput'lara state ile erişim sağlamam gerekiyor onlarda şöyle oluyor

<TextInput
	placeholder="Kullanıcı adı"
	value={this.state.userName}
	onChangeText={(value) => this.setState({userName: value})}/>

<TextInput
	placeholder="Şifre"
	value={this.state.userPassword}
	onChangeText={(value) => this.setState({userPassword: value})}/>

Tabi state'i constructorda (değişkenlerin başlangıç değerlerini) tanımlamam gerekir. Bu işlemler gerçekleştiğinde ise Alert ile giriş başarılı olup olmadığını belirtmem gerekiyor. Yani alert'i de tahil edeceğim kısacası login-page.js

import React, { Component } from 'react';

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

import {
	serializeKey
} from '../../common/index'; // common'a yazdığımız fonksiyon

export default class LoginPage extends Component {

	constructor(props) {
		super(props); // super arguman geçmenizi sağlar eğer constructor kullanmak isterseniz kullanmak zorunlu oluyor.

		this.state = { // burası bind da kullandığım değerler
			userName: '',
			userPassword: ''
		};
	}

	// giriş isteği atacağımız ve yükleceğimiz fonksiyon
	goLogin() {
		var name = this.state.userName;
		var pass = this.state.userPassword;
		var present = this;

		// react native ajax komutu
		fetch('http:/192.168.1.100/index.php', { // extralar
			method: 'POST',
			headers: {
			    'Content-Type': 'application/x-www-form-urlencoded',
			},
			body: serializeKey({ // değerleri serialize ediyoruz
				userName: name,
				userPassword: pass
			})
		})
	    .then((res) => res.json()) // gelen datayı parse ediyoruz
	    .then((res) => {
	    	if (res.result != -1)
	    		present.props.navigator.push({
	    			id: 'Main',
					name: 'Main'
	    		})
	    	else
	    		Alert.alert("Kullanıcı doğrulanamadı");
	    })
	    .catch((error) => {
			Alert.alert("data", "Sunucuya bağlanırken bir hata oluştu" + error);
	    });
	}

	render() {
		return (
			<View
				style={{
					flex: 1,
					flexDirection: 'column',
			        justifyContent: 'center',
			        padding: 15
				}}>
				<View>
					<TextInput
						style={{
							height: 50
						}}
						value={this.state.userName}
						onChangeText={(value) => this.setState({userName: value})}
						placeholder="Kullanıcı adı"/>
				</View>
				<View>
					<TextInput
						style={{
							height: 50
						}}
						onChangeText={(value) => this.setState({userPassword: value})}
						value={this.state.userPassword}
						placeholder="Şifre"/>
				</View>
				<View
					style={{
						height: 50
					}}>
					<Button
					  	title="Giriş" // butonun yazısı
					  	color="#4285f4" // arkaplan rengi
					  	onPress={this.goLogin.bind(this)} /* butona tıklandığında tetiklenecek fonksiyon*/ />
				</View>
			</View>
		);
	}
}

Gerekli açıklamaları yaptım, eğer eksik bıraktığım bir konu olursa cevaplayın makaleye eklerim. Bugünkü konu bu kadardı. İyi çalışmalar.

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

Yorumlar ({{totalCommentCount}})

  • Gürhan ÇOBAN

    {{commentLike9Count}} beğenme 1 yıl önce

    Yaptığınız uygulama şimdiye kadar Türkçe olarak gördüğü en iyi uygulama. Emeğiniz için teşekkürler. burada (res.result != -1) şöyle bir ifade kullanmışsınız. php dosyanıza baktığımda json olarak tek değer göndermişsiniz. ben array("baslik" => "Onay"); bu şekilde gönderdiğimde sıkıntı çıkmazken, array("baslik" => "Onay", "id" => $sonuc->id, "email" => $sonuc->email, "name" => $sonuc->name, "dogru_sayisi" => $sonuc->dogru_sayisi, "yanlis_sayisi" => $sonuc->yanlis_sayisi, "kazanilan_oyun" => $sonuc->kazanilan_oyun, "kaybedilen_oyun" => $sonuc->kaybedilen_oyun ); bu şekilde bir json gönderdiğimde hata veriyor. jsonParseEror:Unexpected EOF şeklinde. hatam nerede acaba.
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike10Count}} beğenme 1 yıl önce

    İltifatınız için teşekkür ederim :) EOF hatası end of file anlamına geliyor ama json ile ne alakası var onu anlamadım. http://stackoverflow.com/questions/11482527/parse-error-syntax-error-unexpected-end-of-file-in-my-php-code buradaki sorun ile karşılaşıyor olabilirsiniz. Daha verimli bir şekilde soru sormak için https://github.com/abdurrahmanekr/bana-istedigini-sor/issues buraya bir issue açın
    Beğen Beğendin
  • Ebru

    {{commentLike27Count}} beğenme 1 yıl önce

    iyi günler notlarınız için teşekkür ederim kendim adına çok yararlı bir kaynak oluşturmuşsunuz. Ben yaptığınız uygulamayı yapmaya çalışıyorum adımlarınızı tekrarladım fakat bana Syntax error: JSON Parse error:Unexpected EQF döndürüyor direk catch kısmına düşüyor sorunumun ne olduğunu bulamadım.
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike28Count}} beğenme 1 yıl önce

    Merhaba, sorun sanırsam php tarafında çıkıyor. İlk yorumdaki gibi bir sorun yaşıyor olabilirsiniz. Çözümü buradaydı https://github.com/abdurrahmanekr/bana-istedigini-sor/issues/7 . Eğer sizin sorununuzu çözmediyse tekrar bir issue açın size yardımcı olayım.
    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 ?