Ejemplo avanzado con MIT App Inventor


En este post se va a  mostar cómo se puede desarrollar una aplicación que te permite grabar la lista de direcciones y ver la dirección en Google Maps. También le mostrará cómo ver su ubicación actual en el mapa de Google

Este post  presenta los siguientes aspectos:

  • Enumere manipulación – listas creación, añadiendo elementos a listas
  • ListPicker – añadiendo elementos a listas, ahorrando lista de datos
  • LocationSensor – detectar la ubicación actual para mostrar en Google Maps
  • ActivityStarter – se utiliza para la puesta en marcha de Google Maps para la dirección actual o predefinido
  • Mensajes mostrando – Notifier
  • TinyDB – guardar los datos en una base de datos persistente
  • Varios. – Manipulación de texto, la validación básica

Vamos a trabajar hacia el diseño que se muestra en la figura :

La siguiente figura muestra cómo los componentes están dispuestos en el editor de diseño. También muestra los componentes no visibles (por ejemplo, TinyDB, ActivityStarter, LocationSensor, notificador) que se utilizan en la aplicación.

 

Bloques

Definimos 2 variables globales.

  • tagAddress – una variable que es una constante y se utilizará, como una etiqueta, para almacenar y recuperar datos de la base de datos.
  • listLocations – una variable que se puede utilizar para almacenar y manipular lista de direcciones.

Ahora vamos a crear un procedimiento que se puede invocar cuando se inicia la aplicación (inicializado). El procedimiento establece el estado inicial de algunos de los componentes. Algunos de estos ajustes se podría haber hecho desde el editor de diseño, pero para fines de demostración y aclaración, estamos usando un procedimiento. En el procedimiento, también verificamos nuestra base de datos para averiguar si hay alguna direcciones almacenadas. Si no hay datos, a continuación, sólo tiene que utilizar una lista vacía.

Cómo agregar una nueva Direcciones

Utilizamos AddLocationButton añadir una nueva dirección, CancelButton para cancelar el proceso de agregar y LocationHelpButton que mostramos qué tipo de direcciones se pueden introducir. Los bloques de hacer estas acciones trabajan aquí:

Cuando se hace clic en AddLocationButton, hacemos nuestra entrada de datos de dirección visible (con arreglo pantalla), lo que permite al usuario introducir la dirección. Si el usuario hace clic en Cancelar, hacemos la disposición oculta de nuevo. Con este enfoque, mantenemos el simple pantalla y evitar el desorden.También proporcionamos el SubmitButton para permitir al usuario para indicar que quieren almacenar datos.

Cuando el usuario hace clic en SubmitButton, llevamos a cabo la validación básica para asegurar que los datos se ha presentado. Si la validación no pasa, se muestra un mensaje de error. De lo contrario, invocamos un procedimiento que anexa la nueva dirección a nuestra lista. También guardamos la lista actualizada en nuestra base de datos. Una vez que se agrega la dirección, nos escondemos nuestro acuerdo de nuevo. Los bloques siguientes muestran cómo se realiza esta lógica:

Selección de un Direcciones

Cuando el usuario hace clic en ListPicker1 ‘Seleccionar ubicación’ y selecciona una dirección, esta acción llama a los bloques a continuación:

Muestra la dirección en el dispositivo y permitir que el usuario pulse sobre ViewOnMapButton para ver los bloques de direcciones seleccionadas en el Google Map – ver la figura a continuación:

Cuando se hace clic en ViewOnMapButton, validamos para asegurar que una dirección que ya ha sido seleccionado. Si no es así, se muestra un mensaje de error. De lo contrario, se utiliza bloques de abajo para mostrar la dirección:

Los bloques anteriores se abrirán el mapa y la salida será como la imagen de abajo:

Viendo ubicación actual en el mapa

Hemos caído en un botón, MyLocationButton ‘Mi ubicación en el mapa “que se puede hacer clic para ver la propia ubicación actual. Se utilizará

Descargar Código Fuente

Si desea trabajar con este ejemplo en App Inventor, descargar el código fuente

External Links icon

de su equipo, a continuación, abra la aplicación Inventor, haga clic enProyectos, seleccione Importar proyecto (. aia) de mi computadora … y seleccione el código fuente que acaba de descargar.

 Agradecemos  a M. Hossein Amerkashi para el desarrollo del código prasentado . Visite el blog de ​​Hossein para saber más sobre él y sus materiales de apoyo de la aplicación Inventor.
Anuncios

4 comentarios el “Ejemplo avanzado con MIT App Inventor

  1. […] ultimo ,  Scratch  al igual que MIT APP Inventor, se ofrece de forma […]

    Me gusta

  2. Miguel Lopez dice:

    saludos, sabes como ubicar un marcador de posicion (la gotica roja) con app inventor???

    Me gusta

  3. jose dice:

    alguien sabe como poner multiples marcadores en google maps (no mapa estatico) muchas gracias.

    Me gusta

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