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.
Ö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
Düşündüklerin nedir ?
Yorumlar ({{totalCommentCount}})
{{commentLike9Count}} beğenme 7 yıl önce
{{commentLike10Count}} beğenme 7 yıl önce
{{commentLike27Count}} beğenme 7 yıl önce
{{commentLike28Count}} beğenme 7 yıl önce
{{commentLike111Count}} beğenme 5 yıl önce
{{commentLike112Count}} beğenme 5 yıl önce
{{commentLike115Count}} beğenme 5 yıl önce