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. 








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...