Ionic Firestore Essentials

Todd Hale, Xactware
Adapted from Jorge Vergara's blog
https://javebratt.com/crud-ionic-firestore/
https://github.com/dolthead/numero1

Background

• Todd Hale ≈ @dolthead
• Full-stack web application developer
• Nearly 18 years at Xactware + 8 years at Novell
• Part-time instructor at MTech
• I love mobile projects & rapid app dev
• Ionic+Firebase is #1 for mobile rapid app dev
• Experience with Internationalization, PWA, Material Design, Java, SQL
• Hobbies include volleyball, basketball, frisbee, word games, ATVs, family, ASL

Tutorial Time

Build app from scratch!

 

Install nodejs: https://nodejs.org/en/
Install ionic & cordova: npm i -g ionic cordova
https://javebratt.com/crud-ionic-firestore/

 

(break after 30 mins)

 

** Build and run on iPhone, if time permits

Tutorial Addendum

Open database in Firebase console, click Get Started in the Cloud Firestore Beta, click Start in Test Mode, and click Enable.

package.json
    "angularfire2": "^5.0.0-rc.5-next",
    "firebase": "^4.13.1",

firestore.ts
    constructor(public firestore: AngularFirestore) {
        const firestoreObj = firebase.firestore();
        const settings = { timestampsInSnapshots: true };
        firestoreObj.settings(settings);
    }

App Features

• Ionic
• Firebase/Firestore
• Interface (object type) - helps with Firebase structure
• FormBuilder FTW (required fields)
• Simple Ionic alerts
• Ionic loading spinner
• Navigation
• PWA-ready, offline-ready, pro-deploy-ready