What are we learning?
- How to use Firebase as backend
- How to render/upload the record to Firebase
- How to upload/read image to Firebase.
Project Screen Shot
Step 1: Creating project and adding related plugin
Step 2: Configuring Firebase Project
We have to create a project in Firebase for an ionic app we have to select web app.
On clicking on the web app we will get API from Firebase project and add copy this code. Then create a new file in app folder as app.firbase.config.ts file and this code as below.
replace all these dots with your values of API from Firebase. Now we have to import this code app.components.ts as a highlight.
We can control the Firebase authorization but for this project, we are not adding any authentication. To perform CRUD operation Firebase database we have to set the database rule to the public so that we can access without login.
Step 3: Creating Interface For our Project
We will create two page, home page for rendering all course and modal page to add a new course and edit old course.
The above image is the screen shot of the home page. We have plus button on the top right corner to add a new course this will called ModalPage. Add the following code in home.html page
Add the following code in app/pages/modals/modals.ts file
The screen shot of modals.html
Step 4: Adding Course Model
Create new folder models in app folder and add new file course.ts file. Add the following code in app/models/course.ts file.
Step 5: Adding Service Provider for Firebase.
We have to create database code to perform CRUD operation on Firebase and we will add following code in loader file called app/providers/preloader.ts
In database.ts file we are adding two methods one for adding new course information to Firebase and other to render all the existing record in firebase. Add the following code in app/providers/database.ts file
Once we create these two providers then we have added this provider reference in app.module.ts
Step 6: Adding typescript code in home and modals page.
We have already added User interface for both home and modal page. Add the following code to home.ts file
In home.ts file we have import ModalController from ionic-angular library, as for editing and adding the new course we will call modalPage. A Modal is a content pane that goes over the user’s current page. Add the following code in app/pages/modals/modals.ts file