Curso Google App Inventor: Hola

Mundo
sbado, 13 de noviembre de 2010 Publicado por Darang

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 creacin de aplicaciones que Google ha diseado. A partir de aqu,
las lecciones dejaran de ser tan tericas y las veremos a manera de tutorial, por lo
que para ponerlas en prctica sern 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 botn que mostrara el famosoHola Mundo, y otro
botn 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 accin.
- Cambiar una variable de un componente usando otro componente.
- Relacionarnos con las variables Color, Verdadero y Falso

Ahora, vamos a la prctica.

Importante: Haciendo click en las imgenes 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 botn New, lo que nos abrir una ventana, en la que
ingresaremos el nombre del proyecto, yo he puesto Nuevo Proyecto. A
continuacin seleccionamos OK y esto nos llevara a la ventana de nuestro
proyecto.

2. Arrastrar componentes a una aplicacin.

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 telfono 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 botn que dice Rename, con lo que se nos abrira
una nueva ventana.

3.3. Ahora le ponemos un nombre acorde con su funcin, en el ejemplo le he

puesto BotonColor, pues ser el botn 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 botn es la etiqueta de texto que tiene ese botn, 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 aplicacin. 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, tambin cambiaremos la variable Visible y
ladesmarcaremos, esto har que la etiqueta de texto no aparezca cuando
arranquemos la aplicacin.
6. Abrir el Block Editor.

7. Insertar la condicin click del componente BotonColor.

7.1. Situados en el Block Editor, nos iremos a la pestaa My Blocks, y

seleccionaremos el componente BotonColor.
permitir desencadenar una accin cuando hagamos click en el botn Color.

8. Insertar la accin Texto.TextColor en la condicinBotonColor.Click

8.1. Ahora arrastraremos la accin Texto.TextColor de modo que encaje en el

bloque de la condicin BotonColor.Click.
9. Insertar la variable Color en la accin Texto.TextColor

9.1. Nos vamos a la pestaa 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 accinTexto.TextColor.
i. Notese que en los pasos 6, 7 y 8 se ha determinado una funcin para
el BotonColor. As pues, tenemos lo siguiente: Cuando el boton Color
sea clickeado (condicin) se seleccionara el color del
texto Texto como (accin) Rojo (variable). Repasando tenemos entonces que, al
cumplirse una condicin se desencadena una accin que puede (o
no) llevar a la modificacin de una variable.
10. Insertar la condicin click del componente BotonMostrar
101. Como se explico con BotonColor.
11. Encajar la accin Texto.Visible en la condicinBotonMostrar.Click

11.1. Tambin es casi igual a como ya se explico en el punto 8.1.

12. Insertar la variable True en la accin Texto.Visible

12.1. Nos vamos a la pestaa 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
accin Texto.Visible
i. Las variables lgicas son muy usadas en la programacin, por lo que conviene
familiarizarse con ellas. Es importante notar queTrue (Verdadero) es lo opuesto a
la variable False (Falso), y equivaldra al marcado o desmarcado que hicimos
en el paso5.4 de este tutorial. Entonces tenemos que, cuando se presione el botn
Mostrar Texto, ser verdadero que el componente Textoes visible, por lo que
podremos ver en nuestra aplicacin Hola Mundo.
12. Descargar la aplicacin.
12.1. Nos vamos de nuevo al navegador y en la parte superior derecha veremos un
botn que dice Package for Phone.
12.2. Seleccionamos Download to this Computer.
13. Prueba la aplicacin.
13.1. Ahora puedes probar la aplicacin primero presionando el botn Mostrar
Texto y luego el botn color, y veremos si todo ha salido como esperbamos.
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

TAG S : A P P I N V E N T OR , C U R S O , D A R A N G , T U TOR I A L E S

1 COMENTARIOS:

maxi
14 DE NOVI E MBR E DE 20 10 , 17: 38
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 EN LA ENTRADA
ENLACES A ESTA ENTRADA
Crear un enlace
Entrada ms recienteEntrada antiguaPgina principal
Suscribirse a: Enviar comentarios (Atom)
ETIQUETAS

8Pen (1)
actualizacion (41)
Adobe (2)
Air (3)
android (6)
Android 2.3 (1)
Android Market (1)
androidcast (14)
AndroidVe Apps (10)
AndroidVeTeam (7)
Aplicaciones (92)
Apn (3)
appInventor (5)
Apple (5)

Archos (1)
Bada (1)
BlackBerry (3)
blogger (1)
Borrar Aplicaciones (2)
Busybox (1)
Buzz (2)
Celulares (9)
Charm (1)
Colaboradores (4)
Comparativa (1)
Comunicaciones (2)
concursos (3)
Contactos (2)
Curso (4)
Cyanogen (14)
Darang (16)
Desire (1)
Dext (6)
Droid (8)
Droid x (3)
el_Charlie (24)
Encuesta (1)
Encuestas (2)
estadisticas (1)
Eventos (4)
Facebook (6)
Fennec (2)
Flash (5)
Flipout (1)
Froyo (32)
FroyoVE (4)
Galaxy S (10)
Gingerbread (9)
google (4)
Google I/O (7)

Google Reader (1)

Google Tv (4)
GPS (4)
Haleron (1)
Heizor (2)
Honeycomb (2)
Hp (1)
HTC (6)
Htc Evo (1)
Huawei (9)
Incredible (1)
Infografia (1)
inicios (3)
Intel (1)
Intermedio (13)
iPad (1)
IPhone (1)
Juegos (10)
Launcher (6)
Liberacion (2)
libros (29)
Magic (4)
Maleta (1)
Medicina (1)
Milestone (59)
Motoblur (2)
MotoRoi (1)
Motorola (31)
Movistar (1)
Nexus (8)
Nexus One (1)
Nexus S (3)
no (1)
Nokia (3)
Noticias (125)
Opinion (35)

Palm (1)
Personalizacion (9)
Playstation phone (1)
Principiante (9)
PSPhone (1)
QR (1)
rasstaylor (40)
Review (12)
ROMS (19)
root (13)
Ruth (1)
Samsung (13)
Sdk (1)
Seguridad (2)
Seminarios (1)
Sony Ericsson (5)
Spica (5)
symbian (1)
Tablet (5)
Teclado (1)
Telefonos (10)
themes (7)
Tutoriales (51)
Twitter (7)
U8220 (6)
Utorrent (1)
Venezuela (21)
virus (2)
WebOS (1)
Winamp (1)
xperia (6)
xt720 (1)
Xtreme (1)
ARCHIVO DEL BLOG

2011 (24)

2010 (317)

diciembre (34)

noviembre (31)

Resumen de ROMS Froyo para Milestone

HTC Magic vs Huawei U8220

Encuesta: Qu Android posees?

TheFroyoMod2.1.2B ROM Italiana para Milestone

12 posibles caractersticas de Gingerbread que pod...

Vanilla ROM, y Froyo para el Xperia.

MIUI For Milestone... Desde China para Android!

Milestone 2 o Galaxy S?

Actualiza tu Magic Movilnet 32a (Probado)!!

NetFront Life Screen... Revolucin en Launcher

DropThemes para Cronos (Milestone)

Como borrar aplicaciones preinstaladas en un Andro...

Google y su Nuevo Nexus con olor a galleta!!

Revisin de la actualizacin 2.0 de DualVibrance (...

Cronos1.7... La nueva ROM para Milestone

Curso Google App Inventor: Hola Mundo

Openrecovery para Huawei u8220

Curso Google App Inventor: Blocks Editor

Curso Google App Inventor: Interfaz Web

Android arraza con todos, y en unos meses sera el ...

8Pen, ahora es gratis y mas fcil de usar.

Samsung se viene con todo!

Opera Mobile llega a Android

Applanet y APKTor, las market alternativas de Andr...

FroyoModV3 (HONO)... Real potencia en Tu Milestone...

MotoFroyoSense... Milestone al Maximo

Solucin definitiva a la sincronizacin con Facebo...

La oficina desde Android

Pon de nuevo a funcionar la tecla Menu de tu Miles...

Actualizacin 2.1 Xperia X10

Introduccin a Google AppInventor

octubre (37)

septiembre (28)

agosto (23)

julio (15)

junio (34)

mayo (36)

abril (29)

marzo (29)

febrero (21)
Ads by JoniCoupon. More Info |Hide These Ads