Nro.

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

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 14

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 14

 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 14

1. HABILITACIÓN Y RECONOCIMIENTO DE ENTORNO DE DESARROLLO

1.1 Se usara 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 Google para la
elaboración de aplicaciones destinadas al sistema operativo de Android. El
lenguaje es gratuito y se puede acceder fácilmente de la web. Las aplicaciones
creadas con AppInventor están limitadas por su simplicidad, aunque permiten
cubrir un gran número de necesidades básicas en un dispositivo móvil.
OTRAS HERRAMIENTAS:
 Appery.io
 Mobileroadie
 TheAppBuilder
 Good Barber
 Appy Pie
 AppMachine
 BiznessApps
 AppMakr
 ShoutEm
 Como
 AppYourself
 Mobincube
 Apps-Builder
 IBuildApp
 BuildFire
 MobAppCreator
 AppInstitute

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

1.4 Haga clic en el boton de Create Apps
 Nro. DD-106
Programación Móvil para Redes
Página 5 de 14

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

GMAIL, haciendo clic en el botón

1.6 Acepte los terminos y condiciones de uso

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
 Nro. DD-106
Programación Móvil para Redes
Página 6 de 14
 Nro. DD-106
Programación Móvil para Redes
Página 7 de 14

1.9 Se mostrara un entorno en el que se listaran todos los proyectos que vaya creando.
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: podemos guardar nuestro proyecto en los servidores de App
Inventor o en nuestro ordenador en el formato .aia también podemos
visualizar nuestros proyectos así como importar y exportar los proyectos
como las keystore.
1.12.2 Conectar: en este apartado podemos conectarnos a nuestro dispositivo móvil
mediante la app MIT AI2 COMPANION, así como a emulador o mediante
USB, el cual nos permite visualizar el avance de nuestro proyecto y como va
quedando.
1.12.3 Generar: en este apartado se puede guardar el proyecto como apk en el
ordenador así como también podemos generarle un código QR para el
archivo apk.
1.12.4 Settings: nos da la opción de deshabilitar la carga automática del proyecto,
asi también podemos habilitar el OpenDyslexic (es una fuente diseñada para
mitigar algunos de los errores de lectura causados por la dislexia.).
1.12.5 Ayuda: en este apartado podemos visualizar la versión del programa en el
cual estamos trabajando así también nos brinda tutotiales, foros a los cuales
podemos acceder gratuitamente, solución de problemas, reportar
problemas,etc.
1.12.6 Mis proyectos: nos muestra nuestros proyectos guardados en la nube así
también nos indica la fecha de su creación seguidamente la fecha de su
modificación, crear un nuevo proyecto, etc.
 Nro. DD-106
Programación Móvil para Redes
Página 8 de 14

1.12.7 Gallery: en este apartado podemos visualizar los proyectos añadidos a

nuestra papelera así también podemos eliminarlos definitivamente.
1.12.8 Guia: en este aprtado nos muestra la Biblioteca de inventores de
aplicaciones del MIT, documentación y soporte. Como dice toda una guía
sobre el uso y función de cada una de las herramientas y otros del programa.
1.12.9 Informar de un problema: nos permite reportar un problema en la comunidad
de inventores de aplicaciones del MIT, es una plataforma en la cual podemos
comentar nuestra inquietud, así como también buscar nuestro problema
como errores comunes.

1.13 Investigue para que sirve cada una de las secciones de App Inventor
1.13.1 Paleta: la encontramos a la izquierda de la pantalla y recoge todos los
componentes con los que podemos trabajar a la hora de crear nuestras
aplicaciones (botones, sprite, imágenes, sonidos, etc.)
1.13.2 Visor: simula una pantalla de un dispositivo móvil, aquí iremos añadiendo los
diferentes componentes y dando forma al aspecto que tendrá la app que
habíamos imaginado.
1.13.3 Componentes: este apartado recoge en una lista aquellos componentes que
finalmente formarán parte de la aplicación, será a partir de esta lista y el
último apartado, propiedades, como terminaremos nuestro diseño.
1.13.4 Propiedades: último gran apartado de esta ventana «diseñador».
Seleccionando cada uno de los componentes podremos modificar sus
propiedades (modificar textos, cambiar colores, añadir imágenes, etc.)
1.13.5 Medios: este apartado tiene la función de subir archivos como de audio,
video, documentos, etc. Con el cual podemos usarlo para la animación y
personalización de nuestra app.

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
Mit AI2 Companion es el complemento indispensable para comprobar el
funcionamiento a través del teléfono móvil o la Tablet de las actividades
realizadas en App Inventor. Es una APP disponible en Google Play que debe
descargarse en el dispositivo.
Esta app MIT AI2 COMPANION nos permite en tiempo real visualizar el
funcionamiento de ala (aplicación) mientras se construye.

2.3 Abra la aplicación MIT AI2 COMPANION instalada. Indicar si se desea permitir que
la aplicación acceda a fotos, archivos de medios, etc., en el dispositivo. De ser
factible, activamos la opción de Wifi.
 Nro. DD-106
Programación Móvil para Redes
Página 9 de 14

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 página de desarrollo de App Inventor y haga clic en ConectarAI
Companion. Se mostrara un codigo QR y un codigo

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
 Nro. DD-106
Programación Móvil para Redes
Página 10 de 14

2.8 Comente los detalles mas importantes

En el proyecto por default nos muestra un botón con la imagen de un gato que al
comento de pulsar sobre él nos da como resultado un maullido seguidamente
tiene la función de hacer vibrar el dispositivo móvil.

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 11 de 14
 Nro. DD-106
Programación Móvil para Redes
Página 12 de 14

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 cargue 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 y haga clic en
Aceptar. Verifique que se muestra la imagen respectiva
 Nro. DD-106
Programación Móvil para Redes
Página 13 de 14

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

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
 Nro. DD-106
Programación Móvil para Redes
Página 14 de 14

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
Podemos observar que los cambios que realizamos en la plataforma de app
inventor como cambiar el color de texto, agregar un icono, añadir un titulo, etc. Se
muestra en la app ya funcional en nuestro dispositivo móvil.

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 realizado
d. El aplicativo sera revisado en clases y cuanto mas detalles posea, tendra una mejor
nota

OBSERVACIONES (5 mínimo):
(Las observaciones son las notas aclaratorias, objeciones y problemas que se pudo presentar en el
desarrollo del laboratorio)
 Se observó que la interfaz del app inventor en la web es muy detallado.
 Se tiene de todo dentro, si se quiere agregar imágenes o música simplemente se busca
por el explorador de archivos para sucesivamente subirlo.
 Tienen dos maneras de modificar como saldrá la app, por diseño o por bloques (tipo
scratch).
 Se tiene que leer detalladamente cada parte, me equivoque al momento de elegir la
imagen de icono confundiéndola por imagen de fondo.
 Hay dos maneras de conectar la app desde la web con el celular, por código o por QR
 Para la instalación se tuvo que descargar la app en el ordenador y de ahí pasar el
archivo para el celular. Me parece una manera poco automática de instalación de una
app.
 Al momento de instalar la aplicación en el celular google play store advierte que puede
ser peligroso, he de suponer porque es externo y de un creador anónimo.

CONCLUSIONES (5 mínimo):
 Nro. DD-106
Programación Móvil para Redes
Página 15 de 14

(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)

 Se pudo comprobar cómo funciona app inventor y que es una manera fácil de manejar
ya que todo se encuentra a la mano.
 Si no se entiende algo o si queremos agregar algo podemos consultar a los tutoriales
que explican paso a paso como hacerlo.
 En la sección de bloques cada elemento añadido tiene sus propios comandos y con la
sección de integrados tenemos más opciones. Con ello se puede programar cada
movimiento que se haga desde el inicio, el cómo se abre y como se cierra.
 Para que las modificaciones de la app en el celular conectado por AI companion se
muestre y no se desconecte se debe de tener encendida la pantalla, caso contrario se
perderá la conexión y se tendrá que reiniciar la conexión.
 En la parte de visor se puede modificar el tamaño de vista, aunque si se hace la
conexión con AI companion no hay necesidad ya que lo pueden visualizar al mismo
tiempo, vivirlo mientras lo modifican. Claro que si no se tiene este dispositivo a la mano
ese modificador de tamaño es muy útil.
 La ultima observación no complico en nada la aplicación de la app creada, porque se
instaló de manera natural, aparece automáticamente.