Using Cloud Firestore in Ionic 3 With AngularFire

Monday, 9 October 2017

Firebase has just announced  Firestore which is NOSQL document-based database. As compare to Firebase real time database in Firestore you can use simple and compound queries to fetch and retrieve the data.
In this tutorial we will learn how to integrate Firestore with Ionic 3. 
Follow these following easy steps.

Step-1

First you need to create a new project using Ionic CLI. If you don't know how to create new project using Ionic CLI please read this article  Set Up Development Environment for Ionic Framwork . Just open your terminal or command prompt. Create a project by using this command.


ionic start myApp tabs

If you have already created project then you can skip this step.


Step-2

Go to root directory of your project now you need to install Firebase package. Install angularfire 2 in your ionic project by using npm.


npm install angularfire2 firebase promise-polyfill --save



Step- 3

Now configure firebase in your application goto your firebase console and copy your API keys.
and  add both the AngularFireModule and AngularFirestoreModule to your app module.
See in the code sample.



import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

  export const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
     authDomain: "your-app.firebaseapp.com",
     databaseURL: "https://your-app.firebaseio.com",
     storageBucket: "your-app.appspot.com",
     messagingSenderId: "01234567891"
 };

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule.enablePersistence(),

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    HomePage
  ],
  providers: [
    StatusBar,AndroidPermissions,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Here we call the enablePersistence method on the AngularFirestoreModule to automatically enable local caching which will allow the app to stay available while offline.

Step-4

Your firebase firestore configuration is now ready for use. Just import and use firestore on any page.


import { AngularFirestore } from 'angularfire2/firestore';
@Component({
  selector: 'page-hone',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,public afs: AngularFirestore) {

  }

}

Create database reference and use AngularFirestore.

To Add documents to a collection

You can use the add() method to add a new document to a collection with a generated id.
Sample code


import { AngularFirestore } from 'angularfire2/firestore';
@Component({
  selector: 'page-hone',
  templateUrl: 'home.html'
})
export class HomePage {
constructor(public afs: AngularFirestore) {

const carsCollection = afs.collection<Item>('mycars');
   carsCollection.add({
    name: 'Abc',
    model: 'xyz',
    price: 10000
    }).then((added)=>{
console.log(added.id);
}).catch((e)=>{
console.log("Error",e);
})
  }

}

Retrieving collection data

There are multiple way to Retriving collection data from firestore.
If you just need the object data use valueChanges() method. With valueChanges() method  no document metadata is attached which makes it simple to render to a view.
snapshotChanges() method  returns an Observable of data as a DocumentChangeAction.
Sample code

import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'page-hone',
  templateUrl: 'home.html'
})
export class HomePage {
private itemDoc: AngularFirestoreDocument<Item>;
  item: Observable<Item>;
  constructor(public navCtrl: NavController,public afs: AngularFirestore) {
 this.itemDoc = afs.doc<Item>('mycars');
    this.item = this.itemDoc.valueChanges();
  }

}

On Your HTML Page


     <div>
      {{ (item | async)?.name }}
    </div>

For  setting, updating, and deleting document data use set(), update(), delete() methods.
Reference is taken from https://github.com/angular/angularfire2
If you face any problem you can comment below. Thank You


How to Set Up Angular Development Environment

Thursday, 28 September 2017

Hi, If you are new in Angular or want to install Angular Development  environment in your system then your are at right place. Here you will learn step by step process to install Angular Development environment in your system.  So don't worry its a very easy task you have to do it only once and after that you can create and developed a lots of project in Angular.


Step-1

At First  you need to install Node.js in you system go to official site of  Node.Js download and install it in your system.


After successful installation  of Node.js to check its working or not Open terminal , or Command Prompt and type 'node --version '. This will show to installed version of node. Node.js setup comes with node package manager(npm) so to check npm version type 'npm --version'.


node --version


Step - 2

Now you need to install Angular CLI in your system just open your terminal or command prompt and type 'npm install -g @angular/cli'.


npm install -g @angular/cli


Its take some times to install in your system.After Successful installation of Angular CLI just type and 'ng --version' to check installed Angular CLI version or its working or not.


Step-3

Now you need to create Angular project.
type 'ng new MyProject'.


ng new MyProject


After running this command a projected directory is created with named MyProject  go to root directory of your project and type 'ng serve --open' to run  your project.


cd MyProject


ng serve --open



After running ng serve a localhost is started now open your browser and navigate to http://localhost:4200/ .




Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...
 

Most Reading

Labels