jueves, 10 de diciembre de 2020

Taller 5: Suma de fracciones

 Hola nuevamente, en esta oportunidad realizaremos en App Inventor una aplicación que nos permita entender la suma de fracciones, la idea es que esta suma de fracciones heterogéneas, vale decir que no tienen el mismo denominador, para ello utilizaremos el método de barras (de fracciones) explicado en este video, YouTube: "Suma fracción con barras", tal como indica la imagen 1, la idea es que esta aplicación intente emular este método.

Imagen 1

Antes de comenzar con este taller, si no estas familiarizado con algunos de los conceptos generales de APP Inventor, te sugiero que revises la entrada de instalación y interfaz, junto con los talleres pasados para la creación de esta app.

Recuerda que puedes ver como esta quedando la aplicación en cualquier momento desde tu celular, solo necesitas descargar AI Companion.

Primero necesitaremos crear un nuevo proyecto y nombrarlo, posterior a ello se nos abrirá una ventana con distintas herramientas de diseño, lo primero que haremos es tratar de emular la imagen 1en nuestra App.

Mediante el uso de disposiciones y botones se intentara emular el método
de barras, recuerda que puedes cambiar los tamaño, color y nombres en las propiedades ubicado a la derecha del App Inventor.



Intentaremos crear la mayor cantidad de celdas posibles, también agregaremos un pequeño "layer" en la parte superior o inferior, con un "spriteimagen" con la imagen de una flecha, que simule una regla para que así el usuario pueda orientar mejor las sumas de fracciones.

Recuerda que puedes cambiar el tamaño del dispositivo en la esquina superior izquierda, en este caso utilizaremos el tamaño de la Tablet, ya que se parece mas al dispositivo usado para probar en AI Companion, aparte nos entrega mayor libertad de diseño, este tamaño no influirá en tu dispositivo, así que puedes cambiarlo en cualquier momento.


Nos debería quedar algo así, recuerda que para facilitar la programación en el apartado de bloques, es importante que des un nombre reconocible para ti a cada elemento en la pantalla de diseño (componentes), en este caso quedo algo así. (los nombres pueden variar, no influirá en la programación de la App)


Una vez terminada la sección de diseño y nombrado los elementos necesarios para identificar cada uno de los elementos, iremos a la sección bloque.


Lo primero que haremos será dar un movimiento horizontal a nuestra fecha guía mediante el uso de bloques, tal como indica la imagen, si hiciste los talleres anteriores, te darás cuenta que esta programación se asemeja al movimiento del juego en el taller 1.

Crearemos ahora 3 variables globales inicializadas en 0 para definir el tamaño de los números que se guardaran, para la posterior suma

En esta ocasión solo necesitaremos crear un iniciador global para la suma, lo haremos de la siguiente manera, si quisiera agregar resta o otro tipo de operaciones, deberás crear mas iniciadores global como este, en este caso tratamos de hacer una suma de fracciones.
Ahora crearemos el algoritmo de los botones, para que estos sean escritos en las etiquetas

Como utilizaremos muchas etiquetas para demostrar como funciona las fracciones, te recomiendo cambiar para el resto de los botones las cantidades según se necesita, recuerda solo los recuadros azules (bloque matemático), he ir duplicando y cambiando los botones según se necesita, pues son muchos.
Una vez modificado los mas de 39 botones (usados en este caso), he ahí la importancia de definir reconociblemente los nombres de cada botón, ahora procederemos a realizar la programación del algoritmo de sumas.


Como puedes observar ahora se usaran los datos almacenados en los iniciadores globales, se crearon 3 por que en este caso la App realizara 3 sumas distintas al mismo tiempo, recuerda que solo puedes sumar de a 2 botones.

Ahora crearemos el algoritmo para finalizar la suma de dos fracciones.
Es importante señalar que para cada tipo de operación (suma, resta, multiplicación y división) existen un tipo de bloque de matemática (azul), en este caso utilizaremos el bloque de suma.

Finalmente y no menos importante, es necesario hacer un botón que permita eliminar cualquier operación de la base de datos, en este caso lo nombraremos "reset", este nos permitirá dejar en blanco cada etiqueta de la aplicación, para poder empezar a trabajar desde 0 algún otro problema.

A continuación te dejo una pequeña muestra de como funciona la aplicación en mi smartphone




Finalmente aquí dejo el archivo .aia con el programa para que lo modifiques a gusto y lo mejores, en mi caso personal me vi limitado por el tamaño de mi dispositivo, lo que no me permitio agregar mas funcionalidades, como un botón que nos permita comparar si dos fracciones son equivalentes, eso te lo dejo a ti estimado lector.

https://drive.google.com/file/d/1I52iW-I_T6Nbu_3TAIq-zp8-1V-afEiJ/view?usp=sharing

COMO USAR LA APLICACION.

En primer lugar deberás tener un dispositivo inteligente (Smartphone, Tablet), en ella instalar la aplicación MIT AI2 Companion.

Una vez descargado, abriremos el proyecto creado y en la pestaña conectar, seleccionaremos AI companion y escanearemos el código QR.

Ahora se especificara la función de cada elemento.
  • La flecha la puedes arrastrar de derecha a izquierda, es un indicador visual de donde debe hacer tocar el usuario para poder realizar la suma de fracciones.
  • Los botones equivalen a distintos valores matemáticos, cada uno es diferenciado por su numero y color, también por niveles.
  • Abajo de ello están los botones + e = que nos permitirán realizar las operaciones básicas, entre ellos esta un sector que nos entrega el valor decimal de cada suma. (recuerda que las sumas deben ser de dos en dos, es decir, sumar 2 fracciones y luego apretar igual, si se desea se puede sumar una 3 en adelante, siempre respetando el no sumar mas de 3 fracciones a la vez.).
  • Bajo esto hay indicadores  de cada operación con la fracción, el sector derecho nos indica que operaciones hemos realizado, una especie de registro, a la izquierda nos entregara el resultado de las sumas de fracciones indicando su numerador y denominador.
  • Finalmente hay un botón de "reset", que nos permitirá limpiar todas las operaciones que hemos hecho.
Te invito a realizar la siguiente actividad, haciendo uso de la aplicación creada anteriormente.

Actividad

¡¡Eres el pirata mas temible de los 7 mares 😎!!, o eran 8, en fin no lo recuerdo, lo que si recuerdo es que tu y tu tripulación lograron obtener un grandioso tesoro ¡1 cofre español, lleno de perlas💰!, al llegar al puerto,  la tripulación y tu deciden como dividir este gran tesoro.

Para ello se ha dispuesto dividir 3/4 partes con tu tripulación y el resto es para ti claro esta, pero aun así es muy poco lo que te corresponde, así que dispones que de esos 3/4 cada tripulante deberá obsequiarte (de manera obligatoria) 1/4 de sus ganancias. esto por supuesto enojo a los tripulantes, pero decidiste obsequiarles a ellos 1/5 de tus ganancias. 

¿Hubiera sido mejor quedarte con 1/4 del cofre del tesoro? en vez de enojar a tu tripulación y posteriormente retribuirles tus ganancias legitimas.

¿Crees que has perdido dinero por ser tan generoso? si es así justifica tu respuesta.

Puedes trabajar este problema con la aplicación, dibujos o lo que necesites para entender, las fracciones pueden variar según lo que necesite demostrar el autor.


jueves, 26 de noviembre de 2020

Taller 4 : Juego de damas

En este taller aprenderás a crear un juego de mesa, mas específicamente un juego de damas, con MIT app inventor, lo primero que necesitaras será buscar o crear o diseñar fichas y un tablero de damas. En este taller se te ofrecerá algunos ejemplo para estas imágenes.




Antes de continuar es necesario resaltar que el tablero debe ser de 8x8 celdas y debes ubicar 8 fichas rojas y azules en los extremos superior o inferior del mismo, procurando que se ubiquen dentro de un cuadrado de un mismo color, también debes tener en consideración que el tablero tenga un tamaño de 320x320 píxeles y las fichas de 40x40 píxeles, esto lo puedes cambiar dentro de app inventor de la siguiente forma


Para facilitar la interpretación de los bloques mas adelante en programación, te recomiendo cambiar los nombres de las fichas rojas o azules según corresponda, al igual que el tablero.

  • Ahora ubica correctamente cada pieza debería quedar algo así.
Una vez programados las fichas como Spriteimagen y el tablero como Layer, y señalado todos los nombres correspondientes procederemos a la programación (bloques).

  1. Crear dos listas que contengan las fichas de cada color.
  2. Posterior a creadas las listas, deberemos crear el movimiento diagonal de las fichas y que al presionar una de las fichas el resto se deshabiliten temporalmente, para ello usaremos el siguiente algoritmo.
El algoritmo es:
  • Cuando rojoN es presionado.
  • para cada elemento de la lista fichasrojas Hacer.
  • Poner spriteIMagen del elemento de la lista habilitado como falso.
  • FIN para.
  • Poner RojoN habilitado como cierto.
Debería quedar algo como en la imagen, repite este mismo algoritmo con las otras 15 fichas restantes (rojas y azules respectivamente) asegurándote cambiar el color de las lista según corresponda, recuerda que puedes copiar los bloques con el botón derecho del mouse.

    4. Ahora crearemos los bloques para definir el movimiento diagonal de cada ficha para así no equivocarse al ser arrastrada por el dedo.


Este bloque es para el movimiento de fichas rojas, para el movimiento de las fichas rojas, solo debes cambiar  las sumas y restas por su contrario +-+ -> -+-.

No olvides crear finalmente una orden al soltar cualquier ficha presionada, recuerda repetir 15 veces mas este procedimiento con el resto de las fichas. 

Finalmente debería quedar algo así para esta primera parte del taller.

Ahora te pido que programes algunas funciones extras en este juego de mesa.




sábado, 14 de noviembre de 2020

Taller 3: Lista de datos

 En este taller aprenderás a como crear una app que te sirva para crear listas y cuentas las cuales servirán para obtener información de una base de datos móvil.

Lo básico antes de empezar

  • Iniciar AIStarter 
  • Iniciar el Emulador
En este taller usaremos la siguiente disposición (diseño), diseñaremos la siguiente disposición en nuestro taller, arrastraremos disposiciones, uno 3 cuadros de disposición vertical, luego se añadirán botones y dentro de los cuadros de disposición añadiremos otros mas.

Dentro de los cuadros de disposición añadiremos la disposición tabular, procedemos a insertar botones, cuadros de texto y cuadros de disposición hasta obtener algo así.
Debemos etiquetar bien cada botón, cuadro de texto para no tener problemas en la etapa de programación. (si tienes alguna duda, te recomiendo mirar las imágenes a detalle en talleres anteriores)

Ahora procederemos con la programación.


El iniciador global tamaño definirá el tamaño de nuestra lista, mientras que el iniciador global arreglo definirá donde se ubicaran los datos.

Primero crearemos un iniciador de lista, para ello arrastraremos un cuadro iniciador global en la pestaña variables (color naranja), luego en la variable lista (color celeste) arrastraremos "crear lista vacía".




Ahora crearemos una orden de procedimientos tal como indica en la imagen, notaras que cada bloque lo puedes encontrar en la variable de cada color.


Ahora crearemos el siguiente procedimiento, para agregar mas entradas haces clic en el engrane azul, luego añadiremos dos entradas las que renombraremos como en la imagen.

Para crear una lista, usaremos el siguiente algoritmo:
  • Al hacer clic en btntamano Hacer
  • Obtener valor del tamaño
  • Crear una lista vacía
  • Inicializar la lista con todos los elementos en "  "
  • Enviar mensaje "Arreglo Creado"
  • Limpiar caja de texto
  • Fin_hacer


Ahora será un poco mas complicado, crearemos un comando control, como en la siguiente imagen, recuerda que cada bloque lo encontraras según el color en la lista variables.

Para crear un control de las listas debemos utilizar el siguiente algoritmo.
  • Al hacer clic en btnlistar Hacer
  • limpiar caja de texto de listado
  • Para i desde 1 hasta tamaño del arreglo Hacer
  • En la caja de texto listado unir los caracteres [i]= con el valor obtenido, obtener el elemento en posición i
  • Fin_Hacer

Ahora crearemos un botón que nos permita agregar un dato y coordenada a cada lista

Para ingresar un dato a cada lista, usaremos el siguiente algoritmo:
  • Al hacer clic en btnacepting Hacer
  • Llamar al procedimiento "agregarElemento" enviando la posición y el dato
  • Limpiar caja de texto posición
  • Limpiar caja de texto dato
  • Fin_Hacer


Terminado los preparativos, procederemos a hacer la segunda parte del taller 3.
Intenta agregar un botón que permita buscar y borrar elementos en las listas.

  • Solución



Lo primero que haremos será ampliar un poco mas la disposición y diseño de nuestra aplicación, ten encuentra que se puede hacer mas de una lista, pero por conceptos de aprendizaje empezaremos con solo una lista.

Con este botón podremos borrar los elementos que escribamos en la listas, ten en cuenta que se debe crear un borrar elemento para cada uno de los arreglos. (para borrar basta con escribir el numero del elemento)
Con este botón podremos buscar en la lista, permitiendo escribir la palabra para encontrar su ubicación en ella, ten encuentra que se pueden añadir nuevas listas a este botón.
Con este botón podremos reiniciar todas las listas, o lista en este caso, para así poder ingresar nuevas variables a la aplicación.
Finalmente nos debería quedar algo así en primera instancia.

Aquí dejo un video que mostrara como funciona la aplicación. Espero que logres crear esta aplicación, y recuerda que puedes agregar imágenes, colores, sonidos y cambiar la disposición según te sea útil. 








lunes, 5 de octubre de 2020

Taller 2: Pizarra de dibujo

 En este taller aprenderas a como crear una app que te sirva para dibujar! y no solo eso, tambien aprenderas a crear figuras personalizadas y darle matices de colores, asi que sin mas tiempo que perder empezemos.

Lo basico antes de empezar

  • Iniciar AIStarter 
  • Iniciar el Emulador

Al igual que en taller uno se abrira nuestro menu con las herramientas que necesitamos, recuerda arrastar el lienzo (adaptandolo a la pantalla), para este taller no necesitaremos la pelota.

Fijate en la pestaña disposicion, esta nos sirve para dividir la pantalla en distintos sectores, para nuestro taller necesitaremos dos "disposiciónhorizontal" arrastralo a la pantalla.

Deberia quedar algo asi

Ahora necesitaremos botones para la creacion de nuestro taller, arrastraremos algunos botones tal como muestra la imagen.

No olvidemos catalogar los botones para poder diferenciarlos entre si mas adelante.

Tambien necesitaremos un Deslizador, lo arrastras bajo los botones.

1° actividad, crear el pincel.

Una vez diseñado lo anterior, procederemos a crear los bloques necesarios para formar lineas con nuestros cursor o dedos, es decir, dibujar!  

Primero buscamos los bloques que necesitamos.

 

Utilizaremos los siguientes bloques de control




Ahora como anteriormente hicimos, podemos cambiar el color de nuestros trazos, mediante los botones, para ello los programaremos de la siguiente manera.

Quedando algo asi (nota los demas botones estan inactivos de momento)

2° Actividad Crear una linea, circunferencia, aumentar tamaño del pincel y borrar el lienzo.

Primero necesitaremso variables que definiran los comandos que utilizaremos mas adelante, algo asi como formulas o palabras claves para nuestra aplicación.

Lo primero sera crear los bloques que utilizaremos para dibujar una linea, con los siguientes comandos deberias poder.

Ahora  lo siguiente.

Probamos..

Como notas, tambien se puede dibujar aparte de hacer lineas.

Ahora para dibujar una circunferencia es algo mas complicado.

Deberemos buscar la ecuacion ordinaria de la circunferencia  

y adaptarla mediante las herramientas de matematica presentes en MIT App inventor




Como notaras con respecto al ejercicio anterior, el cambio radica entre la linea y la circunferencia en sus matematicas. Basandonos en esto ¿Es posible crear triangulos o cuadrados?.

Ahora aumentaremos el tamaño del pincel y habilitaremos un boton que borre el lienzo.


Ahora unimos la regla de la linea junto a la circunferencia mediante los bloques de control, como en los pasos anteriores.


Deberia quedarnos algo asi.


Finalmente dejo un video el cual demuestra la aplicacion hasta ahora.







Taller 5: Suma de fracciones

 Hola nuevamente, en esta oportunidad realizaremos en App Inventor una aplicación que nos permita entender la suma de fracciones, la idea es...