APRENDE A USAR MIT APP INVENTOR (MIT APP)

Mi primera app (MIT APP INVENTOR)

NOMBRE COMPLETO: JEREMY JAIR QUISPE HUANCA

FECHA: 14/05/2025

INSTITUCION: INSTITUTO VIGIL

DOCENTE: Ing. Omar Cutimbo

1.PRESENTACION

Este blog tiene el propósito de redactar como fue que empecé y como fue evolucionando mi app en la 

añadiendo funciones útiles para el uso en el curso de topografía, funciones tales como GPS, BRUJULA, CALCULO DE RUMBO Y AZIMUTH, CAMARA FUNCIONAL, DATOS PERSONALES, CALCULO DE LONGITUD REAL DE CINTA Y UNA CALCULADORA MAESTRA, todo esto fue desarrollado en el curso de Informática y Internet.

En la carrera de Construcción Civil en el IESP Vigil realizando mi APP para dispositivos móviles a través de la pagina web de "MIT App inventor 2" 

1.1- ENTENDIENDO MIT APP INVENTOR

A l momento de crearte una cuenta en Mit App Inventor en la pagina web y crear un nuevo proyecto veremos toda una interfas con muchas funciones que explicare para que funciona cada uno a continuacion:

flecha roja: en esta parte nos muestran todas las FUNCIONES que tiene mit app inventor donde vemos apartados como:

Interfaz de usuario: elementos visuales como botones, etiquetas, imágenes, campos de texto y listas.

Disposición: organiza los componentes en filas, columnas o pantallas ocultas.

Medios: permite usar cámara, audio, video, visor de imágenes y grabadora.

Dibujo y animación: incluye lienzo, sprites y temporizadores para crear juegos o gráficos interactivos.

Mapas: muestra mapas interactivos con marcadores y seguimiento de ubicación.

Gráficos: genera gráficos de barras, líneas o pastel para visualizar datos.

Ciencia de los datos: conecta con fuentes de datos, analiza y representa información.

Sensores: usa acelerómetro, giroscopio, luz, ubicación y orientación del dispositivo.

Social: funciones para enviar mensajes, hacer llamadas, compartir contenido o usar redes sociales.

Almacenamiento: guarda datos localmente (TinyDB, archivos) o en la nube (Firebase).

Conectividad: conecta con servicios web, Bluetooth, WiFi o redes cercanas.

LEGO MINDSTORMS: controla robots EV3 o NXT desde la app.

Experimental: componentes en prueba, como reconocimiento de voz o visión artificial.

Extensión: permite añadir funciones personalizadas creadas por otros desarrolladores.

flecha verde: aqui vemos un buscador que es un complemento de mucha ayuda , donde podemos buscar funciones por su nombre y no perder tiempo en buscar entre apartados

flecha morada: la barra superior contiene varias opciones clave para gestionar y trabajar con tus aplicaciones. Aquí tienes un resumen breve y claro de cada una:

1. Proyectos: permite crear, abrir, guardar, copiar, eliminar o importar/exportar tus aplicaciones.
2. Conectar: sirve para probar tu app en un dispositivo real o emulador. Puedes conectar vía:
• AI Companion (código QR)
• Emulador
• USB
3. Generar: compila tu app para descargarla como archivo .apk (instalable en Android) o para generar un código QR de instalación.
4. Ajustes: configura opciones del entorno, como el idioma o el tamaño de fuente del editor.
5. Ayuda: ofrece acceso a documentación, tutoriales, foros y recursos de soporte oficial.

Flecha amarilla: estas opciones del Visor te ayudan a diseñar y probar tu app de forma más precisa. Aquí te explico cada una de forma breve:

1. Mostrar en el visor los componentes ocultos:
   Activa la visualización de componentes que están marcados como no visibles (por ejemplo, un botón oculto). Esto es útil para editarlos o ubicarlos sin tener que cambiar su visibilidad real en la app.
2. Tamaño de la Tablet:
   Cambia el tamaño del visor para simular cómo se verá tu app en una tablet. Así puedes ajustar el diseño para pantallas más grandes.
3. Dispositivos Android:
   Permite seleccionar diferentes tamaños de pantalla de teléfonos Android (pequeño, mediano, grande) para ver cómo se adapta tu interfaz a distintos dispositivos.

flecha morada 2: 

Screen1: es la pantalla principal de tu app. Toda aplicación comienza con esta pantalla, y no se puede eliminar porque contiene las propiedades generales del proyecto.

Añadir ventana: crea una nueva pantalla (como si fuera una nueva sección o página de tu app). Ideal para dividir funciones, como un menú o una pantalla de configuración.

Eliminar ventana: borra una pantalla adicional que hayas creado. No se puede eliminar Screen1, pero sí las demás. El sistema te pedirá confirmación y puede guardar una copia de seguridad.

Propiedades del proyecto: permite configurar aspectos generales como el nombre de la app, el ícono, la orientación de pantalla (vertical/horizontal), y si se usará la cámara, ubicación, etc.

Publicar en galería: sube tu app a la galería pública de MIT App Inventor para compartirla con otros usuarios. Es una forma de mostrar tu trabajo o inspirar a otros desarrolladores.

flecha azul: En MIT App Inventor, cuando diseñas tu app en el Visor, verás una lista llamada Componentes. Esta lista se divide en tres tipos según su visibilidad y función:

1. Todos los componentes
   Muestra todos los elementos que has agregado a tu app, tanto visibles como no visibles. Es útil para tener una vista completa del proyecto.
2. Componentes visibles
   Son los que el usuario puede ver y tocar en la pantalla del celular, como:
• Botones
• Etiquetas
• Imágenes
• Campos de texto
3. Componentes no visibles
   No aparecen en la pantalla del usuario, pero trabajan en segundo plano. Ejemplos:

• Reloj (Clock)
• Sensor de ubicación
• Reproductor de sonido
• Cliente web
• Bluetooth

Estos componentes no visibles aparecen en la parte inferior del Visor como íconos grises, y también se listan en el panel de Componentes para que puedas configurarlos o programarlos.

flecha naranja: En MIT App Inventor, el desarrollo de una app se divide en dos partes principales:

1. Diseñador (Designer)
   Es donde creas la apariencia visual de tu aplicación. Aquí puedes:
• Arrastrar componentes desde la paleta (botones, imágenes, campos de texto, etc.).
• Organizar cómo se verá la app en el celular o tablet.
• Configurar propiedades como colores, tamaños, textos, etc.
2. Bloques (Blocks)
   Es donde programas el comportamiento de tu app usando bloques encajables. Por ejemplo:

• “Cuando se presione el botón, mostrar un mensaje.”
• No necesitas escribir código, solo unir bloques lógicos como piezas de rompecabezas.

💡 Piensa en el Diseñador como el lugar donde decoras tu app, y en Bloques como el lugar donde le das vida.

flecha verde: ⚙️ ¿Qué son las propiedades?

Son los atributos configurables de cada componente. Por ejemplo, un botón tiene propiedades como:

• Texto (lo que muestra)
• Color de fondo
• Tamaño de fuente
• Visible o no visible
• Habilitado o deshabilitado

Cada tipo de componente tiene su propio conjunto de propiedades. Puedes modificarlas desde el panel derecho del Diseñador al seleccionar un componente.

🎨 ¿Qué es Appearance?

Es una subsección dentro de las propiedades que agrupa todo lo relacionado con el aspecto visual del componente. Incluye:

• Color de texto
• Color de fondo
• Tamaño y tipo de fuente
• Alineación del contenido
• Forma del botón (en algunos casos)

Modificar estas opciones te permite adaptar el diseño de tu app para que sea más atractiva y funcional.

Flecha azul: -Bloques Es la categría general que contiene todos los bloques disponibles, organizados por tipos

-Bloques integrados (siempre visibles):

Control: condicionales, bucles (si, mientras, por cada, etc.).

Lógica: verdadero/falso, operadores lógicos (y, o, no).

Matemáticas: operaciones numéricas, redondeo, aleatorios.

Texto: unir, dividir, comparar cadenas de texto.

Listas: crear, seleccionar, añadir o eliminar elementos.

Colores: elegir colores o convertirlos.

Variables: definir y usar variables.

Procedimientos: crear bloques personalizados (funciones).

-Bloques específicos de componentes

Cuando agregas un componente (como un botón o sensor), aparece su nombre en esta lista. Al hacer clic, verás sus bloques disponibles, como:

Eventos (cuando Botón1 .Clic)

Propiedades (poner Botón1 .Texto a)

Métodos (llamar Botón1 .Habilitar)

flecha amarilla: 🎧 Medios en MIT App Inventor – ¿Para qué sirve?

La categoría Medios en MIT App Inventor agrupa componentes que permiten trabajar con audio, imágenes, video, voz y texto. Sirve para hacer que tu app sea más interactiva, expresiva y funcional.

🔹 ¿Para qué sirve?
Permite a tu app:

• Tomar fotos o grabar audio/video
• Reproducir sonidos o videos
• Convertir voz en texto (reconocimiento de voz)
• Leer texto en voz alta (texto a voz)
• Traducir textos entre idiomas
• Compartir archivos multimedia

🔧 Componentes comunes:

• Cámara
• Grabadora de sonido
• Reproductor
• VideoPlayer
• ImagePicker
• Reconocimiento de voz
• Texto a voz
• Traductor
• Compartir

flecha roja: ⚠️ y la X roja ❌ en el editor de bloques de MIT App Inventor indican que hay un error o advertencia en tu programación. Aquí te explico qué significa cada uno:

1. Triángulo amarillo (⚠️) – Advertencia
• El bloque está bien conectado, pero puede haber un problema potencial.
• Ejemplo: usas una variable que aún no ha sido inicializada, o un bloque que no se ejecutará nunca.
2. X roja (❌) – Error crítico

• El bloque está mal conectado o incompleto, y la app no funcionará hasta que lo corrijas.
• Ejemplo: falta un valor obligatorio, un bloque está suelto, o hay un tipo de dato incorrecto.

🛠️ ¿Qué hacer?

• Pasa el mouse sobre el ícono y App Inventor te mostrará un mensaje explicando el problema.
• Revisa si el bloque está bien conectado, si falta algo, o si estás usando el tipo de dato correcto.

2-PANTALLA DE INICIO:

En mi pantalla de inicio únicamente se coloco una imagen en relacion a la topografia, 2 botones y 2 etiquetas que al momento de dar click en cada boton logra cambiar el texto de las etiquetas, el botón y las etiquetas contienen textos los cuales al instalar la app no son modificables así que en caso quieras cambiar el texto de estos dentro de las App se debería hacerle desde el apartado de "BLOQUES", es el apartado de programación básica para darle funciones a cada herramienta, por ello en el apartado de bloques se uso en cada una de las funciones que redactare como se realizaron a continuacion:

----------------------------------------------------------------------------------------------------------------------------