Crea tu aplicación Android con App Inventor

Hola, este es mi primer post para Aprender a Programar aplicaciones Android con App Inventor.

Antes de empezar:

• Debes tener creada una cuenta en Google
  
• Necesitas tener instalado en tu Pc Java 6 como mínimo : acceder a web de Java
  
• Necesitas instalar el software de App Inventor: Descargar Instalador
  
• Si teneis un Teléfono con Android entra aquí y sigue las instrucciones para configurarlo
  
• si no tienes un teléfono Android deberás instalar un emulador. Visita este link

Comenzamos e ingresamos en la web de AppInventor:

Parte 1: Crear un proyecto

Creamos un nuevo proyecto y le asignamos un Nombre.

y Ahora visualizaremos el Panel de Diseño del App Inventor:



En la parte izquierda podemos encontrar todos los componentes que podemos incluir en nuestra aplicación y que más tarde explicaremos con un ejemplo práctico. Ahora vamos a ver como se accede al panel “Blocks” , que será donde agregaremos las funciones para la aplicación android.

Hacemos Click en "Open Blocks":



Ahora Pulsamos "Connect to Device" para conectar con el Teléfono o con el Emulador en caso de no tenerlo.

Este proceso te pedirá que descargues un archivo y lo ejecutes bajo JAVA RUNTIME del pc.

Una vez conectado veras que tu teléfono te está mostrando la aplicación en Directo.

Bien, ya tenemos todo preparado para comenzar a Programar.

Parte 2: Comenzamos a Programar

Vamos a crear una aplicación que reproduzca un sonido cuando pulsamos un botón y además nos muestre un texto de notificación cuando se reproduzca este sonido.

En la siguiente captura podemos ver cómo se divide el escenario y para qué sirve cada ventana del panel .



Una vez que tengamos claro para qué sirve cada ventana de App Inventor, comenzamos:

Arrastramos un componente Button al escenario y otro componente. Nos quedará algo así:



Ahora seleccionando en el Panel Componentes cada uno de ellos modificamos las propiedades dandole nombr, Por ejemplo al componente Button lo podemos llamar Boton1 y al Sound = sonido1. También podemos modificar el texto que aparece en el botón en la ventana propiedades. Por ejemplo: “Reproducir sonido”

Marcamos el componente que se llama ahora “sonido1″ y en el panel propiedades clickamos en source para subir un sonido.

Descargar el archivo de sonido desde aqui:

Ahora vamos a Abrir el Panel de Bloques “Open the Blocks Editor” y nos encontramos algo así:



Vale, pues ahora hacemos lo siguiente: Clickamos en “My Blocks” que nos mostrará los Bloques que podemos usar en base a los componentes que hemos insertado anteriormente.

Cogemos y clickamos en Boton1 y se desplegará un listado de elementos tipo puzzle a usar.

Pues bien, arrastramos el primero “button.click”. Así controlaremos el evento que se va a producir cuando hagamos click.

Como vereis se queda un hueco en blanco en el centro. Pues ahora clickamos en el menú de bloques en “sonido1″, y arrastramos el elemento “sonido1.Play” hacia el centro de boton1.click.

Así debe quedarte:



Ahora vamos a hacer que además de que suene un sonido cuando pulsemos el botón nos salga un mensaje de notificación.

Para ello volvemos al panel del escenario y arrastramos un componente Notifier, que lo podeis encontrar dentro de Other Stuff.

Una vez hecho esto, volvemos al panel de Bloques, y dentro de My Blocks podemos encontrarlo, asi que hacemos click y se desplegaran sus elementos disponibles ( el nombre del Notifier lo dejamos como está)

Arrastramos el elemento llamado “Notifier1.ShowAlert” y lo colocamos dentro del Boton1, justo debajo de Sonido1.play.

Y como vereis se nos queda una pieza del puzzle vacía, donde tenemos que encajar otro elemento.

Vale, el elemento que debemos encajar es el texto que aparecerá, así que vamos a “Built -in” en el panel de bloques, y clickamos en Text, donde se desplegará un montón de elementos, donde arrastramos la primera opción y la encajamos justo en el eslabón que faltaba por rellenar.

Si clickamos 2 veces en la palabra “text”, se edita y podemos escribir el texto que queramos, por ejemplo: “Sonido Reproducido”.

Y quedaría todo así:



Ahora, si quereis ver como ha quedado en vuestro teléfono, solo teneis que darle a connect Device y en unos segundos se iniciará la aplicación en vuestro móvil o tablet android, y cuando pulseis saldra todo lo que hemos hecho. Y el sonido que debe reproducirse es un gran aplauso, por lo bien que lo has hecho.

También podeis descargaros la aplicación e instalarla en vuestro teléfono desde el panel del escenario en Package for Phone.

Espero que os haya servido como primera toma de contacto con el App Inventor.

En el próximo tutorial nos meteremos más de lleno en tratamiento de datos y componentes más importantes.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.