2. Editor de bloques. Permite programar de una forma visual e intuitiva el flujo de funcionamiento del programa utilizando bloques.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "2. Editor de bloques. Permite programar de una forma visual e intuitiva el flujo de funcionamiento del programa utilizando bloques."

Milagros Barbero del Río
hace 6 años
Vistas:

1 Bienvenidos!!! App Inventor 2 (AI2) es la versión mejorada de una herramienta de programación creada por el MIT (Instituto Tecnológico de Massachusetts) y que fue adoptada por Google para sus usuarios como solución para crear de una forma sencilla aplicaciones para dispositivos Android El proceso de creación consta de 3 pasos: 1. Diseñador. Muestra el display de un móvil y se utiliza para el diseño de las pantallas de la aplicación donde se situarán los distintos componentes: imágenes, botones audios, textos, etc. configurando sus propiedades (aspecto gráfico, comportamiento, etc.). 2. Editor de bloques. Permite programar de una forma visual e intuitiva el flujo de funcionamiento del programa utilizando bloques. 3. Generador de la aplicación. Una vez terminada la aplicación se puede generar el instalador APK obteniéndose un código QR para su descarga desde el móvil o bien el propio archivo APK para descargar y enviar.

2 ACTIVIDAD 1 HOLA PROGRAMADOR!! INICIO INICIAR PROGRAMA APRETAR BOTON PULSAME? NO COMPUTADOR NO SALUDA SI COMPUTADOR CONTESTA HOLA PROGRAMADOR FIN

Construyendo tu primera App Ahora sí, vamos a pasar a construir la App. Para añadir el botón y el texto (etiqueta) a la aplicación, el procedimiento es muy sencillo.

3 Construyendo tu primera App Ahora sí, vamos a pasar a construir la App. Para añadir el botón y el texto (etiqueta) a la aplicación, el procedimiento es muy sencillo. Tan sólo tienes que seleccionarlos en la paleta y arrastrarlos hasta la pantalla del móvil, soltándolos en su interior. El aspecto resultante será parecido al de la figura 1.5. No te preocupes de momento si no puedes controlar dónde se colocan, y si tampoco son muy atractivos. Eso lo resolveremos en próximos capítulos. Haz clic ahora sobre el botón para seleccionarlo. Como verás quedará recuadrado, pero además se marcará en la columna de componentes, tal y como se aprecia en la figura 1.5. Además, en la columna de más a la derecha (columna propiedades) se pueden ver las características del botón. Cada vez que se selecciona algún elemento de la pantalla, las propiedades se actualizan para mostrar las correspondientes a ese elemento. Busca dentro de las propiedades la caja de texto llamada Texto. Haz clic con el ratón sobre ella, y teclea lo siguiente: Púlsame. Comprueba cómo al hacerlo ha cambiado el texto que aparecía sobre el botón. Repite el mismo procedimiento para editar el texto asociado al componente Etiqueta1, es decir, busca su propiedad Texto, pero ahora borra el contenido. Al hacerlo te parecerá que ha desaparecido de la pantalla, pero no te preocupes, sigue allí, pero está vacío. Regresemos a la columna de componentes. Aquí se muestra en todo momento todo aquello que hemos colocado en la pantalla. De momento verás que hay una lista que contiene las palabras Screen1, Botón1 yetiqueta1. Esto se refiere a que, en la pantalla del móvil, que se llamascreen1, hemos colocado un botón llamado Botón1 y un texto, llamadoetiqueta1. Los nombres de los componentes los pone por defecto AppInventor, pero suele ser buena práctica cambiarlos por otros que te den una pista de qué hacen en tu aplicación.

4 En nuestro caso, vamos a renombrarbotón1 a BotonPulsame, mientras que Etiqueta1 pasará a ser TextoHola. Para renombrar un componente primero debes hacer clic sobre su nombre en la lista de la columna Componentes, o sobre su dibujo en la pantalla. Después debes pulsar el botón Cambiar nombre que hay al pie de la columna Componentes. Al hacerlo aparecerá un cuadro de diálogo donde se indica el Nombre anterior y el que se quiere utilizar como Nuevo nombre. Renombra pues el botón y el texto a los nuevos BotonPulsame y Texto Hola, y comprueba cómo en la lista de componentes aparecen también esos nuevos nombres. Una vez colocados todos los elementos necesarios para completar nuestra aplicación, vamos a pasar a conectarlos entre sí para que hagan algo útil. Para ello necesitamos abrir una nueva ventana, el editor de bloques, y lo haremos pulsando el botón que con el texto Bloque que encontrarás en la parte superior derecha del área de trabajo. Si todo ha funcionado correctamente verás como aparece una nueva ventana, que será donde indicaremos qué queremos que haga el botón al ser pulsado. La manera en la que se indica cuál debe ser el funcionamiento de la aplicación se inspira en los juegos de construcción, en los que se dispone de un conjunto de bloques de distintas formas y tamaños, y que únicamente encajan de cierta manera. Aunque estos bloques sean muy simples, mediante la combinación de muchos de ellos pueden construirse creaciones realmente complejas e impresionantes. Busca a izquierda del editor de bloques la columna Bloques. Dentro de ella hay 3 categorías, que son: Integrados, Screen1 y Cualquier componente. En la categoría Screen1 encontrarás los componentes correspondientes al botón y la etiqueta. Haz clic sobre BotonHola y veráscomo a su derecha aparecen un montón de bloques de colores

Elige el primero de ellos que tiene en negrita el texto BotonPulsame. Clic. En realidad si te fijas bien, el texto completo es cuando BotonPulsame. Clic ejecutar.

5 Elige el primero de ellos que tiene en negrita el texto BotonPulsame. Clic. En realidad si te fijas bien, el texto completo es cuando BotonPulsame. Clic ejecutar. Lo que en realidad quiere decir: cuando hagas clic sobre el botón BotonPulsame..... Selecciona este bloque y arrástralo hasta una zona libre de pantalla. Podríamos completar la frase con algo así como escribe el texto hola, programador en el componente TextoHola. Si seleccionas ahora el componente TextoHola, verás que en los bloques asociados que aparecen a su derecha hay precisamente uno con un mensaje muy similar al que buscamos: poner TextoHola.Texto como.

Documentos relacionados

1. Qué es App Inventor 2? 2. Requisitos para utilizar AI2

1. Qué es App Inventor 2? 2. Requisitos para utilizar AI2 1. Qué es App Inventor 2? App Inventor 2 (AI2) es la versión mejorada de una herramienta de programación creada por el MIT (Instituto Tecnológico de Massachusetts) y que fue adoptada por Google para sus