Build a data driven app with Ionic 2 Firebase 3 [RC3 Updated]
Have you used Firebase 3 to power one of your Ionic Framework apps yet?
If you don’t know what Firebase is, it’s just:
In plain English it is a Back-end as a Service that offers a wide range of services, like push notifications, analytics, a Firebase real-time database and more.
With the recent move to Ionic 2 + Firebase 3 I’ve gotten a lot of people asking me both in the comments and emails about problems they are having trying to build apps, and those problems are always the same, they don’t know how to retrieve data from firebase and display it in an Ionic Page, or they are having trouble with one of the auth functions.
By the end of this post, you’ll create your first Firebase powered Ionic app! You’ll learn how to create an Ionic 2 app from scratch and connect it to Firebase.
Our first Firebase powered Ionic app
We are going to be building an app for managing events, I’ve been thinking a lot about what to make, and I decided for this because I actually built my wife’s startup with Ionic 1 and it’s all about managing events for a very specific niche, so since I know I’m going to start updating it soon to be an Ionic 2 app I decided to make a lite version of it for this tutorial.
The main things the app will do is:
- Allow event manager to create an account, login, reset password (you know, all the auth stuff).
- Allow for editing the user profile: changing passwords, emails, etc.
- Create events, people.
- Add people to event’s guest lists.
- Calculate revenue for the event.
- Take pictures of guests and add them to Firebase Storage.
- Be secure: Meaning make sure that only the person who owns the account can see the data.
I’m going to take you through the entire process in 5 very simple steps:
STEP #1: Make sure your development environment is up to date
Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you won’t have to be switching context between coding and installing.
Install node.js
The first thing you’ll do is install node.js make sure you get version 6.x, even tho V4 works for most users it will install the wrong version of typings and a lot of things will break in your app.
Install Ionic, Cordova and TypeScript
The second thing you’ll do is make sure you have Ionic, Cordova and Typescript installed, you’ll do that by opening your terminal and typing:
$ npm install -g ionic cordova typescript
Depending on your operating system (mostly if you run on Linux or Mac) you might have to add
sudobefore the npm install.... command.
Also, since Ionic released V2RC0 you don’t need to install typings anymore, they use
npm @types now.STEP #2: Create the App
Now that you made sure everything is installed and up to date, you’ll create a new Ionic 2 app.
For this you just need to (while still in your terminal) navigate to the folder you’d like to create it in.
For me, it’s my Development folder in my ~/ directory:
$ cd Development
$ ionic start eventTutorial blank --v2
$ cd eventTutorial
What those lines there do is the following:
- First, you’ll navigate to the Development folder.
- Second, you’ll create the new Ionic 2 app:
ionic startcreates the app.eventTutorialis the name we gave it.blanktells the Ionic CLI you want to start with the blank template.--v2tells the Ionic CLI you want to create an Ionic 2 project instead of an Ionic 1 project.
- Third, you’ll navigate into the new
eventTutorialfolder, that’s where all of your app’s code is going to be.
From now on, whenever you are going to type something in the terminal it’s going to be in this folder, unless I say otherwise.
STEP #3: Check and Install the npm packages you’ll need
When you use the Ionic CLI to create a new project, it’s going to do a lot of things for you, one of those things is making sure your project has the necessary
npm packages/modules it needs.Check the already installed packages:
That means, the
start command is going to install ionic-angular all of the angularjs requirements and more, here’s what the package.json file would look like:{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.48",
"typescript": "^2.0.3"
},
"description": "event-tutorial: An Ionic project",
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": []
}
Depending on when you read this, these packages might change (specially version numbers) so keep that in mind, also you can email me at j@javebratt.com if you have any questions/issues/problems with this.
Install the packages you’ll need
For this project to work you’ll need to install a couple of extra packages.
First, we’ll need to update
@ionic/app-scripts to use the latest version, since that’s the one with Webpack support, meaning it works with Firebase out of the box, you won’t have to create custom builds.$ npm install @ionic/app-scripts@latest --save-dev
That will tell Ionic to use the latest version of the module and you’ll get webpack support.
Now you need to install Firebase (hey, that’s what this post is all about 
)
)
Open your terminal (you should already be in the project folder) and it like this:
$ npm install firebase --save
Right now you should have every package installed and be using
"firebase": "^3.6.4", if you have errors at this point, it might be because you have an outdated version of npm or nodejs.
If you don’t have any errors, move to the next step
STEP #4: Import everything you’ll need inside the app
Now you have to import all the pages, providers, etc, that you’ll need inside
src/app/app.module.js so you don’t have to keep going back to that file:Create Pages and Providers
NOTE: Since you now need to declare every component, page, provider, etc in this file, this would be a good moment to create them and add them all.
Go ahead and run this commands in your terminal:
$ ionic generate page EventDetail
$ ionic generate page EventCreate
$ ionic generate page EventList
$ ionic generate page Login
$ ionic generate page Profile
$ ionic generate page ResetPassword
$ ionic generate page Signup
Those commands will generate all of the pages you’ll need for this app, each page will come with 3 files:
- A view file, this is a
page.htmlfile where you’ll create the view the user is going to see. - A style file, this is a
page.scssfile where you’ll make that view look nicer. - A logic file, this is a
page.tsfile where you’ll add the functionality so that page can actually do stuff.
After all the pages are created, then you’ll use these commands:
$ ionic generate provider EventData
$ ionic generate provider AuthData
$ ionic generate provider ProfileData
Those will generate the 3 providers we’ll use, a provider is a file where we store the functions we’ll “share” in our code.
For example:
If we need a function that adds people to our database, we create it inside a provider, that way we can call it from anywhere in our app, instead of copy/pasting it everywhere we need it.
Don’t worry if you don’t understand something from those pages or providers, I’ll explain every single one of those in detail when we get to them.
Import them inside your app
Now, you can open your 
app.module.ts and import everything we’ll be using, this is the only time you’ll see this file import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
// Import pages
import { HomePage } from '../pages/home/home';
import { EventCreatePage } from '../pages/event-create/event-create';
import { EventDetailPage } from '../pages/event-detail/event-detail';
import { EventListPage } from '../pages/event-list/event-list';
import { LoginPage } from '../pages/login/login';
import { ProfilePage } from '../pages/profile/profile';
import { ResetPasswordPage } from '../pages/reset-password/reset-password';
import { SignupPage } from '../pages/signup/signup';
// Import providers
import { AuthData } from '../providers/auth-data';
import { EventData } from '../providers/event-data';
import { ProfileData } from '../providers/profile-data';
See we’re importing the pages and providers using a relative path, you’ll want to follow the path where Ionic created those folders for you.
And then we initialize everything inside
@NgModule:@NgModule({
declarations: [
MyApp,
HomePage,
EventCreatePage,
EventDetailPage,
EventListPage,
LoginPage,
ProfilePage,
ResetPasswordPage,
SignupPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
EventCreatePage,
EventDetailPage,
EventListPage,
LoginPage,
ProfilePage,
ResetPasswordPage,
SignupPage
],
providers: [
[{provide: ErrorHandler, useClass: IonicErrorHandler}],
AuthData,
EventData,
ProfileData
]
})
export class AppModule {}
In the end the file should look like this:
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
// Import pages
import { HomePage } from '../pages/home/home';
import { EventCreatePage } from '../pages/event-create/event-create';
import { EventDetailPage } from '../pages/event-detail/event-detail';
import { EventListPage } from '../pages/event-list/event-list';
import { LoginPage } from '../pages/login/login';
import { ProfilePage } from '../pages/profile/profile';
import { ResetPasswordPage } from '../pages/reset-password/reset-password';
import { SignupPage } from '../pages/signup/signup';
// Import providers
import { AuthData } from '../providers/auth-data';
import { EventData } from '../providers/event-data';
import { ProfileData } from '../providers/profile-data';
@NgModule({
declarations: [
MyApp,
HomePage,
EventCreatePage,
EventDetailPage,
EventListPage,
LoginPage,
ProfilePage,
ResetPasswordPage,
SignupPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
EventCreatePage,
EventDetailPage,
EventListPage,
LoginPage,
ProfilePage,
ResetPasswordPage,
SignupPage
],
providers: [
[{provide: ErrorHandler, useClass: IonicErrorHandler}],
AuthData,
EventData,
ProfileData
]
})
export class AppModule {}
Right there your app should be able to run without any errors when you do
ionic serve
If you are running intro trouble getting this to work please leave a comment below and I’ll do my best to help you debug it.
STEP #5: Install the CORDOVA plug-in we’ll use
One cool thing we’re going to try in our app is to take pictures from the phone camera and upload them directly to one of Firebase services called Firebase Storage.
We’ll go through what we need eventually, but right now I want you to install the camera plug-in.
It’s a CORDOVA plug-in that will let our hybrid application access the native camera of your device.
You can go to the ionic-native website and follow the documentation there.
But I don’t think you really need to, since it’s just as easy as opening your terminal and typing:
$ ionic plugin add cordova-plugin-camera
Remember, you’ll need to be inside the project’s folder for that to work.
That’s it, you now have installed everything you’ll need to build this app, including npm packages, cordova plugins.
Bringing it all together
Right now you should have the skeleton of your app and should be ready to start coding.
Configuring this kind of things isn’t that easy, so you should be proud of what you just accomplished, if you’re running into any issues just remember the steps we followed:
- STEP #1: Make sure your development environment is up to date
- STEP #2: Create the App
- STEP #3: Check and Install the
npmpackages you’ll need - STEP #4: Import everything you’ll need inside the app
- STEP #5: Install the CORDOVA plug-in we’ll use.
Now you should be ready to start adding functionality to your app.
Good information and great post. I like the website, and am sure to keep returning. Visit: Ionic Firebase
This comment has been removed by the author.