In diesem Tutorial werden wir die brandneue Funktion, die Apple auf der WWDC 2017 vorgestellt hat, besprechen: Safe Area Layout. Nach der Besprechung werden wir eine grundlegende konversationelle Benutzeroberfläche mit dem Safe Area Layout einrichten und die Konversationsfunktionalität mit Nexmo In-App Messaging hinzufügen!

Safe Area Layout für iOS 11

Was ist das Layout des sicheren Bereichs? Mit iOS 7 führte Apple die topLayoutGuide und die bottomLayoutGuide als Eigenschaften von UIViewController eingeführt, um Flexibilität in Layouts zu ermöglichen, deren äußerste Kanten Bereiche berühren, die für UIKit-Leisten wie Status-, Navigations- und Registerkartenleisten vorgesehen sind. Apple hat diese Leitfäden jedoch durch einen Ersatz namens Safe Area Layout Guide veraltet, der in WWDC 2017 Session 412, Automatische Layout-Techniken in Interface Builder. Hier ist eine visuelle Aufschlüsselung:

Auto Layout Guides

Der grundlegende Unterschied besteht darin, dass aus zwei Rechtecken ein einziges wird. Während die topLayoutGuide sich auf die untere Kante eines oberen Rechtecks oder die bottomLayoutGuide auf die obere Kante eines unteren Rechtecks bezog, ist der neue sichere Bereich der Bereich, der von diesen Rechtecken umgeben ist (d. h. eine vereinfachte Reduzierung). Es ist ein kleiner Unterschied, der eine große Veränderung in der Art und Weise bewirkt, wie Auto-Layout seine Beschränkungen auf Ansichten zuordnet. Wenn eine der UIKit-Leisten verschwinden würde, würde sich das Layout des sicheren Bereichs entsprechend anpassen.

Lassen Sie uns nun die grundlegende Konversationsschnittstelle entwickeln.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Basic Conversational User Interface

Erstellen wir eine .xcodeproj-Datei mit dem Bereitstellungsziel iOS 11 oder höher. Innerhalb des .xcodeproj Programms finden Sie die ViewController.Swift.

Unsere grundlegende Konversations-Benutzeroberfläche wird wirklich einfach sein, also fügen wir innerhalb von ViewController.Swift eine Funktionalität für zwei Ausgänge und eine Aktion hinzufügen. Die Aktion wird für eine UIButton. Die übrigen werden Ausgänge sein.

Nachdem die Controller eingerichtet sind, können wir uns den entsprechenden UI-Elementen zuwenden, wie z. B. textView, UITextFieldund UIButton.

Wechsel von ViewController.Swift zu Main.storyboard mit Umschalt + Option + Befehl + Eingabe in unserem .xcodeproj. Ziehen wir zur Kontrolle eine Instanz von textView auf die ViewController.Swiftin die Szene.

Hinweis: Wenn Sie eine schnelle Aufschlüsselung der Einschränkungen in der Gliederung des Dokuments wünschen, scrollen Sie zum Ende dieses Abschnitts.

• Kontrolliertes Ziehen vom oberen Rand der Textansicht zum oberen Rand des sicheren Bereichs mit einer Konstante bei Null. Kontrolliertes Ziehen vom hinteren Bereich der Textansicht zum hinteren Bereich des sicheren Bereichs mit einer Konstante von Null. Kontrolliertes Ziehen vom vorderen Bereich der Textansicht zum vorderen Bereich des sicheren Bereichs mit einer Konstante von Null.

• Ziehen Sie eine Instanz von UIButton in die untere rechte Ecke der Inhaltsansicht unterhalb der Textansicht. Ziehen Sie das Steuerelement von der Schaltfläche auf den hinteren Bereich des Layouts des sicheren Bereichs. Ziehen Sie das Steuerelement von der Schaltfläche an den unteren Rand des Layouts des sicheren Bereichs. Setzen Sie die Konstante für diese Constraints auf 15.

• Ziehen Sie mit dem Steuerelement eine Instanz von UITextField in die untere linke Ecke der Inhaltsansicht unterhalb der Textansicht. Ziehen Sie mit gedrückter Maustaste eine Instanz von UITextField in die untere linke Ecke der Inhaltsansicht unter der Textansicht. Ziehen Sie mit gedrückter Maustaste eine Instanz von UITextField an den unteren Rand des Layouts des geschützten Bereichs. Setzen Sie die Konstante für diese Beschränkungen auf 15.

Hinweis: Optional können Sie diese beiden Gruppen von Beschränkungen gleichzeitig einstellen, indem Sie in der Dokumentenkontur von der Instanz zur Ansicht umschalten.

• Ziehen Sie die Steuerung vom Textfeld auf die Schaltfläche. Klicken Sie auf den horizontalen Abstand und die letzte Grundlinie. Um die fatale Warnung bezüglich dieser beiden Instanzen, die um den horizontalen Abstand konkurrieren, zu beheben, wählen Sie für die Schaltfläche eine höhere Priorität für die Anpassung an den Inhalt als für das Textfeld, beispielsweise 251. Der horizontale Abstand des Textfeldes wird sich dann entsprechend der Bildschirmgröße des Geräts ändern, ohne dass sich der Abstand zwischen der Schaltfläche und dem Text oder die Größe der Schaltfläche ändert.

• Ziehen Sie schließlich vom unteren Rand der Textansicht zum oberen Rand des Textfelds und wählen Sie einen vertikalen Abstand mit einer Konstante von 15.

Hier ist eine kurze Aufschlüsselung der Einschränkungen, die in der Gliederung des Dokuments enthalten sein sollten:

Safe Layout Guide Constraints

Mit unserer grundlegenden Konversationsschnittstelle, die mit dem Safe Area Layout angelegt wurde, werden wir die Konversationsfunktionalität mit Nexmo In-App Messaging implementieren.

Nexmo In-App Messaging

Nexmo In-App Messaging ist jetzt in der Entwickler-Preview und Sie sind eingeladen, unter den Ersten zu sein, die diese Technologie nutzen, um gebrandete Chat-Erlebnisse für Ihre mobilen oder Web-Anwendungen zu schaffen.

Erweitern Sie Ihre Benutzerkommunikationskanäle in Umgebungen wie Kontaktzentren oder Online-Marktplätzen. Mit Nexmo In-App Messaging können Sie diese und andere Messaging-Erlebnisse einfach aufbauen und Ihren Nutzern eine intuitive und vertraute Messaging-Oberfläche bieten.

Nexmo In-App Messaging umfasst:

• Plattformübergreifende SDKs: Integrieren Sie iOS-, Android- und JavaScript-SDKs, damit Benutzer nahtlos auf jedem Gerät chatten können.

• Funktionsreicher Chat: Entwickeln Sie ein Erlebnis, bei dem Sie sehen können, wann Sie getippt haben und wann die Nachrichten gesendet, zugestellt und gelesen wurden.

• Offline-Synchronisation: Mit der integrierten Zwischenspeicherung werden Nachrichten gespeichert, wenn ein Gerät offline geht, und gesendet oder empfangen, sobald das Gerät wieder online ist.

Registrieren Sie sich

Testen Sie Nexmo In-App Messaging, indem Sie sich für einen Nexmo Account anmelden. Nach der Anmeldung können wir beginnen, das iOS SDK in unser .xcodeproj zu integrieren.

Erstellen einer Nexmo-App, einer Konversation, eines Benutzers und Hinzufügen eines Benutzers

Ausführliche Details zur Erstellung von Nexmo-Konversationen finden Sie in einem iOS-Schnellstart hier. Eine kurze Zusammenfassung ist die folgende:

$ nexmo app:create "Conversation iOS App" http://example.com/answer http://example.com/event --type=rtc --keyfile=private.key

> Application created: aaaaaaaa-bbbb-cccc-dddd-0123456789ab

Notieren Sie sich die Anwendungs-ID. Wir werden sie später als YOUR_APP_ID später.

$ nexmo conversation:create display_name="Nexmo Chat"

> Conversation created: CON-aaaaaaaa-bbbb-cccc-dddd-0123456789ab

Notieren Sie sich die Konversations-ID. Wir werden sie später als YOUR_CONVERSATION_ID später.

$ nexmo user:create name="jamie"

> User created: USR-aaaaaaaa-bbbb-cccc-dddd-0123456789ab

Notieren Sie sich die Benutzer-ID. Wir werden sie später als YOUR_USER_ID später.

$ nexmo member:add YOUR_CONVERSATION_ID action=join channel='{"type":"app"}' user_id=YOUR_USER_ID

$ USER_JWT="$(nexmo jwt:generate ./private.key sub=jamie exp=$(($(date +%s)+86400)) acl='{"paths": {"/v1/sessions/**": {}, "/v1/users/**": {}, "/v1/conversations/**": {}}}' application_id=YOUR_APP_ID)"

$ echo USER_JWT

Achten Sie auf das erzeugte JWT. Wir werden dies später als USER_JWT später.

Hinzufügen des Nexmo In-App iOS SDK zu Cocoapods

Navigieren Sie im Terminal zum Stammverzeichnis des Projekts. Ausführen: pod init. Öffnen Sie die Datei "PodFile". Konfigurieren Sie die Spezifikationen entsprechend:

platform :ios, '9.0'

source "https://github.com/Nexmo/PodSpec.git"
source 'git@github.com:CocoaPods/Specs.git'

target 'QuickStartOne' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
pod "NexmoConversation", :git => "https://github.com/nexmo/conversation-ios-sdk.git"
end

Ansicht und Controller

Nachdem der Cocoapod hinzugefügt wurde, verbinden wir die Ansicht von vorhin mit dem Controller. Stellen Sie sicher, dass Sie eine Verbindung von der Instanz von UIButton zur Aktion erstellen, während Sie die Instanzen von Textansicht und Textfeld mit ihren jeweiligen Ausgängen verbinden.

Anmelden eines Benutzers

In ViewController.Swift melden wir den Benutzer mit der zuvor erstellten USER_JWT die zuvor erzeugt wurde.

override func viewDidLoad() {
super.viewDidLoad()
let client: ConversationClient = {

ConversationClient.configuration = Configuration(with: .info)

return ConversationClient.instance
}()

client.login(with: USER_JWT).subscribe()
}

Senden von Text-Ereignissen

Um eine Nachricht zu senden, müssen wir einfach send() in unserer Instanz von conversation aufrufen; send() nimmt ein Argument, eine String-Nachricht.

// sendBtn for sending text
@IBAction func sendBtn(_ sender: Any) {

do {
// send method
try conversation?.send(textField.text!)

} catch let error {
print(error)
}

}

Empfangen von Text-Ereignissen

In viewDidLoad() wollen wir einen Handler für die Behandlung neuer Ereignisse hinzufügen, wie die TextEvents, die wir erzeugen, wenn wir die Schaltfläche "Senden" drücken. Wir können dies wie folgt tun:

// a handler for updating the textView with TextEvents
conversation?.events.newEventReceived.addHandler { event in
guard let event = event as? TextEvent, event.isCurrentlyBeingSent == false else { return }
guard let text = event.text else { return }

self.textView.insertText(" (text) n")
}

Probieren Sie es aus

Nachdem Sie das Nexmo In-App Messaging iOS SDK in Ihr Projekt integriert haben, sollten Ihre Instanzen von TextEvent im Safe Area Layout erscheinen. Probieren Sie es entweder auf Ihrem iPhone oder im iOS Simulator aus! Das fertige Produkt sieht dann so aus:

iPhone X

Schlussfolgerung

In diesem Tutorial haben wir die brandneue Funktion "Safe Area Layout", die Apple auf der WWDC 2017 vorgestellt hat, besprochen. Nach der Überprüfung haben wir eine grundlegende konversationelle Benutzeroberfläche mit dem brandneuen Safe Area Layout erstellt. Mit dem Layout haben wir die Konversationsfunktionalität mit Nexmo In-App Messaging hinzugefügt. Voilà!

Nexmo und Swift

Wenn Sie ein aktiver Swift-Entwickler sind oder gerade erst mit der Sprache beginnen, möchten wir Sie ermutigen, sich an der Nexmo Developer Community zu beteiligen. Schauen Sie sich die Projekte an, die auf Nexmo GitHub gehostet werden oder folgen Sie uns auf Twitter @NexmoDev.

Wir laden Sie ein, sich mit unserem Entwicklerteam auszutauschen, unsere Code-Repositories zu besuchen und vieles mehr. Wenn Sie weitere Tutorials zur Verwendung von Nexmo In-App Messaging für iOS sehen möchten, schauen Sie sich unsere anderen Quickstarts.

Noch Fragen? Kontaktieren Sie uns in unserer Nexmo Community Slack oder mailen Sie uns.