Construire une interface utilisateur dans UITableView avec Nexmo In-App Messaging

Construire une interface conversationnelle avec Nexmo Stitch In-App Messaging dans une UITableView

Dans ce tutoriel, nous verrons comment intégrer l'In-App Messaging de Nexmo Stitch dans une UITableView.

1 - Configuration

• Assurez-vous d'avoir jeté un coup d'œil à la base de code dans l'application de démarrage ici.

• Assurez-vous de disposer de deux appareils iOS pour réaliser cet exemple. Il peut s'agir de deux simulateurs, d'un simulateur et d'un appareil physique, ou de deux appareils physiques.

2 Mettre à jour l'application iOS

L'application est déjà configurée. Il ne nous reste plus qu'à configurer une UITableView pour y travailler avec Nexmo Stitch ! Nous laisserons LoginController.swift seul. Pour cette démo, nous nous concentrerons uniquement sur le fichier ChatController.swift.

2.1 Mise à jour de la présentation de l'application

Nous allons ajouter de nouveaux éléments à notre application de chat, alors mettons à jour notre mise en page pour les refléter.

2.1.1UITableView

Commençons par une instance de UITableView dont nous utiliserons les cellules pour afficher les messages du chat.

Dans notre .xcodeproj naviguer vers ChatController dans Main.storyboard. La première étape consiste à supprimer le fichier textView.

Pour mettre en place l'UITableView à sa place, procédez comme suit :

• faire glisser une instance de UITableView sur la scène.

• Après avoir ajouté le UITableView aux storyboards, contraignez ses guides de tête, de queue et du haut à la zone de sécurité environnante, respectivement. Nous voulons que les espaces de tête et de queue correspondent à la zone de sécurité à 16 points. Définissons la contrainte pour le guide de mise en page supérieur au sommet de la mise en page de la zone de sécurité à zéro point.

• Ajouter une cellule prototype. Contrôlez le glissement à partir de la bibliothèque d'objets pour ajouter une cellule prototype au sommet de notre instance de UITableView. Pour finaliser l'ajout, nommez la cellule : messageCell car les cellules réutilisables accueilleront les messages !

2.2 Ajout de la nouvelle interface utilisateur à l'applicationChatController

Dans l'exemple précédent, nous avons montré des messages en les ajoutant à une fenêtre de texte (TextView). Pour cet exemple, nous allons vous montrer comment utiliser le SDK iOS avec une instance de UITableView.

Pour ajouter nos nouveaux points de vente d'interface utilisateur de la vue à leur contrôleur ChatControllerfaites ce qui suit :

• créer une connexion entre notre instance de UITableView à son contrôleur dans ChatController.swift nous définissons l'option delegate ou dataSource par référence.

• Avec l'option Main.storyboard ouvert, maintenez simultanément la touche shift option commande, et cliquez sur ChatController.swift pour qu'il apparaisse dans l'éditeur de l'assistant.

• Contrôler le glissement de l'intérieur du corps de UITableView à ChatController.swift pour déclarer tableView comme une sortie en tant que telle :

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

2.3 Câblage du délégué et de la source de données

Notre instance de UITableView aura besoin d'un delegate et dataSource. Dans viewDidLoad(:) nous pouvons utiliser ceci :

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

Désignant ChatController comme délégué pour le UITableView signifie que le ChatController accepte d'agir au nom du UITableView pour s'occuper de toutes les méthodes de délégation requises pour notre instance de UITableView. De même, désigner ChatController comme source de données signifie que ChatController accepte d'agir au nom de UITableView pour gérer les méthodes nécessaires à l'acheminement des données dans l'UITableView. En conséquence, nous devons maintenant programmer ces méthodes. C'est ce qu'on appelle la "conformité".

2.3.1 Programmation des délégués et des sources de données

Si vous avez suivi les étapes décrites au point 2.3, vous devriez immédiatement recevoir un avertissement indiquant que le "Type ChatController.swift n'est pas conforme au protocole UITableViewDataSource". Si c'est le cas, c'est génial ! Cela signifie que notre instance de tableView est configurée pour son contrôleur. Faisons en sorte qu'elle soit conforme au protocole maintenant !

Afin de le rendre conforme au protocole UITableViewDataSource nous allons utiliser l'une des puissantes fonctionnalités de Swift : une fonction extension. En dessous de l'accolade de fermeture de la classe pour sa déclaration, déclarez une extension pour ChatController.

Puisque cette extension est conforme à UITableViewDelegatenous la programmons ainsi :

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

Étant donné que la dernière méthode requise pour se conformer au protocole de UITableViewDataSource est cellForRowAtnous ajouterons la méthode de la manière suivante :

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

La mise en œuvre de ces deux méthodes devrait permettre de remédier à l'erreur mentionnée plus haut. Les deux méthodesnumberOfRowsInSection et cellForRowAtsont cependant des modèles standard. Dans la section suivante, nous configurons ces méthodes pour qu'elles interagissent directement avec notre instance de ConversationClient pour afficher l'historique du chat".

2.4 - Afficher l'historique d'un chat

Pour configurer le code de base afin d'afficher l'historique des conversations avec les propriétés de notre instance du client de conversation, nous devons travailler sur les éléments suivants numberOfRowsInSection et cellForRowAt.

2.4.1numberOfRowsInSection

Commençons numberOfRowsInSection. Nous accédons à la propriété conversations sur conversation que nous avons fait passer par performSegue(withIdentifier:sender) à partir de l'élément LoginController.swift. Sur la propriété events qui est conforme à la propriété de Swift CollectionTypeSwift, il existe une propriété pour .count, qui renvoie le nombre de messages dans l'historique d'un chat. Cela se passe comme suit :

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

Notre instance de tableView devrait renvoyer autant de lignes qu'il y a d'événements dans notre instance de conversationalors qu'elle n'en renvoyait aucune auparavant. Si c'est le cas, nous sommes à mi-chemin ! L'étape suivante consiste à configurer cellForRowAt pour afficher les événements sous forme de messages dans la propriété textLabel.text de la cellule prototype. Nous le faisons en envoyant un événement par ligne dans la propriété indexPath en tant que TextEvent qui est assigné à la valeur de la constante appelée message. Avec message contenant la valeur des messages de chaque ligne, nous l'assignons à la valeur de cell.textLabel?.text. Cela se passe ainsi :

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;
}

L'étape suivante consiste à s'assurer que notre instance de tableView se mette à jour, de sorte que dans sendBtn(:) nous appelons tableView.reload().

L'appel tableView.reload() sur une conversation permet de récupérer l'historique des événements. Maintenant, lorsque nous déclenchons une séquence et que nous ouvrons la fenêtre ChatController.swiftnous aurons l'historique de la conversation chargé dans notre instance de UITableView.

Conclusion

L'affichage de l'historique d'un chat n'est qu'une des nombreuses fonctions disponibles pour Stitch. En plus de l'historique du chat, il y a des fonctions pour les indicateurs de frappe, l'activation/désactivation de la voix, les méthodes de commodité d'appel, ou même la fonctionnalité d'appel IP-PSTN / IP-IP et bien d'autres choses encore !

Nexmo et Swift

Si vous êtes un développeur Swift actif ou si vous débutez avec le langage, nous vous encourageons à vous impliquer dans la communauté des développeurs Nexmo. Consultez les projets hébergés sur Nexmo GitHub ou suivez-nous sur Twitter @NexmoDev.

Nous vous invitons à interagir avec notre équipe de développeurs, à consulter nos dépôts de code et plus encore. Si vous souhaitez consulter d'autres tutoriels sur l'utilisation de Nexmo Stitch In-App Messaging pour iOS, consultez nos autres quickstarts.

Vous avez des questions ? Contactez-nous sur notre Nexmo Community Slack ou envoyez-nous un email. Si vous avez eu des problèmes avec le code, vous pouvez croiser votre base avec celle-ci un!