Beginning Passbook in iOS 6: Part 1/2

Note from Ray: This is the second iOS 6 tutorial in the iOS 6 Feast! This tutorial is an abbreviated version of one of the chapters from our new book iOS 6 By Tutorials. Marin Todorov wrote this chapter – the same guy who wrote most of the “bonus” chapters in iOS 5 by Tutorials. Enjoy!

This is a blog post by iOS Tutorial Team member Marin Todorov, a software developer with 12+ years of experience, an independent iOS developer and the creator of Touch Code Magazine.

The passes implementation in iOS 6 is the hottest technology coming out from Apple right now, and it’s groundbreaking for more reasons than one might imagine.

Passes are the result of some awesome fusion. Four separate technologies all combine together to deliver a completely new experience to iPhone users:

1. The new iOS framework PassKit
2. The new Passbook app bundled with iOS
3. Apple’s push notification service (this time delivery is guaranteed)
4. Your own server code!

Passes are very different from any other Apple technology you’ve used before. What makes them unique is that passes are a concept wrapped around a file format. It’s up to you to create a pass file, deliver and present it to the user in any way you like. And the choice of technology and programming language to do that is also up to you!

It hardly needs to be said that with this setup, you have much more control over how you implement things than you normally do with Apple technology.

Since Apple does not handle the mechanisms behind passes, you need to employ a bunch of different technologies to make them work. In this tutorial, you’ll use Objective-C and iOS; use JSON; send multi-part emails with attachments; use OpenSSL to digitally sign files; and more.

The tutorial is divided into two parts:

1. First, you’ll learn how to create a pass by hand. You’ll start with an empty file and finish with a completely styled and digitally-signed pass.
2. In the second part, you’ll develop a small iOS app in order to preview passes in the iPhone Simulator or on your device. You’ll also learn about different kinds of passes, thus becoming a Pass Pro.

The trip through this chapter will be wild, but also very rewarding – by the end of it, you’ll have mastered the very latest in Apple technology!

Part 1: Understanding and building Passes

Passes are everything in your pocket

Apple’s simplified explanation of passes is that they are “everything in your pocket.” I like that line very much, because it demonstrates so well how imaginative you can and should be about creating your pass applications and services. Passes can be anything.

“But what are they, anyway?”, you might ask.

Well, here’s how a pass looks on the iPhone:

You can easily spot a few different elements on the front of this pass that give you important information: a logo and a company name on the top, the words “Free hug!”, which clearly denote what this pass is all about, and also information concerning its validity (start date, duration).

Then there’s that barcode at the bottom. It’s much like the barcodes you’re already used to seeing on train tickets, airplane boarding passes, store cards, etc. If you think about it, a pass on your iPhone can carry the same information as any of those paper passes you are used to stuffing in your pockets, right? Some text, a barcode – and that’s it. Trust me, though: a digital pass on your iPhone can also do a lot more.

What makes a pass, a pass

Look again at what’s on the pass below and consider the different sections it has:

All types of passes have these important areas in common:

1. Top header. A top ribbon containing an easy-to-identify logo and a company name. This header area is the part of the pass a user will see when they open a full deck of passes in Passbook. It includes the most essential info you want to provide to the user, so they can easily spot the pass they need.
2. Main content area. A section containing the substance of the pass. Each pass type has different styling for this section, and it usually shows the information that you want most prominently displayed once the pass is open. It’s very useful for labels like “20% off,” “One free coffee,” “Balance: $120” or anything else of the sort.
3. Additional info. The third section is for additional information – material that’s still very important (the validity of the promotion and the start date in the example), but definitely not as important as what the pass is all about.
4. Barcode. The barcode contains encoded information that can be easily transferred to other systems by scanning it with a barcode reader. In the example above, the barcode contains a secret code. When decoded by a scanner, it entitles the bearer of the pass to one free hug (to be delivered immediately).

By now you’re probably considering which of the paper passes, store cards, etc. that you use on a daily basis can be converted to a digital pass on your iPhone!

Do I board with this pass, or do I get a free coffee?

Before you dive into coding, have a look at the different types of passes.

Apple has defined four types of passes, each for a common use, as well as a fifth type for “generic” use. Why these different pass types, and how do you recognize them?

The pre-defined pass types are each styled to draw attention to different pieces of information that suit the purpose of the pass. There’s a reason why the layout and content of your gym membership card is different from your concert ticket! The first needs your picture on it while the second doesn’t, for example.

Layout is the main way to differentiate between passes, but UI features like rounded corners and paper cutouts also make passes easily distinguishable. The differences are small, but noticeable, and that’s one of the reasons you have to make sure you use the correct type for your pass.

Here are the four pre-defined pass types:

• Coupon
• Boarding pass
• Store card
• Event ticket

Then of course, there is the generic type of pass. This tutorial will cover all five types in detail in Part 2.

For now, have a look at the boarding pass example below. You can see it’s pretty similar to the hug coupon from earlier, but has some important differences: it features a great two-column layout that makes it very easy to spot the departure and arrival cities; the departure platform number, time and seat number are also well-placed.

By now I am sure you are convinced that passes are a great thing for the iPhone! Now let’s turn to how passes are set up, and how to make one!