Creá un chat con Socket-io sin morir en el intento.

Creá un chat con Socket-io, sin morir en el intento

La tecnología actual

Hoy en día, gestionás tus actividades por medio de e-mails, chats y mensajes instantáneos. Es evidente, que cada vez más, las empresas necesitan de sistemas que faciliten el feedback de clientes y usuarios internos; es por esto, que recomiendo la incorporación de sistemas de chat.

 

Ser o no ser : Crearlo o reutilizarlo

 

Esta es quizás la decisión en cuestión. Y depende mucho de cual sea el uso que se le va a dar y también el usuario al cual va orientado.

Hoy en día, en el mercado existen miles de chat prediseñados, muchos orientados a soporte. Simples widgets que se agregan al código del sitio web y te permite administrarlos sin mayor complejidad.
Sin embargo, la mayoría de estos chats son de pago y de alcance limitado, y/o no son extensibles mediante un desarrollo o administrador web.
Por otro lado, tenemos los chats con inteligencia artificial, que son desarrollados por empresas de gran escala, ya que involucra un gran número de recursos para su desarrollo.

Afortunadamente hay una luz al final del túnel. Si queremos generar un canal de chat con los usuarios de una forma específica y customizable, la mejor decisión es desarrollarlo nosotros mismos. Y desarrollarlo no significa reinventar la rueda sino más bien usar herramientas ya existentes que puedan hacer el desarrollo más ameno, y sobre todo confiable.

Socket-io: la herramienta estrella

Antes de comenzar a contar mi experiencia usando Socket-io debo primero decir que estas líneas van dedicadas a alguien que conoce de programación. Hacer un chat desde cero sin saber programación puede costarnos bastante tiempo , y es en realidad por el hecho mismo de aprender la lógica y los modos relacionados al programar. Programar se aprende programando, como andar en bici y conocer los chistes de una serie famosa de la televisión.

Socket-io es una librería de javascript que usada con un servidor Node.js permite, a partir de un par de líneas de código y algunas configuraciones, un chat en tiempo real de manera rápida y confiable.

Entender la lógica de comunicación

Para poder usar Socket-io es necesario primero conocer algo de la dinámica de comunicación a nivel red, es decir, la lógica de comunicación Cliente/ Servidor. Luego, necesitamos tener acceso a un servidor donde poder desarrollar (instalar, configurar softwares o servicios, etc). En este caso, por experiencia personal, recomiendo crear el servidor en Node.js y usando las librerías recomendadas en la documentación oficial. Existen otras formas de crear un servidor para Socket-io pero recomiendo la opción poder defecto.

Seguir la documentación

Otra de las recomendaciones que puedo dar es seguir la documentación a rajatabla, al menos si es la primera vez que usas Socket-io. Y esto es porque al principio puede ser que te cueste comprender la mecánica de los sockets (componentes de comunicación de red que utiliza la librería), las respuestas asincrónicas como así el uso de parámetros en las comunicaciones. Instalá todas las librerías recomendadas. Seguí y usá todos los ejemplos que provee la documentación para que puedas ir aprendiendo la lógica de la librería y sus usos. No omitas este paso si es la primera vez que lo usas, porque puede ser que la respuesta a una duda este en el siguiente ejemplo que no hiciste.

Antes de producción, probalo en desarrollo, y si hay entorno de test o staging, ¡mucho mejor!

Probá tu código, bien. Asegurate de que se realizan correctamente las comunicaciones, si llegan los mensajes y en caso de que uses alguna base de datos desde donde almacenar tus mensajes, comprobá que los mensajes se guarden correctamente.
Tener un entorno de test en estos casos es la mejor opción ya que a veces en el entorno de desarrollo funciona pero no en producción, por temas de seguridad, etc.
Muchas veces para crear un servidor de Socket-io en producción necesitaremos configurar certificados ssl para que la comunicación de sockets entre el servidor y los clientes sea segura.
Tener un servidor de staging es el lugar ideal para simular los casos de prueba que pueden suceder en el servidor final.
En caso de no tener staging, tendrás que lidiar quizás con algunos errores en producción y configurarlos en vivo.

Mi recomendación

Configurá el firewall y reglas de red para que el servidor sólo sea accedido por tus casos de prueba.

 

 


¿Qué es Ionic Framework?

¿Por qué deberías conocerlo si eres desarrollador web?

Es una estructura tecnológica (Framework) de código abierto que se utiliza en el desarrollo de aplicaciones móviles híbridas. Combinando el código HTML5, CSS y JavaScript obtenemos aplicaciones con una interfaz amigable e intuitiva para el usuario. De esta forma desarrollando un único código es posible crear aplicaciones tanto en Android como en iOS.

Historia de Ionic

La base de Ionic está desarrollada sobre Angular.Js y Cordova. Nació en 2013 con la única intención de que los desarrolladores pudieran crear aplicaciones móviles híbridas con los beneficios de los dos frameworks mencionados.

Una de las principales ventajas de trabajar con Ionic es que se aprovechan los plugins (manejo de hardware, software, imágenes, texto, códigos QR, etc) de Cordova.

En 2016 se actualiza a la versión Ionic 2, con la modularización, una de las actualizaciones más completas de este framework, permitiendo separarlo por partes: core, angular, native, etc.

La actualización de Ionic 3 es prácticamente imperceptible en términos de nuevas funcionalidades, aunque sí trae novedades en su rendimiento.

Siguiendo con la evolución de esta herramienta, en su versión 4, se empieza reemplazando AngularJS por Angular moderno. El conjunto de componentes de esta herramienta utiliza elementos personalizados y las API DOM de Shadow disponibles en todos los navegadores modernos para dispositivos móviles y de escritorio. Otra novedad que nos trae Ionic 4 es que nos permite utilizar React, Vue, Angular o Javascript para el desarrollo de la lógica de programación.

Ionic 5 recientemente lanzado (11/02/2020), llega anunciando estas mejoras en su pagina: "¡Esta versión incluye actualizaciones de diseño de iOS 13, una nueva API para crear sus propias animaciones personalizadas, Ionicons renovados, colores iónicos actualizados, nuevos diseños iniciales, mejoras en la personalización de componentes y más!", en otro post se realizará un análisis mas exhaustivo de lo nuevo que trae Ionic 5.

Resumiendo en una imagen

Esto significa que se facilita la exposición de la funcionalidad nativa a la aplicación web en forma de multi plataforma.

El desarrollo de aplicaciones móviles con Ionic nos garantiza que la implementación del proyecto sea mucho más estable, sencilla y con una interfaz de usuario óptima.

Si eres desarrollador web deberías considerar desarrollar en Ionic

Si estás acostumbrado a desarrollar en un entorno web y conocés algunos de estos frameworks Angular, vue, react y/o Javascript, Ionic te permitirá generar aplicaciones móviles usando las mismas herramientas que ya conoces y con una curva de aprendizaje muy cómoda.

Ionic también acepta en el desarrollo del front el uso de etiquetas como html5 y aplicación de estilos con CSS (con algunas limitantes), dando como resultado una forma de desarrollo mas cómoda para las personas acostumbradas al desarrollo web.