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