CBTis 212 M. en C. Alvaro Sánchez Márquez
Hello Purr HelloPurr: toque el gatito, escucharlo maullar HelloPurr es una aplicación sencilla que se puede construir en un tiempo muy corto. Se crea un botón con una imagen de un gato en él, y luego programar el botón 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: después de hacer clic en un vínculo, haga clic derecho sobre la imagen o la barra de sonido y seleccione "Guardar como".Guarde como".Guarde ambos archivos en el escritorio o carpeta de descargas, o en cualquier lugar que usted puede encontrar fácilmente más tarde.
Gatito imagen: kitty.png (Haga clic derecho y guardar) Sonido Meow: meow.mp3 (Haga clic derecho y guardar)
Seleccione los componentes para diseñar su aplicación
La App Inventor
se encuentran en el lado izquierdo de la ventana del
diseñador con el título de
. Los componentes son los elementos básicos que se utilizan
para hacer que las aplicaciones en el teléfono Android.Son como los ingredientes de una receta. Algunos componentes son muy simples, como una muestra el texto en la pantalla, o un
componente, que sólo
componente (# 1 a la izquierda) que se toca para
iniciar una acción.
Otros componentes son más elaborados: un dibujo imágenes fijas o animaciones, un
(# 2 izquierda) que puede almacenar
sensor que funciona como un controlador de Wii
y detecta al mover o agitar el teléfono, los c omponentes que envían mensajes de texto, los componentes que desempeñan música y video, componentes que reciben información de los sitios Web, y así sucesivamente.
Para utilizar un componente en su aplicación, tendrá que hacer clic y arrastrarlo hacia el espectador en el centro del
. Cuando se agrega un componente al
(# 1 abajo),
también 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 aplicación. 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 selección de componentes y configuración de las propiedades HelloPurr tendrá un
componente que muestra la imagen de la gatita que ha descargado
anteriormente.Para lograr esto:
. Desde el
paleta, arrastre y suelte el
componente para Screen1 (#
1). Para hacer que el botón tiene una imagen de un gato, en e l
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 ubicación de la kitty.png archivo descargado anteriormente (# 3). Haga clic en elkitty.png archivo, haga clic en "Abrir" y, a continuación, haga clic en "OK".
. Cambiar de Button
Inmueble: "Text de Button1" Delete, dejando el texto de
propiedades en blanco del botón de modo que no hay escritura sobre la cara del gatito. Su diseñador debe tener este aspecto:
Si toda la imagen del gatito no aparece, puede solucionar este problema estableciendo las propiedades Height y Width del botón "Fill Padre". Para ello, haga clic en el componente Button, vaya al panel Propiedades de la derecha, desplácese hasta la parte inferior donde dice Anchura y haga clic en la palabra "Automatic ..." para activar la lista desplegable. Seleccione la opción "Parent Fill". Haga lo mismo con la propiedad Height.
. Desde el
paleta, arrastre y suelte la
componente al Viewer (# 1),
colocándolo debajo de la imagen del gatito. Esto aparecerá bajo la lista de componentes que Label1 .
Bajo el
panel, cambie el
propiedad de Label1 a leer "La mascota del gatito" (#
2). Verá el cambio de texto en el diseñador y en el dispositivo. Cambiar el Tamaño 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.
. Bajo paleta, haga clic en la
cajón y arrastre un
de componentes y
colóquelo en el visor (# 1). Dondequiera que se te cae, aparecerá en el área de la parte inferior del visor de marcado
. En virtud de la
en Agregar ... (# 2) Vaya a la ubicación de la
panel, haga clic
archivo que descargó anteriormente y
subirlo a este proyecto (# 3). En el panel Propiedades, ver que la
actualmente propiedad
dice ... Ninguno . Haga clic en la palabra Nada ... para cambiar el componente Sound1
demeow.mp3 (# 4).
Programación con el Editor de bloques Hasta ahora ha sido la organización de la pantalla y los componentes de su aplicación en el Diseñador , que está en una ventana del navegador web. Para empezar a programar el comportamiento de la aplicación, es necesario ir al Editor de bloques . Si usted no tiene una
Blocks Editor funcionamiento, haga clic en el botón
en la parte
superior derecha de la ventana del diseñador. Si necesita ayuda para conseguir el Editor de bloques empezó, volver a las instrucciones de configuración para obtener ayuda.
Nota: Una manera fácil de cambiar entre el Editor de bloques y el diseñador 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 diseñador 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, continúe con el siguiente paso para empezar a programar su aplicación con los bloques.
Hacer el juego de sonido . En la paleta de Mi Bloques en el lado izquierdo del Editor de bloques, haga c lic en
cajón para abrirlo. Arrastre y suelte el Button1.Click bloque en el área de trabajo
(área abierta a la derecha).
Esos bloques verdes se llaman
bloques. Los bloques de control de
eventos specifiy cómo el teléfono debe responder a ciertos eventos: un botón se ha pulsado, el teléfono 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
.
. Haga clic en el
cajón y arrastre el Sound1.Play bloque y conectar a la sección de
"do" del que Button1.Click bloque. Los bloques se conectan entre sí como piezas de un rompecabezas y se puede oír un chasquido cuando se conecten.
Los bloques de color púrpura y azul son llamados
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 acción a realizar (por ejemplo, reproducción 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
se encuentra en el
. Este conjunto de bloques significa, "cuando se hace clic en Button1, Sound1 jugará". El controlador de eventos es como una categoría de la acción (por ejemplo, se hace clic en un botón) y el comando especifica el tipo de acción y los detalles de la acción (por ejemplo, jugar sonar un sonido específico).
Usted puede leer más acerca de cómo funcionan las manzanas aquí: Bloques Comprensión .
Pruébelo! Al hacer clic en el botón que debe escuchar el maullido de los gatos. Felicitaciones, su primera aplicación 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 diseñador y tratar de usar un componente Player (encontrado en los medios de comunicación) en lugar del componente de sonido.
Empaque su aplicación Mientras que el dispositivo (o emulador de teléfono / tableta) se ha conectado a App Inventor, su aplicación ha estado funcionando en tiempo real en su dispositivo. Si se desconecta el emulador / teléfono / tablet desde el Editor de bloques, la aplicación va a desaparecer. Siempre se puede hacer es volver por volver a conectar el dispositivo. Para tener una aplicación funcionando sin estar conectado a App Inventor, debe "
"la aplicación para producir un paquete de
aplicación (archivo apk).
Para "paquete" de la aplicación en el teléfono, conecte el teléfono al editor de bloques y asegúrese de que el color del icono de teléfono en la parte superior derecha del editor de bloques de color verde.
Luego regresa al Diseñador y seleccione "paquete para el teléfono" en la parte superior derecha de la página de diseño. App Inventor presentará tres opciones para el embalaje:
.1
Puede generar un código de barras (un QR Code), que se puede utilizar para
instalar la aplicación en un teléfono o tableta que tiene una cámara, con la ayuda de un escáner de código de barras, como el escáner de código de barras ZXing (disponible gratuitamente en Google Play).
Nota: este código de barras funciona sólo para su propio dispositivo, ya que está asociada con su cuenta de Google. Si usted quiere compartir su aplicación con otras personas a través de código de barras, que tendrá que descargar el archivo apk. Al ordenador y utilizar un software de terceros para convertir el archivo en un código de barras. Más información se puede encontrar aquí . .2
Puede descargar la aplicación en su ordenador como un archivo
apk, que se puede distribuir y compartir lo que quieras con la instalación de forma manual en otros dispositivos. (A veces llamada"carga lateral".
3.
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!
Desafío! Hacer el ronroneo del gato El reto es hacer que el ronroneo del gato cuando el teléfono se sacude. Ir al editor de bloques y abra la
cajón 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 más acerca de cómo el comportamiento debería funcionar. Aquí, queremos especificar la duración de la vibración. Los números se calculan en milésimas de segundo (milisegundos): para que el teléfono vibre durante medio segundo, tenemos que enchufar un valor de
.
Ir a la incorporada en la paleta, vaya a la
cajón, arrastre el número de bloque y
colocarlo en el socket del Sound1.Vibrate .
Después de colocar el bloque de números, haga clic en el número "123". Destaca el número 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 teléfono y toque la imagen del gato en el teléfono. El teléfono debe vibrar y maullar al mismo tiempo.
Revisión Estas son las ideas clave cubiertos hasta el momento:
Usted construye aplicaciones mediante la selección de los componentes (ingredientes) y luego decirles qué hacer y cuándo hacerlo. Se utiliza el
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 imágenes) a las aplicaciones mediante la carga de su equipo. Utilice el
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 cómo 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 teléfono debe estar configurado y activado para realizar llamadas telefónicas. Si no es así todavía se puede construir PicCall para la práctica, pero el teléfono no va a hacer realidad las llamadas.
Advertencia: PicCall no funciona en todos los teléfonos Android de la aplicación actual de App Inventor: obtendrá un aviso de error en algunos teléfonos cuando se trate de elegir un número de teléfono. Además, no podrá ver todos sus contactos - sólo los creados desde Gmail. Estas limitaciones serán 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 práctica de programación: ayuda a mantener sus programas de derecho en su propia mente, y ayuda a los demás a comprender sus programas.
El teléfono debe contener también algunos contactos con foto. Usted puede utilizar la aplicación Contactos para registrar imágenes de sus contactos. También puede hacer clic en Contactos en su cuenta de Gmail en el equipo y agregar imágenes allí.
Asegúrese de que su ordenador y su teléfono están configurados para utilizar App Inventor. Inicie un nuevo proyecto en la ventana del diseñador. El nombre de "PicCall" y cambiar la pantalla de
para PicCall . Abra el Editor de bloques, haga clic en
y
compruebe que el teléfono se ha iniciado la aplicación de App Inventor.
Primeros pasos
Comience como en HelloPurr colocando un botón en la pantalla. Hacer que el botón de 150 píxeles de ancho por 150 píxeles de alto. Conjunto de botón
a una imagen. Usted
puede también utilizar la imagen del gatito si es útil - que va a cambiar la imagen pronto. Establezca el eso pronto también.
del botón para "presione para llamar", a pesar de que va a cambiar
Cambie el nombre del componente Button a "TopButton" (que va a hacer una llamada "BottomButton" más adelante en el tutorial). Para cambiar de un componente en
, haga clic
botón 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 práctica de programación: ayuda a mantener sus programas de derecho en su propia mente, y ayuda a otros a entender su programs.Don 't confundir al
de un componente con el
aparece en la pantalla. El
de un componente. El
es el que
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 diseñador y los cajones en el editor de bloques.
Hacer llamadas telefónicas
En HelloPurr , que hizo que el teléfono reproduzca un sonido cuando se hace clic en el botón. PicCall casi de la misma, excepto que en lugar de r eproducir un sonido, el teléfono hace una llamada.
App Inventor
componente hace llamadas telefónicas. Usted puede encontrar
PhoneCall en la sección Social de la Paleta. Abra esa sección y arrastre una l lamada en el espectador. No voy a entrar en el área de componentes no visibles. El nombre de "TopCall". Del PhoneCall
propiedad determina el número para llamar.Establecer que, para un número de
teléfono de 10 dígitos al que desea llamar. Así es como el diseñador 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 cajón TopCall, de modo que el controlador de eventos es la siguiente:
Siga adelante y probar lo que tiene hasta ahora en el teléfono: Presione el botón y hacer la llamada. Podrías empaquetar esto como una aplicación en estos momentos. Sería una aplicación muy limitada, siempre llamando al mismo número fijo, algunas personas podrían encontrar que útil.
Información de contacto Teléfono
Además de hacer llamadas de teléfono, App Inventor aplicaciones también pueden obtener información de la lista de contactos del teléfono. Esto se hace con el
componente.
Saque un componente PhoneNumberPicker de la sección social de la paleta, colocarlo bajo TopButton . A PhoneNumberPicker es una especie de botón: al pulsarlo, se trae a colación la lista de contactos del teléfono y le permite elegir a alguien. Cambiar el nombre de la PhoneNumberPicker a "TopPick" y cambie su
a "Presione para escoger un número al que
llamar." Inténtelo pulsando el selector en el teléfono: usted debe ver sus contactos aparecen, y usted puede elegir uno. Nada va a suceder después de que elija, ya que aún no ha dicho a los componentes que hacer nada. Que va a hacer que el próximo.
Utilizando el selector
Cambie a la ventana Bloques y abra el cajón para TopPick . Arrastre el hacer cuando TopPick.AfterPicking bloque.Esto le permite definir un controlador de eventos que diga lo que debe hacer después de haber escogido un número 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 cajón y conectarlo a la toma de vacío. Así es como el controlador de eventos debe ser:
Probar el teléfono: Pulse el selector, seleccione un contacto y un número de teléfono. A continuación, pulse el botón de llamada para realizar la llamada. Agregar un comando al controlador de eventos para establecerTopButton 's
alojamiento
hasta TopPick.PhoneNumber:
Imágenes
Si usted tiene una imagen almacenada con tus contactos, puedes hacer el show botón que, junto con el número de teléfono, en lugar de utilizar siempre la imagen de la gatita. Para ello, agregue un comando al controlador de eventos, para ajustar la de la
característica de TopButton ser el
característica de TopPick :
PhoneNumberPicker tiene dos propiedades que son fáciles de confundir: es la imagen asociada al contacto que se recogió.
.
es la imagen del componente
PhoneNumberPicker tal y como aparece en el diseñador y en el teléfono.
Mejoras
y
Aquí hay algunas variaciones para que usted intente:
Agregar un segundo botón, BottomButton , y una segunda PhoneNumberPicker, por lo que su aplicación le da la opción de dos números. Agregar una etiqueta con instrucciones sobre cómo utilizar la aplicación. Mostrar el nombre de la persona que llama, además del número de teléfono. Utilice una etiqueta adicional para mostrar la información adicional.
Usando PicCall Puede empaquetar PicCall y descargarlo en el teléfono para que pueda utilizarlo cuando no está conectado a la computadora. Pero hay una gran limitación: Cada vez que se reinicia PicCall , comienza fresco y no recuerda lo que eligió la última vez. Más adelante, veremos cómo utilizar el
componentes para crear aplicaciones que pueden recordar información de un
momento a otro. Esta información se denomina datos persistentes .
Revisión
Estas son las ideas claves tratados en este tutorial:
Usted puede nombrar a los componentes por medio del
botón.
App Inventor tiene componentes que pueden utilizar la información almacenada en el teléfono. El contactos y
puede obtener los números de teléfono y fotos de tus puede realizar llamadas.
: La lista que aparece cuando se ejecuta el número de teléfono selector no muestra las imágenes asociadas con sus contactos, en algunos sistemas Android. A pesar de que la imagen no se muestra, la propiedad "Picture" todavía devolverá una imagen que se mostrará cuando se ejecuta la aplicación, siempre que el teléfono tiene una imagen de ese contacto.