- 24 Nis 2021
- 43
- 0
Merhaba değerli TürkHackTeam ailesi bugün ki konumuzda ekip arkadaşım @'Rookie ile sizlere kullanıcı girişli firestore blog uygalamsının yapımını ve firebaseye eklenmesinden bahsedeceğiz
KONU BAŞLIKLARI
Ön Hazırlıklar(CanaBBis)
E-posta ile Firebase Kullanıcı Kaydı (CanaBBis)
E-posta ile Kullanıcı Girişi Yapma (CanaBBis)
Oturumu Kapatma ve NavigatorandRemoveUntil('Rookie)
Yazı Sayfasının Uygulamaya Entegre Edilmesi ('Rookie)
Ön Hazırlıklar
Her şeyden önce, bu uygulamaya başlarken; önceki konuda anlatılan Firebase bağlantı işlemlerini tamamlıyoruz. Daha sonra aşağıdaki işlemlere geçiyoruz.
Önceki konu: https://www.turkhackteam.org/diger-...ler/1981553-firebase-ile-proje-olusturma.html
firebase_auth: ^0.18.0+1
Bu satırı pubspec.yaml dosyasında dependencies altına yapıştıralım. Güncel versiyonu https://pub.dev/packages/firebase_auth/install adresinden kontrol edebilirsiniz.
Sonra Firebase'de Authentication bölümüne girip E-posta/Şifre sağlayıcısına tıklayarak etkinleştire tıklıyoruz.
Bu kodları main.dart dosyanızda kullanabilirsiniz.
Kod:
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
Future<****> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[USER=931120]Override[/USER]
Widget build(BuildContext context) {
return MaterialApp(
home: Iskele(),
);
}
}
class Iskele extends StatefulWidget {
[USER=931120]Override[/USER]
_IskeleState createState() => _IskeleState();
}
class _IskeleState extends State<Iskele> {
TextEditingController t1 = TextEditingController();
TextEditingController t2 = TextEditingController();
[USER=931120]Override[/USER]
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.all(40),
child: Center(
child: Column(
children: [
TextFormField(
controller: t1,
),
TextFormField(
controller: t2,
),
Row(
children: [
RaisedButton(child: Text("Kaydol"), onPressed: null),
RaisedButton(child: Text("Giriş Yap"), onPressed: null),
],
),
],
),
),
),
);
}
}E-posta ile Kullanıcı Kaydı Yapma
Artık aşağıdaki kodu kayıt işlemi için uygulamamızda kullanabiliriz. Bu kod e-posta ve şifre bilgisi alarak kayıt işlemini gerçekleştiriyor.
FirebaseAuth.instance.createUserWithEmailAndPassword(email: t1.text, password: t2.text);
t1.text ve t2.text uygulamamızdaki TextEditingController ile veri giriş alanlarından aldığımız değerleri temsil ediyor. Birinci veri giriş alanına e-posta adresini, ikinci veri giriş alanına da şifre yazıyoruz.
Kaydolma işlemini bir fonksiyon içerisine aşağıdaki gibi yerleştirebiliriz.
Kod:
kayitOl() {
FirebaseAuth.instance
.createUserWithEmailAndPassword(email: t1.text, password: t2.text);
}Üstteki kod kaydolma işlemini tamamlar. Ama kaydolma anında her kullanıcı için veritabanında yeni bir belge oluşturmak isteyebiliriz. Böylelikle profil sayfası oluşturmak gibi işlemleri yaparken bu belgedeki verileri kullanabiliriz. Bunun için önce Firestore'da, Kullanicilar isminde bir koleksiyon oluşturalım.
Aşağıdaki fonksiyonu aynı zamanda Future ve async olarak işaretledik. Bu sayede programımız await olarak işaretlediğimiz işlemi asenkron olarak çalıştırıp, ondan yanıt gelmesini beklerken diğer işlemlere devam edebilecek ve olası hataları da önlemiş olacağız.
Bu kodun içerisinde iki ana işlem var. Bir tanesi kullanıcı kaydı yapıyor. Kayıttan sonra .then() ifadesi ile t1.text değerini (e-posta adresini yazdığımız alan) kullanarak o isimde bir belge oluşturuyor. Belgenin içine de e-posta ve şifre bilgilerini yazıyor. İstersek kullanıcıdan daha fazla veri talep ederek bunları da belgenin içine yazabilirdik.
Kod:
Future<v o i d> kayitOl() async {
await FirebaseAuth.instance
.createUserWithEmailAndPassword(email: t1.text, password: t2.text)
.then((kullanici) {
FirebaseFirestore.instance
.collection("Kullanicilar")
.doc(t1.text)
.set({"KullaniciEposta": t1.text, "KullaniciSifre": t2.text});
});
}Kodun saf hâli:
Kod:
FirebaseAuth.instance
.createUserWithEmailAndPassword(email: '[email protected]', password: 'sifre');E-posta ile Kullanıcı Girişi Yapma
Aşağıdaki kodu kayıtlı kullanıcıların uygulamaya giriş yapabilmesi için kullanabiliriz. Bu kod e-posta ve şifre bilgisini kullanarak giriş işlemini gerçekleştiriyor.
FirebaseAuth.instance.signInWithEmailAndPassword(email: t1.text, password: t2.text);
t1.text ve t2.text uygulamamızdaki TextEditingController ile veri giriş alanlarından aldığımız değerleri temsil ediyor. Birinci veri giriş alanına e-posta adresini, ikinci veri giriş alanına da şifre yazıyoruz.
Giriş yapma işlemini bir fonksiyon içerisine aşağıdaki gibi yerleştirebiliriz.
Kod:
girisYap() {
FirebaseAuth.instance
.signInWithEmailAndPassword(email: t1.text, password: t2.text);
}Üstteki kod giriş yapma işlemini gerçekleştirir. Firebase'de kayıtlı kullanıcı için oturum açılır. Fakat oturu m açma işlemi tek başına yeterli değildir. Aynı zamanda kullanıcı başka bir sayfaya yönlendirilmelidir. Örneğin profil sayfasına. Bu durumda sayfa değiştirme kodunu kullanabiliriz.
Aşağıdaki fonksiyonu aynı zamanda Future ve async olarak işaretledik. Bu sayede programımız await olarak işaretlediğimiz işlemi asenkron olarak çalıştırıp, ondan yanıt gelmesini beklerken diğer işlemlere devam edebilecek ve olası hataları da önlemiş olacağız.
Bu kodun içerisinde iki ana işlem var. Bir tanesi oturum açma işlemi yapıyor. Oturum açıldıktan sonra .then() ifadesi ile yapılacak sonraki işlemi belirledik.
Kod:
Future<v o i d> girisYap() async {
await FirebaseAuth.instance
.signInWithEmailAndPassword(email: t1.text, password: t2.text)
.then((kullanici) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfilEkrani(),
),
);
}).whenComplete(() => print("Giriş Yapıldı"));
}Kodun saf hâli:
Kod:
FirebaseAuth.instance
.signInWithEmailAndPassword(email: '[email protected]', password: 'sifre');Oturumu Kapatma ve NavigatorandRemoveUntil
Firebase'deki kullanıcı oturumunu kapatma kodu:
Kod:
FirebaseAuth.instance.signOut();AppBar içinde, signOut() ve Navigator.pushAndRemoveUntil kullanımı:
(Navigator.pushAndRemoveUntil sayfayı değiştirir ve diğer sayfaları kaldırır)
Kod:
appBar: AppBar(
title: Text("Deneme"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.exit_to_app),
onPressed: () {
FirebaseAuth.instance.signOut().then((deger) {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => HedefSayfa()),
(Route<dynamic> route) => false);
});
}),
],
),Yazı Sayfasının Uygulamaya Entegre Edilmesi
Uygulamayı yazmaya devam ederken yazisayfasi.dart dosyanızda bu şablonu kullanabilirsiniz.
Kod:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class YaziEkrani extends StatefulWidget {
[USER=931120]Override[/USER]
_YaziEkraniState createState() => _YaziEkraniState();
}
class _YaziEkraniState extends State<YaziEkrani> {
TextEditingController t1 = TextEditingController();
TextEditingController t2 = TextEditingController();
var gelenYaziBasligi = "";
var gelenYaziIcerigi = "";
yaziEkle() {
FirebaseFirestore.instance
.collection("Yazilar")
.doc(t1.text)
.set({'baslik': t1.text, 'icerik': t2.text}).whenComplete(
() => print("Yazı eklendi"));
}
yaziGuncelle() {
FirebaseFirestore.instance
.collection("Yazilar")
.doc(t1.text)
.update({'baslik': t1.text, 'icerik': t2.text}).whenComplete(
() => print("Yazı güncellendi"));
}
yaziSil() {
FirebaseFirestore.instance.collection("Yazilar").doc(t1.text).delete();
}
yaziGetir() {
FirebaseFirestore.instance
.collection("Yazilar")
.doc(t1.text)
.get()
.then((gelenVeri) {
setState(() {
gelenYaziBasligi = gelenVeri.data()['baslik'];
gelenYaziIcerigi = gelenVeri.data()['icerik'];
});
});
}
[USER=931120]Override[/USER]
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Yazı Ekranı"),
),
body: Container(
margin: EdgeInsets.all(40),
child: Center(
child: Column(
children: [
TextField(
controller: t1,
),
TextField(
controller: t2,
),
Row(
children: [
RaisedButton(child: Text("Ekle"), onPressed: yaziEkle),
RaisedButton(child: Text("Günclle"), onPressed: yaziGuncelle),
RaisedButton(child: Text("Sil"), onPressed: yaziSil),
RaisedButton(child: Text("Getir"), onPressed: yaziGetir),
],
),
ListTile(
title: Text(gelenYaziBasligi),
subtitle: Text(gelenYaziIcerigi),
),
],
),
),
),
);
}
}Bir konunun daha sonuna geldik bir sonraki konuda görüşmek üzere
