Cómo hacer algo con Swift Playgrounds

Programación

Hace solo unos días, terminé la presentación de mi beca WWDC 2018. Fue muy divertido crear a Alice en codeLand. Este fue mi primer año solicitando becas de la WWDC, ¡y espero entrar!

Alice in codeLand es tres en uno. Es un simulador de hacker / codificación que se parece al terminal de Mac OS con el que puedes jugar sin conexión. También es una historia divertida de un hacker llamado Alice que intentó obtener acceso no autorizado al portal WWDC de Apple después de tener éxito en hackear toothtube.com (una plataforma para compartir videos para reseñas de pasta de dientes) y macaroonsarethebest.com (una plataforma social para amantes de los macarrones como yo) . Y finalmente, es una demostración técnica de inyecciones de SQL (una técnica de piratería) para que las personas aprendan sobre la seguridad de la información y el proceso paso a paso para las inyecciones de SQL después de descubrir si un sitio web es vulnerable o no.

Desde 2017, Apple ha presentado el desafío a los solicitantes de becas de crear una experiencia interactiva en Swift Playgrounds.

Cuando comencé, estaba bastante confundido. Nunca antes había hecho nada en Playgrounds, ya que siempre he trabajado con proyectos de Xcode (que te permiten crear las aplicaciones de iOS reales). Solo había usado Playgrounds cuando comencé a aprender Swift para aprender y codificar conceptos básicos de programación. Los instructores de mis cursos en línea lo estaban usando, pero esos cursos solo duraban dos semanas y nunca creé ningún gráfico o animación en ellos.

Así que me llevó un tiempo familiarizarme con Playgrounds. En retrospectiva, podría haber ahorrado la mitad del tiempo si hubiera sabido dónde buscar las respuestas correctas y cómo empezar a trabajar con ellas.

Entonces, esta publicación es para todos los futuros solicitantes de becas de la WWDC, porque parece que Apple continuará asignando esta tarea para la beca todos los años. Incluso si no tiene nada que ver con las becas de la WWDC, creo que Swift Playgrounds es una herramienta increíble para construir y crear prototipos de algo rápidamente.

Nota: Esta publicación asume que tiene experiencia en Swift y frameworks iOS como UIKit. Si ha creado aplicaciones de iOS antes, ¡sería una gran ventaja!

¡Empecemos!

Entonces, ¿qué son Swift Playgrounds y por qué molestarse?

Swift Playgrounds es una aplicación para iPad presentada por Apple en 2014 que te ayuda a aprender a codificar en Swift. También es una herramienta en Xcode para crear áreas de juegos. Puede ejecutar Playgrounds creados en Xcode en un iPad y viceversa.

La diferencia entre la aplicación para iPad y la herramienta Xcode es que en el iPad, los parques infantiles que cree pueden acceder a funciones como la cámara, la pantalla táctil, etc. Pero mientras ejecuta un patio de juegos en Xcode, no puede hacer eso. Más sobre Swift Playgrounds aquí.

Si bien los conceptos y ejemplos de esta publicación usan Xcode, Playgrounds también se puede crear y ejecutar en la aplicación para iPad.

Algunos conceptos para aprender

1. Cómo ejecutar Playgrounds y cómo empezar a utilizarlos

Puede descargar Playgrounds de código abierto aquí, aquí y aquí. Para reproducirlos, haga clic en Editor asistente en Xcode y seleccione "Vista en vivo" si no está seleccionado automáticamente.

Una vista en vivo es donde se muestran la salida o los resultados de su código. Cuando crea algún objeto en su código que desea que se muestre en la vista en vivo, debe asignar la propiedad Vista en vivo de la página Patio de juegos a ese objeto.

Ahora, aquí está el código para asignar la propiedad Live View de Playground Page a un objeto UIView. También puede asignar una clase o un controlador de vista.

Tendría que importar el marco PlaygroundSupport para eso, y también UIKit.

let view = UIView(frame: CGRect(x: 0, y:0, width: 1024, height: 768)
PlaygroundPage.current.live = view

En el panel de navegación, verá que hay dos carpetas: Fuentes (para todo el código auxiliar) y Recursos (para todos los recursos de imagen y audio).

Según mi experiencia, arrastrar un archivo Swift desde la biblioteca de objetos no funciona en Playgrounds por alguna razón. En su lugar, haga clic con el botón derecho en la carpeta Fuentes y haga clic en "Nuevo archivo" para crear un nuevo archivo Swift.

2. ¿Cómo se crea una vista?

Los parques infantiles no tienen guiones gráficos. Puede crear una vista (UIView) de cualquier tamaño (máx. 1024 x 768) mediante programación.

Creé uno en el ejemplo anterior.

3. ¿Qué es PlaygroundSupport?

PlaygroundSupport es un marco para hacer cosas como acceder a una página de juegos y administrar su ejecución, administrar vistas en vivo y compartir y acceder a datos persistentes.

Básicamente, debe importar este marco para poder asignar la propiedad de vista en vivo de la página del patio de recreo a un objeto que creó.

4. Creación de documentación enriquecida con marcado

Swift Playgrounds le permite crear documentación hermosa (que es más fácil de leer que los comentarios regulares) usando un lenguaje llamado Markup.

La sintaxis básica de Markup para documentación enriquecida es la siguiente:

  1. Use "//: cosas" para comentarios individuales, que si se da cuenta, significa solo un ":" adicional después de // (que se usa para comentarios regulares).
  2. Utilice "/ *: cosas * /" para comentarios de varias líneas.
  3. Prefije una línea con un hashtag, por ejemplo, "#stuff" para crear un encabezado.
  4. Envuelva el texto dentro de un asterisco, por ejemplo, "* cosas *" para mostrar en cursiva.
  5. Envuelva el texto dentro de dos asteriscos, por ejemplo, "** cosas **" para que se muestre en negrita.

Una vez que haya escrito el contenido en la sintaxis, estará en formato de marcado sin formato. Y para mostrarlo en el formato de marcado renderizado (la verdadera documentación enriquecida), vaya al Editor y, en "Configuración del patio de juegos", seleccione "Renderizar documentación".

Lea más sobre Markup aquí.

Comenzando construyendo un patio de juegos simple

Muy bien, ensuciemos nuestras manos escribiendo código. ¡Creemos un simulador de hackers como hackertyper.com! :-RE

Let’s start with creating our background for the hacker simulator. Then using the shouldChangeTextIn method, we’ll change the text displayed in the text view to strings from an array with the code we want to be displayed when the user enters any text. This essentially creates a hacker simulator that makes code appear on the screen after pressing any keys.

import PlaygroundSupportimport UIKit
let arrayOfStrings = ["Alices-MacBook-Pro:~ Alice$", "override func viewDidLoad() {", "super.viewDidLoad()", "makeBackgroundGradient()", "addGradientToPortfolio()", "addGradientToTopBar()", "addGradientToTopBar()", "setupPopup()", "addTradeButton.titleLabel?.minimumScaleFactor = 0.5;", "addTradeButton.titleLabel?.minimumScaleFactor = 0.5;"]
var variableThatChanges : Int = 0
let frameOfMainView = CGRect(x: 0, y: 0, width: 1024, height: 768)
class MainViewController: UIViewController, UITextViewDelegate {
override func viewDidLoad() {
let view = UITextView(frame: CGRect(x: 0, y:0, width: 1024, height: 768))
self.view.frame = frameOfMainViewview.backgroundColor = .blackview.textColor = .greenview.font = UIFont(name: "Courier", size: 20)view.isEditable = trueview.delegate = self self.view.addSubview(view)
} 
func textView(_ textView: UITextView,
shouldChangeTextIn range: NSRange,
replacementText text: String) -> Bool {
if variableThatChanges == (arrayOfStrings.count - 1)
{
variableThatChanges = 0
}
let text = textView.text ?? ""
textView.text = text + "\n" + arrayOfStrings[variableThatChanges]
variableThatChanges += 1
return false
}
}
let master = MainViewController()
master.preferredContentSize = frameOfMainView.size
PlaygroundPage.current.liveView = master

Here’s the code above. Copy-paste it in a Playground. Run the live view, and you’ll see a black background. Click anywhere on the background, and you’ll see a keyboard pop out in the UI. Press any keys on it and it’ll show you the code from the strings.

There you go — you’ve made a basic hacker simulator in under 50 lines of code! Now it’s your turn to go get creative with Playgrounds! ;)

Some awesome resources to check out to learn more

  1. Apple documentation.
  2. WWDC session videos. Check out this, this, this, and this, in that order.
  3. Playgrounds in depth at RWDevCon 2017.
  4. The Kaseys video
  5. Code tutsplus tutorial
  6. WWDC 2017 and WWDC 2018 submissions. Also, awesome Swift Playgrounds to check out and get ideas from.
  7. A short chapter from a great book.

That’s it for now! Follow me on Medium or Twitter. Download an app I created! Check out an awesome startup I’m advising! :)