Home » Guías » Guía definitiva de los Playground de Swift en Xcode 6
Playground Lección 1

Guía definitiva de los Playground de Swift en Xcode 6

La presente guía cubre la funcionalidad y funcionamiento de los playground en Xcode 6, 6.1 y 6.2 con la especificación de Swift 1.1. Si usas Xcode 6.3, la nueva especificación Swift 1.2 ha cambiado y esta guía no funcionará correctamente. Te recomendamos en dicho caso que leas la nueva guía de los playground en Xcode 6.3 para evitar problemas

Playground es un nuevo e interesante tipo de proyecto para Xcode 6, que permite realizar prototipado de clases de Swift, trabajar con él para aprender o incluso hacer prototipos de juegos 2D con SpriteKit o 3D con SceneKit.

Un Playground nos muestra una ventana que nos dice el resultado de cada una de las líneas que introducimos en el programa y cada vez que editamos nuestro código, este se re-compila, evalúa y nos muestra el resultado. Además nos permite ver gráficas de rendimiento de nuestro código, trabajar con SpriteKit y poder ver y controlar su comportamiento en tiempo real, o con SceneKit donde podemos definir y ver objetos 3D sobre la marcha y modificarlos con solo tocar propiedades, mezclar código con documentación, crear entornos interactivos y mucho más.

Utilidad de los Playground

Los Playground tienen una gran versatilidad como herramienta y son ideales, por ejemplo, para formación. A través de ellos es muy fácil probar y practicar Swift, enseñar programación a gente que empieza (gracias a que muestra los resultados en tiempo real) o seguir cursos a tutoriales fácilmente (como los que tenéis en la web en nuestra sección de curso de Swift.

No requieren que nos peleamos con targets de compilación, firmas para dispositivos, Apple IDs, equipos de desarrollo, perfiles de aprovisionamiento o pre-configuraciones de los proyectos. Simplemente abrimos y comenzamos a escribir viendo los resultados del código o sus posibles errores mientras trabajamos.

Playground también es una gran herramienta para nuevos módulos o algoritmos que queramos probar, ajustar u optimizar. Nos permite ver los resultados y su rendimiento e incluso si queremos realizar algún tipo de dibujo o resultado gráfico, lo veremos al momento y podremos evaluarlo.

Playground

También puede usarse para probar código que implique procesamiento de algún tipo de archivos u objetos como filtros de imágenes. No solo veremos el resultado final, sino que podemos ver cada paso y el proceso de aplicación de dicho procesamiento en todas sus fases.

Por último, aunque no menos importante, podemos probarlo como test unitario de cualquier tipo de librería o API con que estemos trabajando o que queramos experimentar con su uso. Podemos ejecutar el código como documento independiente y no necesitamos crear ningún proyecto para ver si lo que estamos haciendo funciona bien o no. No necesitamos compilar, esperar que se genere, verlo en el simulador o en pantalla, parar, modificar, volver a ejecutar…

Es la herramienta de prototipado de código, aplicaciones y juegos ideal, donde incluso podemos crear un Playground de pruebas y ponerlo en el dock para poder empezar a probar rápidamente y en cualquier momento.

Estructura

Playground es un paquete de archivos dentro de una extensión .playground que incluye varios elementos:

  • El código en Swift que estamos programando.
  • Una carpeta de recursos a la que podemos acceder dentro del propio paquete contenedor .playground.
  • Una carpeta de documentación en HTML y CSS que permite unir código Swift a documentación en un mismo documento Playground en el editor.
  • Un timeline de resultados, que podemos ver en la barra lateral en todo momento.

La ventana principal es tan simple como un editor de código a la izquierda y una barra lateral a la derecha que muestra el resultado en tiempo real de todo lo que vamos codificando. El código se ejecuta de arriba hacia abajo, en orden de cada línea escrita.

Una vez en el editor, podemos elegir si queremos ver el editor estándar (el que solo tiene dos partes y aparece por defecto) o el editor asistente que nos permite ver el timeline, la consola de ejecución o los resultados de los diferentes pasos o líneas de nuestro código. En esta ventana podremos ver gráficamente la progresión de los bucles de nuestro código y medir su eficiencia, el aspecto de una UI, de un botón, de un gráfico o cualquier resultado derivado de nuestro código.

PlayGround 01

Si activamos el editor asistente con el timeline en el Menú View -> Assistant Editor -> Show Assistant Editor o pulsando Alt+CMD+Enter, veremos que en la parte inferior tenemos un indicador de “30 sec” que indica el intervalo de evaluación de nuestro código, así como un slider que nos permite movernos temporalmente por la gráfica o elemento interactivo, para ver los resultados de nuestro proceso en un momento concreto de la ejecución.

Cuando hagamos pruebas de un bucle, una progresión o cualquier tipo de progreso (incluso la ejecución de un juego), podremos avanzar o retroceder en su ejecución y ver y evaluar la eficiencia. Podremos saber cuántas vueltas da un bucle en su ejecución y optimizar estas para sea más eficiente el código o mover adelante o atrás cada frame de ejecución de un juego con el objeto de ver cómo se comportan las físicas de objetos y si las hemos definido bien.

Con Playground podemos crear interfaces completas con UIKit, juegos con SpriteKit y SceneKit donde tendremos simulación en tiempo real del juego, incluso con físicas de objetos, y casi cualquier cosa que podamos hacer con iOS y sus componentes a través de Swift.

En el caso de juegos, por ejemplo, o cualquier prueba o app que queramos hacer que necesite ficheros, solo tenemos que ir con Finder hasta donde tenemos nuestro archivo .Playground y con el botón derecho (o contextual) seleccionamos “Mostrar Contenidos del Paquete”. Eso abrirá el paquete como una carpeta y dentro veremos un fichero .xcplayground con nuestro contenido, otro .xctimeline con el contenido del mismo, el fichero .swift y una carpeta Resources donde podremos copiar todos los recursos que queramos. Todo lo que se copie ahí, será accesible desde el Playground sin ninguna configuración más.

Primer Playground

Para trabajar, vamos a usar a crear un proyecto con Xcode 6.1, donde podemos elegir si queremos que este sea para iOS (usando librerías para este sistema y control de toques) o hacerlo para OS X con lo que podremos ventanas de aplicación y más cosas acordes con cada uno de los sistemas. En este caso, vamos a crearlo para iOS.

Nada más abrir un proyecto veremos las siguientes líneas:

Como podéis ver, el import hereda todas las clases de UIKit, lo que indica que podemos crear objetos de la misma y ver cómo quedan en tiempo real. Para hacer esto, por ejemplo, vamos a crear una etiqueta dentro de una caja de color:

Si hacemos esto, el resultado será que en el lateral veremos UILabel a la altura de cada línea que modifica o crea el UILabel, pero nada más. Para poder ver el resultado lo primero que hemos de hacer es colocar el ratón sobre la última línea, testLabel. Es un truco que tiene Playground para, simplemente nombrando una variable, podamos acceder a ella y su valor. Al poner el ratón encima veremos que se resalta la línea y aparecen dos figuras a la derecha de UILabel: un pequeño ojo y un círculo de color sólido.

PlayGround con UIKIt

El pequeño ojo nos mostrará una ventana pequeña emergente con el objeto dibujado, y si nos ponemos encima del círculo blanco veremos que se transforma en un +. Si le damos, se añadirá a nuestro timeline el elemento. Veremos un cuadro con la instrucción y debajo su resultado.

Esto resulta curioso porque, si pulsamos el + en cada una las líneas donde se modifica alguna propiedad de primer nivel del objeto, podremos ver cómo se dibuja el mismo en cada paso: antes del color, antes de redondear la caja de color, antes de centrar el texto… tendremos el dibujo de cada elemento como valores en ese momento de la variable que contiene, en este caso, nuestra etiqueta.

De esta forma, podremos dibujar elementos completos de interfaces y ver cómo va quedando sobre la marcha, pudiendo ajustarlos. Porque, de hecho, si modificamos un valor del código, los resultados que vemos en el timeline cambiarán. Por ejemplo, vamos a modificar la siguiente línea:

Nada más terminar de escribir veremos que el redondeo de nuestra caja desaparece, ya que vemos el resultado en tiempo real.

Ahora vamos a modificar el color:

Ahora vemos el nuevo color en todas las muestras que hemos puesto, viendo de esta forma la actualización de la presentación mientras trabajamos.

PlayGround UIKit 02

No se vayan todavía, aun hay más

Esto es solo un pequeño adelanto de todo lo que podremos hacer con Playground. Por ejemplo, a nivel de formación podemos mezclar documentación en modo lectura con el propio código editable que muestre los resultados en tiempo real. Existen varios ejemplos en Apple de cómo se hace esa mezcla que resulta realmente útil para hacer Playground documentados u otros interactivos que permiten interaccionar con nuestro código.

Y con esto acabamos esta primera entrega que nos permite empezar a ver y probar como funcionan los Playground. Saber qué son exactamente, en qué se basan y conocer como son, sin duda, una manera ideal de trabajar. Seguiremos en próximas entregas viendo en profundidad más funciones para sacar el máximo partido y hasta entonces, como siempre Good Apple Coding.

Acerca de Julio César Fernández

Analista, consultor y periodista tecnológico, desarrollador, empresario, productor audiovisual, actor de doblaje e ingeniero de vídeo y audio.

Otras recomendaciones

ARKit

Analizando ARKit

Realizamos un análisis de ARKit, sus posibilidades, cómo funciona y lo comparamos con las Microsoft Hololens para ver el alcance de sus posibilidades. Un análisis en detalle incluyendo algunas pruebas en vídeo que hemos realizado mientras preparamos el curso de ARKit en Apple Coding Academy que verá la luz en septiembre, una vez tengamos versión final de esta interesante plataforma.