Nro.

DD-106
Programación Móvil para Redes
Página 1 de 19

Programación Móvil para Redes

LABORATORIO N° 01

Entorno de desarrollo App Inventor

 Nro. DD-106
Programación Móvil para Redes
Página 2 de 19

CODIGO DEL CURSO: II3401

Not
Alumno(s):
a
Grupo: Ciclo: III
Excelente Regular Requiere No acept.
Criterio de Evaluación Bueno (3pts)
(4pts) (2pts) mejora (1pts) (0pts)

Cumple con la Cumple con Cumple con muy No cumple

Cumple con todo
mayoria de lo algo de lo poco de lo con nada de
lo requerido por
requerido por el requerido por el requerido por el lo requerido
el criterio
criterio criterio criterio por el criterio
Habilita la plataforma de
desarrollo App Inventor
Reconoce la estructura de la
plataforma de App Inventor
Crea pruebas de escritorio en
las que reconoce el valor de las
variables en cada ciclo
Realiza observaciones y
conclusiones que aporten un
opinión crítica y técnica
Muestra orden y respeto en el
laboratorio y redacta el informe
ordenamente, sin copias de
otros autores
I.- OBJETIVOS:
 Habilitar la plataforma de desarrollo de trabajo App Inventor
 Reconocer el entorno de desarrollo de App Inventor

II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la
ingestión de alimentos o bebidas.

III.- FUNDAMENTO TEÓRICO:

 Nro. DD-106
Programación Móvil para Redes
Página 3 de 19

 Revisar el texto guía que está en el campus Virtual.

 Revisar informacion proporcionada en canvas

IV.- NORMAS EMPLEADAS:

 No aplica

V.- RECURSOS:

 En este laboratorio cada alumno trabajará con un equipo con sistema operativo
Windows.
 Para el uso de la plataforma de desarrollo App Inventor debe poseer conexión a
internet

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

 El desarrollo del laboratorio es individual.

VII.- PROCEDIMIENTO:

Nota:
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las
herramientas de desarrollo en un equipo externo.

CONSIDERACIONES

1. Se usara el software de desarrollo App Inventor 2

 Nro. DD-106
Programación Móvil para Redes
Página 4 de 19

1. HABILITACIÓN Y RECONOCIMIENTO DE ENTORNO DE DESARROLLO

1.1 Se usará la herramienta App Inventor para la creación de aplicaciones en Android

1.2 Investige que es App Inventor y que otras herramientas existen para crear
aplicaciones para la plataforma Android

AppInventor es un entorno de
desarrollo de software creado por  Thunkable
Google para la elaboración de  Android Studio
aplicaciones destinadas al sistema  Kodular
operativo de Android. El lenguaje es  Burbuja
gratuito y se puede acceder  AppyBuilder
fácilmente de la web. Las  AppsGeyser
aplicaciones creadas con
 appenguin
AppInventor están limitadas por su
 Código de bolsillo
simplicidad, aunque permiten cubrir
un gran número de necesidades  Marco Punya
básicas en un dispositivo móvil.  Casagbic

1.3 Ingrese al siguiente enlace https://appinventor.mit.edu/

1.4 Haga clic en el boton de Create Apps

1.5 Para usar App Inventor debe tener una cuenta GMAIL. Registrese con su cuenta
GMAIL

1.6 Acepte los terminos y condiciones de uso

 Nro. DD-106
Programación Móvil para Redes
Página 5 de 19

1.7 Habilite la casilla de Do Not Show Again y haga clic en Continue

1.8 En la siguiente pantalla se mostrara algunos proyectos de demostración que ofrece

App Inventor. Podemos cerrar la ventana, iniciar un proyecto en blanco o utilizar un
proyecto de demostración. Haga clic sobre el boton GO TO TUTORIAL debajo de la
imagen del gato

1.9 Se mostrará un entorno en el que se listaran todos los proyectos que vaya creando.
 Nro. DD-106
Programación Móvil para Redes
Página 6 de 19

1.10 Cambie el idioma del entorno, haciendo clic sobre English y elija Español

1.11 Haga clic sobre el proyecto creado HelloPur

1.12 Investigue para que sirve para menu disponible en App Inventor

1.12.1 Proyectos:

Mis proyectos:
Al Pulsar esta opcion se abrirá la pantalla de proyectos, donde podremos ver o elegir todos
los proyectos que tuvieramos guardados.

Comenzar un proyecto nuevo:

Si pulsamos se abrirá un cuadro donde podremos darle el nombre a un nuevo proyecto, al
rellenar el campo de texto con un nombre y pulsar en aceptar se nos creará un proyecto
nuevo que aparecerá en la pantalla de proyectos.

Importar proyecto (.aia) desde mi ordenador..

Podremos cargar una plantilla (fragmento de un progranma) o un proyecto anteriormente
guardado en este formato desde nuestro ordenador, de esta manera.

Importar proyecto (.aia) desde mi repositorio..

En esta opción podremos cargar proyectos desde el repositorio o añadir la dirección url de
una nueva ibrería de plantillas que otras personas han creado y que están disponibles en la
Web.
 Nro. DD-106
Programación Móvil para Redes
Página 7 de 19

Borrar proyecto:
Se abrirá una nueva ventana para que confirmamos si realmente queremos borrar, si
pulsamos en aceptar el proyecto se borrara definitivamente de la pantalla de proyectos.

Guardar proyecto:
Si se pulsa esta opción quedará guardado nuestro trabajo, por defecto se guardará con el
nombre que se le dio al iniciar el proyecto.

Guardar proyecto como:

Si se elige esta opción se abrirá una nueva ventana en la que se nos pedirá rellenar un campo
de texto con el nuevo nombre que se le dará al proyecto una vez pulsado en aceptar se
guardará el proyecto con el nuevo nombre.

Punto de control:
Esta opción ara una copia de nuestro proyecto y podremos continuar trabajando con el
mismo, si por algún motivo nuestro proyecto se da al traste, podremos rescatar el último punto
de control a modo de copia de seguridad.

Exportar a mi ordenador el proyecto (aia)

como bien indica el nombre de este título, si seleccionamos un proyecto guardado y pulsamos
esta opción, el proyecto se guardará en nuestro ordenador en formato aia, para que
posteriormente se pueda descargar en otro ordenador.

Exportar todos los proyectos:

Esta opción es exactamente la misma que la anterior, pero con la salvedad de que serán
todos los proyectos que tengamos guardados.

Importar keystore:
Sí elegimos está opción Import haremos una nueva keystore eliminando la anterior que
tuvieramos.

Exportar keystore:
Si pulsas en esta keystore se guardará en nuestro ordenador esto puede servir para importar
despues está keystore en otras cuentas de app inventor y así poder subir aplicaciones con la
misma keystore. Tambien puede servir para hacer una copia de seguridad de la misma.

Borrar Keystore:
 Nro. DD-106
Programación Móvil para Redes
Página 8 de 19

1.12.2 Conectar:

Al companion:
Esta opción nos abrirá una ventana con un código alfanumérico de seis caracteres y un
codigo bidi, si tenemosinstalada en nuestra tablet o teléfono la aplicación MIT AI2
companion, podremos escanear este codigo o introducir los caracteres para poder ver
nuestra aplicación en la pantalla denuestro dispositivo.

Emulador:
Si tenemos instalado en nuestro PC el programa aistarter al pulsar en esta opcion este
nos abrirá un emulador que simula el funcionamiento de un teléfono android en la
pantalla de nuestro ordenador.

USB:
Esta opción te permitirá conectar tu dispositivo android a tu Ordenador mediante un
cable usb, para poder ver el funcionamiento de tu aplicación en tus dispositivos

Reiniciar conexión
En ocasiones puede pasar gue tengamos problemas a la hora de conectar nuestro
dispositivo con alguna de las opciones anteriormente citadas, en ese caso deberemos
de optar por esta opción para reiniciar las conexiones.

Reiniciar completamente:
Esta opción hace exactamente lo mismo que la anterior, pero con el añadido de que
hará que nuestra aplicación sea restaurada con los datos de fábrica, borrando o
iniciando todos los valores.

1.12.3 Generar:

App (Generar código QR para el archivo. APK).

Si pulsamos en esta opción, no aparece en la pantalla de nuestro ordenador una
ventana
que en su interior tendrá un código QR, que si podemos leer con la cámara de nuestro
dispositivo, se descargara nuestra aplicación empaquetada en un archivo APK, que
podremos instalar en nuestro dispositivo.

APP (Guardar archivo.APK en mi ordenador).

Esta opción guardará en nuestro ordenador nuestra aplicación empaquetada en un
archivo APK, que después podremos pasarla a nuestro-dispositivo android, compartirla
con otras personas o incluso subirla a google
 Nro. DD-106
Programación Móvil para Redes
Página 9 de 19

1.12.4 Settings:

1.12.5 Ayuda:

Saber que tenemos una serie de opciones como pequeños tutoriales, ayuda, acceso a
foros, para ayudarnos a conocer y aprender esta fantástica herramienta

1.12.6 Mis proyectos:

Al pulsar en esta pestaña se nos abrirá la ventana de proyectos donde podremos ver,
cargar o borrar todos los proyectos guardados con anterioridad

1.12.7 Gallery:

Esta opción es muy interesante, si la seleccionamos Se abrirá una ventana con

proyectos guardados por otros usuarios de app inventor, que podremos descargar y ver
su código fuente

1.12.8 Guía:

Al pulsar en esta pantalla, se abrirá una nueva ventana en nuestro navegador, donde
se abrirá una página con documentación y asistencia a modo de tutorial, con el que
podremos conocer más a fondo esta herramienta.

1.12.9 Informar de un problema:

 Nro. DD-106
Programación Móvil para Redes
Página 10 de 19

Al pulsar en esta opción se abrirá una nueva ventana en nuestro navegador, que nos
redirigirá a la página de reporte de problemas, donde podremos consultar incidencias
de otros usuarios que ya fueron resueltas, o denunciar un problema que tengamos con
app inventor

1.13 Investigue para que sirve cada una de las secciones de App Inventor

1.13.1 Paleta:

Se encuentran todos los componentes que podemos agregar a nuestro programa

1.13.2 Visor:

Este ocupa gran parte de la pantalla, es como un lienzo blanco, aquí iremos
arrastrando los componentes o bloques de programación a modo de un puzle para
hacer la lógica de nuestro programa.

1.13.3 Componentes:

Aquí a medida que vayamos arrastrando los componentes visibles al visor, aparecerá
una especie de árbol jerárquico en el que podremos ver ordenados todos los
componentes arrastrado.

1.13.4 Propiedades:

Aquí podremos modificar las propiedades de cada Componente que metamos en

nuestra aplicación por ejemplo en un botón podremos cambiar el texto la fuente de la
letra e incluso el color.
 Nro. DD-106
Programación Móvil para Redes
Página 11 de 19

1.13.5 Medios:

La columna de medios, está situada más debajo de la columna de bloques, nos

mostrará todos los archivos multimedia que tengamos cargados en nuestra pantalla
actual se podrá borrar o subir nuevos archivos, pulsando en el botón de más abajo.
 Nro. DD-106
Programación Móvil para Redes
Página 12 de 19

2. EJECUCIÓN DE APLICACIÓN

2.1 En su celular ingrese a PlayStore e instale la aplicación MIT AI2 COMPANION

2.2 Investigue que es y para que sirve la aplicación MIT AI2 COMPANION
Es la opción recomendada. Consiste en instalar la aplicación MIT AI2 Companion
en la tableta para establecer conexión con la web http://ai2.appinventor.mit.edu/ y
poder testear las aplicaciones creadas en esta aplicación. El requisito previo es
que la tableta y el ordenador que accede a la interfaz web deben estar
conectados a la misma wifi.

2.3 Abra la aplicación MIT AI2 COMPANION instalada

2.4 Procederemos a ejecutar el proyecto HellPur creado en nuestro dispositivo movil,

para esto hay que cerciorarse que nuestra PC y celular esten en la misma red WIFI
2.5 Vuelva a la pagina dedesarrollo de App Inventor y haga clic en ConectarAI
Companion. Se mostrara un codigo QR y un codigo
 Nro. DD-106
Programación Móvil para Redes
Página 13 de 19

2.6 Escane el codigo QR utilizando la aplicación MIT AI2 COMPANION, o si desea

puede utilizar el codigo de 6 digitos creados. Verifique que la aplicación se muestre
en el dispositivo
2.7 Haga clic sobre la imagen del gato y verifique su funcionamiento. Coloque capturas
de la ejecución del programa

2.8 Comente los detalles mas importantes

Al presionar al gato este maulla.

La imagen del gato es un botón
El color de la imagan se opaca al presionarla
 Nro. DD-106
Programación Móvil para Redes
Página 14 de 19

3. CREACIÓN DE APLICACIÓN

3.1 En la pagina de App Inventor haga clic en Mis Proyectos

3.2 Haga clic en Comenzar un proyecto nuevo…
3.3 Coloque nombre del proyecto MiPrimerApp y luego haga clic en Aceptar

3.4 Haga clic sobre el nombre del proyecto que se acaba de crear
3.5 Desde la paleta de objetos arrastre un objeto Imagen y Etiqueta a la pantalla del
Visor
 Nro. DD-106
Programación Móvil para Redes
Página 15 de 19

3.6 Descarge una imagen de su preferencia a su PC

3.7 Desde la seccion de componentes haga clic en Imagen1 y mas abajo en la
seccion de Medios haga clic en Subir Archivo…

3.8 Seleccione la imagen que descargo y carge la imagen

3.9 En la sección de componentes haga clic en Imagen1 nuevamente y en la sección
propiedades haga clic en Foto y elija la imagen subida previamente. Verifique que
se muestra la imagen respectiva
 Nro. DD-106
Programación Móvil para Redes
Página 16 de 19

3.10 En la sección componentes seleccione ahora Etiqueta1 y en la sección

propiedades , en el cuadro de Texto coloque sus nombres

3.11 Ejecute su aplicativo en su celular y muestre una captura del resultado

3.12 Notara que el aplicativo creado no se instala en el dispositivo, ya que el

aplicativo MIT AI2 Companion es el que ejecuta la aplicación.

3.13 Se pasara a instalar la aplicación como tal en el dispositivo. Para esto haga clic
en la pagina de App Inventor y haga clic en el menu GenerarApp(guardar archivo
apk en mi ordenador)

3.14 Verifique que se ha descargado un archivo APK, este archivo es el intalable para
las plataformas Android. Conecte su celular y copie el APK creado a su celular,
luego desde su celular instale el APK

3.15 Verifique que ahora si aparece instalada la aplicación, ejecutela y pruebe su

funcionamiento
 Nro. DD-106
Programación Móvil para Redes
Página 17 de 19

3.16 El icono lo coloca automaticamente MIT AI2 Companion a su APP creado, para
poder personalizar el icono, nombre del aplicativo, etc, se realizara desde App
Inventor

3.17 En App Inventor haga clic en la sección componentes y elija Screen1, en la

seccion de propiedades configure como se muestra:

3.17.1 PantallaAcercaDe: Coloque Curso de Movil para Redes

3.17.2 AppName: Sus Iniciales
3.17.3 Icono: elija la imagen subida previamente
3.17.4 OrientacionDeLaPantalla: Sensor
3.17.5 Theme: Black Title Text
3.17.6 Titulo: Mi Primer App

3.18 Vuelva a generar el APK e instalelo en su celular

3.19 Comente los cambios que se pueden notar y adjunte la captura del resultado
 Nro. DD-106
Programación Móvil para Redes
Página 18 de 19

Se pueden ver los cambios como el icono el nombre de la app y la barra azul en
la parte superior de la interface de la aplicación

4. EJERCICICOS PROPUESTOS

a. Cree una APK que muestre una imagen suya, debajo todos sus datos
personales(nombres, edad, fecha, especialidad, etc )
b. Investigue y personalize su APK para que tenga colores llamativos entre otros.
c. Adjunte capturas del proyecto realizadoEl aplicativo sera revisado en clases y cuanto
mas detalle posea, tendra una mejor nota

Pantalla 1 Pantalla 2
 Nro. DD-106
Programación Móvil para Redes
Página 19 de 19

Pantalla 3 Pantalla4
 Nro. DD-106
Programación Móvil para Redes
Página 20 de 19

Pantalla 5 Pantalla6

Pantalla1
 Nro. DD-106
Programación Móvil para Redes
Página 21 de 19

Pantalla2

Pantalla3
 Nro. DD-106
Programación Móvil para Redes
Página 22 de 19

Pantalla4

Pantalla5

Pantalla6
 Nro. DD-106
Programación Móvil para Redes
Página 23 de 19

OBSERVACIONES (5 mínimo):
(Las observaciones son las notas aclaratorias, objeciones y problemas que se pudo
presentar en el desarrollo del laboratorio)

1. Se pudo observar como es la interface de un programa desarrollador de software

nativo
2. Se observo las diferentes herramientas que nos ofrece
3. Se puede cambiar el icono por defecto que viene
4. Existe la pestaña bloques donde podemos programas diferentes acciones
5. Es muy sencillo de entender

CONCLUSIONES (5 mínimo):
(Las conclusiones son una opinión personal sobre tu trabajo, explicar como
resolviste las dudas o problemas presentados en el laboratorio. Ademas de aportar
una opinión critica de lo realizado)

1. Se concluyo que es una herramienta muy útil para aplicaciones básicas

2. Es mejor trabajar conectado al celular ya que las dimensiones que nos dan por
defectos son diferentes
3. Es una herramienta útil para iniciar la programación móvil
4. Cada .apk que se genera de un proyecto resulta como una actualización al
instalarla
5. Es una herramienta que se encuentra online y no es necesario instalar algún
programa para usarla