How I made an app in 15 Days from scratch?

It was 15th of November, when I had the spark, I should make an Advent calendar app for my partner. Why an Advent calendar? Because last year we made each other one and it was good fun. (Although this year I didn’t get one :( )

At the time of planning I had no workable knowledge about how to make an app. I have bought Meng To’s design+code book and went through it couple of times around 2014, before he added the Swift parts so all I knew is how to prototype with storyboards and very little code. I also had a play with various Swift Learning apps, such as TapCode, Swifty and lately Apple’s own iPad app, Swift Playgrounds.

It was time to take proper action.

The Idea

As I mentioned before, the spark came on the 15th of November. I felt lazy. I felt like I’m not doing enough, not challenging myself enough to do more, to work harder. Shout out to Casey Neistat for awakening my inner doer with his videos.

So that spark came whilst scrolling through Pinterest for Advent calendar ideas. I have seen many great ideas but none of them were able cut the mustard. Then I realised, what better and personal Advent calendar could I make then the one that she can have with her all the time.

At that point I had a clear vision how it would look and work. I quickly came up with the below mind map.

The Study

Before diving into any further design and coding I took advantage of the CodeSchool free weekend and completed their App Evolution with Swift course which I found the best for somebody who has none to basic programming knowledge.

The Initial Design

As I outlined the app in my head I new that size wise I want to have cards like in the Wallet.app. It was okay for starters, but wasn’t as good as I thought.

It looked plain and empty. So I opened up Illustrator to create a pattern that I might be able to use as a background for my app.

I showed my initial picture to my mate, Peter, who said that the rectangular cards are a bit boring, try something else. So I changed it to a ribbon like card and added some elements of the pattern to it, and I ended up with this.

I liked this a lot better so I exported my assets and started to work on the app with only two cards.

Building the app — The Basics

I did a bit of research on how it would be best to present my cards, and I have ended up with the idea that I’d need a UIPageViewcontroller. Started to seek out tutorials and I ran into what I thought I needed. It was Jeff Burt’s tutorial on Atomic Object.

First I built it the way he did, then customised it. All was working fine but I did not like the idea of creating 24 different view controllers only to differ in the cards. I was unable to work it out myself so with the help of @gklka and some helpful people from stack overflow who guided me to the right direction I managed to tackle that problem as well.

I had an app with 2 cards, I was able to swipe around continuously.

The next thing for the base of the app was to check the date when tapping on a given card. My criteria was to only allow to open cards on or before a given date.

At this stage of the development I simply printed to the console to test if all was working as expected.

Before writing into my app and messing it up, I wrote the simple code in Playgrounds, based on this tutorial from AppCoda using Swift classes.

import UIKit

let currentDate = Date()
var dateAsString: String

let dateFormatter = DateFormatter()
var convertedDate : String
dateFormatter.dateFormat = "dd MMM yyyy"
convertedDate = dateFormatter.string(from: currentDate as Date)


var today = dateFormatter.date(from: convertedDate)!

dateAsString = "21 Nov 2016"
var givenDate = dateFormatter.date(from: dateAsString)!

// If date is either today or in the past write to console Allow else Forbid

if today.timeIntervalSinceReferenceDate >= givenDate.timeIntervalSinceReferenceDate{
print("Allow")
} else {
print("Forbid")
}

I put all this in function that I called within an @IBAction when the card was tapped.

I had this idea of giving feedback if the user, my girlfriend taps on a card that is not openable, cause she’s cheeky. My idea was to shake the card. I remembered Meng’s great library of animations, called Spring. I read through the relevant part of his book and quickly implemented it in my app.

So I had basic app with couple of cards in. I was able to swipe and tap on the cards. I set all to a future date, so I can test the shaking. I loved it. I quickly sent a gif to my friend Peter, whom I mentioned earlier who said

Does it vibrate when shakes?

I said no, but found it a great idea and implemented it quickly.

Building the app — The DailyPresentViewController

Still in downscaled mode, now with three cards I started to work on implementing the opening of the daily presents at this time without any real design, just some text, based on the index(date) of my cards.

It was working fine, receiving the data I was sending through the segue. I had a way to “open the present” but no way of getting back. I knew the best way to do this would be the use of the Navigation Controller.

Implemented, worked.

The next thing was is removing the ugly header and creating a button for going back. It worked as a charm.

It was time for the next design session.

Designing the look of the daily present view

I did not give this much though before. I knew I needed the following things to be present:

  • current date in some form
  • a picture of her, me or something that relates to the nearly passed year
  • a little description of the day’s present
  • a back button and a share button

The picture would take up a significant amount of space with full width and 1:1 ratio. The bottom half would carry the description in couple of sentences with the two buttons. I came up with the below design. In order to stay consistent I used the pattern elements in the exact same position.

I opted for the classic Christmassy red+gold colour combo. For the date instead of using one of the usual and dry date formats I went with “On the nth day of Advent…” as a sort of title or sentence starter. I placed it on the bottom of the image with a blurred background, that was done through Xcode’s Storyboard along with the subtle shadows on the buttons.

The buttons were placed at the bottom for reachability and space purposes and I believe are quite self explanatory.

Building the app — The DailyPresentViewController finishing touches

After designing the look in Sketch, I went back to Xcode to put it together with some hard coded data and pictures. All was working as expected, however the image shared through the share sheet wasn’t good enough, so I decided that I will design a dedicated card for that too.

This was the day when I felt that I am gonna make it and the app with it’s core functions will be ready for the 1st of December.

Designing 24 individual cards, and the image for sharing

I had my fair amount of struggles with the coding part and as you’ll read on I explain even more, but the hardest part to me was coming up with 24 different designs for each card.

I had some ideas saved from Pinterest, but none of them felt good enough so I just went ahead, chose some colours and started to draw things up. Had many designs discarded straight away and plenty refactored multiple times. At the end of a long design session these were the ones that made it. I like them. Some more than other but overall, I was satisfied with the end results.

For the sharing part, I actually played with sharing just the image of the cards, however for some reason when saved iOS saved a background to them and they looked ugly so I decided that I will use my existing elements, the cards, the patterns and colours to come up with a share-card.

I also wanted to include the date and a condensed description of what is the present for that day, but not in a personal way. This is how the shareCard was born.

As I was designing I realised that I will also need a launch screen and an app icon. I designed those as well, images below.

Building the app — Finish line in sight, Adding local notifications

As coming to finishing up my application, I have built a custom collection to store my data, again, based on the CodeSchool tutorial, mentioned earlier. Given that I only have non changing static data, I did not go into great detail of data handling at this time.

I added my assets then built and ran my app. Possibly had some gimmicks, typos etc I can’t recall, because the app was working as expected.

The last step was to add custom notifications to my app. Apple handles these very seriously as notifications are disturbance to the user and therefore we need to ask for permissions first. More on this in Apple’s official documentations, for which I used Dash from Kapeli.

In order to implement my notifications I drew inspiration from this tutorial.

I had my fair trouble with implementing it as my idea was to only display notification once a day at the exit same time. Easy, right? Just use Apple’s code from its documentation.

let date = DateComponents()
date.hour = 8
date.minute = 30
let trigger = UNCalendarNotificationTrigger(dateMatching: date, repeats: true)

Well, although it works to the purpose of repeating every day, but there is simply no easy way telling it to stop on a given date or to repeat only n times.

Therefore I had to switch off the repeating feature and use a for loop to schedule 24 notifications like so:

for index in 1...24 {
scheduleNotification(day: index)
}



func scheduleNotification(day: Int) {

var date = DateComponents()
date.year = 2016
date.month = 12
date.day = day
date.hour = 6
date.minute = 30

let trigger = UNCalendarNotificationTrigger(dateMatching: date, repeats: false)


let content = UNMutableNotificationContent()
content.title = "Advent Calendar"
content.body = "It's time to open your present!"
content.sound = UNNotificationSound.default()

let requestId = "textNotification\(day)"
let request = UNNotificationRequest(identifier: requestId, content: content, trigger: trigger)
UNUserNotificationCenter.current().removeAllPendingNotificationRequests()

UNUserNotificationCenter.current().add(request) {(error) in
if let error = error {
print("Uh oh! We had an error: \(error)")
}
}
}

As you can see, I am only passing in the number of the day and have declared the year and the month statically. This is my way of making sure that notifications only fire on the 1st of December 2016 through the 24th.

Believe it or not, after setting all of this up, it still did not work. I’ve spent hours on why is it not working as expected, until I realised that I am using a line of code, inherited from the tutorial that, before scheduling a new notification deletes any previous scheduled notification.

What does that mean is when is this:

  1. Delete any previous notification
  2. Schedule notification for the 1st Dec 2016
  3. Delete any previous notification
  4. Schedule notification for the 2nd Dec 2016

And so on until the last notification is scheduled. The worst thing in this was that I did not realise it until the 1st of Dec, waking up to having no notification in the morning although it worked the day before.

Well, it worked as I set it to Nov and to schedule notifications for 3 days, 28–29–30th of Nov and 30th being the last day, therefore my little function left the last notification scheduled and triggered as expected at half 10 in the evening.

The solution was to comment out this line:

UNUserNotificationCenter.current().removeAllPendingNotificationRequests()

Preview

I have made a short screencast of the app working on my phone. There is a hiccup where the share sheet does not open, that is because I was lazy to build in the share pictures :). It is working in the final version.

I am also planning on releasing both the code and design at some point, but I’d need to tidy it up beforehand, so it will happen later on.

What did I gain?

Developing this app was a great experience and surely I have learnt the basics of a new skill. Although we are already in the period of Advent, I still have many ideas for this app and for the purpose of learning I will try and implement them before the end of this year.

I will also make good use of the knowledge I acquired making other apps I’ve been thinking about for ages now.

I have to say thank you to everybody who somehow helped me to finish this app. A big thanks to Bea for being patient whilst I was zoomed into developing and neglecting her a bit.

PS: Next project is becoming better at time management to make better use of my time. ;)

Like what you read? Give Ben Szabo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.