Mobile App Development

August 11, 2015

Tip Calculator

Blog post from August 11, 2015

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.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526236741-4VZO21UVONS3SFBRC5UK/tip1.png?format=750w

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.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526260268-3ASNW6A5WH704GYD4E0A/tip2.png?format=1000w

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 as 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.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526288168-BE24IA4OLMABABB233T0/tip3.png?format=1000w

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.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526341132-7DX3LQTCSHL6KBOHC5GH/tip4.png?format=750w

Quick rundown on how the app works:

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526436802-H8P17BBHU68U3ZDZIF30/tip6.png?format=750w

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.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526385122-H8FU0DB7ADE7IL8LEPFL/tip5.png?format=750w

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.

Swipe Tracker

As a freshman in college, I was given a mandatory meal plan. My plan specifically was 19 meals each week and the counter would reset on Thursdays. My dorm happened to be the furthest one from any dining hall and had an unreliable bus that would run every 15 minutes. This made it hard to eat consistently every day. Some days, especially if it was snowing, I wouldn't eat. It wasn't worth the trek all the way to the dining hall. This resulted in me using far fewer meals than I had alloted to me. I decided I needed a way to keep track of how many meals I eat so that I can take advantage of all of them.

I set out to build an app that I could use to keep track of my swipes. It didn't connect to the school's database and it didn't automatically add swipes for you but it was something.

This post isn't going to be as in depth as the one about the tip calculator app I built because I never wrote a blog post about this app but I'll try to remember what I did and explain some of it.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526551003-GCTMUM1P24ZE6Q2918BV/swipeTrackerPromo.png?format=750w

When a user first downloaded the app, they would input how many swipes they get each week. This was implemented with a simple scroll view. Because this was only needed once, this view only showed up when the user first opens the app. The value they input is then saved for use later on.

The UI is simple. Showing a large plus and minus button with the amount of meal swipes you have in the center. Originally I wanted only a minus symbol because you can't just gain swipes but I wasn't able to make the app update the swipes every time they reset (once a week). I worked on this problem for a long time but never figured it out so I moved on with the plus button that you could use should you accidentally subtract a swipe or the counter reset and you had all your swipes back for the week.

Lastly, there was a simple settings menu that would allow you to reset your swipes or change the amount that you have each week.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526595616-NER0J0JMWWCMXUICVK41/PreviewImg1.png?format=500w
https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526597732-HSN0G4ZNGMTLT3ZG1ULZ/PreviewImg2.png?format=500w
https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526599431-2K2IB9PUFP7CBFMGXF8K/PreviewImg3.png?format=500w

This app was the first that I built to completion, including an app icon and distribution on the app store. It went live in November of 2015 and stayed on the app store for the year.

https://images.squarespace-cdn.com/content/v1/5a61474ef09ca4cd8215fe42/1543526795504-8B2EK5YDRH1A8FUSRDWK/Screen+Shot+2018-11-29+at+2.26.26+PM.png?format=1000w

To be completely honest, I didn't actually use the app. Every time I went to eat, I'd forget to open it up and subtract a swipe. Whether I used it or not, it was a good project and I learned a lot during the development process.