[Tutorial]: Ionic Tutorials (Ionic and firebase integration: Understanding the concept)

in utopian-io •  5 months ago

ionic.jpg
image source
Repository: Ionic Github Repository

Software Requirements:
Visual Studio Code(Or any preferred code editor)

What you will learn:
In this tutorial you would learn about intergrating firebase into an ionic project covering the following concepts

  • How to integrate firebase into an ionic project.
  • The packages you would need for this
  • Common problems faced when integrating

Difficulty: Intermediate

Tutorial
In this tutorial i would be walking you through how to properly integrate firebase into an ionic application which was quite a hectic task for me as my packages were getting mixed up and the official documentation is deprecated.

So lets get to it

What is firebase
Firebase is a google developed platform for the back-end of applications. It makes integration of authentication and storage way easier and helps manage servers regardless of where you application is being used. Firebase helps new developers who arent good at developing a back-end have an alternative that is better than hard-coding the back-end yourself.

What you will need to use firebase in your application.
When i tried using firebase for the first time, i went to the official documentation Here to try to integrate firebase into my application. When i tried this with my ionic 3 application. I couldn't compile my apk anymore and kept falling into a lot of errors while developing. I uninstalled the packages and plugins and found a solution to my problems which is stated below.

Startup
After you have created a firebase app Here

Make sure you have angular and ionic installed then run the following command to use firebase in you app.
While in you application
Choose webapp as you choice not ios while developing with ionic so this would be able to work in both ios and android applications.
Screenshot (67).png

Next comes the tricky part.
The reason that i had problems with firebase is that the latest releases changed the way that the promise is resolved from each firebase function. So if you install the latest firebase like this

npm install angularfire2 firebase --save

You would be getting a ton of errors about how promises could not be resolved. In another tutorial i would be talking about how promises work and the the probable reason for this error, but for now use this command to prevent that version error.

npm install angularfire2 firebase promise-polyfill --save

Firebase cannot be used singularly so it is used with angularfire2 which is the package for using firebase in webapps.
The next thing is linking the application to your project.
Head to you app.module.ts file.
When you choose the webapp choice for your application firebase you should get a variable like this.

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

Note: I changed it from a variable to a constant before adding it to my app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

//These three imports help you get across to the firebase database and user authentication
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),//This is where you initialize firebase in your application
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

This is the app.module.ts file for a blank starter ionic template generated with this command

ionic start FirebaseIntegration blank

Also take note of the three import at the beginning of the file and where i initiated the app as shown by the comments.
In the next tutorial of this series, i'd be getting into user authentication and database storage using firebase.

To find the code for the app.module.ts file as used in firebase you could head to my Github

See you in the next tutorial

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution @yalzeee.
We've been reviewing your tutorial and suggest the points below:

  • Nice work on the explanations of your code, although adding a bit more comments to the code can be helpful as well.

  • We recommend you aim for capturing at least 2-3 concepts.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @portugalcoin! Keep up the good work!

Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!

Reply !stop to disable the comment. Thanks!

Hello! I find your post valuable for the wafrica community! Thanks for the great post! We encourage and support quality contents and projects from the West African region.
Do you have a suggestion, concern or want to appear as a guest author on WAfrica, join our discord server and discuss with a member of our curation team.
Don't forget to join us every Sunday by 20:30GMT for our Sunday WAFRO party on our discord channel. Thank you.

Congratulations @yalzeee! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 3000 upvotes. Your next target is to reach 4000 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemFest3 and SteemitBoard - Meet the Steemians Contest

Support SteemitBoard's project! Vote for its witness and get one more award!

Hi @yalzeee!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @yalzeee!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

This post has received a 25.00% upvote from @daeshawn!
You deserve an upvote for your post. Keep posting and I'll be around. One upvote deserves another please feel free to upvote this comment if you like what I do.