I built a Tip Calculator App!

Yeah, I know.  There are a bunch of tip calculator apps out there and it’s not a revolutionary thing to do.  I fully understand this but I wanted a simple project that I could do all by myself.  Something that will test what I have learned and test my ability to find solutions to my problems.  Well I am glad to say that I have succeeded.

Before I delve into the story of this app, I’ll give you a little back story on my progress.  I started getting interested in app development when Swift was announced.  I thought “Its a new language, people are going to have to learn it so I might as well join them.”  Well I learned a little bit on and off during my senior year of high school.  It wasn’t until Rob Percival’s iOS 9 course was announced that I really started to learn as much as I could.  I started following his tutorials as soon as that announcement was made (I had the iOS 8 tutorial so I got the iOS 9 one early).  I also started browsing /r/swift a lot and even joined another programmer on a task management app project.  So far, I have been pushing myself to code everyday.  Anyway, enough about that let’s get onto the app.

I have had this idea for a tip calculator app for a while.  Essentially I was going to split it into four views.  Top view for the quality of service, second view for the tip amount, third for the bill, and fourth for the tip amount and total.

Above is a prototype I designed in Sketch 3.  The top 2 sections were going to be horizontally scrolling views.  Say for example your service was good, it would center on 18% but you could scroll to the desired amount.  I couldn’t figure out how to make a good horizontal scrolling view so I moved on.  If anyone knows, I would love to hear what your suggestions are.

Main Storyboard Xcode

I started my work in Xcode this morning (August 11) with laying out the UI.  I would be lying if I said I didn’t get frustrated with Auto Layout.  It took several tries to line up the buttons and such the way I wanted them to.  Eventually it almost worked.  It looks good in the iPhone 5, 6, and 6 plus simulators but not much else.  I personally think its acceptable considering most people who would probably use an app like this would probably use it on an iPhone, and a relatively new one at that.

Moving on to the code side of things, I was going to try to use a UICollectionView for the quality of service part but couldn’t find any resources on how that worked and how I could make mine work the way I wanted.  After a couple of hours of researching, I ended up going climbing with some friends.  It was a good break from all this coding.  When I got home, I mapped out a few buttons and tested some primitive code that would get the user’s input and calculate the tip amount and the total.  I took another break to slackline a bit and then returned to start the grind.  I found some stuff on GitHub for a horizontal picker view but couldn’t get it to work so I resorted back to the standard vertical one.  I spent a bunch of time trying to figure out where my errors were.  I followed this example pretty closely but still was confused on why it wasn’t working.  After quite a while of searching my code, I finally realized I used the wrong variable name.  My code said return qualityPicker.count  when it should have said return dataPicker.count.  It was pretty embarrassing noticing that after a long search for solutions although I admit it felt pretty good to have debugged my own app a little bit.

With that solution solved, I set up my text field, buttons, and labels at the bottom.  To calculate the tip, I ran an if statement to see if the text field was not blank.  If that was true, it multiplied the user’s input by the amount on the button.  Each of the 3 buttons had this code.  I probably could have made it more concise but I’m not sure how to at the moment.

Calculate Tip

When I tested it and it worked, I was pretty thrilled that I wrote my own code and it worked the way I wanted it to.  After that hefty section was complete, I went back through for some finishing touches.  I converted the keyboard to a decimal pad, made all of the labels and buttons white, and even figured out how to change the color of the status bar and the picker view.

Decimal keyboard

Quick rundown on how the app works:

User Interface

The user enters their bill into the top text field, touching anywhere in the view to dismiss the keyboard.  Next, they use the picker view to choose the quality of their service (poor, okay, good, and great).  Depending on which one they choose, the three percentages updates.

  • Poor
    • 8%  10%  15%
  • Okay
    • 10%  15%  18%
  • Good
    • 15%  18%  20%
  • Great
    • 18%  20%  25%

Tip and Total

When the user taps one the percent they desire, the labels update to show the amount for tip and the total amount of the dinner or service.

If the user taps a button without entering the amount, the bottom label reads “Please enter a number” to remind them to enter their bill and to prevent the app from crashing.

I finished this app in a day, all by myself.  It feels pretty good to finally create something without following a tutorial and copying their code.  I wrote 200+ lines of code in ViewController.swift and even wrote a line in the AppDelegate to change the color of the status bar.  This project is a success in my book and I will continue to make it better.  Hopefully make it just like my prototype, and then I will consider releasing it.

If anyone has any suggestions or solutions to some of my problems, I would love to hear them.  I am not close to finishing this app but its a working program that could be released now if I wanted to.  In my book, I finished this app and it feels damn good.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s