Construir una interfaz de usuario en UITableView con Nexmo In-App Messaging

Construir una interfaz de usuario conversacional con Nexmo Stitch In-App Messaging en un UITableView

En este tutorial revisaremos cómo integrar In-App Messaging de Nexmo Stitch en una UITableView.

1 - Configuración

• Asegúrate de haber echado un vistazo al código base de la aplicación de inicio aquí.

• Asegúrese de que dispone de dos dispositivos iOS para completar este ejemplo. Pueden ser dos simuladores, un simulador y un dispositivo físico, o dos dispositivos físicos.

2 Actualizar la aplicación iOS

La aplicación ya está configurada. ¡Todo lo que tenemos que hacer ahora es configurar un UITableView para trabajar en ella con Nexmo Stitch! Dejaremos LoginController.swift solo. Para esta demo, nos centraremos únicamente en el módulo ChatController.swift.

2.1 Actualizar el diseño de la aplicación

Vamos a añadir algunos elementos nuevos a nuestra aplicación de chat, así que actualicemos nuestro diseño para reflejarlos.

2.1.1UITableView

Empecemos con una instancia de UITableView cuyas celdas utilizaremos para mostrar los mensajes del chat.

En nuestro .xcodeproj navegar a ChatController escena en Main.storyboard. Nuestro primer paso es borrar el archivo textView.

Para configurar el UITableView en su lugar, haga lo siguiente:

• arrastre una instancia de UITableView a la escena.

• Después de añadir el UITableView a los guiones gráficos, restrinja sus guías inicial, final y superior al área segura circundante respectivamente. Queremos establecer el espacio inicial y final en el área segura a 16 puntos. Establezcamos la restricción para la guía de diseño superior en la parte superior del diseño del área segura en cero puntos.

• Añade una celda prototipo. Arrastre el control desde la biblioteca de objetos para añadir una celda prototipo a la parte superior de nuestra instancia de UITableView. Para finalizar la adición nombra la celda: messageCell ¡porque las celdas reutilizables albergarán mensajes!

2.2 Añadir la nueva interfaz de usuario a la aplicaciónChatController

En los inicios rápidos anteriores mostramos mensajes añadiéndolos a un TextView. Para este ejemplo vamos a mostrar cómo utilizar el SDK de iOS con una instancia de UITableView.

Para añadir nuestras nuevas salidas de interfaz de usuario de la vista a su controlador ChatControllerhaz lo siguiente:

• crear una conexión desde nuestra instancia de UITableView a su controlador en ChatController.swift establecemos el parámetro delegate o dataSource de forma referencial.

• Con Main.storyboard abierto, mantenga pulsada simultáneamente la tecla Mayúsculas Opción Comando y haga clic en ChatController.swift para que aparezca en el editor asistente.

• Controlar el arrastre desde el cuerpo de UITableView a ChatController.swift para declarar tableView como una salida como tal:

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

2.3 Conectar el delegado y el origen de datos

Nuestra instancia de UITableView necesitará un delegate y dataSource. En viewDidLoad(:) podemos usar esto:

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

Designación de ChatController como delegado del UITableView significa que el ChatController acepta actuar en nombre de UITableView para encargarse de los métodos de delegado que sean necesarios para nuestra instancia de UITableView. Del mismo modo, designar ChatController como dataSource significa que ChatController acepta actuar en nombre de UITableView para manejar los métodos necesarios para canalizar los datos en el UITableView. En consecuencia, ahora debemos programar estos métodos. Esto se denomina "conformar".

2.3.1 Programación de delegados y fuentes de datos

Si ha seguido los pasos indicados en 2.3, debería recibir inmediatamente una advertencia que le indicará que "Type ChatController.swift no se ajusta al protocolo UITableViewDataSource". Si es así, ¡genial! Significa que nuestra instancia de tableView está configurada para su controlador. ¡Hagamos que se ajuste al protocolo ahora!

Para que se ajuste al protocolo UITableViewDataSource haremos uso de una de las potentes características de Swift: un protocolo extension. Debajo del corchete de cierre de la clase para su declaración, declara una extensión para ChatController.

Dado que esta extensión se ajusta a UITableViewDelegatelo programamos así:

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

Dado que el último método necesario para ajustarse al protocolo de UITableViewDataSource es cellForRowAtañadiremos el método de la siguiente manera:

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

La aplicación de estos dos métodos debería solucionar el error mencionado anteriormente. Ambos métodosnumberOfRowsInSection y cellForRowAtsin embargo, son repetitivos. En la siguiente sección configuraremos estos métodos para que interactúen directamente con nuestra instancia de ConversationClient para mostrar el historial del chat".

2.4 - Mostrar el historial de un chat

Para configurar el código boilerplate para mostrar el historial de chat con las propiedades de nuestra instancia del cliente de conversación tenemos que trabajar en numberOfRowsInSection y cellForRowAt.

2.4.1numberOfRowsInSection

Comencemos numberOfRowsInSection. Accedemos a la propiedad conversations propiedad en conversation que pasamos por performSegue(withIdentifier:sender) desde el directorio LoginController.swift. En la propiedad events que se ajusta a la propiedad CollectionTypede Swift, hay una propiedad para .count, que devuelve el número de mensajes en el historial de un chat. Sucede así:

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

Nuestra instancia de tableView debería devolver tantas filas como eventos haya en nuestra instancia de conversationmientras que antes no devolvía ninguna. Si es así, ya hemos recorrido la mitad del camino. El siguiente paso es configurar cellForRowAt para mostrar los eventos como mensajes en la propiedad textLabel.text de la celda prototipo. Lo hacemos bajando un evento por fila en indexPath como TextEvent que se asigna al valor de la constante llamada message. Con message que contiene el valor de los mensajes de cada fila, lo asignamos al valor de la constante cell.textLabel?.text. Sucede así

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

El siguiente paso es asegurarnos de que nuestra instancia de tableView se actualice, por lo que en sendBtn(:) llamamos a tableView.reload().

Si se llama a tableView.reload() en una conversación recupera el historial de eventos. Ahora, cuando activemos un segue y abramos la ventana ChatController.swifttendremos el historial de la conversación cargado en nuestra instancia de UITableView.

Conclusión

Mostrar el historial de un chat es sólo una de las muchas características disponibles para Stitch. Además del historial de chat hay funciones para indicadores de escritura, activar / desactivar voz, métodos de conveniencia de llamadas, o incluso funcionalidad de llamadas IP-PSTN / IP-IP ¡y mucho, mucho más!

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 Stitch In-App Messaging para iOS, consulte nuestros otros quickstarts.

¿Preguntas? Póngase en contacto con nosotros en nuestra Comunidad Nexmo Slack o envíenos un correo electrónico. Si has tenido algún problema con el código, puedes cruzar tu base con esta un¡!