PROGRAMAS DE

APP INVENTOR
ANDREA ALTAMIRANO BADILLO
JESS EDUARDO PREZ REYES
PRESENTACIN

A continuacin le
presentaremos 10
programas de App Inventor ,
los cuales explicaremos
como fue la elaboracin de
cada uno de ellos.
PROGRAMA 1
GIF
Creamos un programa diseado
para mostrar un gif a la hora de
abrirlo

Paso1: Nos vamos a

VisorWeb y lo arrastramos
hasta la pantalla
Se mostrara una
ventana despus de
presionar subir
archivos.
Paso3: presionaremos
Examinar para
escoger nuestro gif , ya
escogido daremos
aceptar

Paso2:Nos
vamos a
Medios y
pulsamos subir
archivo para
 Vamos a Bloques aqu es donde
terminaremos de crear nuestro primer
programa en app Inventor

Paso4:
Presionamos
Screen1 al
hacerlo nos
aparecer varias
opciones de como
iniciar ,
escogeremos la
tercera .
Paso5: Presionamos VisorWeb y
escogemos la opcin de irAlaUrl
que esta nos llevara al gif
Paso6: Buscamos Texto
y al presionarlo
seleccionamos la primer
opcin que es una cadena
de texto en donde
escribiremos el Url del gif
As es como debern de quedar los bloques terminados
, en la cadena de texto debe de estar escrito el Url.
PROGRAMA 2
LIENZO
Este programa estar
diseado para trazar dibujos
de lneas de diferentes
colores.

Paso1:Buscamos Lienzo
en dibujo y animacin , lo
arrastramos hasta la
pantalla.
Paso2:Presionamos
Disposicin y seleccionamos
DisposicionHorizontal la
arrastramos a la pantalla.
Paso3: Colocaremos un
Botn adentro de
DisposicionHorizontal

En total sern cinco

botones que estarn
adentro.
 Paso4: Los botones se les modificara
los nombres que sern : Borrar ,Rosa ,
Morado, Negro y Azul.

Al terminar de cambiar los

nombres nos iremos a Bloques
para crear la estructura del
programa
Paso5:Seleccionaemo
s Lienzo1 y
escogeremos la
primer opcin de los
bloques .
Paso6:Seleccionamos
nuevamente Lienzo1 para
buscar el bloque DibujarLnea
como su nombre nos dice es el
que nos permitir trazar las lneas
para los dibujos.

Paso7:Seleccionamos Variables
y escogemos el segundo bloque.
Paso8: Cuando coloquemos el
bloque tomar modificaremos el
desplegable con la opcin
XPrevio

Paso9:Colocaremos tres bloques

mas los cuales tambin se les
modificara el desplegable.
Paso10:Seleccionamos Boton1
escogemos la opcin uno y la
arrastramos junto a los bloques
que ya tenamos anteriormente.

Paso11:Seleccionamos Lienzo1
buscamos el bloque Llama-Limpiar
y lo seleccionamos . Este estar
unido con el botn 1 el cual es el
de Borrar.
Paso12:Seleccionamos el
siguiente botn que seria el dos y
escogemos la misma opcin que
la anterior.

Paso13:Seleccionamos
nuevamente Lienzo1 para
buscar el bloque poner-como es
el que nos permitir escoger el
color con el cual dibujaremos .
Paso14: Volveremos a hacer los
mismos procedimientos con los
botones restantes.

Paso15:Seleccionamos los
colores que colocamos en cada
botn .

Al terminar de escoger los colores

nuestro programa estar listo para
usarse .
PROGRAMA3
COLOR DE TEXTO
El programa esta diseado para escribir
textos con el color que nosotros deseemos.
Paso1:Primero agregaremos
HorizontalArrangement1.

Paso2:Ya agregado colocaremos adentro

un Label1 el cual se le modificara el
nombre con el nombre del programa.

Paso3:Volveremos a agregar dos veces

HorizontalArrangement en el segundo
colocaremos un botn adentro , el cual
tendr como nombre Negro que ser
uno de los colores para escoger.

Paso4: Volveremos a agregar dos veces

HorizontalArrangement en el segundo
colocaremos un segundo botn adentro
que tendr como nombre Salmon.
Al terminar de
agregar todo los
componentes
debern de estar
acomodados como
lo muestra la
imagen.
Paso5:Seleccionamos Boton1
escogemos la opcin uno y la
arrastramos.

Paso5:Seleccionamos
nuevamente Boton1 y
buscamos el bloque poner-como .
Este ira adentro del anterior.
Paso6:Volveremos a hacer el
procedimiento anterior con el
Boton2

Paso7:Para finalizar nuestro

programa escogemos los colores
de acuerdo con cada botn.
PROGRAMA 4
SUMA UNO Y RESTA UNO

Este programa esta diseado para

al pulsar un botn se aade un
numero y al pulsar otro botn se
disminuye un numero .Al pulsar el
tercer botn se vuelve a cero.
No es una frmula de
matemticas, simplemente es la
manera de aadir uno al valor
anterior.
 Paso1:Agregaremos un
Botn

Paso2:Editaremos el
nombre del botn le
pondremos Suma 1

Paso3:Agregaremos dos
botones mas los cuales
llevaran como nombre
Restar 1 y Volver a cero
Paso4:Agregaremos una
etiqueta , ya agregada nos
iremos a bloques.
Paso5: Ir a Variables y
seleccionar la primer opcin

Paso6:Ir a Matemticas e
igualmente escoger el
primer bloque el cual estar
unido al bloque anterior

Paso7:Ahora presionaremos
Boton1 y escogeremos la
opcin uno.
Paso8:Nuevamente iremos
a Variables para
seleccionar la tercera opcin
, al colocarlo modificaremos
el desplegable .

Paso9:Iremos a
Matemticas y
seleccionaremos la tercera
opcin.
Paso10:Volveremos a
Variables escogeremos la
opcin dos , estar unida al
bloque anterior.

Paso11:Volveremos a
Matemticas y
escogeremos la opcin uno
la cual estar unida con el
bloque anterior , en donde
esta el cero le pondremos
un 1.
Paso12:Precionaremos
Etiqueta1 escogeremos el
bloque poner-como y lo
uniremos al bloque anterior.

Paso13:Volvemos a ir a
Variables y seleccionamos
la opcin dos , la cual estar
unido al anterior bloque.
Paso14:Al final los bloques
debern de quedar de la
siguiente manera.
Se volvern a repetir los
mismos pasos para el
segundo botn ,

Paso15:Al segundo botn

solo se le modificara el
signo que ser el de restar.

Paso16:Al tercer botn solo

se le modificara el poner-
como solo se le agregara el
bloque con el cero.
Al terminar todos nuestros bloques debern de
terminar de la siguiente manera , el programa
estar listo para usarse.
PROGRAMA 5
PAR O IMPAR
Este programa nos permitir saber
si el numero que ingresemos sea
par o impar como su nombre lo
indica.
Paso1:Precionaremos
Etiqueta escogeremos y la
agregaremos a la pantalla ,
la cual la modificaremos
como introduce un
numero .

Paso2:Agregaremos un
campo de texto , que es
donde se escribir el
numero.
 Paso3:Precionaremos
nuevamente Etiqueta
escogeremos y la
agregaremos a la pantalla , .

Paso4: Saldremos de
diseador e iremos a
bloques. Agregaremos una
variable que ser la primer
opcin.

Paso5: Presionaremos
Matemticas y
escogeremos la primer
opcin.
Paso6:Volveremos a repetir
los pasos para crear el
mismo bloque solo que se le
modificara uno como
numero y resto

Paso7:Pulsaremos Botn
y escogeremos la primera
opcin.

Paso8:Iremos nuevamente
a variables y escogeremos
la tercera opcin que estar
unida al bloque anterior .
Paso9:Cuando lo
agreguemos nos aparecer
una advertencia en donde le
pondremos al desplegable
global NUMERO

Paso10:Precionaremos
CampoDeTexto para
escoger el bloque
campodetexto-texto.

Paso11:De igual manera

cuando lo agreguemos nos
aparecer una advertencia
en donde le pondremos al
desplegable global RESTO
Paso12:Precionaremos
Matemticas para escoger
un nuevo bloque que estar
unido al anterior.

Paso13:Iremos nuevamente
a Variables donde
escogeremos el segundo
bloque el cual estar unido
al bloque anterior.

Paso14:De igual manera la

editaremos el desplegable
como la anterior.
 Paso15:Seleccionaremos el
icono azul como se muestra
en la imagen y nos
aparecer dos opciones para
agrandar el bloque ,
escogemos la segunda.

Paso16:Precionamos
Etiqueta y buscamos el
bloque poner-como.

Paso17: Iremos a Texto para

agregar la opcin de bloque dos.

Paso18:Volvemos a
texto nuevamente ,
pero ahora a
escoger el bloque
uno que estar
unido al anterior.
Paso19:Iremos
nuevamente a
variables para
agregar el bloque
anterior y
conectarlo con la
cadena.

Paso20:Agregamos
el mismo bloque de
texto , solo que
ahora le pondremos
ES PAR
Paso21:Agregamos los mismos
bloques solo que ahora le pondremos
ES IMPAR con eso finalizaremos
nuestro programa.
PROGRAMA 6
MULTIPLICAR

Paso1.Diseo de pantalla para

multiplicar dos nmeros ,
arrastrando los botones requeridos
que serian 4 Label 2 Text Box y
1 Resultado
Paso2:Agregamos los bloques
requeridos que se encuentran en
Control, Logic y Math
PROGRAMA 7
REPETIR LAS PALABRAS

Paso1:Arrastramos lo necesario para

obtener que son Tres Label y Un
Textspech recogniser Repetir
Texto a repetir
Paso2: Los botones necesarios
sern encontrados en Control,
Procedures y por ultimo en Logic
PROGRAMA 8
CALENDARIO

Paso1 Para poder colocar los

botones para el calendario tendrs
que arrastrar 2 Label 1 Text Box
y 1 Boton
Paso2 Se repetir 12 veces el cdigo
solo cambiando los nmeros y el
nombre del mes que siga.
PROGRAMA 9
SUMA

Paso1 4 Label y 2 Text Box

sern los necesarios botones para
poder llevar acabo la suma en esta
ocasin
Paso2:Agregamos los bloques
requeridos que se encuentran en
Control, Logic y Math
solamente.
PROGRAMA 10
INSERTAR UN VIDEO

Paso1 Se insertara un Label, un

Video Player, Grabar Detener
y Reproducir
Paso2 En este cdigo se utilizara
Variables Logic Control
Procedures y algunos Label