May.27

AngularJS ve Firebase – Ders 7: Veri Kaydetme ve Güncel Veriyi İzleme ($save ve $watch)

Bu makalede, önceki makalelere ek olarak devam edeceğiz. Birer input’tan aldığımız key ve value değerlerini Firebase veritabanına kaydedecek, ve kaydedilen en son güncel veriyi de izleyip ekranda yazdıracağız.

Önceki örneklerimizde hatırlarsanız firebase objesini index.html içinde script etiketlerinde yapıyorduk. Bu sefer işi tamamen Angular tarafında halledeceğiz.

index.html sayfamız aşağıdaki gibi olacak:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title ></title>

	<link rel="stylesheet" href="bootstrap.min.css" >
<script charset="utf-8" src="jquery.min.js"></script>
	<script charset="utf-8" src="bootstrap.min.js"></script>

	<script charset="utf-8" src="angular.min.js"></script>
	<script charset="utf-8"src="app.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
	<style>
		body{
			margin:100px;
		}
	</style>
</head>
<body ng-controller="app_CTRL">

  <div ng-show="kullanici">
    <p>Merhaba, {{ kullanici.email }}</p>
    <button ng-click="auth.$signOut()">Çıkış Yap</button>
  </div>
  <div ng-hide="kullanici">
    <button ng-click="auth.$signInWithPopup('google')">Google ile Giriş Yap</button>
    <button ng-click="auth.$signInWithPopup('facebook')">Facebook ile Giriş Yap</button>
  </div>
  <hr>
  <div>
    <input type="text" ng-model="anahtar" placeholder="Anahtar (Key)" />
    <input type="text" ng-model="deger" placeholder="Value (Değer)" />
    <br>
    <br>
    <button ng-click="kaydet(anahtar,deger)" >Kaydet</button>
    <br><br>
    <p ng-if="guncelVeri">{{guncelVeri.$id}} verisi {{guncelVeri.$value}} olarak güncellendi.</p>
  </div>
</body>
</html>

Burada 2 adet input’umuz var. Bunların ng-model’leri anahtar ve deger şeklinde. Anahtar dediğimiz JSON’da key olacak, deger dediğimiz de value olacak.

Kaydet isimli butona tıklanınca da kaydet fonksiyonu çağırılacak. Parametre olarak anahtar ve deger verilerini alıyoruz.

Son olarak bir p etiketimiz var ve ng-if ile görünür veya görünmez oluyor. guncelVeri değeri, veritabanına bir değer girildiğinde, Firebase’i takip eden (watch) bir sistemle en son güncellenen değeri bize getirmiş olacak. p etiketinde de bir cümle içinde en son hangi key değiştirilmiş ve güncel verisinin ne olduğu gösteriliyor.

Bu arada bir önceki makaleden hatırlayın, bu işlemleri yapabilmek için yetkili olmamız lazım, yani giriş yapmamız lazım. Önceki örneğimizde Google hesabı ile giriş yapabiliyorduk, bunda da yine Google hesabımız ile login olup verileri o şekilde gireceğiz. Zaten dikkat edin, ilk div’de bir kullanici direktifi var ve giriş işlemi kontrol ediliyor.

app.js


var app = angular.module("app", ["firebase"]);

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.config(function() {
 var config = {
    apiKey: "AIzaSyDhgHleyj6d5Pjzn3heUi-bVMK6jN5KVJ8",
    authDomain: "ugurgelisken-69252.firebaseapp.com",
    databaseURL: "https://ugurgelisken-69252.firebaseio.com",
    projectId: "ugurgelisken-69252",
    storageBucket: "ugurgelisken-69252.appspot.com",
    messagingSenderId: "439860870061"
  };
  firebase.initializeApp(config);
});


app.controller("app_CTRL", ["$scope", "Auth", "$firebaseObject", "$firebaseArray", 
  function($scope, Auth, $firebaseObject,  $firebaseArray) {
    
    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(kullanici) {
    	$scope.kullanici = kullanici;
    });

    var ref = firebase.database().ref();
    var obj = $firebaseObject(ref);

    $scope.kaydet = function (a, d){
		obj[a] = d;
		obj.$save().then(function(ref) {
		  ref.key === obj.$id;

		}, function(error) {
		  console.log("Hata:", error);
		});
    }

    var list = $firebaseArray(ref);
    list.$watch(function(durum) {
        $scope.durum = durum;
        $scope.guncelVeri = list.$getRecord(durum.key); 
    });

  }
]);

kaydet fonksiyonua bakarsak a parametresi key, d parametresi de value oluyor. fonksiyon dışında bir obj nesnesi oluşturduk ve $firebaseObject nesnesini verdik. Bu bizim veritabanımız oluyor. Bu nesneyi de bir object gibi düşünüp [a] şeklinde bir key belirtip, d değerini atıyoruz. $save metodu ile de değerimizi firebase’e göndermiş oluyoruz.

Alt kısımda da bir list tanımlıyoruz ve $firebaseArray olarak belirtiyoruz. Bu, firebase veritabanımız oluyor. Bu veritabanını da $watch ile takip edip, eğer bir değişiklik varsa durum parametresine atıyoruz. guncelVeri scope değerine de list nesnemizdeki veriler içinden değişiklik yapılmış olan key’i çekiyoruz. Değişiklik olan key’i de durum nesnesinin içindeki key değerinden almış oluyoruz.

İçeriği paylaş:
  • facebook
  • twitter