let’s dev GmbH & Co. KG - Die Marke für wegweisende Individualsoftware

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.

Kortpress von let's dev - jetzt auch für Google Passes

Digitale Karten beziehungsweise Tickets, wie sie mit Google Pay Passes und Apple Wallet (über diese haben wir bereits in einem früheren Beitrag berichtet) angeboten werden, bekommen durch die Digitalisierung einen immer höheren Stellenwert, um Papier beziehungsweise Plastikkarten abzulösen. Passes für Ihre Kunden zu erstellen kann aber für Shops oder andere Unternehmen einen zu großen Aufwand bedeuten.

Hierfür bieten wir eine Lösung an: Kortpress. Mit dieser Lösung lassen sich maßgeschneiderte Karten erstellen, indem man aus einer Vielzahl verschiedener Layouts und Nutzungsmöglichkeiten wählen kann. Die Erstellung erfolgt online in nur wenigen Schritten ganz ohne Programmierkenntnisse. Passen Sie die bestehenden Layouts ganz einfach an Ihr Corporate Design oder bestehende Design-Vorlagen an.

Kortpress wurde so konzipiert, um sich flexibel an Ihre individuellen Vorgaben anpassen und auch einfach in eine bestehende IT-Infrastruktur integrieren lässt. Auch eine automatisierte Verteilung der Passes oder ein automatisiertes Kampagnen­management ist mit Kortpress einfach möglich - wir unterstützen Sie gerne bei der Verwirklichung.

Sie interessieren sich für Kortpress oder wünschen eine individuelle automatisierte Lösung zum Erstellen von Passes für Ihr Unternehmen? Dann kontaktieren Sie uns. Gerne beraten wir Sie und erarbeiten eine passende Lösung für Sie.

Weitere Artikel aus unserem Blog

let’s dev Blog | UX Research Teil 3 – UX Methoden

Technical

UX Research Teil 3 – UX Methoden

by Elena

2020-05-28

Weiterlesen
let’s dev Blog | UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

Technical

UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

by Elena

2020-04-23

Weiterlesen
let’s dev Blog | go-digital fördert Einrichtung von Home Office Arbeitsplätzen

Corporate

go-digital fördert Einrichtung von Home Office Arbeitsplätzen

by Karl

2020-03-19

Weiterlesen
let’s dev Blog | Google Passes - Karten­verwaltung auf  Android-Geräten

Technical

Google Passes - Karten­verwaltung auf Android-Geräten

by Michelle

2020-03-12

Weiterlesen
let’s dev Blog | 100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

Technical

100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

by Raphael

2020-03-06

Weiterlesen
let’s dev Blog | Swift UI - Einfache und schnelle Umsetzung von User Interfaces

Technical

Swift UI - Einfache und schnelle Umsetzung von User Interfaces

by Tobias

2020-03-02

Weiterlesen
let’s dev Blog | Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

Corporate

Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

by Julian

2020-02-27

Weiterlesen
let’s dev Blog | Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

Technical

Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

by Manuel

2020-02-26

Weiterlesen
let’s dev Blog | Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

Corporate

Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

by Karl

2020-01-27

Weiterlesen
let’s dev Blog | UX Research Teil 1 – Warum User Research so wichtig ist

Technical

UX Research Teil 1 – Warum User Research so wichtig ist

by Elena

2020-01-23

Weiterlesen
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Weiterlesen
let’s dev Blog | Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

Corporate

Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

by Julian

2019-12-20

Weiterlesen
let’s dev Blog | Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

Corporate

Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

by Karl

2019-12-17

Weiterlesen
let’s dev Blog | DaSoMan auf der Internet+ Expo in Foshan (China)

Corporate

DaSoMan auf der Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Weiterlesen
let’s dev Blog | Google Play Console: Pre-Launch Berichte

Technical

Google Play Console: Pre-Launch Berichte

by Fabian

2019-12-11

Weiterlesen
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Weiterlesen
let’s dev Blog | Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

Corporate

Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

by Karl

2019-11-21

Weiterlesen
let’s dev Blog | World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

Corporate

World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

by Aileen

2019-11-11

Weiterlesen
let’s dev Blog | Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

Corporate

Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Weiterlesen
let’s dev Blog | Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

Corporate

Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

by Elena

2019-09-17

Weiterlesen
let’s dev Blog | Business und Enterprise App Verteilung unter iOS

Technical

Business und Enterprise App Verteilung unter iOS

by Aileen

2019-08-05

Weiterlesen
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

Corporate

let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

by Karl

2019-07-05

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

Technical

Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

by Arne

2019-06-13

Weiterlesen
let’s dev Blog | Apple WWDC 2019: Das sind die Highlights der Keynote

Technical

Apple WWDC 2019: Das sind die Highlights der Keynote

by Nicolas

2019-06-05

Weiterlesen
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Weiterlesen
let’s dev Blog | Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

Corporate

Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

by Helena

2019-04-15

Weiterlesen
let’s dev Blog | Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

Corporate

Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

by Helena

2019-04-14

Weiterlesen
let’s dev Blog | Es ist soweit: Wir ziehen um!

Corporate

Es ist soweit: Wir ziehen um!

by Helena

2019-03-26

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

Technical

Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

by Arne

2019-02-20

Weiterlesen
let’s dev Blog | Die App im Google Play Store

Technical

Die App im Google Play Store

by Elisa

2019-01-24

Weiterlesen
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Weiterlesen
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