Crea tu propia app

Para programar una app necesitas instalar complejos sistemas, tanto para el proceso de desarrollo como para la emulación, y también, conocer en detalle algunos lenguajes de programación. Sin embargo, existe una alternativa llamada MIT App Inventor, una aplicación web que te permitirá crear tu propia app en forma rápida y sencilla. Ya sea que estés desarrollando una app para tu negocio o, simplemente, quieras explorar este mundo solo como diversión, este sistema te ahorrará horas de trabajo. En este Informe USERS te enseñamos lo que necesitas saber para comenzar.

Qué es una app móvil

Una app, app móvil o aplicación móvil no es otra cosa que un programa que puede ser instalado y ejecutado en un dispositivo móvil, como un smartphone o una tablet. Las aplicaciones móviles están cada vez más difundidas debido a la facilidad de uso y la portabilidad que presentan.

Por lo general, estas apps se encuentran disponibles a través de la plataforma desarrollada por la empresa que se encarga del sistema operativo, como Android o iOS, y pueden ser gratuitas o de pago. Los desarrolladores pueden publicar sus aplicaciones en los sistemas de distribución que corresponda (Play Store para los dispositivos Android y App Store para los de Apple), y gracias a la versatilidad que ofrecen, el mercado de las tecnologías móviles es cada vez mayor.

Android y la programación de apps Android es un sistema operativo desarrollado por Google para funcionar en dispositivos móviles (smartphones, tablets y relojes inteligentes, entre otros), que permite el agregado de programas adicionales para dotarlo de nuevas funcionalidades. Como puede utilizarse en hardware tan variado, la programación en Android requiere ciertas características dependiendo de lo que se pretenda programar. Android Studio fue desarrollado por Google, y puedes instalarlo en tu computadora para programar aplicaciones para Android utilizando el lenguaje Java, lo cual implica cierta curva de aprendizaje. Cuando terminas de programar, debes compilar el código fuente, y así obtendrás un archivo con extensión .APK, listo para instalar en dispositivos móviles. Estos archivos necesitan una serie de certificados que validen quién es el creador y determinado nivel de seguridad; también debes configurar cierta información para el usuario acerca del aspecto que puede tener al ejecutarse, así como indicar en qué versión de Android podría instalarse y en qué dispositivo puede funcionar.

Las aplicaciones móviles están cada vez más difundidas debido a la facilidad de uso y la portabilidad que presentan.

MIT App Inventor

Esta plataforma es un proyecto desarrollado por Google y el MIT, (Massachusetts Institute of Technology), con la intención de crear aplicaciones móviles y lograr el aprendizaje de tecnología. Además, en su web cuenta con diferentes recursos y tutoriales ordenados por temática para ayudarte en tus proyectos.

Para utilizar MIT App Inventor debes entrar en su sitio web https://appinventor.mit.edu. Por un lado, hay una interfaz gráfica con la cual añadir elementos en modo visual y, por el otro, un lenguaje de programación basado en bloques. Esto implica que no es necesario escribir código, lo cual lo vuelve extremadamente sencillo, ya que las estructuras de este lenguaje solo pueden ser utilizadas para los elementos que las componen (no podrás usarlas de forma incorrecta); es algo similar a las piezas de un puzzle, donde cada elemento tiene su forma particular y no encajaría en un sitio inadecuado.Con App Inventor puedes aprender también las estructuras lógicas de todos los lenguajes de programación, dado que todos comparten cierta lógica de trabajo.Las aplicaciones son compiladas directamente en el servidor de la aplicación, de modo que no es necesario que tu equipo se encargue de realizar este paso, y así ahorrarás recursos y tendrás menos complicaciones.

Para utilizar App Inventor precisar tener una cuenta de Gmail, porque se te solicitará el usuario y la contraseña. Si es la primera vez que inicias sesión, se presentará el acuerdo de licencia, que debes aceptar para proseguir. Luego serás redireccionado a la pantalla principal.En la parte superior verás un menú de opciones que se repetirán en todos los módulos del programa; entre ellas puedes seleccionar el idioma. En la parte central hay un listado con los proyectos en los que estás trabajando, los cuales se almacenan online.Para iniciar un nuevo proyecto dirígete a Proyectos/Comenzar nuevo proyecto; también hay un botón que realiza la misma acción, ubicado en el ángulo superior izquierdo. Luego deberás asignarle un nombre y Aceptar. Con esto se creará el entorno de trabajo para el desarrollo de la aplicación. Para volver al listado de proyectos, puedes ir a la barra de menú y elegir Proyectos/Mis Proyectos.En el apartado Generar, de la barra de menú, podrás crear la APK para descargarla en tu computadora, o tendrás la opción de generar un código QR que te permitirá descargarla desde un smartphone. La opción Conectar permite enviar la aplicación al teléfono móvil para testearla a medida que la vas desarrollando.Un dato para resaltar es que App Inventor no trabaja con Internet Explorer, sino que, en realidad, está optimizado para funcionar con Chrome.Para desarrollar tu aplicación, el sistema cuenta con dos partes fundamentales: el modo Diseñador y el modo Bloques. Puedes alternar entre uno y otro usando los dos botones que encontrarás en la barra verde, en la parte derecha; por defecto el programa inicia en modo Diseñador.

Modo Diseñador

La pantalla de este modo está dividida en cuatro paneles, cada uno con sus características:

Paleta: esta parte del modo Diseñador contiene todos los elementos que puedes utilizar dentro de la aplicación. Para hacerlo, solo debes seleccionar el que necesites y arrastrarlo sobre el visor con la imagen de un teléfono. Si tienes alguna duda acerca de algún elemento, a la derecha de cada uno de ellos hay un signo de interrogación que te brindará más información sobre su funcionamiento. Esta parte del panel está constituida por una acordeón vertical donde se agrupan los elementos dependiendo de su tipo. Por ejemplo, la parte superior contiene los de Interfaz Gráfica, o sea, aquellos que verás en pantalla; en otras categorías están los encargados de gestionar el trabajo multimedia, la geolocalización, etc. Los elementos de interfaz gráfica que agregues quedarán dentro de la pantalla del teléfono que se muestra en el segundo panel, mientras que los que no sean visuales aparecerán debajo de este.

Visor: en este panel verás una simulación de tu teléfono y de cómo se mostrará el resultado fi nal dependiendo de los elementos agregados y de cómo los hayas configurado.

Componentes: presenta todos los componentes que has ido agregando; debajo verás un panel de medios que te permite agregar fotografías e imágenes que podrás usar en tu proyecto.

Propiedades: este panel te permite configurar ciertos parámetros de los componentes que tengas seleccionados en el de Componentes. Estos irán cambiando dependiendo del componente que tengas seleccionado.

Modo Bloques

En este sector programarás el comportamiento de tu aplicación; accedes a él presionando el botón llamado Bloques en la barra verde. Podrás ver que está dividido en dos partes:

Panel Bloques: aquí tienes todos los bloques que puedes usar ordenados por tipo, cada uno con un color que lo representa. Si haces clic en un tipo, por ejemplo en Control, se desplegará una ventana que muestra los diferentes tipos de bloques de control, dentro del que deberás seleccionar el que necesites y arrastrarlo al panel Visor. También puedes encontrar los elementos que agregaste en el modo Diseñador, y si seleccionas alguno de ellos, verás bloques de programación referentes a cada uno.

Panel Visor: aquí se muestra visualmente cómo se compone el código creado por los diferentes bloques que vayas agregando. En este panel trabajarás con los diferentes bloques acoplándolos de la forma en que necesites, para lograr así los comportamientos deseados en cada caso.

Programación con bloques

Dado que la programación convencional requiere una curva de aprendizaje con cierto grado de complejidad, hace tiempo que se utilizan diferentes métodos que emplean elementos gráficos con bloques de código, de forma casi transparente para el usuario. Uno de ellos es Blockly. En cada lenguaje de programación encontrarás una serie de estructuras lógicas que se repiten en cada programa que desarrolles (bucles condicionales, funciones, etc.). La idea detrás de Blockly es transformar cada una de esas estructuras lógicas en una especie de pieza de un puzzle, que solo puede acoplarse a otra pieza que sea compatible en cuanto a funcionamiento. Esto significa que únicamente puedes colocar los bloques correctos en los sitios que los admitan. Cada tipo de estructura tiene su forma y color característicos, y cada uno acepta, a su vez, contenedores dentro de sus receptores, los cuales te permitirán, entre otras cosas, pasar parámetros a los diferentes bloques.MIT App Inventor usa el sistema de Blockly y tiene todos los bloques ordenados por tipo, de modo que puedes acceder al que necesites en forma ágil y clara.

Para programar en App Inventor debes ir al modo Bloques y arrastrar, desde el panel Bloques hacia el panel Visor, los bloques que necesites para cada caso en particular. Verás que cada tipo de bloque, además de un color, tiene una forma característica, y eso te permitirá darte cuenta de si son capaces de funcionar en conjunto o si precisas otro tipo de estructura que sea capaz de interconectarlos.

Emulador de Android

Para ir probando el desarrollo de tu app, vas a tener que verificar su funcionamiento a medida que avanzas, y con este fi n puedes usar tu smartphone o un emulador.

Para instalar un emulador, tienes que ir a la página inicial de App Inventor y hacer clic en Recursos/Empezar; en la página que se abre, elige Instrucciones de configuración. Se abrirá una ventana que te ofrecerá diferentes métodos para testear tu aplicación: usar conexión WiFi, compilar desde un Chromebook si lo tuvieras, testear con un emulador o testear con tu teléfono usando un cable USB.El emulador es un programa que simula el funcionamiento de un programa o dispositivo, en este caso, un teléfono móvil. Esto servirá para testear de manera general tu aplicación, aunque se ejecutará más lentamente que en un teléfono y tendrá características que no podrás usar, como el acelerómetro.

Para instalar el emulador, haz clic en Instrucciones; en la ventana que aparece elige tu sistema operativo, descarga el emulador correspondiente e instálalo. El instalador generará un icono en el Escritorio llamado aiStarter. Al ejecutarlo, se abrirá una ventana de comandos que estará a la escucha. Para comprobar que el emulador fue correctamente instalado, debes ir a la barra de menú de App Inventor y usar la opción Conectar/Emulador; esto puede tardar un par de minutos. Al iniciar el emulador, se abre una ventana emulando un teléfono, con su sistema operativo, teclas, botones e, incluso, la pantalla bloqueada y con la aplicación App Inventor instalada.Si quieres probar las aplicaciones en tu teléfono, deberás instalar desde Play Store una aplicación llamada App Inventor 2 Companion, que te permitirá leer el código QR generado y ejecutarlo en tu teléfono para realizar pruebas, además de poder cargarlo por medio de un código de seis caracteres. Esta aplicación es solo a los efectos de probar lo que estás desarrollando; cuando termines, tu aplicación quedará en un formato instalable de Android.