Curso Google App Inventor: Hola Mundo

sábado, 13 de noviembre de 2010

AppInventor Google


Continuamos con el curso de App Inventor. Con las tres primeras entregas vimos lecciones introductorias con las que nos relacionamos un poco con el software de creación de aplicaciones que Google ha diseñado. A partir de aquí, las lecciones dejaran de ser tan teóricas y las veremos a manera de tutorial, por lo que para ponerlas en práctica serán necesario contar con una PC (o Mac) en la que se pueda usar el Google App Inventor y un smartphone Android para probar las aplicaciones o en su defecto un emulador de Android como el que nos provee el SDK.


Bueno, hoy vamos a crear un botón que mostrara el famoso “Hola Mundo”, y otro botón para cambiar el color de dicho texto. Es un tutorial bastante sencillo pero nos servirá para aprender a:

- Crear un nuevo proyecto.
- Insertar componentes en un proyecto.
- Cambiar el nombre de un componente.
- Modificar algunas variables de un componente desde la interfaz de App Inventor.
- Usar bloques para programar en App Inventor.
- Usar botones para desencadenar una acción.
- Cambiar una variable de un componente usando otro componente.
- Relacionarnos con las variables “Color”, “Verdadero” y “Falso

Ahora, vamos a la práctica.

Importante: Haciendo click en las imágenes las pueden agrandar.

1. Crear un nuevo proyecto.
1.1. Situados en App Inventor seleccionaremos “My Projects”, texto que esta arriba y a la izquierda, junto al logo de App Inventor.
1.2. Hacemos click en el botón “New”, lo que nos abrirá una ventana, en la que ingresaremos el nombre del proyecto, yo he puesto Nuevo Proyecto. A continuación seleccionamos OK y esto nos llevara a la ventana de nuestro proyecto.


2. Arrastrar componentes a una aplicación.
2.1. Situandonos en la paleta de componentes arrastraremos dos botones y una etiqueta de texto. Para esto hacemos click sostenido sobre Button o Label, y arrastramos hasta el escritorio de teléfono virtual que se nos presenta en pantalla.


3. Renombrar un componente
3.1. Seleccionamos el componente que deseamos renombrar, en el caso del ejemplo es Button1.
3.2. Hacemos click en el botón que dice “Rename”, con lo que se nos abrira una nueva ventana.
3.3. Ahora le ponemos un nombre acorde con su función, en el ejemplo le he puesto BotonColor, pues será el botón que nos servirá para cambiar el color del texto.
3.4. Repite lo mismo con los otros componentes.

4. Cambiar la variable texto en un componente.
4.1. La variable texto sirve para mostrar un texto en un componente determinado, en el caso de un botón es la etiqueta de texto que tiene ese botón, como “Ok”, “Aceptar”, “Cancelar”, entre otros.
4.2. Para cambiar esa variable tenemos que situarnos en las propiedades del componente, a la derecha.
4.3. Buscamos donde dice “Text”, y cambiamos ese valor. En el caso de nuestro ejemplo seria Text fot Button1, yo he cambiado ese texto por “Color”.
4.4. Hagan lo propio con el resto de componentes.

5. Cambiar la variable texto y la variable visibilidad en el componente Label1.
5.1. Esto se hace igual que en el resto de los componentes, en este componente es especialmente importante porque Label sirve precisamente para agregar textos, a nuestra aplicación. Para efectos de nuestro tutorial repasaremos como hacerlo.
5.2. Nos paramos en Propiedades, a la izquierda, y buscamos “Text
5.3. Cambiaremos el Text for Label1 por un “Hola Mundo”.
5.4. Por último, también cambiaremos la variable Visible y la desmarcaremos, esto hará que la etiqueta de texto no aparezca cuando arranquemos la aplicación.

6. Abrir el Block Editor.

7. Insertar la condición click del componente BotonColor.
7.1. Situados en el Block Editor, nos iremos a la pestaña My Blocks, y seleccionaremos el componente BotonColor.
7.2. Arrastraremos la condición BotonColor.Click, que nos va a permitir desencadenar una acción cuando hagamos click en el botón “Color”.


8. Insertar la acción Texto.TextColor en la condición BotonColor.Click
8.1. Ahora arrastraremos la acción Texto.TextColor de modo que encaje en el bloque de la condición BotonColor.Click.

9. Insertar la variable Color en la acción Texto.TextColor
9.1. Nos vamos a la pestaña Built-In.
9.2. Seleccionamos la familia de bloques “Color”.
9.3. Ahora seleccionamos uno de los colores, dicho color será nuestra variable. Yo opte por el rojo para hacer mas vistoso el efecto.
9.4. Arrastramos el color de manera que encaje en la acción Texto.TextColor.

i. Notese que en los pasos 6, 7 y 8 se ha determinado una función para el BotonColor. Así pues, tenemos lo siguiente: Cuando el boton Color sea clickeado (condición) se seleccionara el color del texto Texto como (acción) Rojo (variable). Repasando tenemos entonces que, al cumplirse una condición se desencadena una acción que puede (o no) llevar a la modificación de una variable.

10. Insertar la condición click del componente BotonMostrar
101. Como se explico con BotonColor.

11. Encajar la acción Texto.Visible en la condición BotonMostrar.Click
11.1. También es casi igual a como ya se explico en el punto 8.1.

12. Insertar la variable True en la acción Texto.Visible
12.1. Nos vamos a la pestaña Built-In.
12.2. Seleccionamos la familia de bloques “Logic”.
12.3. Arrastramos el bloque True (que sera nuestra variable) y lo encajamos en la acción Texto.Visible

i. Las variables lógicas son muy usadas en la programación, por lo que conviene familiarizarse con ellas. Es importante notar que True (Verdadero) es lo opuesto a la variable False (Falso), y equivaldría al marcado o desmarcado que hicimos en el paso 5.4 de este tutorial. Entonces tenemos que, cuando se presione el botón Mostrar Texto, será verdadero que el componente Texto es visible, por lo que podremos ver en nuestra aplicación “Hola Mundo”.

12. Descargar la aplicación.
12.1. Nos vamos de nuevo al navegador y en la parte superior derecha veremos un botón que dice Package for Phone.
12.2. Seleccionamos Download to this Computer.

13. Prueba la aplicación.
13.1. Ahora puedes probar la aplicación primero presionando el botón Mostrar Texto y luego el botón color, y veremos si todo ha salido como esperábamos.

Les dejo la que yo hice para que les sirva de referencia.

Con esto termina esta parte de nuestro curso, en la que ya hemos programado nuestras primeras acciones y nos hemos familiarizado con algunas de las cosas que podemos hacer en App Inventor.

Como de costumbre, si necesitan ayuda con algo, tienen los comentarios o tambien pueden contactarme por Twitter: @IDarang

1 comentarios:

  • maxi

    hola rass encontre una app que se llama a2sdfroyo esta en el market y permite enviar cualqier app a la sd por mas de que no nos brinde permiso asi que si quieres postearla yo te dejo hay el nombre con esto ya puedes hacer lo que con cyanogenmod

  • Publicar un comentario