Submitted my app to Apple for review a few days ago (Tue 01 Dec 2015). It was programmed in Swift 2.0 using Xcode 7.1.1 on a 12-inch MacBook running OS X El Capitan (version 10.11.1). This post is to chronicle my journey, thought process and workflow, for future reference and in the hope that it will help someone out there next time.
One of my goals this year was to learn how to create an iOS app and release it by year end, which, required a Mac. Being a Windows user all this while, I have been very happy using my Surface Pro 3 bought Sep last year and was reluctant to spend on a secondary laptop. After some consideration, I dug into my savings and bought a 12-inch MacBook early Oct this year. For me, the MacBook Pro was too heavy, the 13-inch MacBook Air had a good screen size but bulky/heavy compared to the Surface Pro 3, the screen of the 11-inch MacBook Air looked squashed, and the gold colour was too hard to resist 😛 Took some time to set it up for development and getting used to the Win-Mac differences. Went on to developer.apple.com, signed up for a Developer account, read thru the Swift Language Guide and did the FoodTracker tutorial. Completed these just in time to attend iOSConf.SG and the iOS DevScout Swift workshop during DevFest.Asia.
I had a completely different idea for my 1st app – I wanted to create an app that would allow me to learn about connecting to a REST web service (cURL, JSON), authentication, input fields, iAd, etc. Let’s call it Idea00. It was to be a tabbed application with each tab being a category of tools. I was envisioning a free “Idea00 Lite” app which would be supported by ads and have say, 4 categories containing 1 tool each. Next would come a paid “Idea00” app costing USD 0.99 which would have no ads and progressively updated with more tools and categories.
Last month (Nov 2015), I attended an iOS meetup, where one of the speakers talked about Apple Pay coming to Singapore. It struck me that perhaps I could combine the 2 apps into 1 – a free “Idea00” app supported by ads with in-app purchase options to remove the ads and add more categories. I had started the project in Xcode some time back but took a break after learning how to use CocoaPods, add Alamofire & SwiftyJSON, creating different sized icons for image sets & app icons and adding a new tab in the tab bar.
After overcoming my inertia, I finally sat down on Tuesday (01 Dec) to continue the project. I was quickly overwhelmed by the realisation that there were too many things to cover and too little time to make it by year end. I paused and asked myself, “Why are you stressing yourself out by trying to accomplish so much in this app? Learning a new programming language is supposed to be fun! Plus, this is only a personal project!” In trying to “catch up” with the latest technologies, I had forced myself into a business-like mode and forgot about enjoying myself in the process. In order to enjoy the learning process, I had to learn to relax, let go and take baby steps. It shouldn’t matter if the project becomes a flop or if others deem it too simple/childish – I have only myself to answer to. Done is better than perfect, a tree starts from a seed.
So with that, I scrapped “Idea00” and thought of the simplest app that I could do. The Wordless Book came to mind. For those who have not heard of it before, it is a tool used in evangelism to share the Gospel, especially with kids. It comes in various forms, with one being a small booklet with 5 coloured pages and no words (hence “Wordless”). The 5 colours are gold, black, red, white and green.
First, I started with a Tabbed Application in Xcode. The idea was to have 1 tab for each colour and selecting a tab will turn the screen into that colour. After creating PNG files (circular icons) for the 5 different colours and adding them as image sets, I realised something. The tab bar did not show the different colours. I was seeing one blue circle and four grey circles on the tab bar. I opened up the apps on my iPhone 5S that used a tab bar and while their tab bars had different colours, the tab icons were generally of the same colour. I googled around a bit and came to the conclusion that the Tabbed Application was not the way to go.
I had started about 10am and it was then 12nn. Went out for lunch with my wife and came back around 2 plus. During lunch, I thought about using a Single View Application with 5 buttons but I knew from my experience with the FoodTracker tutorial that button placement was not that straightforward even with Auto Layout, which I have yet to properly grasp. I was hoping to finish and submit the app before my church camp next week. That left me with the Page-Based Application template in Xcode.
I resumed around 3pm. I opened a new project in Xcode and chose the Page-Based Application template. The Data View Controller Scene in Main.storyboard had a parent View with a beige background, a Data Label at the top and a white-coloured child View in the middle of the parent View. Running the project showed an app where tapping/swiping the edges led to a page for each month of the year. I traced the month names to the pageData variable in ModelController.swift and populated it with the hexadecimal colour codes for the 5 colours. Next was the changing of the background colour of the View. This was done in DataViewController.swift under the function viewWillAppear(). I naively set self.view.backgroundColor to the hexadecimal colour code but Xcode prompted me that it expected a UIColor object. No problem, except that UIColor had no method for converting the hexadecimal colour code. I googled around and found the code for adding an extension to the UIColor class which allows the passing in of a hexadecimal code to the init method. This code was put in a new file, Extensions.swift, instead of being shoved to one of the existing files.
The changes updated the beige background of the parent View to the 5 colours when the pages were turned, with the white child View still in the middle. Hmm…it should be the other way round – change the colour of the child View, not the parent View. I then changed the beige background of the parent View to light grey using the Attributes Inspector in the side panel. I clicked on the “Show Assistant Editor” button at the top righthand corner, pressed Ctrl-Click on the child View and dragged it into DataViewController.swift to create an IBOutlet named dataView. The code in viewWillAppear() was then changed to self.dataView.backgroundColor = UIColor(hex:dataObject). The Data Label variable and object was also removed as it served no purpose.
Next was making the child View fill the full screen. This took some fiddling about – the short of it was that I resized the child View to fill the screen and cleared the Auto Layout constraints (after trying out a myriad of constraints). I could not make the child View cover the status bar even though I enabled “Hide status bar” and “Requires full screen” under General > Deployment Info when I clicked on the topmost icon in the Project Navigator (not sure what this page is called). So I left it as it is. Also tried adding a “Start Over” button at the bottom of the screen but no matter how I adjusted it, it would never show up in the simulator – it was probably covered by the child View. In the end, I decided to go without buttons – just a plain app with 5 pages of different colours. I modified the 2 pageViewController() functions in ModelController.swift to allow looping of the pages, ie. when the user swipes to the left on the last page, it would go back to the first page, and when the user swipes to the right on the first page, it will go to the last page.
This basically covers the creation process of the app. Phew, was it a long post! I’ll cover the testing and submission process in the next post – another essay by itself 😛 Stay tuned, adhuc!