La mensajería instantánea, que comenzó a principios de los 90, se hizo popular como una excelente forma de comunicarse de 1 a 1. Pronto esta forma informal de comunicación se conoció como chats. Desde ICQ a AOL, Yahoo Messenger a GTalk y WeChat a Whatsapp: la mensajería instantánea ha recorrido un gran viaje por su cuenta. Desde los últimos 25 años, los servicios de chat se han vuelto mejores y eficientes al permitirnos enviar no solo mensajes de texto, sino también compartir imágenes, videos, ubicaciones, archivos de documentos, etc. ¿Has oído hablar de Chatbot? Vamos a averiguar.
El costo de desarrollo de la aplicación está determinado por tres factores principales que están vinculados entre sí. Son:
1. La cantidad de trabajo a realizar
2.El tiempo necesario para darte el resultado que deseas
3. Su presupuesto
- ¿Cuáles son algunos patrones de diseño comunes en el desarrollo de Android?
- ¿Es posible formatear su dispositivo Android a cualquier versión del sistema operativo Android, incluso si no hay ningún tipo de lanzamiento oficial?
- ¿Las aplicaciones de Android ocupan más y más espacio con cada actualización?
- ¿Cuál es la mejor manera de ejecutar el aprendizaje automático en dispositivos Android?
- ¿Cuáles son las diez mejores aplicaciones de Android de 2014?
El desarrollador y el cliente deben analizar todo esto en detalle porque el desarrollador necesita comprender exactamente lo que quiere el cliente y proporcionar una estimación lo más precisa posible.
Si tiene un presupuesto fijo, eso facilita que el desarrollador comience a discutir su proyecto. Este es un punto desde el cual podemos avanzar y darle un plan de lo que puede esperar por su dinero y cuántas horas de trabajo podría tomar su proyecto.
Con la nueva versión 1.0.0 de nuestra biblioteca de Android, pensamos que crearíamos un recorrido sobre cómo construir fácilmente una aplicación de chat móvil con Pusher. Al igual que con nuestro tutorial anterior, Cómo hacer que ReactJS Realtime With Websockets, juntos crearemos una aplicación de chat grupal, que lo guiará a través de cómo usar Pusher para enviar y mostrar mensajes en tiempo real en su interfaz de usuario.
Configurando
Una vez que haya configurado su aplicación en Android Studio, o su IDE preferido, comencemos con la instalación de Pusher como una dependencia. En el archivo build.gradle de su módulo de aplicación, agregue:
repositorios {
maven {url ‘http://clojars.org/repo’}
}
dependencias {
compile ‘com.pusher: pusher-java-client: 1.0.0’,
compile ‘com.loopj.android:android-async-http:1.4.9’, // para nuestras solicitudes HTTP más adelante
compile ‘com.google.code.gson: gson: 2.2.4’, // para analizar JSON
compile ‘com.squareup.picasso: picasso: 2.1.1’ // para la representación de imágenes
}
Sincronice el proyecto Gradle y Pusher, siempre y cuando otros módulos que necesitemos más adelante, ¡ahora estén instalados! Asegúrese de tener a mano las credenciales de su aplicación cuando comencemos a agregar algo de magia en tiempo real. Puede encontrar sus credenciales cuando crea una aplicación después de registrarse para obtener una cuenta gratuita.
El flujo de nuestra aplicación será así: el usuario ingresará un mensaje en su aplicación, que enviará una solicitud POST a nuestro servidor. En este ejemplo, usaré un servidor NodeJS simple para proporcionar un único punto final de API, para el cual puede ver el código. Sin embargo, como tenemos una API de nivel superior consistente en todas nuestras bibliotecas de servidores, lo que se muestra aquí se puede aplicar fácilmente a cualquier otro marco web que desee utilizar.
Una vez que nuestro servidor recibe la solicitud POST, activarán un mensaje Pusher simple para todos los clientes conectados, que mostrará los mensajes en tiempo real. Si desea descargar la aplicación de demostración de Android, puede hacerlo en Play Store, y esto le permitirá chatear con nuestra versión web para probar cosas.
Si se queda atascado en algún momento, siéntase libre de explorar el código fuente de Android aquí y el código del servidor NodeJS aquí.
Enviando mensajes
Lado del cliente
Para configurar, cree una nueva aplicación con una actividad inicial en blanco y use el nombre predeterminado de MainActivity . En activity_main.xml vamos a crear la barra de entrada para nuestros mensajes de chat.
<RelativeLayout
xmlns: android = “http://schemas.android.com/apk/res/android”
xmlns: tools = “http://schemas.android.com/tools”
android: layout_width = “match_parent”
android: layout_height = “match_parent”
android: orientación = “vertical”
herramientas: context = “. MainActivity”
>
<LinearLayout
android: id = “@ + id / input_bar”
android: layout_width = “fill_parent”
android: layout_height = “75dp”
android: layout_alignParentBottom = “true”
android: background = “@ color / blanco”
android: orientación = “horizontal”>
<Editar texto
android: id = “@ + id / message_input”
android: layout_weight = “0.7”
android: layout_width = “0dp”
android: layout_height = “match_parent”
android: inputType = “texto” />
<Botón
android: id = “@ + id / send_button”
android: layout_width = “wrap_content”
android: layout_height = “wrap_content”
android: layout_marginTop = 5dp ”
android: layout_marginRight = “20dp”
android: text = “Enviar” />
Esto se mantendrá en la parte inferior de nuestra vista, y tendrá una entrada (es decir, un EditText ) para escribir mensajes, y un Button para enviarlos, al cual le hemos dado los ID respectivos de message_input y send_button .
Ahora en nuestra clase MainActivity.java , configuremos el oyente para presionar el botón ‘Enviar’.
clase pública MainActivity extiende ActionBarActivity implementa View.OnClickListener {
EditText messageInput;
Botón enviarBotón;
@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_main);
// obtiene nuestro campo de entrada por su ID
messageInput = (EditText) findViewById (R.id.message_input);
// obtén nuestro botón por su ID
sendButton = (Botón) findViewById (R.id.send_button);
// establece su escucha de clics
sendButton.setOnClickListener (esto);
}
Ahora tendremos que implementar la interfaz View.onClickListener . Aquí simplemente recibiremos el texto de messageInput y lo messageInput en nuestro servidor.
@Anular
public void onClick (Ver v) {
postMessage ();
}
postMessage privado privado () {
}
En este tutorial, usaré la biblioteca AsyncHTTPClient para enviar mensajes a nuestro servidor.
Así que ahora, dentro del método postMessage , obtendremos el texto de messageInput y lo messageInput , junto con un username y una marca de tiempo. En nuestra aplicación de ejemplo, también hemos implementado una LoginActivity para obtener el nombre de usuario de Twitter del usuario, pero para centrarnos en el elemento de chat, vamos a omitir esto. Pero siéntase libre de navegar por el código fuente; debería ser bastante sencillo.
Continuemos creando y enviando nuestros parámetros de solicitud:
importar com.loopj.android.http.AsyncHttpClient;
importar com.loopj.android.http.RequestParams;
postMessage privado privado () {
Texto de cadena = messageInput.getText (). ToString ();
// devuelve si el texto está en blanco
if (text.equals (“”)) {
regreso;
}
RequestParams params = new RequestParams ();
// establece nuestro objeto JSON
params.put (“texto”, texto);
params.put (“nombre”, nombre de usuario);
params.put (“hora”, nueva fecha (). getTime ());
// crea nuestro cliente HTTP
Cliente AsyncHttpClient = nuevo AsyncHttpClient ();
…
}
Establezca una cadena MESSAGES_ENDPOINT en MainActivity para que apunte a la URL de su servidor. Luego, hagámoslo de modo que cuando la solicitud sea exitosa, messageInput la entrada de messageInput , o cuando falle messageInput al usuario de que algo salió mal:
client.post (MESSAGES_ENDPOINT, params, new JsonHttpResponseHandler () {
@Anular
public void onSuccess (int statusCode, Header [] headers, JSONObject response) {
runOnUiThread (new Runnable () {
@Anular
public void run () {
messageInput.setText (“”);
}
});
}
@Anular
public void onFailure (int statusCode, Header [] headers, String responseString, Throwable throwable) {
Toast.makeText (
getApplicationContext (),
“Algo salió mal :(“,
Brindis.LONGITUD_ LARGO
).mostrar();
}
});
Dulce: ahora que el cliente está configurado para enviar una entrada al servidor, implementemos nuestra mini API.
Lado del servidor
Instale NodeJS y Express si aún no lo ha hecho. Genera tu backend de chat con:
$ express back-end de chat
$ cd chat-backend
$ npm install
Ahora instale la biblioteca Pusher Node con:
$ npm install pusher –save
Ahora inicialice el objeto Pusher en el archivo de su servidor con las credenciales de su aplicación:
var pusher = nuevo Pusher ({
appId: “su ID de aplicación”,
clave: “la clave de su aplicación”,
secret: “el secreto de tu aplicación”
});
Ahora cree el punto final que recibe JSON del cliente. Luego dispararemos un evento Pusher llamado new_message en un canal llamado messages , pasando los datos que recibimos del cliente.
app.post (‘/ messages’, function (req, res) {
var mensaje = req.body;
pusher.trigger (‘mensajes’, ‘nuevo_mensaje’, mensaje);
res.json ({éxito: 200});
});
En este punto, es posible que desee almacenar mensajes o desinfectarlos con una biblioteca como sanitize-html para que pueda mostrarlos en una vista web. Pero esto debería ser suficiente para demostrar nuestra aplicación de chat en el trabajo.
Encienda su servidor y ejecute su aplicación móvil en un emulador o en su dispositivo. Mientras tanto, abra la consola de depuración de Pusher para su aplicación en su tablero. En su emulador o dispositivo, debería ver una barra de entrada en la parte inferior de la aplicación. Escriba un mensaje y toque el botón ‘Enviar’, y debería ver mensajes emergentes en tiempo real en su Consola de depuración. Genial, ¿eh?
Mostrar mensajes de chat en vivo
Eso podría ser genial, pero no es suficiente. Hagamos que nuestro cliente de Android escuche los mensajes de chat entrantes y los muestre en una lista.
Entonces, en activity_main.xml , agregue un nuevo ListView como el primer hijo de RelativeLayout y encima del LinearLayout que envuelve nuestra barra de entrada. Su diseño XML debería verse así:
<RelativeLayout
xmlns: android = “http://schemas.android.com/apk/res/android”
xmlns: tools = “http://schemas.android.com/tools”
android: layout_width = “match_parent”
android: layout_height = “match_parent”
android: orientación = “vertical”
herramientas: context = “. MainActivity”
>
<ListView
android: layout_marginTop = “10dp”
android: layout_marginBottom = “80dp”
android: layout_width = “match_parent”
android: layout_height = “500dp”
android: id = “@ + id / messages_view”
android: layout_alignParentTop = “true”
android: layout_alignParentLeft = “true”
android: layout_alignParentStart = “true” />
<LinearLayout
android: id = “@ + id / input_bar”
android: layout_width = “fill_parent”
android: layout_height = “75dp”
android: layout_alignParentBottom = “true”
android: background = “@ color / blanco”
android: orientación = “horizontal”>
<Editar texto
android: id = “@ + id / message_input”
android: layout_weight = “0.7”
android: layout_width = “0dp”
android: layout_height = “match_parent”
android: inputType = “texto” />
<Botón
android: id = “@ + id / send_button”
android: layout_width = “wrap_content”
android: layout_height = “wrap_content”
android: layout_marginTop = “20dp”
android: layout_marginRight = “20dp”
android: text = “Enviar” />
Para mostrar cada mensaje dentro de ListView , tendremos que crear un adaptador que convierta una lista en un conjunto de vistas. En nuestro método MainActivity#onCreate , MainActivity#onCreate nuestro ListView a este adaptador:
clase pública MainActivity extiende ActionBarActivity implementa View.OnClickListener {
…
MessageAdapter messageAdapter;
@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
…
messageAdapter = new MessageAdapter (this, new ArrayList ());
ListView final messagesView = (ListView) findViewById (R.id.messages_view);
messagesView.setAdapter (messageAdapter);
}
Nuestra clase Message.java que comprende la lista es muy sencilla:
Mensaje de clase pública {
texto de cadena pública;
nombre de cadena pública;
público mucho tiempo;
}
Ahora MessageAdapter nuestro MessageAdapter , que es, como puede ver arriba, inicializado con el MainActivity nuestra MainActivity , y el recurso (una ArrayList of Message s):
public class MessageAdapter extiende BaseAdapter {
Contexto messageContext;
ArrayList messageList;
public MessageAdapter (contexto de contexto, mensajes ArrayList ) {
messageList = mensajes;
messageContext = contexto;
}
Cuando extienda BaseAdapter , su IDE le pedirá que implemente getCount , getItem y getItemId , lo que podemos hacer:
@Anular
public int getCount () {
return messageList.size ();
}
@Anular
objeto público getItem (posición int) {
return messageList.get (posición);
}
@Anular
public long getItemId (int position) {
posición de retorno;
}
Finalmente, tendremos que implementar getView , que es necesario para convertir un elemento en la ArrayList of Message s en una vista. Primero, necesitamos crear un MessageViewHolder para encapsular las vistas que necesitamos para ser parte del mensaje. En este caso, vamos a tener una thumbnailImageView en thumbnailImageView (para el avatar de Twitter del usuario), una senderView de senderView para mostrar quién envió el mensaje y una bodyView de bodyView para mostrar el contenido del mensaje. Dentro de nuestro MessageAdapter , agregue una clase privada anidada:
clase estática privada MessageViewHolder {
Public ImageView thumbnailImageView;
TextView público senderView;
TextView público bodyView;
}
También debemos describir el diseño de nuestra vista de mensaje. Démosle a la vista de nuestra miniatura una ID de img_thumbnail , la vista del remitente y la ID de message_sender , y el contenido del mensaje, una ID de message_sender :
<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = “match_parent” android: layout_height = “75dp”>
<ImageView
android: id = “@ + id / img_thumbnail”
android: layout_marginLeft = “25dp”
android: layout_alignParentLeft = “true”
android: layout_centerVertical = “true”
android: scaleType = “centerInside”
android: layout_width = “50dp”
android: layout_height = “50dp” />
<TextView
android: id = “@ + id / message_sender”
android: layout_marginLeft = “25dp”
android: layout_toRightOf = “@ + id / img_thumbnail”
android: layout_alignTop = “@ + id / img_thumbnail”
android: layout_width = “wrap_content”
android: layout_height = “wrap_content” />
<TextView
android: layout_width = “wrap_content”
android: layout_height = “wrap_content”
android: id = “@ + id / message_body”
android: layout_below = “@ + id / message_sender”
android: layout_alignLeft = “@ + id / message_sender”
/>
Ahora que tenemos un MessageViewHolder para encapsular los elementos visuales que comprenden un mensaje, y un diseño de mensaje para inflar esos elementos, podemos seguir adelante e implementar nuestro método MessageAdapter#getView :
@Anular
public View getView (int position, View convertView, ViewGroup parent) {
Titular de MessageViewHolder;
// si aún no se ha creado una vista para un elemento en la lista de mensajes.
if (convertView == null) {
LayoutInflater messageInflater = (LayoutInflater) messageContext.getSystemService (Activity.LAYOUT_INFLATER_SERVICE);
// crea una vista de nuestro archivo `message.xml`
convertView = messageInflater.inflate (R.layout.message, null);
// crea un MessageViewHolder
titular = nuevo MessageViewHolder ();
// establece las propiedades del titular en elementos en `message.xml`
holder.thumbnailImageView = (ImageView) convertView.findViewById (R.id.img_thumbnail);
holder.senderView = (TextView) convertView.findViewById (R.id.message_sender);
holder.bodyView = (TextView) convertView.findViewById (R.id.message_body);
// asigna el titular a la vista que volveremos
convertView.setTag (titular);
} más {
// de lo contrario, busque un titular de vista ya creado
titular = (MessageViewHolder) convertView.getTag ();
}
// obtener el mensaje desde su posición en ArrayList
Mensaje mensaje = (Mensaje) getItem (posición);
// establece el contenido de los elementos
holder.bodyView.setText (message.text);
holder.senderView.setText (mensaje.nombre);
// busca el avatar de Twitter del usuario a partir de su nombre de usuario
// y colóquelo en thumbnailImageView.
Picasso.with (messageContext).
load (“https://twitter.com/” + message.name + “/ profile_image? size = original”).
marcador de posición (R.mipmap.ic_launcher).
en (titular.thumbnailImageView);
devuelve convertView;
}
Este método buscará o creará un MessageViewHolder asociado con convertView en una determinada posición de la lista. Cuando lo haya hecho, establecerá el texto de bodyView , senderView y, como en la aplicación de demostración vinculada en nuestra introducción, mostrará el avatar de Twitter del remitente.
Cuando escuchemos los eventos de Pusher, querremos agregar cualquier mensaje nuevo a nuestro MessageAdapter mensajes. Hagámoslo ahora:
public void add (Mensaje de mensaje) {
messageList.add (mensaje);
notifyDataSetChanged ();
}
Esto agregará el mensaje a la messageList y notifyDataSetChange() actualizará el adaptador, mostrando el nuevo mensaje.
Así que ahora podemos volver a MainActivity y comenzar a escuchar los mensajes de Pusher:
@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
…
// inicializa Pusher
Pusher pusher = nuevo Pusher (“YOUR_APP_KEY”);
// suscríbete a nuestro canal de “mensajes”
Canal canal = pusher.subscribe (“mensajes”);
// escucha el evento “new_message”
channel.bind (“new_message”, nuevo SubscriptionEventListener () {
…
});
// conectarse a la API de Pusher
pusher.connect ();
}
Entonces, ahora que hemos inicializado Pusher, conectado a la API y suscrito al canal de messages , ahora podemos agregar nuestro SubscriptionEventListener para ejecutarlo cuando llegue un evento. Todo lo que tendremos que hacer es analizar el JSON (en este ejemplo, I ha utilizado la biblioteca Gson en un objeto Message y luego la ha agregado al MessageAdapter :
channel.bind (“new_message”, nuevo SubscriptionEventListener () {
@Anular
public void onEvent (String channelName, String eventName, datos finales de String) {
runOnUiThread (new Runnable () {
@Anular
public void run () {
Gson gson = nuevo Gson ();
Mensaje mensaje = gson.fromJson (data, Message.class);
messageAdapter.add (mensaje);
// haga que ListView se desplace hacia abajo hasta el nuevo mensaje
messagesView.setSelection (messageAdapter.getCount () – 1);
}
});
}
});
Ahora que cuando tengamos un evento new_message , simplemente podemos agregarlo a nuestro MessageAdapter , ¡y aparecerán nuevos mensajes en tiempo real! Ejecute su aplicación en un emulador o dispositivo y pruébelo. Si encuentra algún problema, consulte el código fuente.
Empujar
Esperemos que haya encontrado este ejemplo directo de cómo crear aplicaciones móviles en tiempo real con Pusher. Hay muchas formas de extender este tutorial para una aplicación mejorada:
- Utilice los eventos del cliente Pusher para enviar mensajes de un cliente a otro. Puede usar nuestros webhooks para notificar a su servidor cuando se envían mensajes, lo que le permite conservarlos en su base de datos.
- Use los canales de presencia de Pusher para crear listas de usuarios en vivo y mostrar quién está en línea en tiempo real.
- Use nuestra API REST para determinar si un usuario está conectado a Pusher. Si es así, continúe y envíeles un mensaje como de costumbre. De lo contrario, envíeles una notificación push nativa que los lleve de regreso a su aplicación.
Incluso con una aplicación tan básica, espero haberte mostrado lo fácil y pocas líneas de código que es colocar Pusher en cualquier aplicación de Android. ¡Siéntete más que libre de decirnos lo que terminas construyendo con Pusher y Android!
¿Qué son los chatbots?
Nadie había pensado usar el chat para fines comerciales, solo porque se suponía que eran comunicaciones informales. Pero en países en desarrollo como India, la gente comenzó a usar Whatsapp Chats para pedir productos y obtener servicios localmente. Esto inspiró a Facebook a presentar Chatbots en Messenger, lo que significaba que para hablar con el representante de atención al cliente de la empresa no era necesario esperar durante minutos.
Chatbot es una opción de chat basada en AI, por la cual las empresas ahora pueden hacer su propio representante de chat para que Messenger aborde las consultas más razonables de los clientes. Estos son softwares austeros que interpretan todo lo que escribe o dice y, en consecuencia, responden respondiendo o ejecutando el comando.
Facebook ha dado un salto de estos bots personales al fusionar las dos tecnologías más populares: mensajería instantánea e inteligencia artificial. Si todo va bien según lo previsto, los bots sabrán lo que le gusta y lo que no le gusta, recuerde lo que les pidió que hagan y lo ayudarán a facilitarle las cosas.
Herramientas API para ayudar a los desarrolladores
Facebook proporcionará una API para que los desarrolladores ayuden a la industria en general, de modo que cada empresa, al igual que su página de Facebook, pueda tener Messenger Chatbot, que puede ayudar a los usuarios a hacer la mayoría de las cosas, como ordenar, conocer el estado del pedido, el llamado a la acción, etc. Entonces, técnicamente, estos Chatbots podrían reemplazar los números 1-800 y con 900 millones de usuarios activos en Messenger, será una ventaja para Facebook.
Experiencia de usuario
Creo que lo mejor sería que no necesitamos instalar tantas aplicaciones para comunicarnos con tantas empresas diferentes con las que generalmente interactuamos. La comunicación será más informal, al igual que estamos hablando con uno de nuestros amigos en Messenger. Los mensajes de texto simples harán todo lo necesario y descansarán, es la inteligencia artificial detrás la que descifrará sus palabras para crear la expresión más apropiada haciéndole creer que está conversando con un humano allí.
¿Por qué Chatbot es para tu negocio?
No hay negocios que no quieran crecer y el crecimiento surge de dos cosas: producto de calidad y presencia en el mercado. Los necesitas a los dos juntos para crecer y sostenerte. Veamos cómo chatbot puede ayudar a su empresa:
- La tecnología S mart AI en Chatbot asegurará que use expresiones correctas mientras conversa.
- El conocimiento de Chatbot puede ser enorme y puede usarse de manera eficiente en los chats.
- El tiempo de respuesta que tardan los chats es de un segundo sin dejar que el cliente espere.
- Los datos del chat a través de bots se pueden usar de manera más apropiada para el análisis de calidad.
- Esto no solo ahorrará mucho tiempo, sino también el dinero que se gasta en diferentes plataformas.
- Los chatbots no solo responderán las consultas, sino que también pueden iniciar la acción si se programan en consecuencia.
Messenger está a punto de iniciar una revolución en el servicio al cliente de chat. Facebook está generando toneladas de datos nuevos sobre cómo quieren que funcionen estos chatbots y, en última instancia, se espera que los haga más útiles. Messenger no está solo trabajando en la tecnología de bots, están Siri de Apple, Google Now, Tay de Microsoft y Alexa de Amazon que seguramente darán una gran competencia a Chatbot. Incluso las aplicaciones de mensajería instantánea como Telegram y Hike ya han lanzado sus bots en sus servicios de chat.
Siempre hemos saltado tecnologías nuevas y emocionantes que pueden convertirse en una solución y facilitar la forma de hacer negocios. Nuestros estudios de caso son la validación de nuestro trabajo inteligente y la eficiencia en la entrega de grandes ideas en soluciones de TI ejecutables. Póngase en contacto con nosotros aquí para obtener información sobre soluciones de TI variadas.
Si necesita desarrollo de aplicaciones de chat o chatbot o soluciones de desarrollo de aplicaciones de chat de video WebRTC, envíenos un correo electrónico [protegido por correo electrónico]
