Home » Guías » Guía de los playground en Xcode 6.3 y Swift 1.2
Banner New Playground

Guía de los playground en Xcode 6.3 y Swift 1.2

Los playground son una de las grandes incorporaciones de Xcode 6, como ya vimos en la guía básica de los Playgrounds que publicamos hace meses. Son una herramienta de prototipado esencial, así como un entorno idóneo para el aprendizaje y práctica de Swift.

Pero ahora, con el lanzamiento de iOS 8.3 y de Xcode 6.3, Apple ha presentado un nuevo formato para los playground con una serie de incorporaciones más que interesantes para crear muchos más conceptos dentro de los mismos. Básicamente, ahora podemos crear ficheros playground que hagan las veces de mini proyectos y trabajar con uno o varios ficheros de recursos o código auxiliar.

Primeros pasos

Abrimos Xcode 6.3 y pulsamos en Get started with a playground o File -> New -> Playground. Le damos un nombre, selecionamos iOS como la tecnología que queremos usar y ya está abierto. Aparentemente no hay nada nuevo.

New Playgrounds

Mismas tres líneas que hemos visto infinidad de veces. Pero vamos a empezar a hacer algunos cambios al entorno. Lo primero, vamos a View -> Navigators -> Show Project Navigator o pulsamos CMD + 1.

New Playgrounds 02

Primer cambio: estructura de carpetas a la izquierda como si fuera un proyecto. Tenemos dos carpetas a destacar: Sources y Resources. En la primera vemos que existe un fichero llamado SupportCode.swift, que nos permitirá incluir código de soporte como clases, funciones, enumeraciones, variables o cualquier otra cosa que queramos que el playground use, pero no queremos que esté “en medio” del código que usemos.

De hecho, en esta carpeta podremos incluir tantos ficheros .swift como queramos, no tiene por qué estar todo en SupportCode.swift, y todo su contenido (como sucede en un proyecto normal) estará disponible para el playground y para el resto de ficheros dentro de Sources. Esto se debe a que al incorporar ficheros en esta ruta y volver al playground, el sistema generará un framework que usará en todo el proyecto playground.

La otra carpeta es Resources, que en principio está en gris ya que está vacía, y cuyo cometido es albergar cualquier imagen, fichero o recurso que queramos incluir para que pueda ser usado por el playground. Si añadimos una imagen, por ejemplo, con solo invocar su nombre al cargarlo, el sistema la reconocerá sin problema.

Ahora vamos a Editor -> Show Rendered Markup. De pronto el mensaje que ya conocemos de cabecera (que si hemos notado tiene una sutil diferencia con el que normalmente hemos visto en los playground) se transforma.

La línea superior que vemos tiene un inicio //: en vez de solo // como sería habitual se convierte en esto:

New Playgrounds 03

Ahora no podemos editar el contenido del comentario y ha tomado una apariencia mucho más elegante. Como de artículo o capítulo interactivo de un libro vivo donde directamente podemos tocar los ejemplos del mismo.

Haciendo una prueba

Vamos a coger nuestro famoso Spaceship.png que forma parte del proyecto de base de SpriteKit y vamos a arrastrarlo a Resources. Y ahora vamos a modificar la variable para que sea una UIImage de la siguiente forma.

Lo que nos aparece a la derecha son dos valores de anchura y altura de la imagen (w 394 h 347). Si nos vamos a la derecha de este valor y pulsamos el pequeño botón del ojo para vista rápida (quick look) veremos que nos muestra la nave. Pero vamos a pulsar en el botón de al lado, el blanco que se convierte en un símbolo + (show result).

New Playgrounds 04

Ya tenemos nuestro avión en pantalla, pero este se ha situado debajo de la línea que lo invoca. Si hacemos un bucle, por ejemplo, podremos ver la gráfica de su progresión o la secuencia de resultados, también debajo.

Ahora vamos a aplicarle un pequeño filtro de imagen, para dejarlo en color sepia. De esta forma veremos la diferencia, bajo línea, entre la imagen original y la procesada.

Si pulsamos el + en la última línea del ejemplo, veremos cómo se ha aplicado el filtro a nuestra imagen y se muestra diferente, todo en tiempo real. Incluso si jugamos con el valor 0.7 y ponemos otro, veremos el cambio.

Ejemplo Playground

Vamos a crear también una progresión de una variable para ver la gráfica correspondiente y descubriremos como ahora podemos acceder a más información.

Ejemplo de playground

Pulsamos el + en la línea de contador += i y veremos la gráfica y cómo tres botones en la parte superior derecha nos permitirán cambiar entre la gráfica, el valor actual o la secuencia de valores.

De esta forma, podemos explorar los valores que obtengamos de una instrucción dentro de un bucle, y tendremos los datos de análisis en línea con la instrucción que lo genera. Así es como se consigue lo que playground pretende ser como fichero: una mezcla de documentación y código en tiempo real, que pueda servir tanto para prototipado como para enseñanza.

Documentando el playground

La forma de realizar estos playground interactivos, es utilizando la conocida notación markdown, antecediendo a cada línea el indicador de comentario seguido de dos puntos.

Para cada una de las líneas que usemos, incluidas aquellas que queramos que queden en blanco, hemos de usar este símbolo que indica al editor de playground que estamos trabajando con líneas de documentación.

Dentro de estas, solo necesitamos usar la notación normal de markdown, cuyos elementos más básicos son los siguientes:

Para que os sirva como ejemplo vamos a ver el código completo de un ejemplo de playground, donde no debéis olvidar incluir el archivo Spaceship.png a la carpeta Resources para que funcione:

Una vez escrito, nos vamos al menú Editor y pulsamos en Show Rendered Markup. Veremos que no se nos muestra ningún resultado, así que pulsamos en el + a la derecha de las líneas que cargan la imagen, que crean la variable resultado y que hacen la operación contador += i.

Si queremos cambiar cualquier cosa, volvemos a Editor, pulsamos en la opción que ha sustituido a la que hemos dado antes Show Raw Markup y cambiamos lo que queramos.

Resumiendo

Hemos visto como los nuevos playground se han convertido en pequeños proyectos que nos permiten gran versatilidad a la hora de trabajar y probar nuestro código, así como documentar y crear nuestros playground interactivos. Podéis echarle un vistazo a algunos ejemplos que tiene Apple en el blog de Swift y que puede descargarse cualquiera y que tenéis al final del artículo.

Recordad: probad, re-intentar y explorar… es la mejor manera de aprender. Hasta la próxima y Good Apple Coding.

Demo #1 Nuevo Formato Playground | Enlace de descarga
Demo del Conjunto de Mandelbrot | Enlace de descarga

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

UISearchBar

Lecciones por prototipos (III): barras de búsqueda (UISearchBar)

Descubre lo simple que es crear una barra de búsqueda para una vista de tabla, siguiendo paso a paso el proceso mediante un Playground interactivo. Veremos cómo implementarla, controlarla y reaccionar en tiempo real a sus resultados. Algo que no debe faltar en ninguna tabla o elemento que muestre muchos datos, para filtrarlos adecuadamente.