Curso Google App Inventor: Hola Mundo sábado, 13 de noviembre de 2010 Publicado por Darang
Continuamos con el curso de App Inventor. Con las tres primeras entregas vimos lecciones introducto introductorias rias con las que nos relacionamos un poco con el sot!are de creaci"n de creaci"n de aplicaciones que #oogle $a dise%ado. A partir de aqu&, las lecciones de'aran de ser tan te"ricas ( las veremos a manera de tutorial, por lo que para ponerlas en práctica serán necesario contar con una PC )o *ac+ en la que se pueda usar el Google App Inventor ( Inventor ( un smartphone Android para Android para probar las aplicaciones o en su deecto un emulador de Android como el que nos provee el D-.
ueno, $o( vamos a crear un bot"n que mostrara el amoso/ amoso/Hola Mundo, Mundo, ( otro bot"n para cambiar cambiar el color color de dic$o teto. s un tutorial bastante bastante sencillo sencillo pero nos servirá para aprender a 4 Crear un nuevo pro(ecto. 4 Insertar componentes en un pro(ecto. 4 Cambiar el nombre de nombre de un componente. 4 *odiicar algunas variables de un componente desde la intera5 de App Inventor. 4 6sar bloques para programar en App Inventor. 4 6sar botones para desencadenar una acci"n. 4 Cambiar una variable de un componente usando otro componente. 4 7elacionarnos con las variables / variables /Color Color, , / Verdadero Verdadero ( /Falso /Falso
A$ora, vamos a la práctica. Importante: Haciendo click en las imágenes las pueden agrandar.
1. Crear un nuevo pro(ecto.
1.1. ituados en App Inventor seleccionaremos /My Proects, teto que esta arriba ( a la i5quierda, 'unto al logo de App Inventor.
1.!. 8acemos clic9 en el bot"n /"e# , lo que nos abrirá una ventana, en la que ingresaremos el nombre del pro(ecto, (o $e puesto "uevo Proyecto. A continuaci"n seleccionamos $% ( esto nos llevara a la ventana de nuestro pro(ecto.
!. Arrastrar componentes a una aplicaci"n.
!.1. ituandonos en la paleta de componentes arrastraremos dos botones ( una etiqueta de teto. Para esto $acemos clic9 sostenido sobre &utton o 'a(el, ( arrastramos $asta el escritorio de tel:ono virtual que se nos presenta en pantalla.
). 7enombrar un componente
).1. eleccionamos el componente que deseamos renombrar, en el caso del e'emplo es &utton1. ).!. 8acemos clic9 en el bot"n que dice /*ename, con lo que se nos abrira una nueva ventana.
).). A$ora le ponemos un nombre acorde con su unci"n, en el e'emplo le $e puesto &otonColor, pues será el bot"n que nos servirá para cambiar el color del teto. ).+. 7epite lo mismo con los otros componentes. +. Cambiar la variable teto en un componente. +.1. ;a variable teto sirve para mostrar un teto en un componente determinado, en el caso de un bot"n es la etiqueta de teto que tiene ese bot"n, como /<9, /Aceptar, /Cancelar, entre otros. +.!. Para cambiar esa variable tenemos que situarnos en las propiedades del componente, a la derec$a.
+.). uscamos donde dice /,e-t, ( cambiamos ese valor. n el caso de nuestro e'emplo seria =et ot utton1, (o $e cambiado ese teto por /Color. +.+. 8agan lo propio con el resto de componentes. . Cambiar la variable teto ( la variable visibilidad en el componente 'a(el1. .1. sto se $ace igual que en el resto de los componentes, en este componente es especialmente importante porque 'a(el sirve precisamente para agregar tetos, a nuestra aplicaci"n. Para eectos de nuestro tutorial repasaremos como $acerlo.
.!. >os paramos en Propiedades, a la i5quierda, ( buscamos /,e-t .). Cambiaremos el ,e-t /or 'a(el1 por un /Hola Mundo. .+. Por ?ltimo, tambi:n cam(iaremos la varia(le Visi(le ( ladesmarcaremos, esto $ará que la etiqueta de teto no apare5ca cuando arranquemos la aplicaci"n. 0. Abrir el loc9 ditor.
. Insertar la condici"n clic9 del componente otonColor.
.1. ituados en el loc9 ditor, nos iremos a la pesta%a *( loc9s, ( seleccionaremos el componente otonColor. permitir desencadenar una acci2n cuando $agamos clic9 en el bot"n /Color.
3. Insertar la acci"n ,e-to.,e-tColor en la condici"n&otonColor.Clic4
3.1. A$ora arrastraremos la acci"n ,e-to.,e-tColor de modo que enca'e en el bloque de la condici"n &otonColor.Clic4 . 5. Insertar la variable Color en la acci"n ,e-to.,e-tColor
5.1. >os vamos a la pesta%a uilt4In. 5.!. eleccionamos la amilia de bloques /Color.
5.). A$ora seleccionamos uno de los colores, dic$o color será nuestra variable. @o opte por el roo para $acer mas vistoso el eecto. 5.+. Arrastramos el color de manera que enca'e en la acci"n,e-to.,e-tColor. i. >otese que en los pasos 0, ( 3 se $a determinado una unci"n para el &otonColor. As& pues, tenemos lo siguiente Cuando el boton Color sea clic4eado (condición) se seleccionara el color del teto ,e-to como (acción) *oo (variable+. 7epasando tenemos entonces que, al cumplirse una condici2n se desencadena una acci2n 6ue puede )o no+ llevar a la modi/icaci2n de una varia(le. 17. Insertar la condici"n clic9 del componente oton*ostrar 171. Como se eplico con otonColor. 11. nca'ar la acci"n ,e-to.Visi(le en la condici"n&otonMostrar.Clic4
11.1. =ambi:n es casi igual a como (a se eplico en el punto 3.1. 1!. Insertar la variable ,rue en la acci"n ,e-to.Visi(le
1!.1. >os vamos a la pesta%a uilt4In. 1!.!. eleccionamos la amilia de bloques /;ogic. 1!.). Arrastramos el bloque ,rue )que sera nuestra variable+ ( lo enca'amos en la acci"n ,e-to.Visi(le i. ;as varia(les l2gicas son mu( usadas en la programaci"n, por lo que conviene amiliari5arse con ellas. s importante notar que,rue )erdadero+ es lo opuesto a la variable False )Balso+, ( equivaldr&a al marcado o desmarcado que $icimos en el paso.+ de este tutorial. ntonces tenemos que, cuando se presione el bot"n *ostrar =eto, será verdadero que el componente ,e-toes visi(le, por lo que podremos ver en nuestra aplicaci"n /Hola Mundo. 1!. Descargar la aplicaci"n. 1!.1. >os vamos de nuevo al navegador ( en la parte superior derec$a veremos un bot"n que dice Pac4age /or Phone. 1!.!. eleccionamos 8o#nload to this Computer. 1). Prueba la aplicaci"n. 1).1. A$ora puedes probar la aplicaci"n primero presionando el bot"n *ostrar =eto ( luego el bot"n color, ( veremos si todo $a salido como esperábamos. ;es de'o la que (o $ice para que les sirva de reerencia. Con esto termina esta parte de nuestro curso, en la que (a $emos programado nuestras primeras acciones ( nos $emos amiliari5ado con algunas de las cosas que podemos $acer en App Inventor. Como de costumbre, si necesitan a(uda con algo, tienen los comentarios o tambien pueden contactarme por =!itterIDarang
T A G S : A P P I N V E N T O R , CURSO , D A R A N G , T U T O R I A L E S
1 C$M9",A*I$:
maxi 1 D ><I*7 D 2010, 1E3F
$ola rass encontre una app que se llama a2sdro(o esta en el mar9et ( permite enviar cualqier app a la sd por mas de que no nos brinde permiso asi que si quieres postearla (o te de'o $a( el nombre con esto (a puedes $acer lo que con c(anogenmod P;&'ICA* ;" C$M9",A*I$ 9" 'A 9",*A8A 9"'AC9 A 9,A 9",*A8A Crear un enlace ntrada más reciententrada antiguaPágina principal uscribirse a nviar comentarios )Atom+ ETIQUETAS •
FPen )1+
•
actuali5acion )1+
•
Adobe )2+
•
Air )3+
•
android )G+
•
Android 2.3 )1+
•
Android *ar9et )1+
•
androidcast )1+
•
Androide Apps )10+
•
Androide=eam )E+
•
Aplicaciones )H2+
•
Apn )3+
• •
appInventor )+ Apple )+
•
Arc$os )1+
•
ada )1+
•
lac9err( )3+
•
blogger )1+
•
orrar Aplicaciones )2+
•
us(bo )1+
•
u55 )2+
•
Celulares )H+
•
C$arm )1+
•
Colaboradores )+
•
Comparativa )1+
•
Comunicaciones )2+
•
concursos )3+
•
Contactos )2+
•
Curso )+
•
C(anogen )1+
•
Darang )1G+
•
Desire )1+
•
Det )G+
•
Droid )F+
•
Droid )3+
•
elJC$arlie )2+
•
ncuesta )1+
•
ncuestas )2+
•
estadisticas )1+
•
ventos )+
•
Baceboo9 )G+
•
Bennec )2+
•
Blas$ )+
•
Blipout )1+
•
Bro(o )32+
•
Bro(o )+
•
#ala( )10+
•
#ingerbread )H+
•
google )+
•
#oogle IK< )E+
•
#oogle 7eader )1+
•
#oogle =v )+
•
#P )+
•
8aleron )1+
•
8ei5or )2+
•
8one(comb )2+
•
8p )1+
•
8=C )G+
•
8tc vo )1+
•
8ua!ei )H+
•
Incredible )1+
•
Inograia )1+
•
inicios )3+
•
Intel )1+
•
Intermedio )13+
•
iPad )1+
•
IP$one )1+
•
Luegos )10+
•
;aunc$er )G+
•
;iberacion )2+
•
libros )2H+
•
*agic )+
•
*aleta )1+
•
*edicina )1+
•
*ilestone )H+
•
*otoblur )2+
•
*oto7oi )1+
•
*otorola )31+
•
*ovistar )1+
•
>eus )F+
•
>eus
•
>eus )3+
•
no )1+
•
>o9ia )3+
•
>oticias )12+
•
•
Palm )1+
•
Personali5acion )H+
•
Pla(station p$one )1+
•
Principiante )H+
•
PP$one )1+
•
M7 )1+
•
rassta(lor )0+
•
7evie! )12+
•
7<* )1H+
•
root )13+
•
7ut$ )1+
•
amsung )13+
•
d9 )1+
•
eguridad )2+
•
eminarios )1+
•
on( ricsson )+
•
pica )+
•
s(mbian )1+
•
=ablet )+
•
=eclado )1+
•
=eleonos )10+
•
t$emes )E+
•
=utoriales )1+
•
=!itter )E+
•
6F220 )G+
•
6torrent )1+
•
ene5uela )21+
•
virus )2+
•
Neb< )1+
•
Ninamp )1+
•
peria )G+
•
tE20 )1+
•
Otreme )1+ ARCHIVO DEL BLOG
•
► 2011 )2+
•
▼ 2010 )31E+
o
► diciembre )3+
o
▼ noviembre )31+
7esumen de 7<* Bro(o para *ilestone
8=C *agic vs 8ua!ei 6F220
ncuesta Mu: Android poseesQ
=$eBro(o*od2.1.2 7<* Italiana para *ilestone
12 posibles caracter&sticas de #ingerbread que pod...
anilla 7<*, ( Bro(o para el Operia.
*I6I Bor *ilestone... Desde C$ina para AndroidR
*ilestone 2 o #ala( Q
Actuali5a tu *agic *ovilnet 32a )Probado+RR
>etBront ;ie creen... 7evoluci"n en ;aunc$er
Drop=$emes para Cronos )*ilestone+
Como borrar aplicaciones preinstaladas en un Andro...
#oogle ( su >uevo >eus con olor a galletaRR
7evisi"n de la actuali5aci"n 2.0 de Dualibrance )...
Cronos1.E... ;a nueva 7<* para *ilestone
Curso #oogle App Inventor 8ola *undo
Curso #oogle App Inventor loc9s ditor
Curso #oogle App Inventor Intera5 Neb
Android arra5a con todos, ( en unos meses sera el ...
FPen, a$ora es gratis ( mas ácil de usar.
amsung se viene con todoR
Applanet ( AP-=or, las mar9et alternativas de Andr...
Bro(o*od3 )8<><+... 7eal potencia en =u *ilestone...
*otoBro(oense... *ilestone al *aimo
oluci"n deinitiva a la sincroni5aci"n con Bacebo...
;a oicina desde Android
Pon de nuevo a uncionar la tecla *enu de tu *iles...
Actuali5aci"n 2.1 Operia O10 Introducci"n a #oogle AppInventor
o
► octubre )3E+
o
► septiembre )2F+
o
► agosto )23+
o
► 'ulio )1+
o
► 'unio )3+
o
► ma(o )3G+
o
► abril )2H+
o
► mar5o )2H+
o
► ebrero )21+ Ads by JoniCoupon. More Info |Hide These Ads