Apps With Swift: Part 1- Getting Started

This is not a tutorial from an expert, but rather a no-holds-barred story of my journey to learn something new.

Upon reading some things you might think I’m a dumbass.

Or, maybe some things will help you to avoid a few dead-ends.

Three words sum up the first weeks: overwhelmed, intimidated, and inspired.

Each of these feelings come and go at various times and at varying intensities. Without the inspiration bit, the first two feelings will be the reason why I give up. Nonetheless, here we go…

The Absolute Beginning

We all have some prerequisite knowledge. It’s different for each of us. For me, I have a bit of a background in coding (a long time ago). I’ve tinkered with JavaScript, know my way around HTML and CSS. I’m poor with graphic tools. And, I own a bunch of Apple devices.

I have a leased MacBook Pro that I use for my normal work (maintaining websites).

Swift

In 2014 Apple came up with a new development language – Swift. This can be used to build iOS and MacOS apps. Previously this was done (primarily) with Objective-C.

Objective-C intimidated me, which was probably why I avoided the thought of app development for so long. So, Swift it is.

Where to Start

With Google. I searched for app tutorials with Swift. Very quickly I came to Meng To’s Design+Code site. A beautiful site that seemed to have what I was looking for.

Advertisement

I was always ready to spend money on this, so the $50 charge for Meng’s iOS tutorial was a done deal. I charged ahead and downloaded all his iBook versions so I could read offline on my iPad.

This was a bit confusing as instead of one cohesive book, it is actually a series of “chapters” and I wasn’t sure where to start. Sometimes he refers to chapter 3 or 2 or whatever, but the “books” aren’t named by chapter number, but names like “Learn iOS Design”.

Hey don’t judge me. Maybe I’m a bit slow but I had no clue where to start.

I learned: There are loads of tutorials out there, yet they all come at things from a different angle. This was going to be a big undertaking and not something learned in a week or two.

iOS Design

I read thru the iOS Design chapter. This was interesting and basically filled me in on where iOS 8 has taken us in terms of design. Apple cover this with their iOS Human Interface Guidelines.

To be honest I’m not sure where to fit in time to read some of these. I could easily spend the next year reading full time and still not cover all that’s out there about iOS. I’m starting to get that overwhelmed feeling.

download_books

Meng’s books.

I learned: There are pretty clear guidelines about iOS usability. It takes courage to break the mold and design something different. I also realize the pace of change is staggering and by the time I’m learning something Apple will probably have iOS9 and design would have all changed again!

Designing With Sketch

Then I jump into Meng’s chapter/book on Designing with Sketch.

As luck would have it I already have a copy of Sketch. It’s a nice Mac tool for graphics. I downloaded it from the Mac App Store for $100.

I’ve only used it for cropping and exporting images before uploading to websites. I’m no graphic person. I can’t use Photoshop. But I bought Sketch as it seemed a lot easier to get the hang of.

Meng’s book has a lot of videos of him using Sketch. These were great except for two things:

Problem:
About 1/3 of the way through the book (I’m reading this on iBooks in a iPad Mini Retina) the videos just stopped working and wouldn’t play anything. So I gave up in frustration for a while.

Solved:
I then discovered that if I ‘killed’ the iBooks app (by double tapping the home button, and swiping the iBooks app upwards) and then restarted the iBooks app, the videos would work. I guess some issues with memory or something.

Videos Were Helpful But Bewildering

Not meaning to be disrespectful. It’s clear that the author Meng To is superb at his craft – an excellent designer who knows how to code. The web allows us access to some very smart and talented people, who kindly share their knowledge. It can be intimidating and I struggle not to feel like a schmuck (I guess that’s my own issues).

However, the videos show Meng using the tools at high speed. Obviously once you use something for a long time you become proficient at it.  However being an expert at something doesn’t necessarily mean you are a great teacher.

The videos in the book had no voiceover explaining what was happening (although some videos in the other books had a narration). I frequently would pause and rewind to try and understand something.

I grew frustrated.

How many times has someone asked you for help on their computer? You quickly click this, type that, and fix their problem. They look at you with a mix of annoyance and gratitude. You solved the problem but they are none the wiser?

I persevered and did gain some extra skills with Sketch but what now? Have I started at the wrong point? Am I building an app or what?

I learned: Sketch is for building prototypes. You can then export out bits of your design that will be used in your app. These bits are called assets.

Sketch is great because there are instant mockups available for various iDevices. These are called artboards. You just type A and choose which size iPhone or iPad and away you go.

Sketch has lots of tools to get the design accurate to the pixel.

Making things look like iOS 8

sketch-template

Sketch default iOS template

To get things looking like iOS you try and get things a standard size and place on the screen (remember the iOS Guidelines?). Sketch helps here as it has Templates, including one for iOS.

This means you can copy and paste different UI elements into your own design that conform to the guidelines. There are some must-have resources out there which helped me:

Why another UI template file? Because I ran into some problems to do with Retina. Let’s deal with that.

1x, 2x, 3x… Huh?

On Meng’s book he just dragged in a header from the Sketch template. When I did that it was too small. This held me up for a long time.

I am working on a Retina Macbook which is always at 2x. The Sketch default template for iOS is only 1x. Doh!  Fortunately there is a great 2x template out there (and another one here).

In a nutshell: The iPhone 3 was 320×480 points and 320×480 pixels.

Great! 1 Point = 1 pixel so I could use the word point and pixel interchangeably. Then came the iPhone 4 with a Retina display. The screen was the same physical size (3.5″ diagonal) but had twice the resolution. Suddenly 10×10 pts = 20x20px

Then there is the iPhone 6 Plus which can handle 3x assets (see all different iPhone sizes here).

So if I wanted to export pixel perfect assets for these 3 devices I would need 3 different images – Myimage.png, Myimage@2x.png, Myimage@3x.png

Sketch makes that easy with its export box. However – a trap here – because I’m working on a Retina (2x) macbook, I don’t need to do any resizing at the export stage for a 2x image.

Exporting asset at 1x and 2x

Exporting asset at 1x and 2x

So… for a 2x asset, the size will be 1x and the suffix will be @2x. If I want that asset at 1x (although these devices are disappearing) I would have to set the size to 0.5x — hope that makes sense.

It’s important to understand these concepts (or so I’m discovering).

 Moving on From Sketch and Design

I’m not sure whether I started at the right point. Never mind.

I’ve messed around with a few screens of an app that I wanted to start (very basic). But I’m still confused. I want to make an app, not just a prototype.

So a deep dive into another of Meng’s books/chapters – building an app with Swift.

Meng drags in various assets from his beautiful design in sketch. Very quickly he wires them up to make some sort of working prototype. It was about now that things start to fall apart for me a little.

I like to understand things, and I’m a task-by-task person. I could see that Meng was knocking up an app. He even provided a narration for one of the videos. But I had no clue why he was doing the various things. I realized there are many approaches to app development and I was seeing one approach, but without the bigger picture.

So… time to put the Design+Code books aside and go elsewhere. I’m sure I will come back to them. It’s clear that the author’s strength is design. I’m pretty rubbish at design. I guess like to know what’s going on under the hood.

 Next Up – Getting the Big Picture – Xcode and the storyboard.

 

Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 14, 2016

1 Comment

Add a Comment