Vous êtes sur la page 1sur 10

Si tienes una idea de aplicacin pero no eres programador, App Inventor es tu

solucin. Con este completo entorno grfico, podrs desarrollar software para
Android de manera muy sencilla.
Si te interesa el mundo de la programacin de aplicaciones mviles y buscas
una herramienta que te facilite la tarea, App Inventor es para ti. App
Inventor es un entorno de desarrollo visual para Android originalmente
propuesto por Google y finalmente implementado por el MIT (Massachusetts
Institute of Technology) con el apoyo del gigante americano.
Su gran ventaja frente a otras plataformas similares es la potencia de su entorno
de trabajo: encontrars muchas funciones ya definidas en forma de bloques y la
flexibilidad a la hora de combinarlas te permitir potenciar al mximo tu
creatividad.
Su carcter gratuito la hace recomendable para todo tipo de usuarios. Eso s, si
quieres exprimir al mximo todas sus posibilidades, necesitars un cierto tiempo
de adaptacin y aprendizaje de la herramienta. Lo ideal es que tengas unas
mnimas nociones generales sobre programacin para poder disear ms
fcilmente el flujo de acciones y comprender en profundidad la utilidad de cada
bloque, aunque no ser necesario que modifiques el cdigo fuente.
Aprende en este prctico cmo iniciarte en App Inventor y lnzate al mercado
de las apps. Si adems requieres ms informacin, te recomendamos que eches
mano de los tutoriales que encontrars en la seccin Learn y en Reference
Documentation, para conocer en profundidad cada uno de los bloques.

NIVEL:AVANZADO

1. Pon a punto el programa


Visita en primer lugar la web oficial de App Inventor. Necesitars tener
una cuenta Google para acceder al servicio. App Inventor est compuesto por
un conjunto de herramientas que abarcan las diferentes tareas en la
construccin de la aplicacin: diseo, definicin del
comportamiento y simulacin. Antes de pasar a utilizarlas, habrs de comprobar
que cuentas con todo lo requerido. Acude a la pgina oficial y
selecciona Setup. Pincha en Test your system y chequea tu navegador.
Es necesario tener instalado Java y los sistemas operativos soportados son Mac
OS X 10.5/10.6, Windows XP/Vista/7, Ubuntu 8+ y Debian 5+. Cuando
acabes, pincha en Done? Lets move on! y pasars a la descarga del software de
escritorio App Inventor. En el ltimo paso, escoge si deseas probar tus

aplicaciones con tu propio telfono o utilizar el emulador. Este ltimo simular


un dispositivo Android que podrs manejar a travs del ordenador como si de
un mvil real se tratara.

2. Panel de diseo
El panel de diseo es accesible desde el navegador. En la pgina principal,
pincha en Invent/Create Mobile Apps. En My Projects, selecciona New e introduce
un nombre para el nuevo proyecto. Una vez dentro, explora todas sus opciones.
En Palette/Basic, hallars utilidades bsicas como botones, insercin de
imgenes, cuadros de texto, etiquetas La subseccin Media contiene
componentes como acceso a la cmara de fotos y vdeo, galera de fotografas,

sonido, reproductor de vdeo Social incluye los elementos necesarios para


seleccionar contactos, nmeros de telfono de la agenda, correos electrnicos

Sensors, por su parte, nos brinda la oportunidad de utilizar sensores para


obtener informacin tal como la localizacin geogrfica o la orientacin del
dispositivo. Para conocer algn detalle ms sobre cada una de ellas, pincha en
el smbolo de la interrogacin que encontrars junto a su ttulo.

3. Tu primera pantalla
Pincha en Screen 1 en la seccin Components. En la columna de la derecha se
listarn sus propiedades. Establece una imagen de fondo cargndola
con BackgroundImage. Para que no se distorsione, es conveniente que utilices
un fondo plano o alguno de los tamaos por defecto para este tipo de
pantallas. Carga tambin otra imagen en Icon para que sirva de grfico
identificativo de la aplicacin y marca en Scrollable si deseas permitir el uso
del scroll.
Ahora, aade un botn arrastrando hacia la pantalla el elemento Basic/Button.
Seleccinalo en Components y agrega una imagen desde Image. Elimina el texto
por defecto Text for Button 1 que aparece en el recuadro Text y escoge una
forma en Shape; puedes decidir entre circular, rectangular u oval. Incluyamos
tambin una caja de texto con Basic/TextBox con la leyenda Pincha sobre el
icono.

Por ltimo, si quieres redistribuir las formas en la pantalla, juega con las
opciones de Screen Arrangement. Crea una tabla con TableArragement o
establece la alineacin horizontal o vertical de varios elementos
con HorizontalArrangement y VerticalArrangement, respectivamente.

4. Elementos no visibles
Se denominan no visibles porque no se muestran fsicamente en el panel de
diseo, como por ejemplo los archivos de sonido. Prueba a agregar un fichero a
travs de la opcin Source en Media/Sound. El procedimiento para agregar estos
elementos es el mismo que para aquellos visibles: arrstralo hacia el visor.
Aparecern listados en la parte inferior del panel, bajo el epgrafe Non-visible
components. Otros elementos similares son Camera, Camcorder o Player, al igual
que todos los incluidos en la seccin LEGO MINDSTORMS. Esta ltima incluye
componentes, registrados bajo la marca Lego, que te permitirn construir
juegos de robtica.

5. Editor de bloques
Antes de continuar introduciendo elementos, vamos a ilustrar el procedimiento
para relacionarlos entre s, utilizando para ello el botn que hemos creado y el
fichero de sonido cargado. Pincha en Open the Blocks Editor. Se generar
un fichero Java con extensin JNLP que debers guardar en tu PC. brelo y
acceders al editor de bloques. Acude ahora a la pestaa My Blocks y vers la
lista de todos los bloques que hayas aadido en el panel de diseo.
Selecciona Button 1 y observa sus opciones, que aparecern en forma de piezas
de puzzle. Hay tipos de piezas que indican acciones y otras para componentes.
Tu misin es encajarlas para conseguir el comportamiento deseado. Probemos a
establecer que al pinchar sobre nuestro botn se reproduzca nuestro fichero de
msica. Para ello, une en el editor los bloques Button1.Click con Sound1.Play y
listo.

6. Utiliza el emulador

Gracias al emulador, podremos desarrollar nuestras aplicaciones incluso si no


contamos con un smartphone o es de otra marca, y chequear su correcto
funcionamiento. En el editor de bloques, pincha en New emulator y se
desplegar un telfono Android tpico. Para conectar el editor con el telfono,
pincha en Connect to Device y selecciona el emulador. La transferencia de
informacin puede llegar a tardar dos o tres minutos, as que ten paciencia.

Despus, accede al men de aplicaciones como si de un dispositivo real se


tratara y prueba la tuya.
El procedimiento para utilizar un mvil Android desde el editor es anlogo.
Conctalo al ordenador mediante un puerto USB y, antes de iniciar la
simulacin, comprueba que tu configuracin est habilitada para hacer este tipo
de uso del telfono. Para ello, sigue los pasos que encontrars en la pgina
oficial de la aplicacin. Recuerda que por ahora los archivos se encuentran
exclusivamente en tu ordenador.

7. Crea una lista


Volvamos al panel de diseo para aadir el elemento ListPicker, que permite la
eleccin entre una serie de opciones. Este est asociado a un botn, con el que
invitaremos al usuario a escoger entre la lista. Nosotros haremos la nuestra
propia con los nmeros de PC Actual. Despus acude al editor de bloques para
crear una variable global, en nuestro caso Nmeros, con Builtin/Definition/Variable. Luego, agrega el bloque Make a list, que encontrars
en Built-in/Definition/Lists, para definir varias posibilidades para la variable
global.

Finalmente, incluiremos bloques Text con tantas cadenas de texto como valores
a tomar. Cuando termines, debes indicar que, cuando se cargue la pantalla
inicial Screen1, se inicialice la lista creada. Para ello, une un bloque My
Blocks/Screen1/Screen1.Initialize con otro My Blocks/ListPicker1.Elements y este a

su vez con nuestra variable global a travs de My Blocks/My Definitions/global


Numeros.
Cuando el usuario abra la aplicacin y pinche en nuestro botn Escoge un
nmero, se mostrarn ante l los nmeros de la revista que hayamos
determinado. Para indicar la accin a realizar despus, puedes utilizar el
bloque My Blocks/ListPicker1.AfterPicking.

8. Empaqueta tu app
Siguiendo procedimientos similares a los explicados, poco a poco, puedes ir
aadiendo nuevas funciones. En el panel de diseo, pincha en Add Screen si
quieres que tu aplicacin contenga ms de una pantalla. No olvides guardar
peridicamente el trabajo con Save y establecer un punto al que retornar
cuando consigas un hito a travs de Checkpoint. Cuando consideres que has
finalizado la app, busca en la esquina superior derecha el men Package for
Phone.
Encontrars tres opciones. La primer, Show barcode generar un cdigo
QR asociado a tu cuenta y aplicacin y para tu uso propio. Para bajarte el
programa a tu ordenador, escoge Download to this computer y el cdigo fuente
se guardar en forma de archivo APK. Para descargarla en tu telfono
inteligente, opta por Download to Connected Phone y recuerda que necesitars
tener el editor de bloques abierto, as como el dispositivo conectado a tu PC
mediante el puerto USB.

9. Publcala en Google Play Store


La publicacin de tu aplicacin no es un paso obligatorio, pero si optas por
abrirla al gran pblico, debes saber que para publicarla en Google Play
Store debe contener tanto un cdigo como un nombre de versin. El primero
es un nmero entero que indica si la app ha sido actualizada a una versin
superior o inferior.
El segundo es una cadena de texto que tpicamente especifica esta misma
informacin como 1.0, 2.0, etc. Podrs definir ambos en el panel de diseo, en
los apartados VersionCode y VersionName, y debers actualizarlo cada vez que
quieras subir una nueva versin a la Red. Despus, debers descargar, como ya
te hemos explicado en el paso anterior, el archivo APK en tu ordenador.

Por ltimo, enlaza con Google Play


Store en https://play.google.com/apps/publish/signup y sigue las
instrucciones para introducir tus datos como desarrollador, cargar el fichero en
la plataforma, definir una descripcin y establecer un precio. La cuenta de
desarrolladores tiene una cuota de registro de 25 dlares. No olvides tampoco
consultar la poltica de comisiones de Google en caso de que tu app no sea
gratuita.

- See more at:


http://www.pcactual.com/articulo/zona_practica/paso_a_paso/paso_a_paso_soft
ware/12544/crea_una_aplicacion_para_los_dispositivos_android.html#sthash.tUa
Eoccv.dpuf

Vous aimerez peut-être aussi