Desarrollo de aplicaciones Android con App Inventor 2 E-Book

Tomás Domínguez Mínguez

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch
• Veröffentlichungsjahr: 2022

Seitenzahl: 408

Beschreibung

Si ha mostrado interés en este libro, es probable que sienta curiosidad por saber cómo se desarrollan las aplicaciones que habitualmente maneja en su teléfono Android. También es posible que tenga necesidades específicas que no se terminan de satisfacer e, incluso, que esté pensando en llevar a la práctica una idea original. Gracias a las explicaciones de este libro sobre App Inventor 2, podrá crear sus propias aplicaciones sin miedo al fracaso. App Inventor 2 es una herramienta web gratuita de programación visual para el desarrollo de aplicaciones Android que solo requiere de unos conocimientos básicos de programación. Al ser un entorno web, no es necesario instalar ningún software en su ordenador, ya que solo precisa de un navegador. Además, como App Inventor 2 se trata de un entorno visual (similar a Scratch), las instrucciones de los lenguajes de programación tradicionales se sustituyen por bloques que se conectan entre sí como las piezas de un puzle. A pesar de su aparente sencillez, App Inventor 2 facilita la creación de todo tipo de aplicaciones, en las que podrá hacer uso de: •Componentes de desarrollo de interfaces clásicas como etiquetas, campos de texto, botones, menús, imágenes, etc. •Componentes multimedia que permiten grabar o reproducir audio y vídeo. Incluso, interaccionar con la aplicación utilizando la voz. •Componentes de dibujo y animación que habilitan la creación de sprites (pequeñas imágenes) que se mueven por la pantalla y se relacionan con otros sprites y el propio usuario (imprescindibles en cualquier juego). •Componentes que simplifican el manejo de los sensores del teléfono. Todas estas funcionalidades se explican en el libro de forma progresiva mediante múltiples ejemplos. En ellos realizará diversas aplicaciones prácticas que le ayudarán a consolidar, paso a paso, los conocimientos que vaya adquiriendo. De esta forma, y sin darse cuenta, el desarrollo de aplicaciones Android se convertirá en un juego de niños.

Leseprobe

Desarrollo de aplicaciones Android con APP Inventor 2

Primera edición, 2023

© 2023 Tomas Domínguez Mínguez

© 2023 MARCOMBO, S. L.

    www.marcombo.com

Cubierta: ENEDENÚ DISEÑO GRÁFICO

Maquetación: cuantofalta.es

Revisor técnico: Rubén Beiroa

Corrector: Nuria Barroso

Directora de producción: M.a Rosa Castillo

La presente publicación tiene una finalidad educativa y se destina a la formación de estudiantes y profesionales. Su objetivo es informar de manera precisa y concisa. La elaboración del contenido, aunque se ha trabajado de modo escrupuloso, no puede comportar una responsabilidad específica para el autor ni el editor de los posibles errores o imprecisiones que pudiera contener la presente obra.

En el formulario que se desarrolla como práctica en el capítulo 6, se emplea la imagen de un perfil de usuario genérico extraída de Paomedia, con licencia Creative Commons Attribution 3.0 Unported (CC BY 3.0), así como los botones de cancelar y confirmar, procedentes de Pixel perfect y hqrloveq, de Flaticon.com.

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.

ISBN: 978-84-267-3551-5

Producción del ePub: booqlab

TABLA DE CONTENIDO

  1. INTRODUCCIÓN

  2. SU PRIMERA APLICACIÓN CON APP INVENTOR

2.1 Acceso al servicio

2.2 Desarrollo de la aplicación

2.2.1 Diseño de la pantalla

2.2.2 Edición del código de bloques

2.3 Prueba de la aplicación con MIT AI2 Companion

2.4 Instalación de la aplicación en un dispositivo móvil

  3. EL ENTORNO DE DESARROLLO

3.1 Barras de herramientas

3.1.1 Barra de herramientas general

3.1.2 Barra de herramientas de la aplicación

3.2 Editores

3.2.1 Editor de pantallas

3.2.2 Editor de bloques

  4. CONFIGURACIÓN DE LA PANTALLA

4.1 Alineación de componentes

4.2 Fondo de pantalla

4.3 Tema

4.4 Barra de título

4.5 Orientación

4.6 Apariencia de la aplicación en el escritorio

  5. COMPONENTES DE DISEÑO

5.1 Contenedores de disposición horizontal y vertical

5.2 Contenedores de disposición tabular

5.3 Práctica. Joystick

  6. COMPONENTES DE INTERFAZ DE USUARIO

6.1 Propiedades y eventos comunes

6.1.1 Propiedades comunes

6.1.2 Eventos comunes

6.2 Práctica. Formulario de solicitud de datos personales

6.3 Lista de componentes gráficos

6.3.1 Etiqueta

6.3.2 Imagen

6.3.3 Botón

6.3.4 Campo de entrada de texto y de contraseñas

6.3.5 Selector de fechas y selector de horas

6.3.6 Selector de lista

6.3.7 Desplegable

6.3.8 Casilla de verificación

6.3.9 Notificador

6.3.10 Interruptor

6.3.11 Deslizador

6.3.12 Pantalla

  7. PROGRAMACIÓN BASADA EN BLOQUES

7.1 Variables

7.2 Tipos de datos primitivos

7.2.1 Números

7.2.2 Textos

7.2.3 Booleanos

7.3 Práctica. Consola de ejecución de código

7.4 Estructuras de control

7.4.1 Si…entonces…sino

7.4.2 Por cada…ejecutar

7.4.3 Mientras…ejecutar

7.5 Estructuras de datos

7.5.1 Listas

7.5.2 Diccionarios

7.6 Procedimientos

  8. COMPONENTES DE GESTIÓN DE FOTOS, AUDIO Y VÍDEO

8.1 Grabación y reproducción de audio

8.1.1 Práctica. Piano electrónico

8.2 Grabación y reproducción de vídeo

8.2.1 Práctica. Grabación y reproducción personalizada de vídeo

8.3 Captura y visualización de fotos

8.3.1 Práctica. Personalización del fondo de pantalla de una aplicación

8.4 Reconocimiento de voz y conversión texto-voz

8.4.1 Práctica. Adivina el número

  9. COMPONENTES DE DIBUJO Y ANIMACIÓN

9.1 Lienzo

9.1.1 Propiedades

9.1.2 Métodos

9.1.3 Eventos

9.2 Prácticas con lienzos

9.2.1 Figuras geométricas

9.2.2 Pizarra electrónica

9.3 Sprite

9.3.1 Propiedades

9.3.2 Métodos

9.3.3 Eventos

9.4 Pelota

9.5 Prácticas con sprites y pelotas

9.5.1 Juegos de pelota

9.5.2 Frontón

9.5.3 Derriba los ladrillos

10. COMPONENTES DE MANEJO DE SENSORES

10.1 Reloj

10.2 Prácticas con el reloj

10.2.1 Atrapa el zombi

10.2.2 Billar

10.3 Acelerómetro

10.4 Prácticas con el acelerómetro

10.4.1 Nieva

10.4.2 Golf

11. APLICACIONES MULTIPANTALLA

11.1 Bloques de control multipantalla

11.2 Práctica. Derriba los ladrillos II

12. COMPONENTES DE ALMACENAMIENTO

12.1 TinyDB

12.2 Práctica. Atrapa el zombi II

Unidad 1

INTRODUCCIÓN

Si hiciéramos una encuesta, el teléfono móvil sería seguramente el dispositivo electrónico más valorado por la mayoría de nosotros. Ni la gente mayor ni los más pequeños de la casa son ajenos a su influjo, por lo que la franja de edades de sus adeptos es cada vez más amplia. Este aparato, que no lleva mucho tiempo entre nosotros, ha pasado de utilizarse únicamente para realizar llamadas telefónicas a ser una forma de entretenimiento e información imprescindible en nuestras vidas. Diariamente lo consultamos cientos de veces y salir de casa sin él, quedarse sin batería o estar fuera de cobertura puede llegar a provocar incluso ansiedad e indefensión.

Un móvil no deja de ser más que un pequeño ordenador en el que se ejecutan aplicaciones. Para ello, y de forma similar a sus hermanos mayores, requieren de un sistema operativo que permita que una misma aplicación funcione correctamente en cualquier móvil Android, independientemente del hardware del que disponga (procesador, memoria, cámara, sensores, etc.). ¡Imagínense tener que desarrollar aplicaciones específicas para cada marca y modelo de teléfono móvil! Actualmente, los sistemas operativos más extendidos son iOS y Android, aunque este último le lleva ampliamente la delantera al primero. Todos sabemos que Android pertenece a Google, pero fue realmente desarrollado por Android Inc., empresa que compró en 2005. Desde que en 2007 se anunciara su primera versión (Android 1.0 Apple pie) no ha pasado de crecer, siendo actualmente el sistema operativo más utilizado en el mundo.

Aunque su teléfono esté repleto de aplicaciones que hacen casi cualquier cosa, seguramente tenga necesidades específicas que no se contemplen, al menos, de la manera que a usted le hubiera gustado, ya que están pensadas para resolver o facilitar tareas de carácter general. Si le gusta la programación, probablemente se haya planteado desarrollar sus propias aplicaciones para llenar estas lagunas, pero, hasta ahora, no se había animado a intentarlo porque no tenía los conocimientos necesarios. Espero que después de leer este libro opine de forma diferente y lo que antes estaba tan lejano, ahora lo vea al alcance de sus manos.

El desarrollo de aplicaciones Android se hace generalmente en Java utilizando herramientas como Android Studio. Sin embargo, su manejo es complejo y el nivel de conocimientos requerido de dicho lenguaje suele ser medio o alto. Por ese motivo, quedan restringidas a personas con un alto nivel de conocimientos informáticos, excluyendo a todos aquellos que, sin ser informáticos, por afición o necesidad quieran crear sus propias aplicaciones Android. Afortunadamente, con la llegada de App Inventor esta situación ha cambiado.

App Inventor es una herramienta web gratuita de programación visual para el desarrollo de aplicaciones Android. Aunque originalmente fue creado por Google Labs en 2007, actualmente es mantenido en el MIT (Massachusetts Institute of Technology, uno de los más prestigiosos del mundo) por un equipo liderado por su propio creador, el profesor Hal Abelson.

El hecho de que App Inventor sea una herramienta web tiene la ventaja de que no exige instalar ningún software en su ordenador, ya que lo único que necesita es un navegador (web Chrome, Firefox o Safari). Por lo tanto, su entorno de desarrollo es realmente un servicio en la nube al que se accede a través de una cuenta de correo de Google.

App Inventor es un entorno visual porque sustituye las instrucciones de los lenguajes de programación tradicionales por bloques que se conectan entre sí como las piezas de un puzle. La idea subyacente es considerar a la programación como una forma de expresión, al igual que la pintura, la escritura o la música. De esa manera, cualquier persona (incluso un niño) sería capaz desarrollar un pensamiento computacional que le permitiera manifestar fácilmente sus ideas de tal modo que un ordenador pudiera ejecutarlas.

El lenguaje de programación basado en bloques más conocido es Scratch, desarrollado también en el MIT, en concreto, por el Grupo Kindergarten del MIT Media Lab. Al no requerir conocimientos de desarrollo de código, es ampliamente utilizado en la enseñanza de conceptos computacionales a niños y adultos sin experiencia.

La programación basada en bloques es la base del éxito y la consecuente expansión de esta herramienta, ya que permite que cualquiera pueda desarrollar aplicaciones Android. La enorme cantidad y variedad de bloques proporcionados por App Inventor permite que, con unos mínimos conocimientos de informática, sea posible crear aplicaciones de una manera mucho más fácil y en menos tiempo que en los entornos tradicionales. Sin embargo, el objetivo último de esta herramienta va aún más allá. En la propia web de App Inventor se expresa muy bien de esta forma: “El proyecto MIT App Inventor busca democratizar el desarrollo de software al empoderar a todas las personas, especialmente a los jóvenes, para pasar del consumo de tecnología a la creación de tecnología”.

Aquí comienza su viaje de aprendizaje hacia el desarrollo de aplicaciones Android. Confío en que finalizada la lectura de este libro sea capaz de crear aquellas que siempre quiso tener y no encontró en Play Store.

Unidad 2

SU PRIMERA APLICACIÓN CON APP INVENTOR

En este capítulo desarrollará su primera aplicación Android con App Inventor. Es una muy sencilla, ya que solo tiene un botón que desaparece al pulsarlo, dejando en su lugar el texto “Hola Mundo”. La siguiente imagen muestra su aspecto inicial (izquierda) y después de pulsar el botón (derecha).

A pesar de su simplicidad, con esta práctica aprenderá a utilizar los editores con los que se establece el aspecto de una pantalla y su comportamiento en la interacción con el usuario. También sabrá cómo probar su aplicación en un teléfono móvil con MIT AI2 Companion. Por último, conocerá la forma de generar el archivo que le permita instalarla como cualquier otra aplicación en su dispositivo.

Pongámonos en marcha. Pero antes, deberá saber cómo acceder al entorno de desarrollo de App Inventor. Siga leyendo, porque en el siguiente apartado se explica la manera de hacerlo.

2.1 ACCESO AL SERVICIO

La página principal del entorno de desarrollo de App Inventor se encuentra en la dirección https://appinventor.mit.edu/. En ella, lo primero que le llamará la atención son los datos estadísticos del número de usuarios registrados, así como los activos (aquellos que han entrado al entorno) en el día, durante la semana o el mes en curso. Como puede apreciar en la imagen mostrada a continuación, en el momento de escribir este libro hay casi 15 millones de desarrolladores repartidos en 195 países, lo que da una idea de la popularidad de esta herramienta.

Aunque se puede acceder a App Inventor desde los navegadores Chrome, Firefox o Safari, las imágenes de este libro han sido tomadas únicamente desde del primero.

Detengámonos un momento a analizar todo lo que ofrece esta página web. En la parte superior hay una barra compuesta por los siguientes menús:

• “About”. Entre sus opciones están las que llevan a otras páginas donde se explica qué es App Inventor a los que accedan por primera vez. También se presenta el equipo de desarrollo que hay detrás de esta herramienta. Incluso, para los más curiosos se describen los cambios introducidos en las sucesivas versiones que han ido apareciendo a lo largo de su historia. También hay una opción muy interesante en la que se pueden ver los programas desarrollados por otros usuarios que, por su relevancia, han sido seleccionados como el programa del mes. Hay dos modalidades, una para niños y otra para adultos. Además de resultar divertidos, puede sacar ideas para sus propias creaciones. Por último, pero no por eso menos importante, permite conocer la política de privacidad y las condiciones de uso del servicio, que deberá leer y aceptar antes de empezar a usarlo.

• “Educators”. Es un menú dirigido a los que se dedican a la enseñanza de los principios de la informática mediante esta herramienta.

• “News”. Aquí puede encontrar noticias o eventos, así como artículos de experiencias relacionadas con App Inventor, entre las que destacan las de superación personal e integración social, donde se demuestra que la adquisición de una cultura digital puede llegar a ofrecer nuevas oportunidades de mejora.

• “Resources”. Este menú es el principal, ya que contiene todo lo necesario para desarrollar aplicaciones con App Inventor, independientemente del nivel que tenga. Dada su importancia, se exponen con más detalle algunas de sus opciones más destacables.

En la primera (“Get Started”) se ofrece todo lo necesario para empezar trabajar desde cero con esta herramienta. Aquí se encuentra la descripción de la interfaz gráfica del entorno, tutoriales para principiantes en los que, a partir de sencillos programas de ejemplo, se pueden aprender los secretos del desarrollo de aplicaciones Android y, por supuesto, la forma de configurar su PC o su teléfono móvil para probarlas, incluso compartirlas con quien quiera, una vez finalizadas.

La segunda opción (“Documentation”) es la más especial, ya que da acceso a toda la documentación de referencia del producto. Será la que más utilice en el desarrollo de sus propias aplicaciones. No dude en acudir a ella cada vez que quiera completar o profundizar en los aspectos tratados en este libro.

La siguiente opción (“Support and community”) le abre las puertas al soporte proporcionado por una comunidad formada por generosos voluntarios que tratarán de proporcionarle toda la ayuda que necesite cuando no sepa cómo hacer algo o no se explique por qué su código no funciona como esperaba (opción “Support and community”).

Además de estas opciones, hay otras enfocadas a usuarios avanzados, de las que seguro que podrá sacar provecho una vez leído este libro.

• “Blogs”. Tal como indica su nombre, desde aquí se llega a los blogs que mantienen diferentes personas sobre diversos temas relacionados con App Inventor.

Sin abandonar la parte superior de esta página, examinemos lo que hay en los extremos de la barra de menús que se acaba de describir.

En el extremo derecho, el botón “Give” le permite efectuar una aportación económica con el fin de seguir ofreciendo de manera gratuita este servicio, especialmente a los que más ayuda necesitan para disminuir la brecha digital. A continuación, hay un campo en el que podrá realizar cualquier tipo de búsqueda sobre aquello en lo que esté interesado.

En el extremo izquierdo está el icono de App Inventor. Aparece siempre en esa posición, independientemente de la página en la que se encuentre, con el fin de que pueda acceder a esta página desde cualquier otra.

Al lado de este icono se sitúa el botón principal, “Create Apps!”, a través del que se accede al entorno de desarrollo.

Al igual que cualquier otro servicio web, la forma de entrar al entorno de desarrollo de App Inventor es mediante usuario y contraseña, que en este caso es su dirección de correo de Google y la correspondiente contraseña.

Si no tiene una cuenta de correo de Google, puede crearla en https://accounts.google.com/SignUp.

Al ser la primera vez que accede, tendrá que aceptar los términos del servicio. Por lo tanto, pulse el botón “I accept terms of service!”.

Aparecerá una nueva ventana en la que se le da la oportunidad de configurar y conectar un dispositivo Android al entorno (enlace “Set up and connect an Android device”). Eso es algo que aprenderá a hacer en un capítulo posterior, por lo que ahora pulse el botón “Continue” para cerrarla.

Si selecciona la casilla de verificación que hay al lado del botón (“Do Not Show Again”), evitará que vuelva a aparecer esta ventana cada vez que acceda al entorno.

Verá una nueva ventana donde le sugieren una serie de tutoriales para aprender a utilizar el entorno. Pulse el botón “START BLANK PROJECT” para crear un nuevo proyecto. Al cerrarse esta ventana, se abre otra en la que se le solicita el nombre del proyecto. Escriba “Hola Mundo”, tal como puede ver a continuación.

Los nombres de los proyectos no pueden llevar espacios ni caracteres especiales (por ejemplo, acentos). Por ese motivo, App Inventor habrá convertido el texto “Hola Mundo” en “Hola_Mundo”.

Ahora sí, se encontrará dentro del entorno de desarrollo, listo para crear su primera aplicación en App Inventor. Pero antes de empezar a trabajar con él, seleccione el idioma español en el menú desplegable que hay en la parte superior derecha, tal como se aprecia en la siguiente imagen.

Como habrá podido observar, hay elementos que todavía no se han traducido. Además, la documentación seguirá estando en inglés. Las opciones de idioma solo afectan a la interfaz web del entorno.

2.2 DESARROLLO DE LA APLICACIÓN

Cuando se desarrolla una aplicación Android, en lo primero que se piensa es en su apariencia, es decir, en qué se va a mostrar y de qué manera. Sin embargo, la pantalla de una aplicación solo sería una imagen estática si detrás no hubiera un código que atendiera los eventos que se producen durante su interacción con el usuario, haciéndola reaccionar de una determinada manera en cada situación. Por lo tanto, la creación de una aplicación Android supone realizar dos tareas fundamentales:

• El diseño del aspecto visual de las pantallas.

• La programación del código de bloques que determina su comportamiento.

Estas actividades se realizan en editores específicos, la primera en el de pantallas y la segunda en el de bloques. Veamos con detalle en qué consisten dichas actividades y las facilidades ofrecidas por cada uno de ellos para llevarlas a cabo.

2.2.1 Diseño de la pantalla

Cuando se accede a un proyecto desde el entorno de desarrollo de App Inventor, lo que se muestra en el navegador es el editor de pantallas, formado por un conjunto de paneles donde se establece el aspecto visual de la aplicación (se irán describiendo a medida que se vayan necesitando).

En el panel “Paleta” se encuentran todos los tipos (clases) de componentes ofrecidos por App Inventor para el desarrollo de aplicaciones. Dichos componentes están agrupados por categorías, como la de interfaz de usuario (la única que aparece en la imagen anterior), la de medios audiovisuales, la que contiene aquellos que están relacionados con los sensores, la de almacenamiento, etc. Así, por ejemplo, dentro de la primera categoría se encuentran los campos de texto, los botones, las casillas de verificación y otros muchos componentes necesarios para el desarrollo de interfaces de usuario tradicionales.

La forma de añadir un componente a una aplicación es arrastrarlo desde el panel “Paleta” al panel “Visor”. La siguiente imagen pone de manifiesto los pasos que debe seguir para incluir una etiqueta a su primera aplicación:

1. Pulse sobre el componente que representa una etiqueta en el panel “Paleta” y, sin dejar de pulsar, llévela al panel “Visor”.

2. Cuando la etiqueta se halle sobre la pantalla del visor, aparecerá una línea azul que indica la posición donde quedaría ubicada. En este caso, como se trata del primer componente gráfico, solo hay una posible, pero cuando haya más alternativas, tendrá que estar atento a que dicha línea se vea en el lugar donde quiera colocarla.

3. Suelte el botón del ratón. La etiqueta pasará a formar parte de la aplicación.

Todos los componentes que se añaden a una pantalla tienen un nombre que los identifica. Así, por ejemplo, el de la etiqueta que acaba de crear es “Etiqueta1”, tal como puede ver en la siguiente imagen del panel “Componentes”. Esta aparece desplazada a la derecha debajo de “Screen1” (representa la pantalla principal), lo que indica que forma parte de ella.

Por último, el panel “Propiedades” contiene las características con las que se describen los componentes de una aplicación (los arrastrados de la paleta al visor). Allí podrá ver o modificar los valores que, en el caso de los componentes gráficos, determinan su aspecto. En la siguiente imagen se observan las correspondientes a la “Etiqueta1”, como el color de fondo (ColorDeFondo), si el texto va en negrita y/o cursiva (Negrita y Cursiva), el tamaño de la letra (Tamaño de letra) o su tipo (TipoDeLetra), entre otros.

La modificación de los valores de cualquiera de estas propiedades tiene un efecto inmediato en la apariencia mostrada por el componente en el visor.

El comportamiento de su primera aplicación consiste en hacer aparecer el texto “Hola Mundo” al pulsar el botón (lo creará más adelante).

Para que el texto tenga esa apariencia, tendrá que cambiar el valor de las siguientes propiedades:

•Negrita. Marque esta casilla para que el texto de la etiqueta se escriba en negrita.

•Tamaño de letra. Auméntelo a 60 píxeles.

•Texto. Escriba el texto “Hola Mundo”.

•ColorDeTexto. Elija el color azul.

Por último, como dicha etiqueta solo se puede ver en el momento de pulsar el botón, deberá ser invisible inicialmente. Para ello, desmarque el checklist de la propiedad Visible.

Sin embargo, esto provoca que la etiqueta también desaparezca del visor. Si durante el proceso de desarrollo quisiera seguir viéndola en el editor, pero sin afectar el comportamiento real de la aplicación (no aparecerá en pantalla hasta que no se pulse el botón), marque la casilla de verificación “Mostrar en el Visor los componentes ocultos” localizada en la parte superior del visor.

Aprovechando la posición de esta casilla, y a título informativo, debajo se encuentra un menú desplegable desde el que se pueden seleccionar diferentes tamaños de pantalla (no tienen por qué coincidir con el de su teléfono). De esta forma, podrá comprobar el aspecto de la aplicación en dispositivos con diferentes resoluciones.

Ahora, añada un botón a la pantalla. Al arrastrarlo desde la paleta al visor comprobará que este se puede poner encima o debajo de la etiqueta (observe la línea azul que lo indica). Allí será donde se quede ubicado cuando deje de pulsar el ratón.

Más adelante aprenderá a distribuir los componentes gráficos de forma organizada, siguiendo un diseño prestablecido.

Sitúe el botón debajo de la etiqueta y modifique las siguientes propiedades:

•Tamaño de la letra. Asigne un valor de 25 píxeles.

•Texto. Escriba “Pulsar”.

En realidad, el botón lo puede poner encima o debajo de la etiqueta, ya que, como sabe, solo se mostrará uno de ellos.

La siguiente imagen muestra el visor y el panel de componentes una vez añadido el botón.

Con esto, finaliza el diseño de la pantalla de su primera aplicación. Ahora deberá programar su comportamiento, que consiste únicamente en mostrar la etiqueta al pulsar el botón.

Recuerde que, aunque en el editor vea la etiqueta, esta no aparecerá en pantalla al arrancar la aplicación.

2.2.2 Edición del código de bloques

Si en el editor de pantallas se creaban los componentes gráficos utilizados por la aplicación y se les asignaba los valores iniciales a sus propiedades, en el editor de bloques se establece su comportamiento. Aquí es donde se desarrolla el código que se ejecuta durante la interacción con el usuario, que en el caso de su primera aplicación será únicamente la pulsación del botón. Eso provocará la generación de un evento que será la señal para mostrar la etiqueta con el texto “Hola Mundo”, a la vez que se oculta el botón.

A diferencia con otros entornos de programación, en App Inventor el código no está formado por sentencias de un lenguaje sino por bloques, lo que facilita su desarrollo. Para acceder al editor de bloques, pulse el botón “Bloques” situado en el extremo derecho de la barra de aplicación.

Este editor se compone de dos paneles, uno de los cuales (“Bloques”) contiene los bloques que se deberán arrastrar al otro (“Visor”) con el fin de encajarlos entre sí para formar el código del programa.

Por poner un símil, el panel de bloques es el almacén del que se extrae el material de construcción y el visor es el solar en el que se juntan todos ellos para levantar el edificio.

En el panel “Bloques” estos se organizan por categorías y grupos. Así, en la categoría “Integrados” están los grupos de bloques generales del lenguaje y debajo de “Screen1” los pertenecientes a los componentes añadidos previamente a la pantalla principal en el editor de pantallas (en su caso, “Etiqueta1” y “Botón1”).

Las aplicaciones con varias pantallas tienen una categoría adicional por cada una de ellas.

La categoría “Cualquier componente” se describirá en una sección posterior.

Para ver los bloques que forman parte de un grupo, pulse sobre él. Se desplegará un menú del que podrá seleccionar uno de ellos y arrastrarlo al visor. Siguiendo con el símil anterior, es como si transportara los materiales de construcción del almacén a la zona de obra.

La siguiente imagen muestra el menú desplegable que aparece al pulsar sobre la “Etiqueta1”, donde se observa el grupo de bloques que tiene asociados (más adelante sabrá para qué sirven y cómo utilizarlos).

Por su parte, en el panel “Visor” se muestran una serie de iconos muy útiles. De todos ellos, únicamente se describirán los situados en la parte inferior izquierda, los cuales reflejan el número de advertencias y errores en la aplicación. Las advertencias señalan defectos que seguramente provoquen un funcionamiento incorrecto del código. En cambio, los errores causarán con certeza la finalización inesperada del programa. Para conocer el bloque afectado, pulse sobre las flechas hacia arriba y abajo de cada uno de ellos.

Una vez conocida la estructura básica del editor de bloques, ya se encuentra en condiciones de escribir el código que establezca el comportamiento de su primera aplicación. Como se ha comentado en diversas ocasiones, este consistirá en hacer desaparecer el botón cuando se pulse, a la vez que se muestra la etiqueta “Hola Mundo” en su lugar.

La propiedad que determina que un componente gráfico se vea (o no) es Visible. Si recuerda, en el editor de pantalla se representa con una casilla de verificación en el panel de propiedades. Dependiendo de si está o no seleccionada, el componente se verá o desaparecerá de la pantalla. Esto mismo también se puede hacer desde el código con un bloque específico (“poner”) que asigne el valor cierto o falso a dicha propiedad. Todos los componentes tienen un bloque “poner” para cada propiedad. Por ejemplo, en su primera aplicación, el “Botón1” tendrá un bloque de este tipo para cambiar el texto que muestra (propiedad Texto), modificar su color (propiedad ColorDeTexto), etc.

Como su primera aplicación debe hacer desaparecer el botón al presionarlo, tendrá que dar el valor falso a la propiedad Visible del “Botón1”. Por lo tanto, pulse sobre él en el panel de bloques y, en la lista que se despliega, desplácese hacia abajo hasta encontrar el bloque “poner” correspondiente (señalado en la siguiente imagen).

A continuación, solo tiene que arrastrarlo al visor.

Observe que este bloque tiene una serie de conectores entrantes y salientes. Son los utilizados para encajarlo con otros bloques del programa, al igual que haría con las piezas de un puzle.

Los situados en la parte superior e inferior izquierda, señalados como (1) y (2) en la siguiente imagen, permiten crear una secuencia de bloques que se ejecutaría de arriba hacia abajo.

Además de los conectores anteriores, opcionalmente un bloque también puede tener uno entrante a la derecha y otro saliente a la izquierda. A través del conector entrante se obtendrían los datos requeridos para la ejecución del bloque, mientras que por el saliente se devolvería el resultado generado.

Naturalmente, no todos los bloques requieren datos de entrada o devuelven resultados, por lo que los hay con uno, con dos o sin ningún conector. Así, el bloque anterior solo tiene un conector entrante a la derecha porque su función es la de asignar un valor a la propiedad de un componente (en este caso, al atributo Visible del “Botón1”), de ahí que requiera dicho valor como dato de entrada. Este bloque no genera ningún dato de salida, motivo por el que a la izquierda no tiene ningún conector.

Por cada bloque “poner” que asigna el valor a la propiedad de un componente, existe otro complementario que permite obtenerlo. La siguiente imagen muestra aquel con el que se podría saber si el botón está visible.

Este bloque tiene un conector saliente en el lado izquierdo, lo que significa que devuelve un dato como resultado (el valor del atributo Visible del “Botón1”, es decir, cierto si el componente esta visible y falso en caso contrario). Si algún otro bloque necesitara dicho dato, tendría que conectarse por ese lado para recogerlo. Puesto que este bloque no requiere ningún dato de entrada, no tiene ningún conector entrante a su derecha.

Cada tipo de bloque se diferencia de los demás por su color. Por ejemplo, el de los bloques que asignan valores a las propiedades de un componente es verde oscuro, mientras que el de aquellos con los que se obtienen es verde claro.

Si observa las imágenes anteriores, verá que tanto el identificador del botón como el nombre de la propiedad tienen una punta de flecha hacia abajo. Eso es porque, en realidad, se trata de menús.

Al pulsar sobre el identificador del botón se despliega un menú con todos los botones que hubiera en pantalla (“Botón1”, “Botón2”, “Botón3”, …). Dado que en su caso solo hay uno, será el único que aparezca.

En cambio, si pulsa sobre el nombre de la propiedad, lo que se despliegan son las propiedades del botón.

De esa forma, una vez añadido al visor, este tipo de bloques podrá utilizarse para modificar cualquier propiedad de cualquier botón.

Este razonamiento es válido para los bloques de las etiquetas o cualquier otro componente gráfico.

Si es observador, se habrá dado cuenta de que en el extremo izquierdo del bloque aparece un icono de error (un aspa sobre un fondo rojo). Además, en la parte inferior izquierda del visor se informa de un error. Para saber cuál es el problema, pulse sobre él.

Aparece un mensaje emergente indicando que este bloque necesita un valor. Se trata del que se quiere asignar a la propiedad Visible del botón (cierto para que se vea o falso para hacerlo desaparecer).

Como descubrirá en un capítulo posterior (dedicado a la programación basada en bloques), los valores cierto y falso son los únicos del tipo de datos booleano utilizados en expresiones lógicas (concepto que también se enseñará más adelante). Para obtenerlos, pulse sobre el grupo de bloques “Lógica” (agrupa los bloques relacionados con las expresiones lógicas) de la categoría “Integrados”. En este caso, seleccione el que representa el valor falso (este bloque se va a utilizar para hacer desaparecer el botón).

Arrástrelo al visor y encájelo a la derecha del bloque anterior.

Cuando se unan ambos bloques oirá el sonido de un clic, igual que si estuviera trabajando con piezas de Lego.

Como puede ver, en la parte inferior izquierda del visor el error se convierte en un aviso. El motivo es porque falta algo que indique al programa cuándo se debe ejecutar este bloque, es decir, cuándo se debe asignar el valor falso al atributo Visible del “Botón1”. Como sabe, será al presionarlo.

Puesto que además de ocultar el botón también se quiere mostrar el texto “Hola Mundo”, pulse sobre el componente “Etiqueta1” y añada al visor el bloque que permita asignar el valor cierto al atributo Visible. La operativa es la misma seguida con el botón, por lo que no se darán explicaciones adicionales.

Dado que la etiqueta se tiene que mostrar después de haber hecho desaparecer el botón, encaje este bloque debajo del anterior.

Si los bloques no encajaran correctamente, quedarían separados. Para que lo hagan, al acercarlos tendrá que ver una línea amarilla bordeando el punto de enlace, señal de que la unión se puede realizar de forma adecuada.

En App Inventor, el comportamiento de una aplicación viene determinada por la respuesta exhibida a los eventos producidos por el usuario (por ejemplo, toca un botón) o generados internamente (por ejemplo, salta un temporizador). El código con el que se ofrece dicha respuesta deberá incluirse dentro del bloque manejador del evento correspondiente.

Cuando se pulsa un botón se genera el evento Clic. Por lo tanto, seleccione el bloque que maneja dicho evento de la lista que se despliega al pulsar el “Botón1” en el panel de bloques y arrástrelo al visor.

Este bloque se puede leer como: “cuando se genere el evento Clic del “Botón1” ejecutar…”.

Los bloques manejadores de eventos son de color marrón.

La forma de este bloque es diferente al de los dos anteriores, ya que debe poder “abrazar” a todos aquellos que se tengan que ejecutar al producirse el evento. Por ese motivo, encaje los dos bloques creados anteriormente dentro de este. Para ello, pulse sobre el que asigna el valor falso a la propiedad Visible del “Botón1” y arrástrelo dentro de su espacio interior.

Cuando se mueve un bloque, este se desplaza conjuntamente con los que tiene debajo. Por lo tanto, el que asigna el valor cierto a la propiedad Visible de la “Etiqueta1” también habrá quedado incluido dentro del manejador.

Si posteriormente quisiera añadir otros bloques, solo tendría que encajarlos en la posición deseada (al principio, al final o entre medias de los ya existentes).

Seguro que se ha dado cuenta de que en la parte inferior izquierda del visor ya no aparece ningún aviso ni error, señal de que ahora el programa es completamente operativo.

Con esto ha finalizado la construcción de su primera aplicación. Solo quedaría probar que funciona correctamente. Para ello, primero tendrá que conectar su teléfono móvil al entorno de desarrollo de App Inventor. Eso es lo que aprenderá a hacer en el siguiente apartado.

2.3 PRUEBA DE LA APLICACIÓN CON MIT AI2 COMPANION

Durante el desarrollo de una aplicación, sentirá la necesidad de ver en qué se traduce lo que está haciendo, aunque esta todavía no sea completamente operativa. Querrá comprobar, por ejemplo, que los componentes están correctamente ubicados en la pantalla, o que tienen el tamaño y el color apropiado. Lo ideal sería ver cómo cambia el aspecto de la aplicación en el propio teléfono cuando se modifica cualquiera de las propiedades de estos componentes, hasta lograr la combinación de valores adecuada. Sucede lo mismo con el código de bloques. Seguramente, también quiera probar, por ejemplo, si el comportamiento de una aplicación es el adecuado cuando se pulsa uno u otro botón, o si el movimiento de un sprite se puede controlar de forma adecuada inclinando el móvil a uno u otro lado.

Si para ver el resultado de cualquiera de estos cambios tuviera que generar un paquete de instalación e instalar la aplicación de nuevo en el dispositivo, su desarrollo se convertiría en un proceso largo y tedioso. Por eso, App Inventor proporciona diversos métodos que facilitan la realización de pruebas de una forma ágil y sencilla. En concreto, podrá usar:

• Un teléfono móvil conectado a la misma red wifi que el ordenador desde el que está accediendo al entorno de desarrollo de App Inventor. Esta será la opción utilizada en este libro, ya que es la recomendada por el MIT.

• Un teléfono móvil conectado por USB al ordenador. Se emplea cuando la conexión wifi entre el teléfono y el ordenador no funciona. Este problema es relativamente frecuente en algunos lugares públicos (hoteles, centros de conferencias, etc.) en los que, por motivos de seguridad, se impide la comunicación entre dos dispositivos conectados a la misma red. Las instrucciones para realizar esta conexión se pueden ver en http://appinventor.mit.edu/explore/ai2/setup-device-usb.

• Un Chromebook. Todos los Chromebook son capaces ejecutar aplicaciones de Android desde 2019, por lo que este dispositivo serviría tanto para su desarrollo (se trabajaría con un navegador de la misma forma que en un ordenador), como para su ejecución (al igual que se haría en cualquier teléfono móvil). Si estuviera interesado en este método de prueba, en http://appinventor.mit.edu/support/chromebooks se indica cómo configurar el Chromebook.

• Un emulador. Se trata de una aplicación que se instala en su ordenador y funciona igual que un teléfono Android. Las instrucciones de instalación se encuentran en http://appinventor.mit.edu/explore/ai2/setup-emulator.

Tal como se acaba de señalar, de los cuatro métodos de prueba anteriores el MIT recomienda encarecidamente utilizar el primero. Para ello, deberá instalar la aplicación MIT AI2 Companion desde Google Play Store (o App Store si dispone de un iPhone) en su teléfono móvil.

Una vez instalada, abra la aplicación. Si todo es correcto, verá la siguiente pantalla:

Asegúrese de que tanto el teléfono móvil como el ordenador desde el que está desarrollando la aplicación están en la misma red wifi.

Como puede observar, para conectar su teléfono al entorno de desarrollo de App Inventor puede utilizar un código alfanumérico o un código QR. ¿Cómo se obtienen? Desde la opción “AI Companion” del menú “Conectar”, situado en la barra de herramientas general del entorno web de desarrollo.

Las dos opciones que hay debajo (“Emulador” y “USB”) serían las utilizadas para las pruebas con un emulador o un teléfono móvil conectado al ordenador mediante un cable USB.

Si en algún momento experimentara problemas con la conexión entre el entorno de desarrollo y el móvil, reiníciela con la opción “Reiniciar conexión”. No confunda esta opción con “Reiniciar completamente”, que se utiliza para dejar el emulador como si acabara de instalarlo (en un teléfono móvil sería el equivalente a dejarlo igual que venía de fábrica). Al no utilizarse el emulador para realizar las pruebas, sino un teléfono móvil real, esta opción no tendrá ningún efecto.

Cuando seleccione esta opción aparecerá la siguiente ventana, en la que se aprecia tanto un código QR como un código de 6 caracteres. Ahora, en la aplicación MIT AI2 Companion del móvil pulse el botón “scan QR code”, o introduzca dichos caracteres en el campo de texto y pulse el botón “connect with code”.

Si opta por escanear el código QR, la primera vez que lo haga se le pedirá permiso para que esta aplicación tenga acceso a la cámara. Pulse el botón “Permitir”.

Cada vez que establezca una nueva conexión entre el teléfono móvil y el entorno de desarrollo, los códigos serán diferentes.

En el entorno de desarrollo aparecerá una barra que muestra el progreso del proceso de establecimiento de la conexión.

Una vez realizada, su primera aplicación aparecerá automáticamente en la pantalla del teléfono. Su aspecto debe coincidir con el mostrado al principio del capítulo, es decir, debe contener un botón que al pulsarlo se oculta para mostrar el texto “Hola Mundo”.

Lo interesante del uso de MIT AI2 Companion es que verá reflejados en el móvil todos los cambios realizados en el entorno de desarrollo de App Inventor. Para comprobarlo, seleccione el componente “Etiqueta1” del panel “Componentes” en el editor de pantallas y luego marque la casilla de la propiedad Cursiva en el panel “Propiedades”. El texto “Hola Mundo” que estaba viendo en la pantalla del móvil habrá cambiado automáticamente a cursiva.

Si estuviera en el editor de bloques, pulse el botón “Diseñador” situado en el extremo derecho de la barra de herramientas de la aplicación para volver al editor de pantallas.

2.4 INSTALACIÓN DE LA APLICACIÓN EN UN DISPOSITIVO MÓVIL

El uso de AI Companion es útil para la realización de pruebas durante la fase de desarrollo, pero, si quisiera ejecutarla como cualquier otra aplicación Android, deberá generar el correspondiente paquete de instalación. Para ello, seleccione la opción “Android App (apk)” del menú “Generar”.

Aparecerá una barra de progreso durante la generación del paquete de instalación, tras lo cual, verá la siguiente ventana:

Hay veces que la generación del paquete de instalación tarda algunos minutos.

Si pulsara el botón “Download .apk now” de dicha ventana, se descargaría un archivo en su ordenador cuyo nombre es el del proyecto y su extensión “.apk” (en este caso concreto, “Hola_Mundo.apk”). Para llevarla a cualquier teléfono puede emplear diversos medios como, por ejemplo, adjuntarlo a un correo electrónico. Al abrirlo comenzaría el proceso de instalación.

Si, por el contrario, optara por escanear el código QR, la aplicación se descargaría en su teléfono. Al abrir el URL asociado aparecerá un aviso que indica que este archivo puede ser peligroso. Como es suyo y está seguro de que no lo es, pulse el botón “ACEPTAR”.

Una vez descargada, presione el botón “Instalar”. De nuevo, verá un aviso indicando la peligrosidad de esta acción. Como sabe que es segura, pulse el enlace “INSTALAR DE TODAS FORMAS”.

Es muy fácil confundirse y pulsar el botón “ACEPTAR” de la pantalla anterior, que provocaría la cancelación de la instalación.

Si no le apareciera el botón “Instalar” deberá acceder a la carpeta “Descargas” de su teléfono y pulsar sobre él para ejecutarlo manualmente.

Una vez finalizada la instalación, el icono de su primera aplicación aparecerá en el escritorio del teléfono, junto con el resto de aplicaciones. Su nombre será el del proyecto (en este caso, “Hola_Mundo”).

Esta operativa se puede hacer desde cualquier teléfono Android. No es necesario que esté instalada la aplicación MIT AI2 Companion.

Unidad 3

EL ENTORNO DE DESARROLLO

La interfaz de usuario de App Inventor ofrece todo lo necesario para la creación de aplicaciones móviles Android. En el capítulo anterior solo se describieron las facilidades imprescindibles para el desarrollo de su primera aplicación. En este, se hará un recorrido exhaustivo por todas ellas.

Al entrar en el entorno de desarrollo de App Inventor, el navegador web muestra una pantalla con la siguiente estructura:

1. Barra de herramientas general.

2. Barra de herramientas de la aplicación.

3. Paneles de edición.

La interfaz gráfica de App Inventor está en continua evolución, por lo que puede que el aspecto que le aparezca difiera ligeramente del mostrado en esta y sucesivas imágenes.

La barra de herramientas general contiene todo lo necesario para la gestión de su cartera de proyectos.

La barra de herramientas de aplicación afecta únicamente al proyecto con el que esté trabajando en ese momento. Desde aquí se proporciona acceso a los editores mediante los botones situados en su extremo derecho (“Diseñador” y “Bloques”).

Cada editor tiene sus propios paneles. Así, por ejemplo, en la imagen anterior se mostraban los del editor de pantallas. Si pulsara sobre el botón “Bloques” accedería a los del editor de bloques, cuyo aspecto es este otro.

Observe que el botón correspondiente al editor actual está deshabilitado (en este último caso, “Bloques”). De esa forma solo, se podrá pulsar el que permite alternar con el otro.

Antes de empezar a trabajar con estos editores, veamos en detalle lo que se puede hacer desde las barras de herramientas.

3.1 BARRAS DE HERRAMIENTAS

Tal como se acaba de comentar, el entorno de desarrollo web de App Inventor consta de dos barras de herramientas, situadas en la parte superior de la interfaz:

1. Barra de herramientas general. Permite realizar todas las actividades involucradas en las diferentes fases del desarrollo de los proyectos, desde su creación, pasando por la realización de pruebas, hasta la generación del paquete ejecutable que se podrá instalar en cualquier teléfono móvil o tablet Android.

2. Barra de herramientas de la aplicación. Desde aquí podrá crear, borrar o acceder a las distintas pantallas que forman parte de la aplicación con la que se está trabajando en ese momento. También proporciona acceso tanto al editor de pantallas, con el que se establece el aspecto visual de cada una de ellas, como al editor de bloques, que determina su comportamiento en la interacción con el usuario.

Veamos en detalle los menús que contiene cada una de ellas.

3.1.1 Barra de herramientas general

En esta barra se encuentran las herramientas comunes a todos los proyectos, relacionadas con las actividades llevadas a cabo durante el proceso de desarrollo. Se trata de una barra de menús, flanqueada por el logo de App Inventor a su izquierda y por su usuario (dirección de correo Gmail) a la derecha.

Si presionara el logo, se abriría una nueva pestaña en su navegador con la página principal de App Inventor, aquella desde la que accedió al entorno de desarrollo (es la descrita en la sección anterior).

Si pulsara en su dirección de correo Gmail, se desplegaría un menú con la opción “Salir de la sesión” que le permitiría abandonar el entorno de desarrollo.

Aunque haya salido del entorno de desarrollo, en el navegador mantendrá activa la sesión con la que entró en App Inventor, con las consecuencias que esto podría tener si utilizara otro tipo de servicios web. Por ese motivo, le aconsejo que cuando salga de esta herramienta, cierre también la sesión en el navegador. Para ello, pulse sobre la letra inicial de su usuario situada en la parte superior izquierda (o su foto de perfil) y seleccione la opción “Cerrar sesión”.

Entre el icono de App Inventor y su dirección de correo Google se encuentran los menús desde los que podrá gestionar tanto sus proyectos como el propio entorno de desarrollo. Veamos en detalle qué se puede hacer con cada uno de ellos.

En el menú “Proyectos” se encuentran todas las opciones relacionadas con la gestión de proyectos. Desde aquí podrá crear un nuevo proyecto, guardarlo, cargarlo, borrarlo, ver la lista de todos los que tenga, etc.

La primera opción de este menú es “Mis proyectos”, que le permitirá ver la lista de todos los que haya creado (en su caso es solo uno, “Hola_Mundo”).

El enlace “Mis proyectos”, situado en la misma barra de herramientas general, es un atajo a esta opción.

Como puede ver en la imagen anterior, además del nombre del proyecto se informa de la fecha de creación y el de la última modificación. Para entrar en un proyecto, solo tiene que pulsar sobre su nombre (no sobre la casilla que hay a su izquierda).

Si es observador, se habrá dado cuenta de que encima de la lista de proyectos aparece una nueva barra de herramientas específica de esta vista.

Dicha barra se compone de los siguientes botones:

• “Comenzar un proyecto nuevo…”. Permite crear un nuevo proyecto. Es un atajo a la opción “Comenzar un nuevo proyecto” del menú “Proyectos”.

• “Borrar proyecto”. Se utiliza para eliminar los proyectos que tengan seleccionada la casilla de verificación situada a su izquierda. Es un atajo a la opción “Borrar proyecto” del menú “Proyectos”.

• “View Tash”. Aquí puede recuperar los proyectos que haya borrado por error. Hace la misma función que la papelera de Windows. Este botón hace lo mismo que el enlace del mismo nombre situado en la barra de herramientas general.

• “Login to Gallery”. Permite acceder a http://gallery.appinventor.mit.edu/, un espacio en el que puede compartir sus proyectos con otros usuarios de App Inventor. Previamente deberá registrarse.

• “Publish to Gallery”. Permite publicar un proyecto en la galería de App Inventor. Antes deberá haber accedido mediante el botón anterior.

Volviendo de nuevo al menú “Proyectos”, con la segunda opción (“Comenzar un proyecto nuevo…”) se crea un nuevo proyecto. Al seleccionarla se abre una ventana en la que tendrá que introducir el nombre del nuevo proyecto.

Si en vez de crearlo, deseara importar uno ya existente, debería seleccionar una de las opciones señaladas a continuación.

Con la primera, el proyecto se carga desde un fichero almacenado en su propio ordenador. Como puede apreciar, se trata de un archivo con extensión “.aia”. Al escoger esta opción, aparece una ventana emergente donde tendrá que pulsar el botón “Seleccionar archivo” para abrir el explorador de Windows. Una vez seleccionado el fichero, su nombre aparecerá a la derecha de dicho botón. Para terminar de cargarlo en App Inventor, solo tendrá que presionar “Aceptar” en esa misma ventana.

Con la segunda opción, el archivo se importa desde un repositorio en la web. Al seleccionarla, se abre una ventana en la que, por defecto, se muestran las aplicaciones que contiene “Built-in Templates”, utilizadas por el MIT en tutoriales que enseñan el uso de esta herramienta (por ejemplo, el clásico “HelloPurr”).

Como puede ver, la ventana consta de dos paneles. En el de la izquierda están las aplicaciones que se pueden importar. En el de la derecha se muestra una breve descripción de la que está seleccionada. Si se decide por una de ellas, solo tiene que pulsar el botón “Aceptar” para cargarla.

Si conociera otros repositorios, solo tendría que desplegar el menú superior, seleccionar la opción “Añadir la dirección URL de una nueva librería de plantilla” y escribir dicho URL en la ventana que se abre inmediatamente después.

Para importar un proyecto, antes se ha tenido que exportar con una de estas dos opciones del menú “Proyectos”.

Creo que no hay duda de lo que hace cada una de estas opciones, por lo que le propongo probar únicamente la primera con su primera aplicación. Al seleccionarla, en la parte inferior de su navegador (se supone que está utilizando Chrome) verá que se ha descargado el archivo “Hola_mundo.aia” en la carpeta “Descargas” de su ordenador.