Erstellen einer UI in UITableView mit Nexmo In-App Messaging

Erstellen einer Conversational UI mit Nexmo Stitch In-App Messaging in einer UITableView

In diesem Tutorial wird gezeigt, wie man Nexmo Stitch's In-App Messaging in eine UITableView integriert.

1 - Einrichtung

• Vergewissern Sie sich, dass Sie einen Blick auf die Codebasis in der Starter-App geworfen haben hier.

• Stellen Sie sicher, dass Sie zwei iOS-Geräte haben, um dieses Beispiel auszuführen. Das können zwei Simulatoren, ein Simulator und ein physisches Gerät oder zwei physische Geräte sein.

2 Aktualisieren Sie die iOS-App

Die App ist bereits eingerichtet. Alles, was wir jetzt noch tun müssen, ist eine UITableView zu konfigurieren, um mit Nexmo Stitch darin zu arbeiten! Wir lassen LoginController.swift allein. Für diese Demo werden wir uns ausschließlich auf die ChatController.swift.

2.1 Aktualisieren des App-Layouts

Wir werden unserer Chat-App einige neue Elemente hinzufügen, also sollten wir unser Layout aktualisieren, um sie zu berücksichtigen.

2.1.1UITableView

Beginnen wir mit einer Instanz von UITableView deren Zellen wir verwenden werden, um Nachrichten aus dem Chat anzuzeigen.

In unserem .xcodeproj navigieren zu ChatController Szene in Main.storyboard. Unser erster Schritt ist das Löschen des textView.

Um die UITableView an ihrer Stelle einzurichten, gehen Sie wie folgt vor:

• Steuerung ziehen Sie eine Instanz von UITableView auf die Szene.

• Nachdem Sie die UITableView zu Storyboards hinzugefügt haben, beschränken Sie die vorderen, hinteren und oberen Hilfslinien auf den umgebenden sicheren Bereich. Wir möchten den vorderen und hinteren Bereich auf den sicheren Bereich mit 16 Punkten festlegen. Legen Sie die Beschränkung für die obere Layouthilfslinie auf den oberen Rand des Layouts des sicheren Bereichs mit null Punkten fest.

• Fügen Sie eine Prototypzelle hinzu. Ziehen Sie das Steuerelement aus der Objektbibliothek, um eine Prototypzelle oben in unserer Instanz von UITableView. Um das Hinzufügen abzuschließen, benennen Sie die Zelle: messageCell denn die wiederverwendbaren Zellen werden Nachrichten enthalten!

2.2 Hinzufügen der neuen Benutzeroberfläche zurChatController

In den vorangegangenen Schnellstarts haben wir Nachrichten durch Hinzufügen zu einer TextView gezeigt. In diesem Beispiel zeigen wir Ihnen, wie Sie das iOS SDK mit einer Instanz von UITableView.

Um unsere neuen UI-Outlets von der View zu ihrem Controller hinzuzufügen ChatControllerhinzuzufügen, gehen Sie wie folgt vor:

• eine Verbindung von unserer Instanz von UITableView zu seinem Controller in ChatController.swift setzen wir die delegate oder dataSource Eigenschaften referenziell.

• Wenn Main.storyboard geöffnet, halten Sie gleichzeitig die Umschaltoption und den Befehl gedrückt und klicken Sie auf ChatController.swift so dass es im Assistenteneditor erscheint.

• Kontrollieren Sie das Ziehen innerhalb des Körpers von UITableView auf ChatController.swift um zu deklarieren tableView als Auslass als solchen zu deklarieren:

class ChatController: UIViewController {
// tableView for displaying chat
@IBOutlet weak var tableView: UITableView!
}

2.3 Verkabelung des Delegaten und der Datenquelle

Unsere Instanz von UITableView benötigt eine delegate und dataSource. In viewDidLoad(:) können wir dies verwenden:

// assignment of delegate to our ChatController
tableView.delegate = self
// assignment of dataSource to our ChatController
tableView.dataSource = self

Benennung von ChatController als Delegierter für die UITableView bedeutet, dass der ChatController zustimmt, im Namen der UITableView zu übernehmen, welche Delegate-Methoden für unsere Instanz von UITableView. Ähnlich bedeutet die Benennung von ChatController als die Datenquelle bedeutet, dass die ChatController zustimmt, im Namen von UITableView zu handeln, um die Methoden zu handhaben, die für das Einspeisen von Daten in die UITableView erforderlich sind. Dementsprechend müssen wir nun diese Methoden programmieren. Dies wird als "Konformität" bezeichnet.

2.3.1 Programmierung von Delegaten und Datenquellen

Wenn Sie die Schritte in 2.3 befolgt haben, sollten Sie sofort eine Warnung erhalten, die besagt, dass "Type ChatController.swift ist nicht konform mit dem Protokoll UITableViewDataSource". Wenn Sie das tun, großartig! Das bedeutet, dass unsere Instanz von tableView ist für seinen Controller konfiguriert. Lassen Sie uns jetzt die Konformität mit dem Protokoll herstellen!

Um die Konformität mit dem UITableViewDataSource Protokoll zu machen, werden wir eine der mächtigen Funktionen von Swift nutzen: eine extension. Unterhalb der schließenden Klammer der Klasse für ihre Deklaration deklarieren wir eine Erweiterung für ChatController.

Da diese Erweiterung konform ist mit UITableViewDelegateentspricht, programmieren wir sie so:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}

Da die letzte verbleibende erforderliche Methode zur Einhaltung des Protokolls für UITableViewDataSource ist cellForRowAtist, fügen wir die Methode auf folgende Weise hinzu:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellWithIdentifier", for: indexPath)
return cell;
}

Durch die Anwendung dieser beiden Methoden sollte der oben erwähnte Fehler behoben werden. Beide Methoden -numberOfRowsInSection und cellForRowAtsind jedoch Standardformulare. Im nächsten Abschnitt konfigurieren wir diese Methoden, um direkt mit unserer Instanz von ConversationClient um den Chatverlauf anzuzeigen.

2.4 - Verlauf eines Chats anzeigen

Um den Boilerplate-Code so zu konfigurieren, dass er den Chatverlauf mit den Eigenschaften unserer Instanz des Konversationsclients anzeigt, müssen wir mit numberOfRowsInSection und cellForRowAt.

2.4.1numberOfRowsInSection

Beginnen wir numberOfRowsInSection. Wir greifen auf die conversations Eigenschaft auf conversation die wir durch performSegue(withIdentifier:sender) aus dem LoginController.swift. Auf die events Eigenschaft, die der Swift-Eigenschaft CollectionTypeentspricht, gibt es eine Eigenschaft für .countdie die Anzahl der Nachrichten im Verlauf eines Chats zurückgibt. Das geschieht folgendermaßen:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return conversation!.events.count
}

Unsere Instanz von tableView sollte jetzt so viele Zeilen zurückgeben, wie es Ereignisse in unserer Instanz von conversationsind, während sie vorher keine zurückgegeben hat. Wenn das der Fall ist, haben wir die Hälfte geschafft! Der nächste Schritt ist die Konfiguration von cellForRowAt so zu konfigurieren, dass die Ereignisse als Nachrichten in der textLabel.text Eigenschaft anzuzeigen. Dies geschieht durch Downcasting eines Ereignisses pro Zeile in indexPath als TextEvent das dem Wert der Konstante namens message. Mit message die den Wert für die Nachrichten jeder Zeile enthält, weisen wir diesen dem Wert für cell.textLabel?.text. Dies geschieht folgendermaßen:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellWithIdentifier", for: indexPath)

let message = conversation?.events[indexPath.row] as? TextEvent

cell.textLabel?.text = message?.text

return cell;
}

Der nächste Schritt besteht darin, sicherzustellen, dass unsere Instanz von tableView aktualisiert, so dass in sendBtn(:) rufen wir tableView.reload().

Der Aufruf von tableView.reload() einer Konversation wird der Ereignisverlauf abgerufen. Wenn wir nun eine Segue auslösen und die ChatController.swiftöffnen, haben wir den Verlauf des Chats in unserer Instanz von UITableView.

Schlussfolgerung

Die Anzeige des Chatverlaufs ist nur eine der vielen Funktionen, die für Stitch verfügbar sind. Zusätzlich zum Chatverlauf gibt es Funktionen für Tippindikatoren, das Aktivieren/Deaktivieren von Voice, Anrufbequemlichkeitsmethoden oder sogar IP-PSTN / IP-IP-Anruffunktionalität und vieles, vieles mehr!

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 mehr Tutorials über die Verwendung von Nexmo Stitch In-App Messaging für iOS sehen möchten, schauen Sie sich unsere anderen Quickstarts an.

Noch Fragen? Kontaktieren Sie uns in unserem Nexmo Community Slack oder schicken Sie uns eine E-Mail. Wenn du Probleme mit dem Code hattest, kannst du deine Basis mit dieser hier vergleichen einer!