Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

Colegio De Estudios Científicos Y Tecnológicos

Del Estado De Oaxaca
Organismo Público Descentralizado
Plantel 05, Etla

Estudiante: Edgar García Hernández

Docente: Roxana Jiménez Martínez

ACTIVIDAD 1

Conociendo App Inventor

Submódulo II: Desarrolla Aplicaciones Móviles Para IOS

Carrera: Programación
Grupo: 604
Semestre: Sexto Semestre
Ciclo Escolar: 2024 – 1

Fecha de entrega: Viernes 22 de Marzo del 2024

1
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

Índice
Pagina

I. Definición ………………………………………………………… 3

II. Forma de acceso a App Inventor …………………………………. 4

III. Pantalla principal de App Inventor ……………………………….. 6

IV. Generar archivo ejecutable …………………………….………….. 7

2
Estudiante: Edgar García Hernández
 Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

App Inventor
I. Definición.
Es un entorno de programación visual intuitivo, crea aplicaciones completamente
funcionales para teléfonos Android y iPhone, su programación está basada en bloques
que expiran la creatividad.
Este lenguaje de programación está diseñado para niños, jóvenes y adultos para crear
aplicaciones fáciles y funcionales.

3
Estudiante: Edgar García Hernández
 Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

II. Forma de acceso a App Inventor

• Para empezar, buscamos en nuestro navegador “App Inventor”.

• Hacemos clic en el primer enlace para dirigirnos a la página principal.

• Se abrirá la siguiente página, hacemos clic en el botón “create apps” para

acceder.

4
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Sin embargo, tenemos que acceder con una cuenta de Google. Lo único que nos
pedirá será nuestro usuario de Google y contraseña de Google. Nos registramos y
pulsamos en el botón “siguiente”

• Al acceder con la cuenta Google, ingresaremos a la página de App inventor.

Podemos crear un proyecto, para realizar una aplicación. Tecleamos el botón
“Nuevo proyecto”,

• Para poder crear un proyecto nuevo, tendremos que asignarle un nombre a nuestro
proyecto y tecleamos el botón “Aceptar”. En nuestro proyecto no debe tener
espacio nuestro nombre.

5
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

III. Pantalla principal.

COMPONENTES

PALETA

MEDIOS

VISOR
PROPIEDADES

Observaremos los siguientes paneles para el diseño de nuestra aplicación

Paleta: Selecciona las herramientas de la paleta y arrastrarlo al visor para incluirlos en tu

App.

Visor: Coloca los componentes en el visor para establecer el aspecto de tu aplicación y

podemos verlo a la vista previa de la aplicación.

Componentes: A medida que incorpores componentes a la aplicación se irán añadiendo a la

lista de componentes y permitirá cambiarles el nombre, borrarlos o editarlos.
Propiedades: selecciona un componente en la lista de componentes en la lista de
componentes para editar las opciones de los componentes, como modificar su forma.
Medios: En el panel media, añadimos imágenes, sonidos o videos a nuestra aplicación.

6
Estudiante: Edgar García Hernández
 Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

IV. Generar archivo ejecutable.

Vamos a diseñar nuestra aplicación, en este ejemplo realizaremos una aplicación de viajes
turísticos, podemos realizar diversas aplicaciones con diferentes dinámicas.

• Para empezar a crear nuestra primera aplicación, seleccionaremos que dispositivo

pertenecerá en la parte de arriba de nuestro visor. Nos muestra solamente iOS y
Android.

• En la parte izquierda estará la columna llamada “paleta”, ahí se encontrarán

herramientas para la aplicación, para poder colocarlas en el visor, debemos
seleccionarla, lo arrastramos con el cursor poniéndola en el visor.
Para este caso elegiremos el componente “Etiqueta”, para agregar un texto.

ARRASTRAR

7
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Ahora bien, la parte de izquierdo están los componentes y propiedades de nuestra

herramienta, elegimos nuestro componente, alado se muestra sus propiedades,
como el color de texto, tamaño de letra, tipo de letra, alto, ancho, etc. Podemos
personalizar cada de esos componentes.
En este caso en el componente etiqueta, cambiamos su propiedad de texto,
pondremos “Conoce Oaxaca”. Y aumentamos el tamaño de letra.

• Podemos centrar nuestros componentes seleccionando el “screen 1”, en

“dispHorizontal” pondremos la opción centrar.

8
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Para poner una imagen es el mismo paso, seleccionamos el componente imagen,

lo arrastramos al visor, la plantilla de la imagen se centra automáticamente. Para
poner una imagen nos dirigimos a propiedades, hacemos clic en “foto”, y
escogemos una imagen de nuestro explorador de archivos.
Podemos configurar el tamaño de imagen en las casillas de “alto” y “ancho”.

• Podremos observar nuestra imagen en el visor.

9
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Para poder interactuar con la aplicación y sincronizarla con nuestro celular.

Debemos instalar la aplicación, se puede encontrar en tu tienda de aplicaciones
con el nombre “MIT App Inventor”. Una vez instalada se mostrará la aplicación
en nuestro dispositivo.

• En la barra de arriba de del proyecto, hacemos clic en “conectar”, seleccionamos

la opción “AI Companion”

• Se nos mostrara un código QR o un código.

10
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Abrimos nuestra aplicación de nuestro dispositivo de “app inventor” y en la

opción “scan QR code” hacemos clic.

• Apuntamos la cámara al QR de la pantalla principal, se nos mostrara nuestra

aplicación diseñada. Al agregar mas elementos se nos muestra en tiempo real.

11
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Seguiremos poniendo más elementos como botones. En la columna “paleta”, en

el componente “Disposición”, arrastramos la opción “disposición horizontal”
al visor, se nos mostrara un cuadro en nuestro esto para poner nuestros botones
en un solo espacio.

• Seleccionamos nuestro componente, en la barra propiedades pondremos el

ancho que se ajuste al contenedor y el cuadro se ajustara al ancho de la pantalla
para proporcionar más espacio.

12
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Volvemos a la “interfaz de usuario” y agregaremos nuestros botones al cuadro.

• Podemos asignarle un nombre a los botones en la barra de propiedades.

• Ahora ya ponemos ver nuestros botones actualizados, en nuestro visor.

13
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Para darle funcionamientos a los botones, en la barra de arriba de propiedades, se

encuentra un botón llamada bloques, la damos clic. Y nos llevara a la siguiente
página.

• En la columna de la parte izquierda se pueden encontrar nuestros componentes,

al seleccionar el componente “boton1” se mostrarán diversas funciones que
tendrá el botón.

14
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Seleccionamos la ejecución “cuando botón1 clic ejecutar”, se pondrá en la

pantalla en blanco. Podemos hacer cambios en los otros componentes.
Seleccionamos nuestro componente “Etiqueta1”. Y elegimos una función y la
arrastramos a la ejecución del botón.

• De manera que este de esta forma.

15
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Para complementar la función, usaremos la lógica, como en este caso queremos

cambiar el texto de nuestra etiqueta, así seleccionamos el componente texto, y nos
mostrara diversas funciones, sin embargo, seleccionamos la primera función para
remplazar el texto que tiene la “etiqueta1”.

• La arrastramos a la ejecución, y escribimos en el espacio del cuadro un texto que

reemplace el texto de la “etiqueta1”.

• Igual podemos hacer con el componente de la imagen de reemplazar la imagen

en este caso, abajo esta la sección de medios, damos clic en subir archivo y
elegimos una imagen de nuestro explorador de archivo.

16
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Después seleccionamos nuestro componente imagen, elegimos nuestra función.

• Lo ponemos en nuestra ejecución de nuestro botón, elegimos la imagen que había

subido anteriormente en el panel de medios.

• Nos dirigimos a nuestra aplicación que esta sincronizada con nuestro celular y
podemos ver que, al hacer clic, se ejecutan nuestras instrucciones.

17
Estudiante: Edgar García Hernández
Módulo V: Desarrolla aplicaciones móviles

Submódulo II: Desarrolla aplicaciones móviles para iOS

• Para el botón que se muestra regresar, hacemos todo lo opuesto que al “boton1”,
seleccionamos nuestro componente “boton2”.

• Ponemos las mismas funciones que el “botón1”, solo invertimos sus valores.

En nuestra aplicación al presionar el botón “regresar”, el diseño vuelve al principio.

18
Estudiante: Edgar García Hernández