#5: Creation of FoodTree for Businesses

This week, I started to create a website that could possibly be used together with the application that my team and I are working on. This website would be used for advertising purposes, and for business users to sign in and handle the sending of notifications at a centralised location.

Screenshots of the website

I made use of Firebase Authentication as well as Firebase's Real-Time Database to code this portion of the web application. With the help of Firebase's documentation on how to code this part, I managed to complete it within a week! I've also learnt a lot about coding the database portion to send, update and delete data which was useful when I was making tweaks to the Swift project.

With the help of HTML, CSS and JavaScript, I managed to create the front-end of the application with ease. However, there was still the need to learn how to code the database portion using JavaScript.

The authentication portion consists of 3 major parts: Sign In, Sign Up and Sign Out.

While learning how to code these 3 parts, I've also learnt how do error handling as well as the learnt how to use event listeners to listen to clicks or changes in the interface.

Below is a snippet of what I've done for the Sign In part of the authentication.

Over here I've checked whether the use is signed in or not -- `firebase.auth().currentUser` is a Boolean function that checks whether a current user exists (if it doesn't exist, it will return a null). If there is current user and the function is activated (using an event listener), the user will be signed out and redirected to "index.html" page.

If there isn't a user that is currently logged in, the web application will first validate the fields entered. After which, error handling is implemented -- if the error code was "auth/wrong-password" (a full list of error codes can be found on firebase's documentation), an alert will be shown.

After implementing authentication:

Linking Firebase database:

I first created a function to write user data into firebase. After which, I made use of .push({ to push the information my team needed from the business users' side to firebase.

A lot of testing was done to ensure that the data writes to the database correctly. However, a problem that was related to database rules occured. I will attempt to solve this error in my next post.

There was another error that left me dumbfounded. According to the Internet and countless youtube videos, to redirect the user to the Home Page, I should be typing `window.location = "home.html"` in my code under this section.

```

firebase.auth().onAuthStateChanged(function(user) {

if (user) {

[redirect here]

...

```

However, the home.html page appears to be in an endless loop when I placed it there. Even after I tried to break it out of the loop, it did not stop! I suspected that there was an error with the authentication portion.

To sum it up, this week, I have created part of the web application and also linked firebase to it (though there were some errors). In the web application, I have also enabled a feature for users to upload their profile picture (using Firebase Storage).

Wan Ning