Embedded Files
En la actividad 3.7, nos embarcaremos en la creación de una nueva aplicación a la que llamaremos "app2". Esta aplicación contará con 4 etiquetas, 2 campos de texto, una imagen y 1 botón. En cuanto a su funcionalidad, aprovecharemos los campos de texto para recabar información, específicamente el nombre y la edad del usuario. Posteriormente, al pulsar el botón correspondiente, generará un comentario basado en estos datos y lo mostrará en la etiqueta 3. Además, haremos ajustes en las propiedades de los componentes a través de MIT App Inventor.
Actividad 3.7
Paso 1: Para comenzar a desarrollar la nueva aplicación, primero asegúrate de tener abierto el sitio web de MIT App Inventor. Puedes acceder a través de tu computadora utilizando el siguiente enlace: https://appinventor.mit.edu/.
Paso 2: En el menú superior, selecciona "Proyectos" y luego elige "Comenzar un proyecto nuevo...". Coloca el nombre "app2" en el campo de nombre del proyecto.
Paso 3: En la sección de Componentes de MIT App Inventor, seleccionamos el componente "Screen1" y ajustamos su propiedad "DispHorizontal" eligiendo la opción "Centro:3" para lograr una alineación centrada del contenido en el eje horizontal. Este ajuste mejora la presentación visual de la aplicación.
Paso 4: En la aplicación 2, arrastraremos los componentes esenciales que incluyen 4 etiquetas, 1 imagen, 2 campos de texto y 1 botón, como se muestra en el gráfico. La primera etiqueta servirá como título de la aplicación, mientras que la segunda indicará "Nombre del estudiante" para guiar al usuario. La tercera mostrará "Edad del estudiante" para indicar el tipo de datos a ingresar en el segundo campo de texto. La cuarta etiqueta se usará para mostrar el comentario generado. Los campos de texto permitirán al usuario ingresar su nombre y edad, y el boton activarán el proceso y la visualización de un comentario en la etiqueta 4, creando una experiencia interactiva para el usuario.
Paso 5: En la sección de propiedades del diseño, realiza las siguientes configuraciones para los componentes. Para la etiqueta 1, establece un "tamaño de letra" de 30 y asigna el "texto" como "Mi App2". Las etiquetas 2 y 3 tendrán un "tamaño de letra" de 20 y mostrarán los "textos" por "Nombre del estudiante:" y "Edad del estudiante:". En cuanto al Botón 1, utiliza un "tamaño de letra" de 20 y configura el "texto" como "Resultado". Estas ajustes aseguran una presentación coherente y legible en tu aplicación.
Paso 6: Descargar la imagen desde el siguiente enlace (descargar enlace), en la interfaz de MIT App Inventor, busca y selecciona el componente "Imagen1", en las propiedades, busca la opción "Foto", Haz clic en "Subir archivo", luego "Seleccionar archivo", busca y selecciona el archivo en la carpeta de descargas de tu computador. El archivo tiene el nombre, "imgalan.jfif". Finalmente, presiona el botón "Aceptar".
Paso 7: En la esquina superior derecha, haz clic en el botón <Bloques>, lo que te llevará al entorno de desarrollo para la programación mediante bloques.
En este punto, espero que haya quedado claro que cuando utilizamos un bloque con entrada o hendidura, estamos modificando o añadiendo una propiedad a un objeto.
El bloque "poner Etiqueta4.Texto como" nos permite modificar el texto que se muestra en la Etiqueta4, utilizando el bloque que conectamos a su lado derecho.
Los bloques con salida o protuberancia se refieren a un valor que se asigna o que posee el componente. Estos bloques suelen representar la lectura o extracción de información de un componente específico en una programación visual o de bloques.
El bloque "CampoDeTexto1.Texto" nos permite obtener el valor contenido en el Campo de Texto 1, es decir, captura el texto ingresado en dicho campo y lo almacena en este bloque para su uso en el programa.
Paso 8: Agregar los bloques de la siguiente manera: Cuando el "Botón1" sea clickeado, conecta ese evento a la acción de establecer el texto de "Etiqueta4"
Paso 9: Insertamos el bloque "Unir" ubicado en la sección de bloques de texto. Luego, le agregamos tres cadenas de texto para que el bloque "Unir" tenga un total de cinco entradas o hendiduras
Paso 10: Conectamos el bloque "Unir" al bloque "Poner Etiqueta4.Texto como".
Paso 11: Agregamos tres bloques de cadenas de texto en el área de desarrollo. Luego, en el bloque "Unir", conectamos lo siguiente:
En la primera hendidura, un bloque de cadena de texto.
En la segunda hendidura, "campodeTexto1.Texto".
En la tercera hendidura, otro bloque de cadena de texto.
En la cuarta hendidura, "campodeTexto2.Texto".
En la quinta hendidura, un tercer bloque de cadena de texto.
Paso 12: En el primer bloque de cadena de texto, escribimos "¡Hola, ". En el segundo bloque de cadena de texto, escribimos "! Con". Y en el tercer bloque de cadena de texto, escribimos " años, estás en la edad perfecta para aprender, divertirte y ¡sorprender al mundo!".
Page updated
Report abuse