You are on page 1of 15

CBTis 212

M. en C. Alvaro Snchez Mrquez



Hello Purr
HelloPurr: toque el gatito, escucharlo maullar
HelloPurr es una aplicacin sencilla que se puede construir en un tiempo muy corto. Se crea un
botn con una imagen de un gato en l, y luego programar el botn para que cuando se hace
clic en un "miau" reproduce el sonido.
Para construir HelloPurr, necesitar un archivo de imagen de un gato y un archivo de audio con
un sonido "miau".Descargue estos archivos a su ordenador haciendo clic en los siguientes
enlaces. Para descargar: despus de hacer clic en un vnculo, haga clic derecho sobre la imagen
o la barra de sonido y seleccione "Guardar como".Guarde ambos archivos en el escritorio o
carpeta de descargas, o en cualquier lugar que usted puede encontrar fcilmente ms tarde.
Gatito imagen: kitty.png (Haga clic derecho y guardar)
Sonido Meow: meow.mp3 (Haga clic derecho y guardar)
Seleccione los componentes para disear su aplicacin

La App Inventor componentes se encuentran en el lado izquierdo de la ventana del
diseador con el ttulo de la paleta . Los componentes son los elementos bsicos que se utilizan
para hacer que las aplicaciones en el telfono Android.Son como los ingredientes de una
receta. Algunos componentes son muy simples, como una etiqueta componente, que slo
muestra el texto en la pantalla, o un botn de componente (# 1 a la izquierda) que se toca para
iniciar una accin.
Otros componentes son ms elaborados: un dibujo lienzo (# 2 izquierda) que puede almacenar
imgenes fijas o animaciones, un Acelermetro sensor que funciona como un controlador de Wii
y detecta al mover o agitar el telfono, los componentes que envan mensajes de texto, los
componentes que desempean msica y video, componentes que reciben informacin de los
sitios Web, y as sucesivamente.
Para utilizar un componente en su aplicacin, tendr que hacer clic y arrastrarlo hacia el
espectador en el centro del Diseador . Cuando se agrega un componente al Visor (# 1 abajo),
tambin aparecer en la lista de componentes en el lado derecho del visor.
Componentes (# 2 abajo) tienen propiedades que se pueden ajustar para cambiar la forma en
que el componente aparece y se comporta dentro de la aplicacin. Para ver y cambiar las
propiedades de un componente (# 3 abajo), primero debe seleccionar el componente deseado en
la lista de componentes.

Pasos para la seleccin de componentes y configuracin de las
propiedades
HelloPurr tendr un botn de componente que muestra la imagen de la gatita que ha descargado
anteriormente.Para lograr esto:
Paso 1 . Desde el bsico paleta, arrastre y suelte el botn de componente para Screen1 (#
1). Para hacer que el botn tiene una imagen de un gato, en el Properties panel, debajo de la
imagen, haga clic sobre el texto "Nada ..."y haga clic en "Upload Nueva ..." (# 2). Una ventana se
abrir para que pueda elegir el archivo de imagen. Haga clic en "Examinar" y navegue a la
ubicacin de la kitty.png archivo descargado anteriormente (# 3). Haga clic en
elkitty.png archivo, haga clic en "Abrir" y, a continuacin, haga clic en "OK".


Paso 2 . Cambiar de Button Texto Inmueble: "Text de Button1" Delete, dejando el texto de
propiedades en blanco del botn de modo que no hay escritura sobre la cara del gatito. Su
diseador debe tener este aspecto:
Si toda la imagen del gatito no aparece, puede solucionar este problema estableciendo las
propiedades Height y Width del botn "Fill Padre". Para ello, haga clic en el componente Button,
vaya al panel Propiedades de la derecha, desplcese hasta la parte inferior donde dice Anchura y
haga clic en la palabra "Automatic ..." para activar la lista desplegable. Seleccione la opcin
"Parent Fill". Haga lo mismo con la propiedad Height.


Paso 3 . Desde el bsico paleta, arrastre y suelte la etiqueta componente al Viewer (# 1),
colocndolo debajo de la imagen del gatito. Esto aparecer bajo la lista de componentes
que Label1 .
Bajo el Properties panel, cambie el texto propiedad de Label1 a leer "La mascota del gatito" (#
2). Ver el cambio de texto en el diseador y en el dispositivo. Cambiar el Tamao de Letra de
Label1 a 30 (# 3). Cambie el BackgroundColor de Label1 haciendo clic en la casilla (# 4): se
puede cambiar a cualquier color que te gusta.Cambie el TextColor de Label1 (# 5) a cualquier
color que te gusta. En este caso, el color de fondo se establece en azul y el color del texto se
establece amarillo.


Paso 4 . Bajo paleta, haga clic en la prensa cajn y arrastre un sonido de componentes y
colquelo en el visor (# 1). Dondequiera que se te cae, aparecer en el rea de la parte inferior
del visor de marcado componentes no visibles . En virtud de la prensa panel, haga clic
en Agregar ... (# 2) Vaya a la ubicacin de la meow.mp3 archivo que descarg anteriormente y
subirlo a este proyecto (# 3). En el panel Propiedades, ver que la fuente actualmente propiedad
dice ... Ninguno . Haga clic en la palabra Nada ... para cambiar el componente
Sound1 Fuente demeow.mp3 (# 4).

Programacin con el Editor de bloques
Hasta ahora ha sido la organizacin de la pantalla y los componentes de su aplicacin en
el Diseador , que est en una ventana del navegador web. Para empezar a programar el
comportamiento de la aplicacin, es necesario ir al Editor de bloques . Si usted no tiene una
Blocks Editor funcionamiento, haga clic en el botn Abrir el Editor de bloques en la parte
superior derecha de la ventana del diseador. Si necesita ayuda para conseguir el Editor de
bloques empez, volver a las instrucciones de configuracin para obtener ayuda.
Nota: Una manera fcil de cambiar entre el Editor de bloques y el diseador es el uso de la barra
de tareas que muestra las aplicaciones que se ejecutan en el equipo. El Editor de bloques se
ejecuta localmente como un programa Java y est representado por un icono de la taza de
caf. El diseador se est ejecutando en su navegador web para que pueda llegar a ella haciendo
clic en el icono de su navegador.
Una vez que tenga el Editor de bloques en frente de usted, contine con el siguiente paso para
empezar a programar su aplicacin con los bloques.
Hacer el juego de sonido
Paso 1 . En la paleta de Mi Bloques en el lado izquierdo del Editor de bloques, haga clic
en Button1 cajn para abrirlo. Arrastre y suelte el Button1.Click bloque en el rea de trabajo
(rea abierta a la derecha).

Esos bloques verdes se llaman controladores de eventos bloques. Los bloques de control de
eventos specifiy cmo el telfono debe responder a ciertos eventos: un botn se ha pulsado, el
telfono est siendo sacudida, el usuario est arrastrando su dedo sobre un lienzo, etc Los
bloques de control de eventos son de color verde y el uso de la palabra cuando . Por
ejemplo, cuando Button1.Click es un controlador de eventos
.
Paso 2 . Haga clic en el Sound1 cajn y arrastre el Sound1.Play bloque y conectar a la seccin de
"do" del que Button1.Click bloque. Los bloques se conectan entre s como piezas de un
rompecabezas y se puede or un chasquido cuando se conecten.

Los bloques de color prpura y azul son llamados comandos bloques, que se colocan en el
cuerpo de controladores de eventos. Cuando se ejecuta un controlador de eventos, se ejecuta la
secuencia de comandos en su cuerpo. Un comando es un bloque que especifica una accin a
realizar (por ejemplo, reproduccin del sonido) cuando se activa el evento (por ejemplo, al
pulsar Button1).
Los bloques deben tener este aspecto en este punto:

Ahora usted puede ver que el bloque de comandos se encuentra en el controlador de
eventos . Este conjunto de bloques significa, "cuando se hace clic en Button1, Sound1 jugar". El
controlador de eventos es como una categora de la accin (por ejemplo, se hace clic en un
botn) y el comando especifica el tipo de accin y los detalles de la accin (por ejemplo, jugar
sonar un sonido especfico).
Usted puede leer ms acerca de cmo funcionan las manzanas aqu: Bloques Comprensin .
Prubelo! Al hacer clic en el botn que debe escuchar el maullido de los gatos. Felicitaciones, su
primera aplicacin est en marcha!
Nota: hay un problema conocido con el componente de sonido en algunos dispositivos. Si usted
ve un "error del sistema operativo" y el sonido no se reproduce - o est muy retrasado en el
juego, volver al diseador y tratar de usar un componente Player (encontrado en los medios de
comunicacin) en lugar del componente de sonido.
Empaque su aplicacin
Mientras que el dispositivo (o emulador de telfono / tableta) se ha conectado a App Inventor, su
aplicacin ha estado funcionando en tiempo real en su dispositivo. Si se desconecta el emulador
/ telfono / tablet desde el Editor de bloques, la aplicacin va a desaparecer. Siempre se puede
hacer es volver por volver a conectar el dispositivo. Para tener una aplicacin funcionando sin
estar conectado a App Inventor, debe " empaquetar "la aplicacin para producir un paquete de
aplicacin (archivo apk).
Para "paquete" de la aplicacin en el telfono, conecte el telfono al editor de bloques y
asegrese de que el color del icono de telfono en la parte superior derecha del editor de
bloques de color verde.

Luego regresa al Diseador y seleccione "paquete para el telfono" en la parte superior derecha
de la pgina de diseo. App Inventor presentar tres opciones para el embalaje:

. 1 Mostrar Barcode: Puede generar un cdigo de barras (un QR Code), que se puede utilizar para
instalar la aplicacin en un telfono o tableta que tiene una cmara, con la ayuda de un escner
de cdigo de barras, como el escner de cdigo de barras ZXing (disponible gratuitamente en
Google Play).
Nota: este cdigo de barras funciona slo para su propio dispositivo, ya que est asociada con
su cuenta de Google. Si usted quiere compartir su aplicacin con otras personas a travs de
cdigo de barras, que tendr que descargar el archivo apk. Al ordenador y utilizar un software
de terceros para convertir el archivo en un cdigo de barras. Ms informacin se puede
encontrar aqu .
. 2 Descargar a este equipo: Puede descargar la aplicacin en su ordenador como un archivo
apk, que se puede distribuir y compartir lo que quieras con la instalacin de forma manual en
otros dispositivos. (A veces llamada"carga lateral".
3. Descarga al telfono conectado Usted puede descargar el archivo apk directamente al
dispositivo que est conectado con el Editor de bloques. Tenga en cuenta que esto funciona
incluso si usted est utilizando el emulador como dispositivo!
Desafo! Hacer el ronroneo del gato
El reto es hacer que el ronroneo del gato cuando el telfono se sacude. Ir al editor de bloques y
abra la Sound1cajn y arrastre el Sound1.Vibrate bloque y colocarlo bajo
el Sound1.Play bloque. Usted ver un icono de advertencia de color amarillo en la esquina
izquierda del bloque, lo que significa que el bloque tiene un componente que falta.

El Sound1.Vibrate bloque tiene una ranura abierta, lo que significa que hay que enchufar algo en
l para especificar ms acerca de cmo el comportamiento debera funcionar. Aqu, queremos
especificar la duracin de la vibracin. Los nmeros se calculan en milsimas de segundo
(milisegundos): para que el telfono vibre durante medio segundo, tenemos que enchufar un
valor de 500 milisegundos .
Ir a la incorporada en la paleta, vaya a la matemtica cajn, arrastre el nmero de bloque y
colocarlo en el socket del Sound1.Vibrate .

Despus de colocar el bloque de nmeros, haga clic en el nmero "123". Destaca el nmero en
negro: escriba "500" con el teclado.

Ya est! Observe el icono de advertencia amarillo ha desaparecido: el bloque de componentes
ya no falta.

Ahora conecta tu telfono y toque la imagen del gato en el telfono. El telfono debe
vibrar y maullar al mismo tiempo.
Revisin
Estas son las ideas clave cubiertos hasta el momento:
Usted construye aplicaciones mediante la seleccin de los componentes (ingredientes) y luego
decirles qu hacer y cundo hacerlo.
Se utiliza el Diseador de seleccionar los componentes y establecer las propiedades de cada
componente.Algunos componentes son visibles y algunos no lo son.
Puede agregar elementos multimedia (sonidos e imgenes) a las aplicaciones mediante la
carga de su equipo.
Utilice el Editor de bloques para ensamblar los bloques que definen el comportamiento de los
componentes "
cuando ... hacer ... bloques definen controladores de eventos , que dicen los componentes de
lo que se puede hacer cuando algo sucede.
llamadas ... bloques dicen componentes para hacer las cosas.



PicCall
PicCall muestra cmo se puede utilizar App Inventor para hacer que las aplicaciones que hacen
cosas reales, como los amigos de llamada.
Antes de iniciar
Para ejecutar PicCall , el telfono debe estar configurado y activado para realizar llamadas
telefnicas. Si no es as todava se puede construir PicCall para la prctica, pero el telfono no va
a hacer realidad las llamadas.
Advertencia: PicCall no funciona en todos los telfonos Android de la aplicacin actual de App
Inventor: obtendr un aviso de error en algunos telfonos cuando se trate de elegir un nmero
de telfono. Adems, no podr ver todos sus contactos - slo los creados desde Gmail. Estas
limitaciones sern eliminadas en el futuro.
En este tutorial, a diferencia HelloPurr , te voy a dar los nombres de los componentes, en lugar
de usar los nombres predeterminados que App Inventor ofrece (como "Button1"). El uso de
nombres significativos es una buena prctica de programacin: ayuda a mantener sus
programas de derecho en su propia mente, y ayuda a los dems a comprender sus programas.
El telfono debe contener tambin algunos contactos con foto. Usted puede utilizar la aplicacin
Contactos para registrar imgenes de sus contactos. Tambin puede hacer clic en Contactos en
su cuenta de Gmail en el equipo y agregar imgenes all.
Asegrese de que su ordenador y su telfono estn configurados para utilizar App
Inventor. Inicie un nuevo proyecto en la ventana del diseador. El nombre de "PicCall" y cambiar
la pantalla de ttulo para PicCall . Abra el Editor de bloques, haga clic en Conectar al telfono y
compruebe que el telfono se ha iniciado la aplicacin de App Inventor.
Primeros pasos
Comience como en HelloPurr colocando un botn en la pantalla. Hacer que el botn de 150
pxeles de ancho por 150 pxeles de alto. Conjunto de botn de imagen a una imagen. Usted
puede tambin utilizar la imagen del gatito si es til - que va a cambiar la imagen
pronto. Establezca el texto del botn para "presione para llamar", a pesar de que va a cambiar
eso pronto tambin.
Cambie el nombre del componente Button a "TopButton" (que va a hacer una llamada
"BottomButton" ms adelante en el tutorial). Para cambiar de un componente Nombre , haga clic
en Cambiar nombre de botn en el panel Componentes y escriba el nuevo nombre.
En este tutorial, a diferencia HelloPurr , te voy a dar los nombres de los componentes, en lugar
de usar los nombres predeterminados que App Inventor ofrece (como "Button1"). El uso de
nombres significativos es una buena prctica de programacin: ayuda a mantener sus
programas de derecho en su propia mente, y ayuda a otros a entender su programs.Don 't
confundir al nombre de un componente con el texto de un componente. El texto es el que
aparece en la pantalla. El nombre es el nombre que el programa utiliza para hacer referencia al
componente. Ver el nombre en la lista de la estructura de los componentes en el diseador y
los cajones en el editor de bloques.
Hacer llamadas telefnicas
En HelloPurr , que hizo que el telfono reproduzca un sonido cuando se hace clic en el
botn. PicCall casi de la misma, excepto que en lugar de reproducir un sonido, el telfono hace
una llamada.
App Inventor PhoneCall componente hace llamadas telefnicas. Usted puede encontrar
PhoneCall en la seccin Social de la Paleta. Abra esa seccin y arrastre una llamada en el
espectador. No voy a entrar en el rea de componentes no visibles. El nombre de "TopCall". Del
PhoneCall Fax propiedad determina el nmero para llamar.Establecer que, para un nmero de
telfono de 10 dgitos al que desea llamar. As es como el diseador debe buscar:

Ahora cambiar el Editor de bloques y extraiga la que TopButton.Click hacer bloque. En
el do ranura, coloque una TopCall.MakePhoneCall llamada manzana del cajn TopCall, de
modo que el controlador de eventos es la siguiente:

Siga adelante y probar lo que tiene hasta ahora en el telfono: Presione el botn y hacer la
llamada. Podras empaquetar esto como una aplicacin en estos momentos. Sera una aplicacin
muy limitada, siempre llamando al mismo nmero fijo, algunas personas podran encontrar que
til.
Informacin de contacto Telfono
Adems de hacer llamadas de telfono, App Inventor aplicaciones tambin pueden obtener
informacin de la lista de contactos del telfono. Esto se hace con
el PhoneNumberPicker componente.
Saque un componente PhoneNumberPicker de la seccin social de la paleta, colocarlo
bajo TopButton . A PhoneNumberPicker es una especie de botn: al pulsarlo, se trae a colacin la
lista de contactos del telfono y le permite elegir a alguien. Cambiar el nombre de la
PhoneNumberPicker a "TopPick" y cambie su texto a "Presione para escoger un nmero al que
llamar." Intntelo pulsando el selector en el telfono: usted debe ver sus contactos aparecen, y
usted puede elegir uno. Nada va a suceder despus de que elija, ya que an no ha dicho a los
componentes que hacer nada. Que va a hacer que el prximo.
Utilizando el selector
Cambie a la ventana Bloques y abra el cajn para TopPick . Arrastre el hacer cuando
TopPick.AfterPicking bloque.Esto le permite definir un controlador de eventos que diga lo que
debe hacer despus de haber escogido un nmero de los contactos.
Ahora abra el TopCall cajones y arrastre conjunto TopCall.PhoneNumber de e introducirlo en la
ranura en el hacer cuando TopPick.AfterPicking bloque. Ahora
arrastre TopPick.PhoneNumber del TopPick cajn y conectarlo a la toma de vaco. As es como
el controlador de eventos debe ser:

Probar el telfono: Pulse el selector, seleccione un contacto y un nmero de telfono. A
continuacin, pulse el botn de llamada para realizar la llamada. Agregar un comando al
controlador de eventos para establecerTopButton 's Texto alojamiento
hasta TopPick.PhoneNumber:

Imgenes
Si usted tiene una imagen almacenada con tus contactos, puedes hacer el show botn que, junto
con el nmero de telfono, en lugar de utilizar siempre la imagen de la gatita. Para ello, agregue
un comando al controlador de eventos, para ajustar la imagen caracterstica de TopButton ser el
de la imagen caracterstica de TopPick :

PhoneNumberPicker tiene dos propiedades que son fciles de confundir: Imagen y Imagen .
Picture es la imagen asociada al contacto que se recogi. imagen es la imagen del componente
PhoneNumberPicker tal y como aparece en el diseador y en el telfono.
Mejoras
Aqu hay algunas variaciones para que usted intente:
Agregar un segundo botn, BottomButton , y una segunda PhoneNumberPicker, por lo que su
aplicacin le da la opcin de dos nmeros.
Agregar una etiqueta con instrucciones sobre cmo utilizar la aplicacin.
Mostrar el nombre de la persona que llama, adems del nmero de telfono. Utilice una
etiqueta adicional para mostrar la informacin adicional.
Usando PicCall
Puede empaquetar PicCall y descargarlo en el telfono para que pueda utilizarlo cuando no est
conectado a la computadora. Pero hay una gran limitacin: Cada vez que se reinicia PicCall ,
comienza fresco y no recuerda lo que eligi la ltima vez. Ms adelante, veremos cmo utilizar
el TinyDB componentes para crear aplicaciones que pueden recordar informacin de un
momento a otro. Esta informacin se denomina datos persistentes .
Revisin
Estas son las ideas claves tratados en este tutorial:
Usted puede nombrar a los componentes por medio del Rename botn.
App Inventor tiene componentes que pueden utilizar la informacin almacenada en el
telfono. ElPhoneNumberPicker puede obtener los nmeros de telfono y fotos de tus
contactos y PhoneCall puede realizar llamadas.
Sugerencia : La lista que aparece cuando se ejecuta el nmero de telfono selector no muestra
las imgenes asociadas con sus contactos, en algunos sistemas Android. A pesar de que la
imagen no se muestra, la propiedad "Picture" todava devolver una imagen que se mostrar
cuando se ejecuta la aplicacin, siempre que el telfono tiene una imagen de ese contacto.

You might also like