RESTful API with Firebase

Apart from the trouble-free configuration and the integration I discussed in my previous article, Firebase is REST enabled. So the users can implement their applications using REST services together with Firebase. I would like to discuss few steps about the way we can implement RESTful APIs in our Angular 2 application with Firebase data collection.

Select your collections you created and select one of the data your entered by click on it’s hyperlink as I highlighted in the image.

Then you can see an URL on top of the collection.

Lets analyse a little bit about the URL returns by the firebase when we try to view data.

https://buyandsell-bcfb6.firebaseio.com/classifiedPosts/-KsNUWPrwF-X5p05ddQA

Just try to decompose this into few parts where we can easily map with our application.

  1. https://buyandsell-bcfb6.firebaseio.com
  2. classifiedPosts
  3. -KsNUWPrwF-X5p05ddQA

If we carefully looking to this we can see that the first part is our data collection link and the second part is the table name. Third part is the _id of the selected data. Lest try to use postman in your google chrome and see what we can get if we use this link. In this case we have to append “.json” at the end.

See above json content we got. This is the data set we retrieved. So now we can understand that we do not need to implement a REST API to read database and get the data from Firebase and return it to us. It is already implemented to us in Firebase. We can call Firebase directly using an http get and read the content of the collection.

In case if you want to implement RESTful API in your Angular 2 application simply you can add methods to your “…component.ts” and to the service class to access data as below example.

As an example we can try to implement a method to remove a classified post. First we have to implement a function in our component class to access service.

deleteClassified(single: Classified){
let verify = confirm(`Do you want to delete this classified?`)
if (verify == true) {
this.classifiedAdminSVC.removePost(single).subscribe(
() => alert('Classified Deleted!'),
console.error
);
this.router.navigate(['/admin/']);
} else {
alert('Nothing deleted!');
}
}

removePost is the method we have to implement in our service class to access our Firebase collection.

removePost(deletePost: Classified): Observable<any>{
let url = 'https://buyandsell-bcfb6.firebaseio.com' + '/classifiedPosts/' + deletePost.id + '.json'
return this
.http.delete(url);
}

Below courses will help us to learn more about Firebase and Angular integrations.

https://angular-university.io/course/build-an-application-with-angular2?grpp=f&utm=ytfb&couponCode=FIREBASE_YOUTUBE

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.