n
n
nFirebase is a Backend-as-a-Service BaaS own by Google. nnnnIt frees both mobile and web application developers from writing APIs, managing servers, and worrying about data store. Just focus on your application and Firebase will do the rest for you.
n
nIn this article I will walk you through building an ionic 3 shopping cart app leveraging on Firebase Real Time Database.
n
nSetting up Firebase and Ionic Project
nThe first thing is to setup the firebase project for the app. Head on over to firebase console and click “Add new project“. Give the project a name, i have named my own “ionic-firebase-cart” then click “Create Project Button“
n
n
n
nYou will now be presented with the screen below.
n
n
n
nClick on “Add Firebase to your web app” and copy the snippet provided into a text file as we will be using it in our ionic app shortly.
n
n
n
n
nCreating the ionic app
nNow that we have setup the firebase project we are ready to move on to creating the Ionic app. Start by running the following command in your console:
n
n
ionic start ionic-firebase-cart sidemenuncd ionic-firebase-cartn
n
nThe next thing is to install firebase sdk by running this command:
n
n
npm install --save firebasen
n
n
nAdding the Firebase Project Settings
nOpen up the snippet you copied from firebase console. Open up your new ionic app you just created in your favorite text editor – I use Visual Studio Code. Navigate to /src and create a folder named config so that you have /src/config, nnnnnthen create a new typescript file in the config folder named app.config.ts and add your firebase project settings. You final app.config.ts file should look like this:
n
n
export const config = {n showCategory: true,n firebasConfig: {n apiKey: "AIzaSyCW7hssvB3b1qpR6VLNb-eGOhX12P-oAuU",n authDomain: "ionic-firebase-cart.firebaseapp.com",n databaseURL: "https://ionic-firebase-cart.firebaseio.com",n projectId: "ionic-firebase-cart",n storageBucket: "ionic-firebase-cart.appspot.com",n messagingSenderId: "539859030676"n }n};nn
n
nNow we need to initialize firebase from within the app’s app.module.ts, so navigate to /src/app/app.module.ts. First we need to import the config and firebase, then add them to the imports in the app.module.ts like so:
n
n
import { config } from './../config/app.config';nimport * as firebase from 'firebase';n
n
nWe now need to initialize it like so just on top of the @NgModule decalaration:
n
n
firebase.initializeApp(config.firebasConfig);nn@NgModule({n declarations: [n MyApp,n n ],n
n
nGood, we are set and our Ionic App is now know how to talk to our firebase project.n
n
n
nDownloading Resource File
nI have setup some dummy products images and also have created a json database for this tutorial.
nnnnn
nFor you to follow along, download the files from here.
n
nThe downloaded files structure should look like so:
n
n
n
nnnnn
n
nHow to use the Resource Files
nCopy the three folders – Categories,products and sliders into the \src\assets\imgs. The structure should look like so:
n
n
n
n
n
nThe “ionic-firebase-cart.jon” is the firebase database that we will be using. Login to your firebase account and select database, in the top right click “Import JSON”
n
n
n
n
nIn the modal that will be presented, browse and choose the file and click “Import“.nnnn
nNow that you have done all these, in the second part of this article we will dive int coding our shopping cart application.
n
nSee you in the next part.