- 24 Nis 2021
- 43
- 0
Merhaba değerli TürkHackTeam ailesi bugün ki konumda sizlere Firebas ile Proje oluşturmayı ve projelerimizi nasıl Firebas'a aktaracağımızdan bahsedeceğim.
KONU BAŞLIKLARI
- Firebase'de Proje Oluşturmak
- Firebase Projesine Flutter Uygulaması Eklemek
- Firebase'de Veritabanı Oluşturmak
- Firebase Güncellemesi ile Ek işlemler
- Firestore Veri Eklemek
- Firestore Veri Güncelleme
- Firestore Veri Silme
- Firestoreden Veri Alma ve Gösterme
Firebase'de Proje Oluşturmak
firebase.google.com'a giriş yapın. Google hesabınızla oturum açın. "Go to console" butonuna tıklayarak konsola geçin.
Proje oluştura tıklayın.
Projeye bir isim verin, herhangi bir isim olabilir. Sonra "Devam" butonuna basın.
Yeni gelen ekranla Google Analytics'i etkinleştiriyoruz. Zaten biz kapatmazsak varsayılan olarak etkin. Sonra devam ediyoruz.
Şartları kabul ettiğimizi belirten seçenekleri işaretliyoruz ve Proje oluştur'a tıklıyoruz.
Projemiz oluşturulurken aşağıdaki bekleme ekranına yönlendiriliyoruz.
Projemiz oluşturuldu. Devam butonuna tıklıyoruz.
Firebase projemizi oluşturduk. Bizi, projemizi yöneteceğimiz böyle bir sayfa karşılıyor.Bundan sonra projemizi nasıl ekleyeceğimizi göreceğiz
Firebase Projesine Flutter Uygulaması Eklemek
Mevcut Flutter uygulamanızı da Firebase'e ekleyebilirsiniz. Ben bu proje için yeni bir Flutter uygulaması oluşturdum. İsmini firebasetemelblog koydum. Şimdi proje dosyalarımız içinde arama yaparak aşağıdakine benzeyen bir paket adı bulmanız gerekiyor. Bu paket adı uygulama dosyalarının içinde birkaç yerde yazıyor. AndroidManifest.xml içerisinde bulabilirsiniz mesela. Ya da direkt arama sekmesine com.example yazarak arama yapabilirsiniz.
İşte benim uygulamamın paket adı bu. Bu paket adını seçip kopyalıyorum.
com.example.firebasetemelblog
Daha sonra Firebase projemizin ana yönetim sayfasına gidiyoruz ve projeye yeni bir Flutter uygulaması eklemek için resimdeki gibi Android ikonuna tıklıyoruz.
Böyle bir sayfa açılıyor. Burada bizden paket adını isteyen kısma, kopyaladığımız paket adını yapıştırıyoruz. Diğer kısımlar isteğe bağlı, onları şimdilik boş bırakarak "Uygulamayı kaydet" diyoruz.
Sonra google-services.json dosyasını indiriyoruz. Burada dikkatli olun, eğer bu dosyadan daha önce indirdiyseniz bilgisayarınız dosya adının sonuna numara koyabilir. Bu durumda dosya adını tekrar google-services.json olarak değiştirmeniz gerekir.
İndirdiğimiz bu dosyayı Flutter uygulamamızın klasörleri içindeki android klasörünün içindeki app klasörüne koymamız gerekiyor.
Bunu yaptıktan sonra tekrar Firebase'e dönüp "Sonraki" butonuna tıklıyoruz. Aşağıda verilen kod satırlarını Flutter uygulamamızda ilgili yerlere yapıştırmamız gerekiyor.
Bunlardan bazıları zaten önceden Flutter uygulamamız oluşturulurken otomatik olarak eklenmişler ama yine de hepsini kontrol etmemiz ve eksik olanları tamamlamamız gerekiyor.
Bizden öncelikle proje düzeyindeki build.gradle dosyasını açmamızı istiyor. Burada dikkat ediniz, iki tane build.gradle dosyamız var. Proje düzeyi dediği için, android klasörünün içindeki build.gradle dosyasına girmeliyiz.
İlgili yapıların içinde belirtilen yerlerde google() satırları zaten var. Sizde de var mı kontrol edin.
Ama dependencies altında bu satır yok:
classpath 'com.google.gms:google-services:4.3.3'
Söz konusu satır ekledikten sonra talimatları okumaya devam edelim.
Burada bu kez uygulama düzeyindeki build.gradle dosyasını açmamızı ve ilgili satırları yapıştırmamızı istiyor. Uygulama düzeyi dediği için android klasörünün içindeki app klasöründe yer alan build.gradle dosyasını açıyorum. Yani google-services.json dosyasını koyduğumuz klasördeki build.gradle
Bu üç satırı belirtilen yerlere yapıştırıyorum:
apply plugin: 'com.android.application' (zaten bende vardı bu yüzden yapıştırmadım)
apply plugin: 'com.google.gms.google-services'
ve de dependencies'in altına;
implementation 'com.google.firebase:firebase-analytics:17.2.2'
Bunları yaptıktan sonra tekrar Firebase'e dönüp ilerle butonuna basıyorum. Yeni gelen aşağıdaki ekran ile Flutter uygulamamız ve Firebase arasındaki bağlantı test edilecek. Bu yüzden benden, kullandığım kod editörü üzerinden Flutter uygulamamı çalıştırmamı istiyor.
Kullandığım VSCode editörüne dönerek Başlat butonu ile ya da Run/Start Debugging (Run Without Debugging'de kullanabilirsiniz) diyerek uygulamayı android emülatöründe başlatıyorum.
Bu arada aşağıdaki gibi bir hata alıyorum.
Kod:
Error: ADB exited with exit code 1
Performing Streamed Install adb: failed to install
Error launching application on Android SDK built for x86.
Benim aldığım hata emülatörün hafızasının dolmasından kaynaklıymış. Ufak bir google araması ile sorunu öğrenmiş oldum.
Uygulamanızı ilk kez Firebase'e bağlamaya çalışırken hata almanız normal. Siz de çeşitli hatalar alacaksınızdır. Tek yapmanız gereken hatayı okumak ve çözmeye çalışmak. Anlamadıysanız hatayı kopyalayıp google'da arayın. Muhtemelen aynı hata defalarca kez başkaları tarafından alınmıştır ve önerilen çözümleri gözden geçirip size uyanı uygulamanız durumunda sorun çözülecektir.
Hatalarla karşılaşmak ve onları çözmeye çalışmak bazen sinir bozucu olabiliyor. Bu hataların önemli bir kısmı sürüm değişikliklerinden kaynaklanmakta. Ama endişelenmeyin, bazen çözümü bulmak uzun sürse de en sonunda sorunu halledeceksiniz. Çok zorlandığınızda ve uyguladığınız çözümler işe yaramadığında aldığınız hataları buraya yazın.
Sonunda uygulamam emülatör üzerinde çalışmaya başladıktan sonra Firebase üzerinde aşağıdaki mesajı alıyoruz. Bu mesaj, uygulama ile Firebase arasında bağlantı kurulduğunu bize müjdeliyor.
Firebase'de Veritabanı Oluşturmak
Sol taraftan Database sekmesini açıp Cloud Firestore altında Veritabanı oluştur butonuna tıklayalım.
Üretim modunda güvenliği sağlamak için kurallar yazmamız gerektiği için biz şimdilik "Test modunda başla" seçeneğini seçip sonraki butonuna basalım.
Verilerimizin depolanacağı konumu seçmemizi istiyor, burada eur3 seçtim ama varsayılan konumla da devam edebilirsiniz. Bitti'yi tıklıyoruz.
Veritabanımızı hazırlanıyor...
Koleksiyonu başlat, diyoruz. Koleksiyon dediğimiz şeyi tüm verilerimizi içinde tutacağımız bir klasör gibi düşünebilirsiniz. Önce klasörü oluşturacağız sonra içine belgeler koyacağız.
Koleksiyonumuza bir isim verelim. Sıradaki uygulamamız bir Firebase temel blog uygulaması olacağı için bu koleksiyonumuza Yazilar ismini veriyorum.
Şimdi ilk belgemizi oluşturmamızı istiyor. Biz Flutter uygulamamızı yaptığımızda belgelerimizi uygulama üzerinden otomatik oluşturacağız fakat şimdi bir ilk belge oluşturma zorunluluğumuz var. O yüzden "Otomatik kimlik" butonuna basıyorum.
Burada Map yapısına benzeyen bir yapı ile karşılaşıyoruz. Firestore'da verilerimiz Map yapısında olduğu gibi bir anahtar/değer çifti ile tutuluyor. Bu yüzden Firebase'e veri gönderirken Map yapısından sıklıkla faydalanacağız. Alan/Değer yazan yerlere şimdilik anahtar1/değer1 gibi değerler verdim. Kaydet diyoruz.
Artık belgemiz Yazilar koleksiyonun içine eklendi ve belgenin içinde üç çift veri alanı var.
Şimdi Belge ekle diyerek yeni bir belge daha oluşturalım.
Belgenin ismini yazi1 koydum. baslik ve icerik adında da iki alan ekledim. Değer yazan yerlere de sırası ile yazımızın başlığını ve de yazının içeriğini temsil eden birkaç kelime yazdım. Böylece ilk blog yazımızı el ile eklemiş olduk. Bundan sonraki blog yazılarımızı Flutter uygulamamızdaki veri giriş alanlarını kullanarak ekleyeceğiz.
Veritabanımızın son hâli.
Şimdi son olarak Firestore işlemlerini Flutter uygulamamız üzerinden yapabilmek için Cloud Firestore paketini yükleyelim. Önce Flutter uygulamamızı açalım, pubspec.yaml dosyasına girelim.
dependencies'in altına aşağıdaki satırı yapıştıralım ve get packages ikonuna tıklayalım. Artık cloud_firestore paketimizi uygulamamıza dahil etmiş olduk.
cloud_firestore: ^0.14.0
bazen bu paketin en güncel versiyonunu yüklemek gerekebilir. Bu yüzden son versiyonu bu adresten kontrol edebilirsiniz: https://pub.dev/packages/cloud_firestore/instal
Firebase Güncellenmesi ile Ek İşlemler
Firebase güncellemesi sonrası kodlarımızın çalışabilmesi için projemize aşağıdaki eklemeleri yapacağız.
1)Aşağıda ki adresten firebase_core paketinin son sürümünü öğreniyoruz. Şu an son sürüm 0.5.0
https://pub.dev/packages/firebase_core/install
firebase_core: ^0.5.0 satırını pubspec.yaml dosyasında dependencies'ın altına yapıştırıyoruz
2)build.gradle içindeki minSdkVersion'u yükseltip 21 yapalım. Daha önce 16 yazan yeri silip 21 yazdım. Arama kısmına minsdkversion yazarsanız bu kısma kolayca ulaşabilirsiniz.
3) Daha sonra main.dart dosyamıza dönelim.
Dosyanın başına
Kod:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
v o i d main() => runApp(MyApp()); satırını silip yerine aşağıdaki kodu yazalım. Yani main bloğunu Future ve async olarak işaretleyip, içerisine de iki satır kod eklemiş olduk.
Kod:
Future<****> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
Kodların son hâli aşağıdaki şekilde olacak.
Firestore Veri Eklemek
Firestore veritabanımıza veri eklemek için aşağıdaki kod parçasını kullanacağız. Kodların açıklamaları kod parçasının altındadır.
Kod:
FirebaseFirestore.instance
.collection('Yazilar')
.doc(t1.text)
.set({'baslik': t1.text, 'icerik': t2.text});
* Firestore.instance yapısı ile bir şablon oluşturuyoruz. Böylece hangi koleksiyon ve hangi belge üzerinde çalışmak istediğimizi belirtiyoruz.
t1.text ve t2.text bizim Flutter uygulamamızdaki TextField'lardan alacağımız verileri tutan TextEditingController nesnelerinden gelen değerler.
* set() yapısı ile baslik ve icerik ismini verdiğimiz alanlara veri yazıyoruz. set içerisine süslü parantez açarak bir map yapısı yerleştirdik.
Bu kod ile Yazilar koleksiyonuna t1.text isimli bir belge eklenecek ve belgenin içeriğinde baslik ve icerik isminde iki alan oluşacak. Bu alanlara da t1'den ve t2'den gelen veriler yazılacak. Eğer veritabanında t1.text isimli bir belge daha önce var ise bu kez de belgenin içeriği değiştirilmiş olacak.
Yukarıdaki kodun bir butona basıldığında çalışabilmesi için onu bir fonksiyon yapısı içerisine alabiliriz.
Kod:
yaziEkle() {
FirebaseFirestore.instance
.collection('Yazilar')
.doc(t1.text)
.set({'baslik': t1.text, 'icerik': t2.text});
}
Artık yaziEkle() fonksiyonu çalıştığında veri ekleme işlemimiz gerçekleşmiş olacak.
.whenComplete() yapısı önceki işlem tamamlandığında yapılacak yeni bir iş tanımlayabilmemizi sağlıyor. Bu kodun parantezleri arasına bir isimsiz fonksiyon yapısı yerleştiriyoruz.
.whenComplete(() => )
sonrasında da yapılmasını istediğimiz işi yazıyoruz. Mesela, veri ekleme işlemi tamamlandığında konsola Yazı Eklendi bilgisi veren bir fonksiyon verebiliyoruz.
.whenComplete(() => print("Yazı Eklendi"));
Bu yapıyı kodumuza eklemiş olsaydık yaziEkle fonksiyonumuzun son hâli aşağıdaki gibi olacaktı.
Kod:
yaziEkle() {
FirebaseFirestore.instance
.collection("Yazilar")
.doc(t1.text)
.set({'baslik': t1.text, 'icerik': t2.text})
.whenComplete(() => print("Yazı eklendi"));
}
Veri ekleme kodunun saf hâli:
Kod:
FirebaseFirestore.instance
.collection('KoleksiyonAdi')
.doc('BelgeAdi')
.set({'alan1': 'deger1', 'alan2': 'deger2'});
Firestore Veri Güncelleme
Veri güncellemek için ihtiyaç duyacağımız kod parçası böyle. Veri ekleme işleminden tek farkı set yerine update kullanılmasıdır.
Kod:
FirebaseFirestore.instance
.collection('Yazilar')
.doc(t1.text)
.update({'baslik': t1.text, 'icerik': t2.text});
Aşağıdaki gibi bir fonksiyon içerisine tanımlayabiliriz. Fonksiyonu da bir butona verebiliriz.
Kod:
yaziGuncelle() {
FirebaseFirestore.instance
.collection('Yazilar')
.doc(t1.text)
.update({'baslik': t1.text, 'icerik': t2.text});
}
Kod:
yaziGuncelle() {
FirebaseFirestore.instance
.collection("Yazilar")
.doc(t1.text)
.update({'baslik': t1.text, 'icerik': t2.text})
.whenComplete(() => print("Yazı güncellendi"));
}
Kodun saf hâli aşağıdaki gibidir.
Kod:
FirebaseFirestore.instance
.collection('KoleksiyonAdi')
.doc('BelgeAdi')
.update({'alan1': 'deger1', 'alan2': 'deger2'});
Firestore Veri Silme
Veri silmek için bu kod parçasını kullanıyoruz. Belirtilen belgeyi delete ile siliyoruz.
Kod:
FirebaseFirestore.instance
.collection('Yazilar')
.doc(t1.text)
.delete();
Fonksiyon içinde kullanımı:
Kod:
yaziSil() {
FirebaseFirestore.instance
.collection('Yazilar')
.doc(t1.text)
.delete();
}
Kodun saf hâli:
Kod:
FirebaseFirestore.instance
.collection('KoleksiyonAdi')
.doc("BelgeAdi")
.delete();
Firestore'den Veri Alma ve Gösterme
Veri getirmeden önce iki değişken tanımlıyoruz.
Kod:
var gelenYaziBasligi = "";
var gelenYaziIcerigi = "";
Daha sonra yaziGetir() fonksiyonu içerisinde get() metodu ile veriyi alıyoruz.
Veriyi aldıktan sonra then ifadesi ile, aldığımız veriyi gelenVeri ismini verdiğimiz bir parametreye atıyoruz.
then ifadesi veriyi aldıktan sonra ne yapmamız gerektiğini tanımlamamızı sağlıyor. Burada, gelenVeri'nin içindeki data'ya erişiyoruz. Firestore veritabanındaki belgemizin içinde baslik ve içerik isminde iki alan vardı. Bu şekilde bu alanların değerlerini, bu yazının başında tanıladığımız değişkenlere ayrı ayrı atıyoruz. Bu işlemi, değişkenlerin değişen değerlerini ekranda gösterebilmek için setState içerisinde yapıyoruz.
Kod:
yaziGetir() {
FirebaseFirestore.instance
.collection("Yazilar")
.doc(t1.text)
.get()
.then((gelenVeri) {
setState(() {
gelenYaziBasligi = gelenVeri.data()['baslik'];
gelenYaziIcerigi = gelenVeri.data()['icerik'];
});
});
}
Artık bu değişkenlerin değerlerini istediğimiz yerde kullanabiliriz.
Örneğin ListTile widget içerisinde Text widget ile gösterelim:
Kod:
ListTile(
title: Text(gelenYaziBasligi),
subtitle: Text(gelenYaziIcerigi),
),
Konuda ki Kodların Tamamı
Kod:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
Future<v o i d e > 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();
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(
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
Son düzenleme: