Kako napraviti nešto s Swift igralištima

Prije samo nekoliko dana završio sam prijavu za stipendiju za WWDC 2018. Bilo je toliko zabavno stvarati Alice u codeLandu. Ovo je bila moja prva godina prijavljivanja za WWDC stipendije i nadam se da ću ući!

Alice u codeLandu tri je u jednom. Riječ je o simulatoru hakera / kodiranja koji izgleda poput Mac OS terminala s kojim se možete igrati izvan mreže. To je također smiješna priča o hakeru po imenu Alice koji je pokušao neovlašteno pristupiti Appleovom portalu WWDC nakon što je uspio provaliti na toothtube.com (platforma za razmjenu videozapisa za recenzije paste za zube) i macaroonsarethebest.com (društvena platforma za ljubitelje makarana poput mene) . I na kraju, to je tehnička demonstracija SQL injekcija (tehnika hakiranja) kako bi ljudi naučili o informacijskoj sigurnosti i postupnom postupku za SQL injekcije nakon što saznaju je li web mjesto ranjivo ili nije.

Od 2017. Apple postavlja zahtjev za stipendije izazov stvaranja interaktivnog iskustva na Swift Playgrounds.

Kad sam započeo, bio sam prilično zbunjen. Nikad prije nisam napravio ništa na Playgroundsima, jer sam uvijek radio s Xcode projektima (koji vam omogućuju stvaranje stvarnih iOS aplikacija). Igrališta sam koristio tek kad sam počeo učiti Swift za učenje i kodiranje osnovnih programskih koncepata. Instruktori na mojim internetskim tečajevima su ga koristili, ali ti su tečajevi trajali samo dva tjedna i nikada u njima nisam stvarao grafiku ili animaciju.

Zato je trebalo neko vrijeme da se upoznam s igralištima. Posmatrajući unatrag, mogao bih uštedjeti pola vremena da sam znao gdje tražiti prave odgovore i kako započeti s njima raditi.

Dakle, ovaj je post namijenjen svim budućim podnositeljima zahtjeva za stipendiju za WWDC, jer čini se da će Apple i dalje davati ovaj zadatak za stipendiju svake godine. Čak i ako nemate nikakve veze sa WWDC stipendijama, mislim da su Swift Playgrounds sjajan alat za brzu izgradnju i izradu prototipa.

Napomena: Ovaj post pretpostavlja da imate pozadinu u Swift i iOS okvirima poput UIKita. Ako ste već izgrađivali iOS aplikacije, to bi bio ogroman bonus!

Počnimo!

Pa što su Swift igrališta i zašto se truditi?

Swift Playgrounds je iPad aplikacija koju je Apple predstavio 2014. godine i pomaže vam naučiti kodirati u Swiftu. To je i alat u Xcodeu za stvaranje igrališta. Igrališta kreirana u Xcodeu možete pokretati na iPadu i obrnuto.

Razlika između aplikacije iPad i alata Xcode je u tome što na iPadu igrališta koja stvarate mogu pristupiti značajkama poput kamere, zaslona osjetljivog na dodir itd. No dok pokrećete igralište na Xcodeu, to ne možete učiniti. Više o Swift igralištima ovdje.

Iako koncepti i primjeri u ovom postu koriste Xcode, igrališta se mogu kreirati i pokretati i na iPad aplikaciji.

Neke pojmove za naučiti

1. Kako pokrenuti / igrati igrališta i započeti s njima

Igrališta s otvorenim izvorima možete preuzeti ovdje, ovdje i ovdje. Da biste ih reproducirali, kliknite Assistant Editor u Xcodeu i odaberite "Live View" ako nije automatski odabran.

Prikaz uživo je mjesto gdje se prikazuju izlazi ili rezultati vašeg koda. Kada u kodu izradite neki objekt koji želite da se prikazuje u prikazu uživo, tom objektu morate dodijeliti svojstvo prikaza uživo na stranici Igralište.

Sad je ovdje kod za dodjeljivanje svojstva Live View stranice igrališta UIView objektu. Također možete dodijeliti klasu ili kontroler prikaza.

Za to biste morali uvesti okvirnu PlaygroundSupport, a također i UIKit.

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

U navigacijskom oknu vidjet ćete dvije mape: Izvori (za sav pomoćni kôd) i Resursi (za sve slikovne i zvučne elemente).

Iz mog iskustva, povlačenje Swift datoteke iz biblioteke objekata iz nekog razloga ne funkcionira na igralištima. Umjesto toga, desnom tipkom miša kliknite mapu Izvori i kliknite na "Nova datoteka" da biste stvorili novu Swift datoteku.

2. Kako stvoriti pogled?

Igrališta nemaju Storyboards. Možete programski stvoriti prikaz (UIView) bilo koje veličine (maksimalno 1024 x 768).

Stvorio sam ga u gornjem primjeru.

3. Što je PlaygroundSupport?

PlaygroundSupport je okvir za radnje poput pristupa stranici igrališta i upravljanja njezinim izvršavanjem, upravljanja prikazima uživo te dijeljenja i pristupa trajnim podacima.

U osnovi, morate uvesti ovaj okvir da biste mogli dodijeliti svojstvo prikaza uživo stranice igrališta objektu koji ste stvorili.

4. Stvaranje bogate dokumentacije s oznakama

Swift Playgrounds omogućuje vam stvaranje lijepe dokumentacije (koja se lakše čita od uobičajenih komentara) pomoću jezika koji se naziva Označavanje.

Osnovna sintaksa za označavanje za obogaćenu dokumentaciju je sljedeća:

  1. Upotrijebite "//: stuff" za pojedinačne komentare, što ako primijetite, znači samo dodatni ":" nakon // (koji se koristi za redovite komentare).
  2. Upotrijebite “/ *: stuff * /” za višeredne komentare.
  3. Prefiksu dodajte redak s hashtagom, na primjer, "#stuff" da biste stvorili naslov.
  4. Zamotajte tekst u zvjezdicu, na primjer, "* stuff *" za prikaz kurzivom.
  5. Umotajte tekst u dvije zvjezdice, na primjer, "** stvari **" za prikaz podebljanim slovima.

Nakon što ste sadržaj napisali u sintaksi, on je u neobrađenom formatu označavanja. A da biste ga prikazali u prikazanom formatu označavanja (prava bogata dokumentacija), idite u uređivač i u odjeljku "Postavke igrališta" odaberite "Render Documentation".

Pročitajte više o označavanju ovdje.

Početak gradnje jednostavnog igrališta

U redu, uprljajmo ruke tako što ćemo napisati neki kod! Stvorimo hakerski simulator poput 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 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! :)