Lab Assignment 7: Ionic with Firebase
Class Id: 8
Student Id: 16234180
Student Name: Moulika Chadalavada
The main aim of this tutorial is to develop a ionic application using Firebase. Firebase helps to develop high-quality apps, grow user base. Each feature works independently, and they work even better together. YSlow Analyzer is used to analyze web pages and to improve performance based on a set of rules.
Brackets,Ionic,Angular JS,YSLOW,Firebase
Plugins Used - GeoLocation ($cordovaGeolocation), InAppBrowser ($cordovaInAppBrowser), Facebook ($cordovaFacebook)
This is food app where the login and registration of user is handled using Firebase and all the validations are also handled. Once the user logs in, in the home page the food items list is displayed and the items can be selected. The selected items are added into cart from where the user can checkout the items. The purchase can be done using Netbanking/Credit/Debit. Also in settings page the user can change mobile number, password, email, address etc. The updated details are stored in Firebase, so once again if the user logs in the updated details will be reflected. If the user selects address Geolocation plugin is used to show the exact location on Google maps.
The below is the login page, where email id and password is mandatory. If both the details are entered then the details are checked in Firebase and allows the users to login.
Validations will be thrown if email id & password is not entered. Also if invalid email id is entered or the email id is not previously registered (**checked in firebase**).
The below is the registration page from where new users are logged in with Name,Email,Password and Mobile. The newly registered details are stored in **Firebase** if all the mandatory details are entered.
Validations will be thrown in registration page if email id/password is not entered or invalid email id is entered. Also if already existing email id is entered then validation will be thrown.(**Checked in firebase**)
Once the user successfully logs in, the below menu page will be displayed on home page. All the food items and its respective prices are stored in **Firebase**. When ever items manipulation is done in Firebase and when user logs in the updated prices and items will be displayed in menu. In the menu initially the cart will be '0' when user selects items the the count will be increased. In the below image the items selected is **'3'**.
Once the items selected, in the side-menu there are various options to users. If **MyCart** is clicked then all the items selected in Menu will be displayed with Total Amount that has to be paid (For example: New Chicken Maharaja :$10 + Thumpsup: $5 + Ice Coffee : $6 = Total Amount : $21).
In MyCart if **Checkout** is clicked then it will be redirected to InAppBrowser where the delivery address and Mode of Payment (NetBanking/Credit/Debit) is selected as shown below. Once **Pay** button is clicked the order is booked and can tracked under User Orders.
In the side-menu if the user clicks on **Settings**, the user profile will be displayed. Here the user can change password, update address and mobile number. If the user updates mobile number and password the same will be stored in **Firebase** as shown below. Once the password is updated then the user has to login with updated password, as this is stored in Firebase.
In **settings** page the user can enter new address or update the existing address. This Address details will also be stored in **Firebase**.
In the settings page once the user selects address and clicks on 'Get your exact Location', then in Google maps the exact Location of the entered address will be displayed as shown below (coradova-plugin-googlemaps). The user can also delete the Address that is selected in Settings page.
The webpages are tested in YSLOW. YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites. The grades for individual rules are computed differently depending on the rule.
The below are the screen shots for the application.
1. YSLOW Login
2. YSLOW Registration
3. YSLOW Settings
4. Test Cases
