Sådan laver du noget med Swift Playgrounds

For bare et par dage siden afsluttede jeg min WWDC 2018-stipendieindlevering. Det var så sjovt at skabe Alice i codeLand. Dette var mit første år, hvor jeg ansøgte om WWDC-stipendier, og jeg håber at komme ind!

Alice in codeLand er en tre-i-en. Det er en hacker / kodningssimulator, der ligner Mac OS-terminalen, som du kan spille med offline. Det er også en sjov historie om en hacker ved navn Alice, der forsøgte at få uautoriseret adgang til Apples WWDC-portal efter at have lykkedes at hacke sig ind i toothtube.com (en videodelingsplatform til tandpastevurderinger) og macaroonsarethebest.com (en social platform for makronelskere som mig selv) . Og endelig er det en teknisk demonstration af SQL-injektioner (en hackingteknik) for folk at lære om informationssikkerhed og den trinvise proces til SQL-injektioner efter at have fundet ud af, om et websted er sårbart eller ej.

Siden 2017 har Apple fremsat udfordringen til stipendiatansøgere om at skabe en interaktiv oplevelse i Swift Playgrounds.

Da jeg startede, var jeg temmelig forvirret. Jeg havde aldrig lavet en ting i Playgrounds før, da jeg altid har arbejdet med Xcode-projekter (som giver dig mulighed for at oprette de rigtige iOS-apps). Jeg havde kun brugt Playgrounds, da jeg begyndte at lære Swift at lære og kode grundlæggende programmeringskoncepter. Instruktørerne i mine online-kurser brugte det, men disse kurser var kun to uger lange, og jeg oprettede aldrig nogen grafik eller animationer i dem.

Så det tog lidt tid at blive fortrolig med Playgrounds. Efterhånden kunne jeg have sparet halvdelen af ​​tiden, hvis jeg havde vidst, hvor jeg skulle lede efter de rigtige svar, og hvordan jeg kunne komme i gang med dem.

Så dette indlæg er til alle fremtidige WWDC-stipendiatansøgere, fordi det ser ud til, at Apple fortsat vil give denne opgave til stipendiet hvert år. Selvom du ikke har noget at gøre med WWDC-stipendier, synes jeg Swift Playgrounds er et fantastisk værktøj til hurtigt at opbygge og prototype noget.

Bemærk: Dette indlæg antager, at du har en baggrund i Swift- og iOS-rammer som UIKit. Hvis du har bygget iOS-apps før, ville det være en kæmpe bonus!

Lad os begynde!

Så hvad er Swift Playgrounds, og hvorfor gider det?

Swift Playgrounds er en iPad-app, der blev introduceret af Apple i 2014, der hjælper dig med at lære at kode i Swift. Det er også et værktøj i Xcode til at oprette legepladser. Du kan køre Legepladser oprettet i Xcode på en iPad og omvendt.

Forskellen mellem iPad-appen og Xcode-værktøjet er, at de legepladser, du opretter på iPad, kan få adgang til funktioner som kameraet, berøringsskærm og så videre. Men mens du kører en legeplads på Xcode, kan du ikke gøre det. Mere om Swift Playgrounds her.

Mens begreberne og eksemplerne i dette indlæg bruger Xcode, kan Playgrounds også oprettes og køres på iPad-appen.

Nogle begreber at lære

1. Sådan kører / spiller du legepladser og kommer i gang med dem

Du kan downloade legepladser med open source her, her og her. For at spille dem skal du klikke på Assistant Editor i Xcode og vælge "Live View", hvis den ikke automatisk vælges.

En livevisning er, hvor output eller resultaterne af din kode vises. Når du opretter et objekt i din kode, som du vil have vist i livevisningen, skal du tildele egenskaben Live View på Playground-siden til det objekt.

Her er koden til at tildele egenskaben Live View på Playground Page til et UIView-objekt. Du kan også tildele enten en klasse eller en visningscontroller.

Du bliver nødt til at importere rammen PlaygroundSupport til det og UIKit også.

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

I navigationsruden kan du se, at der er to mapper: Kilder (for al hjælpekode) og Ressourcer (for alle billed- og lydaktiver).

Fra min erfaring fungerer det ikke af en eller anden grund at trække en Swift-fil fra objektbiblioteket. Højreklik i stedet på mappen Kilder og klik på "Ny fil" for at oprette en ny Swift-fil.

2. Hvordan opretter du en visning?

Legepladser har ikke Storyboards. Du kan oprette en visning (UIView) af enhver størrelse (maks. 1024 x 768) programmatisk.

Jeg oprettede en i eksemplet ovenfor.

3. Hvad er PlaygroundSupport?

PlaygroundSupport er en ramme for at gøre ting som at få adgang til en legepladside og styre dens udførelse, administrere live visninger og dele og få adgang til vedvarende data.

Dybest set skal du importere denne ramme for at være i stand til at tildele ejendommen til livevisning af legepladsiden til et objekt, du oprettede.

4. Oprettelse af rig dokumentation med markup

Swift Playgrounds giver dig mulighed for at oprette smuk dokumentation (der er lettere at læse end de almindelige kommentarer) ved hjælp af et sprog kaldet Markup.

Den grundlæggende syntaks for Markup for rig dokumentation er som følger:

  1. Brug “//: stuff” til enkeltkommentarer, som, hvis du bemærker det, kun betyder et ekstra “:” efter // (som bruges til regelmæssige kommentarer).
  2. Brug “/ *: stuff * /” til kommentarer med flere linjer.
  3. Præfiks en linje med et hashtag, for eksempel "#stuff" for at oprette en overskrift.
  4. Indpak tekst i en stjerne, for eksempel "* ting *" for at blive vist i kursiv.
  5. Indpak tekst i to stjerner, for eksempel "** ting **" for at blive vist med fed skrift.

Når du har skrevet indholdet i syntaksen, er det i rå markup-format. Og for at få det vist i det gengivne markeringsformat (den rigtige rige dokumentation) skal du gå til redaktøren, og under "Legepladsindstillinger" skal du vælge "Rendér dokumentation."

Læs mere om Markup her.

Kom godt i gang med at bygge en simpel legeplads

Okay, lad os få vores hænder beskidte ved at skrive noget kode! Lad os oprette en hacksimulator som hackertyper.com! :-D

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 videoer. Tjek dette, dette, dette og dette, i den rækkefølge.
  3. Legepladser i dybden på RWDevCon 2017.
  4. Kaseys-videoen
  5. Kode tutsplus tutorial
  6. WWDC 2017 og WWDC 2018 indsendelser. Også fantastiske Swift Playgrounds at tjekke ud og få ideer fra.
  7. Et kort kapitel fra en fantastisk bog.

Det er det for nu! Følg mig på Medium eller Twitter. Download en app, jeg oprettede! Tjek en fantastisk start, jeg rådgiver! :)