Programación de dispositivos móviles

Empecemos la construcción de nuestra primer app: una imagen de un gatito que maúlla cuando lo acariciamos.

La vamos a llamar «Hola Mundo» porque lo primero que aprendemos en un nuevo idioma es a saludar, y aquí estamos aprendiendo a usar un nuevo «idioma» de computadoras, un nuevo «lenguaje de programación».

A medida que construyas vas a aprender a usar las tres herramientas fundamentales de trabajo de App Inventor:

– El Diseñador, el lugar donde diseñás tu aplicación, y que se ejecuta en el navegador web.

– El Editor de bloques, el lugar donde se configura el comportamiento de la aplicación, y que también se ejecuta en el navegador web.

– El Teléfono

Antes de empezar: tené en cuenta que para usar App Inventor necesitás una cuenta de GMail. Si no la tenés, create una.

{{advertencia | Mensaje = mensaje de advertencia}}

{{nota | Mensaje = mensaje de nota }

¿Listo? Ahora sí, abrí en Internet la página web de App Inventor: http://ai2.appinventor.mit.edu.

Si es la primera vez que usás App Inventor, la Página de proyectos estará vacía:

Originalmente, la página está en Inglés, pero podés seleccionar el idioma que prefieras desde el último menú de la derecha.

Creá un proyecto nuevo haciendo clic en el botón Comenzar un proyecto nuevo.

Escribí el nombre del proyecto: HolaMundo, en una sola palabra, sin espacios, y hacé clic en Aceptar.

En el navegador se abre el Diseñador, el lugar donde se diseñan las pantallas de tu aplicación, organizando los distintos componentes en el Visor (el espacio central).

Los componentes disponibles se encuentran a la izquierda, bajo la etiqueta Paleta, agrupados en secciones:

– Interfase

– Disposición

– Medios

– Dibujo y animación

– Maps

– Sensores

Algunos componentes son muy simples, como el componente Etiqueta (Label en inglés) que sólo muestra un texto en la pantalla, o el componente Botón (Button), que se use para que el usuario de nuestra aplicación haga clic e inicie una acción. Otros componentes son más elaborados, como el Lienzo de dibujo (Canvas) que puede almacenar imágenes fijas o animaciones, o el Acelerómetro que es un sensor de movimiento y permite detectar si el teléfono se está moviendo o se lo agita, u otros componentes que permiten enviar mensajes de texto, reproducir música y video, obtener información de sitios web, etc.

Para utilizar un componente en tu aplicación, hacé clic y arrastralo sobre el Visor en el centro del Diseñador. Cuando se añade un componente al visor, también aparece en la Lista de Componentes a la derecha del visor.

Los componentes tienen propiedades que se pueden ajustar para cambiar la forma en que aparecen dentro de la aplicación. Para ver y cambiar las propiedades de un componente, seleccioná el componente y modificá la propiedad que desees en la pestaña de Propiedades.

Ahora crearemos un botón que tenga la imagen del gatito.

1.  Descargá la imagen de un gatito, por ejemplo, la que se encuentra en este link: http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloPurr/kitty.png (o la imagen que desees)

2.  Hacé clic, arrastrá y soltá el componente Botón a Screen1.

3.  En la lista de Propiedades, debajo de la palabra Imagen, hacé clic en Ninguno para que se abra el menú de opciones, hacé clic después  en Subir archivo, seleccioná de tu computadora el archivo kitty.png (o el que descargaste) y hacé clic en Aceptar.

4.  Eliminá el texto para Button1 que aparece bajo la propiedad Text usando la tecla de retroceso.

Ahora agregaremos una etiqueta que diga «Acariciame» (o lo que vos quieras).

5.  Arrastrá y soltá el componente Etiqueta al Visor, situándolo por debajo del gatito. Aparecerá en la lista de componentes como Etiqueta1

6.  En la ventana de propiedades, cambiá la propiedad Texto (text) de Etiqueta1 para que diga «Acariciame» (o lo que vos quieras). Verás el cambio del texto en el diseñador y en el dispositivo.

7.  Cambiá el Color de Fondo (BackgroundColor) de Etiqueta1, haciendo clic en el cuadro

8.  Cambiá el Color de Texto (TextColor) de Etiqueta1

9.  Cambiá el Tamaño de la Fuente (FontSize) de Etiqueta1 a 30

Finalmente, agregamos el sonido del maullido

10. Descargá el sonido de un maullido (o el mp3 que vos quieras), por ejemplo:

11. Hacé clic en la sección Medios de la Paleta para ver los componentes disponibles en esa sección

12. Arrastra un componente Sonido y colócalo en el Visor. Cuando lo coloques, aparecerá en la parte inferior del Visor marcada como Componentes no visibles (Non-visible components).

13. En la lista de Propiedades, debajo de la palabra Origen, hacé clic en Ninguno para que se abra el menú de opciones, hacé clic después  en Subir archivo, seleccioná de tu computadora el archivo meow.mp3 (o el que descargaste) y hacé clic en Aceptar.

El diseñador debería parecerse a esto:

Ahora vamos a usar el Editor de bloques para definir la forma de comportarse de la aplicación. Le diremos a los componentes lo que deben hacer y cuándo hacerlo, como lo que debe suceder cuando el usuario de tu aplicación pulse un botón. En nuestro caso, vamos a decirle al botón del gatito que reproduzca un sonido cuando el usuario lo pulse.

Hacé clic en el botón Bloques.

La ventana del editor de bloques debe verse como se muestra abajo, con «cajones» para los bloques de programa a la izquierda, y un área grande y vacía para la colocación de bloques para armar el programa, lo que vas a hacer a continuación.

En la pestaña bloques hay dos grupos: Integrados y Screen1.

Los bloques integrados son el conjunto estándar de bloques que están disponibles para cada aplicación a construir.

Los bloques debajo de Screen 1 contienen los bloques vinculados con el conjunto de componentes que has elegido para tu aplicación.

Los botones situados debajo de cada grupo amplían y exponen los bloques cuando se hace clic en ellos.

1.    Hacé clic en el bloque Botón1

2.    Buscá el bloque cuando Boton1.Clic, arrastralo al Visor y soltalo

3.    Hacé clic en Sonido1.

4.    Buscá el bloque llamar Sonido1.Reproducir, arrastralo al Visor y «enganchalo» dentro del bloque anterior

5.    Buscá el bloque llamar Sonido1.Vibrar, arrastralo al Visor y «enganchalo» a continuación del bloque anterior.

6.    Hacé clic en el bloque integrado Matemáticas

7.    Buscá el bloque 0, arrastralo al Visor y enganchalo a la derecha de la palabra «milisegundos» del bloque anterior. Con el teclado cambiá el número «0» por «1000»

Tu Editor de bloques debe parecerse a esto:

Llegamos al final.

Ahora tenemos que probar nuestra aplicación, para ver si realmente funciona.

Es lo que vamos a hacer en la próxima clase.

Saber programar es mucho más que una opción laboral para nuestros jóvenes: es la posibilidad de aprender cómo funciona la cada vez mayor cantidad de dispositivos programables que existen alrededor nuestro.

También, aprender como funciona nuestro cerebro, porque los hombres hemos creado a los robots a nuestra propia imagen.

Con este objetivo, la programación de dispositivos móviles tienen un atractivo adicional: la gran mayoría de nuestros estudiantes tiene uno, ¡qué mejor oportunidad para que conozcan a fondo su funcionamiento!

 

 

El objetivo es, entonces, construir nuestra primer app, una app simple, pero que nos dirá mucho acerca de la programación, tengamos o no conocimientos previos.

En este caso será una imagen de un gatito que maúlla cuando lo acariciamos. La vamos a llamar «Hola Mundo». ¿Por qué? Porque lo primero que aprendemos en un nuevo idioma es a saludar, a decir ¡Hola!, o «Hello». Y aquí, concretamente, estamos aprendiendo a usar, a «hablar», un nuevo «idioma» de computadoras, un nuevo «lenguaje de programación».

 

Para desarrollar nuestra aplicación usaremos AppInventor. Antes de empezar: tené en cuenta que para usar App Inventor necesitás una cuenta de GMail. Si no la tenés, create una.

¿Listo? Ahora sí, abrí en Internet la página web de App Inventor: http://ai2.appinventor.mit.edu.

A medida que construyas vas a aprender a usar las tres herramientas fundamentales de trabajo de App Inventor:

• El Diseñador, el lugar donde diseñás tu aplicación, y que se ejecuta en el navegador web.
• El Editor de bloques, el lugar donde se configura el comportamiento de la aplicación, y que también se ejecuta en el navegador web.
• El Teléfono

 

Si es la primera vez que usás App Inventor, la Página de proyectos estará vacía:

Originalmente, la página está en Inglés, pero podés seleccionar el idioma que prefieras desde el último menú de la derecha.

Creá un proyecto nuevo haciendo clic en el botón Comenzar un proyecto nuevo.

Escribí el nombre del proyecto: HolaMundo, en una sola palabra, sin espacios, y hacé clic en Aceptar.

En el navegador se abre el Diseñador, el lugar donde se diseñan las pantallas de tu aplicación, organizando los distintos componentes en el Visor (el espacio central).

Los componentes disponibles se encuentran a la izquierda, bajo la etiqueta Paleta, agrupados en secciones:

• Interfase
• Disposición
• Medios
• Dibujo y animación
• Maps
• Sensores

Algunos componentes son muy simples, como el componente Etiqueta (Label en inglés) que sólo muestra un texto en la pantalla, o el componente Botón (Button), que se use para que el usuario de nuestra aplicación haga clic e inicie una acción. Otros componentes son más elaborados, como el Lienzo de dibujo (Canvas) que puede almacenar imágenes fijas o animaciones, o el Acelerómetro que es un sensor de movimiento y permite detectar si el teléfono se está moviendo o se lo agita, u otros componentes que permiten enviar mensajes de texto, reproducir música y video, obtener información de sitios web, etc.

Para utilizar un componente en tu aplicación, hacé clic y arrastralo sobre el Visor en el centro del Diseñador. Cuando se añade un componente al visor, también aparece en la Lista de Componentes a la derecha del visor.

Los componentes tienen propiedades que se pueden ajustar para cambiar la forma en que aparecen dentro de la aplicación. Para ver y cambiar las propiedades de un componente, seleccioná el componente y modificá la propiedad que desees en la pestaña de Propiedades.

Ahora crearemos un botón que tenga la imagen del gatito.

1.  Descargá la imagen de un gatito, por ejemplo, la que se encuentra en este link: http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloPurr/kitty.png (o la imagen que desees)

2.  Hacé clic, arrastrá y soltá el componente Botón a Screen1.

3.  En la lista de Propiedades, debajo de la palabra Imagen, hacé clic en Ninguno para que se abra el menú de opciones, hacé clic después  en Subir archivo, seleccioná de tu computadora el archivo kitty.png (o el que descargaste) y hacé clic en Aceptar.

4.  Eliminá el texto para Button1 que aparece bajo la propiedad Text usando la tecla de retroceso.

Ahora agregaremos una etiqueta que diga «Acariciame» (o lo que vos quieras).

5.  Arrastrá y soltá el componente Etiqueta al Visor, situándolo por debajo del gatito. Aparecerá en la lista de componentes como Etiqueta1

6.  En la ventana de propiedades, cambiá la propiedad Texto (text) de Etiqueta1 para que diga «Acariciame» (o lo que vos quieras). Verás el cambio del texto en el diseñador y en el dispositivo.

7.  Cambiá el Color de Fondo (BackgroundColor) de Etiqueta1, haciendo clic en el cuadro

8.  Cambiá el Color de Texto (TextColor) de Etiqueta1

9.  Cambiá el Tamaño de la Fuente (FontSize) de Etiqueta1 a 30

Finalmente, agregamos el sonido del maullido

10. Descargá el sonido de un maullido (o el mp3 que vos quieras):

12. Arrastra un componente Sonido y colócalo en el Visor. Cuando lo coloques, aparecerá en la parte inferior del Visor marcada como Componentes no visibles (Non-visible components).

13. En la lista de Propiedades, debajo de la palabra Origen, hacé clic en Ninguno para que se abra el menú de opciones, hacé clic después  en Subir archivo, seleccioná de tu computadora el archivo meow.mp3 (o el que descargaste) y hacé clic en Aceptar.

El diseñador debería parecerse a esto:

Ahora vamos a usar el Editor de bloques para definir la forma de comportarse de la aplicación. Le diremos a los componentes lo que deben hacer y cuándo hacerlo, como lo que debe suceder cuando el usuario de tu aplicación pulse un botón. En nuestro caso, vamos a decirle al botón del gatito que reproduzca un sonido cuando el usuario lo pulse.

Hacé clic en el botón Bloques.

La ventana del editor de bloques debe verse como se muestra abajo, con «cajones» para los bloques de programa a la izquierda, y un área grande y vacía para la colocación de bloques para armar el programa, lo que vas a hacer a continuación.

En la pestaña bloques hay dos grupos: Integrados y Screen1.

Los bloques integrados son el conjunto estándar de bloques que están disponibles para cada aplicación a construir.

Los bloques debajo de Screen 1 contienen los bloques vinculados con el conjunto de componentes que has elegido para tu aplicación.

Los botones situados debajo de cada grupo amplían y exponen los bloques cuando se hace clic en ellos.

1.    Hacé clic en el bloque Botón1

2.    Buscá el bloque cuando Boton1.Clic, arrastralo al Visor y soltalo

3.    Hacé clic en Sonido1.

4.    Buscá el bloque llamar Sonido1.Reproducir, arrastralo al Visor y «enganchalo» dentro del bloque anterior

5.    Buscá el bloque llamar Sonido1.Vibrar, arrastralo al Visor y «enganchalo» a continuación del bloque anterior.

6.    Hacé clic en el bloque integrado Matemáticas

7.    Buscá el bloque 0, arrastralo al Visor y enganchalo a la derecha de la palabra «milisegundos» del bloque anterior. Con el teclado cambiá el número «0» por «1000»

Tu Editor de bloques debe parecerse a esto:

Llegamos al final.

Ahora tenemos que probar nuestra aplicación, para ver si realmente funciona.

Es lo que vamos a hacer a continuación.

Para probar nuestra app necesitamos un dispositivo Android (celular o tablet), aunque una opción alternativa es usar un emulador de Android sobre PC.

En general, cuando queremos instalar una aplicacion en nuestro celular, abrimos Google Play, buscamos la aplicación que queremos instalar y hacemos clic en el botón «Descargar». Lo que sucede a partir de allí es que se descarga el archivo de instalación (un archivo de extensión «apk»), y luego se instala.

Nuestra aplicación «Hola Mundo», por ahora, no está en Google Play (más adelante aprenderemos cómo subir nuestras propias aplicaciones a Google Play), así que tendremos que hacer la descarga y la instalación de un modo no tan automático.

Igual, App Inventor provee varios modos de hacerlo, veámoslos uno por uno:

1. La función Generar – App (guardar archivo .apk en mi ordenador)

Es el método más simple para generar el apk, descargarlo en nuestro celular, instalar la aplicación y ejecutarla.

• Abrimos la página de App Inventor en nuestro celular Android
• Dentro de AppInventor, hacé clic en el menú Generar, y luego hacé clic en la opción App (guardar archivo .apk en mi ordenador). Se descargará un archivo «HolaMundo.apk» a tu computadora.
• Enviá ese archivo a tu dispositivo Android, vía mail o drive
• En tu dispositivo Android, abrí el archivo apk, te preguntará si querés instalar la aplicación, decile que sí. También puede preguntarnos si estamos de acuerdo en instalar una aplicación de fuentes «no confiables» (para Android, la única fuente confiable es Google Play). Decile que sí. Al finalizar, el ícono de tu nueva aplicación aparecerá en el menú de aplicaciones de tu dispositivo.
• Ejecutá la aplicación y probala.
• Observación: recientemente, algunas aplicaciones de mail (gmail, por ejemplo) han comenzado a bloquear el envío de archivos «.apk», por considerarlos perjudiciales. También puede suceder que no tengamos instalada ninguna aplicación de mail en nuestro celular. Frente a esto hay tres alternativas:
  • Utilizar otra aplicación de mail (outlook o yahoo, por ejemplo)
  • Subir el archivo a un servicio de nube (como Google Drive) para poder luego descargarlo a nuestro celular
  • Abrir la página de AppInventor desde el mismo celular mismo. No es una página fácil de operar desde un celular, pero no necesitamos transferir el archivo.

2. La función Generar – App (generar código QR para el archivo .apk)

Esta opción es una variante de la anterior. Lo que hace es generar un código QR y mostrarlo en pantalla. Luego leemos el código QR con nuestro celular y el lector nos llevará a una página que descargará e instalará la aplicación. Claro, necesitamos tener instalado un lector de QR en nuestro celular, pero es una opción muy rápida y ágil, y también evitamos usar el mail.

3. La función Conectar – AICompanion

Esta función no genera un archivo apk para descargar sino que establece una comunicación permanente, via wifi, entre la PC y el celular. Cualquier cambio que hacemos en AppInventor lo veremos reflejado inmediatamente en el celular. Es, sin dudas, el modo más eficiente de probar nuestra aplicación:

• Instalá la aplicación MIT AI2 Companion en tu celular, la encontrás en Google Play
• En App Inventor, seleccioná del menú Conectar la opción AiCompanion: se mostrará un QR y un código de 6 letras.
• En tu celular abrí AI2 Companion e ingresá ese código (o leé el QR): la aplicación se transmitirá a nuestro celular y la tendremos funcionando allí.

4. La función Conectar – Emulador

Esta opción es para los que no tienen acceso a un dispositivo Android para probar la aplicación, lo que haremos es instalar un emulador de Android en nuestra PC:

• En tu PC, descargá el archivo de instalación desde la página http://appinv.us/aisetup_windows
• Ejecutá el instalador que acabás de descargar. Una vez finalizada la instalación verás el ícono de aiStarter en el escritorio de Windows.
• Ejecutá aiStarter
• Desde la página de AppInventor, seleccioná del menú Conectar la opción Emulador: luego de unos instantes se visualizará la aplicación en la ventana del emulador.

 

5. La función Conectar – USB

Este modo de conexión es un poco más complejo que los dos anteriores, y requiere tener instalado AI2Companion en nuestro celular y aiStarter en nuestra PC. Luego de instalar ambas aplicaciones:

• En tu dispositivo Android, abrí Configuración del sistema – Opciones de Desarrollador, activalas, y asegurate de que esté permitido el modo «Depuración USB»:
  • En los dispositivos con Android 3.2 o mayor podés encontrar esta opción en Ajustes – Aplicaciones – Desarrollo.
  • En los dispositivos con Android 4.0 y posteriores se encuentra en Configuración – Opciones para desarrolladores.
  • En los dispositivos con Android 4.2 y posteriores, las opciones para desarrolladores están ocultas de manera predeterminada. Para que estén disponibles, abrí Ajustes – Información del teléfono y pulsá siete veces sobre Número de compilación. Ahora volvé a la pantalla anterior y en opciones de desarrollo, activá «Depuración USB».
• Conectá tu dispositivo Android al ordenador mediante el cable USB. Asegurate que tu dispositivo se conecta como un «dispositivo de almacenamiento masivo» (no como un «dispositivo multimedia») y que no se monta como una nueva unidad en tu PC. Si lo hace, abrí «Equipo» y desconectá la unidad de disco que se haya montado cuando conectaste el dispositivo Android.
  En Android 4.2.2 y posteriores, en el dispositivo aparecerá una pantalla con el mensaje ¿permitir la depuración USB? la primera vez que lo conectes al ordenador nuevo. Hacé clic en el botón «OK». Esto autentifica el equipo al dispositivo, lo que permite a la PC comunicarse con él. Tendrás que hacer esto para cada equipo que conectes con el dispositivo, pero sólo una vez por equipo.
• Probá la conexión desde esta página: prueba de conexión. Si la prueba falla, abrí esta página: Ayuda de conexión.
• Desde la página de AppInventor, seleccioná del menú Conectar la opción USB: luego de unos instantes se visualizará la aplicación en tu celular.

¡Ahora sí! Ya estamnos listos para probar nuestra primera aplicación Android. ¿Cómo resultó?

¿Llegaste al final? ¿Construiste tu aplicación Android? ¿Hiciste la experiencia de enseñarles a tus alumnos los primeros pasos de la programación? Contanos.