Christmas Bingo: Showcase de Programación en Familia con Swift Playgrounds

Categoría: Desarrollo de aplicaciones con Swift / Educación básica

Nivel: Primaria (2.º a 5.º grado)

Herramientas: Swift Playgrounds (iPad)

Visión general del proyecto:

¿Buscas una manera innovadora de cerrar el año conectando a los alumnos, a las familias y a la programación real? Christmas Bingo es un evento interactivo donde los alumnos de primaria crean su propia aplicación de bingo navideño utilizando Swift Playgrounds e ingeniería de prompts.

En lugar de ser una simple presentación, el día del evento se transforma en un taller de programación en familia, donde los padres y alumnos juegan con la app terminada, la personalizan en vivo y resuelven un reto de lógica y código juntos.

1. Puntos clave del diseño pedagógico y técnico:

Diseño resiliente (emoji placeholders): Para evitar frustraciones o fallas durante el evento, la app está programada de forma defensiva: si un alumno no alcanza a integrar todas las imágenes personalizadas al paquete de assets, el código despliega automáticamente emojis genéricos como placeholders. ¡La app nunca falla ni se detiene!

2. Diferenciación por grados:

2.º grado: La plantilla ya lleva 20 imágenes navideñas (image21-image40). En clase agregan 17 y el día del evento, los alumnos se toman 3 fotos en vivo con sus papás e integran esas 3 imágenes específicas (image1, image2, image3) a la app.

3.º a 5.º grado: La plantilla se completa con 40 imágenes navideñas (image1-image40). En clase agregan 37 y el día del evento, los alumnos se toman 3 fotos en vivo con sus papás e integran esas 3 imágenes específicas (image1, image2, image3) a la app. En la presentación del evento, mostramos un video explicativo grabado por ellos mismos, introduciendo cada punto del prompt y las reglas de programación.

3. Reto de problem solving e ingeniería de prompt: Durante el evento, se les plantea a los padres y alumnos un desafío: el prompt original de 24 oraciones tiene una instrucción faltante. Al jugar, se dan cuenta de que las fotos familiares (image1, image2, image3) siempre salen en los 2 tableros.

La instrucción faltante a descubrir:

"Ensure image1, image2, and image3 always appear on both 4x4 bingo boards (in random positions)."

Esto garantiza que las 3 fotos familiares tomadas en el evento siempre formen parte del juego activo, enseñando a los padres la importancia de ser precisos al dar instrucciones a una computadora. 

Guía paso a paso: Cómo transferir el código a Swift Playgrounds

Para los educadores que deseen replicar esta plantilla en sus escuelas, aquí están los pasos exactos para configurar el proyecto:

1. Abrir Swift Playgrounds:

• Abre Swift Playgrounds en tu iPad.
• Toca el botón "New Playground" y selecciona "App" (Proyecto de App).

2. Reemplazar el código principal (ContentView.swift):

• Abre el archivo ContentView en el menú lateral izquierdo.
• Selecciona todo el código por defecto y elimínalo.
• Abre el archivo "Christmas Bingo - ContentView Code" (link adjunto a este post), copia todo el código fuente y pégalo directamente en ContentView. Serán un total de 607 líneas de código, comenzando desde la línea 1.

3. Configurar los assets (imágenes y placeholders):

• Ve al panel de Assets en Swift Playgrounds (menú lateral izquierdo).
• Agrega las imágenes necesarias (click en "+" y selecciona "Photo") y nombra las fotos familiares como image1, image2, image3, y las imágenes navideñas adicionales como image4, image5, etc.).
• Nota: Si alguna imagen falta, la función incorporada reemplazará automáticamente la imagen por un emoji navideño (🎄, 🎅, 🎁, ⭐).

4. Probar la app:

• Activa la vista previa en vivo (Live Preview) o presionando el botón de reproducción (Play).
• Verás la interfaz de Bingo lista para 2 jugadores con los tableros de 4x4.

El prompt completo (plantilla para los alumnos)

Puedes compartir este prompt de 24 instrucciones con tus estudiantes para trabajar el concepto de prompt engineering:

1. Review my ContentView code in Swift Playgrounds to build a Christmas Bingo app.

2. Set up the app for a two-player game.

3. Ask both players to enter their names before the game starts.

4. Load a collection of unique Christmas images with emoji placeholders if images are missing.

5. Shuffle all cards randomly at the start of every game.

6. Create two independent 4 by 4 bingo boards on the screen.

7. Assign one 4 by 4 board to Player One.

8. Assign the second 4 by 4 board to Player Two.

9. Populate each board with 16 images, ensuring "image1", "image2", and "image3" ALWAYS appear on both boards.

10. Add a prominent button for drawing a new card.

11. Allow players to draw a card by tapping the draw button.

12. Display the selected card clearly at the center of the screen.

13. Scan both players' boards for matching Christmas images.

14. Automatically place bingo chips on any matching images.

15. Add a 2-second delay before the bingo chips appear.

16. Make the app colorful and filled with holiday cheer.

17. Design a clean and vibrant Christmas-themed background.

18. Use large, clear text for easy reading by players.

19. Incorporate high-quality Christmas icons and graphics.

20. Add festive animations whenever a card is drawn.

21. Include exciting celebration animations when a player gets Bingo.

22. Keep the user interface simple and intuitive for all ages.

23. Ensure the overall layout is well-organized and responsive.

24. Send me the full, clean, and revised ContentView code.

¡Descarga el código y pruébalo en tu escuela!

Les adjunto el archivo con el código fuente completo en Swift UI. Espero que este proyecto les sirva de inspiración para organizar sus propios "showcases" de tecnología y desarrollo de software con las familias o que lo adapten como gusten en sus clases.

https://www.icloud.com/pages/07ewukzmE5xhfvHL7Kw_wl8rA#Christmas_Bingo_-_ContentView_Code

Opción de descarga directa:

Además del código fuente en texto, he adjuntado el paquete completo del proyecto comprimido en formato .swift/.swiftpm. Solo necesitan descargar el archivo zip, descomprimirlo en su iPad y abrirlo directamente en Swift Playgrounds sin necesidad de copiar y pegar el código manualmente. Incluye toda la estructura de archivos previamente configurada para facilitar su implementación.

https://www.icloud.com/iclouddrive/0a0gINYgPFgEd6nF3LSfSEO5w#Christmas_Bingo