Advertisement
  1. Code
  2. iOS SDK

Erstellen einer iMessage-Anwendung in iOS 10

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Einführung

Mit iOS 10 hat Apple die Nachrichtenanwendung über eine neue Funktion namens iMessage-Apps für Entwickler von Drittanbietern geöffnet. Entwickler können jetzt ihre eigenen verschiedenen Arten von Apps erstellen, von Aufkleberpaketen bis hin zu vollständig interaktiven Benutzeroberflächen, mit denen Inline-iMessage-Inhalte erstellt werden.

In diesem Tutorial werde ich Ihnen das neue Nachrichten-Framework vorstellen und Ihnen zeigen, wie Sie Ihre eigenen iMessage-Apps erstellen.

Für dieses Tutorial müssen Sie Xcode 8 unter OS X El Capitan oder höher ausführen und davon ausgehen, dass Sie mit dem Erstellen einer UIKit-basierten iOS-Anwendung vertraut sind. Wenn Sie noch mit der iOS-Entwicklung beginnen, lesen Sie die Tutorialserie iOS von Anfang an mit Swift. Im Verlauf dieser Serie lernen Sie anhand ausführlicher Artikel und Tutorials, wie Sie mit der Entwicklung für die iOS-Plattform beginnen.

1. Ökosystem

Das iMessage-App-Ökosystem beginnt mit einem vollständigen App Store, auf den Benutzer über die Nachrichtenanwendung zugreifen können. Dieser Store ist vollständig vom regulären iOS App Store getrennt und zeigt nur die iMessage-bezogenen Apps an.

iMessage-Apps existieren als Erweiterungen für reguläre iOS-Anwendungen, ähnlich wie Fotos-Erweiterungen und benutzerdefinierte Tastaturen. Der Hauptunterschied besteht darin, dass Sie, da der iMessage App Store in der Nachrichten-App eigenständig vorhanden ist, eine iMessage-App erstellen können, ohne eine iOS-App erstellen zu müssen, die auf dem Startbildschirm des Benutzers angezeigt wird. Die iMessage-App wird als Erweiterung einer praktisch leeren und unsichtbaren iOS-App erstellt. Es ist jedoch wichtig zu beachten, dass Sie, wenn Sie sowohl eine iOS- als auch eine iMessage-App entwickeln möchten, eine iMessage-Erweiterung wie jede andere Art von Erweiterung erstellen können.

Während iMessage-Apps nur unter iOS verfügbar sind, können ihre Inhalte weiterhin auf MacOS- und WatchOS-Geräten angezeigt werden. Darüber hinaus können Benutzer von watchOS 3 ihre kürzlich verwendeten Aufkleber anzeigen und diese direkt von einer Apple Watch an ihre Kontakte senden.

2. Grundlegende Aufkleberpakete

Für Leute, die nur ein schnelles und einfaches iMessage-Aufkleberpaket erstellen möchten, bietet Xcode eine Vorlage, ohne Code schreiben zu müssen! Dies ist ein großartiges Tool, mit dem Grafiker ohne Programmierkenntnisse ein Aufkleberpaket erstellen können.

Mithilfe des neuen Nachrichten-Frameworks zum Erstellen eines Aufkleberpakets können Sie kleine, mittlere oder große Aufkleber erstellen. Diese Größe gilt jedoch für alle Aufkleber in Ihrer Packung. Sie müssen nur die größte Bildgröße für jeden Aufkleber in Ihrem Paket angeben, und das System verkleinert Ihre Bilder, wenn sie auf anderen Geräten angezeigt werden.

Obwohl dies nicht strikt durchgesetzt wird, sind hier die Dateigrößen aufgeführt, die Apple für Ihre Sticker-Packs empfiehlt:

  • Klein:100 x 100 pt im 3x-Maßstab (300 x 300 Pixel Bild)
  • Medium:136 x 136 pt im 3-fachen Maßstab (378 x 378 Pixel Bild)
  • Groß:206 x 206 pt im 3-fachen Maßstab (618 x 618 Pixel Bild)

Es gibt jedoch einige Einschränkungen für die Bilder, die Sie in Ihren Aufkleberpaketen verwenden können:

  • Bilder dürfen nicht größer als 500 KB sein.
  • Bilder dürfen nicht kleiner als 100 x 100 pt (300 x 300 Pixel) sein.
  • Bilder dürfen nicht größer als 206 x 206 pt (618 x 618 Pixel) sein.
  • Bilddateien müssen im PNG-, APNG-, JPEG- oder GIF-Format vorliegen. PNG für statische Aufkleber und APNG für animierte Aufkleber werden empfohlen, da sie Skalierungen und transparente Hintergründe viel besser verarbeiten als JPEG bzw. GIF.

Öffnen Sie Xcode und erstellen Sie ein neues Projekt. Im Abschnitt iOS > Anwendung sehen Sie, dass es jetzt Optionen für iMessage-Anwendungs- und Aufkleber Pack-Anwendung-Projekte gibt. Wählen Sie für dieses erste Beispiel die Vorlage für die Aufkleber Pack-Anwendung aus:

Sticker Pack Application TemplateSticker Pack Application TemplateSticker Pack Application Template

Wenn Sie mitmachen und möchten, dass einige Sticker-Assets in Ihrer Anwendung verwendet werden, können Sie sie aus dem Ordner iMessage Anwendung Aufkleber des Tutorial GitHub repo herunterladen.

In der linken Seitenleiste von Xcode sehen Sie, dass Ihr Projekt jetzt einen Asset-Katalog Stickers.xcstickers enthält. Dieser Ordner enthält Ihr iMessage-Anwendungssymbol und alle Aufkleber in Ihrem Paket. Das Hinzufügen von Aufklebern zu Ihrer Anwendung ist so einfach wie das Ziehen in den Aufkleber Pack-Ordner Ihres Asset-Katalogs.

Sticker Pack FolderSticker Pack FolderSticker Pack Folder

Bitte beachten Sie, dass Sie, wenn Sie einen animierten Aufkleber mit einer Reihe von Bildern hinzufügen möchten, mit der rechten Maustaste in Ihren Aufkleber Pack-Ordner klicken und die Option Assets hinzufügen > Neue Aufklebersequenz auswählen können. Mit diesem in Ihrem Sticker Pack können Sie dann ziehen, um einzelne Frames neu zu ordnen.

Sticker Sequence CreationSticker Sequence CreationSticker Sequence Creation

Wenn Sie bei geöffnetem Asset-Katalog den Attributinspektor in der rechten Seitenleiste von Xcode aufrufen, können Sie den Namen Ihres Aufkleberpakets und auch die von Ihnen verwendete Aufklebergröße ändern.

Sticker Pack ConfigurationSticker Pack ConfigurationSticker Pack Configuration

Testen Sie Ihr Aufkleber Pack

Um Ihr Sticker Pack zu testen, drücken Sie einfach die Wiedergabetaste in der oberen linken Ecke von Xcode oder drücken Sie Befehlstaste-R auf Ihrer Tastatur. Nach dem Start des Simulators sollte Xcode das folgende Menü anzeigen.

Choose App MenuChoose App MenuChoose App Menu

Wählen Sie Nachrichten und klicken Sie dann auf die Schaltfläche Ausführen. Nachdem der Simulator die Nachrichten-App gestartet hat, drücken Sie auf die App Store-Schaltfläche am unteren Bildschirmrand, um auf Ihre iMessage-Anwendungen zuzugreifen.

Accessing iMessage AppsAccessing iMessage AppsAccessing iMessage Apps

Ihr Aufkleberpaket sollte zunächst angezeigt werden. Wenn dies nicht der Fall ist, streichen Sie darüber, bis Sie es erreichen. Sobald Ihre App geladen wurde, sollten die beiden von uns hinzugefügten Aufkleber zur Verwendung und zum Senden verfügbar sein.

Sticker Pack InterfaceSticker Pack InterfaceSticker Pack Interface

Wenn Sie auf einen dieser Aufkleber tippen, wird er zur aktuellen Nachricht hinzugefügt. Von hier aus können Sie auf Senden klicken.

Sent StickerSent StickerSent Sticker

Wie Sie sehen, ist es sehr schnell und einfach, Aufkleber-Packs für iMessage in iOS 10 zu erstellen, ohne dass Code verwendet werden muss.

3. Benutzerdefinierte Aufkleberanwendungen

In einigen Anwendungsfällen reicht die grundlegende Funktionalität der grundlegenden Vorlage für Aufkleberanwendungen möglicherweise nicht aus. Aus diesem Grund bietet Apple Ihnen auch die Möglichkeit, eine individuellere Sticker Pack-Anwendung zu erstellen. Wenn Sie mitmachen möchten, erstellen Sie ein neues Projekt mit dem Namen CustomStickerPack, wie zu Beginn dieses Tutorials gezeigt. Wählen Sie diesmal jedoch die Vorlage für die iMessage-Anwendung.

Sobald Xcode Ihr Projekt erstellt hat, sehen Sie, dass Sie jetzt Ordner haben, die denen einer iOS-App mit einem zusätzlichen MessagesExtension-Ordner ähneln. Der oberste CustomStickerPack-Ordner enthält lediglich einen Asset-Katalog und eine Info.plist-Datei für Ihre "leere" iOS-Anwendung. Es ist wichtig, dass Sie alle App-Symbole mit der richtigen Größe in diesem Asset-Katalog bereitstellen, da iOS sie weiterhin für Dinge wie die Speichernutzungseinstellungen des Benutzers verwendet.

Der Ordner, auf den wir uns konzentrieren werden, ist der MessageExtension-Ordner, der derzeit die folgenden Dateien enthält:

  • MessagesViewController.swift ist der Root-View-Controller für die Benutzeroberfläche Ihrer iMessage-App
  • MainInterface.storyboard, auf dem Sie die Benutzeroberfläche Ihrer App einfach gestalten können
  • Assets.xcassets, das die Symboldateien Ihrer iMessage-App sowie alle anderen Bildelemente enthält, die Sie in Ihrer Benutzeroberfläche verwenden müssen
  • Info.plist für Konfigurationswerte Ihrer Erweiterung

In unserer Beispielanwendung für benutzerdefinierte Aufkleber erstellen wir unsere Benutzeroberfläche nur programmgesteuert mit der neuen MSStickerBrowserViewController-Klasse.

Öffnen Sie Ihre Datei MessagesViewController.swift, und Sie werden zunächst feststellen, dass Ihre MessagesViewController-Klasse eine Unterklasse von MSMessagesAppViewController ist, die selbst eine Unterklasse von UIViewController ist. Dies bedeutet, dass Sie UIKit vollständig für Ihre iMessage-Anwendungen verwenden können.

Die MSMessagesAppViewController-Klasse bietet viele Rückrufmethoden, die Sie überschreiben können, um die Funktionalität Ihrer Anwendung weiter anzupassen. In diesem Tutorial müssen wir uns jedoch nicht darum kümmern. Bearbeiten Sie zunächst einfach Ihre Klassendefinition, sodass Ihre Klasse dem MSStickerBrowserViewDataSource-Protokoll entspricht:

Bevor wir unsere Aufkleber anzeigen können, müssen wir die Dateien zu unserem Projekt hinzufügen und laden. Ziehen Sie die zuvor in diesem Tutorial verwendeten Bilddateien in Ihr Projekt und stellen Sie sicher, dass sie dem MessagesExtension-Ziel hinzugefügt werden. Die Dateien müssen dem Ziel und nicht einem Asset-Katalog hinzugefügt werden, da wir sie auf diese Weise von einer URL laden können, was bei der Arbeit mit benutzerdefinierten Aufklebern viel einfacher ist.

Fügen Sie Ihrer MessagesViewController-Klasse den folgenden Code hinzu, nachdem Sie diese Dateien hinzugefügt haben:

Mit diesem Code erstellen wir einfach ein MSSticker-Array zum Speichern unserer Aufkleber und eine Funktion zum Laden aus dem lokalen Speicher.

Fügen Sie als Nächstes Ihrer Klasse die folgende Methode hinzu:

Mit diesem Code erstellen wir eine Instanz der MSStickerBrowserViewController-Klasse und fügen diese als untergeordnetes Element des Root-View-Controllers hinzu und beschränken sie auf die volle verfügbare Höhe und Breite.

Als Nächstes müssen wir die erforderlichen MSStickerBrowserViewDataSource-Methoden implementieren, um die erforderlichen Aufkleberinformationen bereitzustellen. Fügen Sie dazu Ihrem Code die folgenden Methoden hinzu:

Ersetzen Sie Ihre viewDidLoad-Methode durch die folgende, damit unser gesamter Code tatsächlich ausgeführt wird:

Führen Sie Ihre App wie zuvor aus (denken Sie daran, dass Sie möglicherweise über die App streichen müssen, um zur richtigen App zu gelangen). Sobald alles geladen ist, sollte ein identischer Bildschirm wie zuvor angezeigt werden, außer jetzt mit blauem Hintergrund:

Custom Sticker PackCustom Sticker PackCustom Sticker Pack

In diesem Tutorial haben wir der Einfachheit halber nur lokale Aufkleberbilder in unsere benutzerdefinierte Anwendung geladen. Einer der Hauptvorteile bei der Verwendung einer benutzerdefinierten Aufkleberanwendung besteht jedoch darin, dass Sie Aufkleberbilder von einem Remote-Server laden und sogar mithilfe anderer Ansichtssteuerungen, bevor Sie Ihren MSStickerBrowserViewController anzeigen, Ihre Benutzer ihre eigenen Aufkleber erstellen lassen können.

4. Benutzerdefinierte Anwendungen

Im letzten Teil dieses Tutorials werden wir eine sehr einfache iMessage-Anwendung erstellen, um eine eindeutige Nachricht zu erstellen.

Wenn Sie mitmachen möchten, öffnen Sie Xcode und erstellen Sie eine weitere iMessage-Anwendung namens MessageApp. Öffnen Sie Ihre Datei MainInterface.storyboard und entfernen Sie im angezeigten Ansichts-Controller die Standardbezeichnung und fügen Sie wie gezeigt einen Stepper und eine Schaltfläche hinzu:

App InterfaceApp InterfaceApp Interface

Beachten Sie, dass Sie das automatische Layout in Ihren Benutzeroberflächen implementieren müssen, damit Ihre iMessage-App auf allen Gerätegrößen korrekt angezeigt wird. In diesem Beispiel habe ich den Stepper auf die Mitte des Ansichts-Controllers und die Schaltfläche auf die Unterseite beschränkt.

Öffnen Sie als Nächstes den Attributinspektor mit ausgewähltem Stepper und ändern Sie dessen Minimal- und Maximalwerte auf 0 bzw. 10:

Stepper ValuesStepper ValuesStepper Values

Öffnen Sie als Nächstes den Assistenten-Editor mit Ihrer Datei MessagesViewController.swift, um eine Steckdose für Ihren Stepper und eine Nachbesserungsaktion für Ihre Schaltfläche zu erstellen und anzuschließen:

Jetzt ist es Zeit für uns, Code zu schreiben. Zunächst muss ich Ihnen einige Klassen vorstellen, die für die Erstellung einer iMessage-App von entscheidender Bedeutung sind:

  • MSConversation: Repräsentiert die aktuell geöffnete Konversation. Mit dieser Klasse können Sie das Konversationsprotokoll bearbeiten, indem Sie beispielsweise Nachrichten einfügen oder die aktuell ausgewählte Nachricht abrufen.
  • MSMessage: Stellt eine einzelne Nachricht dar, unabhängig davon, ob Sie sie zum Einfügen in die Konversation erstellt haben oder bereits in der Konversation vorhanden sind.
  • MSMessageTemplateLayout: Erstellt eine Nachrichtenblase, in der Sie Ihre benutzerdefinierte Nachricht anzeigen können. Wie im folgenden Bild gezeigt, verfügt dieses Vorlagenlayout über viele Eigenschaften und Orte, an denen Sie Ihren eigenen Inhalt einfügen können, um Ihre Nachrichten anzupassen.
Template Message LayoutTemplate Message LayoutTemplate Message Layout

Es ist wichtig zu beachten, dass der Bereich oben links in diesem Layout durch das Symbol Ihrer iMessage-App ausgefüllt wird. Alle diese Eigenschaften sind optional. Wenn Sie überhaupt keine Beschriftungszeichenfolgen angeben, wird der untere Teil des Layouts entfernt.

Fügen Sie Ihrer MessagesViewController-Klasse noch in Ihrer MessagesViewController.swift-Datei die folgende Methode hinzu:

Bei dieser Methode nehmen wir den aktuellen Wert des Schiebereglers und setzen ihn in eine kreisförmige Beschriftung. Anschließend rendern wir dieses Label (und seine übergeordnete Ansicht) in ein UIImage-Objekt, das wir an unsere Nachricht anhängen können.

Ersetzen Sie als Nächstes Ihre didPress(button:)-Methode durch den folgenden Code:

Sie werden sehen, dass wir mit diesem Code zunächst das Nachrichtenlayout erstellen und die image- und caption-Eigenschaften festlegen. Als Nächstes erstellen wir unser MSMessage-Objekt, das in die Konversation eingefügt werden soll.

Beachten Sie, dass Sie ein layout und eine url für Ihre Nachricht festlegen müssen, damit iMessage Ihre benutzerdefinierte Nachricht korrekt verarbeitet. Diese URL soll auf eine Webseite verweisen, auf der MacOS-Benutzer auch Ihre benutzerdefinierten iMessage-Inhalte anzeigen können. Für dieses einfache Beispiel haben wir jedoch gerade eine einfache URL aus einer Zeichenfolge erstellt.

Zuletzt fügen wir die Nachricht in die aktuell aktive Konversation ein. Wenn Sie diese Methode aufrufen, wird die Nachricht jedoch nicht gesendet. Stattdessen wird Ihre Nachricht in das Eingabefeld des Benutzers eingefügt, sodass er auf "Senden" klicken kann.

Erstellen Sie Ihre neue App und führen Sie sie erneut aus. Sie sehen eine Benutzeroberfläche, die der folgenden ähnelt:

Running App InterfaceRunning App InterfaceRunning App Interface

Sobald Sie auf die Schaltfläche Nachricht erstellen klicken, sollte auch die im Eingabefeld angezeigte und zum Senden verfügbare Nachrichtenlayoutblase angezeigt werden:

Completed MessageCompleted MessageCompleted Message

Abschluss

In diesem Tutorial habe ich Ihnen das neue Nachrichten-Framework in iOS 10 vorgestellt, mit dem Sie Sticker-Packs und -Anwendungen für die Integration in iMessage erstellen können. Wir haben die grundlegenden Klassen behandelt, die Sie kennen müssen, einschließlich MSStickerBrowserViewController, MSConversation, MSMessage und MSTemplateMessageLayout.

Das Nachrichten-Framework bietet APIs, mit denen Sie Ihre iMessage-Apps umfassend steuern können. Für weitere Informationen würde ich empfehlen, die Apple Messages Framework-Referenz zu lesen.

Bitte hinterlassen Sie wie immer Ihre Kommentare und Ihr Feedback im Kommentarbereich unten.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.