Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación

Equation Chapter 1 Section 1 Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Autor: Javier López Aguirre Tutor: Antonio J. Sierra Collado Dep. de Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2016 iii Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Autor: Javier López Aguirre Tutor: Antonio J. Sierra Collado Profesor titular Dep. de Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2016 Trabajo Fin de Grado: Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación v Autor: Javier López Aguirre Tutor: Antonio J. Sierra Collado El tribunal nombrado para juzgar el Proyecto arriba indicado, compuesto por los siguientes miembros: Presidente: Vocales: Secretario: Acuerdan otorgarle la calificación de: Sevilla, 2016 El Secretario del Tribunal vii Resumen ste proyecto consiste en el desarrollo de una aplicación que permita aprender, de forma básica, a programar. Está dirigido a usuarios que no dispongan de conocimientos de programación y quieran aprender las estructuras básicas presentes en la mayoría de los lenguajes de programación. El proyecto surge a partir de otro realizado el año pasado, en el que se desarrollaba para dispositivos Android, mientras que éste se desarrollará para dispositivos iOS. Se ha optado desarrollarlo en esta plataforma debido a que entre los dispositivos Android e iOS suman una cuota de mercado del 96,4%, según los datos de la consultora IDC para el segundo trimestre de 2014. Para llegar a la mayor cantidad de usuarios posibles, es necesario desarrollar las aplicaciones para estas dos plataformas, como mínimo. La aplicación se ha desarrollado con el objetivo de conseguir un videojuego en el que el usuario obtenga los conocimientos básicos de programación. Está divido en niveles y el usuario debe escribir programas para resolverlos. El usuario deberá desarrollar sus conocimientos en cada nivel, ya que es necesario programar sentencias y estructuras para ir avanzando a través de ellos. Cada nivel irá aumentando la dificultad y se deberán usar expresiones más complejas. Para conseguir resolverlos, se proporcionarán ayudas como información de estructuras que se pueden utilizar, código ya escrito al inicio de un nivel o un teclado en el que se tratará de evitar la mayor parte de errores sintácticos. El teclado se ha diseñado para que resulte sencillo escribir las sentencias, pulsando un botón se puede escribir una sentencia correcta sintácticamente. Además, se ha dividido agrupando los componentes del mismo estilo, por un lado los métodos, por otro los bucles, etc. El juego tiene un personaje principal, cuyo nombre es Ada, el cual será programado por el usuario. Las sentencias que se escriban permitirán que Ada realice diversas acciones y cumpla los objetivos de cada misión. Para resolver el nivel, se ejecutará línea por línea, el código escrito por el usuario. El juego dispone de un tablero en el que se podrá observar, de forma gráfica, los efectos de cada línea de código. Por ejemplo, se mostrarán animaciones al andar, golpear, etc. Además, se permitirá seleccionar entre un lenguaje orientado a objetos, como Java, u otro estructurado, como C. El objetivo será que el usuario pueda comprobar las similitudes y diferencias entre distintos lenguajes y distintos modos de programación. Los apuntes y niveles se han escrito teniendo en cuenta los aspectos que diferencian a estos lenguajes, de forma que sea posible resolverlo de cualquiera de las dos formas. En esta memoria se realiza una introducción a las herramientas y tecnologías utilizadas, el funcionamiento del juego y como se ha implementado. E ix Índice Resumen vii Índice ix Índice de Tablas xii Índice de Ilustraciones xiii 1 Objetivos 1 2 Introducción 11 2.1 Aplicaciones móviles 11 2.2 Videojuegos 11 2.3 Aplicaciones existentes 11 3 Hardware utilizado 13 4 Tecnologías utilizadas 15 4.1 iOS 15 4.1.1 Arquitectura de iOS 15 4.2 Swift 20 4.3 Estructura de una aplicación 20 4.4 Entorno de desarrollo 23 5 Requisitos del sistema 31 5.1 Requisitos generales del Sistema 31 5.2 Requisitos funcionales del Sistema 32 5.2.1 Casos de uso 33 5.2.2 Requisitos de información 36 5.3 Requisitos no funcionales del Sistema 37 5.3.1 Requisitos de usabilidad 37 5.3.2 Requisitos de mantenibilidad 37 5.3.3 Requisitos de portabilidad 38 5.3.4 Requisitos de seguridad 38 6 Diseño 40 6.1 Clases 40 6.1.1 Clase Mapa 40 6.1.2 Clase Apuntes 41 6.1.3 Clase Historia 41 6.1.4 Clase Resumen 42 6.1.5 Clase CrearCodigo 42 6.1.6 Clase Resolver 43 6.1.7 Clase Variable 44 6.1.8 Clase Codigo 44 6.1.9 Clase Tablero 45 6.1.10 Clase Sprite 46 6.1.11 Clase ParserJson 46 Ilustración 114. Planificación del proyecto 96 Ilustración 115. Manual: Pantalla de inicio 101 Ilustración 116. Manual: Vista principal 101 Ilustración 117. Manual: Ajustes 102 Ilustración 118. Manual: Apuntes 102 Ilustración 119. Manual: Lista apuntes 103 Ilustración 120. Manual: Descripción nivel 103 Ilustración 121. Manual: Historia 104 Ilustración 122. Manual: Historia saltar 104 Ilustración 123. Manual: Historia siguiente 105 Ilustración 124. Manual: Resumen 105 Ilustración 125. Manual: Crear código 106 Ilustración 126. Manual: Ayuda código 106 Ilustración 127. Manual: Clase código 107 Ilustración 128. Manual: Teclado código 107 Ilustración 129. Manual: Código nivel 108 Ilustración 130. Manual: Resolver 108 Ilustración 131. Manual: Resolver final 109 1 1 OBJETIVOS l objetivo de este proyecto es el desarrollo de un videojuego didáctico para dispositivos iOS. Su finalidad será que el usuario aprenda los conocimientos básicos de programación. No se pretende estudiar las estructuras complejas que disponen los lenguajes de programación. Se estudiarán los elementos básicos presentes en la mayoría de ellos, para que el usuario posteriormente pueda indagar más en cada uno de ellos. El videojuego presentará al usuario una interfaz que deberá ser intuitiva y fácil de usar. Incluirá indicaciones visuales o escritas para que el usuario sepa qué hacer en determinadas ocasiones. Algunas de las características principales son:  El videojuego contendrá distintos niveles en los que se planteará un problema, y el usuario deberá escribir un código que lo resuelva. Cada nivel proporcionará pistas para ayudar a resolverlo.  El jugador dispondrá de un teclado para escribir el código, este teclado contendrá los elementos necesarios para programar y se escribirán las líneas automáticamente con la sintaxis correcta.  Cuando se haya terminado de escribir el código, se mostrará, de forma grafica, el resultado de cada línea de código.  Habrá un escenario en el que los distintos personajes realizarán las acciones programadas. Los conocimientos que debería tener una persona sobre programación tras acabar el videojuego deberían ser elementos como:  Clases de Java.  Objetos, métodos y atributos.  Funciones y variables.  Estructuras de control. A continuación se va a decidir el entorno de desarrollo y el lenguaje para programar la aplicación. Se utilizará el IDE Xcode para desarrollar la aplicación, el entorno de desarrollo proporcionado y recomendado por Apple para desarrollar aplicaciones nativas. El lenguaje de programación que se utilizará será Swift, creado recientemente por Apple y que mejora en rendimiento a Objective-C. E 11 2 INTRODUCCIÓN 2.1 Aplicaciones móviles n los últimos años se ha producido una revolución con los teléfonos móviles desde que Apple presentó el iPhone en el año 2007. Aunque ya existían teléfonos móviles con pantalla táctil, el iPhone destacó por incluir una pantalla más grande de lo visto anteriormente. La gran pantalla ha permitido realizar tareas cada vez más similares a las que se puede hacer con un ordenador y de forma más accesible. A partir de ahí, diversos fabricantes comenzaron a lanzar teléfonos con características parecidas, diferenciándose, principalmente, en el Sistema operativo, como Android, iOS, Windows Phone o BlackBerry OS. Por otro lado, los desarrolladores empezaron a crear aplicaciones para estos dispositivos, que introducían limitaciones, como el consumo de batería, los distintos tamaños de pantalla u otras características hardware y software. En el año 2008, Apple lanzó la App Store, una tienda con 500 aplicaciones que fue una revolución con 10 millones de descargas en su primera semana. Poco después, Google lanzó el Android Market, una tienda similar pero sólo con 50 aplicaciones. En este tipo de tiendas, existen aplicaciones gratuitas y de pago que introducen un nuevo modelo de negocio. Estos teléfonos, llamados Smartphone, se han ido expandiendo hasta tal punto en el que existen casi tantos Smartphone como personas. Además, las tiendas de aplicaciones tienen un alcance global.. Como consecuencia, los desarrolladores se dedican cada vez más a crear aplicaciones para estos dispositivos que permiten llegar a un número de usuarios que no existía tiempo atrás. Existen diferentes estrategias comerciales para obtener beneficios, como poner una aplicación de pago, una aplicación gratuita con publicidad, una aplicación gratuita con compras dentro o una combinación de las anteriores. 2.2 Videojuegos Los videojuegos son uno de los tipos de aplicaciones más usados, solo por debajo de la mensajería instantánea, redes sociales o aplicaciones de correo. Las tiendas de aplicaciones están repletas de videojuegos, y muchos tipos distintos de personas juegan con ellos. En los últimos años, cada vez hemos visto más juegos con fines didácticos que permiten aprender cosas mientras sigue divirtiendo o planteando un reto para seguir avanzando. Dentro de los videojuegos didácticos, existen algunos destinados a aprender a programar. Estas aplicaciones suelen distinguirse según se orienten más a lo didáctico o a la jugabilidad. La mayoría de estas tienen mecanismo por el que el código se escribe sin un teclado normal, aunque la dificultad del código también depende de cada aplicación. Este proyecto toma esta idea, un juego en el que el fin sea aprender las estructuras básicas para programar una aplicación, pero a través de una interfaz agradable para ello. Se darán ayudas sobre los distintos aspectos de programación y el usuario deberá escribir el código a través del teclado que proporciona la aplicación. Ese código, servirá para resolver el nivel posteriormente. La aplicación estará destinada a personas sin conocimiento o con conocimientos mínimos de programación. 2.3 Aplicaciones existentes A continuación se van a mencionar algunas aplicaciones existentes para aprender a programar. Existe una amplia variedad, algunos para personas con conocimientos básicos y otros para expertos.  CargoBot: es un juego gratuito que nos permite programar a un robot para que vaya ordenando cajas según un patrón. Dispone de distintos niveles de dificultad por lo que es apto para distintas edades E Introducción 12 12  Hopscotch: es una aplicación gratuita que permite crear videojuegos y animaciones. Podemos crear objetos y programarlos mediante bloques e instrucciones.  Kodable: es una aplicación gratuita, si queremos desbloquear todo es necesario realizar un pago, para aprender los conceptos básicos de programación a la vez que se está jugando.  Lightbot: es una aplicación que tiene una parte gratuita y la posibilidad de aumentar el número de niveles realizando un pago. Dispone de una interfaz intuitiva y se compone de un robot la que tendremos que ir guiando para llevarlo a su destino. Permite usar bucles, condicionales, llamadas a procedimientos, etc.  Tynker: es una aplicación para enseñar conceptos básicos de programación a niños y jóvenes. Se basa en un conjunto de puzles que se deben de resolver arrastrando y uniendo piezas, dispone de una interfaz similar a la de Scratch. 13 13 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación 3 HARDWARE UTILIZADO La implementación de la aplicación se realizará en un ordenador portátil Macbook Pro Retina de mediados de 2015. Las características son:  Pantalla retina de 15,4 pulgadas (resolución de 2880 por 1800).  Procesador Intel Core i7 de cuatro núcleos a 2,2 GHz (Turbo Boost de hasta 3,4 GHz) con 6 MB de caché de nivel 3 compartida.  16 GB de memoria DDR3L integrada a 1.600 MHz.  256 GB de almacenamiento flash PCIe.  Tarjeta gráfica integrada Intel Iris Pro Graphics.  Sistema operativo OS X 10.11.3 El Capitan. Ilustración 1. Portátil Macbook Para probar la aplicación en un dispositivo externo, será necesario uno que disponga del sistema operativo iOS. En concreto, uno que disponga de una versión superior a la 8.0. El dispositivo mínimo que soporta esta versión corresponde al iPhone 4S, cuyas características se disponen a continuación:  Pantalla retina de 3,5 pulgadas (resolución de 960 por 640).  Procesador dual-core Apple A5 1GHz.  GPU PowerVR SGX543MP2.  512 MB de memoria RAM.  16/32/64 GB de memoria interna.  Sistema operativo al comienzo iOS 5.0, y actualmente iOS 9.2. Hardware utilizado 14 14 Ilustración 2. iPhone 15 15 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación 4 TECNOLOGÍAS UTILIZADAS En el siguiente apartado se van a comentar las tecnologías necesarias para desarrollar la aplicación. 4.1 iOS Este sistema operativo se hace público en el evento Macworld Conference & Expo del 9 de enero de 2007. El lanzamiento oficial fue el 29 de junio del 2007, quedando como nombre del mismo: iPhone OS. A partir de la presentación del iPhone 4 empezó a llamarse iOS. Es el sistema operativo usado por los dispositivos iPhone, iPad e iPod Touch. Las aplicaciones nativas se construyen usando el framework de iOS y los lenguajes Objective-C o Swift, y se ejecutan directamente en iOS. 4.1.1 Arquitectura de iOS Esta distribuido en cuatro capas diferenciadas por su funcionalidad. Las capas inferiores tienen servicios y tecnologías fundamentales mientras que las superiores se apoyan en las inferiores y ofrecen servicios y tecnologías más avanzadas. Ilustración 3. Arquitectura iOS 4.1.1.1 Core OS Layer Esta capa incluye las características de bajo nivel sobre las que se basan la mayoría de las capas superiores. Es necesaria para interactuar con dispositivos hardware externos y para tratar la seguridad. Incluye los siguientes frameworks:  Accelerate Framework: contiene interfaces para realizar procesamiento digital de la señal (DSP), algebra lineal, y procesamiento de imagen. La ventaja de usar este framework es que está optimizado para el hardware presente en los dispositivos iOS.  Core Bluetooth Framework: permite interactuar con dispositivos Bluetooth.  External Accessory Framework; proporciona soporte para comunicaciones con accesorios hardware conectados al dispositivo iOS. Los accesorios pueden estar conectados físicamente o inalámbricamente mediante Bluetooth.  Generic Security Services Framework: proporciona un conjunto estándar de servicios de seguridad Tecnologías utilizadas 16 16 para las aplicaciones. Las interfaces básicas están especificadas en la RFC 2743 y RFC 4401. Además, incluye la gestión de credenciales requerida por muchas aplicaciones.  Local Authentication Framework: permite usar el Touch ID para autenticar a un usuario. Permite a las aplicaciones restringir el acceso a todo el contenido de la aplicación, a determinadas opciones o información.  Network Extension Framework: proporciona soporte para configurar y controlar túneles VPN (Virtual Private Network).  Security Framework: permite garantizar la seguridad de los datos que maneja la aplicación. Proporciona interfaces para gestionar credenciales, claves públicas y privadas, encriptación, etc.  System: maneja el entorno del kernel, los drivers y las interfaces de bajo nivel del sistema operativo UNIX. Las aplicaciones accedes a estas funciones a través de la librería LibSystem. Las interfaces soportan: – Concurrencia – Red (BSD sockets) – Acceso a sistema de ficheros – Entrada y salida estándar – Bonjour (mecanismo de descubrimiento de servicios en la LAN) y servicios DNS – Información de localización – Reserva de memoria – Cálculos matemáticos  Soporte de 64 bits: iOS fue diseñado originalmente para soportar ficheros binarios en dispositivos que utilizaran una arquitectura de 32 bits. A partir de iOS 7, se añadió soporte para compilar, enlazar y depurar binarios en arquitecturas de 64 bits. Todas las librerías y frameworks pueden usarse para aplicaciones de 32 y 64 bits. 4.1.1.2 Core Services Layer Contiene servicios fundamentales del sistema Algunas de las prestaciones de alto nivel son:  Servicios P2P  Almacenamiento iCloud  Objetos Block: es una función anónima con sus datos. Son muy utilizados como callbacks  Protección de datos  Soporte de compartición de archivos  Grand Central Dispatch (GCD): mecanismo alternativo para la ejecución de tareas asíncronas en lugar de hilos  Gestión de compras dentro de la aplicación  SQLite  Soporte XML Frameworks que ofrece:  Accounts Framework: proporciona un modelo para la gestión de login de usuarios. 17 17 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación  Address Book Framework: proporciona acceso a la base de datos de contactos.  Ad Support Framework: gestión de la publicidad.  CFNetwork Framework: son un conjunto de interfaces para trabajar con protocolos de red, como comunicaciones con FTP y HTTP.  CloudKit Framework: proporciona una vía para pasar información entre la aplicación y iCloud.  Core Data Framework: tecnología para gestionar el modelo de datas en la arquitectura MVC.  Core Foundation Framework: es un conjunto de interfaces que permiten la gestión de datos y servicios básicos.  Core Location Framework: ofrece información de localización y orientación.  Core Media Framework: proporciona tipos multimedia de bajo nivel.  Core Motion Framework: proporciona un conjunto de interfaces para el acceso a datos de movimiento disponibles.  Core Telephony Framework: proporciona interfaces para interactuar con la información de dispositivos que dispongan de teléfono.  Event Kit Framework: proporciona una interfaz para el acceso a eventos de calendario.  Foundation Framework: proporciona un encapsulado de la mayoría de las prestaciones del Core Foundation Framework.  HealthKit Framework: permite la gestión de la información del usuario relacionada con la salud.  JavaScript Core Framework: proporciona un encapsulado de la mayoría de objetos JavaScript estándar.  Mobile Core Services Framework: define los tipos de bajo nivel usados en UTIs (uniform type identifiers).  Multipeer Conectivity Framework: soporte del descubrimiento de dispositivos cercanos y la comunicación directa con ellos sin Internet.  Newsstand Kit Framework: gestión acceso para que el usuario lea revistas y periódicos.  Pass Kit Framework: proporciona un lugar en el que almacenar cupones, tickets de descuento, tarjetas de embarque, etc.  Quick Look Framework: proporciona una interfaz directa para la previsualización de contenidos que la aplicación no soporta directamente.  Safari Framework: proporciona soporte para añadir URLs a la lista de lectura del navegador Safari.  Social Framework: proporciona una interfaz simple para acceder a las cuentas del usuario en redes sociales.  Store Kit Framework: proporciona soporte para la compra de contenidos y servicios dentro de la aplicación.  System Configuration Framework: proporciona una interfaz para la gestión de la configuración de red de un dispositivo.  WebKit Framework: permite mostrar contenido HTML en la aplicación. 4.1.1.3 Media Layer Contiene las tecnologías de gráficos, audio y video que usan las aplicaciones para implementar multimedia:  Gráficos: iOS proporciona numerosas tecnologías para ayudar a incluir gráficos en la pantalla. Se Tecnologías utilizadas 24 24 Ilustración 9. Creación de un proyecto (1) Ilustración 10. Creación de un proyecto (2). Cuando se hayan introducido estos datos, se creará el proyecto con una serie de archivos que se generarán automáticamente. Entre estos, se encuentran:  AppDelegate.swift: esta clase define unos métodos que gestionan el ciclo de vida de la actividad, como applicationDidEnterBackground o applicationDidBecomeActive.  ViewController.swift: clase principal que se encarga de controlar la interfaz principal de la aplicacion  Main.storyboard: interfaz principal que se ejecuta una vez se ha cargado la aplicación.  LaunchScreen.storyboard: interfaz que se ejecuta al cargar la aplicación.  info.plist: archivo que usa el sistema operativo para almacenar datos necesarios para configurar la aplicación. Sobre la información del proyecto, se pueden configurar ciertos parámetros que hemos visto antes más otros como:  Versión del proyecto.  Versión del SO objetivo: se especifica la versión mas baja del sistema operativo en la que puede desplegarse la aplicación.  Interfaz principal: El archivo que se ejecuta una vez se ha cargado la aplicación, por defecto Main.storyboard.  Orientaciones del dispositivo: se puede habilitar o deshabilitar la opción de que una aplicación se oriente hacia un lado u otro. 25 25 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación  Icono de la aplicación.  Fichero que se mostrará mientras se carga la aplicación, por defecto LaunchScreen.storyboard. Ilustración 11. Informacion general proyecto Para editar la interfaz gráfica disponemos del Interface Builder. Nos aparecen las vistas de la aplicación y podemos ir colocando elementos, como botones, textos, imágenes, etc., y ajustar las restricciones para que se dispongan en el sitio que deseamos. Ilustración 12. Interfaz principal Xcode Tecnologías utilizadas 26 26 Por ejemplo, añadimos un botón y ajustamos las restricciones. Existen varias opciones para ajustarlo, como añadir restricciones de tamaño un elemento, distancia hacia el siguiente elemento, ya sea hacia izquierda, derecha, arriba o abajo. Ilustración 13. Añadir restricciones a botón Tambien podemos ajustar la posición respecto al centro tanto verticalmente como horizontalmente. Ilustración 14. Ajuste horizontal y vertical Una vez establecidas las restricciones, podemos ver en el editor como se ajusta sobre la pantalla. 27 27 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 15. Ajuste botón sobre la pantalla Xcode incluye un simulador en el que se dispone de simuladores de iPhone (desde el 4s hasta el 6s) y de iPad (desde iPad 2 hasta iPad Pro). Si ejecutamos la aplicación, por ejemplo, sobre el iPhone 4s comprobamos que aparece el botón donde habíamos colocado. Ilustración 16. Ejecución aplicación simple Xcode nos permite enviar mensajes a un objeto de la interfaz de usuario. Para ello se crea una conexión entre el objeto y un outlet del código. Un outlet es un atributo marcado con el símbolo IBOutlet y cuyo valor se puede establecer gráficamente en el storyboard. Cuando queremos que un objeto (como el view controller) se comunique con otro objeto, designamos el objeto contenido como un outlet. Por ejemplo, vamos a introducir una etiqueta de texto en nuestra aplicación y vamos a enlazarla con el view controller. Para ellos seleccionamos la etiqueta pulsamos la tecla “Control” y arrastramos a la parte del código donde lo queremos introducir. Tecnologías utilizadas 28 28 Ilustración 17. Outlet desde interfaz En el código nos aparece la variable con la palabra reservada al principio, @IBOutlet, este símbolo lo utiliza sólo Xcode para determinar si el atributo es un outlet. Ilustración 18. Outlet en código. Además, en la ventana derecha del editor podemos comprobar las referencias existentes entre la interfaz y el controlador. 29 29 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 19. Ventana de outlets También se pueden crear acciones para los elementos. Esto es necesario cuando se quiere enviar un mensaje a un objeto cuando ocurre un evento, como pulsar un botón. Al producirse el evento, se ejecutará la función enlazada. Ilustración 20. Conexión de una acción desde interfaz En nuestro ejemplo, vamos a añadir una acción al botón para que cuando se pulse, cambie el texto de la etiqueta. Ilustración 21. Conexión de una acción en el código Tecnologías utilizadas 30 30 En el código nos aparece la función con la palabra reservada al principio, @IBAction, para indicar que el método se puede conectar con un objeto de la interfaz. Para conseguir el cambio de texto, utilizamos la variable conectada anteriormente y cambiamos el valor de la propiedad “text”. Ejecutamos la aplicación y comprobamos que se cambia el texto al pulsar el botón. Ilustración 22. Ejecución aplicación con outlets (1) Al pulsar el botón cambia el texto Ilustración 23. Ejecución aplicación con outlets (2) Se ha visto como funciona iOS, las diferentes capas que lo componen con los frameworks que incorpora cada una y como se estructura una aplicación. Se ha justificado la elección Swift como lenguaje a utilizar y una breve introducción al IDE Xcode, el entorno de desarrollo gratuito de Apple. 31 31 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación 5 REQUISITOS DEL SISTEMA En este apartado se recogerá la especificación de requisitos del sistema. Permite entender lo que desea el cliente y el usuario, analizar las necesidades y evaluar la factibilidad. Además, ayuda a especificar la solución sin ambigüedades. Se describirá la información que se manejará, la funcionalidad y el comportamiento del sistema. 5.1 Requisitos generales del Sistema A continuación se detallarán una serie de requisitos que se detallarán más posteriormente. RG_01 Aplicación didáctica Versión 1.0 (28/09/2015) Descripción El sistema a desarrollar deberá contener elementos que aporten información relevante para aprender un lenguaje de programación Importancia Alta Comentarios Esta información se le proporcionará al usuario de forma sencilla Tabla 1. RG_01: Aplicación didáctica RG_02 Niveles Versión 1.0 (28/09/2015) Descripción El sistema dispondrá de una serie de niveles que irán aumentando el contenido y la dificultad Importancia Alta Comentarios En la interfaz principal aparecerán los niveles para seleccionarlos Tabla 2. RG_02: Niveles RG_03 Información de ayuda Versión 1.0 (28/09/2015) Descripción El sistema debe disponer de mecanismos para ayudar al usuario a resolver los distintos niveles. Importancia Alta Comentarios Esta información se le proporcionará al usuario de forma sencilla Tabla 3. RG_03: Información de ayuda RG_04 Resolver niveles Versión 1.0 (28/09/2015) Requisitos del sistema 32 32 Descripción El sistema deberá proporcionar herramientas para que el usuario resuelva los niveles a través de código que escriba Importancia Alta Comentarios Se presentará un teclado que ayude a conseguirlo Tabla 4. RG_04: Resolver niveles RG_05 Reiniciar sistema Versión 1.0 (28/09/2015) Descripción El sistema podrá reiniciarse de forma que vuelva al estado de la primera ejecución Importancia Alta Comentarios Ninguno Tabla 5. RG_05: Reiniciar sistema RG_06 Seguridad Versión 1.0 (28/09/2015) Descripción El sistema no podrá acceder a contenido existente en el dispositivo que no corresponda con la aplicación Importancia Alta Comentarios No solicitará permisos al usuario que proporcionen datos personales Tabla 6. RG_06: Seguridad RG_07 Portabilidad Versión 1.0 (28/09/2015) Descripción El sistema podrá ejecutarse correctamente en los dispositivos que cumplan con las características necesarias establecidas Importancia Alta Comentarios Ninguno Tabla 7. RG_07: Portabilidad 5.2 Requisitos funcionales del Sistema Se definirán las funcionalidades que debe ofrecer el sistema a los usuarios para conseguir los objetivos establecidos. 33 33 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación 5.2.1 Casos de uso Describen interacciones entre el sistema y los usuarios que utilizan los servicios que ofrece el sistema. 5.2.1.1 Diagramas de casos de uso del Sistema Ilustración 24. Diagrama 1 de casos de uso Ilustración 25. Diagrama 2 de casos de uso 5.2.1.2 Especificación de actores del Sistema En el sistema habrá un sólo actor, que será el usuario final del sistema. AC_01 Usuario Versión Versión 1.0 (15/09/2015) Descripción Este actor representa a un usuario final del sistema Diseño 40 40 6 DISEÑO En este apartado se va a desarrollar el diseño del sistema. Se detallará la estructura, las interfaces y el comportamiento del sistema. 6.1 Clases Primero vamos a mostrar un diagrama de clases del sistema para ver cómo interactúan las distintas clases. A continuación, se detallará cada una de las clases. Ilustración 26. Diagrama de clases 6.1.1 Clase Mapa Esta clase es la principal del programa. Se carga al principio, y muestra una especie de menú en el que se pueden seleccionar los niveles, los ajustes o la ayuda desbloqueada. 41 41 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 27. Clase Mapa 6.1.2 Clase Apuntes Esta clase se encarga de mostrar las ayudas desbloqueadas. Muestra el título y la descripción de la ayuda, para ello, utiliza un UIWebView en el que se escribirá el texto en html. Se podrá ir pasando de una ayuda a otra mediante botones que irán hacia la página siguiente o yendo directamente a la ayuda deseada. Ilustración 28. Clase Apuntes 6.1.3 Clase Historia Esta clase se encargara de mostrar un dialogo entre dos personas. Para ello, se mostrara un fondo y las imágenes de las dos personas, y una especie de chat. Diseño 42 42 Ilustración 29. Clase Historia 6.1.4 Clase Resumen Esta clase muestra un tablero con el contenido del nivel. Mostrará también un pequeño resumen del nivel, el objetivo primario y el secundario, si existe. Ilustración 30. Clase Resumen 6.1.5 Clase CrearCodigo Esta clase se encarga de escribir el código necesario para resolver el nivel. Incluye un teclado y una tabla en la que se muestra el código escrito. Además, permite volver hacia el resumen, para ver el tablero, y ver la ayuda disponible para el nivel. 43 43 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 31. Clase CrearCodigo 6.1.6 Clase Resolver Esta clase se encarga de leer el código y mostrar en el tablero los resultados. Si no se consigue pasar el nivel, permite volver hacia atrás para arreglar el código. Si se resuelve, se avanza hacia la siguiente etapa o al menú. Diseño 44 44 Ilustración 32. Clase Resolver 6.1.7 Clase Variable Cuando en el código se crea una variable, se crea un objeto de este tipo. Ilustración 33. Clase Variable 6.1.8 Clase Codigo Esta clase representa una línea escrita por el jugador. Se encarga de almacenar lo que se ha escrito y de convertirlo en una cadena, para mostrarlo en pantalla con el formato correcto. 45 45 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 34. Clase Codigo 6.1.9 Clase Tablero Esta clase dibuja el tablero en el que se va a desarrollar el juego. Coloca las baldosas y los sprites. Ilustración 35. Clase Tablero Diseño 46 46 6.1.10 Clase Sprite Esta clase se encarga de dibujar los elementos que existen en el nivel. Ilustración 36. Clase Sprite 6.1.11 Clase ParserJson Esta clase es la encargada de leer el archivo JSON y extraer información sobre los niveles. 47 47 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 37. Clase ParserJson 6.1.12 Clase Keyboard Esta clase se encarga de gestionar el teclado que permite escribir el código. Ilustración 38. Clase Keyboard Diseño 48 48 6.2 Interfaz gráfica En esta sección se va a detallar los prototipos de las interfaces de las distintas vistas que componen el sistema. 6.2.1 Interfaz Mapa Esta vista será la principal del programa. Se cargará al ejecutar la aplicación y se podrán ejecutar distintas acciones como comenzar un nivel o cambiar a la vista en la que podemos leer las ayudas. En esta vista se verá el título de la ciudad junto con una imagen que la identifique, se mostrará una lista de niveles junto con una descripción de ellos. Además, existirán botones que permitan realizar ajustes o cambiar de vista. Ilustración 39. Interfaz Mapa 6.2.2 Interfaz Apuntes Esta interfaz se accederá desde la vista del mapa. Mostrará un título y un texto que explicará un aspecto de la aplicación o de la programación. Existirá un botón que permita saltar a la ayuda que se desea y dos botones para pasar hacia delante o hacia atrás. 49 49 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 40. Interfaz Apuntes 6.2.3 Interfaz Historia Antes de comenzar el nivel se mostrará un diálogo. Esta interfaz lo mostrará mediante dos imágenes de las personas que hablen y un chat. Tras el último mensaje, aparecerá un botón para pasar a la siguiente vista. Ilustración 41. Interfaz Historia Implementación 56 56 7 IMPLEMENTACIÓN En este apartado se va a explicar cómo se ha implementado el sistema. 7.1 Interfaz gráfica Primero vamos a detallar como se ha realizado la interfaz gráfica de la aplicación. Como se vio en el diseño, disponemos de varias vistas y cada una de ellas dispondrá de un controlador. Para diseñar las vistas, utilizamos la herramienta que proporciona Xcode, el Storyboard. Es una representación visual de todas las vistas de la aplicación. Contiene las escenas, que pueden ser vistas simples o controladores de vistas, y las transiciones entre estas vistas. Ilustración 49. Vistas de la aplicación. Se va a detallar la vista en la que se escribe el código. Tenemos elementos como botones, textos, una tabla y una vista en la que se colocará el teclado. 57 57 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 50. Interfaz de vista en Xcode En la interfaz vemos que se han colocado diversos botones. En algunos se ha puesto una imagen sobre el botón, como el botón que muestra la ayuda en el que se ha puesto la imagen boton_ayuda.png. Ilustración 51. Detalle botón en Xcode Cada uno de los botones realiza una función que se detalla en el controlador de la vista. Por ejemplo, el botón que se utiliza para mostrar la ayuda, representado por la imagen con una interrogación. Ilustración 52. Función mostrarAyuda En este código podemos observar algunos detalles como el prefijo @IBAction, que indica una acción que se Implementación 58 58 ejecuta cuando ocurre algo en la vista. El prefijo IB indica que se ha creado con el Interface Builder. El parámetro sender nos devuelve el botón que ha sido pulsado. A continuación se muestra como queda la vista en ejecución. Ilustración 53. Vista de la clase CrearCodigo 7.1.1 UITableView Este elemento permite mostrar información en una tabla. En la vista comentada, se ha utilizado para mostrar las líneas de código. Está compuesta de celdas, cada una de las celdas se han personalizado para que muestre dos textos, el número de la línea más el código. Para rellenar la tabla con datos es necesario implementar tres métodos:  numberOfSectionsInTableView: Indica a la vista de la tabla cuántas secciones debe mostrar.  tableView: numberOfRowsInSection: Indica a la vista de la tabla cuántas columnas debe mostrar en la sección indicada.  tableView: cellForRowAtIndexPath: Se muestra la información deseada para la celda en la fila indicada. A continuación mostramos el método tableView: cellForRowAtIndexPath implementado en la tabla. Primero se obtiene la celda personalizada y el texto, luego se coloca en la celda el texto y alguna personalización adicional como el fondo de la celda. 59 59 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 54. Colocar contenido en UITableView Para conectar el controlador con los elementos de estas celdas, es necesario un archivo que contenga las referencias. Los dos textos se conectan mediante un outlet, como vemos aparece el prefijo @IBOutlet y la referencia weak, que utiliza el compilador para gestionar la memoria. Ilustración 55. Código celda personalizada 7.1.2 Teclado En la parte inferior se ha colocado una vista en la que aparecerá el teclado. Se han diseñado varios teclados para los distintos elementos de código. Implementación 60 60 El teclado se cargará en la vista que se ha colocado. Para ello, se obtiene una vista que muestre la interfaz diseñada y haga uso de la clase Keyboard. Ilustración 57. Cargar teclado Cada botón estará manejado por la clase Keyboard. Los botones del teclado dispondrán de un atributo en el que cada uno tendrá un número. Esta clase detectará que se ha pulsado un botón y actuará de distinta forma según cual haya sido. Ilustración 58. Detectar botón pulsado en el teclado. Para ocultar o cambiar de teclado, habrá que pulsar uno de los botones que aparece en la parte superior del teclado, estos botones se mantendrán en los tres teclados principales. El cuarto teclado aparecerá solo cuando se vaya a escribir una variable. Ilustración 59. Cambiar de teclado Mientras se pulse un botón se resaltará cambiando el fondo del mismo por un color azul. Ilustración 56. Teclados 61 61 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 60. Cambio de fondo de un botón Según se vaya avanzando en el juego, se irán desbloqueando teclas nuevas que permitirán escribir un código mas complejo. Por ello, la clase Keyboard tendrá un método “OcultarTeclas” que se llamará cada vez que se carga el teclado. Este método busca las teclas desbloqueadas, leyendo las preferencias del usuario, y oculta las que no lo están. Ilustración 61. Ocultar teclas 7.1.3 UIWebView La aplicación mostrará ayudas al usuario, el texto de estas se codificará en un archivo HTML Para mostrar este contenido se va a utilizar un UIWebView. Este elemento nos permite incluir contenido web en nuestra aplicación. 7.1.3.1 Archivos plist El texto HTML se va a almacenar en un archivo plist. Este archivo nos permite guardar información que podemos usar en la aplicación, normalmente aparece en formato XML. Guarda la información de forma jerárquica y está compuesto por claves, que sirven como identificadores, y valores que se pueden acceder desde el código posteriormente. Xcode nos permite crear estos ficheros de forma sencilla. Cada fila contiene una clave, el tipo de dato y el valor. Ilustración 62. Archivo plist en Xcode También podemos modificar el XML. Implementación 62 62 Ilustración 63. Archivo plist en XML 7.1.3.2 Lectura textos Se va a mostrar cómo se realiza la lectura del archivo plist y se carga el contenido en el UIWebView. Primero se obtiene un diccionario que contiene las claves y valores del archivo plist. Luego obtenemos el texto del diccionario. Finalmente se carga en el UIWebVIew el código HTML. Además, le indicamos la ruta de la aplicación para poder cargar las imágenes en el código html que sean necesarias. Como resultado, mostramos la vista “Apuntes”, en la que se muestran todas las ayudas desbloqueadas por el usuario. 63 63 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 64. Vista de la clase Apuntes 7.1.4 Alerta Cuando se desee salir del nivel se mostrara una alerta para que el usuario confirme que desee salir, ya que perderá todo el progreso realizado. Para conseguirlo utilizaremos un UIAlertController. Ilustración 65. Código alerta salir de nivel Se obtiene el siguiente resultado al intentar salir. Implementación 64 64 Ilustración 66. Alerta salir de nivel 7.2 Niveles En esta sección se va a detallar cómo se han implementado los niveles y la información necesaria para mostrar el menú principal. 7.2.1 JSON Para almacenar esta información se han usado ficheros JSON. Es un formato que nació como alternativa a XML y ha conseguido un gran número de seguidores. Está compuesto por dos estructuras:  Una colección de pares de nombre/valor.  Una lista ordenada de valores. Un objeto es un conjunto desordenado de pares nombre/valor. Un objeto comienza con “{“y termina con “}”. Cada nombre es seguido por “:” y los pares nombre/valor están separados por “,”. Un array es una colección de valores. Comienza con “[“y termina con “]”. Los valores se separan por “,”. A continuación se muestra el archivo JSON que muestra el mapa principal de la aplicación y en el que podemos encontrar los elementos descritos. 65 65 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 67. pueblo_inicio.json 7.2.2 Estructura mapa Como se puede ver, el archivo mostrado tiene una estructura que se va a explicar. Está compuesto por los siguientes campos:  “ciudad_este”: indica el nombre del archivo json que es necesario cargar cuando se desee mostrar ese mapa  “exp_este”: indica el valor mínimo de experiencia que debe tener el usuario para desbloquear el mapa que está al este.  “nombre”: indica el nombre del mapa que se utilizará para mostrar el título en la interfaz.  “miniatura”: indica el nombre de la imagen con formato “.png” que se utilizará para mostrar una imagen en la interfaz.  “niveles”: indica los niveles que existen en ese mapa, por cada nivel aparecerá un botón en el mapa. La información que contiene es: o “nombre”: texto que aparecerá en el botón. o “id”: nombre del archivo json que se cargara para desarrollar el nivel. o “experiencia”: indica la experiencia necesaria que debe disponer el usuario para desbloquear el nivel. o “descripcion”: texto que se mostrará al pulsar el botón ofreciendo una breve descripción del nivel. o “lenguajes”: indica los lenguajes para los que está disponible el nivel, Java y/o C. Implementación 72 72 Ilustración 77. Escribir variable Cuando se vayan pulsando las letras se ira guardando en una cadena el nombre. La tecla que aparece en la parte inferior izquierda permite escribir en mayúsculas, cuando este pulsada se verá con un toque azulado. Ilustración 78. Añadir letra al nombre de una variable La tecla “Terminado” finaliza la creación de la variable, incluyéndola como seleccionable en la lista. Tras esto, se cargará teclado principal y se añadirá una línea en blanco debajo. Ilustración 79. Crear variable Cuando se vaya a resolver el código, se le pasar la lista con los códigos escritos. 73 73 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 80. Pasar a resolver código 7.4 Lectura JSON Como se ha comentado, se dispone de ficheros JSON de los que se va a obtener información. Para leer los datos se va a utilizar la librería de código abierto SwiftyJSON. Primero obtenemos la ruta del archivo y luego creamos un objeto utilizando la librería. Para obtener un valor se accede como en un diccionario seguido del tipo de dato que queramos obtener, como string o int. A continuación se muestra como obtenemos el nombre del fondo del diálogo. Se utilizará la clase ParserJSON cada vez que sea necesario obtener un valor de un fichero JSON. Esta clase contendrá métodos obtener los parámetros. Algunos de ellos son: getFondo, getMensaje, getTeclas o getLineasCodigo. 7.5 Tablero y Sprites Ilustración 81. Tablero El juego se desarrollará en un tablero compuesto por baldosas y sprites. Las baldosas componen el suelo, no son interactuables y únicamente determinan por dónde se pueden mover los personajes. Los sprites son los diferentes ítems que puede haber en el tablero (Ada, los enemigos, objetos, etc). Para dibujarlo dispondremos de la clase Tablero y la clase Sprite. 7.5.1 Sprite Cada uno de los elementos que se muestren en el mapa, con excepción de las baldosas, serán recogidos en un objeto de la clase Sprite. Esta clase tiene como función controlar el movimiento, la interactuación con los demás elementos del mapa y la animación de los diferentes items. Pueden tener diferentes estructuras, según el tipo de Sprite: Implementación 74 74 Ilustración 82. Imágenes Sprites  Simples: no tienen movimiento, el sprite está compuesto solo por una imagen.  Animación estática: el sprite está quieto pero muestra una animación formada por tres imágenes. Únicamente tienen la animación de reposo y siempre mirarán en un único sentido.  Animación dinámica: corresponde a los personajes que se mueven por el tablero. Las animaciones dependerán de la acción que estén realizando (reposo, andar o golpear), y de la dirección. La combinación de estas estará formada por tres imágenes. En la clase Sprite se han definido diferentes tipos de elementos que puede haber en el tablero. Según el tipo cambiará el comportamiento. Ilustración 83. Tipos de Sprite La clase Sprite se encarga de dibujar correctamente el personaje en el tablero. La posición en el mapa de baldosas está determinada por dos atributos: “fila” y “columna”, contándose desde arriba y desde la izquierda. A partir de la posición hay que calcular las coordenadas para colocar el elemento en la baldosa que le corresponde. Ilustración 84. Cálculo posición Sprite Primero calculamos la posición de partida del tablero, luego se calcula el número de desplazamientos horizontales y verticales en función de la posición. Finalmente, se ajusta la posición multiplicando el desplazamiento horizontal por el ancho de la baldosa, el desplazamiento vertical por el alto de la baldosa y los ajustes en la posición horizontal debido a la inclinación del tablero. Una vez calculada la posición, se crea un rectángulo que delimitará el área de la imagen. 75 75 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ahora que se tiene su posición, hay que controlar al personaje. Para cambiar la acción hay que llamar al método “setAccion”: Ilustración 85. Método setAccion de Sprite Primero fija la acción (un entero de cero a dos), la dirección (un entero de cero a tres, para identificar la fila), y se configuran las opciones necesarias para cada acción. Los sprites que se animan lo hacen continuamente cambiando entre tres imágenes que dan al elemento la sensación de movimiento. Para ello se utilizan métodos disponibles en la clase UIImageView. Ilustración 86. Animación Sprite en estático Primero configuramos las imágenes que van a formar parte de la animación, se ajusta la duración de cada imagen y el número de veces que se va a repetir la animación. Un cero indica que la animación es infinita. Al actualizar, si el personaje está realizando alguna acción, se hacen cambios adicionales como moverse sobre el tablero o golpear un objeto. Se va a utilizar la clase CABasicAnimation para mover a los personajes. Ilustración 87. Moviemiento Sprite I Se crea la animación y se fija el punto de partida. Luego se actualiza la posición y se fija el destino, cuando finalice la animación se quedará en esa posición. Implementación 76 76 Ilustración 88. Movimiento Sprite II 7.5.2 Tablero Tablero gestiona el movimiento de todos los elementos que hay en juego. Tiene tres funciones principales: dibujar los elementos en juego, controlarlos (su movimiento, las interacciones entre ellos...) y actuar como interfaz para obtener datos del tablero. Hay dos tipos de tableros diferentes: el de muestra (que se dibuja en ResumenViewController) y el definitivo (utilizado en ResolverViewController). En el tablero de muestra se dibujarán de forma semitransparente los sprites que tengan una posición aleatoria. Para ello, utiliza cuatro atributos principales: Ilustración 89. Atributos principales del tablero Para dibujar el suelo utiliza “baldosas”, que es una lista con el el nombre dela imagen de cada baldosa del tablero. Como en la mayoría de los casos casi todas las baldosas son del mismo estilo, la baldosa principal se guarda en “baldosaBase”. El ArrayList “items" contiene a todos los sprites del tablero, excepto Ada, que está aparte. 7.5.2.1 Creación Como se vio anteriormente, el archivo JSON de un nivel contiene los datos necesarios para crear el tablero. Ilustración 90. Ejemplo tablero JSON El constructor de Tablero coge los diferentes elementos y los crea:  Obtiene los datos del tablero (fila, columna, baldosaBase). 77 77 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación  Crea el una lista de “baldosas” con tantos elementos como baldosas haya, y en aquella posición en que la baldosa del suelo sea distinta a la base, se pone la imagen correspondiente  Se crean los Sprites, obteniendo los datos de la lista “item”.  Si es un tablero de muestra, se hacen semi transparentes los elementos aleatorios y se dibuja un símbolo en las demás posiciones posibles. 7.5.2.2 Actualizar El tablero se tiene que actualizar cada vez que se ejecute una línea y mostrar los cambios debidos al código escrito. Se hace en una serie de pasos: 1) Se comprueba si Ada choca con algún ítem. En caso de que sea cierto, disminuye la salud de Ada si se hace se hace daño (al pisar agua o un cocodrilo, por ejemplo) o cambia la acción a “chocar” si no puede pasar por encima de ese ítem. 2) Si Ada está atacando, realiza el ataque y disminuye la salud del objetivo. Si el ataque falla (porque no había nada delante), es Ada quien recibe el daño. Así se penalizan los códigos mal estructurados. 3) Si un enemigo ha iniciado su ataque y está en una posición colindante a la de Ada, ésta recibe el daño disminuyendo su salud. 4) Actualiza a Ada, utilizando el método de la clase Sprite. 5) Si Ada se está moviendo, se actualiza la posición del tablero para que quede centrado en Ada. Esto ocurrirá si el tablero es más grande que el recuadro que lo delimita. 6) Se actualizan los ítems. Los personajes amistosos tienen comportamiento diferente según su naturaleza y el nivel que se esté jugando. Los enemigos suelen tener un único comportamiento: perseguir a Ada y atacarle. 7.5.2.3 Otros métodos La clase Tablero también dispone de varios métodos que permiten interactuar al usuario con el juego, como los métodos mirar o escuchar, en los que se obtienen datos del tablero. Si se desea actuar sobre el personaje, la clase Tablero nos permite obtener el Sprite de Ada y acceder a los métodos para cambiar su comportamiento. Por ejemplo, si el usuario desea que Ada ande, la clase Resolver obtiene el Sprite a través de Tablero y cambia la acción. Tenemos métodos como “mirar”, que devuelve un entero con el código que representa lo que hay en la baldosa. “Escuchar” devuelve un entero que según la situación en la que se utilice significa una cosa. “Coger” permite a Ada obtener equipo y “usar” lo que hace es usar ese equipo. Estos métodos también suelen indicar un mensaje de log en el que se explica lo que ocurre en cada momento, como indicar lo que se ha escuchado. 7.6 Resolver La clase ResolverViewController será la encargada de mostrar al jugador el resultado del código escrito. Es decir, se mostrara gráficamente las acciones de cada línea escrita. Ya sea mediante texto o cambios en el tablero. Cada vez que el usuario pulse la pantalla, se irá leyendo una línea y ejecutándola. Esto será así hasta que se gane o se lean todas las líneas. En la pantalla aparecerá un fragmento del código, en concreto, tres líneas apareciendo en el medio la que se va a leer a continuación. Para poder decidir si se ha ganado, se debe conocer el objetivo del nivel. Cada nivel presentara un reto distinto y esta clase debe detectar cuando se ha cumplido, o cuando no se puede conseguir. Implementación 78 78 Lo primero que se hace es comprobar que el código sea válido para varias ejecuciones. Para ello se ejecutan diferentes distribuciones del tablero con semillas distintas, estas semillas determinarán el valor de un componente aleatorio. En esta fase el tablero no dibuja nada, sino que el movimiento se realiza instantáneamente, es decir, es una fase transparente al usuario. Se cambia la semilla hasta que se llegue al final o falle en una ejecución. Si una distribución concreta ha dado error esa es la que se mostrará al jugador, mientras que si ha pasado todas las ejecuciones sin error, se utilizará una semilla aleatoria. Ilustración 91. Comprobación código válido Una vez elegida la semilla, se mostrará por pantalla la distribución escogida. En este caso no será una ejecución automática, sino que se leerá una línea cada vez que el jugador pulse la pantalla. 79 79 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 92. Diagrama resolver nivel (II) Cuando el jugador pulsa la pantalla, se llama a la función “click_Ejec”: Ilustración 93. Reconocer toque en Resolver Esta función llamara al método “ejecutar” sólo si las variables booleanas “enEjecucion” y “fin” son “false”.  “fin” es true cuando ya se han leído todas las líneas o el jugador ha ganado o perdido el nivel.  “enEjecucion” es verdadera mientras se está ejecutando la línea. Se le asigna “true” cuando comienza a leerse la línea de código, y no vuelve a estar “false” hasta que termina la animación del tablero. Así se consigue que no se solapen varias ejecuciones, y no se ejecuten más líneas cuando se ha terminado la partida. Ilustración 94. Control de ejecución Debido a que la lectura del código es independiente de la ejecución del tablero, es necesario asegurar que las dos tarden el mismo tiempo. Por ello, la función “ejecutar” espera un tiempo después de leer la línea de código, tras este tiempo se pone la variable “enEjecucion” como “false”. Implementación 80 80 Ilustración 95. Retraso en ejecutar  “esperar” es una variable booleana que es “true” cuando en la línea de código se ordena una acción que necesite tiempo, como un movimiento si se quiere “andar”. Según el tipo de animación se esperará más o menos. Si no hay animación se esperará 0.1 segundos. Tras el tiempo de retraso por la animación, se cambian las variables “enEjecucion” y “esperar” y se comprueba si el jugador ha ganado la partida. Además, se actualiza el movimiento de los demás personajes no controlados por el jugador, estos se mueven en el mismo turno que Ada. Las líneas que contengan estructuras de control no provocarán que los enemigos realicen acciones. 7.6.1 Leer líneas La función “ejecutar” primero llamará a la función “leerLinea”. Cada línea tiene un código principal, que es el que determine si se realiza una acción u otra. Si en el código se ha escrito que Ada ande, se realiza lo siguiente: Ilustración 96. Fragmento leer línea (Código andar) “c” es un objeto “Codigo” que contiene la línea actual. Se leen los parámetros que contiene, para comprobar si se ha escrito correctamente. Si hay algún fallo, se lanza un Toast que notifica del error al jugador. Al leer este código, podemos establecer la acción que va a realizar Ada a través de su Sprite, que nos lo devuelve Tablero a través del método “getAda”. Otras líneas de código son más complicadas, como los condicionales (if, else if o else). Para ejecutar estos se realizan una serie de pasos: 1) Si es un else if o un else, se comprueba que la línea anterior sea el cierre de un if o de un else if. 2) Se evalúa la condición, comparando poco a poco los parámetros de la línea. Si hay un fallo de sintaxis, se termina la partida. Si no: i) Si la condición es correcta, se pasa a la siguiente línea. ii) Si es incorrecta, se salta al cierre del bloque y se avanza una línea más. 81 81 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación 3) Si la línea contiene un cierre de llaves, significa que se ha recorrido el bucle y hay que saltarse los else if y else siguientes. 7.6.1.1 Evaluar condición La evaluación de una condición conlleva utilizar una serie de variables. Está implementada en el método “esCorrecta”, que recibe como parámetro el número del parámetro de inicio en que empieza la condición. Por ejemplo si es un if, hay que empezar a mirar en el segundo parámetro, puesto que el primero sería el código del if. Ilustración 97. Evaluar condición Los parámetros a utilizar son:  “resultado”: es lo que devolverá la función.  “c”: es la línea de código sobre la que se trabaja.  “j”: es una variable para recorrer los parámetros.  “cond”: es una tabla de dos enteros. En ella se almacenarán las variables, números y otros elementos que se vayan leyendo en “c”, y cada vez que se almacene uno aumentará “indice”, para saber dónde guardar el siguiente.  “comparador”: se guarda el código del comparador que se usará. Es decir, si es una igualdad, desigualdad, mayor que, etc. Lo que hace esta función es leer los parámetros, almacenarlos en su variable correspondiente y, cuando se tengan dos elementos en “cond” y un comparador, se evaluará la condición. Ese momento debe coincidir con la lectura del último elemento de la línea, ya que si hay alguno más significa que no se ha escrito correctamente la línea. Ilustración 98. Almacenar parámetros comparación Cuando se tengan todos los parámetros, se procede a evaluar la condición y se ponen las variables “indice” y “comparador” a cero para identificar después si ha sido correcta la lectura. Pruebas 88 88 Ilustración 104. Prueba 1 8.2.2 Prueba 2 Para realizar esta prueba se terminara un nivel en el que haya apuntes nuevos y se pasara a la pantalla principal. Nos aparecerá un texto con los apuntes añadidos y una indicación de que hay apuntes nuevos. Además, se es la primera vez que ocurre, se mostrará una animación indicando que hay que pulsar el botón. 89 89 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 105. Prueba 2 8.2.3 Prueba 3 Se ejecutará un nivel que incluya elementos aleatorios. En la vista Resumen se mostrarán las opciones semitransparentes, una de las posiciones con el objeto y en las demás una imagen con un signo de interrogación. En la vista Resolver aparecerá una de las opciones. Pruebas 90 90 Ilustración 106. Prueba 3 8.2.4 Prueba 4 Para realizar esta prueba se escribirá un código incorrecto. Luego en la vista Resolver , cuando se lea la línea, se debe mostrar un error. Si es la primera vez que ocurre un error o no se resuelve el nivel, se debe indicar al usuario que pulse el botón “atrás” para arreglar el código. Ilustración 107. Prueba 4 8.2.5 Prueba 5 Para esta prueba resolvemos un nivel y cuando volvamos al mapa aparecerá el nivel nuevo. La imagen será distinta mostrando un signo de exclamación, para indicar que es el nuevo. 91 91 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 108. Prueba 5 8.2.6 Prueba 6 Para reiniciar el juego pulsamos el botón ajustes y posteriormente el botón reiniciar. Luego se iniciará la aplicación mostrando el tutorial. Pruebas 92 92 Ilustración 109. Prueba 6 8.2.7 Prueba 7 Para reiniciar el juego pulsamos el botón ajustes, el botón lenguaje y finalmente el lenguaje que no estemos utilizando actualmente. Luego se iniciará la aplicación mostrando el tutorial y comprobamos que se haya cambiado la codificación. 93 93 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 110. Prueba 7 8.2.8 Prueba 8 Para realizar esta prueba se comparara el archivo JSON que define el tablero de un nivel y el resultado que se muestra. En este caso se ve que es un tablero de 5 columnas y 5 filas, el tablero base es el ladrillo y disponemos de ítems en las posiciones 3, 8, 11, 14 y 22. Ilustración 111. Prueba 8 Pruebas 94 94 8.2.9 Prueba 9 En este caso vamos a escribir una condición simple como que el personaje golpee si existe un obstáculo a la derecha. Así comprobamos que podemos escribir código fácilmente. Ilustración 112. Prueba 9 8.2.10 Prueba 10 Para esta prueba se va a observar el comportamiento del personaje cuando está en reposo y cuando se mueve de una posición a otra. Para ello se escribirá un código que mueva al personaje. 95 95 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Ilustración 113. Prueba 10 Se han realizado un conjunto de pruebas en los que se ha comprobado el correcto funcionamiento de algunos aspectos importantes del sistema. Entre ellos, podemos destacar, la primera ejecución de la aplicación o la lectura del código escrito y las animaciones correspondientes que se deben mostrar. Planificación 96 96 9 PLANIFICACIÓN A continuación se explica el desarrollo temporal de cada uno de los elementos del proyecto. Se ha realizado un diagrama de Gantt para poder entender el proceso de una forma más clara y sencilla, indicando además la dependencia de los elementos. Ilustración 114. Planificación del proyecto La primera fase corresponde a la búsqueda de información con una duración de alrededor unos dos meses. Se procederá a estudiar las características del sistema operativo iOS, las herramientas para desarrollar en este sistema y el lenguaje que se utilizará para codificar. Antes de empezar el diseño, habrá una pequeña fase en la que se analizará el proyecto y como resultado se obtendrá la especificación de requisitos. La duración se ha estimado en tres semanas y consistirá en describir el comportamiento de la aplicación que se va a desarrollar. El diseño será el proceso más largo, con una duración de tres meses. Se analizarán los requisitos y se describirá la estructura y los componentes de la aplicación. Una vez finalizada la fase de diseño, se procederá a la implementación de éste. Se codificará el diseño realizado utilizando el lenguaje de programación y la plataforma elegida. Las pruebas de software se realizarán tras acabar la implementación. Tendrán una duración de poco menos de un mes. Se harán pruebas de distintos tipos para detectar defectos y problemas. Como resultado se deben validar y verificar los requisitos especificados. La fase de documentación tendrá una duración aproximada de un mes y medio. Se elaborará una memoria que recogerá la información general del proyecto. Se explicarán los objetivos, como se realizará el proyecto y los resultados obtenidos. Por último, habrá una fase de revisión en la que se corregirán errores detectados y mejoras que necesite la aplicación. 97 97 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación 10 CONCLUSIONES 10.1 Dificultades encontradas Durante el trabajo se han encontrado dificultades debido al desconocimiento del desarrollo de aplicaciones móviles, en este caso en un sistema cerrado como el que ofrece Apple. El lenguaje elegido, Swift, se desarrolló hace pocos años y todavía no dispone de la cantidad de ejemplos y bibliotecas que dispone Objective-C. Sin embargo, es más sencillo y se está impulsando fuertemente desde Apple. La interfaz gráfica también ha sido una dificultad, debido a no estar acostumbrado a este tipo de programación, aunque el IDE Xcode ofrece una interfaz en la que la mayoría de los elementos se pueden establecer sin escribir código. Los problemas se han resuelto con la numerosa documentación que se puede encontrar, y mediante páginas web en las que los usuarios plantean dudas y otros les ayudan a resolverlo. 10.2 Líneas futuras Como mejoras, se podría conseguir una interfaz más profesional y vistosa, con animaciones más complejas. Por otra parte, se podrían introducir elementos relacionados con la programación avanzados, aunque en un juego como este no sea necesario utilizarlo. El proyecto se ha centrado en el correcto funcionamiento de las diferentes interfaces de la aplicación. Con ello, se han diseñado niveles que se puedan resolver de acuerdo al comportamiento desarrollado. Posteriormente, se podrían añadir más niveles combinando los elementos existentes o introduciendo nuevos. 10.3 Valoraciones finales El proyecto ha cumplido los objetivos fijados. Se ha adaptado la aplicación anterior desarrollada en Android al sistema iOS, aprovechando las similitudes y las diferencias de ambos sistemas. Esta aplicación puede ayudar a tener un primer contacto con la programación para aquellos que no lo conozcan, y cambiar la forma de pensar, ya que los ordenadores trabajan de una forma estructurada y secuencial que difiere del pensamiento humano. Un usuario que termine el videojuego debe de disponer los conocimientos básicos de los lenguajes de programación, sobre todo las estructuras de control. En este proyecto no se ha entrado en detalles complejos, pero proporciona una base para poder realizarlo mediante otros medios. Se ha conseguido crear niveles que permitan mostrar las características de la aplicación. Los apuntes permiten obtener una base teórica para los niveles, y la forma de resolverlos, mediante el teclado proporcionado, resulta intuitiva para el usuario. Por último, la parte gráfica de los niveles ha conseguido mostrar los efectos de las acciones que se realizan en el código. Las imágenes y animaciones siguen el modelo tradicional de los juegos en dos dimensiones. Con este proyecto he conseguido aprender a estudiar de forma autodidacta un lenguaje de programación nuevo y tecnologías desconocidas. Resolver problemas más complejos de los encontrados en anteriores proyectos, y ser capaz de afrontar uno de mayor envergadura, similar a lo que se puede encontrar en el mundo laboral. Anexo 104 104 Al comenzar el nivel, aparecerá la vista Historia. Se mostrará a personajes manteniendo un dialogo, cada vez que se pulse en la pantalla aparecerá un nuevo mensaje. Ilustración 121. Manual: Historia Si el nivel ya se hubiera realizado, se muestra un botón con la opción de saltar la conversación. Ilustración 122. Manual: Historia saltar 105 105 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Cuando se hayan leído todos los mensajes aparecerá un botón para avanzar en el nivel. Ilustración 123. Manual: Historia siguiente En la siguiente vista podemos leer un resumen del nivel y lo que se necesita para resolverlo. Se permite salir del nivel o continuar, es decir, pasar a la siguiente vista en la que se escribirá el código. En este nivel se indica que es necesario golpear el hierro. Por ello, habrá que escribir un código que permita a Ada colocarse enfrente y golpear. Ilustración 124. Manual: Resumen Anexo 106 106 Si pulsamos “Ir a la misión”, pasamos a escribir el código. En la vista tenemos varios elementos como dos botones, uno para salir y otro para pasar a resolver el nivel. En el centro aparece una tabla con el código y en la parte inferior está el teclado. Además, existen dos botones en la parte derecha, uno para mostrar una ayuda para el nivel y otro para volver a ver el mapa. Ilustración 125. Manual: Crear código La ayuda muestra los apuntes que estén relacionados con el nivel actual. Si todavía no se han desbloqueado, lo harán cuando se complete el nivel. Ilustración 126. Manual: Ayuda código 107 107 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Pulsando el botón “+” se muestra el código necesario para que funcionara en un aplicación real, declarando la clase Turing. Si el lenguaje elegido es C, aparece otro código. Ilustración 127. Manual: Clase código El teclado puede cambiar de botones pulsando uno de los botones principales de la parte superior. Permite ocultar el teclado o cambiar el tipo de teclado, cada una de las teclas escribirá un código en la tabla. Ilustración 128. Manual: Teclado código Anexo 108 108 Observando el mapa y los objetivos, escribimos el código necesario mediante el teclado para resolver la etapa. Ilustración 129. Manual: Código nivel Finalmente en la vista resolver tenemos un botón para salir y otro para volver atrás. Si pulsamos en la pantalla se van ejecutando las líneas Ilustración 130. Manual: Resolver 109 109 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación Según se vayan ejecutando las líneas, aparecerá información sobre el nivel hasta que se gana o no. Si se gana el botón cambia el texto indicando que se continúe. Ilustración 131. Manual: Resolver final 12.3 Swift En este apartado se va a realizar una pequeña introducción a los elementos básicos de Swift. Un lenguaje creado por Apple que en un futuro debe ser el que domine las aplicaciones para iOS y OS X. Además, en comparación con Objective-C, tiene un mejor rendimiento y es un lenguaje mucho más intuitivo y fácil de aprender. Combina lo mejor de C y Objective-C, sin las limitaciones de la compatibilidad con C. Adopta patrones de programación seguros y añade características modernas para hacer la programación más sencilla y flexible. 12.3.1 Básico Swift proporciona sus propias versiones de todos los tipos C y Objective-C fundamentales, incluido Int para los números enteros; Double y Float para los valores de punto flotante; Bool para valores booleanos; y String para datos textuales. También ofrece versiones potentes de los dos tipos de colecciones principales, Array y Dictionary. Introduce tipos opcionales, que se encargan de la ausencia de un valor. Estos tipos indican o bien “no es un valor, y es igual a x” o “no es un valor en absoluto”. 12.3.1.1 Valores simples Se usa let para declarar una constante y var para declarar una variable. El valor de una constante no necesariamente debe ser conocido al momento de compilar, pero solo se le debe asignar valor una vez. Las constantes son para valores que se asignan una vez pero se usan en varias ocasiones. var numeroVariable = 10 numeroVariable = 20 let numeroConstante = 20 Anexo 110 110 Una constante o variable debe tener el mismo tipo del valor que se le asigna. No siempre es necesario escribir el tipo explícitamente. Proveer un valor cuando se crea una constante o variable deja al compilador inferir el tipo del dato. En el ejemplo anterior, numeroVariable es un Int porque su valor inicial es Int. Cuando el valor inicial no provee suficiente información o no hay valor inicial, se especifica el tipo escribiéndolo después del nombre y separándolo con dos puntos. let numeroDouble: Double = 20 Los valores nunca son convertidos de forma implícita de un tipo a otro. Si se necesita convertir un valor de un tipo a otro, se realiza una conversión explícita del tipo deseado. let cadena = "El numero de líneas es " let numero = 20 let cadenanumero = cadena + String(numero) Estos valores se pueden incluir escribiendo el valor entre paréntesis, y escribir “ \ “ antes del paréntesis. let numero = 20 let cadenanumero = "El numero de líneas es \(numero)" 12.3.1.2 Tipos complejos Se pueden crear arrays y diccionarios usando “ [ ] ” y acceder a su valor escribiendo su índice. var colores = ["azul","blanco","negro", "rojo"] colores[1] = "amarillo" var capitales = [ "España":"Madrid", "Francia":"París" ] capitales["Italia"] = "Roma" También se pueden crear arrays y diccionarios vacíos. let arrayvacio = [String]() let diccionariovacio = Dictionary<String, Float>() 12.3.2 Control de flujo Se utiliza if y switch para hacer condicionales, y for-in, for, while, y do-while para hacer bucles. Los paréntesis alrededor de la condición y el bucle son opcionales. Las llaves alrededor del cuerpo son 111 111 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación obligatorias. let puntuaciones = [75,43,103,87,12] var equipo = 0 for puntuacion in puntuaciones { if puntuacion > 50 { equipo += 3 }else{ equipo += 1 } } 12.3.2.1 Estructura if En un if, el condicional debe ser una expresión booleana, esto significa que if score {…} es un error, no una comparación implícita con cero. Se puede usar if y let juntos para trabajar con valores que faltan. Estos valores están representados como opcionales. Un valor opcional contiene un valor o contiene nil para indicar que falta un valor. Se escribe “?” después del tipo de valor para mostrar como el valor es opcional. var nombreOpcional: String? = "Juan Perez" var saludo = "Hola!" if let nombre = nombreOpcional { saludo = "Hola, \(nombre)" } Si el valor opcional es nil, la condición es false y el código entre llaves se omite. De lo contrario, el valor opcional es asignado a la constante después de let, lo que hace que el valor esté disponible en ese bloque de código. 12.3.2.2 Estructura switch Los switch soportan cualquier tipo de dato y una gran variedad de operadores de comparación, no están limitados a Int. let tiempo = "lluvia" switch tiempo { case "soleado": let comentarioTiempo = "Hace un día esplendido." case "nublado", "lluvia": let comentarioTiempo = "Puede que llueva durante el día.." case "tormenta": let comentarioTiempo = "Mejor no salir a la calle." default: let comentarioTiempo = "Parece que hace buen día." } Anexo 112 112 Después de ejecutar el código en la sentencia que identifica el programa, sale de la declaración de switch. La ejecución no continua con el siguiente caso, así que no hay necesidad de colocar el break después de cada case. 12.3.2.3 Estructura for-in Se usa for-in para iterar sobre elementos de un diccionario. let numerosInteresantes = [ "Primos": [2, 3, 5, 7, 11, 13], "Fibonacci": [1, 1, 2, 3, 5, 8], "Cuadrados": [1, 4, 9, 16, 25], ] var masLargo = 0 for (tipo, numeros) in numerosInteresantes { for numero in numeros { if numero > masLargo { masLargo = numero } } } Puede tener un índice en un bucle mediante la utilización de “…” para hacer un rango que incluya ambos valores o escribiéndolo explícitamente, con inicialización, condición e incremento. Estos dos bucles hacen lo mismo: var primerBucle = 0 for i in 0...2 { primerBucle += i } 12.3.2.4 Estructura while Se usa while para repetir un bloque de código hasta que una condición cambie, la condición puede estar al final para asegurar que el bucle corra completo al menos una vez. var n = 2 while n < 100 { n = n * 2 } 12.3.3 Funciones y closures 12.3.3.1 Funciones Usa func para declarar una función. Llama una función poniendo su nombre con una lista de argumentos entre paréntesis. Usa -> para separar el nombre de los parámetros y los tipos que retorna la función. 113 113 Implementación de un recurso docente sobre iOS para el autoaprendizaje de un lenguaje de programación func saludo(nombre: String, dia: String) -> String { return "Hola \(nombre), hoy es \(dia)." } saludo("Roberto", dia: "Martes") Usa una tupla para devolver los valores de la función. func getPrecioGas() -> (Double, Double, Double) { return (3.59, 3.69, 3.79) } getPrecioGas() Las funciones pueden recibir un número variable de argumentos, organizándolos en un array. func sumaDe(numeros: Int...) -> Int { var suma = 0 for numero in numeros { suma += numero } return suma } sumaDe() // = 0 sumaDe(42, 597, 12) // = 651 12.3.3.2 Closures Los closures son un tipo de función especial. Se puede usar como el argumento de métodos y funciones, el valor devuelto por métodos y funciones o se puede asignar a una variable que se usara como función. Estas sentencias se ejecutan en el ámbito donde se creó y pueden acceder a una copia de las variables, funciones, etc. de ese ámbito. Se pueden escribir closures sin un nombre rodeado de llaves ({ }). Se usa in para separar los argumentos y el tipo de retorno del cuerpo. numeros.map({ (numero: Int) -> Int in let resultado = 3 * numero return resultado }) 12.3.4 Objetos y clases Se utiliza class seguido del nombre de la clase para declarar una clase. La declaración de una propiedad en una clase se escribe de la misma forma que una variable o constante, con la diferencia de estar en el contenido o