Tutorial 5: Talk to me

  1. Portada
  2. Tutorial 5: Talk to me

Objetivo:

El objetivo de este tutorial es mostrar cómo el comportamiento de la aplicación puede ser lanzado desde diferentes tipos de eventos. Cuando un botón sea pulsado, pase una cantidad de segundos determinada o se agite el dispositivo el móvil empezará a hablar.

Pasos a Seguir

1. Acceso al Entorno
  • Abrir el entorno de desarrollo App Inventor.
    1. Accede a la siguiente dirección: https://appinventor.mit.edu/
    2. Pulsa el botón create app!
    3. Selecciona una cuenta de Google
    4. Acepta los términos y condiciones (solo la primera vez que se accede a la plataforma)

↧

2. Creación de un proyecto nuevo
  • Pulsa el botón “Start new proyect” y pon de nombre al proyecto "Talk_to_me"

↧

3. Replica la interfaz de usuario
  • Arrastra los componentes desde el lateral izquierdo para replicar la interfaz de usuario.
botón del monitor serial
Componente visual campo de texto y botón.

↧

4. Añada voz a la aplicación
  • Arrastra el componente no visual "TextToSpeech" a la interfaz de usuario.
botón del monitor serial
Componente no visual TextToSpeech.

↧

5. Defina la lógica de hablar tras pulsar el botón
  • Defina la siguiente lógica cuando sea pulsado el botón.
botón del monitor serial
Lógica cuando se pulsa el botón.

↧

6. Añada el acelerómetro a la aplicación
  • Arrastre el sensor de acelerómetro desde el lateral izquierdo a la aplicación
botón del monitor serial
Inclusión del sensor de acelerómetro en la aplicación.

↧

7. Implementar la lógica cuando el móvil es agitado
  • Implemente una lógica que se ejecute cuando el sensor detecta que el móvil está siendo agitado. La lógica deberá hacer que el móvil se queje.
botón del monitor serial
Lógica que se ejecuta cuando el móvil es agitado.

↧

8. Compilación de la aplicación e instalación en el dispositivo
  • Pulse el botón de Construir "Build" y seleccione proporcionar código QR para la aplicación QR
  • Lea el código QR con su dispositivo Android y descargue la aplicación
  • Si es la primera vez que instala una aplicación desde App Inventor es necesario permitir al dispositivo móvil instalar aplicaciones de origen desconocido (es decir, aplicaciones fuera del Google Play Store). Para ello:
    • Si durante el primer intento de instalación le proporcione un acceso directo a Ajustes-> Seguridad seleccione instalar aplicaciones de origen desconocido
    • Si tan solo le deniega la posibilida de instalar. Siga los siguientes pasos:
      1. Vaya a Ajustes de su dispositivo Android (Settings)
      2. Acceda a la opción de Seguridad
      3. Marque el checkbox de permitir instalaciones de origen desconocido
  • Tras tener acceso a instalaciones de origen desconocido, intente instalar la aplicación de nuevo.

↧

9. Implementar la lógica cuando la aplicación arranca
  • Implemente una lógica que se ejecute cuando se abra la aplicación y que el móvil te de la bienvenida. (Debido a que el componente no visual TextToSpeech reconoce el castellano, pon el mensaje en español).
botón del monitor serial
Lógica que se ejecuta cuando la aplicación es abierta.

↧

10. Añadir componente no visual Reloj
  • Arrastre desde el menú izquierdo el componente Reloj (Clock) dentro de la interfaz. Asegúrese que están puestas las siguientes propiedades sobre este nuevo componente no visual:
    1. TemporizadorSiempreSeDispara: desactivado
    2. TemporizadorHabilitado: activado
    3. IntervaloDelTemporizador: 5000
botón del monitor serial
Inclusión del componente Reloj y configuración de las propiedades de este.

↧

11. Implementar la lógica del reloj
  • Implemente una lógica que se ejecute el temporizador del reloj se dispare. Pónga un mensaje de que el móvil se aburre porque nadie está pulsado cosas. (Debido a que el componente no visual TextToSpeech reconoce el castellano, pon el mensaje en español).
botón del monitor serial
Lógica que se ejecuta se dispara el temporizador

↧

12. Añadir componentes de animacion
  1. Arrastre desde el menú izquierdo el componente canvas dentro de la interfaz. Modifique las siguientes propiedades del componente:
    1. Width: Fill Parent / Ancho: Ajustar al contenedor
    2. Height: Fill Parent / Alto: Ajustar al contenedor
  2. Arrastre desde el menú izquierdo el componente Sprite y ponlo dentro del canvas. Midifica el sprite para incluir la imagen que puedes descargar desde el enlace:
  3. Arrastre desde el menú izquierdo el componente Bola / Ball dentro de la interfaz. Modifique las siguientes propiedades del componente:
    1. Radio: 20
botón de upload
botón del monitor serial
Inclusión de un canvas de animaciones y dos componetes sobre el canvas.

↧

13. Implementar la lógica del balón.
  • Implemente los dos siguientes bloques de lógica. El primero de ellos permite que cuando el usuario pulse la pelota esta se mueva a la ubicación actual del dedo. El segundo bloque se ejecuta cuando la pelota colisiona con la portería.
botón del monitor serial
Lógica de arrastrar componetes y de colisión.

↧

14. Compilación de la aplicación e instalación en el dispositivo
  • Pulse el botón de Construir "Build" y seleccione proporcionar código QR para la aplicación QR
  • Lea el código QR con su dispositivo Android y descargue la aplicación
  • Si es la primera vez que instala una aplicación desde App Inventor es necesario permitir al dispositivo móvil instalar aplicaciones de origen desconocido (es decir, aplicaciones fuera del Google Play Store). Para ello:
    • Si durante el primer intento de instalación le proporcione un acceso directo a Ajustes-> Seguridad seleccione instalar aplicaciones de origen desconocido
    • Si tan solo le deniega la posibilida de instalar. Siga los siguientes pasos:
      1. Vaya a Ajustes de su dispositivo Android (Settings)
      2. Acceda a la opción de Seguridad
      3. Marque el checkbox de permitir instalaciones de origen desconocido
  • Tras tener acceso a instalaciones de origen desconocido, intente instalar la aplicación de nuevo.