Firebase firestore in the forum application #2: Local server, Routing and template, Login Gmail
utopian-io·@duski.harahap·
0.000 HBDFirebase firestore in the forum application #2: Local server, Routing and template, Login Gmail
#### Repository
https://github.com/firebase
#### What Will I Learn?
- Local server with firebase
- Routing and system template
- Login with Gmail
#### Requirements
- Basic Javascript
- Install Firebase
#### Resources
- Firebase-https://firebase.google.com/
#### Difficulty
Basic
### Tutorial Content
In this tutorial, we will continue with our previous [tutorial](https://steemit.com/utopian-io/@duski.harahap/firebase-firestore-in-the-forum-application-1-firebase-init-and-cloud-backend-function-1557758217688) about forum applications using Firebase, in the previous tutorial there were not many things we made. but you have to follow the tutorial because the previous tutorial discussed the preparation and initialization of this project. For those of you who don't know what firebase is, you can visit the official documentation. let's just continue this tutorial.
### Run forum app in local server
We have done a lot of preparation and this tutorial we will start making our forum application with database Firestore, the first thing to do is to create a local server to use in the development process of the application that is being created, remember this is only a *development* process not live. We can create our local server in the following way:
**Run local server**
Because we have installed node.js then we can create a local server that will run the firebase application, here I will do a **firebase server**.
```firebase server --only functions, hosting```
What we will run on a local server are ***functions*** and ***hosting***. Because that's what we choose when we first initialize the project.
**Routing in firebase**
If it works then we can access routing that we made in the previous tutorial, here is the routing we have created:
```
app.get('/forum', function(req, res) {
res.render('home')
});
```
by using an ***express*** instance from ```const app = express();```. We can create a routing, we created the instance in the previous tutorial. Keep in mind that Firebase does not provide a routing system but we can use system routing from **Express** which is a framework from **Node.js**.
To make routing quite easy, we only need to use the ```get()``` function which has ***two parameters***. The ***first*** is the **URL** and the ***second*** is the *callback* function ```function(req, res) { }``` that has the *request* and *response* parameters.
**Render template**
If we look at routing '/ forum', then we can see this URL will render a template ```res.render('home')```. the template that will be rendered is **home**. The template system that we created is quite simple, you can see it in the previous tutorial [here](https://steemit.com/utopian-io/@duski.harahap/firebase-firestore-in-the-forum-application-1-firebase-init-and-cloud-backend-function-1557758217688). I will create a *directory* that will contain the templates that will be used in this forum application.
```
app.engine('hsb', cons.handlebars);
app.set('view engine', 'hbs');
app.set('views', './views');
```
We can see in the code above I made a folder with the name ***views***. This folder will become our template directory and we can see in the picture below in that folder we have a **home** template to render in the ```/forum```URL.
And in the **home.hbs** the template I will use a simple template that uses a boost, here we can that we have successfully rendered the template in the routing ```/forum```. The *extension* of the template that we are rendering is ***.hbs***, this is the extension of the handlebars template. we can see the template that we are rendering like the following:
**home.hbs**
```
<!DOCTYPE html>
<html>
<head>
<title>This the homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hi, Welcome to forum app in firebase!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</body>
</html>
```
well, we can see in the picture above we have successfully *rendered* the page in the routing ```/ forum```.
<br>
### Firebase configuration on the project
Here we will start using firebase, before using it we must configure it first, here firebase provides 3 options. For configurations on ***Android, iOS and on the Web***. because we will use it on the web we can choose the configuration on the web, for more details we can see in the picture below:
I will configure it via **CDN** to make it easier. then on the **home.hbs** page, we can add the *script* given by firebase as you can see in the picture above.
**home.hbs**
```
<!DOCTYPE html>
<html>
<head>
<title>This the homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBjqtIMpcWqEVA1SsI5lkDhDPQZHvdaKYM",
authDomain: "forum-firebase-b3205.firebaseapp.com",
databaseURL: "https://forum-firebase-b3205.firebaseio.com",
projectId: "forum-firebase-b3205",
storageBucket: "forum-firebase-b3205.appspot.com",
messagingSenderId: "831909117594",
appId: "1:831909117594:web:05602291ce42908b"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hi, Welcome to forum app in firebase!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</body>
</html>
```
Of course, every script given by Firebase is different from other projects if you follow it, you definitely have a different configuration script than the one in the tutorial. so you can replace it with the existing script.
### Login with Gmail
Well after configuring firebase, now we will make our first feature, the authentication system. there are many auth systems that we can make, which we will learn this time is *auth* with a **Gmail** account. *What* we need to do first is to ***enable*** the auth system with **Gmail**. By default, the value is still **disabled**. We can *change* it in our **firebase console**. For more details, we can see in the picture below:
**Enable auth with Gmail**
Well, after we enable auth with **Google** we can create a script for the login in the next section
**Create a script for Gmail login**
For the auth section *script*, I will *separate* it and in a separate file, here I will make it in the **public/assets/js/auth.js** directory. For more details, see the following image:
and the following is the contents of **auth.js**
```
var auth = firebase.auth();
function login() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
alert("Successfully logged in..");
}).catch(function(error) {
console.log(error)
});
}
```
- We can create an instance of ```firebase.auth ()``` to use the auth system ```var auth = firebase.auth();```. Here we will create a function ```login()```. which will be *called* on the interface button on the **frontend**.
```
<button class="btn btn-danger" type="button" name="button" onclick="login()">Login Gmail</button>
```
- And then we can choose to provide what we will use for **auth**, here we will use **Gmail** so we can *define* it like this ```var provider = new firebase.auth.GoogleAuthProvider();```. So later you can replace it with the provider you want, like ***twitter, facebook, GitHub or something else***.
- Then we can pass the provider variable into the ```signInWithPopup()``` function to bring up the login popup, thef function is **promise** so if it ***works*** we can see it in the function ```then()``` and if it ***fails*** we can see the results in the ```catch()```.
- Now we will test whether our Gmail login is successful, here I will test it with my Gmail account, it's **millea1994@gmail.com**. If the **Gmail** login is successful, we will alert ``` alert("Successfully logged in..");```.
.gif)
We can see in the demonstration above, we have successfully logged in with a Gmail account on our forum application. have finished our tutorial this time. hopefully, it will be useful for you, thank you.
### Curriculum
- **Forum app**
[Firebase app#1](https://steemit.com/utopian-io/@duski.harahap/firebase-firestore-in-the-forum-application-1-firebase-init-and-cloud-backend-function-1557758217688)
#### Proof of work done
https://github.com/milleaduski/firebase-forum👍 hdu, pgshow, imisstheoldkanye, rai-jin, trailreward, elviento, zugs, gamezine, minminlou, jadabug, sudefteri, reazuliqbal, statsexpert, neokuduk, literaturk, rasit, maveraunnehr, lordgangler, pataty69, martusamak, munhenhos, bhaski, rafaelmonteiro, accelerator, leitrafboahu, jessicami, amosbastian, ridlavsbohun, makaylat23, taylorsed50, vieletporid, swerinocsin, tecawinsri, elizabethg4, emilygck9b, oliviaty, alyssatn2brro, distcountevi, scenjovixa, mightypanda, emily70f0pwhit, rufans, jaff8, asaj, fego, ulockblock, buckydurddle, jinger, codingdefined, mirkosche, steemitri, luc.real, espoem, ascorphat, aleister, shammi, mops2e, dedicatedguy, portugalcoin, mcfarhat, wikita, themarkymark, loshcat, steemitboard, irelandscape, miniature-tiger, properfraction, utopian.trail, daan, tykee, silviu93, dakeshi, vishalsingh4997, elear, zoneboy, mcyusuf, gentleshaid, aussieninja, sargoon, darewealth, dongentle2, jubreal, rollthedice, jk6276, dssdsds, jayplayco, stem-espanol, mrsbozz, jk6276.mons, jaxson2011, techslut, minersean, erikaflynn, jakipatryk, xyzashu, suesa, tsoldovieri, azulear, carloserp-2000, che-shyr, didic, emiliomoron, tomastonyperez, elvigia, josedelacruz, joseangelvs, viannis, erickyoussif, techcoderx, ubaldonet, reinaseq, lupafilotaxia, fran.frey, lorenzor, iamphysical, felixrodriguez, ivymalifred, vjap55, luiscd8a, yusvelasquez, alaiza, lapp, steemtpistia, crassipes, agrovision, giulyfarci52, wilmer14molina, suesa-random, rewarding, vanarchist, harry-heightz, backtomining, steem-ua, eastmael, eliaschess333, dalz, helo, amestyj, alexs1320, cpufronz, scienceangel, cyprianj, yu-stem, eniolw, alex-hm, utopian-io, tombstone, jga, cryptouno, dicetime, carlos84, anaestrada12, ennyta, kaczynski,