let’s dev

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Apple Wallet
by Maik
26. Oktober 2018

Apple Wallet

Die Wallet App bietet Apple-Nutzern schon seit Jahren eine bequeme Möglichkeit zur Verwendung von digitalen Gutscheinen und Bordkarten. Mit dem anstehenden Marktstart des zugehörigen Zahlungsdienstes Apple Pay in Deutschland werden sich die Anwendungsmöglichkeiten der App nochmal vervielfältigen. Aus diesem Grund werfen wir nachfolgend nochmal einen genauen Blick auf das Apple Wallet.

Boarding Pass in Apple Wallet

Abbildung 1: Ein Boarding Pass in Apple Wallet auf dem iPhone und der Apple Watch

Was genau ist Wallet?

Wallet bietet dem User die Möglichkeit, diverse Arten von Tickets wie z.B Sammelkarten, Guthabenkarten, Reisepässe usw. digital auf Apple-Endgeräten in Form von sog. Passes (zu dt. Karten) zu hinterlegen. Der User kann sich dann in der App seine Passes anschauen, benutzen und verwalten. Wallet ist auf allen iPhones mit iOS 6 oder aktueller sowie auf der Apple Watch verfügbar.

Passes stellen die digitale Repräsentation klassischer Tickets und Guthabenkarten dar. Sie können Bilder und Barcodes beinhalten und per Push-Notification aktualisiert werden.

Server-Client-Kommunikation

Abbildung 2: Server-Client-Kommunikation in Apple Wallet

Erstellung eines Passes

Passes durchlaufen in ihrem Lebenszyklus vier Phasen: Erstellung, Auslieferung, Verwaltung und letztendliche Einlösung.

Wallet deckt dabei die Verwaltung in Verbindung mit dem User ab. Der Ablauf von Auslieferung, Erstellung und Einlösung des Passes sind durch den Ersteller vorgegeben, wobei Apple uns hier viele Freiheiten einräumt. Die Passes können je nach Passtyp eine unterschiedliche Anordnung an Texten, Bildern und Barcodes beinhalten, wobei der Style, die Formatierung, die Farben und die eingefügten Bilder vom Ersteller vorgegeben werden.

Wie der Pass an der User „ausgeliefert“ wird, ist ebenfalls frei wählbar. Der Pass kann per PassKit-API in Apps hinterlegt, per E-Mail verschickt oder auf Webseiten eingefügt werden. Darüber hinaus stellt Apple keine Anforderungen bezüglich der zu verwendenden Programmiersprache, da die „Mechanismen“ hinter der Bereitstellung des Passes vom Ersteller kommen. Daher werden die Konditionen der Einlösung des Passes ebenfalls durch den Ersteller festgelegt und müssen mit der internen Organisationstruktur abgestimmt und vereinbart werden. Zusätzlich können die Passdaten jederzeit per Push-Benachrichtigung aktualisiert werden.

Pass Styles

Abbildung 3: Die fünf verfügbaren Pass-Styles

Verschiedene Designoptionen

Verschaffen wir uns zunächst einen Überblick über die von Apple vorgegebenen Pass Style Sets. Die Style Sets sind Teil der API und fest vorgegeben. Es gibt fünf verschiedene Styles für die Passes:

Jeder Pass Style hat eigene Layouts und Restriktionen für die in ihm enthaltenen Informationsfelder. Festgelegt wird der Style durch die Angabe des entsprechenden Keys im Header einer .json-Datei ( pass.json ), welche sämtliche Informationen zum Befüllen der Felder beinhaltet. Die Felder im Pass lassen sich dabei prinzipiell in vier Teilbereiche gliedern:

Je nach Pass Style unterscheiden sich die Aufteilung und Anzahl der verfügbaren Felder. Jedoch haben alle Pass Styles einen Grundsatz an Gemeinsamkeiten: Es gibt immer einen Header, Bereiche für primären/sekundären Content und abschließend ein Barcode-Feld.

Layout Boarding Pass

Abbildung 4: Layout des Boarding Passes mit dazugehörigem Code-Ausschnitt der pass.json-Datei

Nachfolgend wird die Verwendung der verschiedenen Pass Styles genauer erläutert.

Coupon

Der Coupon ist die ideale Grundlage zur Erstellung einmaliger Gutscheine für z.B. Sonderangebote und simuliert mit seinen perforierten Ober- und Unterkanten den altbekannten Abrisszettel. Durch seine geringe Anzahl an Feldern bleibt er dabei schlicht und übersichtlich.

Boarding Pass

Für Reisetickets aller Art bietet Boarding Pass das richtige Layout. Der Bereich für den primären Content ist in eine Vielzahl an kleinen Feldern aufgeteilt, um alle relevanten Reisedaten schnell im Blick zu haben.

Event Ticket

Durch die Einbindung eines Hintergrundbildes eignet sich das Event Ticket zur Erstellung kreativer Kartendesigns für beispielsweise Kinotickets oder Konzertkarten.

Store Card

Obwohl das Layout der Store Card beinahe identisch mit dem Layout des Coupons ist, bietet die Store Card durch ihr prominentes Content-Feld andere Möglichkeiten. Der verbliebene Betrag von Guthaben- und Bonuskarten kann hier angezeigt und aktualisiert werden. Der User hat somit immer Einblick in seinen aktuellen Kontostand.

Generic

Sollte der gewünschte Verwendungszweck nicht durch die vier bereits genannten Passtypen erfüllbar sein, bietet Apple mit dem Generic Pass zusätzlich die Möglichkeit einer vielseitigen Basis. Üblich ist die Verwendung des Generic-Pass z.B. als Mitgliedschaftskarte, da hier u.A. ein Profilbild eingebunden werden kann.

Die inneren Werte

Die Dateien, aus denen der Pass besteht, werden dann im sogenannten Pass Package kompiliert. Dieses besteht hauptsächlich aus den im Pass vorhandenen Bildern und der bereits erwähnten pass.json. Zusätzlich können im Package Unterordner für lokalisierte Versionen des Passes angelegt werden. Das letztendliche Kompilat endet dann zwar mit der Dateiendung .pkpass, funktioniert aber im Prinzip wie eine normale ZIP-Datei.

Um nachvollziehen zu können, wie wir welche Art von Pass befüllen können, müssen wir nun einen Blick auf die Dateien des Passes werfen. Entpackt man ein .pkpass-Archiv, erhält man mehrere Dateien:

Layout Boarding Pass

Abbildung 5: Typische Dateistruktur eines .pkpass-Archivs

Variationen für Apple Watch

Wie bereits erwähnt, bietet Wallet ebenfalls Lösungen für Pässe auf der Apple Watch. Dabei funktionieren die Pässe prinzipiell gleich, jedoch wird das Layout der Felder auf den quadratischen Display der Apple Watch angepasst; der User kann dann vertikal durch den Pass scrollen. Für die Erstellung von Pässen wird von Apple bei der Wahl des Barcode-Formats stets der gängige QR-Code empfohlen, da sich dieser auf dem Display der Apple Watch am einfachsten abbilden lässt ohne Platzprobleme zu bekommen.

Layout Boarding Pass

Abbildung 6: Das für die Apple Watch angepasste Layout des Boarding Passes

Alles in einer Hand mit Apple Wallet

Mobile Zahlungsweisen revolutionieren die Art und Weise, wie eingekauft und bezahlt wird. Das Wallet-System hat sich als einer der Vorreiter dieser Bewegung positioniert. Vor allem kleine bzw. mittelständige Unternehmen können von Apples durchdachtem Kartensystem profitieren, ihren Kunden mit relativ geringem Aufwand einen besonderen Mehrwert bieten und sich gleichzeitig im E-Commerce-Bereich positionieren.

Seit dem Marktstart der Wallet-App im Jahr 2012 erfreute sich die digitale Geldbörse mehrerer Revisionen und stellt bis dato einen enormen Fortschritt für das mobile Bezahlen dar. In den USA und weiteren Teilnehmerländern sind inzwischen eine Vielzahl beliebter Bank- und Treuekarten reibungslos in die App eingebunden.

Leider ist die Adaptionsrate in Deutschland immer noch recht gering, obwohl die Technik bereits seit Jahren zur Verfügung steht. Dabei stellt die technische Umsetzung zumindest kein Problem mehr dar, da die notwendige Infrastruktur der Karten von Apple gestellt wird. Wir sind uns jedoch sicher, dass das Thema Wallet mit der bald anstehenden Freischaltung des Apple Pay-Services wieder Fahrt aufnimmt.

Weitere Artikel aus unserem Blog

let’s dev Blog | let's dev unterstützt SG Siemens Volleyballer aus Karlsruhe

Corporate

let's dev unterstützt SG Siemens Volleyballer aus Karlsruhe

by Helena

2018-12-04

Weiterlesen
let’s dev Blog | KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

Corporate

KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

by Helena

2018-11-12

Weiterlesen
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Weiterlesen
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Weiterlesen
let’s dev Blog | let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

Corporate

let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

by Helena

2018-09-01

Weiterlesen
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Weiterlesen
let’s dev Blog | iOS 12: Die Top-Neuerungen im Überblick

Technical

iOS 12: Die Top-Neuerungen im Überblick

by Nicolas

2018-07-17

Weiterlesen
let’s dev Blog | let’s dev auf der CEBIT

Corporate

let’s dev auf der CEBIT

by Karl

2018-06-11

Weiterlesen
let’s dev Blog | Einführung in User Interface (UI) Tests mit Espresso

Technical

Einführung in User Interface (UI) Tests mit Espresso

by Raphael

2018-06-07

Weiterlesen
let’s dev Blog | Die App im Apple App Store: welche Informationen werden benötigt?

Technical

Die App im Apple App Store: welche Informationen werden benötigt?

by Aileen

2018-04-27

Weiterlesen
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Weiterlesen
let’s dev Blog | User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

Technical

User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

by Helena

2018-02-07

Weiterlesen
let’s dev Blog | WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

Technical

WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

by Judith

2018-01-10

Weiterlesen
let’s dev Blog | Open Data Hackathon der Deutschen Bahn

Corporate

Open Data Hackathon der Deutschen Bahn

by Karl

2015-03-31

Weiterlesen
let’s dev Blog | Blur-Effekte unter iOS 7

Technical

Blur-Effekte unter iOS 7

by Katja

2014-04-24

Weiterlesen
let’s dev Blog | Beyond App Store – Distribution von iOS-Anwendungen

Technical

Beyond App Store – Distribution von iOS-Anwendungen

by Karl

2012-08-27

Weiterlesen
let’s dev Blog | Frontend-Architektur – Model View Presenter und Message Bus

Technical

Frontend-Architektur – Model View Presenter und Message Bus

by Karl

2011-03-08

Weiterlesen