Introducción al desarrollo de apps móviles

1. Aplicaciones móviles

Una aplicación móvil, también llamada app móvil, es un tipo de aplicación diseñada para ejecutarse en un dispositivo móvil, que puede ser un teléfono inteligente o una tableta. Incluso si las aplicaciones suelen ser pequeñas unidades de software con funciones limitadas, se las arreglan para proporcionar a los usuarios servicios y experiencias de calidad.

A diferencia de las aplicaciones diseñadas para computadoras de escritorio, las aplicaciones móviles se alejan de los sistemas de software integrados. En cambio, cada aplicación móvil proporciona una funcionalidad aislada y limitada. Por ejemplo, puede ser un juego, una calculadora o un navegador web móvil.

Tipos de aplicaciones móviles

Las aplicaciones móviles vienen en muchas formas y tamaños. Estas son algunas de las más populares en las últimas tendencias en el panorama móvil.

• Aplicaciones de juegos: esta es la categoría más popular de aplicaciones móviles. Según un estudio reciente, los juegos móviles representan el 33% de todas las descargas de aplicaciones, el 74% del gasto de los consumidores y el 10% de todo el tiempo dedicado a usar aplicaciones. Los juegos para móviles más exitosos como Candy Crush Saga o Angry Birds se dan a conocer en todo el mundo.
• Aplicaciones empresariales o de productividad: estas aplicaciones ocupan una gran parte del mercado hoy en día porque las personas son cada vez más propensas a usar sus teléfonos inteligentes y tabletas para realizar muchas tareas complejas sobre la marcha. Estas están diseñadas para aumentar la productividad y minimizar los gastos, ya que permiten a los usuarios completar una amplia gama de tareas, desde comprar nuevos cartuchos para impresoras de oficina hasta contratar un nuevo gerente de oficina.
• Aplicaciones educativas: esta categoría incluye aplicaciones móviles que ayudan a los usuarios a adquirir nuevas habilidades y conocimientos. Las aplicaciones de juegos educativos son una excelente herramienta para los niños. Muchas aplicaciones educativas también resultan ser populares entre los profesores, que las utilizan para organizar mejor su proceso de enseñanza o educarse más.
• Aplicaciones de estilo de vida: esta amplia categoría de aplicaciones abarca compras, moda, probadores virtuales, entrenamiento, citas y aplicaciones de dieta. Estas aplicaciones se centran básicamente en varios aspectos del estilo de vida personal. Estas brindan a los clientes un acceso conveniente a productos y métodos de pago sin inconvenientes para una experiencia de compra óptima. Obtenga más información sobre la definición de comercio móvil y los tipos de comercio móvil.
• Aplicaciones de entretenimiento: estas aplicaciones permiten a los usuarios transmitir contenido de video, buscar eventos, chatear o ver contenido en línea. Estas aplicaciones generalmente aumentan la participación de los usuarios al notificar a los miembros sobre actualizaciones y productos recién agregados.
• Aplicaciones de utilidad: son tan obvias que apenas nos damos cuenta de que las estamos usando. De hecho, las aplicaciones de servicios públicos suelen tener los tiempos de sesión de usuario más cortos: la gente las usa para hacer las cosas y luego seguir adelante. Los tipos más populares de aplicaciones de servicios públicos son los lectores de códigos de barras, los rastreadores o las aplicaciones de atención médica.
• Aplicaciones de viaje: la idea principal detrás de esta categoría es ayudar a los usuarios a viajar fácilmente. Las aplicaciones de viajes transforman un teléfono inteligente o una tableta en un diario de viaje y una guía que ayuda a los usuarios a descubrir todo lo que necesitan saber sobre el sitio que están visitando.

En este curso nos centraremos en el desarrollo de apps móviles educativas y para dispositivos móviles  con sistema operativo Android. 

2. Paradigma Orientado a Eventos

La Programación orientada a eventos es un paradigma de programación en el que la estructura y la ejecución de los programas van determinados por los sucesos o acciones que ocurren en el sistema, definidos por el usuario o por el propio sistema.

La programación orientada a eventos es muy fácil de usar y es adecuada para aquellas personas que tienen poco conocimiento en programación. Con los lenguajes orientados a eventos se pueden realizar en poco tiempo aplicaciones sencillas y muy funcionales, utilizando interfaces gráficas en las que se insertan componentes o controles a los que se le programan eventos. Dichos eventos permiten al usuario realizar una serie de acciones lógicas para un determinado programa.

Dentro de las herramientas de programación orientadas a eventos se encuentra el Mit App Inventor, este maneja una serie de componentes o controles con propiedades que se pueden cambiar para que el componente se muestre en pantalla de forma diferente o actúe de otra manera dentro de la aplicación. Para cambiar las propiedades de un componente, primero debemos seleccionar el componente deseado en la lista de componentes, también debemos tener en cuenta que hay algunos valores de propiedades de algunos componentes que no son modificables y otros que sí lo son.

Otro aspecto a tener en cuenta en la programación orientada a eventos es el comprender y tener bien claro el concepto de los siguientes términos:

• Evento
• Propiedades
• Métodos

¿Qué son los eventos?

Los Eventos son las acciones sobre el programa, como por ejemplo:

• Clic sobre un botón
• Doble clic sobre el nombre de un fichero para abrirlo
• Arrastrar un icono
• Pulsar una tecla o una combinación de teclas
• Elegir una opción de un menú
• Escribir en una caja de texto
• O simplemente mover el ratón

Cuando se produce o dispara un evento sobre un determinado componente, se da inicio a un conjunto de acciones programadas por el usuario para ese evento concreto.

¿Qué es una propiedad?

Una propiedad es una asignación que describe algo sobre un componente, como por ejemplo:

• Alto
• Ancho
• Texto
• Tamaño
• Etc.

Dependiendo de la propiedad, esta se puede asignar en tiempo de diseño usando la ventana Propiedades y/o en tiempo de ejecución en el momento de programar el control.

Las propiedades en el momento de programar el control se muestran con color verde.

Las propiedades se usan para cambiar la forma de los componentes o controles de la aplicación, por ejemplo el tamaño de la letra de un control, el tipo de letra, la alineación, etc.

¿Qué es un método?

Un método es una función que es llamada desde el programa, a diferencia de los procedimientos, estos no son programados por el usuario, ya que vienen pre-programados en el lenguaje de programación, los métodos realizan tareas típicas y comunes para todas las aplicaciones; por eso están incluidos dentro del lenguaje de programación, esto con el fin de liberar al usuario de la tarea de programarlos. Cada tipo de componente tiene sus propios métodos; debemos tener en cuenta que los métodos solo pueden ser ejecutados en tiempo de ejecución no en tiempo de diseño. Algunos ejemplos de métodos son:

• En una ventana, el método MOVE, que mueve un formulario en un espacio de dos dimensiones en la pantalla
• Otros SetFocus, LostFocus, AddItem etc…

Los métodos en App inventor los encontramos en los bloques de programación de los diferentes componentes y estos aparecen con color violeta.

En resumen, las aplicaciones creadas con App Inventor no llevan a cabo un conjunto de instrucciones en un orden predeterminado, sino que reaccionan a eventos. Al hacer clic en un botón, arrastrar el dedo o tocar en la pantalla es lo que conocemos como eventos. Cuando se produce un evento, la aplicación reacciona llamando a una secuencia de instrucciones como establecer el color de fondo de un botón a azul o cambiar el texto de una etiqueta.

Los eventos pueden ser divididos en 2 tipos diferentes:

• Automáticos como al abrir una ventana.
• Iniciados por el usuario como hacer clic en un botón, tocar o arrastrar en la pantalla, inclinar el teléfono.

3. App Inventor

MIT App Inventor es una herramienta desarrollada por Massachusetts Institute of Technology (MIT) para facilitar el proceso de crear aplicaciones para Android, en comparación con la programación tradicional de aplicaciones Android. Se basa en una interfaz web en la que desarrollaremos la aplicación, mediante programación por bloques, y una Companion App, o aplicación “compañera”, en la que se visualizarán en tiempo real las modificaciones que se realicen en la interfaz web y donde podremos ir probando nuestra aplicación a medida que la desarrollemos.

Requisitos

Los requisitos de uso son:

• Disponer de un equipo PC (Windows, Mac, Linux) con conexión a Internet.

• Un dispositivo móvil con SO Android. 

• Tener una cuenta Google: usuario y contraseña.

• Se recomienda utilizar un navegador web como Google Chrome o Mozilla Firefox.

• No es necesario tener ningún conocimiento de programación para desarrollar las aplicaciones.

Acceso, registro y cambio de idioma. 

Primero, tenemos que ir a la dirección de acceso: https://appinventor.mit.edu/. 

Una vez dentro, presionamos el botón “Create Apps!

Luego,  debemos abrir nuestra  cuenta de Google.

Después, tenemos que hacer clic en el botón de abajo que dice “I accept the terms of service!”

Nos deberá aparecer la siguiente ventana emergente. Allí marcaremos la opción que dice “Do Not Show Again” y presionamos el botón “Continue”.

En la siguiente ventana emergente presionamos el botón “Close”.

A continuación deberá aparecer la siguiente ventana. En la barra de herramientas debemos cambiar el idioma al español. Para ello haremos clic sobre “English” y se desplegará los idiomas disponibles y buscamos y seleccionamos “Español”. 

Hasta aquí ya accedimos, nos registramos y cambiamos el idioma del entorno de programación a español. 

3.1. Interfaz de app inventor

App Inventor trabaja con Proyectos que puedes crear desde cero, importar para modificarlos e icluso puedes trabajar de forma colaborativa sobre el mismo proyecto.

Al construir las aplicaciones para Android trabajarás de tres herramientas: Gestor de Proyectos, App Inventor Desiñador y App Inventor Bloques:

Esquema de trabajo de App Inventor

1. Proyectos: crear, editar, guardar, exportar, importar nuestros proyectos.
2. Conectar: probar el funcionamiento de nuestra App, ya sea en el emulador propio de MIT App Inventor o bien en un dispositivo móvil. Con esta opción podrás ir haciendo pruebas a medida que vas programando la App.
3. Generar: una vez tengas la App definitiva, vas a poder exportarla al PC o bien al móvil directamente mediante la tecnología QR, para de este modo hacer un uso real de lo que has creado.
4. Ayuda: acceso a todo tipo de información propia de App Inventor, desde tutoriales hasta foros de la comunidad.
5. Mis proyectos: acceso a la librería en la que se almacenan todos los proyectos que tienes guardados en tu perfil.
6. Galería: acceso a las aplicaciones compartidas en la comunidad, tutoriales y demás documentos compartidos por otros usuarios de la comunidad de MIT App Inventor.
7. Guía: acceso a documentación de soporte oficial que te ayudará con dudas que se puedan plantear.
8. Idioma: podrás cambiar el idioma de la interfaz web tal y como has visto anteriormente.

LA BARRA DE LA APP ABIERTA

Esta Barra de la App abierta es la que ofrece las opciones que hacen referencia a la app que actualmente se encuentra abierta.

• Ventanas: permite cambiar la ventana del programa con la cual quieres trabajar en un momento concreto, ya que una app puede disponer de varias ventanas.
• Añadir ventanas: permite añadir nuevas ventanas a la app que estás desarrollando.
• Eliminar ventanas: permite eliminar las ventanas del proyecto en el que trabajamos
• Ventanas – Esta pestaña da la opción de cambiar la ventana del programa con la cual quieres trabajar en un omento concreto, ya que una app puede disponer de varias ventanas.
• Añadir ventanas – Esta opción permite añadir nuevas ventanas a la app que estas desarrollando.
• Eliminar ventanas – Esta opción permite eliminar las ventanas del proyecto.

Diseñador: permite acceder a la ventana de diseño para colocar los objetos que forman la interfaz de nuestra App y hacer la composición del aspecto, los botones y el resto de los elementos que tendrá.

Bloques: permite añadir instrucciones en forma de bloques a los elementos que se han agregado en el apartado de Diseñador. Desde aquí programaremos el funcionamiento de nuestra App, añadiendo funcionalidades a los objetos que hemos colocado.

3.2. Ventana Diseñador

VENTANA DISEÑADOR: La ventana diseñador está dividida en cinco grandes apartados:

3.3. Ventana bloques

Como ya hemos visto anteriormente, por un lado, deberás desarrollar visualmente tu App agregando y distribuyendo los componentes dentro de la pantalla, es decir trabajaras en la vista Diseñador. También deberás programar con bloques el comportamiento de estos componentes. Para ello seleccionaremos la vista Bloques donde podremos trabajar el lenguaje de programación del App Inventor. Cada objeto o componente tiene una serie de instrucciones organizadas por secciones de manera predeterminada. En la siguiente imagen podrás ver el aspecto de la sección de Bloques.

En el apartado de instrucciones genéricas (Integrados), si haces clic en la sección de control verás que hay bloques tales como (Si -Entonces) que es del tipo control de condiciones y puede ser aplicado a la gran mayoría de bloques.

En el apartado de instrucciones especificas (Screen) encontrarás bloques como el siguiente que te permitirá cambiar el tamaño de letra de un determinado componente como un botón, por ejemplo, a un determinado tamaño.

4. Creando mi primer App

Los primeros pasos que debemos dar antes de arrancar con la creación de nuestra app son el de definir el objetivo de la app y luego, el de hacer un boceto (esto lo podemos hacer en un papel o bien con alguna herramienta digital) de cómo nos gustaría que fuera su interfaz (esto lo haremos desde la ventana de diseñador). 

4.1. Creando la interfaz de nuestra app

Mi primer aplicación en App Inventor

Paso 1: Crear el nuevo proyecto

Ahora vamos a crear nuestra primera aplicación en App Inventor, para ello presionamos el botón que dice “Comenzar un proyecto nuevo”. Luego, definir nombre al mismo.

Importante: El nombre no puede tener espacios

Paso 2: Crear la interfaz de la app

Para empezar a agregar los elementos y poder diseñar la interfaz de nuestra app empezaremos por seleccionar la opción “Disposición” (la encontramos en la Paleta a tu izquierda). 

Solo vamos a trabajar con las disposiciones horizontal, vertical y tabular. 

Estas disposiciones, conocidos como layout, son elementos que permiten ubicar la posición de los controles en la pantalla.

La Disposición tabular permite ubicar los componentes elementos que presta un servicio de comunicación cuando se diseñan interfaces en una tabla que maneja filas y columnas. Los componentes están ubicados en una cuadrícula, con no más de un componente visible en cada celda. Si varios componentes ocupan la misma celda, solo el último componente será el que se visualice.

En la ventana de propiedades, correspondientes al elemento seleccionado, debemos seleccionar la cantidad de columnas y registros (filas) que tendrá nuestra app. También podemos ajustar el alto y ancho del contenedor. 

• Automático: a medida que se van agregando elementos este va agrandando.

• Ajustar al contenedor: el alto y ancho se va a ajustar al tamaño de la pantalla o bien de otro contenedor en el que pudiera estar. 

• O bien, podemos ajustar manualmente ya sea indicando pixeles o porcentaje. 

La disposición vertical es un elemento de formato en el que se pueden colocar otros elementos que deben aparecer uno debajo de otro (el primero estará arriba, el siguiente debajo, etc).

Dentro de sus propiedades podemos modificar el alineado de los elementos dentro de ella (DispHorizontal y DispVertical), su color de fondo, el tamaño y tenemos la posibilidad de agregar una imagen de fondo. 

La disposición horizontal permite ubicar elementos que deban mostrarse de izquierda a derecha.

Las propiedades de este elemento son similares a las de la disposición anterior. 

Si seguimos nuestro boceto podemos ver que vamos a necesitar un contenedor vertical.

Para ir agregando los elementos sólo los debemos arrastrar a la pantalla del celular que se encuentra dentro del área de Visor. 

Ahora vamos a agregar tres de los elementos más comunes para ir construyendo nuestra app. 

Ahora vamos a cambiar algunas propiedades de esos elementos. 

A medida que vamos agregando elementos en el área del visor, estos van apareciendo dentro del área de componentes. 

Para poder cambiar las propiedades de algún elemento en especial debemos seleccionarlo desde la lista de componentes 

Empecemos por contenedor DisposiciónVertical1:

Cambiamos la disposición, ajustamos el alto y el ancho y ahora vamos a agregarle una imagen de fondo. 

Sigamos con las propiedades de la etiqueta. Las propiedades de la misma tienen que ver con el color de fondo, tipo y tamaño de la fuente, la alineación, el texto que queremos que aparezca escrito en ella. 

Continuamos con las propiedades del botón. Las propiedades que podemos modificar son similares a las de la etiqueta. Cada componente tiene propiedades particulares y que están relacionadas con la funcionalidad del componente. 

Finalmente, vamos con las propiedades de los campos de textos. 

Básicamente, el campo de texto 1 y el campo de texto 2 son iguales en cuanto a la forma pero los dos cumplen funciones diferentes dentro de nuestra app. Mientras que en el primer campo se utiliza para escribir el nombre del usuario, el segundo solo se debe mostrar el saludo y el usuario no debe poder modificar ese texto (saludo). Para ello para el segundo campo vamos a modificar su propiedad “ReadOnly” para que ese campo solo sea de lectura y no de escritura. 

Como nos queda un espacio vamos a agregar una imagen en nuestra aplicación. Para ello nos vamos a la Paleta →Interfaz de Usuario →Imagen. 

Luego, vamos a modificar sus propiedades. Por ahora vamos a modificar sus propiedades de Foto, y sus dimensiones de alto y ancho. 

La interfaz de nuestra primera App ya está casi lista. 

Ahora vamos a trabajar con las propiedades de Screen1

Vamos a cambiar el título de la ventana para ello vamos a Componentes-->Screen1-->Propiedades-->Título. 

En la propiedad de título escribimos el nombre que le queremos dar a nuestra app, en mi caso "MiPrimerApp". 

Otra cosa que debemos cambiar es el la propiedad ícono, esto nos va a permitir personalizar el ícono que aparecerá en el menú de nuestro dispositivo móvil una vez instalada la app. Para ello vamos a Componentes-->Screen1-->Propiedades-->Ícono-->Subir archivo-->Seleccionar archivo-->Buscamos y seleccionamos el archivo-->Aceptar

Despues de esas modificaciones nos tendría que quedar así:

  

Hasta ahora podemos decir que:

• Los componentes de deben arrastrar desde el Panel hasta el Visor.

• El primer elemento o componente a agregar es el de disposición. 

• Se deben utilizar disposición vertical, horizontal, tabular o una combinación de ellos para poder ubicar los componentes en la pantalla. 

• Todos los componentes de la interfaz gráfica tienen propiedades las cuales cambian su aspecto y en algunos casos su comportamiento. 

• En el área Componentes podemos ver la lista de los elementos que vamos agregando a nuestra app. 

4.2. Programando nuestra app

Paso 3: Programar la app

Lo primero que debemos hacer es pensar en qué componente y qué acción (evento) sobre ese componente va a iniciar la ejecución de nuestro programa. En el caso de nuestra app, cuando presionamos el botón “Saludar” el programa debería tomar el nombre escrito en el campo de texto 1 para mostrarlo en el saludo (hola “nombre”) que aparecerá en el campo de texto 2. 

Como ya definimos que el evento que va iniciar la ejecución del programa es cuando se presione el botón vamos a seleccionarlo. 

Luego, nos aparecerán una serie de bloques propios del componente. Los de colores naranja son los eventos, los morados son metodos (cosas que sabe hacer) y  los de color verde son las propiedades. Primero, seleccionamos el evento correspondiente que para nuestro caso sería “Cuando botón1. clic” y lo arrastramos y soltamos al área del visor. 

Para ir armando el programa pensemos en esto ¿Qué debe pasar cuando haga clic sobre el botón? Para pensar en una posible respuesta nos basamos en lo que escribimos al inicio sobre el objetivo y  su funcionamiento.

Entonces, cuando presiono el botón “Saludar”, al nombre (texto) que el usuario escribió en el campo de texto 1 se le debe agregar (unir) la palabra Hola y mostrar esa oración en el campo de texto 2, modificando así su propiedad texto. Veamos cómo lo podemos hacer. 

Después de haber definido el evento (cuando botón1.clic) cliqueamos sobre el elemento “CampoDeTexto2” y buscamos un bloque de propiedad (color verde) que empiece con la palabra “poner” puede ser cualquiera y ya veremos por qué. 

4.3. Verificando el funcionamiento de nuestra app

Paso 4: Verificar el funcionamiento de la App

Para verificar que nuestra App funciona y sin tener que instalarla en el celular el entorno ofrece tres posibilidades de las cuales 2 generalmente presentan muchos inconvenientes, las de Emulador y USB. Por ello solo vamos a trabajar con la de AI Companion. 

Instalar MIT AI2 Companion en el dispositivo Android

Para poder utilizar nuestro dispositivo como banco de pruebas tenemos que descargarnos de Google Play Store una aplicación que se llama “AI2 Companion”. Pueden escanear el QR con sus celulares para que los direccione a la Play Store y puedan descargarlo e instalarlo. 

Buscarla en Google Play Store con ese nombre y descargarla ahora. Ocupa poco, y sólo hará falta descargarla una vez. Abriremos ahora en el móvil la aplicación que hemos descargado, haciendo clic sobre el icono MIT AI2 Companion. Puede estar en la página principal o dentro del grupo de Aplicaciones.

Una vez terminada la App la podemos verificar de la siguiente manera: 

En el entorno de App Inventor debemos desplegar el menú “Conectar” y seleccionar la opción “AI Companion”. 

Aparecerá la siguiente ventana 

Luego, en el celular, debemos abrir la aplicación y cuando se abra, elegiremos Connect with code (color naranja), y escribiremos el código de letras y números (alfanumérico) que aparece en la pantalla del ordenador.

Quien pueda leer códigos QR puede hacerlo desde la pantalla ahora pulsando en el botón azul scan QR code. Para que esto sea posible el ordenador y el dispositivo deben estar en la misma red, es decir, que deben tomar la IP del mismo rango, típicamente del mismo enrutador (router).

Cuando se establezca la conexión en la pantalla de la computadora aparecerá una barra de progreso.

4.4. Descarga e instalación de la app

Paso 5: Descargar e instalar la app en el dispositivo móvil

Descarga e instalación de App en el dispositivo móvil

Para descargar el apk (Android Application Package) y poder instalarlo en el dispositivo móvil es necesario hacer clic sobre “Generar” y luego en “Android App (.apk)

Luego aparecerá una barra de progreso que indica el progreso en la generación del apk. 

Al terminar de generar surgirá una nueva ventana que nos dará dos alternativas de descarga. La primera es presionar el botón “Download .apk now” para descargar el archivo a la PC (luego lo tendremos que transferir por USB al dispositivo móvil) o bien escanear el QR con la cámara del dispositivo para descargarlo en el mismo. 

Cualquiera sea la forma elegida el proceso de instalación es el siguiente:

Primero te va a advertir que el archivo puede ser dañino (un virus) pero tu bien sabes que no lo es porque tu lo desarrollaste. Así que presiona en “Descargar de todos modos”

Una vez descargado hay que instalarlo. 

4.5. Enlaces de interés

• Documentación de referencia: http://appinventor.mit.edu/explore/get-started.html
• App Inventor en Español: https://sites.google.com/site/appinventormegusta/
• Curso de App Inventor de la Escuela de Informática de Ciudad Real: http://webpub.esi.uclm.es/img/upload/plugin/ESI-TechLab-AppInventor2-2015beta.pdf
• Kio4: tutoriales: http://kio4.com/appinventor/index.htm
• Tu App Inventor: http://www.tuappinvetorandroid.com/blog/tutoriales/
• Curso de introducción a MIT App Inventor de Diwo BQ: http://diwo.bq.com/course/curso-de-introduccion-a-mit-app-inventor/
• Guía de iniciación a App Inventor: https://codeweek.eu/docs/spain/guia-iniciacion-app-inventor.pdf
• Introducción a App Inventor Universidad Salamanca: http://diarium.usal.es/igallego/files/2015/06/Basicos-APPInventor-Manual-de-Introduccion.pdf
• Cómo se programan apps para móviles con App Inventor: http://soloelectronicos.com/2014/04/21/co-mo-se-programan-apps-moviles-con-mit-app-inventor-bloques-logicos/