Crea Tus APPS Con MIT App Inventor PDF
Crea Tus APPS Con MIT App Inventor PDF
2
Qué es AppInventor
3
Qué es AppInventor
6
Qué es AppInventor
7
Qué es AppInventor
8
Qué es AppInventor
Cambiar el idioma
La primera vez que abres la web aparece un cuadro de texto en el
centro informándote de que no tienes proyectos, animándote a crear
nuevos.
La web de App Inventor de manera predeterminada se muestra en
inglés, pero en la barra de herramientas superior podrás ver una
opción desplegable con todos los idiomas disponibles. Haz clic en la
pestaña y selecciona Español.
9
Entorno web
2. ENTORNO WEB
App Inventor es un entorno de
programación visual, que permite crear
• Barra de herramientas
Apps usando objetos e instrucciones en • Barra de la App abierta
forma de bloques. Estas instrucciones • Paleta
proporcionarán funcionalidades a los • Visor
objetos o componentes de la App para que • Componentes
hagan una u otra cosa. • Media
• Propiedades
En las siguientes diapositivas podrás ver las
diferentes partes del entorno de trabajo.
10
Qué es App Inventor
Barra de herramientas
11
Entorno web
· Generar: una vez tengas la App definitiva, vas a poder exportarla al PC o bien al móvil
directamente mediante la tecnología QR, para de este modo hacer un uso real de lo que
has creado.
· Ayuda: acceso a todo tipo de información propia de App Inventor, desde tutoriales hasta
foros de la comunidad.
· Mis proyectos: acceso a la librería en la que se almacenan todos los proyectos que tienes
guardados en tu perfil.
12
Entorno web
· Guía: acceso a documentación de soporte oficial que te ayudará con dudas que se
puedan plantear.
· Idioma: podrás cambiar el idioma de la interfaz web tal y como has visto anteriormente.
13
Entorno web
· Ventanas: permite cambiar la ventana del programa con la cual quieres trabajar en un
momento concreto, ya que una app puede disponer de varias ventanas.
· Añadir ventanas: permite añadir nuevas ventanas a la app que estás desarrollando.
· Eliminar ventanas: permite eliminar las ventanas del proyecto en el que trabajamos.
14
Entorno web
15
Entorno web
· Ventanas – Esta pestaña da la opción de cambiar la ventana del programa con la cual quieres
trabajar en un omento concreto, ya que una app puede disponer de varias ventanas.
· Añadir ventanas – Esta opción permite añadir nuevas ventanas a la app que estas
desarrollando.
· Eliminar ventanas – Esta opción permite eliminar las ventanas del proyecto.
· Diseñador: permite acceder a la ventana de diseño para colocar los objetos que forman la
interfaz de nuestra App y hacer la composición del aspecto, los botones y el resto de
elementos que tendrá.
· Bloques: permite añadir instrucciones en forma de bloques a los elementos que se han
agregado en el apartado de Diseñador. Desde aquí programaremos el funcionamiento de
nuestra App, añadiendo funcionalidades a los objetos que hemos colocado.
16
Entorno web
paleta
Esta sección del entorno situada en el
lateral izquierdo de la interfaz de App
Inventor, contiene todos los
elementos visuales o de otro tipo, que
pueden ser agregados y tratados en una
App.
· Interfaz de usuario: todos los elementos interactivos que se pueden agregar a una App, como
por ejemplo botones, checkboxes (cuadros de selección), barras de desplazamiento,
imágenes, listas, desplegables, campos de texto…
· Disposición: permite añadir capas “no visibles” con el fin de organizar los elementos dentro
de la pantalla. Pueden ser dispuestos de manera vertical, horizontal, dentro de tablas…
· Medios: para añadir reproductores de música y video hasta galerías de imágenes. Este
apartado contiene “Funciones interactivas predeterminadas”, es decir, listas para ser
agregadas y utilizadas.
· Dibujo y animación: una serie de objetos visuales e interactivos con los cuales podrás dibujar,
interactuar entre objetos…
18
Entorno web
· Sensores: este apartado es bastante relevante, ya que es con el que podrás agregar a tu app
funcionalidades que un dispositivo móvil incorpora hoy en día de manera habitual, tales como;
acelerómetro, giroscopio, podómetro, brújula…
· Social: una app también puede incorporar herramientas clásicas como; SMS, e-mail,
navegador web y redes sociales, agenda de contactos…
· Conectividad: otra gran característica de las app móvil es la capacidad de comunicarse con
otros dispositivos del entorno mediante tecnologías inalámbricas como Bluetooth ya
incorporadas en los terminales.
19
Entorno web
Visor
Este apartado del entorno muestra lo
que se verá en la App una vez la
instales o emules en un dispositivo.
Mediante los componentes de la
sección Paleta que iras arrastrando al
visor, se ira generando el aspecto
visual de tu App.
20
Entorno web
Componentes
Cada vez que se añada un
componente al visor de tu App, se irá
generando una lista de éstos, de
manera que podrás identificar
rápidamente con qué objetos estás
trabajando en todo momento.
Medios
Cuando quieras agregar archivos
digitales desde el ordenador, tales
como música, fotos o videos a la App,
lo vas a tener que hacer desde este
apartado. El botón Subir archivo
permite acceder a los archivos que se
encuentran almacenados dentro del
ordenador desde el que se está
ejecutando la herramienta web.
22
Entorno web
propiedades
Al igual que cada vez que se añade un
elemento al Visor, éste se añade a una
lista dentro del apartado Componentes
de manera automática, también se va
a generar la sección Propiedades
donde se van a poder modificar ciertos
parámetros del componente del visor
seleccionado: el aspecto de un botón,
de una imagen…
23
Entorno web
Bloques
Como ya sabes, por un lado deberás desarrollar visualmente tu App
agregando y distribuyendo los componentes dentro de la pantalla, pero
también deberás programar con bloques el comportamiento de estos
componentes. Para ello, como ya has visto antes, está la sección de
Bloques.
Cada objeto o componente tiene una serie de instrucciones organizadas
por secciones de manera predeterminada.
25
Entorno web
En el apartado de
bloques, encontrarás dos
partes. La primera
contiene las distintas En el segundo apartado
secciones de bloques encontrarás que
con instrucciones aparece el nombre de
generales que los componentes
normalmente se pueden añadidos en el visor.
aplicar a cualquier Aquí se da la
componente. Digamos oportunidad de trabajar
que son las instrucciones con instrucciones
comunes. propias para este tipo
de componentes.
26
Entorno web
Algunos ejemplos:
27
Probar las Apps
29
Probar las Apps
32
Probar las Apps
33
Probar las Apps
34
Probar las Apps
35
Probar las Apps
36
Primera App: sumas
13
que seguir los pasos que se muestran
a continuación.
37
Primera App: sumas
38
Primera App: sumas
39
Primera App: sumas
40
Primera App: sumas
41
Primera App: sumas
• Paso 7: repite los pasos para agregar otro campo de texto debajo del
que ya está en la App. Una vez hayas agregado el segundo campo de
texto, deberás tener algo como lo que se muestra en la imagen.
43
Primera App: sumas
44
Primera App: sumas
45
Primera App: sumas
46
Primera App: sumas
47
Primera App: sumas
48
Primera App: sumas
• Paso 13: ya está finalizada toda la parte de diseño, por lo que ahora
deberás agregar bloques (instrucciones) a los componentes desde el
apartado Bloques de la interfaz. Para llevar a cabo esta tarea lo primero
es plantear como va a funcionar la app:
El botón Suma va a recoger los valores de los campos 1 y 2, sumarlos
y mostrar el resultado en el campo 3.
50
Primera App: sumas
51
Primera App: sumas
52
Primera App: sumas
• Paso 17: por último falta añadir el valor de los campos 1 y 2 a los
huecos que propone el campo matemático. Ya que los datos que
incluyen los campos 1 y 2 son representados en texto, vas a hacer clic
en cada uno de éstos y buscarás el bloque de Texto para arrastrarlos
al interior del bloque matemático, para obtener algo así.
54
Segunda App: par o impar
55
Segunda App: par o impar
57
Segunda App: par o impar
58
Segunda App: par o impar
59
Segunda App: par o impar
62
Segunda App: par o impar
63
Segunda App: par o impar
64
Segunda App: par o impar
65
Segunda App: par o impar
• Paso 12: ahora vas a indicar que una vez se haga clic en el objeto, se
van a coger los datos que haya dentro del CampoDeTexto1 para
almacenarlo en una variable que ya se ha creado antes. Tal y como
ves en la imagen, se indica qué valor se debe almacenar, siendo el
que tenga la propiedad de Texto. Esto se almacena en la variable
numero.
66
Segunda App: par o impar
• Paso 13: ahora vas a hacer uso de la segunda variable creada con el
nombre de resto, en la cual vas a almacenar el resultado de calcular
el (módulo o resto resultado de dividir por 2) del valor guardado en la
variable numero. Tal y como ves se añade un modulo matemático
(módulo de) en el cual introducimos la variable numero para dividirla
entre 2.
La variable resto almacenará
un número resultante que
servirá como condicional en
el siguiente bloque a añadir.
67
Segunda App: par o impar
• Paso 14: utilizando los bloques de control, en este caso del tipo si
entonces podrás controlar mediante condiciones, qué instrucciones vas
a ejecutar y cuales no. En este caso, si la condición da como respuesta
falso querrás que se ejecuten las acciones que substituyen a las de una
condición cierta. Tal y como ves en la imagen puedes modificar este
tipo de bloques.
68
Segunda App: par o impar
• Paso 15: tal y como has visto, vas a tener que añadir un bloque del tipo
(si, si no), con una condición anidada dentro para que dependiendo del
resultado matemático, se ejecute una acción u otra. Como condición
vas a tener que decir que si la variable llamada resto da como resultado
0 significa que el modulo calculado corresponde a un numero par, en
caso que no sea 0 será un numero impar.
69
Segunda App: par o impar
• Paso 16: por último vas a tener que especificar qué acciones se van a
ejecutar en cada uno de los dos casos:
• Si es cierto se va a poner como texto en la Etiqueta2 “número par”,
• Si es falso será el texto “número impar”.
70
Tercera App: lienzo
¿Empezamos?
71
Tercera App: lienzo
72
Tercera App: lienzo
73
Tercera App: lienzo
74
Tercera App: lienzo
75
Tercera App: lienzo
76
Tercera App: lienzo
77
Tercera App: lienzo
78
Tercera App: lienzo
• Paso 10: debes indicarle al componente lienzo, qué tiene que hacer
cuando se arrastra el dedo por encima. En este caso vas a decirle que
genere una línea a medida que vas arrastrando el dedo por la pantalla.
Para ello selecciona el componente lienzo y busca el bloque que se
muestra en la imagen.
Como puedes ver en la imagen del bloque, éste contiene una serie de
parámetros predefinidos que aportan la información necesaria para que en este
caso se dibuje una línea. En este ejercicio vas a tener que utilizar los siguientes
parámetros: Xprevio, Yprevio, Xactual e Yactual.
79
Tercera App: lienzo
Una vez está agregada dentro del bloque, vas a añadir los parámetros
tal y como ves en la segunda imagen.
80
Tercera App: lienzo
81
Tercera App: lienzo
• Paso 13: una vez agregado este bloque para cada botón, vas a
seleccionar el componente lienzo para decirle a los botones el
color de la línea especifico para cada uno. Tal y como ves en la
imagen, deberás tener algo así al finalizar el programa.
82
Cuarta App: app multiventana
84
Cuarta App: app multiventana
85
Cuarta App: app multiventana
86
Cuarta App: app multiventana
Recuerda que estos nombres son los que después identificarán a los objetos
a la hora de ser programados.
87
Cuarta App: app multiventana
88
Cuarta App: app multiventana
89
Cuarta App: app multiventana
Recuerda que los nombres que ves en las imágenes, son los nombres que le
has dado a los botones que van a abrir la ventana escogida.
90
Cuarta App: app multiventana
• Paso 11: ahora al hacer clic en cualquiera de estos tres botones, vas a
indicar que debe abrir la ventana deseada, y para ello vas a
seleccionar el conjunto de bloques Control y vas a arrastrar dentro de
los tres bloques anteriores, el bloque llamado “open another screen
screenName” (abrir otra pantalla Nombre de la pantalla).
91
Cuarta App: app multiventana
• Paso 12: por último repite este mismo proceso en las ventanas 2 y 3
con el botón que hace retroceder hacia la ventana1 (botón de
retroceso).
92
Quinta App: nivel de burbuja
94
Quinta App: nivel de burbuja
• Paso 3: ahora como en casi todas las apps, vas a agregar una
capa de distribución para los objetos que se añadirán a
continuación. En este caso se va a seleccionar una capa
DisposiciónHorizontal tal y como ves en la imagen.
95
Quinta App: nivel de burbuja
96
Quinta App: nivel de burbuja
97
Quinta App: nivel de burbuja
98
Quinta App: nivel de burbuja
99
Quinta App: nivel de burbuja
100
Quinta App: nivel de burbuja
Eje Y
• Paso 9: comprendamos cómo
funcionará esta aplicación que se va
a basar en la información que le
proporcionará el sensor de
aceleración que incorporan los
móviles. Dependiendo del grado de
inclinación que el sensor capte, se va
a mostrar una imagen u otra,
generando una animación en la
pantalla mediante las imágenes que
hemos importado.
Eje -Y
101
Quinta App: nivel de burbuja
• Paso 11: en este caso solo vas a tratar con el EjeY ya que es el que
te interesa para poder crear una animación en formato horizontal.
Para tener controlado en todo momento que valor capta el sensor,
vas a decirle al programa que cada vez que haya un cambio, lo
almacene en una etiqueta que nos va a servir en todo momento.
103
Quinta App: nivel de burbuja
Esta secuencia de bloques permitirá mostrar por el Visor el estado actual del sensor. Ahora
solo falta actuar dependiendo de qué valor se muestra en cada momento.
104
Quinta App: nivel de burbuja
• Paso 15: ahora este paso lo deberás repetir cuatro veces más, de
manera que el programa tendrá cinco condiciones. Dependiendo de
que la situación sea una u otra, se van a mostrar las imágenes, el texto
y la información que sea adecuada en cada situación.
107
Quinta App: nivel de burbuja
108
Quinta App: nivel de burbuja
109
110