Dans ce tutoriel, nous allons passer en revue la toute nouvelle fonctionnalité qu'Apple a publiée lors de la WWDC 2017 et qui s'appelle Safe Area Layout. Après l'examen, nous allons mettre en page une interface utilisateur conversationnelle de base avec le Safe Area Layout, en ajoutant des fonctionnalités conversationnelles avec Nexmo In-App Messaging !

Disposition de la zone de sécurité pour iOS 11

Qu'est-ce que la disposition de la zone de sécurité ? Avec iOS 7, Apple a introduit les fonctions topLayoutGuide et le bottomLayoutGuide en tant que propriétés de UIViewController pour permettre une certaine flexibilité dans les dispositions dont les bords extérieurs touchent les zones désignées pour les barres UIKit telles que les barres d'état, de navigation et d'onglets. Cependant, Apple a rendu ces guides obsolètes en les remplaçant par le Safe Area Layout Guide (guide de mise en page des zones sûres), détaillé dans la WWDC 2017 Session 412, Techniques de mise en page automatique dans Interface Builder. Voici une décomposition visuelle :

Auto Layout Guides

La différence fondamentale consiste à passer de deux rectangles à un seul. Alors que le topLayoutGuide se référait au bord inférieur d'un rectangle supérieur ou le bottomLayoutGuide se référait au bord supérieur d'un rectangle inférieur, la nouvelle zone de sécurité est la zone entourée par ces rectangles (c'est-à-dire une réduction simplifiée). Il s'agit d'une différence mineure qui constitue un changement majeur dans la manière dont Auto Layout associe ses contraintes aux vues. Si l'une des barres UIKit venait à disparaître, la disposition de la zone de sécurité s'adapterait en conséquence.

Construisons maintenant l'interface conversationnelle de base.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Interface utilisateur conversationnelle de base

Créons un fichier .xcodeproj avec la cible de déploiement définie sur iOS 11 ou plus. À l'intérieur du programme .xcodeproj on trouve le fichier ViewController.Swift.

L'interface utilisateur de notre conversation de base sera vraiment basique, donc à l'intérieur de ViewController.Swift ajoutons des fonctionnalités pour deux points de vente et une action. L'action sera pour un UIButton. Les autres seront des points de vente.

Une fois les contrôleurs mis en place, nous allons nous intéresser aux éléments d'interface utilisateur correspondants, tels que textView, UITextField, et UIButton.

Passer de ViewController.Swift à Main.storyboard avec Shift + Option + Commande + Entrée dans notre .xcodeproj. Faisons glisser une instance de textView sur la scène de ViewController.Swiftsur la scène de

Note: Si vous souhaitez obtenir un aperçu rapide des contraintes qui devraient figurer dans le plan du document, faites défiler la page jusqu'au bas de cette section.

• Contrôlez le glissement depuis le haut de la vue du texte jusqu'au haut de la zone de sécurité avec une constante à zéro. Contrôlez le glissement de l'espace arrière de la vue du texte vers l'espace arrière de la zone de sécurité avec une constante de zéro. Contrôlez le glissement de l'espace avant de la vue du texte vers l'espace avant de la zone de sécurité avec une constante de zéro.

• Control drag une instance de UIButton dans le coin inférieur droit de la vue de contenu, sous la vue de texte. Contrôlez le bouton et faites-le glisser jusqu'à l'espace arrière de la présentation de la zone de sécurité. Contrôlez le glissement du bouton vers le bas de la présentation de la zone de sécurité. Fixez la constante de ces contraintes à 15.

• Contrôlez le glissement d'une instance d'UITextField dans le coin inférieur gauche de la vue de contenu, sous la vue de texte. Contrôlez le champ de texte et faites-le glisser jusqu'à l'espace principal de la présentation de la zone de sécurité. Contrôlez le glissement du champ de texte vers le bas de la zone de sécurité. Fixez la constante de ces contraintes à 15.

Note: En option, vous pouvez définir ces deux ensembles de contraintes simultanément en cliquant sur le contour du document à partir de l'instance vers la vue.

• Contrôlez le glissement du champ de texte vers le bouton. Cliquez sur l'espacement horizontal et sur la dernière ligne de base. Pour résoudre l'avertissement fatal concernant ces deux instances en concurrence pour l'espacement horizontal, sélectionnez pour le bouton une priorité d'étreinte du contenu supérieure à celle du champ de texte, par exemple 251. En conséquence, l'espacement horizontal du champ de texte fluctuera ensuite en fonction de la taille de l'écran de l'appareil sans que l'espace entre le bouton et le texte ou la taille du bouton ne change.

• Enfin, un glisser-déposer du bas de la vue du texte vers le haut du champ de texte permet de sélectionner l'espacement vertical avec une constante de 15.

Voici une brève description des contraintes qui devraient figurer dans le plan du document :

Safe Layout Guide Constraints

Avec notre interface conversationnelle de base présentée avec la disposition de la zone de sécurité, nous allons mettre en œuvre la fonctionnalité conversationnelle avec Nexmo In-App Messaging.

Nexmo In-App Messaging

Nexmo In-App Messaging est désormais disponible en avant-première pour les développeurs et vous êtes invités à être parmi les premiers à utiliser cette technologie pour créer des expériences de chat de marque sur vos applications mobiles ou web.

Etendez les canaux de communication de vos utilisateurs dans des environnements tels que les centres de contact ou les places de marché en ligne. Avec Nexmo In-App Messaging, vous pouvez facilement créer ces expériences de messagerie - et toutes les autres que vous pouvez conceptualiser - pour fournir à vos utilisateurs une interface de messagerie intuitive et familière.

Nexmo In-App Messaging comprend :

• SDK multiplateforme: Intégrez les SDK iOS, Android et JavaScript pour que les utilisateurs puissent discuter en toute transparence sur n'importe quel appareil.

• Un chat riche en fonctionnalités: Créez une expérience qui met en évidence les indicateurs de frappe et le moment où les messages ont été envoyés, remis et lus.

• Synchronisation hors ligne: Grâce à la mise en cache intégrée, les messages sont sauvegardés lorsqu'un appareil est hors ligne et envoyés ou reçus une fois que l'appareil est de nouveau en ligne.

S'inscrire

Essayez Nexmo In-App Messaging en en créant un Account Nexmo. Après l'inscription, nous pouvons commencer à intégrer le SDK iOS dans notre fichier .xcodeproj.

Création d'une application Nexmo, d'une conversation, d'un utilisateur et ajout d'un utilisateur

Le processus de création d'une conversation Nexmo est décrit en détail dans un quickstart iOS ici. Voici une brève description de ce processus :

$ 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

Notez l'identifiant de l'application. Nous l'appellerons YOUR_APP_ID plus tard.

$ nexmo conversation:create display_name="Nexmo Chat"

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

Prenez note de l'identifiant de la conversation. Nous l'appellerons YOUR_CONVERSATION_ID plus tard.

$ nexmo user:create name="jamie"

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

Prenez note de l'identifiant de l'utilisateur. Nous l'appellerons YOUR_USER_ID plus tard.

$ 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

Prenez note du JWT généré. Nous l'appellerons USER_JWT plus tard.

Ajouter le SDK Nexmo In-App iOS à Cocoapods

Naviguez jusqu'au répertoire racine du projet dans le terminal. Exécutez : pod init. Ouvrez le fichier intitulé PodFile. Configurez ses spécifications en conséquence :

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

Vue et contrôleur

Avec le Cocoapod ajouté, connectons la vue de tout à l'heure avec le contrôleur. Veillez à créer une connexion entre l'instance de UIButton et l'action, tout en connectant les instances de text view et de text field à leurs sorties respectives.

Connexion d'un utilisateur

En ViewController.Swift connectons l'utilisateur à l'aide du fichier USER_JWT généré plus tôt.

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

ConversationClient.configuration = Configuration(with: .info)

return ConversationClient.instance
}()

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

Envoi d'événements textuels

Pour envoyer un message, il suffit d'appeler send() sur notre instance de conversation ; send() prend un argument, un message de type chaîne.

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

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

} catch let error {
print(error)
}

}

Réception d'événements textuels

En viewDidLoad() nous voulons ajouter un gestionnaire pour gérer les nouveaux événements comme les TextEvents que nous créons lorsque nous appuyons sur le bouton d'envoi. Nous pouvons le faire comme suit :

// 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")
}

A l'essai

Après avoir intégré le SDK Nexmo In-App Messaging iOS dans votre projet, vos instances de TextEvent devraient apparaître dans la disposition de la zone de sécurité. Essayez-le sur votre iPhone ou dans le simulateur iOS ! Le produit fini ressemblera à ceci :

iPhone X

Conclusion

Dans ce tutoriel, nous avons passé en revue la toute nouvelle fonctionnalité qu'Apple a publiée lors de la WWDC 2017 et qui s'appelle Safe Area Layout. Après l'avoir examinée, nous avons mis en place une interface utilisateur conversationnelle de base avec la toute nouvelle disposition Safe Area Layout. Avec la disposition, nous avons ajouté une fonctionnalité conversationnelle avec Nexmo In-App Messaging. Voilà !

Nexmo et Swift

Si vous êtes un développeur Swift actif ou si vous débutez dans ce 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 bien plus encore. Si vous souhaitez consulter d'autres tutoriels sur l'utilisation de Nexmo In-App Messaging pour iOS, consultez nos autres quickstarts.

Vous avez des questions ? Contactez-nous sur notre communauté Nexmo Slack ou envoyez-nous un courriel.