Category Archives: App Inventor

Hoy vamos a ver cómo podemos crear nuevas pantallas en App Inventor. Además, para poder acceder a cada pantalla nueva, vamos a poner unos botones que indiquen qué pantalla se va a abrir:

1.- Como siempre, hace falta tener creado el proyecto. Una vez hecho esto, accedemos a la sección “Screen Arrangement” y colocamos en nuestra pantalla un “HorizontalArrangement”. En las propiedades de este objeto debemos marcar “Width” y “Height” con valor “Fill parent”, de esta manera se ajustará a la pantalla.

Screen Arrangement

Screen Arrangement

2.- El segundo paso es arrastrar dentro de nuestro objeto “HorizontalArrangement” 2 “Button”, uno al lado del otro. Estos botones serán los que utilizaremos para navegar entre las distintas pantallas de nuestra app. Para que queden bien maquetados en la aplicación, les pondremos a cada uno el texto que queremos que muestre y en sus propiedades pondremos el “Width” y “Height” como “Fill parent”. Así es como nos ha quedado nuestro menú.

Botones menú

Botones menú

3.- En el menú superior del diseñador de pantallas hay un botón para añadir nuevas pantallas. Este será el siguiente paso, pulsamos en “Add Screen” y añadimos las pantallas que queramos: en mi caso he añadido 2 más y les he puesto de nombre “Pantalla2” y “Pantalla3”.

Pantallas

Pantallas

4.- Y de nuevo para poder navegar entre estas nuevas pantallas repetiremos el paso número 1 y 2 para la creación del menú.

5.- Ahora nos vamos al editor de bloques para empezar a programar los botones. Lo que haremos será acceder a la pestaña “Built-In” y en la sección “Definition” sacamos un bloque “procedure” y un bloque “name”. El objetivo de estos bloques es crear una función que abra una pantalla nueva que nosotros indicaremos. Por ello, al bloque “procedure” le llamaremos “abrirPantalla” y al bloque “name”, que encaja en la parte “arg” de la pieza, “nombrePantalla”.

6.- A continuación, dentro de la pestaña “Built-In” en la sección “Control”, sacamos el bloque “open another screen” que irá dentro de nuestra función “abrirPantalla” al que encajaremos el bloque “nombrePantalla” que se encuentra en la pestaña “My Blocks” dentro de “My Definitions”. Este sería el resultado de nuestra función:

Función abrirPantalla

Función abrirPantalla

Este procedimiento de “abrirPantalla” hay que crearla en cada pantalla de lo contrario no funcionará nuestra app.

7.- Lo que falta en este punto es que cuando se pulse cada botón de la app, abra la pantalla correspondiente. Para ello sacamos el bloque “Button1.Click” dentro de “My Blocks -> Button1” (en caso de haberle cambiado el nombre al botón aparecerá con el nombre que se le haya asignado) y dentro pondremos el bloque “abrirPantalla” que lo podemos sacar de “My Blocks -> My Definitions”. Conectado con este bloque, pondremos un bloque “text” obtenido de “Built-In -> Text” y al que cambiaremos el texto por el nombre de la pantalla que queremos que se abra.

8.- Y para terminar lo que haremos será añadir debajo de “abrirPantalla” un bloque “close screen” que lo podemos encontrar en “Built-In -> Control”. Esto hará que la pantalla anterior se cierre después de abrir la nueva.

Evento click del botón

Evento click del botón

Los puntos 7 y 8 se deben hacer para cada botón de cada pantalla porque si no no funcionará la app.

Así es como quedaría cada una de nuestras pantallas con la diferencia de que en función del botón se debe abrir una u otra pantalla. A probarlo!

Bloques pantalla

Bloques pantalla

Todas las apps suelen tener una pantalla de bienvenida con una imagen o logotipo que dura unos segundos hasta que se muestra el menú y la página principal del programa. Esta pantalla recibe el nombre de Splash Screen y es lo que vamos a crear hoy con App Inventor:

1.- Lo primero que necesitamos es tener un proyecto creado. Una vez lo tengamos, desplegamos la opción “Basic” que está en el menú de la columna de la izquierda y arrastramos un elemento “Canvas” dentro de nuestra pantalla.

Elemento canvas

Elemento canvas

2.- A continuación, lo seleccionamos en la columna de la derecha y modificamos sus propiedades “Width” y “Height” para que tengan el valor “Fill parent”. Además, en la propiedad “BackgroundImage” subimos el archivo de imagen que queremos (es importante que la imagen elegida ocupe toda la pantalla, de lo contrario no quedará bien) y nos aseguramos de que la propiedad “visible” tiene el valor “showing”.

Propiedades canvas

Propiedades canvas

3.- El siguiente paso es arrastrar “clock” de la columna de la izquierda dentro del menú “Basic” dentro de nuestra pantalla y cambiar su propiedad “TimerInterval” a los mili segundos que queremos que dure el splash screen. En mi caso yo pongo 5000.

Elemento clock

Elemento clock

4.- Ahora es momento de acceder al editor de bloques. Lo primero que haremos será ir a la pestaña “My Blocks”, coger el evento “screen.Initialize” y arrastrarlo al centro de la pantalla. Dentro introducimos los bloques de “canvas.Visible” y “clock.TimerEnabled” (cada uno los obtenemos desde su propia sección), y junto a ellos les indicamos el valor lógico “true” el cual podemos encontrar en la pestaña “Built-in -> Logic” o haciendo click con el ratón en cualquier sitio de la pantalla y seleccionando “logic -> true”.

5.- El ultimo paso consiste en programar el temporizador. Para ello cogemos el bloque “clock.Timer” de su propia sección y dentro, al igual que hemos hecho en el punto 4, añadimos los bloques “canvas.Visible” y “clock.TimerEnabled” pero esta vez indicaremos los valores “false”.

Bloques splash screen

Bloques splash screen

Con esto ya tenemos listo un splash screen muy básico. Ahora ya todo depende de la imaginación de cada uno para modificarlo a su gusto.

Algo que siempre vamos a hacer cuando desarrollamos una aplicación es cambiar el icono que viene por defecto en el programa. Queremos que la app tenga una imagen asociada que refleje su funcionalidad o que tenga que ver con su objetivo, así que vamos a ver cómo se hace cuando creamos aplicaciones con App Inventor:

1.- En el proyecto que tengamos creado, desde el diseñador de pantallas accedemos a las propiedades de la primera pantalla, la principal.

2.- Cuando veamos sus propiedades nos fijamos en que una de ellas se llama “Icon”. Es aquí donde podremos cambiar el icono.

Cambiar icono app

Cambiar icono app

3.- Elegimos el icono que tenemos ya preparado y que queremos que tenga nuestra app, lo subimos y aceptamos dando a “Ok”.

Al descargar la app a nuestro dispositivo móvil para comprobar cómo ha ido veremos los cambios realizados. ¿Bastante sencillo verdad?

 

Hoy voy a hablar sobre esta herramienta de desarrollo. App Inventor es una aplicación que permite crear programas para dispositivos móviles de una manera muy sencilla. Simplemente se trata de “encajas las piezas” necesarias hasta conseguir la funcionalidad que buscamos.

Primero voy a comenzar explicando un poco cómo configurarlo todo para poder empezar a usarlo. Aunque en la propia web de la herramienta hay un buen tutorial para configurarlo, voy a explicarlo un poco a modo resumen para los que prefieran no tener que leer en ingles:

1.- Hace falta tener instalada la máquina virtual Java así que aquí pongo el enlace para poder descargar el software e instalarlo.

2.- Aunque se utiliza el navegador para crear las apps, hace falta instalar un software. Este es el segundo paso, descargarse la herramienta de desarrollo desde la web e instalarla en el ordenador. Añado aquí el enlace para ello pero luego habrá que elegir una opción de descarga u otra dependiendo del sistema operativo de cada uno.

3.- Una vez instalado todo ya podemos empezar a usarlo. Para ello primero necesitamos una cuenta de gmail ya que de lo contrario no puedes acceder a la herramienta que, como hemos dicho antes, se utiliza a través del navegador. Cuando tengamos la cuenta de gmail, accedemos a esta dirección y ya podremos empezar a crear un proyecto nuevo. Pulsando en “My projects -> New” introducimos un nombre y ya creamos el proyecto.

App Inventor

App Inventor

Con esto vemos cómo la pantalla está dividida en 3 secciones: columna izquierda, parte central y las 2 columnas de la derecha. Antes de hacer nada más lo que tenemos que hacer es abrir el editor de bloques, para ello pulsamos en el botón correspondiente “Open the Blocks Editor” que aparece en la parte derecha de la barra de menú verde.

Proyecto creado

Proyecto creado

 

Al pulsar se nos descargará un archivo que debemos abrir. Si tenemos la máquina virtual Java instalada correctamente no habrá ningún problema y aparecerá ante nosotros una nueva ventana verde que es donde más adelante juntaremos las piezas de puzzle. El último paso a configurar es el de conectar un dispositivo móvil al ordenador o abrir un emulador. Evidentemente este paso es para poder probar la app que generemos. En mi caso yo lo voy a hacer abriendo un emulador pero si por lo que sea hay dudas pues ya explicaré de la otra manera también. Pulsando en el botón “New Emulator” se ejecuta el emulador de Android (tardará un rato en cargar todos los controladores) y una vez abierto, desplegamos la lista de opciones donde indica “Connect to Device” que está al lado del botón del emulador y elegimos la opción de nuestro emulador. Comprobaremos que todo ha ido bien cuando el dibujito del móvil que aparece a su lado está en verde. Así es como nos quedaría.

Editor de bloques

Editor de bloques

 

Con esto ya podemos empezar a crear nuestra aplicación.

Los pasos a seguir para crear una aplicación es muy sencillo:

1.- De la columna de la izquierda se arrastra al centro el componente que se quiera añadir. Por ejemplo un botón.

2.- A continuación en las columnas de la derecha se modifican las propiedades de dicho botón. como por ejemplo su nombre, el color de fondo, etc. Quedaría así.

Primeros pasos

Primeros pasos

 

3.- Y por último en el editor de bloques, del mismo modo, se arrastran al centro de la pantalla los eventos que se quieren crear interconectándolos entre sí. Un ejemplo de esto sería que al hacer clic en el botón, se cambiara el color de fondo del mismo. Para hacer esta funcionalidad he obtenido las piezas de cada apartado en las diferentes pestañas. Por ejemplo: de la pestaña “Built-In” he obtenido la función “make color” en el apartado “Colors”, las funciones de “random integer” y “number” se obtienen en el apartado de “Math”, etc. Así es como quedaría el puzzle que hace que el botón cambie de un color aleatorio cada vez que se haga clic en el.

Editor de bloques en los primeros pasos

Editor de bloques en los primeros pasos

 

Y así es como poco a poco pueden crearse funcionalidades para una app de android.

¿Cuáles podrían ser las ventajas de este sistema? Realmente no es que se pueda crear una app sin tener conocimientos de programación, porque ya hemos visto por el ejemplo que las piezas de puzzle se unen mediante estructuras habituales que contienen todos los lenguajes de programación como son los bucles, las condiciones, etc, así que yo diría que es una manera de hacer apps en pseudocódigo sin tener que aprender un lenguaje nuevo. Simplemente que a uno se le de bien hacer puzzles y la lógica de programación.

A todo esto también hay que mencionar que según se va construyendo el puzzle se pueden ver los resultados al momento en el dispositivo móvil al que está conectado o en el emulador abierto. Ha sido una buena experiencia practicar con esta herramienta, y muy divertida además por lo que no descarto investigar un poco más. Pero eso ya más adelante.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies