Hi all,
yesterday Google launched Cloud Firestore as an alternative for the realtime database.
Does anyone already know how it will work with ionic (e.g. AngularFire)?
Any experiences to share?
Thanks,
Matthias
1 Like
My guess it would require a similar implementation than the current Firebase database products.
Hi.
You can use angularfire2/firestore.
In your app.module.ts add the following:
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
// get your credentials from Firebase Console
export const firebaseConfig = {
apiKey: "xxxxxxxxxxxxx",
authDomain: "xxx.firebaseapp.com",
projectId: "my-project-id"
};
then add to imports:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule,
AngularFireAuthModule
],
Finally, for example, if you have a collection items you can add a document with this code when starting your home page:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, db: AngularFirestore) {
db.collection("items").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then( (docRef) => {
console.log("Document written with ID: ", docRef.id);
})
.catch( (error) => {
console.error("Error adding document: ", error);
});
}
}
Remember to protect your Firestore database. In this sample I was able to add documents to the collection because my db is “open”. Anyone can write.
2 Likes
Do you know how it can be implemented using the regular Firebase JS SDK (no AngularFire)?
I’m having difficulties to make it work.
In your project folder run:
npm install firebase --save
Import firebase in app.component.ts:
import firebase from 'firebase';
Initialize firebase in app.component.ts:
[...]
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
firebase.initializeApp({
apiKey: "XXXXXXXXXX",
authDomain: "xxx.firebaseapp.com",
projectId: "my-project-id"
});
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
In your home.ts import both firebase and firestore, then try to write some data:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import firebase from 'firebase';
import 'firebase/firestore';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
var db = firebase.firestore();
db.collection("items").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then( (docRef) => {
console.log("Document written with ID: ", docRef.id);
})
.catch( (error) => {
console.error("Error adding document: ", error);
});
}
}
Remember as before to protect your Firestore database.
PS: If you’re getting “Runtime Error Cannot find module "@firebase/webchannel-wrapper”" when running ionic serve, then run:
npm install @firebase/webchannel-wrapper --save
and run again ionic serve (or ionic serve --lab).
6 Likes
Works perfectly, thanks a lot!
2 Likes
Is there any possibility to her the data from realtime database to Firestore?
You mean export data between databases?
Try here https://firebase.google.com/docs/firestore/firestore-for-rtdb .
Very similar to Xamarin’s List objects.
Very cool.
Firebase JS SDK still works in my app. What’s the plus or better with Firestore?
As an aside in regards to some of the posted examples, you should pretty much never type function inside an Ionic app. It will break what this is, and cause issues.
Instead, utilize the “fat arrows” syntax () =>.
So, for example, this:
function(docRef) {
Becomes:
docRef => {
Or if you prefer:
(docRef) => {
Just an FYI in case somebody runs into issues.
2 Likes
You can read here for differences: https://firebase.google.com/docs/firestore/rtdb-vs-firestore
1 Like
Hi, see this article to integrate Firestore with Ionic 3
1 Like
Alright thanks @rrivanigweb, if I read it carefully, Firestore has more features, and will be the next go.
2 Likes
Sure. Personally I’ve never used Firebase but with Firestore I’ll give it a try. 
1 Like
There aren’t ionic-native/cordova solutions?
Firebase firestore is a browser solution, I need to implement offline persistence without browser limitations…
Hi mb1,
Yes, you can integrate Firebase firestore into your ionic app using the latest version of angularfire2.
Here’s a good tutorial that scratches the surface with an Angular example using valueChanges observable:
I was able to follow along in an Ionic 3 app with a few alterations. Also, to get the keys/ids of your documents, you’ll need to use snapshot() instead of valueChanges():
I hope this helps.
1 Like
@mb1 Ionic bascially integrates a lot of offline persistence, as Firebase if your typescript codebase is neat (not too complex dependencies and such). If you wanna test, give it a try by putting your app in offline mode. Of course, if you rely on cloud auth like me, you’ll be blocked at first step, but don’t underestimate Ionic capabilities in that matter, it’s in my app saving as much as 50 % of the web bandwith it’s supposed to produce (in beta still).
Hi
Do you know where Firestore stores its persistence during offline? If it is web or the likes, i wonder what limitations apply. I use sqlite plugin to build local persistance for a firebase app, and would love to ditch it for a cleaner one
Tom
Hi,
While your Ionic app is offline, I’m quite sure it stores offline data inside your favorite mobile browser directory, using HTML5 offline storage capabilities of any smartphone/browser combination. But I have no idea of the exact location, sorry.
And if I understood well, in hybrid apps, anyways Firefox, Chrome, all the major browsers also use SQLLITE for local storage and offline mode.
Hope this helps a bit,
1 Like