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