Curso Google App Inventor: Hola Mundosbado, 13 de noviembre de 2010Publicado porDarang

Continuamoscon el curso de App Inventor. Con las tres primeras entregas vimoslecciones introductoriascon las que nos relacionamos un poco con elsoftware de creacinde 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 elGoogle App Inventoryun smartphone Androidpara 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 mostrarael 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 nombrede 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 conlas variablesColor, Verdadero y Falso

Ahora, vamos a la prctica.

Importante:Haciendo click en lasimgeneslas 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 puestoNuevo Proyecto. A continuacin seleccionamosOKy 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 unaetiqueta detexto. Para esto hacemos click sostenido sobreButtonoLabel, y arrastramos hasta el escritorio detelfono virtualque se nos presenta en pantalla.

3.Renombrar un componente

3.1.Seleccionamos el componente que deseamos renombrar, en el caso del ejemplo esButton1.3.2.Hacemos click en el botn que dice Rename, con lo que se nos abrira unanueva ventana.

3.3.Ahora le ponemos un nombre acorde con su funcin, en el ejemplo le he puestoBotonColor, 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 textoque tieneese 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 componenteLabel1.5.1.Esto se hace igual que en el resto de los componentes, en este componente es especialmente importante porqueLabelsirve 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 Text5.3.Cambiaremos elText for Label1por un Hola Mundo.5.4.Por ltimo, tambin cambiaremos la variable Visibley 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. permitirdesencadenar una accincuando hagamos click en el botn Color.

8.Insertar la accinTexto.TextColoren la condicinBotonColor.Click

8.1.Ahora arrastraremos la accinTexto.TextColorde modo que encaje en el bloque de la condicinBotonColor.Click.

9.Insertar la variableColoren la accinTexto.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 elrojopara hacer mas vistoso el efecto.9.4.Arrastramos el color de manera que encaje en la accinTexto.TextColor.

i.Notese que en los pasos6,7y8se ha determinado una funcin para elBotonColor. As pues, tenemos lo siguiente: Cuando el boton Color seaclickeado(condicin)se seleccionara el color del textoTextocomo(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 BotonMostrar101.Como se explico con BotonColor.

11.Encajar la accinTexto.Visibleen la condicinBotonMostrar.Click

11.1.Tambin es casi igual a como ya se explico en el punto8.1.

12.Insertar la variableTrueen la accinTexto.Visible

12.1.Nos vamos a la pestaa Built-In.12.2.Seleccionamos la familia de bloques Logic.12.3. Arrastramos el bloqueTrue(que sera nuestra variable) y lo encajamos en la accinTexto.Visible

i.Lasvariables lgicasson muy usadas en la programacin, por lo que conviene familiarizarse con ellas. Es importante notar queTrue(Verdadero) es lo opuesto a la variableFalse(Falso), y equivaldra almarcadoodesmarcadoque hicimos en el paso5.4de este tutorial. Entonces tenemos que, cuando se presione el botn Mostrar Texto, serverdaderoque el componenteTextoesvisible, por lo que podremos ver en nuestra aplicacin Hola Mundo.

12.Descargarla aplicacin.12.1.Nos vamos de nuevo al navegador y en la parte superior derecha veremos un botn que dicePackage for Phone.12.2.SeleccionamosDownload 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 dejola que yo hicepara 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

TAGS:APPINVENTOR,CURSO,DARANG,TUTORIALES1 COMENTARIOS:

maxi14 DE NOVIEMBRE DE 2010, 17:38hola 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 cyanogenmodPUBLICAR UN COMENTARIO EN LA ENTRADAENLACES A ESTA ENTRADACrear un enlaceEntrada ms recienteEntrada antiguaPgina principalSuscribirse 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