En este tutorial revisaremos la nueva característica que Apple lanzó en la WWDC 2017 llamada Safe Area Layout. Después de la revisión, diseñaremos una interfaz de usuario conversacional básica con Safe Area Layout, añadiendo funcionalidad conversacional con Nexmo In-App Messaging.

Disposición de la zona segura para iOS 11

¿Qué es el diseño de zona segura? Con iOS 7, Apple introdujo el topLayoutGuide y el bottomLayoutGuide como propiedades de UIViewController para permitir flexibilidad en los diseños cuyos bordes exteriores tocan áreas designadas para barras de UIKit como las de estado, navegación y pestaña. Apple, sin embargo, dejó obsoletas estas guías con un reemplazo llamado Safe Area Layout Guide, que se detalla en WWDC 2017 Sesión 412, Técnicas de diseño automático en Interface Builder.. He aquí un desglose visual:

Auto Layout Guides

La diferencia básica es pasar de dos rectángulos a uno. Mientras que el topLayoutGuide se refería al borde inferior de un rectángulo superior o el bottomLayoutGuide se refería al borde superior de un rectángulo inferior, la nueva Área segura es el área rodeada por estos rectángulos (es decir, una reducción simplificada). Se trata de una diferencia menor que supone un cambio importante en la forma en que Auto Layout asigna sus restricciones a las vistas. Si alguna de las barras del UIKit desapareciera, la Disposición del Área Segura se ajustaría en consecuencia.

Construyamos ahora la interfaz conversacional básica.

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.

Interfaz de usuario conversacional básica

Vamos a crear un .xcodeproj con el objetivo de despliegue establecido en iOS 11 o superior. Dentro del programa .xcodeproj busquemos el archivo ViewController.Swift.

Nuestra interfaz de usuario de conversación básica será realmente básica así que dentro de ViewController.Swift vamos a añadir funcionalidad para dos salidas y una acción. La acción será para un UIButton. El resto serán salidas.

Una vez configurados los controladores, pasemos a sus correspondientes elementos de interfaz de usuario, tales como textView, UITextFieldy UIButton.

Cambiar de ViewController.Swift a Main.storyboard con Mayúsculas + Opción + Comando + Enter en nuestro .xcodeproj. Arrastramos una instancia de textView a la escena ViewController.Swiftde la escena.

Nota: Si desea un desglose rápido de lo que deben ser las restricciones en el esquema del documento, desplácese hasta el final de esta sección.

• Arrastre de control desde la parte superior de la vista de texto hasta la parte superior del área segura con una constante a cero. Arrastre de control desde el espacio final de la vista de texto hasta el espacio final del área segura con una constante de cero. Arrastre de control desde el espacio inicial de la vista de texto hasta el espacio inicial del área segura con una constante de cero.

• Control arrastrar una instancia de UIButton a la esquina inferior derecha de la vista de contenido debajo de la vista de texto. Arrastre desde el botón hasta el espacio final del Área Segura. Arrastre desde el botón hasta la parte inferior del diseño del área segura. Fije la constante de estas restricciones en 15.

• Control arrastrar una instancia de UITextField a la esquina inferior izquierda de la vista de contenido debajo de la vista de texto. Arrastre desde el campo de texto hasta el espacio inicial del Área Segura. Arrastre desde el campo de texto hasta la parte inferior del diseño del área segura. Fije la constante de estas restricciones en 15.

Nota: Opcionalmente, puede establecer estos dos conjuntos de restricciones simultáneamente haciendo clic con el botón shift en el contorno del documento desde la instancia a la vista.

• Arrastre el control desde el campo de texto hasta el botón. Haga clic en espaciado horizontal y última línea de base. Para resolver la advertencia fatal relativa a estas dos instancias que compiten por el espaciado horizontal, selecciona una prioridad de abrazado de contenido para el botón que sea mayor que para el campo de texto, digamos 251. En consecuencia, el espaciado horizontal del campo de texto fluctuará a partir de entonces en respuesta al tamaño de pantalla del dispositivo sin que el espacio entre el botón y el texto o el tamaño del botón cambien en absoluto.

• Por último, arrastre el control desde la parte inferior de la vista de texto hasta la parte superior del campo de texto seleccionando el espaciado vertical con una constante a 15.

He aquí un rápido desglose de lo que deben ser las restricciones en el esquema del documento:

Safe Layout Guide Constraints

Con nuestra interfaz conversacional básica diseñada con el Diseño de Área Segura, implementaremos la funcionalidad conversacional con Nexmo In-App Messaging.

Nexmo In-App Messaging

Nexmo In-App Messaging ya está en versión preliminar para desarrolladores y le invitamos a ser de los primeros en utilizar esta tecnología para crear experiencias de chat de marca en sus aplicaciones móviles o web.

Amplíe sus canales de comunicación con el usuario en entornos como centros de contacto o mercados en línea. Con Nexmo In-App Messaging, puede crear fácilmente estas experiencias de mensajería -y cualquier otra que pueda conceptualizar- para ofrecer a sus usuarios una interfaz de mensajería intuitiva y familiar.

Nexmo In-App Messaging incluye:

• SDK multiplataforma: Integra SDKs de iOS, Android y JavaScript para que los usuarios puedan chatear sin problemas en cualquier dispositivo.

• Chat con muchas funciones: Cree una experiencia que muestre indicadores de escritura y cuándo se enviaron, entregaron y leyeron los mensajes.

• Sincronización offline: Con el almacenamiento en caché integrado, los mensajes se guardan cuando un dispositivo se desconecta y se envían o reciben una vez que el dispositivo vuelve a estar en línea.

Inscríbete

Prueba Nexmo In-App Messaging registrándote en una Nexmo Account. Después de registrarse, podemos empezar a integrar el SDK de iOS en nuestro .xcodeproj.

Crear una aplicación Nexmo, una conversación, un usuario y añadir un usuario

Encontrará información detallada sobre el proceso de creación de una conversación Nexmo en una guía rápida para iOS aquí. Un desglose rápido es el siguiente:

$ 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

Tome nota del ID de la aplicación. Nos referiremos a esto como YOUR_APP_ID más adelante.

$ nexmo conversation:create display_name="Nexmo Chat"

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

Toma nota del identificador de la conversación. Nos referiremos a él como YOUR_CONVERSATION_ID más adelante.

$ nexmo user:create name="jamie"

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

Tome nota del ID de usuario. Nos referiremos a él como YOUR_USER_ID más adelante.

$ 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

Tome nota del JWT generado. Nos referiremos a esto como USER_JWT más adelante.

Añadir el Nexmo In-App iOS SDK a Cocoapods

Navegue hasta el directorio raíz del proyecto en el Terminal. Ejecútelo: pod init. Abra el archivo PodFile. Configure sus especificaciones en consecuencia:

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

Vista y controlador

Con el Cocoapod añadido vamos a conectar la vista de antes con el controlador. Asegúrate de crear una conexión desde la instancia de UIButton a la acción, mientras conectas las instancias de la vista de texto y el campo de texto a sus respectivas salidas.

Registro de un usuario

En ViewController.Swift vamos a registrar al usuario con el USER_JWT generado anteriormente.

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

ConversationClient.configuration = Configuration(with: .info)

return ConversationClient.instance
}()

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

Envío de eventos de texto

Para enviar un mensaje sólo tenemos que llamar a send() en nuestra instancia de conversación; send() toma un argumento, un mensaje de cadena.

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

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

} catch let error {
print(error)
}

}

Recepción de eventos de texto

En viewDidLoad() queremos añadir un manejador para manejar nuevos eventos como los TextEvents que creamos cuando pulsamos el botón enviar. Podemos hacerlo así

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

Probando

Después de integrar Nexmo In-App Messaging iOS SDK en su proyecto, sus instancias de TextEvent deberían aparecer en el diseño del área segura. Pruébalo en tu iPhone o en el simulador de iOS. El producto final tendrá este aspecto:

iPhone X

Conclusión

En este tutorial, revisamos la nueva característica que Apple lanzó en la WWDC 2017 llamada Safe Area Layout. Después de revisarla, diseñamos una interfaz de usuario conversacional básica con el nuevo diseño de área segura. Con el diseño, añadimos funcionalidad conversacional con Nexmo In-App Messaging. ¡Voilà!

Nexmo y Swift

Si eres un desarrollador activo de Swift o te estás iniciando en el lenguaje, te animamos a que participes en la Comunidad de Desarrolladores de Nexmo. Echa un vistazo a los proyectos alojados en Nexmo GitHub o síguenos en Twitter @NexmoDev.

Te invitamos a interactuar con nuestro equipo de desarrolladores, consultar nuestros repositorios de código y mucho más. Si desea consultar más tutoriales sobre cómo utilizar Nexmo In-App Messaging para iOS, consulte nuestros otros quickstarts.

¿Tiene preguntas? Contacta con nosotros en nuestra Comunidad Nexmo Slack o envíenos un correo electrónico.