Coche a control remoto

Propuesta de trabajo:

• Diseña y construye un coche controlado por control remoto desde una aplicación del móvil

Diseñar la app para el móvil:

Cada botón de la aplicación manda un número por Bluetooth.

Código para App Inventor:

Código para el Arduino:

    //ROBOT por control remoto mediante Bluetooth
      //Hay que crear una App para controlar el robot desde el movil

#include <Servo.h>            //Carga la librera Servo.h que contiene metodos para trabajar con servos

Servo servoI;                 //Crea un objeto servoI (servo Izquierdo) para controlar el servomotor izquierdo
Servo servoD;                 //Crea el objeto servoD (servo Derecho) para controlar el servo derecho
int estado=0;                  //Crea la variable estado, que servira para leer la señal del puerto serie


void setup()
{
  Serial.begin(38400);      //Conectar el puerto serie. El modulo Bluetooth de BQ funciona a 38400 baudios

  servoI.attach(6);        //asocia al servo Izquierdo el PIN 6
  servoD.attach(9);        //asocia al servo Derecho el PIN 9
    
}

void loop()
{
                            //Motor Izquierdo avanza en sentido Horario (0)
                            //Motor Derecho avanza en sentido AntiHorario (180)
                            //Motor parado (90)
    
    if(Serial.available()>0){
      estado = Serial.read();        //Iguala la variable estado a la lectura que llega por el puerto serie
    }
    
    if(estado =='1'){              //Si la variable estado (lo que se recibe por el puerto serie) es un 1
      servoI.write(0);              //Motor Izquierdo avanza en sentido Horario (0)
      servoD.write(180);            //Motor Derecho avanza en sentido AntiHorario (180)
      delay(15);                    //Retardo de 15 milisegundos para dar tiempo a los servos a posicionarse
    }
    
    if(estado =='2'){              //Si la variable estado (lo que se recibe por el puerto serie) es un 2
      servoI.write(90);             //Motor Izquierdo para (90)
      servoD.write(180);            //Motor Derecho avanza en sentido AntiHorario (180)
      delay(15);                    //Retardo de 15 milisegundos para dar tiempo a los servos a posicionarse
    }
    
    if(estado =='3'){              //Si la variable estado (lo que se recibe por el puerto serie) es un 3
      servoI.write(90);              //Motor Izquierdo para (90)
      servoD.write(90);            //Motor Derecho para (90)
      delay(15);                    //Retardo de 15 milisegundos para dar tiempo a los servos a posicionarse
    }
    
    if(estado =='4'){              //Si la variable estado (lo que se recibe por el puerto serie) es un 4
      servoI.write(0);              //Motor Izquierdo avanza en sentido Horario (0)
      servoD.write(0);            //Motor Derecho retrocede (sentido AntiHorario (180))
      delay(15);                    //Retardo de 15 milisegundos para dar tiempo a los servos a posicionarse
    }
    
    if(estado =='5'){              //Si la variable estado (lo que se recibe por el puerto serie) es un 5
      servoI.write(180);              //Motor Izquierdo avanza en sentido Horario (0)
      servoD.write(90);            //Motor Derecho para (90)
      delay(15);                    //Retardo de 15 milisegundos para dar tiempo a los servos a posicionarse
    }
    
}

Fuente: http://elprofegarcia.com/?s=control+remoto

App para robot a control remoto

Propuesta de trabajo:

• Crea una app para controlar el coche robot por control remoto

Juego de explotar globos

Propuesta de trabajo:
Diseña y crea con App Inventor un juego que consiste en explotar globos:

• Aparecen globos en puntos al azar desde la parte inferior de la pantalla
• Los globos van flotando y se dirigen hacia la parte superior de la pantalla, donde desaparecerán cuando toquen el borde
• El juego consiste en explotar todos los globos antes de que desaparezcan por la parte superior de la pantalla
• Para explotarlos el usuario tiene que pulsar sobre los globos
• Un temporizador hará que la partida termine transcurrido cierto tiempo
• Una variable (puntos) llevará la cuenta de los globos explotados
• Al terminar la partida se mostrará el número de puntos

¿Te atreves?

Brújula

En esta aplicación vamos a hacer una brújula utilizando el sensor de orientación del móvil.

El sensor de orientación es un componente que nos permite determinar la orientación espacial del dispositivo móvil. Para ello nos proporciona tres valores:

• Roll: mide la inclinación del móvil en relación a los laterales.
• Pitch: mide la inclinación del móvil en relación a la parte anterior y posterior.
• Azimuth: Se mide desde el punto cardinal Norte en sentido antihorario de 0 a 360º. Si la parte anterior del móvil está orientada al Norte, el azimuth tiene un valor 0. Si la parte izquierda del móvil está orientada al Norte, el azimuth tiene un valor de 90, etc.

 

Vamos a crear un primer evento de prueba para ver cómo funciona el sensor de orientación en tu móvil:

Coge tres etiquetas y ponlas en la pantalla, una será para ver el valor del Roll, otra para el Pitch y la tercera para el Azimuth. Arrastra un componente OrientationSensor y ya puedes ir a programar el código. Dentro del Editor de Bloques escribe el siguiente código:

Ya sabemos cómo funciona nuestro sensor de orientación.
Ahora vamos a crear una aplicación que será una sencilla brújula, utilizando la propiedad Azimuth.

Primero descárgate los materiales necesarios a tu ordenador y luego súbelos a tu proyecto:

 

brujula.zip

En nuestro proyecto necesitaremos:

• 1 canvas, que será el fondo de la brújula
• 1 ImageSprite, que será la flecha de la brújula (que se podrá mover)
• 1 etiqueta Label, que nos dirá el valor del azimuth (orientación de la brújula)
• 1 OrientationSensor

Coloca la imagen de la rosa de la brújula de fondo en el canvas y dale un tamaño de 310 píxeles de width y de height:

Para la flecha (ImageSprite) utiliza un tamaño de 287 píxeles de width y 295 de heigh.

Cmabia el nombre a la etiqueta y ajusta los detalles que consideres oportunos. Acuérdate de poner el icono de la app en las propiedades de la pantalla (Screen1).

Ahora, ya en el editor de Bloques, escribe el siguiente código:

Cada vez que cambia la propiedad azimuth del móvil, se moverá la imagen de la flecha y se mostrará un texto correspondiente al valor del azimuth en la etiqueta.

Comprueba que funciona.

Fuente:

• https://sites.google.com/site/appinventormegusta/ejemplos/brujula---sensor-de-orientacion-y-sprite

Juego de naves y meteoritos

En esta aplicación aprenderemos a darle movimiento a sprites para crear un juego en el que una nave disparará un láser para destruir meteoritos.

Descárgate los componentes que necesitarás a tu ordenador y luego súbelos a tu proyecto:

Los componentes que necesitaremos para nuestro juego son:

• 1 componente canvas
• 3 imageSprite
• 1 Clock
• 1 Sound

Screen1:

Ajustamos las propiedades de la pantalla para que el juego sea apaisado, quitamos el título de Screen1, para que quede más elegante, etc.:

El canvas:

Seleccionamos la imagen del cielo para fondo del canvas y ajustamos las propiedades para que ocupe todo el largo y el ancho de la pantalla:

Arrastra 3 imageSprite dentro del canvas. Uno será la nave, otro el láser y otro el meteorito.

La nave:

Cambia el nombre al primer Sprite y ajusta las propiedades como ves aquí:

El láser:

Cambia el nombre del segundo Sprite y ajusta sus propiedades así:

El meteorito:

Cambia el nombre del tercer Sprite y ajusta sus propiedades así:

Una vez que tenemos todos los elementos pasamos al editor de Bloques y empezamos a programar:

Vamos a hacer que la nave se mueva en el eje Y cuando pongamos el dedo en la pantalla:

Cuando el meteorito choque contra el borde de la pantalla vamos a hacer que vuelva al fondo a unas coordenadas Y al azar entre 1 y el ancho de la pantalla:

Cuando el meteorito colisione con otro Sprite, volverá al fondo igual que antes:

Hacemos algo parecido con el láser. Si choca con el borde o con otro Sprite, haremos que vuelva delante de la nave. Además, queremos que reproduzca el sonido del disparo y que si colisiona con el meteorito, sume un punto:

Prueba la aplicación en tu móvil.

Introduce las mejoras que se te ocurran para hacer el juego más emocionante.

Fuente:

• http://www.tuappinvetorandroid.com/2013/10/03/tutorial-app-inventor-como-crear-un-juego-de-naves-parte-1/
• http://www.tuappinvetorandroid.com/2013/10/10/tutorial-juego-de-naves-android-creado-con-app-inventor-segunda-parte/

Ruleta de frutas

Con esta aplicación vamos a reproducir uno de esos juegos en los que van saliendo frutas al azar y hay que reunir tres iguales.

Descarga en tu ordenador estas imágenes y luego súbelas a tu proyecto:

          

En Screen1 selecciona los siguientes componentes:

Una vez hecho esto, ve al editor de Bloques y empieza a programar el código:

Lo primero es definir 3 variables numéricas y dos variables, una llevará cuenta del número de intentos y otra de los aciertos:

Ahora vamos a programar el Reloj (Clock1). Lo que queremos es que cada vez que se active el reloj, se generen tres números aleatorios entre 1 y 3. Dentro del Bloque When Clock1. Timer decimos que le de un valor al azar a las variables x, y, z:

A continuación, añadimos Bloques condicionales de Control if, de modo que se le asigne una fruta a cada uno de los números al azar:

Si hacemos lo mismo con las tres variables x, y, z el código debe quedar finalmente así:

Ahora vamos al Button1 (el de PARAR). Cuando se pulse el botón PARAR queremos que se deshabilite el temporizador, se incremente en uno el número de intentos y los muestre en Text1.Text. Además, se comprobará si los números aleatorios x, y, z son iguales y, en ese caso, incrementa en uno los aciertos y los muestra en Text2.Text. Para ello, dentro del bloque When Button1.Click, introducimos el siguiente código:

El Button2.Click vuelve a habilitar el temporizador Clock1.Enabled=true. El código para el Button2 será:

Y, finalmente, el Button3.Click establece los valores iniciales y arranca el temporizador. Su código sería algo así:

Comprueba la aplicación en tu móvil.

Incorpora alguna mejora que se te ocurra.

Fuente:

• http://iesromerovargas.es/android/inicio.htm
• http://iesromerovargas.es/android/inicio2.htm

Personalizando el icono de las apps

Si te has fijado, las aplicaciones que has creado aparecen en tu móvil con un icono por defecto de Android.

Si quieres personalizar el icono de tus aplicaciones sólo tienes que seguir los siguientes pasos:

1. Crea un dibujo de 48 x 48 pixels png, gif o jpg.
2. Luego pulsa en SCREEN1
3. En propiedades marca icon y sube el archivo

Así de sencillo, y ya tendrás tu app personalizada con tu propio icono.

Más información:

http://www.appinventor.org/appPage

Tablas de multiplicar

Diseña una aplicación que multiplique dos números cualesquiera.

En el editor de Bloques debe quedarte algo así:

Teorema de Pitágoras

Vamos a crear una aplicación que calcule el valor de la hipotenusa de un triángulo rectángulo en función del valor de los catetos utilizando el teorema de Pitágoras.

Arrastra de la Palette a la pantalla Screen1:

• Una etiqueta (Label1)
• Un casillero (TexBox1)
• Otra etiqueta (Label2)
• Otro casillero (TexBox2)
• Un botón (Button1)
• Otra etiqueta (Label3)

Cambia sus propiedades para hacerlo a tu gusto. Puedes cambiar el tamaño del texto, el color del fondo, etc.

En el editor de Bloques tendrás que hacer un programa parecido a este:

Comprueba que la aplicación que acabas de crear calcula correctamente el teorema de Pitágoras.

Mi primera aplicación: acaricia gatito

Vamos a crear nuestra primera aplicación.

Consistirá en la imagen de un gatito, que al tocarla, maullará.

Crear un nuevo proyecto

1. Haz clic en New en el lado izquierdo, cerca de la parte superior de la página.
2. Introduce el nombre del proyecto acariciagatito (una sola palabra, sin espacios)
3. en el cuadro de diálogo que aparece, haz clic en Aceptar.

El navegador abrirá el Diseñador, el lugar donde se seleccionan los componentes para su aplicación, y debe tener este aspecto:

Selecciona los componentes para el diseño de tu aplicación

Para construir acariciagatito necesitarás una imagen de un gatito y el sonido de un maullido. Descarga estos archivos al ordenador:

• foto del gatito
• miau sonido

Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, bajo el título Palette. Los componentes son los elementos básicos que se utilizan para hacer las aplicaciones en el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente Label, que sólo muestra un texto en la pantalla, o el componente Button que mostrará un botón en la pantalla del teléfono que al ser pulsado iniciará una acción. Otros componentes son más elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imágenes fijas o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un mando de Wii y detecta cuándo movemos o agitamos el teléfono, los componentes que crean o envían mensajes de texto, los componentes que reproducen música y vídeo, componentes capaces de obtener información de sitios Web, y así sucesivamente.

Para utilizar un componente en tu aplicación, tendrás que hacer clic y arrastrarlo sobre el visor (Viewer), en el centro de la pantalla de diseño. Cuando añadas un componente en el visor, también aparece en la lista de componentes (Components), a la derecha del visor.

Los componentes tienen propiedades, que se presentan en la parte derecha de la pantalla (Properties) y que se pueden ajustar para cambiar la forma en que el componente interactuará con la aplicación. Para ver y cambiar las propiedades de un componente, primero debes seleccionar el componente deseado en la lista de componentes.

Pasos a seguir para seleccionar los componentes y propiedades de configuración

Queremos que acariciagatito tenga un botón con la propiedad de imagen ajustada al archivo que has descargado antes, con la imagen del gatito, kitty.png. Estableceremos esto del modo siguiente:

1. Arrastra y suelta un Button hasta Screen1, en el área del visor (viewer). El componente Button se encuentra en la sección Basic de la paleta (palette).
2. En la lista de propiedades de Button1, el botón que acabamos de disponer, en imagen, haz clic sobre ninguno (none) ...
3. Haz clic en agregar (Add) ...
4. Selecciona el archivo kitty.png, que has descargado antes.
5. Eliminar Text for Button1, que aparece bajo la propiedad text mediante la tecla de retroceso.Tu diseño debería tener este aspecto:

Abre el Editor de bloques (Blocks Editor)

El diseñador (Designer) es una de las tres herramientas clave que utilizarás en la creación de aplicaciones. El segundo es el Editor de bloques. El tercero es el teléfono. Vamos a usar el Editor de bloques para asignar los comportamientos de los componentes, como qué debe suceder cuando el usuario de la aplicación presiona un botón.

El editor de bloques se ejecuta en una ventana separada. Al hacer clic en Abrir el editor de bloques (Open the Blocks Editor) de la ventana de diseño, el archivo de programa del editor de bloques se debe descargar y ejecutar. Este proceso puede tardar 30 segundos o más. Si no se abre el Editor de bloques, podría ser porque el navegador no está configurado para ejecutar aplicaciones Java descargadas de forma automática. Una vez descargado, veremos el archivo del editor de bloques, llamado AppInventorForAndroidCodeblocks.jnlp y debemos abrirlo. Una vez hecho esto, se activa Java, que nos solicitará si queremos ejecutar la aplicación, a lo que responderemos que sí. Entonces, la ventana del editor de bloques debe verse como se muestra abajo, con "cajones" para los bloques de programa a la izquierda, y un gran espacio vacío para la colocación de los bloques que uniremos para montar el programa, que se va a hacer a continuación.


A continuación haremos lo siguiente para completar la aplicación:

En el Diseñador:

• Agregar un componente de etiqueta (label) que ponga "Acaricia al gatito".
• Subir el archivo meow.mp3
• Agregar un componente de sonido (sound) que reproduzca el archivo meow.mp3.

En el Editor de bloques:

• Crear un controlador de eventos que dispare el componente de sonido cuando el usuario pulsa el botón.

Adición de la etiqueta

En la paleta y el visor:

1. Arrastra y suelta el componente Label hasta el visor (Viewer), situándolo por debajo del gatito. Aparecerá en la lista de componentes como Label1

En propiedades (properties)

1. Cambia la propiedad Text de Label1 de forma que ponga "Acaricia al gatito". Cuando el cursor cambie a otra área verás aparecer este texto en el botón en tu ordenador y en el dispositivo Android.
2. Cambia el Color de fondo (BackgroundColor) de Label1. Puedes cambiar al color que te guste.
3. Cambiar el color del texto (TextColor) de Label1. Pásalo a un color que quede bien con el resto.
4. Cambiar el tamaño de su fuente (FontSize) de Label1 poniéndola a 30.

Te quedará algo así:

Agregando el maullido

En la paleta (Palette):

1. Haz clic en la sección Media para ampliarla y ver sus componentes.
2. Arrastra un componente Sound y colócalo en el visor (Viewer). Independientemente de donde lo dejes caer, aparecerá en la parte inferior del visor, como componente no visible (non-visible-components) y como Sound1.

En el área de medios (Media)

1. Haz clic en Agregar (Add) ...
2. Sube el archivo meow.mp3 a este proyecto.

En Propiedades (Properties)

1. Establece la propiedad fuente (source) del componente Sound1 haciendo clic sobre la misma. Cuando aparezca el cuadro de selección, pulsa sobre meow.mp3 y sobre OK. Esto asocia el maullido contenido en este archivo a Sound1.

El diseñador debe parecerse a esto:

Haz el juego de sonido

Con el Editor de bloques vamos a definir la forma en que la aplicación se va a comportar. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. Vas a decirle al botón, que en realidad es la fotografía del gatito, que reproduzca el sonido del maullido cuando el usuario lo toque. Si los componentes son los ingredientes de una receta, puedes pensar en bloques como las instrucciones de elaboración del plato.

El editor de bloques tiene dos pestañas en la esquina superior izquierda: Integrados (Built-in) y mis bloques (My blocks) . Los botones situados debajo de cada pestaña muestran los bloques cuando se hace clic. Los Integrados son un conjunto de bloques genérico, que encontraremos disponibles independientemente de la aplicación que vayamos a crear. Son siempre los mismos. Los bloques debajo de la pestaña de mis bloques contienen bloques específicos, vinculados con el conjunto de componentes que hemos elegido para la aplicación. Varían según los componentes seleccionados previamente y cambian si cambiamos componentes sobre la marcha.

Para hacer que se reproduzca el sonido al tocar (pulsar) el botón con la foto del gatito, tendrás que pulsar la pestaña My Blocks, desplegar los bloques de la sección Button1 y arrastrar y soltar al lienzo central el bloque When Button1.Click do, que se refiere a la circunstancia que el usuario pulse el botón y, tras desplegar los bloques de la sección Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximándolo al bloque When Button1.Click do, de modo que ambos encajen como en un rompecabezas, lo que la aplicación nos indica con un sonoro clic, perfectamente audible.

Una vez hecho esto, pulsando sobre la foto (esto es, tocando la pantalla en la foto y retirando el dedo rápidamente, lo que android considera un Click), oiremos cómo el teléfono emite el maullido.

El Editor de bloques debe asemejarse a esto:

¡Ya tienes tu primera aplicación!

Para más información puedes ver este vídeo con las instrucciones paso a paso:



Fuente:
https://sites.google.com/site/aprendeappinventor/tutoriales/nuestra-primera-aplicacion

Localización y mapas

Nuestro móvil o tablet Android tienen un sensor de orientación y un receptor de GPS. Usando Google Maps vamos a aprender a localizar puntos en un mapa según sus coordenadas, buscar direcciones y establecer rutas entre dos puntos.

 Introducción

Usando el sensor de orientación de nuestro dispositivo y con Google Maps vamos a aprender a localizar puntos en un mapa por coordenadas, buscar direcciones y establecer rutas entre dos puntos.

 Brújula digital

Para el siguiente programa vamos a usar el sensor de orientación (componente OrientationSensor) para hacer una brújula digital.

1 Crea un nuevo proyecto y llámalo "brujula"

2 Cambia la propiedad ScreenOrientation del componente Screen a Portrait (vertical) según utilices un móvil o a Landscape (Horizontal) si usas un tablet. Después veremos por qué.

3 Añade un componente Canvas y cambia sus propiedades Width y Height a "Fill parent". 

4 Añade un componente ImageSprite y usa la imagen "brujula.png" que encontrarás aquí

5 Añade por último un componente OrientationSensor dentro de Sensors (sensores)

Como hemos visto en el ejemplo del cohete que viajaba a la luna, el componente OrientationSensor nos dice si estamos inclinando nuestro dispositivo en alguna dirección y la orientación del mismo. En concreto para nuestro siguiente programa vamos a utilizar el parámetro azimuth. Este parámetro nos devuelve un valor en grados que será igual a 0 cuando la parte superior de nuestro dispositivo apunte al norte magnético de la tierra.

Además vamos a usar una imagen (brujula.png) la cual vamos a ir girando usando el bloque "ImageSprite.Heading" según se mueva nuestra brújula. Cuando el valor del azimuth sea igual a 0, nuestra imagen estará recta. Cuando el azimuth cambie, giraremos la imagen según el valor del azimuth.

6 Vamos al Editor de bloques.

Lo primero que vamos a hacer es situar nuestra imagen en el centro de la pantalla.

7 Coge el evento Screen.Initialize.

8 Coge un procedimiento "call ImageSprite.MoveTo"

9 Recuerda que para encontrar el centro de nuestra pantalla (en este caso del canvas) tenemos que dividir el tamaño del canvas entre 2.

10 Crea dos bloque math /

11 En el primer espacio del primer bloque pon la variable Canvas.Width

12 En el segundo espacio un bloque numérico con el valor 2.

13 En el primer espacio del segundo bloque pon la variable Canvas.Height

14 En el segundo espacio por otro bloque numérico con el valor 2.

Como nuestra imagen tiene un tamaño de 128 x 128. Vamos a descontar la mitad (64) de cada coordenada, así centraremos perfectamente la imagen.

15 Crea otros dos bloque numéricos math -

15 En el primer espacio del primer bloque pon nuestro anterior bloque Canvas.Width/2

16 En el segundo espacio pon un bloque numérico con el valor 64

17 En el primer espacio del segundo bloque pon nuestro anterior bloque Canvas.Height/2

18 En el segundo espacio otro bloque numérico con el valor 64.

19 Ahora junta los dos bloques completos al bloque MoveTo.

Recuerda que la coordenada x corresponde al Canvas.Width y la coordenada y al Canvas.Height.

Tiene que quedarte así:

20 Coge ahora el evento OrientationSensor.OrientationChanged

Recuerda que este evento se activa cuando movemos el dispositivo.

21 Pon dentro un bloque "set ImageSprite.Heading" y en el espacio to la variable "value azimuth"

22 ¿Funciona?

En algunos dispositivos la lectura del Sensor de movimiento no es correcta hasta que instalas la aplicación en tu dispositivo. Tenlo en cuenta.

En la mayoría de los dispositivos tipo tableta (tablets) el borde de la pantalla que coincide con el norte magnético será el borde superior de la pantalla cuando se sujeta el dispositivo en horizontal. Puede que corresponda con el logo del aparato o con la situación de la cámara integrada, si tu dispositivo tiene una, pero puede no ser el caso en tu dispositivo. Para hacer coincidir el norte magnético de tu dispositivo con la orientación de nuestra aplicación y que esta no varíe conforme usamos nuestra brújula tenemos que fijar la propiedad ScreenOrientation.

 ¿Dónde estoy?

Vamos a hacer un programa para localizar nuestra posición en un mapa.

Para hacerlo usaremos el componente LocationSensor que nos dará las coordenadas de nuestra posición y con ellas haremos una llamada a Google Maps para que nos sitúe las coordenadas en un mapa. Usaremos dos formas de ver el mapa. En la primera usaremos el componente WebViewer que nos permite abrir una ventana del navegador en la pantalla de nuestra aplicación tal y como hemos visto antes. La otra será utilizando el componente ActivityStarter que nos permite abrir la aplicación de Google Maps directamente a pantalla completa.

1 Importante #1: Dependiendo de la configuración del idioma de tu dispositivo móvil o tablet, las coordenadas de un punto se describen usando comas p.ejem.(0,123 x 0,321) o usando puntos p.ejem. (0.123 x 0.321). Lo mismo ocurre con los separadores decimales, p.ejem. 1.300,20 en España sería 1,300.20 en Estados Unidos.

Esta diferencia puede darnos problemas en los siguientes ejercicios y es importante que entiendas por qué para que puedas arreglarlo fácilmente. Si nuestro dispositivo está configurado en el idioma Español, el componente LocationSensor de AppInventor nos va a devolver las coordenadas de nuestro dispositivo usando comas y estas coordenadas se las vamos a pasar a Google Maps para que nos muestre a qué punto del mapa corresponden esas coordenadas. El problema puede aparecer porque Google Maps espera las coordenadas usando puntos y se las estemos pasando como comas. Lamentablemente a día de hoy este problema puede o no aparecer en tu dispositivo dependiendo de la versión de Google Maps y de AppInventor que tengas así como la versión de Android y la configuración del idioma que uses.

Este problema es fácil de detectar porque al pasarlelas coordenadas de un punto desde tu programa a Google Maps te dirá que no es capaz de encontrarlas en el mapa. Casi con seguridad la razón es el problema de los puntos y las comas. La forma más sencilla de resolverlo es cambiar la configuración del idioma de tu dispositivo al Inglés o utilizar una función dentro de tu programa que sustituya las comas por puntos. Al final de este ejercicio vamos a ver cómo hacerlo en el caso de que lo necesites.

2 Importante #2: El servicio de localización por Wifide tu dispositivo intentará determinar tu localización en el caso de que estés conectado a una red Wifi donde no sea posible la localización por GPS, por ejemplo dentro de una casa o edificio. Este sistema de localización funciona porque el router wifi al que está conectado tu dispositivo contiene a su vez información de su localización geográfica directamente o a través del operador que proporcione el servicio de acceso a Internet. Sin embargo esta información no siempre está disponible y puede ocurrir que tu dispositivo intente encontrar esta información pero al no existir, no puede localizarte en el mapa.

Si te encuentras dentro de un edificio y estás conectado a una red Wifi y aún así tu dispositivo no es capaz de determinar tu posición puede que este sea el problema. Tenlo en cuenta para los siguientes ejercicios. Quizás tengas que probar en otra red Wifi o salir a la calle para probar tu aplicación.

3 Vamos con nuestro programa. Asegúrate de que tienes activado el servicio de localización de tu dispositivo y también el servicio de localización por Wifi (si tu dispositivo lo tiene).

4 Desde el Diseñador crea un nuevo proyecto y llámalo "donde_estoy"
5 Desactiva la propiedad Scrollable del componente Screen.
6 Coge dos etiquetas y pon una debajo de la otra.
7 A la primera llámala etiqueta_coordenadas y cambia el texto por: "sin coordenadas"
8 A la segunda llámala etiqueta_direccion y cambiar el texto por "sin dirección"
9 El componente LocationSensor que usaremos más adelante nos devolverá las coordenadas de nuestra posición actual que usaremos para actualizar estas etiquetas. Mientras este componente no nos de esta información mostraremos el mensaje "sin coordenadas".
10 Coge un componente HorizontalArragement y por dentro dos botones.
11 Al primero llámalo boton_mapa y cambia el texto por "ver mapa"
12 Al segundo llámalo boton_google y cambia el texto por "ver en Google"
13 Añade ahora un componente WebViewer desde "Not ready for prime time". Cambia sus propiedades Width y Height a "Fill parent". Si quieres puedes hacer este componente más grande para que el mapa sea más grande también.
14 Añade un componente LocationSensor.
15 Finalmente añade un componente ActivityStarter con las siguientes propiedades (puedes copiar y pegar el texto desde esta misma página):
16 Action - android.intent.action.VIEW
17 ActivityClass - com.google.android.maps.MapsActivity
18 ActivityPackage - com.google.android.apps.maps
19 Vamos al Editor de bloques.
Para poder comunicarnos con Google Maps tenemos que formar una cadena de texto con una URL.
20 Crea las siguientes variables de texto:
21 codigo_google = "http://www.google.com/maps/?q=" Esta variable la utilizamos para comunicarnos con Google Maps.
22 nivel_zoom = "&z=18". Esta variable nos permite cambiar el nivel del zoom de los mapas de Google.
23 Coge el evento LocationSensor.LocationChanged.
Este evento se activa cuando cambiamos la localización de nuestro dispositivo, es decir, cuando nos movemos. Por lo tanto, cada vez que se activa, nos dice las nuevas coordenadas de nuestra posición. Vamos a usar este evento para actualizar nuestras etiquetas de la pantalla.
24 Coge el bloque "set etiqueta_coordenadas.Text"
25 Crea una etiqueta de texto "text join" y haz que tenga cuatro espacios para rellenar.
26 En el primer espacio pon un bloque de texto con el texto: "Coordenadas actuales: "
27 En el segundo la variable latitude.
28 En el tercero pon un bloque de texto con el texto " / "
29 En el último espacio pon la variable longitude
30 Finalmente pega toda la cadena de texto a la etiqueta_coordenadas.
31 Coge el bloque "set etiqueta_direccion.Text" y pégale un bloque LocationSensor.CurrentAddress
32 Ahora coge el evento boton_mapa.Click
33 Pon dentro un procedimiento "call WebViewer.GoToUrl"
34 Ahora crea una etiqueta de texto "text join" y haz que tengas cuatro espacios a rellenar.
35 En el primer espacio pon la variable "global codigo_google"
36 En el segundo la variable LocationSensor.Latitude
37 En el tercero un bloque de texto con una coma ","
38 En el último espacio la variable LocationSensor.Longitude
Con esto estamos creando una cadena de texto que corresponde a la URL que Google necesita para poder localizar en el mapa nuestras coordenadas, precisamente porque dentro de la cadena de texto estamos pasando las coordenadas.
39 Coge ahora el evento boton_google.Click
En este caso vamos a llamar a la aplicación Google Maps usando el componente ActivityStarter.
40 Coge el bloque "set ActivityStarter.DataUri"
41 Ahora crea una etiqueta de texto "text join" y haz que tengas cuatro espacios a rellenar.
42 En el primer espacio pon la variable "global codigo_google"
43 En el segundo la variable LocationSensor.Latitude
44 En el tercero la variable LocationSensor.Longitude
45 En el último espacio la variable nivel_zoom
46 Une la cadena de texto al bloque ActivityStarter.DataUri
47 Finalmente coge un procedimiento "call ActivityStarter.StartActivity"
Tu programa debe de quedar así:

Es posible que no tengamos activada la opción de localización de nuestro dispositivo. Para asegurarnos de que nuestro programa funciona correctamente deberíamos de comprobar dentro de los evento .Click que tenemos las coordenadas guardadas. En los siguientes ejemplos veremos cómo hacerlo.

48 Guarda este programa porque lo vamos a usar en el siguiente ejemplo.

El problema de los puntos y comas en las coordenadas

Como hemos visto al principio si tenemos nuestro dispositivo configurado en el idioma Español, AppInventor nos devolverá las coordenadas usando comas, p.ejem. (40,1234 x 30,132) y ya hemos visto que al pasar estas coordenadas usando comas a Google Maps nos dará problemas. Una forma de solucionar esto sin tener que cambiar la configuración del idioma de nuestro dispositivo consiste en cambiar las comas por puntos dentro de nuestro propio programa antes de pasárselas a Google Maps.

La forma más sencilla de hacerlo es crear una pequeña función que haga el trabajo por nosotros. Podemos llamar a esta función quitar_comas. A esta función le pasamos como argumento la coordenada que queremos cambiar y dentro de la función usamos el bloque de texto replace all. Este bloque busca un carácter (segment) dentro del texto que le pasemos (text) y lo sustituye por otro (replacement).

Una vez tengamos nuestra función quitar_comas hecha sólo nos queda usarla cada vez que tengamos que usar una coordenada, por ejemplo al llamar a Google Maps. Allí donde antes usábamos el bloque LocationSensor1.Latitude o LocationSensor.Longitude ahora usaremos los bloques call quitar_comas(LocationSensor.Latitude) o call quitar_comas(LocationSensor.Longitude). Fíjate cómo lo hemos usado en nuestro programa anterior:

 Buscando direcciones

Ahora vamos a aprender a localizar un punto en un mapa usando la dirección en lugar de las coordenadas.
1 Recupera el programa que hemos hecho antes "donde_estoy" y guárdalo de nuevo con la  opción "Save As" (guardar como) pero cambiando el nombre a: "buscando_direcciones"
2 Desde el Diseñador vamos a añadir un componente textbox debajo de la etiqueta etiqueta_direccion
3 Cambia el nombre del textbox por "nueva_direccion" y la propiedad Hint por "buscar dirección"
4 Cambia también el tamaño del font a 10 y la propiedad Height a 30. Así dejamos más espacio para el mapa de abajo.
5 Vamos el Editor de bloques.
6 En el evento boton_mapa.Click nos vamos a quedar únicamente con un bloque text join que tenga en el primer espacio la variable codigo_google y en el segundo espacio nuestra variable nueva_direccion.Text. Puedes borrar el segundo y tercer bloque text join que tenemos ahora y conservar la primera parte. Así:

7 En el evento boton_buscar_google.Click vamos a hacer algo parecido. Tenemos que quedarnos con dos bloques text join. En el primer espacio tendremos la variable "global codigo_google", en el segundo nueva_direccion.Text y en el último la variable "global nivel_zoom". Así:

Lo que hemos hecho es sustituir las variables de las coordenadas por la dirección que haya puesto el usuario en el textbox.

 Guardando Waypoints

Vamos a aprender a guardar un punto en el mapa para poder recuperarlo más tarde.

Un waypoint es un conjunto de coordenadas que identifican un punto en un mapa o espacio físico. Para localizar un punto sobre la superficie terrestre se usan los valores de latitud y longitud. Para la navegación aérea y otras aplicaciones también se usa el valor altitud.

El programa que vamos a hacer ahora nos permite guardar waypoints (coordenadas) de nuestra posición actual en una base de datos con el nombre que queramos. Podemos usar esta aplicación si vamos andando por la calle y encontramos algo interesante que queremos guardar para poder volver más tarde usando una ruta hasta ese punto.

1 Desde el Diseñador crea un nuevo proyecto y llámalo "waypoints" 

2 Desactiva la propiedad Scrollable del componente Screen.

3 Coge dos etiquetas y pon una debajo de la otra.

4 A la primera llámala etiqueta_coordenadas y cambia el texto por: "sin coordenadas"

5 A la segunda llámala etiqueta_dirección y cambia el texto por "sin dirección"

El componente LocationSensor que usaremos más adelante nos devolverá las coordenadas de nuestra posición actual que usaremos para actualizar estar etiquetas. Mientras este componente no nos de esta información mostraremos el mensaje "sin coordenadas"-

6 Coge un componente HorizontalArrangement y pon dentro, en este orden, los siguientes componentes:

7Un botón. Llámalo boton_posición_actual y cambia el texto por "Posición actual"

8 Otro botón. Llámalo boton_guardar. Cambia el texto por "Guardar".

9 Un componente ListPicker. Llámalo boton_mis_waypoints. Cambia el texto por "Mis Waypoints"

10 Cambia el tamaño de los fonts a 10 y la propiedad Height a 30 de todos estos componentes para que quepa el mapa en la pantalla.

11 Añade otro componente HorizontalArragement debajo del anterior y cambia su nombre a menu_guardar.

12 Mete dentro de este nuevo componente HorizontalArragement un textbox y un botón a la derecha.

13 Al textbox llámalo textbox_nombre_waypoint y en la propiedad Hint escribe "nombre del waypoint"

14 Al botón llámalo boton_guardar_waypoint y en el texto escribe: "Guardar"

15 Cambia el tamaño del font y la propiedad Height de ambos componentes como antes.

16 Y cambia la propiedad Visible del componente menu_guardar a Hidden (oculto)

17 Queremos que este menú sólo aparezca cuando el usuario ha pulsado el botón de guardar. Así ahorramos espacio en la pantalla.

18 Añade ahora un componente WebViewer. Cambia sus propiedades Width y Height a "Fill parent". Si quieres puedes hacer este componente más grande para que el mapa sea más grande también.

19 Añade un componente LocationSensor.

20 Añade un componente TinyDB.

21 Finalmente añade un componente ActivityStarter con las siguientes propiedades (puedes copiar y pegar el texto desde esta misma página):

22 Action - android.intent.action.VIEW

23 ActivityClass - com.google.android.maps.MapsActivity

24 ActivityPackage - com.google.android.apps.maps

El diseño final tiene que quedar así:

El funcionamiento del programa será el siguiente:

Al pulsar el botón "Posición actual" nuestro programa nos dará nuestras coordenadas actuales que podremos localizar en el mapa de debajo o en la aplicación Google Maps pulsando el botón "Google".

Si pulsamos el botón "Guardar" aparecerá un campo de texto para que las coordenadas actuales se guarden en la base de datos con el nombre que queramos.

Al pulsar el botón "Mis Waypoints" aparecerá una lista con las localizaciones que hayamos guardado con anterioridad. Al seleccionar una de ellas se actualizará el mapa o pulsando el botón "Google" se abrirá la aplicación de mapas de Google con la localización guardada. Con las coordenadas guardadas podemos iniciar una ruta hasta esa posición desde nuestra posición actual.

25 Vamos al Editor de bloques

26 Vamos a empezar definiendo todas las variables que vamos a usar en nuestro programa.

27 codigo_google - "http://www.google.com/maps/?q=" Esta variable la utilizamos para comunicarnos con Google Maps.

28 nivel_zoom - "&z=18". Esta variable nos permite cambiar el nivel del zoom de los mapas de Google.

29 lista_coordenadas - make a list. Esta es la lista donde vamos a guardar las coordenadas de cada localización (waypoint) que guardemos.

30 lista_waypoints - make a list. En esta lista guardaremos los nombres de los waypoints.

31 coordenadas_actuales - "". Variable de texto vacía donde guardaremos las coordenadas actuales.

32 localizado - false. Esta variable booleana nos dirá si tenemos ya las coordenadas de nuestra posición actual o todavía no. Recuerda que el sensor de localización de posición (LocationSensor / GPS) tarda un tiempo en determinar nuestra posición actual. Esta variable nos dirá si tenemos ya la información.

33 Coge el evento Screen.Initialize.

Recuerda que el primer paso es siempre recuperar la información que tenemos en la base de datos tal y como hemos aprendido antes. De esta forma recuperamos los waypoints que tuviésemos guardados.

Nuestra base de datos contendrá dos listas. lista_waypoints con el tag "waypoints" y lista_coordenadas con el tag "coordenadas". La lista_waypoints contendrá los nombres de los waypoints y la lista_coordenadas las coordenadas. Tal y como hemos aprendido antes usaremos el índice para relacionar el nombre del waypoint con las coordenadas correspondientes a ese waypoint.

Como siempre también nos vamos a asegurar de que existen datos antes de asignarlos a la variable correspondiente de lo contrario se produciría un error en nuestro programa.

34 Coge un bloque de control if then-do.

35 En el espacio test coloca un bloque lógico not, un bloque de texto "is text empty?" y un procedimiento "call TinyDB.GetValue" con el tag "waypoints" así:

Estamos pidiendo a la base de datos algún dato con el tag "waypoints". Si nos devuelve algún dato (no está vacía la respuesta) entonces podemos continuar porque significa que tenemos algún waypoint guardado.

En el espacio then-do recuperamos los datos de las dos listas y se las asignamos a las variables que tenemos preparadas.

36 Coge un bloque "set global lista_waypoints" y pégale un procedimiento "call TinyDB.GetValue" con el tag "waypoints".

De esta forma cogemos de la base de datos el valor que corresponde con el tag "waypoints" y como se supone que es una lista, se la asignamos a la variable lista_waypoints.

Ahora hacemos lo mismo con la lista de coordenadas.

37 Coge un bloque "set global lista_coordenadas" y pégale un procedimiento "call TinyDB.GetValue" con el tag "coordenadas".

Ya tenemos las dos listas con los datos que hemos obtenido de la base de datos. Si no hubiésemos encontrado nada, las listas estarían vacías.

Vamos con el botón para mostrar en el mapa nuestra posición actual.

38 Coge el evento boton_posicion_actual.Click

Primero comprobamos que tenemos las coordenadas de nuestra posición actual.

39 Coge un bloque de control if then.

En el espacio if comprobamos la variable localizado.

40 Pega la variable "global localizado" en el espacio if

Si la variable es verdadera (la condición se cumple) significa que tenemos las coordenadas.

41 Coge un bloque "call WebViewer.GoToUrl" y ponlo dentro del espacio then.

42 Crea un bloque de text join y pégalo al bloque anterior.

43 En el primer espacio pon la variable "global codigo_google"

44 En el segundo espacio pon la variable "global coordenadas_actuales"

Este bloque le pide al visor web que nos muestre la URL que le estamos pasando y que contiene las coordenadas de la posición actual.

45 Coge el evento LocationSensor.LocationChanged.

Este evento se activa cuando cambiamos la localización de nuestro dispositivo, es decir, cuando nos movemos. Por lo tanto, cada vez que se activa, nos dice las nuevas coordenadas de nuestra posición. Vamos a usar este evento para actualizar nuestra variable coordenadas_actuales y mostrar la información en las etiquetas de la pantalla.

46 Coge el bloque "set global coordenadas_actuales"

47 Crea un bloque "join" y pégalo al bloque anterior.

48 Pega al bloque "join" la variable LocationSensor.Latitude

49 En el segundo espacio text pega un bloque de texto con una coma, así ","

50 En el siguiente espacio text pega la variable LocationSensor.Longitude

Ahora nuestra variable coordenadas_actuales contendrá un valor, p. eje.: "40.343421,-3.334344"

Vamos con las etiquetas.

51 Coge el bloque "set etiqueta_coordenadas.Text" y pégale un bloque "text join".

52 En el primer espacio pon un bloque de texto que diga: "Coordenadas actuales: "

53 En el segundo pon nuestra variable coordenadas_actuales

54 Coge el bloque "set etiqueta_direccion.Text" y pégale un bloque LocationSensor.CurrentAddress 

Este bloque busca la dirección que corresponde a las coordenadas actuales.

Por último, como tenemos las coordenadas de la posición actual, vamos a cambiar la variable lógica localizado.

55 Pon un bloque "set global localizado" y pégale un bloque lógico true.

56 Ahora que tenemos las coordenadas de nuestra posición actual vamos a aprender a guardarlas.

57 Coge el evento boton_guardar.Click.

58 Vamos a comprobar si realmente tenemos las coordenadas.

59 Coge un bloque de control if then

60 En el espacio if comprobamos la variable localizado.

60 Pega la variable "global localizado" en el espacio if

Si tenemos las coordenadas primero limpiamos el textbox y mostramos el menú para guardar.

61 Coge un bloque "set textbox_nombre_waypoint" y pégale un bloque de texto vacío: "".

62 Coge un bloque "set menu_guardar.Visible" y pégale un bloque lógico true. Así mostramos el menú para guardar con el textbox y el botón para guardar.

Recuerda que este menú corresponde con el componente HorizontalArragement menu_guardar que contiene a su vez el textbox_nombre_waypoint y el botón boton_guardar_waypoint. Cuando el usuario haya puesto un nombre al waypoint pulsará el botón boton_guardar_waypoint así que necesitamos controlar este evento.

63 Coge el evento boton_guardar_waypoint.Click

En este punto tenemos dos datos. Por una parte tenemos las coordenadas actuales en la variable coordenadas_actuales y por otra parte el nombre que queremos usar en la variable textbox_nombre_waypoint.Text. Vamos a añadir cada dato a su lista correspondiente.

64 Coge dos bloques "add items to list" y ponlos dentro.

65 En el espacio list del primer bloque pon nuestra lista "global lista_waypoints" 

66 En el espacio item pon un bloque "textbox_nombre_waypoint.Text

Con esto añadimos el nombre a la lista de waypoints.

67 En el espacio list del segundo bloque pon nuestra lista "global lista_coordenadas"

68 En el espacio item pon la variable "global coordenadas_actuales"

69 Con esto añadimos las coordenadas a nuestra lista.

Ahora que hemos actualizado las listas con los nuevos datos sólo tenemos que guardarlas en la base de datos.

70 Coge dos procedimientos "call TinyDB.StoreValue" y ponlos debajo.

71 En el espacio tag del primer bloque por un bloque de texto con el texto: "waypoints"

72 En el espacio valueToStore pon nuestra lista "global lista_waypoints"

73 En el espacio tag del segundo bloque por un bloque de texto con el texto: "coordenadas"

74 En el espacio valueToStore pon nuestra lista "global lista_coordenadas"

Con esto guardamos ambas listas en la base de datos usando el tag correspondiente a cada lista.

Sólo queda ocultar el menú.

75 Coge un bloque "set menu_guardar.Visible" y pégale un bloque lógico false.

Vamos a recuperar waypoints para mostrarlos en el mapa.

76 Coge el evento boton_mis_waypoints.BeforePicking

77 Dentro pon un bloque "set boton_mis_waypoints.Elements" y pégale la variable "global lista_waypoints"

78 Con esto el componente ListPicker mostrará los nombres de los waypoints que tengamos en nuestra lista.

79 Coge ahora un evento boton_mis_waypoints.AfterPicking

80 Pon dentro un procedimiento "call WebViewer.GoToUrl"

81 Pega al bloque anterior un bloque de texto join.

82 En el primer espacio pon la variable "global codigo_google"

83 En el segundo espacio pon un bloque "select list item"

84 En el espacio list pon la variable "global lista_coordenadas"

85 En el espacio index pon la variable boton_mis_waypoints.SelectionIndex

Al hacer esto estamos seleccionando de la lista de coordenadas aquellas cuyo índice coincide con el nombre que ha seleccionado el usuario de la lista de waypoints.

En este caso estamos mostrando las coordenadas en el mapa dentro del componente WebViewer. Para mostrar las coordenadas en la aplicación de Google Maps en lugar de usar este bloque "WebViewer.GoToUrl" tendríamos que usar los dos siguientes bloques:

Un bloque "set ActivityStarter.DataUri" más la misma cadena de texto que hemos usado antes.

Y un bloque ActivityStarter.StartActivity

Tu programa completo debe de quedar así:

A esta aplicación sólo le faltaría un botón para borrar waypoints que ya no necesitamos. ¿Te atreves a hacerlo? Una pista: necesitamos otro componente ListPicker.

 Rutas

Vamos a completar nuestro programa de waypoints para que podamos mostrar la ruta desde nuestra posición actual hasta el waypoint que queramos de los que tenemos guardados.

1 Recupera el programa "waypoints" y grábalo (Save as) con el nombre "rutas"

2 Desde el Diseñador vamos a añadir un componente ListPicker dentro del componente HorizontalArragement a la derecha del botón Mis Waypoints.

3 A este ListPicker le vamos a llamar boton_rutas

4 Cambia el texto del componente por: "Rutas" y ajusta su tamaño.

5 Vamos al Editor de bloques.

Lo primero que vamos a hacer es definir un par de variables más que vamos a necesitar para informar a Google Maps de que queremos que nos muestre una ruta en lugar de una posición en el mapa.

6 Crea la variable codigo_google_ruta_origen con un bloque de texto con el texto: "http://maps.google.com/ maps?saddr="

Esta variable contiene la URL que necesita Google Maps además de las coordenadas de origen de la ruta que queremos. En nuestro caso contendrá nuestra posición actual desde la que comenzaramos la ruta hasta nuestro waypoint.

 7 Crea otra variable llamada codigo_google_ruta_destino con un bloque de texto con el texto: "&daddr="

Esta variable contendrá las coordenadas del destino de la ruta que queremos. Juntando ambos bloques construímos la URL definitiva que necesitamos pasar a Google Maps.

8 Ahora coge el evento boton_rutas.BeforePicking

Necesitamos tener la coordenadas actuales para poder hacer la ruta, así que necesitamos asegurarnos primero de que la variable localizado es verdadera.

9 Coge un bloque de control if then y en el campo test pon la variable localizado.

10 Ahora dentro del evento pon un bloque "set boton_rutas.Elements" y pégale la variable "global lista_waypoints"

11 Coge el evento boton_rutas.AfterPicking y copia dentro los bloques del evento boton_mis_waypoints.AfterPicking.

La URL que tenemos que montar consiste en los bloques codigo_google_ruta_origen + coordenadas_actuales + codigo_google_rutas_destino + coordenadas del destino. Este último dato lo sacamos de la lista de coordenadas uando el índice de la lista de waypoints, tal y como hemos hecho antes.

12 Crea un bloque de texto join y haz que tenga cuatro espacios.

13 En el primer espacio pon la variable codigo_google_ruta_origen

14 En el segundo la variable coordenadas_actuales.

15 En el tercero la variable codigo_google_ruta_destino.

16 En el último coge el bloque "select list item" que teníamos antes.

17 Pruébalo!

Recuerda que puedes usar el componente ActivityStarter para abrir Google Maps tal y como hemos aprendido antes.