Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

Desarrollando una aplicación de citas con Sinch: Integración de Sinch

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Creating a Dating Application with Sinch.
Creating a Dating Application with Sinch: RESTful API
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Steven (you can also view the original English article)

Las aplicaciones de citas se han convertido en uno de los géneros más populares en la App Store recientemente. Sin embargo, debido a su naturaleza, desarrollar una aplicación de citas con todas las funciones puede ser un desafío. En la segunda parte de esta serie, veremos cómo podemos aprovechar la plataforma Sinch en una aplicación iOS para implementar llamadas de voz y mensajes. Estas son dos características fundamentales para las aplicaciones de citas y son sorprendentemente fáciles de implementar con Sinch.

1. Información general

Antes de comenzar a programar, revisemos la aplicación que estamos creando. Nuestra aplicación de citas tendrá algunas características básicas en las que nos centraremos en este tutorial. Para las cuentas, los usuarios podrán iniciar sesión utilizando Facebook. Después de iniciar sesión, podrán ver a otros usuarios de la aplicación que están cerca.

Los usuarios se almacenan en el servidor con el que nos comunicamos a partir de la API restful creada en la primera parte de este tutorial. Una vez que obtenemos la información del usuario de Facebook, un nuevo usuario se publica en el servidor y se crea una sesión. Después de eso, se recuperará una lista de usuarios registrados para seleccionar.

Cuando el usuario encuentra a alguien con quien desea hablar, podrá enviarles un mensaje o iniciar una llamada de voz. Aquí es donde Sinch entrará en juego. Utilizaremos su SDK para hacer todo el trabajo duro de manejar llamadas de voz y mensajes.

Ahora que sabemos lo que estamos desarrollando, es hora de empezar.

2. Proyecto de inicio

Comienza por descargar el proyecto inicial de GitHub. La aplicación está dirigida al iPhone y contiene la interfaz de usuario, la autenticación de Facebook y la comunicación con la API RESTful ya implementada. Esto nos permitirá enfocarnos en la integración con Sinch.

Antes de continuar. Sin embargo, me gustaría hablar sobre la arquitectura básica de la aplicación y cómo se comunica con el servidor. El código que se comunica con el resto de la API se encuentra en la clase UsersAPIClient. Utiliza la popular biblioteca AFNetworking para simplificar la lógica de la red. Si has usado AFNetworking anteriormente, esto te será muy familiar. Si no lo has hecho, nuestro tutorial sobre AFNetworking es un excelente lugar para comenzar.

En el archivo de encabezado, verás algunos métodos para comunicarte con varios puntos finales de la API RESTful, como crear un usuario, iniciar una sesión, eliminar un usuario y más.

Cuando una respuesta regresa del servidor, el JSON se analiza y se usa para inicializar un modelo.

Hablando de modelos, hay un modelo usado en el proyecto, User. Contiene información básica sobre un usuario, como el nombre, la ubicación, la identificación, etc. El ID de usuario es especialmente importante ya que lo necesitaremos para identificar de manera única con quién nos estamos comunicando cuando nos integramos con Sinch.

Tómate unos minutos para navegar por el proyecto para comprender mejor su estructura. Al igual que con las bibliotecas de terceros, es tremendamente útil explorar la documentación y el código fuente antes de usarlo.

3. Compilar y ejecutar

Si creas y ejecutas el proyecto de demostración, se te solicitará que inicies sesión a través de Facebook.

Log In with Facebook

Continúa y comprueba si puedes iniciar sesión con Facebook. Después de iniciar sesión, la aplicación de demostración hace tres cosas:

  • Crea un registro de usuario en el backend si uno no está presente.
  • Inicia una sesión de usuario y crea un token de acceso para la sesión.
  • Recupera una lista de usuarios en el sistema.

Más adelante, cuando hayas realizado algunas cuentas de prueba, podrás encontrar usuarios dentro de un cierto rango. De forma predeterminada, en este caso devolvemos a todos los usuarios del sistema, ya que es poco probable que haya otros usuarios cerca mientras realizas las pruebas.

4. Crea una cuenta Sinch

Para usar el SDK de Sinch, primero deberás crear una cuenta de desarrollador. Dirígete al sitio web de Sinch y haz clic en Comenzar gratis en la parte superior derecha para registrarte.

Sign Up for a Free Sinch Account

Ingresa tu dirección de correo electrónico y contraseña, y acepta los términos y condiciones. Sinch iniciará automáticamente un proceso de configuración después de que te registres. En este punto, todo lo que necesitas hacer es nombrar tu aplicación y agregar una breve descripción. Puedes omitir el resto de la guía de inicio por ahora.

A continuación, visita el panel para recuperar la clave API y el secreto de tu aplicación. Deberías ver Dashboard en la parte superior del sitio web de Sinch después de haber iniciado sesión con tu nueva cuenta. Selecciona Apps a la izquierda, selecciona la aplicación que creaste y haz clic en el icono de teclas a la derecha para mostrar la clave y el secreto. Querrás hacer un seguimiento de estos valores para luego inicializar el cliente Sinch.

Finding Your Apps Key and Secret

5. Añadir el SDK Sinch

Hay dos formas de agregar el SDK de Sinch a tu proyecto. El enfoque más fácil con diferencia es a través de CocoaPods. Agrega la siguiente línea a tu Podfile:

A continuación, ejecuta el siguiente comando para integrar el SDK de Sinch en tu área de trabajo:

En este tutorial, sin embargo, te mostraré cómo agregar el SDK si no estás usando CocoaPods. Comienza por descargar el SDK de Sinch para iOS. Visita la sección de descargas del sitio web de Sinch y descarga el SDK para iOS. El SDK Sinch depende de tres frameworks, por lo que tendremos que vincular nuestro proyecto con esos primero. En el Navegador de proyectos, elige SinchTutorial y selecciona el objetivo SinceTutorial.

Select the SinchTutorial Target

Selecciona Fases de construcción > Enlace binario con bibliotecas y haz clic en el botón más en la parte inferior.

Add Libraries

Agrega los siguientes frameworks a la lista de frameworks para vincular con:

  • Seguridad
  • AudioToolbox
  • AVFoundation

También necesitamos agregar tres banderas de vinculador. En la configuración de compilación del objetivo, busca Otros indicadores de vinculador.

Add Other Linker Flags

Agregue los siguientes indicadores de bandera en Debug:

Finalmente, arrastra el framework Sinch que descargaste anteriormente a la carpeta Fameworks en el Project Navigator. Compila tu proyecto para asegurarte de que no haya errores. Ya estás listo para comenzar a usar el SDK de Sinch.

6. Configurando el cliente Sinch

El cliente Sinch es la fuerza impulsora responsable de la comunicación con la plataforma Sinch. Antes de que podamos usar las funciones de mensajería o llamada, tendremos que inicializar una instancia del cliente Sinch. Para hacer esto, necesitamos la clave y el secreto que recuperamos antes de crear nuestra cuenta Sinch.

Abre AppDelegate.h e importa el framework Sinch como se muestra a continuación.

Luego, necesitamos crear una propiedad para el cliente Sinch y un prototipo de método para inicializarlo. Agrega el siguiente fragmento de código debajo de la propiedad Window.

Usaremos esta referencia al cliente Sinch para que las llamadas y los mensajes funcionen fácilmente. El protocolo SINClientDelegate nos informará si la conexión con el back-end de Sinch fue exitosa.

Conforma la clase AppDelegate al protocolo SINClientDelegate como se muestra a continuación.

Cambia al archivo de implementación de la clase AppDelegate e implementa el método sinchClientWithUserId: como se muestra a continuación.

Usaremos este método más adelante para comunicarnos con el backend de Sinch después de que el usuario haya iniciado sesión. Recuerda ingresar la clave de la aplicación y el secreto. De lo contrario, no podrás conectarte al back-end de Sinch.

Después de inicializar el cliente, le decimos a Sinch que usaremos las funciones de mensajería y llamadas. Luego, iniciamos el cliente y establecemos una conexión con los servicios de Sinch para recibir llamadas entrantes.

A continuación, implementa los siguientes métodos de delegado del protocolo SINClientDelegate en la clase AppDelegate:

Estos métodos 'delegate' registrarán errores en la consola Xcode en caso de que ocurran y también nos informan cuando nos hemos conectado con éxito con Sinch.

7. Inicializando el cliente Sinch

Abre FindUsersViewController.m y desplázate hasta el método beginUserSession. En este método, si una sesión se inició sin errores, se ejecuta el bloque de finalización. Este es un buen momento para inicializar el cliente Sinch. Reemplaza el comentario //TODO con el siguiente bloque de código:

Esto llama al método para iniciar el cliente Sinch y nos permite comenzar a usar sus funciones. Construye y ejecuta la aplicación. Una vez que hayas recuperado una lista de usuarios, confirma que la conexión con el back-end de Sinch fue exitosa revisando los registros en la consola Xcode.

8. Implementar mensajería

Ahora estamos llegando a la parte divertida, agregando un componente de mensajería con muy poco código usando el SDK de Sinch. Comienza por abrir MessagingViewController.m e importa el framework Sinch.

Al igual que el protocolo SINClientDelegate proporciona métodos útiles que nos ayudan a mantener un registro del estado del cliente, el protocolo SINMessageClientDelegate nos mantiene informados sobre los mensajes entrantes y salientes, su estado y más.

Comienza por adaptar la clase MessagingViewController a este protocolo actualizando la interfaz de la clase.

Para implementar la mensajería, también necesitaremos una instancia de SINMessageClient para manejar las responsabilidades de la mensajería. Agrega una propiedad para la instancia SINMessageClient.

Podemos crear una instancia de un cliente de mensajería desde el cliente Sinch que ya tenemos en el delegado de la aplicación. Cuando se carga el controlador de vista, debemos inicializar uno y establecer el controlador de vista como su delegado. Agrega el siguiente bloque de código al método viewDidLoad del controlador de vista:

Ahora que tenemos un objeto para enviar y recibir mensajes, y un delegado para manejarlos, agreguemos código para redactar un mensaje. Encuentra el método sendMessage: en la parte inferior del controlador de vista y agrega la siguiente implementación:

Una instancia de SINOutgoingMessage contactará a Sinch y moverá el mensaje al destinatario. Designamos al destinatario al proporcionar su ID de usuario a partir del modelo User. Sinch sabrá dónde ir con el mensaje al enrutarlo a través de su API usando una combinación de tu clave de aplicación, el secreto y la identificación de usuario única que se le pasó.

Dado que un mensaje puede ser entrante o saliente, agrega una enumeración en la parte superior del controlador de vista para tener en cuenta cualquier escenario. Añadirlo debajo de las declaraciones de importación.

Finalmente, necesitaremos que el cliente de mensajería procese y envíe el mensaje. En este controlador de vista, tendremos que manejar tanto el envío como la recepción de mensajes. Agrega el siguiente fragmento de código para recibir un mensaje:

Cada vez que recibamos un mensaje, lo agregaremos a la matriz messages y volveremos a cargar la vista de tabla para mostrarlo. Es importante tener en cuenta que el objeto SINMessage se compone de dos elementos, el objeto del mensaje en sí y su dirección (entrante o saliente).

Ahora que podemos enviar y recibir mensajes, necesitamos saber cuándo un mensaje ha terminado de enviarse si somos los autores para poder actualizar la fuente de datos y recargar la vista de tabla. Para lograr esto, implementamos el messageSent:recipientId: como se muestra a continuación.

También podemos implementar algunos de los métodos de delegado restantes para ayudarnos a solucionar el proceso de mensajería si algo saliera mal. Agrega los siguientes métodos de delegado debajo del método messageSent:recipientId:.

En este punto, la mensajería con Sinch está lista para usar. Lo último que tendremos que hacer es editar el método tableView:cellForRowAtIndexPath: para mostrar los mensajes. Este es el aspecto que debería tener la implementación:

9. Probar los mensajes

Crea y ejecuta la aplicación para asegurarte de que no haya errores. Estás listo para probar la función de mensajería. Para probarlo, necesitarás acceso a otra cuenta de Facebook.

En tu dispositivo iOS, crea y ejecuta la aplicación e inicia sesión con la primera cuenta. En el simulador de iOS, ejecuta otra instancia de la aplicación e inicie sesión con la segunda cuenta. Navega por el perfil de cada uno en cada dispositivo y toca en Mensaje.

Trying Out Messaging Using Sinch

En este punto, puedes ingresar un mensaje y presionar Enviar. Llegará casi instantáneamente al dispositivo del destinatario. Has terminado de implementar un cliente de mensajería que funciona para tu aplicación de citas utilizando la plataforma Sinch.

Sending and Receiving Messages Using Sinch

Si el usuario no está en línea, el cliente intentará enviar el mensaje, pero no llegará al otro usuario. En este caso, es posible que desee implementar notificaciones push para que el destinatario sepa que ha recibido un mensaje.

10. Llamadas VoIP

La última característica que utilizaremos Sinch para las llamadas VoIP (Voz sobre IP). Abre CallingViewController.m e importa el framework Sinch una última vez.

Como antes, haremos uso de algunos protocolos para manejar llamadas. Los protocolos SINCallClientDelegate y SINCallDelegate nos proporcionan métodos para iniciar y recibir una llamada, y estar actualizados del estado de una llamada. Actualiza la interfaz de la clase CallingViewController para ajustarlo a ambos protocolos.

Para implementar llamadas VoIP, necesitaremos acceso al cliente Sinch así como a un objeto SINCall. Agrega una propiedad para la instancia SINCall como se muestra a continuación.

En viewDidLoad, establece el controlador de vista como el delegado del cliente de llamadas Sinch.

Para comprender mejor la siguiente sección, es útil repasar los escenarios a los que se enfrentarán los usuarios cuando utilicen la función de llamada. Un usuario podría:

  • recibir una llamada
  • hacer una llamada
  • colgar una llamada existente
  • rechazar una llamada entrante

Vamos a abordar y hacer una llamada primero. Agrega el siguiente código al método makeOrAcceptCallFromSelectedUser:

Verificamos si hacemos una llamada o recibimos una. Si iniciamos la llamada, callUserWithId: iniciará el proceso de llamada e inicializará la propiedad sinchCall.

Si estamos contestando una llamada, la propiedad sinchCall ya estará inicializada y simplemente comenzaremos la llamada esperando la respuesta 'answer'.

A continuación, implementaremos rechazar y colgar una llamada. Agrega el siguiente código al método rejectOrHangUpCallFromSelectedUser:

Este código es más fácil de digerir, ya que, independientemente de la situación, se maneja hangup a la propiedad en sinchCall.

Todo lo que nos queda por hacer es implementar los métodos 'delegate' requeridos. Esto será bastante código, pero es fácil de entender y los nombres de los métodos son muy descriptivos.

El primer método, didReceiveIncomingCall:, controla el "recibir" una llamada y configura la propiedad sinchCall. También sabremos cuándo comienza y termina la llamada desde callDidEstablish: y callDidEnd:.

El último método, callDidProgress:, está vacío en este momento, pero sería útil para actualizar la interfaz de usuario con información útil, como la duración de la llamada. Podrías usar SINCallDetail y su propiedad establishedTime para realizar ese cálculo fácilmente.

11. Probar la llamada

Ejecuta dos instancias de la aplicación usando dos cuentas de Facebook como lo hiciste antes. Navega por el perfil del otro y toca Llamar.

Presiona el botón verde de llamada en tu dispositivo o en el simulador de iOS. Una vez que la llamada se envía a Sinch, la interfaz de usuario se actualizará para que el usuario sepa que la llamada está en curso.

Setting Up a Call with Sinch

De manera similar, si uno de los usuarios recibe una llamada, la interfaz de usuario tendrá este aspecto:

Incoming Call

Finalmente, cuando la llamada está en curso, la interfaz de usuario reflejará el estado de la llamada. Aparecerá un botón con la etiqueta Colgar para finalizar la llamada.

A Call in Progress

Similar a la mensajería, la aplicación no es compatible con llamar a un usuario que no está en línea. Al igual que con la mensajería, puedes resolver esto utilizando notificaciones automáticas para notificar al usuario que alguien ha intentado llamarlo.

12. A dónde ir a continuación

Hay varias partes de la aplicación que pueden ser mejoradas. Lo más notable es la integración de notificaciones push. Sinch recientemente agregó soporte nativo para notificaciones push a su SDK de iOS, lo que le quita la carga a los desarrolladores. Con las notificaciones push, podrías notificar a los usuarios que actualmente no están usando la aplicación que han recibido una llamada o un mensaje.

Otra adición útil sería almacenar mensajes y conversaciones en un servidor remoto. De esta manera, los usuarios pueden retroceder en el tiempo y ver las conversaciones pasadas que hayan tenido. También hace que la experiencia de mensajería sea más fluida, ya que podrían iniciar una conversación donde la dejaron.

Estas son sólo algunas ideas. Estoy seguro de que puedes pensar en algunos más que harían que la aplicación fuera más completa y atractiva.

Conclusión

El poderoso SDK Sinch hace que dos tareas intimidantes sean accesibles, fáciles y asequibles. Como has visto en este tutorial, Sinch permite que los desarrolladores integren mensajes y llamadas en sus aplicaciones en cuestión de minutos. El SDK Sinch no se limita a iOS. Si tu aplicación de citas tiene un componente de sitio web, por ejemplo, podrías utilizar tu API JavaScript para implementar las mismas características.

Si te quedas atascado en el camino, no te preocupes, puedes encontrar el proyecto finalizado en GitHub. Ahora puedes tomar lo que has aprendido en este tutorial y crear el siguiente Tinder.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.