Wie man mit Swift Playgrounds etwas macht

Vor ein paar Tagen habe ich meine Stipendieneinreichung für das WWDC 2018 abgeschlossen. Es hat so viel Spaß gemacht, Alice in CodeLand zu erstellen. Dies war mein erstes Jahr, als ich mich für ein WWDC-Stipendium bewarb, und ich hoffe, dass ich dabei sein kann!

Alice in CodeLand ist ein Drei-in-Eins. Es ist ein Hacker- / Codierungssimulator, der dem Mac OS-Terminal ähnelt, mit dem Sie offline spielen können. Es ist auch eine lustige Geschichte eines Hackers namens Alice, der versucht hat, unbefugten Zugriff auf das WWDC-Portal von Apple zu erlangen, nachdem er sich erfolgreich in toothtube.com (eine Plattform für die gemeinsame Nutzung von Videos für Zahnpasta-Rezensionen) und macaroonsarethebest.com (eine soziale Plattform für Makronenliebhaber wie mich) gehackt hat. . Und schließlich ist es eine technische Demonstration von SQL-Injections (eine Hacking-Technik), mit der sich die Benutzer über Informationssicherheit und den schrittweisen Prozess für SQL-Injections informieren können, nachdem sie herausgefunden haben, ob eine Website anfällig ist oder nicht.

Seit 2017 fordert Apple Stipendiaten dazu auf, auf Swift Playgrounds ein interaktives Erlebnis zu schaffen.

Als ich anfing, war ich ziemlich verwirrt. Ich habe noch nie etwas in Playgrounds gemacht, da ich immer mit Xcode-Projekten gearbeitet habe (mit denen Sie echte iOS-Apps erstellen können). Ich hatte Playgrounds erst benutzt, als ich anfing, Swift zu lernen und grundlegende Programmierkonzepte zu programmieren. Die Kursleiter in meinen Online-Kursen verwendeten es, aber diese Kurse dauerten nur zwei Wochen, und ich habe keine Grafiken oder Animationen in ihnen erstellt.

Es dauerte einige Zeit, bis ich mich mit Playgrounds vertraut gemacht hatte. Im Nachhinein hätte ich mir die Hälfte der Zeit sparen können, wenn ich gewusst hätte, wo ich nach den richtigen Antworten suchen und wie ich anfangen kann, mit ihnen zu arbeiten.

Diese Stelle richtet sich also an alle zukünftigen WWDC-Stipendiaten, da Apple diese Aufgabe anscheinend weiterhin jedes Jahr für das Stipendium übernehmen wird. Auch wenn Sie nichts mit WWDC-Stipendien zu tun haben, denke ich, dass Swift Playgrounds ein großartiges Werkzeug ist, um schnell etwas zu bauen und Prototypen zu erstellen.

Hinweis: In diesem Beitrag wird davon ausgegangen, dass Sie über einen Hintergrund in Swift- und iOS-Frameworks wie UIKit verfügen. Wenn Sie bereits iOS-Apps erstellt haben, ist dies ein großer Bonus!

Lasst uns beginnen!

Was sind Swift Playgrounds und warum?

Swift Playgrounds ist eine iPad-App, die 2014 von Apple eingeführt wurde und mit der Sie lernen, wie man in Swift codiert. Es ist auch ein Tool in Xcode zum Erstellen von Spielplätzen. Sie können in Xcode erstellte Spielplätze auf einem iPad ausführen und umgekehrt.

Der Unterschied zwischen der iPad-App und dem Xcode-Tool besteht darin, dass die von Ihnen erstellten Spielplätze auf dem iPad auf Funktionen wie Kamera, Touchscreen usw. zugreifen können. Wenn Sie jedoch einen Spielplatz auf Xcode ausführen, können Sie dies nicht tun. Mehr über Swift Playgrounds hier.

Während die Konzepte und Beispiele in diesem Beitrag Xcode verwenden, können die Spielplätze auch auf der iPad-App erstellt und ausgeführt werden.

Einige Konzepte zum Lernen

1. Wie man Spielplätze laufen lässt / spielt und wie man damit anfängt

Sie können Open-Source-Spielplätze hier, hier und hier herunterladen. Um sie abzuspielen, klicken Sie in Xcode auf den Assistenten-Editor und wählen Sie die "Live-Ansicht" aus, falls diese nicht automatisch ausgewählt wird.

In einer Live-Ansicht werden die Ausgabe oder die Ergebnisse Ihres Codes angezeigt. Wenn Sie in Ihrem Code ein Objekt erstellen, das in der Live-Ansicht angezeigt werden soll, müssen Sie diesem Objekt die Eigenschaft Live-Ansicht auf der Spielplatzseite zuweisen.

Alice in der Live-Ansicht von codeLand

Hier ist der Code zum Zuweisen der Live View-Eigenschaft der Playground Page zu einem UIView-Objekt. Sie können auch entweder eine Klasse oder einen View-Controller zuweisen.

Dazu müssen Sie das Framework PlaygroundSupport und UIKit importieren.

let view = UIView (Rahmen: CGRect (x: 0, y: 0, Breite: 1024, Höhe: 768)
PlaygroundPage.current.live = Ansicht

Im Navigationsbereich werden zwei Ordner angezeigt: Quellen (für den gesamten Zusatzcode) und Ressourcen (für alle Bild- und Audio-Assets).

Aus meiner Erfahrung funktioniert das Ziehen einer Swift-Datei aus der Objektbibliothek in Playgrounds aus irgendeinem Grund nicht. Klicken Sie stattdessen mit der rechten Maustaste auf den Ordner Sources und klicken Sie auf New file (Neue Datei), um eine neue Swift-Datei zu erstellen.

2. Wie erstellen Sie eine Ansicht?

Spielplätze haben keine Storyboards. Sie können programmgesteuert eine Ansicht (UIView) beliebiger Größe (max. 1024 x 768) erstellen.

Ich habe im obigen Beispiel eine erstellt.

3. Was ist PlaygroundSupport?

PlaygroundSupport ist ein Framework, mit dem Sie beispielsweise auf eine Spielplatzseite zugreifen und deren Ausführung verwalten, Live-Ansichten verwalten sowie persistente Daten freigeben und auf diese zugreifen können.

Grundsätzlich müssen Sie dieses Framework importieren, um die Live-View-Eigenschaft der Spielplatzseite einem von Ihnen erstellten Objekt zuweisen zu können.

4. Erstellen einer umfangreichen Dokumentation mit Markup

Mit Swift Playgrounds können Sie mit einer Sprache namens Markup eine ansprechende Dokumentation erstellen (die einfacher zu lesen ist als die regulären Kommentare).

Die grundlegende Syntax für Markup für umfangreiche Dokumentationen lautet wie folgt:

  1. Verwenden Sie "//: stuff" für einzelne Kommentare. Wenn Sie dies bemerken, bedeutet dies nur ein zusätzliches ":" nach dem "//" (das für reguläre Kommentare verwendet wird).
  2. Verwenden Sie "/ *: stuff * /" für mehrzeilige Kommentare.
  3. Stellen Sie einer Zeile ein Hashtag voran, z. B. "#stuff", um eine Überschrift zu erstellen.
  4. Brechen Sie Text in ein Sternchen, z. B. "* stuff *", um ihn kursiv anzuzeigen.
  5. Setzen Sie den Text in zwei Sternchen, z. B. "** stuff **", um ihn fett anzuzeigen.

Nachdem Sie den Inhalt in der Syntax geschrieben haben, wird er im unformatierten Markup-Format angezeigt. Rufen Sie den Editor auf, und wählen Sie unter "Spielplatzeinstellungen" die Option "Dokumentation rendern" aus, um sie im gerenderten Markup-Format (der wirklich umfangreichen Dokumentation) anzuzeigen.

Beispiel für ein unformatiertes Markup-FormatGerenderte Dokumentation

Weitere Informationen zu Markup finden Sie hier.

Erstellen Sie zunächst einen einfachen Spielplatz

Okay, lass uns die Hände schmutzig machen, indem wir Code schreiben! Erstellen wir einen Hacker-Simulator wie hackertyper.com! :-D

Beginnen wir mit der Erstellung unseres Hintergrunds für den Hacker-Simulator. Anschließend ändern wir mit der shouldChangeTextIn-Methode den in der Textansicht angezeigten Text in Zeichenfolgen aus einem Array mit dem Code, der angezeigt werden soll, wenn der Benutzer Text eingibt. Dadurch wird im Wesentlichen ein Hackersimulator erstellt, der nach dem Drücken einer beliebigen Taste Code auf dem Bildschirm anzeigt.

PlaygroundSupport importieren
UIKit importieren
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, Breite: 1024, Höhe: 768)
Klasse MainViewController: UIViewController, UITextViewDelegate {
Überschreibe func viewDidLoad () {
let view = UITextView (Rahmen: CGRect (x: 0, y: 0, Breite: 1024, Höhe: 768))
self.view.frame = frameOfMainView
view.backgroundColor = .black
view.textColor = .green
view.font = UIFont (Name: "Courier", Größe: 20)
view.isEditable = true
view.delegate = self
self.view.addSubview (Ansicht)
}
func textView (_ textView: UITextView,
shouldChangeTextIn-Bereich: NSRange,
replacementText text: String) -> Bool {
if variableThatChanges == (arrayOfStrings.count - 1)
{
variableThatChanges = 0
}
let text = textView.text ?? ""
textView.text = text + "\ n" + arrayOfStrings [variableThatChanges]
variableThatChanges + = 1
falsch zurückgeben
}
}
let master = MainViewController ()
master.preferredContentSize = frameOfMainView.size
PlaygroundPage.current.liveView = master

Hier ist der obige Code. Kopieren Sie es in einen Spielplatz. Wenn Sie die Live-Ansicht ausführen, wird ein schwarzer Hintergrund angezeigt. Klicken Sie auf eine beliebige Stelle im Hintergrund. In der Benutzeroberfläche wird eine Tastatur eingeblendet. Drücken Sie eine beliebige Taste, um den Code aus den Zeichenfolgen anzuzeigen.

Sie haben einen einfachen Hacker-Simulator mit weniger als 50 Codezeilen erstellt. Jetzt sind Sie an der Reihe, mit Playgrounds kreativ zu werden! ;)

Einige großartige Ressourcen zum Auschecken, um mehr zu erfahren

  1. Apple-Dokumentation.
  2. WWDC-Sitzungsvideos. Schauen Sie sich dies, das, das und das in dieser Reihenfolge an.
  3. Spielplätze im Detail auf der RWDevCon 2017.
  4. Das Kaseys-Video
  5. Code tutsplus Tutorial
  6. Einsendungen der WWDC 2017 und der WWDC 2018. Auch tolle Swift Playgrounds zum Auschecken und Ideen sammeln.
  7. Ein kurzes Kapitel aus einem tollen Buch.

Das war es fürs Erste! Folge mir auf Medium oder Twitter. Laden Sie eine App herunter, die ich erstellt habe! Schauen Sie sich ein großartiges Startup an, das ich rate! :)