Vamos a crear nuestra primera aplicación.
Consistirá en la imagen de un gatito, que al tocarla, maullará.Crear un nuevo proyecto
- Haz clic en New en el lado izquierdo, cerca de la parte superior de la página.
- Introduce el nombre del proyecto acariciagatito (una sola palabra, sin espacios)
- en el cuadro de diálogo que aparece, haz clic en Aceptar.
Selecciona los componentes para el diseño de tu aplicación
Para construir acariciagatito necesitarás una imagen de un gatito y el sonido de un maullido. Descarga estos archivos al ordenador:
Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, bajo el título Palette. Los componentes son los elementos básicos que se utilizan para hacer las aplicaciones en el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente Label, que sólo muestra un texto en la pantalla, o el componente Button que mostrará un botón en la pantalla del teléfono que al ser pulsado iniciará una acción. Otros componentes son más elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imágenes fijas o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un mando de Wii y detecta cuándo movemos o agitamos el teléfono, los componentes que crean o envían mensajes de texto, los componentes que reproducen música y vídeo, componentes capaces de obtener información de sitios Web, y así sucesivamente.
Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, bajo el título Palette. Los componentes son los elementos básicos que se utilizan para hacer las aplicaciones en el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente Label, que sólo muestra un texto en la pantalla, o el componente Button que mostrará un botón en la pantalla del teléfono que al ser pulsado iniciará una acción. Otros componentes son más elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imágenes fijas o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un mando de Wii y detecta cuándo movemos o agitamos el teléfono, los componentes que crean o envían mensajes de texto, los componentes que reproducen música y vídeo, componentes capaces de obtener información de sitios Web, y así sucesivamente.
Para utilizar un componente en tu aplicación, tendrás que hacer clic y arrastrarlo sobre el visor (Viewer), en el centro de la pantalla de diseño. Cuando añadas un componente en el visor, también aparece en la lista de componentes (Components), a la derecha del visor.
Los componentes tienen propiedades, que se presentan en la parte derecha de la pantalla (Properties) y que se pueden ajustar para cambiar la forma en que el componente interactuará con la aplicación. Para ver y cambiar las propiedades de un componente, primero debes seleccionar el componente deseado en la lista de componentes.
Pasos a seguir para seleccionar los componentes y propiedades de configuración
Queremos que acariciagatito tenga un botón con la propiedad de imagen ajustada al archivo que has descargado antes, con la imagen del gatito, kitty.png. Estableceremos esto del modo siguiente:- Arrastra y suelta un Button hasta Screen1, en el área del visor (viewer). El componente Button se encuentra en la sección Basic de la paleta (palette).
- En la lista de propiedades de Button1, el botón que acabamos de disponer, en imagen, haz clic sobre ninguno (none) ...
- Haz clic en agregar (Add) ...
- Selecciona el archivo kitty.png, que has descargado antes.
- Eliminar Text for Button1, que aparece bajo la propiedad text mediante la tecla de retroceso.Tu diseño debería tener este aspecto:
Abre el Editor de bloques (Blocks Editor)
El diseñador (Designer) es una de las tres herramientas clave que utilizarás en la creación de aplicaciones. El segundo es el Editor de bloques. El tercero es el teléfono. Vamos a usar el Editor de bloques para asignar los comportamientos de los componentes, como qué debe suceder cuando el usuario de la aplicación presiona un botón.
El editor de bloques se ejecuta en una ventana separada. Al hacer clic en Abrir el editor de bloques (Open the Blocks Editor) de la ventana de diseño, el archivo de programa del editor de bloques se debe descargar y ejecutar. Este proceso puede tardar 30 segundos o más. Si no se abre el Editor de bloques, podría ser porque el navegador no está configurado para ejecutar aplicaciones Java descargadas de forma automática. Una vez descargado, veremos el archivo del editor de bloques, llamado AppInventorForAndroidCodeblocks.jnlp y debemos abrirlo. Una vez hecho esto, se activa Java, que nos solicitará si queremos ejecutar la aplicación, a lo que responderemos que sí. Entonces, la ventana del editor de bloques debe verse como se muestra abajo, con "cajones" para los bloques de programa a la izquierda, y un gran espacio vacío para la colocación de los bloques que uniremos para montar el programa, que se va a hacer a continuación.
A continuación haremos lo siguiente para completar la aplicación:
A continuación haremos lo siguiente para completar la aplicación:
En el Diseñador:
- Agregar un componente de etiqueta (label) que ponga "Acaricia al gatito".
- Subir el archivo meow.mp3
- Agregar un componente de sonido (sound) que reproduzca el archivo meow.mp3.
- Crear un controlador de eventos que dispare el componente de sonido cuando el usuario pulsa el botón.
Adición de la etiqueta
En la paleta y el visor:
El editor de bloques tiene dos pestañas en la esquina superior izquierda: Integrados (Built-in) y mis bloques (My blocks) . Los botones situados debajo de cada pestaña muestran los bloques cuando se hace clic. Los Integrados son un conjunto de bloques genérico, que encontraremos disponibles independientemente de la aplicación que vayamos a crear. Son siempre los mismos. Los bloques debajo de la pestaña de mis bloques contienen bloques específicos, vinculados con el conjunto de componentes que hemos elegido para la aplicación. Varían según los componentes seleccionados previamente y cambian si cambiamos componentes sobre la marcha.
Para hacer que se reproduzca el sonido al tocar (pulsar) el botón con la foto del gatito, tendrás que pulsar la pestaña My Blocks, desplegar los bloques de la sección Button1 y arrastrar y soltar al lienzo central el bloque When Button1.Click do, que se refiere a la circunstancia que el usuario pulse el botón y, tras desplegar los bloques de la sección Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximándolo al bloque When Button1.Click do, de modo que ambos encajen como en un rompecabezas, lo que la aplicación nos indica con un sonoro clic, perfectamente audible.
Una vez hecho esto, pulsando sobre la foto (esto es, tocando la pantalla en la foto y retirando el dedo rápidamente, lo que android considera un Click), oiremos cómo el teléfono emite el maullido.
- Arrastra y suelta el componente Label hasta el visor (Viewer), situándolo por debajo del gatito. Aparecerá en la lista de componentes como Label1
- Cambia la propiedad Text de Label1 de forma que ponga "Acaricia al gatito". Cuando el cursor cambie a otra área verás aparecer este texto en el botón en tu ordenador y en el dispositivo Android.
- Cambia el Color de fondo (BackgroundColor) de Label1. Puedes cambiar al color que te guste.
- Cambiar el color del texto (TextColor) de Label1. Pásalo a un color que quede bien con el resto.
- Cambiar el tamaño de su fuente (FontSize) de Label1 poniéndola a 30.
Agregando el maullido
En la paleta (Palette):- Haz clic en la sección Media para ampliarla y ver sus componentes.
- Arrastra un componente Sound y colócalo en el visor (Viewer). Independientemente de donde lo dejes caer, aparecerá en la parte inferior del visor, como componente no visible (non-visible-components) y como Sound1.
- Haz clic en Agregar (Add) ...
- Sube el archivo meow.mp3 a este proyecto.
- Establece la propiedad fuente (source) del componente Sound1 haciendo clic sobre la misma. Cuando aparezca el cuadro de selección, pulsa sobre meow.mp3 y sobre OK. Esto asocia el maullido contenido en este archivo a Sound1.
Haz el juego de sonido
Con el Editor de bloques vamos a definir la forma en que la aplicación se va a comportar. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. Vas a decirle al botón, que en realidad es la fotografía del gatito, que reproduzca el sonido del maullido cuando el usuario lo toque. Si los componentes son los ingredientes de una receta, puedes pensar en bloques como las instrucciones de elaboración del plato.El editor de bloques tiene dos pestañas en la esquina superior izquierda: Integrados (Built-in) y mis bloques (My blocks) . Los botones situados debajo de cada pestaña muestran los bloques cuando se hace clic. Los Integrados son un conjunto de bloques genérico, que encontraremos disponibles independientemente de la aplicación que vayamos a crear. Son siempre los mismos. Los bloques debajo de la pestaña de mis bloques contienen bloques específicos, vinculados con el conjunto de componentes que hemos elegido para la aplicación. Varían según los componentes seleccionados previamente y cambian si cambiamos componentes sobre la marcha.
Para hacer que se reproduzca el sonido al tocar (pulsar) el botón con la foto del gatito, tendrás que pulsar la pestaña My Blocks, desplegar los bloques de la sección Button1 y arrastrar y soltar al lienzo central el bloque When Button1.Click do, que se refiere a la circunstancia que el usuario pulse el botón y, tras desplegar los bloques de la sección Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximándolo al bloque When Button1.Click do, de modo que ambos encajen como en un rompecabezas, lo que la aplicación nos indica con un sonoro clic, perfectamente audible.
Una vez hecho esto, pulsando sobre la foto (esto es, tocando la pantalla en la foto y retirando el dedo rápidamente, lo que android considera un Click), oiremos cómo el teléfono emite el maullido.
El Editor de bloques debe asemejarse a esto:
¡Ya tienes tu primera aplicación!
Para más información puedes ver este vídeo con las instrucciones paso a paso:
Fuente:
https://sites.google.com/site/aprendeappinventor/tutoriales/nuestra-primera-aplicacion
