ionic-firebase-public

Firebase :  JSON verilerimizi uzak bir sunucuda gerçek zamanlı olarak depolayabildiğimiz, bulut (Cloud) tabanlı bir platformdur.

firebase gmail ile üye olup proje oluşturabiliriz:

 

create new project:

karşımız proje ekranımız çıkacak:

database=>rules kımında karşımıza :

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

kısıtlama çıkacak bu ksıım oturum açmadan veritabanına erişmesine izin vermez bunu için auth kısmını devereye sokmak gerekir. Biz bu projede public olarak verilere ulaşmak istiyoruz:

{
    "rules": {   
        ".read": true,
        ".write": true
    }
}

bu şekilde izinleri verelim.

Auth kısmında add usera tıklayarak sayfanın bu şekilde görünmesini sağlayalım kullanıcı eklemesenizde olur. diğer türlü verileri getirmiyor

 

database=>data  veri yuklemek için json dosyasına ihtiyacımız var, verileri import edebilmek için.

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

bu verileri json doaysı olarak kaydedelim.

 

sol menüden:

 

import jsonu secelim ve oluşturduğumuz jsonı yukleyelim.

 

verilerimiz yuklendi gelelim ionic tarafına:

$ ionic start myapp sidemenu

$ ionic platform add android

index.html

    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

app.js

    angular.module("starter", ["ionic", "firebase"])

Sidemenu ile gelen browser sayfasında göstericem

controller.js

.controller('BrowseCtrl', function($scope, $stateParams,$firebaseArray) {

      var employeesRef = new Firebase("https://todo-e2cc2.firebaseio.com/employees");
      $scope.employess = $firebaseArray(employeesRef);
});

browse.html

     <ion-content>
      <ion-list>
      <div class="card">
        <ion-item ng-repeat="item in employess">
          {{ item.firstName }}: {{ item.lastName }}
        </ion-item>
        <div>
      </ion-list>
    </ion-content>

çalıştıralım:

$ ionic serve

 

ekleme ve silme işlemi için browser.html i düzenleyelim:


    <ion-content>
      <ion-list>
      <div class="card">

        <ion-item ng-repeat="item in employess">
        {{ item.firstName }}: {{ item.lastName }}
           <i class="ion-trash-b icon-actions margin" ng-click="deleteItem('{{item.$id}}')"></i>
        </ion-item>
        <div>
      </ion-list>
 

        <label class="item item-input"  >
        <input type="text" placeholder="isim giriniz." ng-model="$root.newname">
        </label>

        <br>
        <label class="item item-input"  >
        <input type="text" placeholder="soyisim giriniz." ng-model="$root.newlastname">
        </label>

       <button class="button button-icon ion-plus" ng-click="addItem()">
       </button>
    </ion-content>


controller.js



      $scope.$root.newname;
      $scope.$root.newlastname;

      $scope.addItem = function() {
              $scope.employess.$add({
                "firstName": $scope.$root.newname,
                "lastName": $scope.$root.newlastname
              });
              $scope.$root.newname="";
              $scope.$root.newlastname="";
       };

       $scope.deleteItem=function(removeitem){
          employeesRef.child(removeitem).remove();
       };