Mapéalo: Guardar y mostrar ubicaciones en un Mapa de Google

Transcripción

1 Mapéalo: Guardar y mostrar ubicaciones en un Mapa de Google Imagina que tienes planes para reunirte con algunos amigos en una nueva ciudad, y ellos te dieron algunas direcciones con puntos de reunión. Es molesto tener toda esa información en correos electrónicos o mensajes de texto, por lo tanto sería mejor tener una aplicación en la cual puedas tener acceso fácil a esas ubicaciones. Nosotros podemos desarrollar una aplicación que haga eso por nosotros! Que características quisiéramos incluir en esta aplicación? Una manera de guardar ubicaciones. Una manera de ver las ubicaciones guardadas. Ver las ubicaciones en Google Maps. Ver tu ubicación actual en Google Maps. Hagamos una interfaz de usuario que se asemeje a la figura de la derecha. Esta es la pantalla general que el usuario va a ver, pero más componentes se volverán visibles cuando el usuario seleccione Agregar Ubicación. Mapéalo - 1

2 La siguiente figura muestra como los componentes están arreglados en el Diseñador. También te muestra los componentes que no se encuentran a la vista (TinyDB, ActivityStarter, SensorDeUbicación, Notificador) que son usados en la aplicación. Ordena todos los componentes necesarios como se ven en la imagen y después vamos al Editor de Bloques. No tienes que nombrar a los componentes de la misma forma que en la imagen, pero asegúrate de renombrar los componentes de una manera que logres recordarlos y sus propósitos. Esto hará las cosas más fáciles cuando trabajemos con los bloques. Seleccionar Ubicación Guardada en este caso esto es un componente SelectorDeLista, no un botón. Mapéalo - 2

3 Inicializa la Pantalla Cuando la aplicación se abre por primera vez, queremos hacer lo siguiente: Esconder los componentes para que el usuario introduzca una dirección para guardar. Deshabilitar Seleccionar Ubicación Guardada hasta que el usuario guarde al menos una dirección. Todos los botones tienen una propiedad llamada Habilitado y todos los componentes tienen una propiedad Visible. Estas propiedades son verdadero si tu no las cambias, pero también puedes configurarlas como falso de tal forma que un botón dejaría de trabajar y un componente desaparecería de la pantalla. Ver mi ubicación actual en el mapa. Con estas dos propiedades, y los bloques que se muestran a continuación, Cómo inicializamos la pantalla para que contenga los puntos listados arriba? Pruébalo! Observa lo que pasa cuando configuras Habilitado a verdadero/falso y lo mismo para la propiedad Visible. Hemos agregado un botón, BotonMiUbicacion Mi Ubicación en el Mapa que puede ser presionado para ver nuestra ubicación actual. Cuál es el primer bloque que necesitamos para hacer un evento click de botón? Un manejador de eventos! Queremos escribir un procedimiento que abrirá la aplicación de mapas. En los bloques integrados, el conjunto purpura es llamado Procedimientos. Arrastra el que se encuentra arriba. Vamos a llamarlo MostrarMapa. Nota que hay un pequeño botón azul con un engrane en la esquina superior izquierda del bloque, al igual que el bloque sientonces-sino. Haz click en él y agrega una entrada para el procedimiento. Mapéalo - 3

4 Después de arrastrar la entrada sobre el procedimiento MostrarMapa, aparecerá un cuadrito naranja con una x. Dale click a la X y renombra el cuadrito direccion Esta es una entrada para el procedimiento. Esto significa que podemos reutilizar el procedimiento para mostrar mapas de diferentes direcciones. Necesitaremos utilizar el ActivityStarter para iniciar la aplicación de Google Maps. Al final, tu procedimiento MostrarMapa deberá verse de la siguiente manera. La combinación del texto de la entrada para la Acción y también el de UriDelDato le dice a tu aplicación que comience la aplicación de Mapas. Si sostienes el mouse sobre la dirección sin hacer clic, encontraras el bloque tomar direccion que necesitas para la segunda parte de la entrada de UriDelDato. Ahora, después de que el procedimiento MostrarMapa ha sido creado, si haces clic en Procedimientos debajo de los Bloques Integrados, veras un bloque de llamar MostrarMapa. Esto es lo que queremos cuando hagamos click el BotonMiUbicacion. Lo único que nos falta ahora es la dirección de entrada para el procedimiento MostrarMapa. Esta dirección vendrá del Sensor De Ubicación. Veamos que bloques tenemos disponibles ahí. Hay un bloque del Sensor De Ubicación que nos proporcionará nuestra DirecciónActual. Usa este bloque para completar el manejador de eventos BotonMiUbicacion.Click. Pruébalo! Observa si puedes obtener tu ubicación actual para abrirla en Google Maps desde tu app. Mapéalo - 4

5 Agregando una Nueva Dirección Usamos BotonAgregarUbicacion para agregar una nueva dirección, BotonCancelar para cancelar el proceso de agregar la nueva dirección, y BotonAyudaUbicacion para mostrar que tipo de direcciones pueden ser introducidas. Los bloques que hacen posible que estas acciones funcionen son los siguientes. Cuando inicializamos la pantalla, configuramos la propiedad Visible del ArregloIngresarDireccion a falso, pero necesitaremos verlo cuando queramos introducir una nueva dirección para ser guardada. Esto quiere decir que necesitamos cambiar el modo Visible a verdadero. Cambiaremos Habilitado a falso ya que el botón ya ha sido presionado. También vamos a configurar el texto Pista para el CuadroDeTexto de la dirección. Si el usuario hace clic en Cancelar, volvemos a esconder el arreglo de nuevo. Usando este enfoque, mantenemos una pantalla simple y evitamos desorden. También proporcionamos el BotonGuardar para permitirle al usuario indicar que quiere almacenar los datos. Si el Usuario no está seguro de cómo usar la aplicación, podemos configurar el BotonAyudaUbicacion para mostrarle un mensaje de alerta como se muestra a continuación. Pruébalo! Observa si los botones para de agregar ubicación, ayuda y cancelar funcionan como deberían. Juega con el verdadero/falso y también con diferentes textos pistas. Mapéalo - 5

6 Guardando una nueva dirección. Cuando el Usuario hace clic en BotonGuardar, queremos asegurarnos de que una dirección y un nombre para esta ubicación han sido proporcionados. Para hacer esto, vamos a utilizar el bloque si-entonces-sino) de nuevo como lo hicimos en el tutorial pasado. Si los CuadrosDeTexto no contienen información, mostramos un mensaje de error usando el Notificado. Si no falta información, agregaremos la nueva ubicación a nuestra lista de guardados. Una vez que la dirección ha sido guardada, ocultamos nuestro arreglo de nuevo. Aquí están los bloques para mostrar un mensaje de error usando el Notificador. TinyDB TinyDB es similar a las Listas en que almacena información para ti. Sin embargo, con TinyDB, se necesita ser agregado primero un componente desde el Diseñador. Además, tu especificas la etiqueta, por lo que la lista de Elementos que estas guardando no es automáticamente una lista numerada. Por ejemplo, continuando con nuestro ejemplo de la lista de compras, puedes hacer lo siguiente para guardar tu lista. a -> apples o -> oranges l -> lemons Tags a o l Values apples oranges lemons Mapéalo - 6

7 La Etiqueta es solo una manera que puedes utilizar para guardar y regresar el valor que has guardado. Si preguntas por el valor asociado con la a el valor que vas a tener es apples. Para nuestra aplicación, podemos usar TinyDB para almacenar un nombre de ubicación como una etiqueta y la dirección como un valor. También necesitaremos agregar bloques para limpiar el TextoNombreDeUbicacion y TextoIngresarUbicacion después de guardar una dirección. Qué necesitas para agregar los siguientes bloques (y donde los pondrías) para limpiar el texto de esas cajas de texto? También, como el BotonCancelar, necesitamos esconder ArregloIngresarDireccion y habilitar el BotonoAgregarUbicación de nuevo después de guardarlo. Mira tú manejador de Evento cuando BotonCancelar.Click para encontrar los bloques que puedes reusar aquí. Después que se ha arreglado la apariencia de la aplicación con el manejador de eventos, también queremos habilitar nuestro componente SelectorDeLista. Necesitamos poner todos los nombres de las ubicaciones dentro del SelectorDeLista para que podamos encontrarlas de nuevo después. Cómo podemos obtener los nombres de las Ubicaciones del SelectorDeLista? Sabemos que todos los nombres de las ubicaciones han sido usados como etiquetas en el TiinyBD, así que vamos a ver qué es lo que está disponible. Parece que podemos obtener todas las etiquetas para TinyBD con el procedimiento CallTintDB1.getTags. Mapéalo - 7

8 Los artículos que un SelectorDeLista muestran son llamados elemento. Vamos a necesitar configurar que los elementos sean las etiquetas que obtengamos del TinyDB. El evento final que maneja el BotonGuardar.Click debería lucir como el siguiente. Pruébalo! Verifica que tus ubicaciones están siendo guardadas haciendo click en Seleccionar Ubicación Guardada después de que guardaste una dirección. Mapéalo - 8

9 Seleccionando Direcciones guardadas Cuando el usuario haga click en el SelectorDeLista Seleccionar Ubicación Guardada, podrá seleccionar una ubicación basada en los nombres que usó para las direcciones. Sin embargo, después de seleccionar una ubicación, lo que necesitamos es que la ubicación esté disponible para mostrarla en el mapa. Para hacer eso, necesitamos regresar la dirección guardada en el TinyDB. Podemos hacer esto usando el bloque CallTinyDB1.GetValue con el SelectorDeLista Selccion como la etiqueta de entrada. El valor de retorno será una dirección y la pondremos en el texto de TextoDireccionParaMapa. El Bloque completo es el siguiente. Aparece la dirección en el área de texto TextoDireccionParaMapa? Si aparece, Vamos a agregar la funcionalidad del Botón Ver en Mapa. Cuando haces click en BotonVerEnMapa, nos aseguramos de que una dirección este en el cuadro de texto TextoDireccionParaMapa. Si no, un mensaje de erro serár mostrado. Para hacer eso, necesitaremos usar el bloque de si-entonces-sino de nuevo para checar por textos vacíos. Para el mensaje de error podemos usar el mismo bloque del Notificador que utilizamos para el error de BotonGuardar.Click. Mapéalo - 9

10 Dados los siguientes bloques, Cómo completamos este último evento? Bloque Final Pruébalo! Guarda algunas ubicaciones y observa si puedes ver cada una de ellas en el mapa. Mapéalo - 10