A estas alturas ya tienes una idea clara de cómo es la imagen de tu app, pero todavía está sobre un papel y eso no sirve para manejarla desde un dispositivo móvil. Es el momento de recurrir a App Inventor para convertirla en realidad.
En el entorno de desarrollo de App Inventor tienes que empezar por trasladar los elementos que forman la interfaz de usuario arrastrando desde la paleta al visor del diseñador los componentes que necesites para posteriormente configurar sus propiedades antes de pasar a programarlos.
Por tanto, la siguiente fase consistirá en hacer el diseño digital de la app utilizando para ello el diseñador de App Inventor.
Ponte de nuevo con tu pareja y ¡manos a la obra!
Hay que trabajar en pareja.
Como es lógico, una vez que accedéis a App Inventor, lo primero que hay que hacer es crear un nuevo proyecto donde poder trabajar. Dadle el nombre de "Agenda escolar previa".
A continuación, dad de alta las dos pantallas que vais a necesitar, dónde, más adelante, trasladaréis los bocetos que habéis creado anteriormente.
Puede que al entrar en App Inventor y crear vuestro proyecto hayáis visto en la parte superior izquierda un botón desplegable con el nombre de "Screen1" y hayáis pensado que tenía algo que ver con la creación de pantallas. Siento deciros que no es así, pero no os preocupéis por que la opción correcta está justo al lado, y se llama "añadir ventana", tal como podéis ver en la siguiente imagen.
App Inventor llama "ventanas" a cada pantalla, de ahí que sea la opción "añadir ventana" que se localiza justo al lado del botón que pone "Screen1", la que debéis emplear para crear una pantalla adicional.
Continuamos trabajando en pareja.
Dado que las pantallas son fundamentales en una aplicación móvil, sería interesante que les dedicarais un momento para centraros en algunos detalles de su gestión.
Tratad de ver si podéis borrar la pantalla que habéis añadido a la app.
Describid los pasos que sigáis a lo largo del intento. Podéis escoger la forma de hacerlo entre las múltiples opciones disponibles:
A continuación probad a borrar la Screen1 a ver qué pasa. Describidlo también.
Si habéis conseguido borrar la pantalla en el apartado anterior, volved a crear otra y una vez que lo hayáis hecho, tratad de cambiarle el nombre que le hayáis dado.
Sacad conclusiones de lo que habéis logrado. Podéis expresarlo la forma que queráis, hay múltiples opciones disponibles:
Comparad las propiedades de la "Screen1" con las de la segunda pantalla que habéis creado y expresad las diferencias que encontréis. Para ello, disponéis de varias alternativas:
Para saber más sobre las propiedades de las pantallas podéis dedicar un rato a cambiar el valor de las distintas propiedades a ver qué pasa.
Si queréis, podéis registrar vuestros logros para tenerlos a mano en caso de que fuera necesario.
Seguimos trabajando en pareja.
Ahora que habéis creado las dos pantallas que necesitáis, es el momento de llenarlas de componentes.
Para ello, por cada pantalla, no tenéis más que arrastrar desde la paleta hasta soltar en el visor aquellos componentes que creáis necesarios para que vuestra interfaz quede tal y como la dibujasteis anteriormente en el boceto y cumpla con la función que estaba prevista.
Por si no os habéis dado cuenta todavía, vais a necesitar algunos componentes con los que aún no habéis trabajado y que podéis empezar a utilizar ya.
Veréis que sin ellos os será imposible conseguir lo que buscáis, por lo que os voy a aconsejar sobre cuáles podéis emplear, luego me contáis qué tal os ha ido con ellos.
Cuando tengáis que ofrecer la opción al usuario de escribir algo, os aconsejo que empleéis el componente "CampoDeTexto" que podéis encontrar en el apartado "interfaz de usuario" de la paleta del diseñador.
Cuando tengáis que ofrecer la opción al usuario de elegir una fecha, os aconsejo que empleéis el componente "SelectorDeFecha" que podéis encontrar en el apartado "interfaz de usuario" de la paleta del diseñador.
Cuando tengáis que almacenar algún dato de forma permanente en el dispositivo móvil, os aconsejo que utilicéis el componente "tinyBD" que encontraréis en el apartado "almacenamiento" de la paleta del diseñador.
Avanzamos nuevamente en pareja.
Una vez arrastrados los componentes, ahora es el momento de que modifiquéis su apariencia hasta que quede como habíais pensado.
Para ello, en cada una de las dos pantallas que habéis creado, introducid las "disposiciones" que necesitéis para colocar cada elemento en su sitio y después modificad las propiedades de cada componente hasta que obtengáis la apariencia que buscáis.
Tratad de ser creativos y marcad vuestro estilo.
Es un componente de App Inventor 2 que sirve para situar en una posición precisa los elementos que formarán parte de una pantalla.
Para colocar dos botones a la misma altura en la pantalla he tenido que utilizar una disposición horizontal.
Una vez que hayáis trasladado los componentes a cada pantalla habréis comprobado que quizás no quedan como esperabais.
Eso es debido, por un lado, a que cada elemento tiene unas propiedades que os permiten configurar su apariencia, y por otro, a que, a veces, hay que introducir una determinada "disposición", desde el apartado del mismo nombre de la paleta del diseñador, para crear los espacios necesarios en la pantalla, tanto en horizontal como en vertical o formando una cuadrícula en forma de tabla.
Supongo que ya sabéis que los componentes necesarios se arrastran desde el apartado de la paleta que corresponda hasta soltarlos en el visor.
Una vez que se acaba de configurar el espacio visible del visor, debéis situaros en el apartado “componentes” para que vayáis pinchando sobre cada uno de los elementos que habéis dispuesto en vuestra interfaz y os dediquéis a modificar sus propiedades hasta que obtengáis la apariencia que buscáis.
Seguimos en pareja.
Ya os habréis dado cuenta de que hay algunas propiedades que necesariamente habéis tenido que modificar porque estaban directamente relacionadas con la apariencia de vuestros componentes en la interfaz, mientras que hay otras que quizás no hayáis tenido que utilizar, pero no por ello dejan de ser igual de útiles.
Es precisamente el segundo caso el que vais a trabajar ahora. Centraros en los nuevos componentes que hayáis utilizado y dedicaros a explorar sus propiedades cambiándolas para ver qué pasa.
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0