Mi aplicación móvil y no se por donde empezar.

Si tienes las de crear tu primera aplicación móvil, y no cuentas con un equipo de cómputo con grandes prestaciones, como instalar eclipse, y hacer las míticas maravillas para que este sea ejecutado en tu portatil, o no encuentras el SDK de android por ningún lado. O en su caso el android studio sientes que va a quemar a tu equipo. Si es tu caso hay una opción aún mucho mejor se llama appinventor.

AppInventor

Fue creado en el MIT, y es mantenido por ellos. Lo sorprendente es que no requieres mucho recursos de hardware para crear tu primer app para android, lo mas importante no tienes que instalar nada en la compu. Aparte permite generar un apk para que puedas compartir tus aplicaciones con tus amigos y familiares. Permite enlazar al dispositivo móvil (sea teléfono o tableta) para que en tiempo real vayas viendo como va quedando tu aplicación. Puedes acceder a esta herramienta en el siguiente enlace: http://ai2.appinventor.mit.edu/

Claro que te va a pedir crear una cuenta, preferentemente una de gmail. y una vez que hayas podido crear tu cuenta podrás observar que esta aparece en la parte superior izquierda (el nombre de tu cuenta) vea imagen 1. Para hacer el debug de la aplicación en tiempo real se debe de instalar una aplicación en un dispositivo móvil, la aplicación que se instala es la siguiente: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1

Imagen 1. Pantalla principal del appinventor. Fuente: tumblr.

Para crear un proyecto hay que hacer clic en el menú “Proyectos” -> “Comenzar un nuevo proyecto“. En la imagen 1 se puede observar el despliegue de dicho menú. una vez que se ha realizado clic sobre la opción “Comenzar un nuevo proyecto”. Se mostrará un cuadro de dialogo donde deberá de introducir el nombre del proyecto, algo similar a lo que se visualiza en la imagen 2.

Imagen 2. Escribiendo el nombre del nuevo proyecto. Fuente: Tumblr.

Una vez que se haya escrito el nombre del proyecto se deberá de pulsar sobre el botón “Aceptar”, una vez que se haya realizado la acción se podrá tener una ventana como la que se muestra en la imagen 3.

Imagen 3. Nuevo proyecto creado. Fuente: Tumblr.

Cómo se puede observar en la imagen tres se tiene un nuevo “lienzo” de trabajo, por lo que del lado izquierdo se tiene todos los objetos desde los de control, multimedia, sensores y demás. Para agregar un objeto solo hay que hacer clic sobre el objeto que se quiere colocar en la aplicación y arrastrarlo sobre el lienzo blanco donde esta el dispositivo. (vea imagen 4)

Imagen 4. Seleccionar, Arrastrar y Soltar. Fuente: Tumblr.

Como se puede observar en la imagen 4, unav ez que se solto el objeto que se quiere agrear en el lienzo de trabajo, en la sección de componentes se puede observar cada uno de los objetos que se han agregado. Ahora se debe de ir a la sección de “multimedia o medios” es el panel del lado izquierdo y se debe de buscar el objeto “TextoAVoz“, una vez que lo haya localizado, lo selecciona, lo arrastra y lo suelta debajo del botón que agrego previamente. Note que la columna de “componentes” ha cambiado y ya se muestra como en la imagen 4.

Ahora el código

Para introducir el código, debe de ir al botón que dice “bloques” esta opción se encuentra abajo donde esta su cuenta, (el correo con el que se registro) en la esquina superior derecha. Pulse en ese botón y se podrá visualizar como cambia el lienzo de trabajo, debe de tener una pantalla similar a la que se muestra en la imagen 5

Imagen 5. Lienzo para introducir el código. Fuente: Tumblr.

Se puede observar que el “ambiente de trabajo” ha cambiado por completo, ahora en el lado derecho se encuentra una columna llamada bloques con diferentes conceptos, pero por el momento se enfocaran en el que dice: “screan 1”. Note que debajo de el se tiene los dos componentes que se han creado el “botón” y el “texto a voz”. Ahora se debe de realizar un clic sobre el bloque que tiene el nombre de “boton”. Y debe de aparecer una ventana como la que se ve en la imagen 6.

Imagen 6. Eventos del bloque botón. Fuente: Tumblr.

Si todo va bien hasta este punto, se puede notar que se ha desplegado un buen de bloques que responden a eventos propios del botón, como hacer clic sobre él, cuando tiene el foco, entre otras. Para esta actividad se hará clic sobre el evento “clic” del botón 1. Se puede hacer un clic sobre el bloque que se quiere utilizar y / o en su caso arrastrarlo hacia donde esta la “mochila” pero no llevarlo hacia ella.

Ahora se debe de hacer un clic sobre el bloque “Texto a Voz” que se encuentra dentro de los bloques propios del screan 1, y esta debajo del boton 1. Al dar clic sobre él debe de aparecer una ventana similar como la que se muestra en la imagen 7.

Imagen 7. Opciones del bloque texto a voz. Fuente: tumblr.

Si tiene en su navegador una ventana como la que se muestra en la imagen 7, sino lo tiene pulse sobre el bloque texto a voz y tendrá algo similar a dicha imagen. Ahora debe de dar clic en el bloque de color morado, o en su caso arrastrarlo y enbonarlo con el bloque del botón que se tiene en la imagen 6. Al final debe de tener algo como lo que se muestra en la imagen 8.

Imagen 8. Unió de bloques. Fuente: tumblr.

Hasta este punto se ha creado como una especie de asociación entre los dos bloques, algo así , al estilo de un puzzle o rompecabezas. ahora solo hay que indicarle al objeto “textoaVoz” lo que se quiere que se reprodpuzca cuando se pulse sobre el botón. Para ello hay que hacer clic sobre los bloques que tienen la leyenda “control” y dentro de ellos hay uno que se llama “texto“. Se pulsa sobre ese bloque y sedebe de tener algo similar a la imagen 9.

Imagen 9. Bloque de control de texto. fuente:tumblr

Al igual como en los demás bloques hay que seleccionar el primero el que tiene texto vacío. lo arrastra y lo une con los otros dos bloques anteriores. Debe de quedarle algo como lo que se muestra en la imagen 10. Ahora solo hay que agregar el texto en el último bloque que se ha creado. para ello haga doble clic sobre el cuadro y escriba lo siguiente: “hola Mundo Android” sin las comillas.

Imagen 10. Agregando Texto a reproducir. Fuente: Tumblr.

Si todo va bien hasta este punto y si se ha sincronizado el dispositivo móvil con el AppInventor se podrá observar que si pulsa sobre el botón que tiene la app en el dispositivo podrá reproducir lo que se ha escrito en el bloque de texto.

Generando el apk

Como toda aplicación para cualquier dispositivo que use android y si se quiere distribuir hay que generar el el archivo apk, para ello se debe de ir al menú “Generar” opción “Android app (.apk)” al pulsar sobre esa opción se mostrará una ventana donde se esta generando el fichero, y cuando termine, se mostrara las opciones de descarga, es decir, te brindará la opción de que escanear un código QR o de que se descargue a tu equipo de computo. Algo como lo que se muestra en las imágenes del 11 al 13.

Imagne 11. Accediendo al menú Generar, opción Android apk. Fuente: Tumblr.
Imagen 12. Construcción del apk. fuente: tumblr
Imagen 13. Descarga del apk. fuente: Tumblr.
Comparte esta entrada en tus redes sociales