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.