Introducción app inventor-sesión 1 para 5

Material educativo

1. www.uct.edu.pe CONTENIDO Sesion 1: Introducción al App Inventor

2. APP INVENTOR 🎯 Taller 1: Introducción a App Inventor Proposito : Familiarizarse con la interfaz de App Inventor, el uso de componentes básicos ( botón , etiqueta ) y el entorno de bloques para la programación .

3. APP INVENTOR 🧠 1. ¿Qué es App Inventor? MIT App Inventor es una plataforma gratuita y en línea que permite crear aplicaciones móviles para Android e iOS de forma visual, sin necesidad de escribir código, usando bloques tipo rompecabezas.

4. APP INVENTOR 2. Interfaz de App Inventor : Componentes principales: Diseñador (Designer): aquí se colocan botones, etiquetas, imágenes, etc.

5. APP INVENTOR Bloques (Blocks): aquí se programa el comportamiento de la app .

6. APP INVENTOR Emulador o celular: para probar la aplicación en tiempo real.

7. APP INVENTOR

8. APP INVENTOR

9. APP INVENTOR Paso 2. Inicie aiStarter (solo Windows y GNU/Linux) Para usar el emulador o el cable USB se requiere el programa aiStarter . Este programa ayuda al navegador a comunicarse con el emulador o el cable USB. El programa aiStarter se instaló al instalar el paquete de instalación de App Inventor. En Windows, encontrará accesos directos a aiStarter desde el Escritorio, el Menú Inicio, Todos los programas y la Carpeta de inicio. Si desea usar el emulador con App Inventor, deberá iniciar aiStarter manualmente en su computadora al iniciar sesión. Puede iniciar aiStarter haciendo clic en el icono del escritorio o usando la entrada del Menú Inicio.

10. APP INVENTOR

11. APP INVENTOR Paso 3. Abra un proyecto de App Inventor y conéctelo al emulador . Primero, vaya a App Inventor y abra un proyecto (o cree uno nuevo: use Proyecto > Iniciar nuevo proyecto y asígnele un nombre a su proyecto). Luego, desde el menú de App Inventor (en el software basado en la nube App Inventor en  ai2.appinventor.mit.edu  ), vaya al Menú Conectar y haga clic en la opción Emulador  

12. APP INVENTOR Recibirás un aviso indicando que el emulador se está conectando. El inicio del emulador puede tardar un par de minutos. Es posible que veas pantallas de actualización como la siguiente al iniciar el emulado

13. APP INVENTOR 3. Actividad práctica: "Saludo Personalizado" Nombre del proyecto: MiPrimerSaludo Objetivo: Al hacer clic en un botón, se mostrará un saludo personalizado en pantalla. 🧩 Paso a paso: Paso 1: Crear un nuevo proyecto Ingresar a appinventor.mit.edu Clic en Create Apps → iniciar sesión con Google Click en "Start new project" → nombrar como MiPrimerSaludo

14. APP INVENTOR Paso 2: Diseñar la interfaz (en la pestaña Designer) Arrastra los siguientes componentes: 1 botón → renombrar como btnSaludar, texto: “Saludar” 1 etiqueta → renombrar como lblSaludo, texto en blanco ( ... )

15. APP INVENTOR Paso 3: Programar con bloques (en la pestaña Blocks) Selecciona el botón btnSaludar Agrega el bloque:

16. APP INVENTOR Paso 4: Probar la app Conectar el emulador o el celular (instalar MIT AI2 Companion) Escanear el código QR y probar el botón

17. www.uct.edu.pe ¡GRACIAS!