📱 Introducción a App Inventor

Parte 1: Designer

🎨

Estructura de la aplicación

Technovation Girls

Beginner Division - Sesión 4

En esta parte aprenderás: Qué es MIT App Inventor y cómo diseñar la estructura visual de tu app

¿Qué es MIT App Inventor? 🤔

Es una herramienta poderosa que te permite crear apps para Android e iOS

🎨

Visual: Programas moviendo bloques, no escribiendo código

🌐

Online: Funciona en tu navegador, no necesitas instalar nada

🆓

Gratis: Creado por MIT para que cualquiera pueda crear apps

📱

Real: Tus apps funcionan en teléfonos y tablets reales

"Si puedes hacer un puzzle, puedes crear una app"

¿Para qué sirve App Inventor? 🎯

🎮

Juegos

Crea juegos divertidos

🛠️

Herramientas

Apps útiles para tu día a día

📚

Educación

Apps para aprender

🌍

Soluciones

Apps para resolver problemas reales

¡Tu imaginación es el límite! Con App Inventor puedes crear la app que TÚ necesitas

¿Cómo funciona? 🏗️

Dos partes principales:

🎨

Diseñador
Cómo se VE tu app
← PARTE 1

⚙️

Bloques
Cómo FUNCIONA tu app
PARTE 2 →

🎨

Hoy: En el Diseñador añadiremos botones, textos, imágenes...

⚙️

Después: En los Bloques les diremos qué hacer cuando los toquemos

"Es como construir con LEGO: primero elegimos las piezas, luego las conectamos"

Programar con Bloques 🧩

🧩 + 🧩 + 🧩

¡Es como hacer un puzzle!

Arrastras bloques y los conectas para crear tu app

🎨

Colores

Bloques de diferentes colores

🔗

Encajan

Solo si tienen sentido juntos

✨

Fácil

Sin errores de escritura

"Si puedes hacer un puzzle, puedes programar una app"

Un Ejemplo Simple 💡

📱

Imagina una app que dice "¡Hola!"

🎨

En el Diseñador: Añades un botón

🧩

En los Bloques: Le dices "Cuando toquen el botón..."

💬

..."muestra el mensaje ¡Hola!"

¡Así de fácil! Y desde aquí puedes crear apps cada vez más increíbles

📝 Tarea para Casa

🏠

¡Crea tu primer proyecto!

Vamos a preparar la pantalla de tu app

📱

Nuevo Proyecto

Crea un proyecto en App Inventor

🔘

Botón

Añade un botón que diga "Di hola"

🏷️

Etiqueta

Añade una etiqueta (Label)

Siguiente: Veremos la Parte 2 para darle vida a tu app con bloques de programación

📄

Para los padres: Si necesitan ayuda para crear una cuenta en App Inventor, pueden consultar este documento con instrucciones.

Paso 1: Inicia Sesión 🔐

1

Ve a appinventor.mit.edu en tu navegador

2

Haz clic en "Create Apps!"

3

Inicia sesión con tu cuenta de Gmail

¡Verás esta pantalla! Aquí aparecerán todos tus proyectos

Paso 2: Crea un Nuevo Proyecto 📱

1

Haz clic en "Start new project"

2

Ponle un nombre (por ejemplo: "MiPrimeraApp")

3

Haz clic en "OK"

Importante: El nombre no puede tener espacios ni caracteres especiales

Paso 3: Añade un Botón 🔘

1

En el panel izquierdo, busca "Button" en la sección "User Interface"

Selecciona el componente Button

Paso 4: Arrastra el Botón a la Pantalla 👆

2

Arrastra el Button hasta el área del "Viewer" (la pantalla del móvil)

¡El botón ya está en tu pantalla!

Paso 5: Cambia el Texto del Botón ✏️

1

Con el botón seleccionado, mira el panel de la derecha ("Properties")

2

Busca la propiedad "Text"

3

Cambia el texto a "Di hola"

¡Ahora tu botón dice "Di hola"!

Paso 6: Añade una Etiqueta (Label) 🏷️

1

En el panel izquierdo, busca "Label" en la sección "User Interface"

Selecciona el componente Label

Paso 7: Arrastra el Label a la Pantalla 👆

2

Arrastra el Label hasta el área del "Viewer"

¡Perfecto! Ya tienes un botón y una etiqueta

¡Tarea completada! En la próxima sesión programaremos estos elementos

Parte 1 Completada ✅

🎨

Ya conoces la sección Designer

¡Has diseñado la estructura visual de tu app!

✅

Parte 1 - Designer: Ya sabes cómo crear la interfaz (botones, etiquetas...)

⚙️

Parte 2 - Blocks: Ahora veremos cómo darle funcionalidad con bloques

🎯 A continuación: Parte 2

Programaremos con bloques para que tu app responda

"Primero diseñamos, luego programamos"