Building web app using Firebase - Part 2 (Create API and Read Write DB)
Our First Web App Using Firebase |
Continuing from the previous post, which is only just one time only setup, let's further advance on doing the codes. After the Realtime database is ready and you have created a document, we need to develop the code. Just create a typical Node-js project as described below:
Write our first Firebase function
After you created the document you followed from the previous post, you already have the read and write API to your document. For example, you will be able to read your "user_detail" document using HTTP GET Request to "https://[PROJECT_ID].firebaseio.com/user_detail.json".
More on using Rest API can be read here https://firebase.google.com/docs/reference/rest/database.
Although Firebase RealtimeDB has its Rest API implementations, sometimes, When we need some underlying logic for our app, we need to create an API. But here's just an example of how to create a simple API using firebase functions.
1. On your project, initialize the folder to use firebase: firebase init functions
2. Choose the existing project when prompted
3. Chose Javascript as the language support when prompted
4. When you ask to install the dependencies, choose yes
5. When you are working on Firebase functions, the APIs will be located inside folder functions
6. There are commented index.js, lets for a moment uncomment that code to create our first API
7. To run our functions locally using commands: firebase emulators:start
8. On the console, find the first endpoint you created (near "http function initialized")
9. Example : (http://localhost:5001/your-project-id/us-central1/helloWorld).
10. To test its response, You may hit that API directly using Browser or Postman
Develop Front end using Firebase hosting
The front-end code to deploy into firebase hosting must be inside a public folder, the default root folder for firebase hosting; you put your final index.html and all the assets inside that. You can use any build tool or framework as long as its final build is placed inside the public.
For the moment, let's just follow the KISS principle. This will be a simple page for displaying user detail:
1. Navigate your terminal to your firebase project
2. Initialize the firebase hosting: firebase init hosting
3. Follow all the next setup
4. Inside the public folder, create an index.html, which is a typical default file for web application
5. Continue to develop your front end by putting files inside that folder
6. Write some vanilla JS to fetch the data for Firebase Realtime database Rest API
7. Here's what our example index.html inside the public folder
The code is relatively simple; it is just a Jquery to fetch the data from Realtime Database using its native API. Note, if you look at something <script defer src="/__/" that's a Firebase reserved URL. Don't worry; it will work.
8. Run hosting locally, on your project path using commands: firebase emulators:start
9. Your local app will run at http://localhost:5000/
All the code can be cloned from this Github repository here.
Following the tutorial, we will do some more exciting stuff with firebase; for example, we will create a standard feature like user authentication. So please read the next part.