5 Mapes, Speech i ActivityStarter

Vamos a realizar una aplicación que nos dará información turística sobre una ciudad, en este caso escogeremos tres lugares turísticos de Castelldefels e informaremos de sus características y ubicación.

Primera parte

En esta primera parte montaremos la pantalla principal, donde tendremos el título d ela aplicación, veremos las fotografías y los botones para elegir el lugar o monumento.

Dentro de la aplicación del AppInventor, creamos un nuevo proyecto, que lo llamaremos " Conoce Castelldefels ". Arrastraremos a la pantalla, dos etiqueta, una imagen y tres botones:

La primera etiqueta nos mostrará el título de la aplicación, cambia las propiedades de tamaño, letra, color y texto:

De la misma forma. cambia el texto de la segunda etiqueta para que indique al usuario qúe debe hacer con los botones, por ejemplo puedes escribir " Pulse el botón del lugar elegido : ", más adelante también la haremos servir para mostrar el nombre del lugar.

Y ahora cambia el texto de los botones, puedes indicar que los lugares o monumentos que vamos a ver son, el Castillo, el Canal olímpico y la playa. Para trabajar más cómodamente, cambia también los nombres en el apartado de componentes, recuerda que lo puedes hacer con el botón de "Rename" y que no puedes hacer servir ni acentos ni espacios:

Ya podemos empezar a definir el comportamiento de la aplicación, pasa al editor de bloques.

Lo primero es definir el comporatmientto de los botones con la etiqueta del nombre del lugar, para ello arrastra un bloque de cada botón para que al pulsarlos cambie el nombre de la etiquela labelNOMBRE al nombre del lugar elegido, tendrás que arrastrar lo bloques necesarios de la paleta de labelNOMBRE al bloque when button....click do y añadir una etiqueta de texto que muestre el nombre del lugar:

Prueba el funcionamiento antes de continuar.

Ahora haremos que aparezca la fotografía del lugar elegido al pulsar el botón. tenemos que subir al servidor de AppInventor las fotografías elegidas. Para ello dentro del apartado de Media sube las fotografías elegidas:

Una vez subidas las fotografías, vuelve al editor de bloques y desde la paleta de Image1 arrastra el bloque set Image1 Picture to... al interior de los bloques de los botones, y mediante un bloque de texto, indica el nombre de la fotografía que debe aparecer :

Comprueba el funcionamiento.

Añadiremos ahora un efecto para que parezca una audio-guía. Existe un componente dentro de AppInventor que lee en voz alta el texto que nosotros le indiquemos. Este bloque se encuentra en la paleta de Media, se llama TextToSpeech, arrástralo a la pantalla, es un componente no visible:

Hay que definir el idioma que usará para leer el texto. Lo definiremos dentro de las propiedades en el apartado de Language indicaremos SPA de Spanish:

Dentro del apartado de Blocks, arrastraremos de la paleta de TextToSpeech1 el bloque call TextToSpeech1.Speak message... dentro de cada bloque del botón adecuado, y solo falta indicar el texto que debe recitar, que será el del monumento o lugar, y lo haremos con un bloque de texto

Segunda parte. Uso de mapas de Google

Ahora introduciremos los mapas de Google para mostrar la ubicación de cada lugar.

Para entender el funcionamiento lo haremos con un proyecto nuevo, y después ya lo añadiremos a nuestro proyecto turístico.

Crea un nuevo proyecto y dentro del Designer, añade un botón y un bloque ActivityStartet que se encuentra en la paleta de Connectivity.

El botón lo puedes personalizar, por ejemplo define su texto como "Abrir mapa".

ActivityStarter es un componente que te permite ejecutar cualquier aplicación de Android, un navegador, Google Maps, o incluso otra de tus propias aplicaciones. Construirás tu aplicación para que se inicie la aplicación Mapas para mostrar mapas, el usuario podrá después presionar el botón Atrás para volver a la aplicación y seleccionar otro lugar distinto.

ActivityStarter es un componente relativamente de bajo nivel en el que tendrás que establecer algunas propiedades:

En el apartado Action, indica android.intent.action.VIEW.

Para conocer las coordenadas del sitio, debes entrar con el navegador en la aplicación de mapas de google "maps.ggogle.com", para esta prueba buscaremos el colegio:

Cuando cliquemos con el botón derecho del ratón en el punto que queramos, nos aparece un menú, y en este menú elegiremos la opción " ¿Qué hay aquí?", y nos aparecerán las coordenadas, las copiaremos y las pegaremos ( Control+V) en el apartado DataUri de las propiedades del ActivityStarter, con el prefijo geo: de la siguiente manera:

geo:41.28831,1.984392

Entramos en Blocks, arrastramos un bloque del botón y dentro un bloque call ActivityStarter1.StarActivity:

Solo falta probar el botón.

Aparece el mapa pero no está centrado en el punto de interés que nos interesa. Para conseguirlo debemos modificar el contenido de la casilla de DataUri en el Designer. Añadiremos las coordenadas según este modelo:

geo:coordenadas?q=coordenadas

en nuestro caso sería

geo:41.28831,1.984392?q=41.28831,1.984392

Ahora aparecerá centrado y con una etiqueta en el punto exacto:

Tercera parte. Aplicación turística

Ya solo falta añadir la última función a nuestra aplicación. Vuelve a cargar el proyecto de la aplicación turística. Se trata de que cada vez que elijamos un lugar, al hacer click podamos ver su ubicación en un mapa de Google.

Primero añadiremos una fotografía de portada, dentro del Designer en las propiedades de la Image1, defines la imagen que te parezca apropiada:

Portada

Para mejorar la presentación añade HorizontalArrengaments para centrar la etiqueta del título y de la imagen. Para que aparezcan los botones para situar en el mapa el lugar, añade tres tablas de 2 columnas y una fila, En la primera columna colocarás la etiqueta correspondiente LabelNOMBRE y en la seguna el botón que nos llevará al mapa de cada lugar el primero será ButtonMAPA1, en la segunda tabla la etiqueta LabelNOMBRE2 y en la segunda columna ButtonMAPA2 y por último en la tercera tabla, en la primera columna la etiqueta LabelNOMBRE3 y en la segunda columna el ButtonMAPA3. En el Designer debe quedar así:

Debes preparar ahora la programación de los bloques. Primero prepararemos la presentación y después la aparición de los mapas. Par ello en el Designer debes de asignar la propiedad de hidden ( oculto) a las tablas 2 y 3 y al botón de mapas 1, para que en el inicio de la aplicación no aparezcan.

Ahora ya dentro del Blocks, volveremos a definir el comportamiento de los botones de la siguiente forma:

ButtonCASTILLO

Debe seguir cambiando el texto del LabelNOMBRE como al principio, pero debe hacer que aparezca el botón ButtonMAPA1, así que definiremos esa propiedad al botón cuando pulsemos el ButtonCASTILLO. También si ya hemos visto los otros lugares, tendremos que seguir definiendo como ocultas las tablas 2 y 3 y visible la Tabla 1.

ButtonCANAL

En este caso, debemos hacer desaparecer la Tabla 1 y la Tabla 3 y que aparezca la Tabla 2, y dentro de la Tabla 2 debe aparecer el texto de la etiqueta LabelNOMBRE2. Del botón del mapa no nos debemos preocupar.

ButtonPLAYA

Por el mismo procedimiento, debemos hacer desaparecer la Tabla 1 y la Tabla 2 y que aparezca la Tabla 3, y dentro de la Tabla 3 debe aparecer el texto de la etiqueta LabelNOMBRE3. Del botón del mapa no nos debemos preocupar.

Comprueba el funcionamiento de la presentación de textos, imágenes y botones, y retoca las propiedades de altura y anchura de los componentes si lo ves necesario.

La segunda parte será programar los botones de los mapas. Ya sabes realizar el procedimiento. Tienes que añadir tres ActivityStarter y que cada una está asociada al botón de mapa correspondiente. Encuentra las coordenadas en el GoogleMaps y completa la aplicación.