Bitácora 02 (11 de noviembre del 2017)
Por:
Lewis
Leonardo Barriga.
Andrés
Felipe Correa.
Juan
Carlos López.
José
Luis Umaña Ramírez.
Se da inicio con la
sesión Dos (2), con la lectura de la bitácora del día d de noviembre del 2017,
por los compañeros a los cuales fue asignado tal tarea. Seguidamente se
solicita al grupo, usar un dispositivo Android, en el cual hay que descargar la
APP Inventor, por medio de la Play store, para finalmente se ingresa al sitio
web de la APP ai2.appinventor.mit.edu/
donde se realiza los siguientes
pasos:
1.
Crear una cuenta Google
2.
Instalar App Inventor 2
3.
Instalar MIT AI2 Companion en el dispositivo Android, o conocer el
emulador
4.
Crear una aplicación e instalarla en el móvil
5.
Conocer la página web de App Inventor.
Se continúa con la
sesión de clase donde al ingresar al sitio web de la APP, se realiza registro
en la cual se abre una cuenta para utilizar la herramienta e ingresar como se
ve en la imagen 1. Al ser usuario la
profesora se encarga de dar a conocer a los estudiantes la herramienta, en
funciones del diseñador como Interfaz, disposición, medios, dibujos, animación,
sensores y cada uno de sus componentes.
Ahora se da a conocerlas funciones de los bloques desde los integrados,
screen y todos sus componentes, para desarrollar el código que programa la
aplicación android que en este caso es se denomina MÁNDALAS.
Imagen 1: APP Inventor Diseñador
1. Paleta: contiene todos los elementos que
podemos insertar en nuestra aplicación. Hay elementos gráficos como cuadros de
texto, botones, lienzo de dibujo y elementos que no se ven en la pantalla del
móvil, como base de datos , acelerómetro, cámara de vídeo y otros.
2. Visor: El visor de la pantalla, simula la apariencia
visual que tendrá la aplicación en el móvil. Para añadir un elemento a la
pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor.
3.
Componentes: muestra la lista de los componentes que se han colocado
en el proyecto. Cualquier componente que haya sido arrastrado y soltado desde
la paleta al visor aparecerá ahí. Si se quiere borrar alguno es en la lista de
componentes donde está el botón que permite borrarlo.
4.
Medios: muestra las distintas imágenes y sonidos que estarán disponibles para
el proyecto. Cualquier archivo de imagen o audio que se quiera usar en la
aplicación hay que insertarlo usando este apartado para que esté disponible.
5.
Propiedades: cada vez que en el Viewer se seleccione un componente, en propiedades
aparecerán todos los detalles que se puedan cambiar de ese componente.
Imagen 2: APP Inventor Bloques.
La docente realizó la presentación de como es el funcionamiento del
software MIT App Inventor de las principales características del , el
cual es un entorno de desarrollo de software creado por Google Labs para la
elaboración de aplicaciones destinadas al sistema operativo Android.
Dada
la explicación y con ayuda de la profesora se da inicio a la ejecución y
desarrollo de la aplicación android, la cual inicia con el reconocimiento de
los recursos suministrados por la docente en el Drive del grupo. (https://drive.google.com/drive/folders/1nsR98r6slwuII7S7ZGT3wC7XjKpvCrsm?usp=sharing)
Imagen 3: Google Drive. Carpeta de
recurso sesión dos.
En
la carpeta de recurso encontramos elementos tales como, la paleta de colores,
Los códigos de los colores de los BITS, la imagen de las mándalas a utilizar
para programar una APP para colorear el modelo de mándala seleccionado.
Imagen 4: APP Inventor Diseñador con
mándala.
Seleccionada
la mándala a usar en el diseñador de la APP, se realiza los ajustes del tamaño
de la imagen desde lo alto y ancho,
donde se seleccionada la opción de ajustar, según el contenedor tanto en lo
alto, como lo ancho, para usar por completo la pantalla del dispositivo móvil
android. Seguidamente se usa la opción CONECTAR y click en AL COMPANION.
Imagen 5: APP Inventor Diseñador con
mándala al conectar por código.
De esta forma se observa como se
puede conectar lo desarrollo en la pagina invertor con el dispositivo movil por
medio del codigo, este procedimiento se va realizar en varias ocaciones, para
revisar de que forma avanza la programacion de los bloques y se va aplicando en
el uso por medio del dispositivo movil.
Imagen 6: APP Inventor bloques
programación código.
Ahora se da comienzo a la
programación del código por medio de la pestaña BLOQUES, donde se reconoce el
SCREEN 1 “mándala” donde se da inicio a programar el tamaño del punto o puntero
a colorear. Donde se usa la paleta de colores y el código asignados a los bits
de colores que se reconocen y se introducen a la página de inventor, desde los
recurso del drive.
Teniendo conocimiento de
los valores por bits, para cada color, se inicializa tres variables, ya que
cada color posee tres valores Red (R), Green (G) y Blue (B), estos son los
valores que se inicializan en los bloques para los doce colores de la paleta.
Imagen 8: APP Inventor Bloques valores
de bits.
Ahora se sigue la
programación del código por medio de la pestaña BLOQUES, donde se reconoce el
SCREEN 2 “Paleta” donde se programa desde el algoritmo y la cantidad de colores, según su las variable
global e intervalo para los colores R,G y B. obteniendo el código indicado en
la imagen 9, para poder colorear la mándala al presionar la pantalla y activar
los colores de la paleta.
Imagen 9: APP Inventor Bloques
programación color por bits.
Luego de desarrollar en
código de la mándala para colorear, se activa la paleta de colores en la
pestaña bloques, para obtener en la pestaña diseñador lo que se indica en la
imagen 10, donde encontramos una distribución del espacio para la mándala y la
paleta de colores.
Seguidamente
se usa la opción CONECTAR y click en AL
COMPANION, para proyectar lo desarrollado en la web en el dispositivo móvil
android. De esta forma se observa como se puede conectar la pagina
invertor, con el dispositivo movil por medio del código antes mencionado, donde
se muestra la APP en el movil y se puede colores las distintas zonas de la
pantalla en la que encontramos la mandala, usando la paleta de colores para
cambiar el tono del puntero, como se muestra en la imagen 11.
Obteniendo finalmente esta APP y
la ejecucion de la misma durante el desarrollo de la clase, se da por
finalizada la sesion. Dejano los siguientes compromiso:
1.
Aguegar una funcion adicional a la APP, donde los estudiantes deben
explorar y utilizar la guia de inverntor patra cumplir con este proposito.
2. En grupos de tres personas traer los materiales señalados en el Google
Driver para la sesión tres (3) para hacer circuitos bordados.
Vídeo de apoyo para la creación de aplicación
No hay comentarios:
Publicar un comentario