La primera Aplicación - Hola Ciclo - Primeros Pasos

Pues nos ponemos manos a la obra. Vamos a ver paso a paso como realizar nuestra primera aplicación con App Inventor: "Hola Ciclo".

Sí, efectivamente, se trata del archiconocido "Hola Mundo", pero como lo hemos visto en un ciclo de informática ... pues le hemos cambiado el nombre para darle un toque de "originalidad".

Primeros Pasos:

Entramos en la web de App Inventor: http://beta.appinventor.mit.edu ¹
Nos logueamos con un usuario de google²
Nos muestra la pantalla con nuestros proyectos

La damos sobre el botón de nuevo proyecto “New”

 

e introducimos como proyecto nuestro “HolaCiclo” y pulsamos sobre el botón “OK”

 

Vemos que ya tenemos nuestro nuevo proyecto “HolaCiclo”.

A continuación nos mostrará la interfaz web para empezar a introducir componentes. También podremos acceder haciendo click sobre el nombre del proyecto

Durante la realización de la aplicación iremos salvando el proyecto, pulsando sobre el botón “Save”  

 

De todas formas, App Inventor nos irá salvando el proyecto de forma automática.

Comenzamos a utilizar elementos, que se encuentran en la Paleta (Palette) del menú de la izquierda

 

Los primeros componentes son los Básicos (Basic), que incluyen entre otros:

• Label: Etiqueta
• TextBox: Caja de texto
• Button: Botón
• ListPicker: Lista de elementos
• CheckBox: Caja de selección
  

También vamos a tener en cuenta los componentes de la Paleta Screen Arrangement (Disposición de Pantalla):

• HorizontalArrangement: Disposición de los elementos en forma Horizontal (unos al lado del otro)
  
• TableArrangement: Disposición de los elementos en Tablas
  
• VerticalArrangement: Disposición de los elementos en Vertical

 

Nota:

App Inventor no tiene, por ahora, la posibilidad de colocar mediante Drag and Drop los componentes en la pantalla del móvil. Para colocar los componentes en una zona concreta, tendremos que utilizar un conjunto de componentes (3) que nos proporciona el propio App Inventor, en la Paleta Screen Arrangement

 

Para nuestro proyecto vamos a ir añadiendo:

• 3 Paneles Horizontales (HorizontalArrangement), unos encima de otros, con las siguientes características:
  • HorizontalArrangement

→ Nombre: superior

→ Width: Fill Parent

→ Height: 70 pixels

• HorizontalArrangement → Nombre: principal

→ Nombre: principal

→ Width: Fill Parent

→ Height: 250 pixels

• HorizontalArrangement → Nombre: inferior

→ Nombre: inferior

→ Width: Fill Parent

→ Height: 70 pixels

 

A continuación vamos a seguir añadiendo componentes, a cada uno de los paneles que hemos insertado:

• El panel superior, por el momento, lo dejamos en blanco
• El panel principal lo vamos a estructurar mediante la inserción de:
  • Una tabla (TablaArrangment), con las siguientes características:

→ Columns (Columnas): 5

→ Rows (Filas): 5

→ Width (Ancho): Fill Parent (rellena todo el ancho disponible)

→ Height (Alto): Fill Parent (rellena todo el alto disponible)

• Dentro de la tabla iremos insertando los elementos que se indican a continuación, y que se puede ver sus disposición en la imagen de abajo, utilizando las celdas de la tabla:
  • Label (Etiqueta)

→ Text: “Introduce Nombre”

• TextBox (Caja de Texto)

→ Name: txtNombre

→ Text: (vacio)

→ Hint: “Aquí introducimos nuestro Nombre”

• Label (Etiqueta)

→ Text: “Introduce Edad”

• TextBox (Caja de Texto)

→ Name: txtEdad

→ Text: (vacio)

→ Hint: “Aquí introducimos nuestra Edad”

→ NumbersOnly: Activado

• Label (Etiqueta)

→ Text: “Introduce Nombre”

• CheckBox (Caja de Activación)

→ Name: chkEstudia

→ Text: (vacio)

A continuación se muestra cómo debería quedar el panel principal:

 

• Además, añadimos un label entre el panel principal y el inferior:

• Label (Etiqueta)

→ Name: lblMensaje

→ Text: “- - Aquí aparecerá el mensaje correspondiente - -”

 

• Por último, también añadimos elementos en el panel inferior

 

Finalmente, nos quedará algo similar a lo siguiente:

 
Ya tenemos nuestro interfaz preparado. Ahora nos queda “programarlo”. 

 

Nota:

App Inventor es una aplicación que no necesita programación por un desarrollador como tal, ya que se basa en la unión de “bloques” de forma visual, lo que facilita que, con un poco de aprendizaje inicial, se desarrollen aplicaciones potentes sin conocer prácticamente nada de programación. Eso sí, hay que dominar una serie de conceptos básicos relacionados con la programación para que podamos sacarle todo el “jugo” a App Inventor. Poco a poco iremos viendo estos conceptos básicos

Para realizar la parte de “programación”, tendremos que abrir el editor de Bloques mediante el botón “Open Blocks Editor” ... pero esto lo veremos en el próximo Post.


Hasta pronto!

1- esta web debe cambiar cuando el MIT “saque” la versión definitiva y no la beta actual

2- vale el mismo que tengamos para la cuenta de Gmail