I bought my Apple Watch as a motivation to build my first iOS app. I knew that I didn’t really need one but I figured it was an investment that would push me to learn Swift, Apple’s programming language. I was not specifically looking to build a watch app, but I imagined that the constraints from a small screen would make the interface simple and limit functionality; therefore, making the app simple and easy to code.
Step 1: Find the idea
I wanted to build something simple that I could build every aspect of it. I didn't want to rely on libraries or frameworks for my first app. I wanted to get my hands dirty and code everything myself. For this reason, I wanted to build an app that was self contained, no network connection or external data source. I thought about building a calculator. I didn’t think twice about it and started doing some research.
Step 2: Look at the competition and find weaknesses
I knew that there were big player in the iOS calculator category. My two case studies were PCalc and Calcbot.
Case 1: PCalc
In the PCalc application, the operations are not displayed on the screen. They are available via a second page. Multiple ways of input are available. 15 buttons on the main screen.
Case 2: Calcbot
Calcbot has 12 buttons visible on the main interface. It support four operations (+ − ✕ ÷) and they are available via a force touch menu.
Findings
Because of the small screen of the Apple Watch, the app should have as few buttons as possible to make the remaining buttons bigger. The app should also offer a fast way to input the operations.
The solution
- Remove operation buttons from main interface
- Main operations are done using swipes
- Least frequently used operations are done using force touch
- Offer a complication for quick access from the watch face
Step 3: Build the watch app
The main part of the watch app was done in 24h. The interface is pretty simple. I made it as simple as possible since I did not know a lot about layouts on the watch. The limitations were actually helpful since they guided me to build the interface. After day 1, the app was functional.
Float vs double
1.111111 ≠1.111111111111111
A big aspect of the calculator was precision. I wanted to have the highest precision that would fit in the screen. Float was perfect for the watch as the small number of decimals would fit in the screen. Double was problematic since it is has almost the double of decimal places. I wanted the best precision, so I picked double.
New feature: “varying precision
To have the highest precision possible on the watch screen, the precision (number of significant digits) varies based on the sign, number of actual digits, exponent sign and size. Basically, the number precision is reformatted to fit the screen. Although the precision change on the display, the actual double value is always used for calculations. Michel Chatmajian helped me implement this feature.
Step 4: Make a logo
I found a gradient on webgradients.com and sent it to Michel. He proceeded to place an equal sign in the middle. This was the resulting icon:
Step 5: Make the iPhone app
Since the app calculator was only for the watch, I didn't bother making a phone calculator. The phone app would be used to explain how to use the watch app. This made my life much easier as I did not have to build a complex layout. It had two view: main view and instruction view. I also cheated by using a webview for the instruction view. I coded the whole thing in HTML/CSS #win.
Step 6: Build it, pack it, ship it (and wait)
Step 7: Success!
MiniCalc was approved on the App Store March 23, 2017
If you want to try MiniCalc, you can download it on the App Store
For more information about my other projects, you can check my personal website justinleger.ca
Top comments (1)
Great article Justin!