Manual AppInventor

Congreso Estatal Sobre TIC en Educación Básica Desarrollo de Apps Educativas con App Inventor

07/11/2019 Centro Educativo Guaymax Mtro. Víctor Hugo Valenzuela Valencia @guaymaxedu

I. Iniciar sesión 1. Entra a https://appinventor.mit.edu/ 2. Clic en Create Apps

3. Inicia sesión con tu cuenta de @gmail.com

4. Acepta las condiciones 5. Indica que no quieres tomar el cuestionario 6. Si la página aparece en inglés cambia el idioma del lado derecho

II. Crear un proyecto nuevo e interfaz 1. Clic en comenzar un proyecto nuevo

2. Escribe el nombre del proyecto, no puede llevar espacios.

3. Interface 1 4 2

2

3

1. MenĂşs 2. Paleta de componentes 3. Vista previa de los elementos 4. Componentes en el proyecto 5. Propiedades del componente

5

III. MITAI2 –Aplicación para smarthphone 1. Entra a google play 2. Busca mitai2 companion 3. Descarga la app

4. Al abrirla permite que AppInventor acceda a imágenes

IV. App de sonido 1. Descarga los siguientes elementos a tu carpeta a) Imagen del gato (abrir y guardar imagen) b) Audio (abrir y guardar) 2. En la plataforma inserta un botรณn (arrastra del lado derecho hacia el Smartphone)

3. En el panel de propiedades da clic en imagen, subir archivo, seleccionar archivo

4. Elegimos la imagen del gato y aceptar

5. En la secciรณn de texto para botรณn, borramos el texto

6. Del panel medios, inserta el elemento sonido

7. Clic en origen, subir archivo, meow.mp4 y aceptar

8. Ir a la sección de bloques del lado derecho

9. Clic en botón1 y arrastra cuando botón1 clic

10. Clic en sonido1, arrastra llamar sonido1-reproducir dentro del bloque de botón1-clic

11. Conecta la web con la app 12. Clic en el menú conectar – AI Companion

13. Escanea el código en el Smartphone

14. Presiona en la imagen para reproducir el sonido

V. Instalar aplicación 1. Clic en el menú generar – apk QR para el archivo APK

2. Escanea el código 3. Pueden aparecer diversas advertencias sobre dañar el equipo, acepta instalarlo y disfruta de la app en tu teléfono.

VI.

App háblame 1. Crea nuevo proyecto, asígnale el nombre “practica2” 2. Añade un botón 3. En el texto para botón escribe “háblame”

4. Y un medio llamado “Texto a Voz”

5. Clic a la sección de bloques

6. Clic en botón1 y arrastra el bloque de Cuando botón1 clic

7. Clic en textoavoz1 y elige texto a voz1 hablar mensaje

8. Clic en texto escoge el recuadro rosa vacío

9. Escribe tu mensaje dentro del recuadro

10. Conecta la app con tu teléfono dando clic en conectar- AI Companion 11. Escanea el código

12. Regresamos a la sección de diseñador

13. Añadimos un sensor llamado Acelerometro

14. Volvemos a bloques, seleccionamos acelerómetro, la opción cuando acelerómetro agitar

15. Añadimos texto a voz- hablar mensaje:

16.

17.

18.

19.

Conecta el teléfono a la página por medio de MITAI Companion Agita el teléfono Regresamos al panel diseñador Añadimos un campo de texto de la paleta interfaz de usuario

20. Insertamos otro botón y en Texto de botón escribimos Léeme

21. Regresamos al panel de Bloques 22. Seleccionamos el boton2 – cuando boton2 clic

23. Texto a voz1 llamar texto

24. Del campo de texto selecciona

25. Conecta a la aplicaciĂłn

26. Escribe un mensaje y presiona el botón léeme

VII. App de Pintar 1. Crea un proyecto nuevo Práctica3

2. De la paleta disposición selecciona disposición horizontal

3. De la paleta interfaz de usuario añade un botón y colócalo dentro de la disposición

4. Cambia lo siguiente

a. b. c. d.

Nombre del botón Color del botón Forma del botón Texto del botón

5. Repite el proceso con el botón azul, amarillo y verde

Nota: los cuatro botones van dentro de la disposición

6. Añade un lienzo de la paleta y cambia su tamaño a 300 pixeles de alto por 300 pixeles de ancho

7. En imagen de fondo añade una imagen para colorear por ejemplo: Dibujo

8. Añadir un botón que se llame y diga limpiar debajo del lienzo

9. En la sección de bloques añade el siguiente código: en rojo

En Lienzo

En colores

10. Repite el procedimiento con cada color: puedes utilizar clic derecho duplicar

11. Para el botón limpiar asignaremos lienzo limpiar

12. Elegimos cuando lienzo1 – tocar

13. Llamar lienzo1 – dibujar circulo

14. Tomar X y Y y Radio 5

15. Seleccionar en lienzo1- Cuando Lienzo Arrastrado

16. En lienzo seleccionar llamar lienzo1-dibujar línea

17. Añade xprevio y yprevio en X1 y Y1 18. Añade xactual y yactual en X2 y Y2

19. Como extra puedes añadir el sensor acelerómetro que al agitar se limpie la pantalla 20. Conecta la App

VIII.

Atrapa al topo 1. Como app extra requerirás:

a) Lienzo 300x300 b) Sprite image con mole 40x40 c) Etiqueta d) Boton de reset e) Sonido para vibrar f) Timer/Reloj

2. Añade el siguiente programa

Canal de Youtube: @guaymax Síguenos en Facebook: facebook.com/guaymaxedu