App Inventor

tecnoloxia.org

Onde está o meu coche?

coche

Obxectivo

Aparcaches tan preto do estadio como puideches, pero despois de terminar o concerto, non tes nin a menor idea de onde está o teu coche.

Onde está o meu coche? Grazas a esta app, podes facer clic nun botón cando aparcas o coche e, co sensor de localización do dispositivo, a app rexistra as coordenadas e a dirección onde o deixaches. Máis tarde, cando volvas abrir a app, esta indicarache  o camiño desde a túa posición actual ata o coche.

screen1ondeestaomeucocheQue aprenderás?

Trataremos os seguintes conceptos e compoñentes:

  • Usaremos o compoñente Sensor de Ubicación (se atopa en Paleta > Sensores) para determinar a localización exacta do dispositivo Android.
  • Gardaremos os datos de localización na base de datos do dispositivo, de xeito que podamos volver usalos máis tarde, mesmo se o usuario pecha a app. Para iso, usaremos o compoñente TinyDB (se atopa en Paleta > Almacenamiento).
  • O compoñente ActivityStarter (se atopa en Paleta > Conectividad) permitiranos guiar ao usuario desde a súa localización actual ata a localización que previamente foi rexistrada na nosa app.

Deseño de compoñentes

Abre un proxecto novo e asígnalle o nome OndeEstaOMeuCoche. Fai clic no menú Conectar e configura o teu dispositivo (ou emulador) para poder facer probas en vivo.

Unha vez conectado, desde a xanela do Diseñador, no panel de propiedades, cambia o título da Screen1 por “Onde está o meu coche?

logoondeestaomeucocheColoca un logo para a túa app, por exemplo: LogoOndeEstaOMeuCoche.png (Imaxe de Openclipart.org  – Creative Commons Zero 1.0 License.)

A nosa app dispón dos seguintes compoñentes:

desenoondeestaomeucoche

 

  1. Unha Etiqueta1 co textoPosición actual“,  activamos a súa propiedade negrita.
  2. Un compoñente DisposiciónHorizontal1 que utilizaremos para distribuír no seu interior os datos sobre a posición actual. Dentro estarán as dúas etiquetas seguintes.
    • Unha Etiqueta2 co textoDirección:  ” (deixaremos un espazo en branco despois dos dous puntos para separar o texto desta etiqueta do que aparecerá a continuación).
    • Outra Etiqueta, chamada EtDirActual, onde mostraremos a dirección onde se atopa actualmente o dispositivo móbil despois de que se conseguira efectuar unha lectura correcta co sensor de localización. Mentres, mostrará o textoDescoñecida, (escríbeo na propiedade Texto desta etiqueta).
  3. Outra DisposiciónHorizontal2 que nos servirá para mostrar os datos do GPS. Dentro estarán as etiquetas con nome: Etiqueta3, EtLatitudeActual, Etiqueta4, EtLongitudeActual.
    • Etiqueta3 co textoGPS: “ (deixa un espazo en branco detrás dos dous puntos).
    • Outra Etiqueta chamada EtLatitudeActual para mostrar o valor da latitude. Inicialmente asignámoslle á súa propiedade Texto o valor “0”.
    • Etiqueta4 co texto cun espazo en branco, seguido dunha coma e seguido doutro espazo en branco. Usarémola para separar a latitude da lonxitude.
    • Outra Etiqueta máis chamada EtLonxitudeActual para mostrar o valor de coordenada lonxitude do GPS. Inicialmente asignámoslle na súa propiedade Texto o valor “0.0″ .
  4. Un Botón co textoGardar posición actual” co nome BtGardarPosActual. En  propiedades desactiva o recadro Habilitado.
  5. Unha nova Etiqueta5 co textoÚltimo lugar gardado e que ten activada a negrita.
  6. Outro compoñente DisposiciónHorizontal3. Dúas Etiquetas dentro seguindo o mesmo método que antes:
    • Etiqueta6 co textoDirección:  “
    • A segunda, chamada EtDirGardada co texto “Descoñecida“.
  7. Un último compoñente DisposiciónHorizontal4. Catro Etiquetas no seu interior:
    • Etiqueta7, co textoGPS: ” (deixa un espazo en branco detrás dos dous puntos).
    • Renoméaos a segunda, EtLatitudeGardada, co texto0“.
    • Etiqueta9, co texto cun espazo en branco, seguido dunha coma e seguido doutro espazo en branco.
    • A cuarta, co nome EtLonxitudeGardada, porque lles daremos valores adecuados máis tarde dende a xanela de edición de bloques. Asígnalles o texto “0.0″.
  8. Un segundo Botón que chamamos BtMostrarMapa, co textoMostrar camiño ata a posición gardada”  En  propiedades desactiva o recadro Habilitado.
  9. Un compoñente TinyDB1 (se atopa en Paleta > Almacenamiento) que permitirá gardar datos da nosa app de forma permanente no dispositivo.
  10. Un compoñente SensorDeUbicación1 (se atopa en Paleta > Sensores) para poder acceder ao GPS do noso móbil.
  11. propiedadesactivitystarter_ondeestaomeucocheUn compoñente ActivityStarter1 (atópase en Paleta > Conectividad) que permitirá mostrar a ruta dende a posición actual ata a posición gardada con Google Maps. Tes que axustar as seguintes propiedades deste compoñente:
    • Acción: android.intent.action.VIEW
    • Clase: com.google.android.maps.MapsActivity
    • Paquete: com.google.android.apps.maps

Lembra que o compoñente ActivityStarter permite que nosa app poida abrir calquera outra app instalada no dispositivo. Podes obter máis información deste compoñente aquí. (en inglés).

Despois de deseñar a interface comprobarías que moitos compoñentes non os renomeas, pero outros si. A razón fundamental é que é útil nomear cun nome significativo a aqueles compoñentes que logo usaremos dende os bloques, pero os demais é indiferente o nome que teñan, así que, podémoslles deixar o nome automático que lles asigna App Inventor.

Visualizar a posición actual

Co GPS do noso dispositivo activado, cada vez que cambia a localización do dispositivo execútase o evento cuandoSensorDeUbicación1.CambioenUbicación e aparece a ubicación actual na pantalla nas etiquetas debaixo de Posición Actual.

En ocasións, a primeira lectura tardará uns poucos segundos, e noutras ocasións é posible que non consigas realizar ningunha lectura se as liñas de visión cos satélites GPS están bloqueadas (e dependendo da configuración do dispositivo).

Esta sería a programación en bloques para mostrar os datos da posición actual:

bloquesubicacionactual
Unha das cousas importantes que fan estes bloques, ademais de mostrar os datos na interface da app, é activar o botón BtGardarPosActual, e conségueo cambiando o valor da súa propiedade Deshabilitado ao valor Cierto. Deste xeito, o usuario xa poderá pulsar este botón se desexa gardar a súa localización actual para que nosa app a lembre. O bloque Cierto pódelo atopar na categoría Lógica.

Proba a túa app

Nesta app non imos poder realizar probas en vivo, nin tampouco usando o emulador posto que este carece de GPS. Por iso, se queres ir probando a túa app ao longo do tema terás que empaquetala, usando o menú Generar/ App (generar código QR para el archivo .apk), descargala ao teu dispositivo e instalala.

Antes de executar a app, asegúrate que tes a función de GPS do teu dispositivo activada, comprobarás entón que se mostran os datos concretos nas etiquetas correspondentes á localización actual e o botón “Gardar posición actual” activarase.

Se non se producise ningunha lectura, comproba que a función GPS estea activada correctamente no teu dispositivo e, se é necesario, sal dar un paseo pola rúa por se se tratase dun problema de cobertura co sinal dos satélites GPS.

Gardar a posición actual

Se o usuario toca o botón BtGuardarPosActual e este está activado porque o dispositivo realizou unha lectura correcta da súa localización, entón teremos que mostrar a información da localización gardada nas etiquetas correspondentes da interface, debaixo do Último lugar gardado como facemos aquí:

guardarposicionactual
Ademais, tamén activamos o botón BtMostrarMapa cambiando a súa propiedade Deshabilitado ao valor Cierto. Agora, a app xa podería mostrar o camiño dende a súa localización actual ata a posición gardada.

Aínda que, como é lóxico, se o usuario pulsa primeiro o botón de gardar e, case ao instante, o botón de mostrar o camiño ata a posición gardada entón o mapa que aparecerá non mostrará información significativa. En realidade, o usuario debería gardar a posición actual, moverse e dirixirse a outro lugar para, despois, pulsar o botón de mostrar o camiño.

Proba a túa app

Empaqueta novamente a túa app, descárgaa e instálaa no teu dispositivo. Proba o botón BtGuardarPosActual. Despois de pulsalo, aparecen os datos de localización nas etiquetas correspondentes debaixo de Último lugar gardado.

Mostrar o camiño ata a posición gardada

Se o usuario toca o botón BtMostrarCamiño, a nosa app debe abrir Google Maps e mostrar a ruta desde a posición actual do dispositivo ata a posición que ten almacenada.

O compoñente ActivityStarter pode abrir calquera app dispoñible no dispositivo, incluído Google Maps. Lembra que debes configurar algunhas propiedades de ActivityStarter1 adecuadamente para que funcione, se aínda non o fixeches, volve ao apartado de Deseño de compoñentes deste tema onde atoparás os valores necesarios e as propiedades que tes que axustar.

Google Maps mostra directamente a ruta dende un lugar a outro cando realizamos unha chamada usando unha dirección da Internet como a seguinte:

http://maps.google.com/maps?saddr=Posición Actual  &daddr=  Posición Gardada

Por exemplo,

http://maps.google.com/maps?saddr=37.82557,-122.47898&daddr=37.81079,-122.47710

Proba a escribir a dirección anterior nun navegador e comprobarás como che indica o camiño dun punto A, que se identifica por saddr (a dirección orixe) ata un punto B, que se identifica por daddr (dirección de destino).

Observa como o punto orixe (punto A) identifícase pola súa latitude e lonxitude(nesa orde: 37.82557,-122.47898) separadas por unha coma. De forma idéntica sucede co punto de destino (punto B: 37.81079,-122.47710).

En resumo, na nosa app imos ter que construír a dirección da Internet que necesitamos para chamar a Google Maps usando os valores de lonxitude e latitude da posición actual para a dirección orixe (saddr) e os correspondentes valores de lonxitude e latitude gardada para a dirección de destino (daddr).

mostrarcaminohaposicionguardada

Existe un bloque Unir que facilita a creación de frases a partir de diferentes fragmentos, pódelo atopar na categoría Texto.

Cando o usuario toque o botón BtMostrarMapa faremos unha chamada a ActivityStarter1.IniciarActividad. Usamos o bloque Unir para unir distintas frases e construír a dirección da internet necesaria.

Así, a dirección da internet está formada pola chamada a Google Maps:

  • http://maps.google.com/maps?saddr=
  • Seguida da latitude do punto onde nos atopamos actualmente (EtLatitudeActual.Texto)
  • Seguida dunha coma (” , “)
  • Seguida da lonxitude do punto actual (EtLonxitudeActual.Texto)
  • Seguida do texto &daddr= que indica a dirección destino
  • Seguida da latitude (EtLatitudeGardada.Texto)
  • Seguida dunha coma (” , “)
  • Seguida da lonxitude (EtLonxitudeGardada.Texto) da posición destino (a posición gardada)

Proba a túa app

Empaqueta novamente  a túa app, descárgaa e instálaa no teu dispositivo. Proba o botón BtGardarPosActual. Despois de pulsalo, sal a dar un paseo. Máis tarde, toca o botón BtMostrarMapa. Podes ver no mapa o camiño para volver a posición inicial. Despois de analizar o mapa, pulsa o botón atrás do teu móbil, volve aparecer a túa app en pantalla.

Gardar a posición lembrada de forma permanente

Nestes momentos temos unha app totalmente funcional que lembra unha localización e, máis tarde, traza un mapa de volta a esta posición. Con todo, se o usuario garda unha posición e despois pecha a app, os datos da posición que almacenou  non estarán dispoñibles cando volva abrir a app.

Obviamente, a app deberá almacenar de forma permanente os datos para que o usuario, cando o desexe, poida volver á app e solicitar o camiño de regreso ata o punto que gardara.

Para gardar os datos de forma permanente no dispositivo necesitamos o compoñente chamado TinyDB, e para ese efecto, xa creamos un compoñente deste tipo ao principio deste tema. Así pois, teremos que modificar a nosa app para que:

  1. Cando o usuario toque o botón BtGuardarPosActual se garden os datos da posición gardada na base de datos do dispositivo ademais mostralos nas etiquetas correspondentes da app.
  2. Cando se abra a app debemos cargar os datos da posición almacenada na base de datos do dispositivo (se existen, claro), e mostralos nas etiquetas correspondentes.

Primeiro, empezaremos por modificar o evento cuando BtGardarPosActual.Clic:

guardarposicionactual
Nova versión do evento que garda a posición actual:

guardarposicionactual_version_nueva
Os cambios que introducimos son necesarios para gardar os datos da posición gardada na base de datos do dispositivo. Concretamente, engadimos  tres chamadas a llamar TinyDB.GuardarValor:

  1. Usamos unha etiqueta chamada address para gardar a dirección.
  2. Coa etiqueta lat, gardamos o valor da latitude.
  3. E coa etiqueta long, gardamos a lonxitude.

Recuperar os datos gardados ao abrir a app

Agora, quédanos recuperar os datos almacenados na base de datos do dispositivo cando se abre a app pero, ten en conta que é posible que non exista ningún dato respecto diso se é a primeira vez que o usuario utiliza a nosa app.

Observa os bloques seguintes e comprobarás que, despois de facer unha primeira lectura para a etiqueta address realizamos unha comprobación moi sinxela baseada en comprobar a lonxitude dos datos que recuperamos e se existen datos (cando  lonxitude dos mesmos é maior a 0) entón continuamos coa lectura dos datos restantes de latitude e lonxitude (lat e long respectivamente).

recuperardatosguardados

Para entender este código de bloques, imaxina que un usuario abre a app por primeira vez no seu dispositivo, grava datos da súa localización, pecha a app e, máis tarde, volve abrir.

A primeira vez que o usuario abre a app non existen datos almacenados no dispositivo, de forma que non se mostrará ningún dato nas etiquetas da posición gardada nin tampouco se habilitará o botón BtMostrarMapa.

A segunda vez que o usuario abre a app, como gardara a súa posición anteriormente, cargaranse os datos correspondentes e mostraranse tamén nas etiquetas.

Nos bloques efectúanse tres chamadas a llamar.TinyDB1.ObtenerValor:

  • Unha para recuperar a dirección
  • Outra para recuperar a latitude
  • A terceira e última para recuperar a lonxitude

Cada un destes datos móstrase na etiqueta correspondente e, ao final, actívase o botón BtMostrarMapa para que o usuario poida usar  un mapa dende a súa posición actual ata a posición gardada.

Proba a túa app

Empaqueta novamentea túa app, descárgaa e instálaa no teu dispositivo. Proba o botón BtGardarPosActual. Despois de pulsalo, pecha a app e sal a dar un paseo. Máis tarde, volve abrir a app. Comproba que recuperáronse os datos da posición gardada.

Programación da aplicación completa Onde está o meu coche:

programacionondeestaomeucoche

Reto:

Crea unha app que vaia gardando a túa posición alá onde vaias. A app deberá gardar as distintas localizacións nunha lista, pero só rexistrará unha posición nova se se produciu un cambio significativo, ou se transcorreu  un certo tempo, ten en conta que se pode producir unha nova lectura do GPS mesmo despois dun leve movemento do dispositivo.