Build Instructions

Collapse

• 1

  Setup Ionic application development environment

  • Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”) and use Cordova to build/deploy as a native app. Therefore, we need to install a few utilities to get developing.
  • Node.js
    • download and install the latest version of node.js
  • Open terminal window(Mac) or command prompt window (Windows)
    • install Cordova and Ionic with the following command:

      • npm install -g cordova ionic 

        Note: for Mac user can add "sudo" in front of the command depending on the system configuration

  • Create an ionic app with the following command

    •  $ ionic start helloWorld blank

       Note: "HelloWorld" will be the application's name and it is build with a blank template. There are many different types of starting template available on ionic framework. 

    • List of templates provided by ionic:

      • tabs - a simple 3 tab layout

      • sidemenu - a layout with a swipable menu on the side

      • blank - a bare starter with a single page

      • super - starter project with over 14 ready to use page designs

      • tutorial - a guided starter project

  • In this case the template that I am using is blank template so is easier for me to customise my UI deisgn
  • Type the following command to cd into the folder that was created and run with the serve command

    • $ cd HelloWorld $ ionic serve 

      For more reference: https://ionicframework.com/docs/intro/installation/
      

  ---

• 2

  UI Design

  • For UI design, I have make use of the following reference:
    • Git Hub Source Code: https://github.com/yannbf/ionic3-components
    • Live Demo: https://yannbf.github.io/ionic3-components/

  The source code above consist a full set of ionic 3 components and sample. Therefore, I make use of the examples and design the following UI pages for my project.

  Sign up Page

  • User sign up with their email account and set a password
  • Validation: 
    • Verify on email address and password with at least 6 characters. 
    •  Email must not be the same as the existing user's username. 

  Login Page
  

  • User login with their registered email account and their password

  • Validation:  
    • validate email address (must be registered user) 
    • the length of the password must be 6 character

  
  

  Dashboard

  • Monthly Spending Category
    • Users are able to view their spending amount on each of the categories and they are allowed to click on the legend to filter and click on the graph to view the exact amount spent. Information such as the Total Spending for the current month and the Current monthly Budget is shown to the user directly so they are able to capture this information quickly. The progress bar is use to monitor their budget effectively. 
  • There are 3 different Budgeting Status as shown below:
    • No Budget is Set - the progress bar will turns into dark grey color.
    • An icon of unhappy face is shown above the progress bar.

  • Budget On Track - the progress bar will turns into green color and displays the percentage of the current spending amount over the budget amount set. This is to keep track of current spending amount with relation to the budget set. 
  • An icon of smiley face is shown above the progress bar to show that they are on track of the budget.

  • Budget Exceeded - the progress bar will turns into red color and displays the percentage of the exceeded amount as compared to the budget.
  • An icon of "money flying" is shown above the progress bar to show that they have overspent their budget.

  • Daily Spending
    • Users are allow to view their daily spending over the week from Monday to Sunday
  • Monthly Spending
    • Users are able to view their past 6 months's spending record, included their current month's spending, so they can compared their spending over the months. 
  • Edit their current month's budget
    • User are able to set their current month's budget amount hence this will derive the budgeting status.

  Add an expense record

  • In order to create an expense record, user have to key in the following details:
    • Date
    • Amount Spent
    • Category of the Spending
    • Description
    • Remark (Optional field)

  
  

  Retrieve list of Expense Record

  • Users are able to view the their Expense Records and display the above details and the amount spent.
  • Users are also allowed to perform a search function over the description, remark and amount spent, so that they can navigate to a specific record quickly when is needed.

  
  

  Update Record

  • Allow users to update specific expense record.

  
  

  Barcode Scanner

  
  

  • Barcode Scanner which allows the user to scan the barcode on the item that they have purchased and retrieve the details. Note that currently, I only managed to find an online database that helps to manage the product data which only able to retrieve the description of the product. Therefore, other information still required the user to key in. The online database allows people across worldwide to add the product's barcode details and item details. Further details will be provided in the Code Implementation.
• 3

  Set up firebase and login with firebase authentication

  import { ExpenseProvider } from '../../providers/expense/expense';

  I have make use of the following reference to set up my firebase: https://javebratt.com/ionic-firebase-tutorial-intro/

  • Command to install firebase:

  $ npm install firebase --save

  • Go to the src/app/app.component.ts and import the firebase with following code:

  import firebase from 'firebase/app';

  • Enter into the constructor of the app.component and call the initialise app function:

  firebase.initializeApp(); 

   This function takes a config object as a parameter, and the config object has all the API keys to connect to Firebase.

  • To get that config object for the app, go to the Firebase’s Console,  and click on "Add Firebase to your web app". Every database will have different configuration for this. 

  var config = { apiKey: "", 
  authDomain: "", 
  databaseURL: "",
   projectId: "",
   storageBucket: "",
   messagingSenderId: "" }; 

  • Enable the firebase authentication by enter into Authentication > Sign-In Method > Email and Password and enable the Status for email and password.
  • Create Authentication Provider to handle the authentication related interaction between the application and the firebase. We can create multiple providers to manage the communication between the firebase and the application. Therefore, I have also created an expense Provider and Profile provider to manage the program. The following is an example of how the provider works:
  • Create the Auth provider:

  $ ionic generate provider Auth 

  • Go to the folder providers/auth/auth.ts to and add the following codes:

  import {Injectable} from '@angular/core';
  import firebase  from 'firebase/app';
  import 'firebase/auth';
  import 'firebase/database';
  
  @Injectable()
  export class AuthProvider {
    constructor() {}
  
  
    loginUser(email: string, password: string): Promise<any> {
      return firebase.auth().signInWithEmailAndPassword(email, password);
    }
  
    signupUser(email: string, password: string): Promise<any> {
      return firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(newUserCredential => {
          firebase
            .database()
            .ref(`/userProfile/${newUserCredential.user.uid}/email`)
            .set(email);
        })
        .catch(error => {
          console.error(error);
          throw new Error(error);
        });
    }
    resetPassword(email:string): Promise<void> {
      return firebase.auth().sendPasswordResetEmail(email);
    }
    logoutUser(): Promise<void> {
      const userId: string = firebase.auth().currentUser.uid;
      firebase
        .database()
        .ref(`/userProfile/${userId}`)
        .off();
      return firebase.auth().signOut();
    }
  
  }

  • Explanation
    • LoginUser(email:string, password:string): Promise<any> {}
    • This function make use of the firebase signInWithEmailAndPassword(email, password) method, which takes in an email and password and logs the user into the application. The way that firebase works, it does not have a regular "username" login, therefore, user have to register with their valid email as the username. All the authentication error messages will be handle by firebase such as checking for existing user record when new user register check for the match record when user login.

  • signupUser(email: string, password: string): Promise<any> {}
    • This function takes in the email and the password from the user input and created a new user record in the firebase.
    • The portion of the code .ref(`/userProfile/${newUserCredential.user.uid}/email`).set(email); is a reference to the userProfile node inside the database. The reference is creating a new node inside the userProfile node and the UID identifies the node, the UID is firebase automatic id generated for the user and it is the unique identifier. Therefore, it add a new node of "email" under every registered user.

  • logoutUser():Promise<;void>{}
    • This function basically check for the current user and log the specific user out.

View all 8 instructions