1. Introducción a App Inventor
Introducción a App Inventor
App Inventor es una herramienta visual gratuita que permite crear aplicaciones para celulares usando componentes y bloques en lugar de código escrito, ideal para estudiantes que ya conocen programación por bloques como Scratch o mBlock.
Este documento presenta App Inventor como una plataforma de programación visual por bloques, diseñada para crear aplicaciones para dispositivos Android. Se describe el entorno de desarrollo, la lógica de la programación de bloques y las herramientas fundamentales para el diseño de interfaces.
1. ¿Qué es App Inventor?
App Inventor es un entorno de programación visual creado por el MIT (Instituto de Tecnología de Massachusetts). Su propósito es permitir a los usuarios, sin experiencia en programación textual, construir aplicaciones funcionales. A diferencia de lenguajes como Python o Java, App Inventor utiliza un sistema de bloques gráficos que se conectan como piezas de un rompecabezas para construir la lógica del programa.
Esta herramienta facilita la transición del pensamiento lógico a la creación de una aplicación, ya que el usuario se enfoca en la funcionalidad y el flujo del programa, en lugar de en la sintaxis de un lenguaje de texto.
● Definición: App Inventor es un entorno de desarrollo visual para construir apps móviles arrastrando y configurando componentes en un diseñador y luego conectando bloques lógicos en un editor de bloques para definir el comportamiento de la app.
● Propósito educativo: Diseñado para enseñar pensamiento computacional y conceptos de programación sin exigir sintaxis textual, facilitando la transición desde entornos de bloques hacia conceptos más formales de programación.
2. Los Entornos de Desarrollo: Diseñador y Bloques
La interfaz de App Inventor está dividida en dos entornos principales, cada uno con un propósito específico y complementario:
● Entorno Diseñador: Este es el entorno de diseño visual de la aplicación. Es aquí donde ocurre la magia de la interfaz. Los usuarios arrastran y sueltan componentes como botones, etiquetas, imágenes y campos de texto para crear la interfaz de usuario. Piensa en este entorno como tu espacio de diseño gráfico, donde cada componente es una pieza que puedes mover, alinear y organizar. En este entorno, también se pueden ajustar las propiedades de cada componente, como el color de fondo, el tamaño de la fuente, el texto, la alineación y la visibilidad. El Entorno Diseñador te permite ver la apariencia de la aplicación en tiempo real mientras la construyes.
● Entorno de Bloques: Este es el verdadero cerebro de la aplicación, donde se define la lógica de la programación. Aquí, los usuarios dejan el diseño visual y se centran en el funcionamiento interno. Se navega a través de un conjunto de bloques predefinidos, organizados por categorías de colores (control, lógica, matemáticas, etc.). El usuario arrastra estos bloques al área de trabajo y los ensambla como si fueran piezas de un rompecabezas. El Entorno de Bloques te permite controlar cómo los componentes interactúan, cuándo se muestran o se ocultan y qué acciones se ejecutan cuando un usuario presiona un botón o desliza su dedo por la pantalla.
3. Partes principales de la interfaz (Diseñador)
La parte del diseñador como su nombre lo indica, se encarga de la parte del diseño grafico de la interfaz de las aplicaciones tales como, pantallas, menús, botones, distribución de componentes, es decir, todo lo que el usuario puede ver en la pantalla. En este apartado podemos ver que se divide en 6 componentes principales que son:
3.1. Barra de Herramientas o Menú principal.
La barra de menú principal de MIT App Inventor recibe el nombre de Barra de menú o Barra de herramientas y se ubica en la parte superior de la pantalla, ofreciendo opciones generales para la gestión del proyecto, como la creación, exportación e importación de proyectos, la conexión a dispositivos de prueba y la generación del archivo de la aplicación.
Componentes y funciones de la barra de menú principal:
Proyectos: Permite gestionar la creación, borrado, exportación e importación de proyectos.
Conectar: Se utiliza para establecer la conexión con un dispositivo móvil o emulador para probar la aplicación en desarrollo.
Generar: Esta opción sirve para crear el archivo instalable de la aplicación (APK) que se podrá instalar en un dispositivo Android.
Mis Proyectos: Abre una lista para ver todos los proyectos guardados.
Ver papelera (View Trash): Muestra los proyectos que han sido borrados.
Cambiar idioma: Permite seleccionar el idioma de la interfaz de App Inventor.
Cambiar de pantalla: En el modo de diseño, esta opción permite agregar o eliminar pantallas en la aplicación.
Cambiar entre modo Diseño y Bloques: Permite alternar entre la interfaz de diseño y el editor de bloques para programar las acciones.
3.2. Componentes.
Son los elementos de la interfaz de usuario con los que el usuario puede interactuar. Ejemplos de componentes son un Botón (que se puede presionar), una Etiqueta (que muestra texto) o un Campo de Texto (donde el usuario puede escribir). Cada componente cumple una función específica en la aplicación.
3.3. Pantallas (Screens).
Simula la pantalla del dispositivo donde se coloca la interfaz de la app. Permite ver la disposición de botones, textos, cajas y previsualizar la apariencia antes de probar la app en el dispositivo físico.
3.3. Propiedades.
Panel donde se configuran las características del componente seleccionado. Cada componente tiene propiedades que se pueden personalizar en el Entorno Diseñador. Por ejemplo, una etiqueta tiene propiedades como Texto, Tamaño de Fuente y Color de Fondo. Al cambiar el valor de una propiedad, cambia inmediatamente la apariencia y comportamiento de ese componente en el visor de pantalla o Screens.
4. Partes principales de la interfaz (Bloques)
4.1. Lógica de componentes.
Área donde se encuentran los bloques que permiten programar la lógica de la aplicación (Control, Lógica, Matemáticas, Texto, Listas, Variables, Procedimientos, etc.) y se arrastran al área de programación para conectar los bloques para definir lo que hace la app cuando ocurren esos eventos.
● Eventos: Un evento es una acción que desencadena un programa. Los eventos son cruciales para hacer que una aplicación sea interactiva. Por ejemplo, cuando Botón1.Clic es un evento que ocurre cuando el usuario presiona el botón. Los bloques que se colocan dentro de este evento se ejecutarán cuando el botón sea presionado.
4.2. Área de programación o desarrollo.
Área separada donde se programa la lógica mediante bloques (Control, Lógica, Matemáticas, Texto, Listas, Variables, Procedimientos, etc.). En esta sección es donde se define los que hace el programa mediante la unión de bloques.
4.3. Papelera.
5. Ejercicio Inicial: “Mini Calculadora de Operaciones Básicas”
🎯 5.1 Objetivo:
Vamos a crear una aplicación que permitirá al usuario ingresar dos números y realizar las 4 operaciones básicas (suma, resta, multiplicación y división) entre dos números digitados por el usuario al presionar los botones específicos.
5.2. Accediendo a APP INVENTOR.
Para comenzar crea ingresa a la pagina de App inventor, a través del siguiente enlace: https://appinventor.mit.edu/, Luego haz clic sobre la opción Create Apps!.
Luego debes iniciar sesión por cualquiera de los medios disponibles. El más común es seleccionando tu cuenta de Google. Después de iniciar sesión, se abrirá el programa y mostrará la siguiente ventana donde debes hacer clic en el botón Continuar.
5.3. Creando mí primer proyecto en APP INVENTOR.
Para comenzar haz clic sobre el botoón Nuevo proyecto, del apartado proyectos ubicado en la parte superior izquierda, tal y como se muestra en la imagen:
Asigna como nombre del proyecto: MiniCalculadora. Luego haz clic sobre el botón Aceptar.
🛠️ 5.4. Componentes en el Entorno Diseñador:
Agrega los siguientes elementos visuales:
Puedes personalizar los textos de los botones: “Sumar”, “Restar”, “Multiplicar”, “Dividir”.
🧩 5.5. Programación en el Entorno de Bloques:
Para cada botón, se programa el evento cuando ButtonX.Clic hacer con la siguiente lógica:
5.5.1. Obtener los valores de los cuadros de texto:
- Usar bloques obtener TextBox1.Texto y obtener TextBox2.Texto.
- Convertirlos a número con el bloque convertir texto a número.
Realizar la operación correspondiente:
Usar bloques matemáticos: suma (
+), resta (-), multiplicación (*), división (/).
Mostrar el resultado:
Usar el bloque
poner LabelResultado.Texto comoy asignar el resultado.
cuando ButtonSuma.Clic hacerponer LabelResultado.Texto como(convertir texto a número TextBox1.Texto) + (convertir texto a número TextBox2.Texto)
Conclusión
App Inventor es una herramienta visual que facilita la creación de aplicaciones a través de la programación por bloques. El Entorno Diseñador se utiliza para la interfaz, mientras que el Entorno de Bloques se utiliza para la lógica. El uso de componentes, propiedades y eventos es fundamental para crear aplicaciones interactivas y funcionales.
referencias:
https://programamos.es/la-interfaz-de-app-inventor-a-fondo/
https://studylib.net/doc/27686020/app-inventor
https://sites.google.com/view/appinventor-with-katia/interfaz
https://codeweek.eu/docs/spain/guia-iniciacion-app-inventor.pdf
https://es.scribd.com/document/661797424/Barra-de-herramientas-en-AppInventor#:~:text=Herramientas%20en%20AppInventor-,La%20barra%20de%20herramientas%20de%20App%20Inventor%20ofrece%20opciones%20para,dise%C3%B1o%20y%20programaci%C3%B3n%20en%20bloques.
https://sites.google.com/educarex.es/jmjq-appinventor/primeros-pasos/partes-de-app-inventor/barra-de-men%C3%BAs
Comentarios
Publicar un comentario