Building bigger (and beautiful) apps using Ionic 2

Hi Friends,

Hope you all celebrated Easter. This post is again a response post to several readers’ queries.

Well most of you have been asking me how to use all the stuff I post here on a regular basis to build a real-world Ionic 2 app. I agree that I mostly post snippets that could be used along with a regular app and not an app as a whole. So, I decided to take it a step further and show you how to build a bigger and nicer app using Ionic 2.

 

Now, first of all you must take into account that Ionic 2 is still in beta stage. But that doesn’t mean that we could not make a killer app with the existing release. We will build a expense management or rather an expense splitter app. It will enable the user or a group of users to split expenses in an event equally. A suitable use case would be room-sharing where the rent is to be shared equally among the residents.

 

Prerequisites:

Please have a look at Rest Api Authentication using Ionic 2. We will be building our app on this codebase. Or rather this is like the sequel to that series.

The complete code for this tutorial is available below:

Frontend – Click here.

Backend – Click here.

This is how the finished app will look like.

Let’s begin.

First of all clone ionic2-authentication and ionic2-authentication-frontend from here and here respectively.

Now let’s get started with the front-end first.

Open up the app/pages directory and create few pages as shown below.

Kazam_screenshot_00019

(Note that I have moved the service files separately in a services directory.

Now, open up the home.html file and add the below code.

Open up home.scss and add the below code.

We have just styled up the home.html file. Now it will look as shown below.

Kazam_screenshot_00021

(You could do the same for signup page as well).

Now open up the userpage.html and add the below code.

This will add 3 (clickable) cards as shown below.

Kazam_screenshot_00022

Now the first card is used to add a expense, the second one shows how much you owe to people and the third one is used to display how much others owe to you.

To patch these up to the corresponding screens accordingly please open up your userpage.js and add the below code.

Don’t get to import ExpensePage, MoneyowedPage and MoneyduePage in userpage.js.

Now open up expense.html and add the below code.

This will bring up a form as shown below.

Kazam_screenshot_00023

As you could see the select has been populated right.. ? This data comes from the db. Now lets wire up the expense.js file for this page.

Open up expense.js (in the expense dir) and add the below code.

Now, let’s break this down.

  1. I am making use of the expense service to make calls to populate select and save an expense.
  2. The expense amount is split equally before being sent to store in the db.
  3. The name array in datareformat.details contains the name of the users with whom the expense is shared.
  4. The share is the amount corresponding to each user whereas datareformat.expense corresponds to the total expense involved.

Open up expense.js (In the services directory) and add the below code.

Let’s break this down.

This is very simple.

  1. I am making 2 http requests, one get request to get the users from the users collection in the db and one post request to save the expense data(Note that I am also sending authorization header along with a token).
  2. Promises are returned in both functions.

Now let’s start with moneyowed and money due pages.

Open up moneyowed.html and add the below code.

This simply shows how much money you owe to others. You cannot perform any operations on this list.

Open up moneyowed.js and add the below code.

Note that I am simply calling a function in the service and returning the data to an array which is then iterated in the list.

I have also used a onPageWillEnter() method. This is a lifecycle-hook and i will explain lifecycle hooks separately in a different post.

Open up expense.js(In the services dir) and add the method getamtinfo() as shown below.

As you can see, I am simply making an authorized request to the backend and getting data.

Now open up the moneydue.html and add the below code.

Now open moneydue.js file and add the below code as well.

Now this will give us a beautiful screen as shown below.

_pJ8ud

As you can see we are using the sliding list to denote whether a user has paid the due amount.

This is what the front end looks like for our app. Now lets get to the backend.

I will split the backend operations into two.

  1. Rest Api Endpoints and functions.
  2. Middleware

Rest Api Endpoints and functions:

Open up model directory and add a new model file called expense.js. Open it up and add the below code.

This will create a mongoose model with 4 fields. Now open up actions.js file and add the below methods.

We have four methods.

  1. Get users method returns the users to populate in the select.
  2. saveExpense method saves the new expense in the db.
  3. getDueinfo method returns the amount due to the user.
  4. getAmtinfo method returns the amount the user owes to others.
  5. All methods check for authorization.

Open up router.js and wire up url endpoints as shown below.

Middleware:

Smooth middleware code separates real programmers from UI designers and hobbyists.

Middleware coding here is nothing but the code that runs before the expense is saved into our db. As you could see we have only one function to save an expense. So where does the amount owed and amount due get calculated. We have written middleware code that would automatically get triggered whenever a expense is saved and this is what makes it possible.

A simpler example of middleware coding would be to notice that the password is encrypted before the user is added to the db.

Enough talk, lets get started.

Open up model directory and add a new transaction.js file and add the below code in it.

Now open up expense.js (In the model directory and add the below code.

(Note that this code is added before module.exports line.

Let’s break this down.

  1. Whenever an expense is saved an entry is made in the transactions schema.
  2. If the user already owes money to the one who adds the expense, then the amount gets added along.
  3. If the person who adds the expense owes money to the person who gets added then the amount is deducted.
  4. Once the amount is zero the entry gets removed from the collection. (Usually happens when a person pays off this dues and the user clicks on paid).

I know I haven’t explained it enough; Please go through the code and I am sure you would be able to understand.

(Sorry for not adding proper comments in between the code for easy understanding; this took me several hours of writing and testing.)

Now start the back-end and then the front end. Explore the various features of your expense management app.

Watch the video for more details.

If you are stuck somewhere in between or would like to contact me for further suggestions please use the ask me form here.

Thanks for reading guys. I know its a bit (much) bigger post than I write usually. Please let me know your suggestions in comments.

Liked it? Take a second to support admin on Patreon!