Ionic Firebase Realtime database tutorial: This article, we’re going to create a simple Todo app with firebase backend with CRUD (create, read, update, delete) operation. Before we starting our project we need update rules on firebase database for accessing
Note: For testing purpose, we have added open rules, which means, we don’t added any security rule so that any one can access your database if they have credentials.
Let’s create new project & add required dependencies
ionic start todo blank cd todo ionic cordova platform add android ionic cordova platform add ios npm install --save firebase
Once we added, we need to initiate our firebase from app.component.ts
firebase.initializeApp({
apiKey: "xxxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx"
});
Working with home.html & home.ts
Creating database Reference
Since we’re performing CRUD operation from single file, we can create global firebase database reference. here I have referred todo child
firebaseDBRef: any = firebase.database().ref('/todo');
Adding New data
We’re creating a simple form for adding task with title, date, & time. when user click add task, we need to push our data into firebase realtime database using <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">this.firebaseDBRef.push(this.task)</span> with additional data such as createdAt, task completed status
addTask(){
this.task.createdAt = new Date();
this.task.isCompleted = false;
this.firebaseDBRef.push(this.task);
}
Reading data
For reading data (tasks) from firebase, we’re using <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">this.firebaseDBRef.on('value', function(){ ... })</span> for continuous monitoring.
getAllTask(){
this.firebaseDBRef.on('value', tasksnap => {
let tmp = [];
tasksnap.forEach( taskData => {
tmp.push( { key: taskData.key, ...taskData.val() })
});
this.tasksList = tmp;
console.log(this.tasksList);
})
}we have created tmp array because, tasksnap has unknown key (Which is dynamically generated). It’s hard to refer, so we created our own array with forEach() & push into taskList at end. based on taskList, we’re generating sliding on ui
<ion-item-sliding *ngFor="let task of tasksList;">
<ion-item>
<ion-icon style="color: green;" *ngIf="task.isCompleted" name="done-all"></ion-icon> {{task.title}}
</ion-item>
<ion-item-options side="left">
<button ion-button color="secondary" (click)="updateTask(task.key)">
<ion-icon name="done-all"></ion-icon>
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="danger" (click)="deleteTask(task.key)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
Updating database:
When user slide from left to write, we have updateTask() where we’re updating our task completedStatus as true,
updateTask(key){
this.firebaseDBRef.child(key).update({ isCompleted: true });
}
Deleting task from database
When user click delete button we need to remove child from firebase. we have used this.firebaseDBRef.child(key).remove() for that.
deleteTask(key){
this.firebaseDBRef.child(key).remove()
}Download ionic firebase realtime database example
