Firebase ile Proje Oluşturma //

CanaBBis

Yeni üye
24 Nis 2021
43
0



sb24p8.png


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
cx5pw9.gif




  1. Firebase'de Proje Oluşturmak

  2. Firebase Projesine Flutter Uygulaması Eklemek

  3. Firebase'de Veritabanı Oluşturmak

  4. Firebase Güncellemesi ile Ek işlemler

  5. Firestore Veri Eklemek

  6. Firestore Veri Güncelleme

  7. Firestore Veri Silme

  8. Firestoreden Veri Alma ve Gösterme



Firebase'de Proje Oluşturmak
cx5pw9.gif



firebase.google.com'a giriş yapın. Google hesabınızla oturum açın. "Go to console" butonuna tıklayarak konsola geçin.


1vkucw.png



Proje oluştura tıklayın.


ewmrz5.png



Projeye bir isim verin, herhangi bir isim olabilir. Sonra "Devam" butonuna basın.


87qjq2.png



Yeni gelen ekranla Google Analytics'i etkinleştiriyoruz. Zaten biz kapatmazsak varsayılan olarak etkin. Sonra devam ediyoruz.


52epgc.png



Şartları kabul ettiğimizi belirten seçenekleri işaretliyoruz ve Proje oluştur'a tıklıyoruz.


cevzr1.png



Projemiz oluşturulurken aşağıdaki bekleme ekranına yönlendiriliyoruz.


dze3iz.png



Projemiz oluşturuldu. Devam butonuna tıklıyoruz.


bm0lq7.png



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


jqo15h.png





Firebase Projesine Flutter Uygulaması Eklemek
cx5pw9.gif



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


an16hb.png



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.


oahq1v.png



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.


mk9zbb.png



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.


t0fcmf.png



İ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.


os9hcb.png



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.



54niyp.png



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.


swbodi.png



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


bmx4mq.png



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'


gctv3f.png



e4ebww.png




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.


6ow8t6.png



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.


6on4l0.png



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.


ej1avo.png





Firebase'de Veritabanı Oluşturmak
cx5pw9.gif



Sol taraftan Database sekmesini açıp Cloud Firestore altında Veritabanı oluştur butonuna tıklayalım.


jmptn7.png



Ü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.


ftz5qa.png



Verilerimizin depolanacağı konumu seçmemizi istiyor, burada eur3 seçtim ama varsayılan konumla da devam edebilirsiniz. Bitti'yi tıklıyoruz.


5ni6mj.png




Veritabanımızı hazırlanıyor...


k3glwu.png



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.


8ifq40.png



Koleksiyonumuza bir isim verelim. Sıradaki uygulamamız bir Firebase temel blog uygulaması olacağı için bu koleksiyonumuza Yazilar ismini veriyorum.


4thes8.png



Ş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.


8z0816.png



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.


ift8x1.png



Artık belgemiz Yazilar koleksiyonun içine eklendi ve belgenin içinde üç çift veri alanı var.


m6c9p3.png



Şimdi Belge ekle diyerek yeni bir belge daha oluşturalım.


5vt0fq.png



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.


fgp4i3.png



Veritabanımızın son hâli.


oiaz1f.png



Ş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


tqbl0z.png




Firebase Güncellenmesi ile Ek İşlemler
cx5pw9.gif



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


9lp1tb.png



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.


iz7p9r.png



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';
satırlarıyla paketlerimizi ekleyelim.

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.


rn8ei1.png




Firestore Veri Eklemek
cx5pw9.gif



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
cx5pw9.gif



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});
}
Yine istersek .whenComplete() yapısını da kodumuza ekleyebiliriz.

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
cx5pw9.gif



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
cx5pw9.gif




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ı
cx5pw9.gif



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:

ByZehirx

Yaşayan Forum Efsanesi
10 Şub 2012
12,381
1,976
Dinlenmede.
Konuna benim firebase videolarimida ekliyebilirsin.

False ve True yazma izinlerinede deginseydin.
Konu genel olarak Güzel ve emek kokuyor
O yüzden teşekkür listene ekliyorum nickimi.
 

CanaBBis

Yeni üye
24 Nis 2021
43
0
Konuna benim firebase videolarimida ekliyebilirsin.

False ve True yazma izinlerinede deginseydin.
Konu genel olarak Güzel ve emek kokuyor
O yüzden teşekkür listene ekliyorum nickimi.

Yorumunuz için teşekkür ederim videoları izleyip eklerim ek olarak konunun devamı gelecek :)
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.