Autocompletado Dinámico de Direcciones

Una de las premisas que debe cumplir cualquier app, es impactar al usuario durante su uso. La primera impresión que se lleve el usuario será fundamental, porque de ella dependerá que la siga usando y genere la ancestral técnica de marketing denominada ‘boca a boca’, o que la deje en el olvido y le cause una mala sensación. Esta impresión puede ser causa de una buen diseño, de una buena experiencia de usuario, de una buena utilidad, etc. En ocasiones, existe público exigente que ya viene rodado en esto del mundillo de las apps, y a pesar de que tenga un aceptable diseño, experiencia de usuario y utilidad, no les termina de entrar por el ojo y no adoptan esa nueva app a su elenco ya consagrado. Por ello, se debe intentar introducir funcionalidades que aporten algo innovador y novedoso a la app para que quien la use por primera vez se quede prendado. Algo así como un ‘gancho comercial’ para que la app tenga éxito. Esto es debido a la ingente cantidad de app que hay actualmente en el mercado, y donde hacer las cosas bien, desgraciadamente, no es siempre síntoma de éxito. Por ello, aunque no es primordial ni vital en la app, quise buscar ese elemento que aporte una experiencia distinta al usuario, y sea uno de los pilares por el que a la gente le llame la atención la app. Por si sólo igual no es suficiente, pero si lo combinamos con el diseño, general, llamativo de la app y la funcionalidad intrínseca de esta, puede que esta funcionalidad sea una gotita más para ayudar a confeccionar un ecosistema para que el usuario use con frecuencia la app.

Esa funcionalidad nueva, no determinante, pero que puede impactar al usarla, no es más que un Autocompletado en tiempo real de las posibles direcciones a las que el usuario se esté queriendo referir cuando está rellenando este dato en la edición de Qdadas. No existe ninguna libreria, ni modulo Android que te facilite esta labor. O sea que es una buena opción, porque no estará  muy vista en el resto de apps. Para crear esta funcionalidad, hay que picar código y currartelo un poquito, pero creo que el resultado merece la pena. Hay post en otros blogs, de gente que lo ha hecho por su cuenta, así que eso sirve como punto de partida, aunque los posts de esos blogs lleva la funcionalidad dicha a su terreno por lo que no siempre se puede seguir al pie de la letra. Para nuestro caso nos viene genial, ya que con un poco de ingenio y saber hacer se puede conseguiy así conseguimos que los típicos programadores de COPY + PASTE, no se aprovechen y puedan implementarla.

Además, uniremos el autocompletado de la dirección (cuando el usuario termine de rellenarla aceptando una de las posibilidades), con el mapa de forma que este muestre el punto exacto con un movimiento de cámara en situación cenital de afuera a dentro, creando un efecto muy chulo.

Por otro lado el mapa será totalmente interactivo, pudiéndose modificar la posición del marcador mediante la pulsación prolongada en un punto del mismo, o usando drag and drop sobre este marcador.

La idea es básica y la explico a continuación a grandes rasgos:

  1. El usuario empieza a rellenar la dirección del sitio de la Qdada.
  2. Al tercer carácter introducido, el motor de autocompletado dinámico que implementaremos empezará ya a trabajar en segundo plano.
  3. Con el texto introducido hasta el momento por el usuario, haremos una consulta a un servicio web de Google denominado: Google Places. (Deberemos configurar este en nuestro consola de APIs de Google, como hicimos en su momento con los Mapas, para obtener permiso de Google para utilizarlo).
  4. La consulta web nos devolverá un JSON que contendrá una serie de posibles direcciones que el usuario podría referirse con eso que ha escrito hasta el momento.
  5. Esas direcciones posibles, se mostrarán en una lista que se desplegarán justo debajo del AutocompleteTextView que el usuario está editando (El de la dirección).
  6. Los pasos del 2 al 5 se repetirán siempre que el usuario añada o modifique la dirección que está escribiendo.
  7. Cuando el usuario clicke en una de las opciones de autocompletado, está se setear en el AutocompleteTextView oportuno.
  8. Con esa dirección exacta se hará una segunda consulta a un servicio web de Google, también parte de Google Places, que a través de un dirección en texto devolverá el objeto GeoLocal con la información de geolocalización acerca de esa dirección.
  9. La respuesta de ese servicio web. que será otro JSON, se volverá a parsear para obtener la Latitud y la Longitud.
  10. Cuando obtengamos las coordenadas citadas, las usaremos para pintar un Marcador en el Mapa, configurando un movimiento de cámara sobre él que tenga como destino el marcador pintado anteriormente. Este movimiento de cámara creará una transición en movimientos bastante chula sobre el mismo mapa.

Y hasta aquí el funcionamiento implementado de autocompletado dinámico de direcciones.

Para desarrollar esto, simplemente tuvimos que crear dos clases (Una para hacer la llamada al servicio web de posibles direcciones a las que se refiere el usuario con el texto que ha introducido, y otra para que a partir de la dirección que el usuario ha tomado como válida de las que el autocompletado le ha sugerido, obtener las coordenadas mediante la llamada al otro servicio web de Google). Y por otro lado el Fragmente encargado de la vista de esa pantalla, la de edición de la información general de la Qdada, tendrá que tener configurados los eventos del mapa para capturar la interacción del usuario con este y los eventos de modificación del texto por parte del usuario (sobre el AutoCompleteTextView) para saber cuando se debe llamar a las clases encargadas de hacer las llamadas a los servicios web de Google Places.

Por lo tanto, podemos ver algunas capturas de pantallas de esta nueva funcionalidad (aunque su apreciación total es mediante su uso y ver como dinámicamente le va sugiriendo direcciones al usuario).

Posibilidades de Autocompletado

Posibilidades de Autocompletado

Screenshot_2014-01-31-16-43-57

Dirección y Marcador enlazados

Y como siempre, aquí teneis el Commit correspondiente a esta nueva funcionalidad: Commit.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s