MI PRIMERA APLICACIÓN EN APP INVENTOR.

Bienvenidos a esta guía para crear tu primera aplicación en App Inventor, antes de crear asegúrate de que la instalación sea adecuada.

Cuanto te asegures que el funcionamiento de App Inventor sea el adecuado, sigue los siguientes pasos para construir la aplicación, el objetivo de esta es hacer que la imagen de un gato maúlle cuando esta sea tocada.

Aunque creas que es una aplicación con un desarrollo muy fácil, podrás aprender a utilizar tres fundamentales herramientas que App Inventor contiene. 

Antes de construir la aplicación es necesario que descargues la imagen del gato y el sonido del maullido que este generará a la hora de tocarlo. Para ello debes hacer clic en los hipervínculos resaltados.

1.       Entra al navegador Web y entra a la página web http://ai2.appinventor.mit.edu/ . Si es la primera vez que usas App Inventor, podrás ver que la página de proyectos se encuentra vacía como la que se analiza a continuación. 

2.      Para crear un nuevo proyecto se debe dar clic en Start New Project en el lado izquierdo como señala la imagen.

3. Introduzca el nombre del proyecto como desee llamarlo, este no debe tener espacios, por ejemplo GatoRonroneo, luego dar clic en OK.

4. De manera automática el navegador abrirá el Diseñador, lugar en donde se seleccionan los componentes que tendrá la aplicación. 

Como se puede observar, los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, estos son elementos básicos que se utilizan para hacer las aplicaciones en el teléfono Android. Para utilizar un componente en su aplicación, tendrá que hacer clic y se arrastra 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 debe seleccionar el componente deseado en la lista de componentes.

1.       La aplicación tendrá un botón donde se ajustará la imagen del gato anteriormente descargada para ello se arrastra y suelta un Button hasta el Screen 1.

2.       En la lista de propiedades del Button1, en la propiedad de Image hacer clic en none, para subir la imagen dar clic en el botón Upload File y buscar previamente donde tiene guardada la imagen descargada.

3.       Es importante que se elimine el texto que tiene este botón, en la propiedad de Text se debe borrar el Text for Button1.

4.       También se puede interactuar con las demás propiedades como el color de fuente, el tamaño, tipo de fuente, entre otros.

5.       Agregar otro componente de etiqueta (Label) en donde se ponga “Acariciar al gato”. Esta se puede editar con las propiedades que se encuentran ahí, como colores, tamaño, negrilla, etc.

·         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 curso cambie a otra área verás aparecer este texto en el botón en tu ordenador y en el dispositivo Android.

·         Cambiar el Color de fondo (BackgroundColor) de Label1. Puedes cambiar a verde.

·         Cambiar el color del texto (TextColor) de Label1, por ejemplo pasándolo a megro.

·         Cambiar el tamaño de su fuente (FontSize) de Label1 poniéndola a 20

6.       Agregar un componente de sonido (Sound) para que reproduzca el sonido del maullido. El archivo se puede subir de igual manera que se realizó con la imagen.

·         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.

7. El editor de bloques se ejecuta en una ventana separada. En la parte derecha de la aplicación se ve un botón llamado Blocks. Al dar clic ahí, se tendrá la interfaz para ejecutar las acciones de la aplicación que se está desarrollando.  Como se puede ver en la siguiente 

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

1.       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.