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

react-nativereact-native-login-uygulamasıyoutube

7 yıl önce 7 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 7 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 7 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 7 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 7 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
  • yns

    {{commentLike111Count}} beğenme 5 yıl önce

    Hocam, makale için teşekkürler. Elinize emeğinize sağlık. Hocam ip adresini verip fetch işlemi yaptığımda bir türlü aşamadığım bir hata var. Ne yaptım, ettim bir türlü çözülmedi. Android emulatorden sürekli aşağıdaki hatayı almaktayım. Yardımcı olabilirseniz minnettar kalırım. (NOT: Fetch url kısmında .NET Web API' de hazırladığım methodu çağırıyorum. Örn: 192.168.1.17/api/test/get) ALDIĞIM HATA: [Unhandled promise rejection: SyntaxError: JSON Parse error: Unrecognized token '<'] Stack trace: node_modulespromisesetimmediatecore.js:37:14 in tryCallOne node_modulespromisesetimmediatecore.js:123:25 in <unknown> node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:152:14 in _callTimer node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:200:17 in _callImmediatesPass node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:464:30 in callImmediates node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:320:6 in __callImmediates node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:135:6 in <unknown> node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:297:10 in __guard node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:134:17 in flushedQueue
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike112Count}} beğenme 5 yıl önce

    Merhaba isteği attığınız API'den json olmayan bir değer geliyor olabilir. react-native-debugger kullanarak attığınız istekleri Network sekmesinden takip edebilirsiniz. API'yi react-native kullanmadan test etmek için "Postman" kullanabilirsiniz.
    Beğen Beğendin
  • can

    {{commentLike115Count}} beğenme 5 yıl önce

    güzel bir kaynak olmuş teşekkürler.
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

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