Hogyan készítsünk valamit a Swift játszóterekkel

Néhány nappal ezelőtt befejeztem a WWDC 2018 ösztöndíj benyújtását. Nagyon szórakoztató volt Alice-t létrehozni a codeLand-ben. Ez volt az első évem a WWDC ösztöndíjakra, és remélem, hogy bejutok!

Alice a codeLandben három az egyben. Ez egy hacker / kódoló szimulátor, amely úgy néz ki, mint a Mac OS terminál, amellyel offline is játszhat. Ez egy vicces történet egy Alice nevű hackerről, aki megpróbálta illetéktelen hozzáférést szerezni az Apple WWDC portáljához, miután sikerült feltörnie a toothtube.com-ot (videómegosztó platform a fogkrémek áttekintéséhez) és a macaroonsarethebest.com-ot (közösségi platform a macaroon szerelmeseihez, mint én). . És végül, ez egy technikai bemutató az SQL-injekciókról (hackelési technika), hogy az emberek megismerjék az információbiztonságot és az SQL-injekciók lépésről-lépésre történő folyamatát, miután kiderítették, hogy egy webhely sebezhető-e vagy sem.

2017 óta az Apple kihívást jelent az ösztöndíjasok számára, hogy interaktív élményt teremtsenek a Swift Playgrounds területén.

Amikor elindultam, eléggé zavart voltam. Soha nem készítettem még semmit a Playgrounds-ban, mivel mindig dolgoztam Xcode-projektekkel (amelyek lehetővé teszik az igazi iOS-alkalmazások létrehozását). Csak akkor használtam Playgrounds-t, amikor elkezdtem a Swiftet megtanulni az alapvető programozási koncepciók megismerése és kódolása érdekében. Az online tanfolyamaim oktatói használták, de ezek a tanfolyamok csak két hétig tartottak, és soha nem készítettem rajtuk grafikát vagy animációt.

Szóval egy kis időbe telt, mire megismertük a Játszótéreket. Utólag megtakaríthattam volna az idő felét, ha tudtam, hol keressem a megfelelő válaszokat, és hogyan kezdjem el velük a munkát.

Tehát ez a bejegyzés a jövőbeli WWDC ösztöndíjasok számára szól, mert úgy tűnik, az Apple továbbra is évente adja ezt a feladatot az ösztöndíjért. Még ha semmi közöd sincs is a WWDC ösztöndíjaihoz, úgy gondolom, hogy a Swift Playgrounds fantasztikus eszköz valami gyors elkészítéséhez és prototípus készítéséhez.

Megjegyzés: Ez a bejegyzés feltételezi, hogy van olyan háttere a Swift és az iOS keretrendszereknek, mint az UIKit. Ha korábban épített már iOS-alkalmazásokat, az óriási bónusz lenne!

Kezdjük!

Mi tehát a Swift játszótér, és miért kell zavarni?

A Swift Playgrounds az Apple által 2014-ben bevezetett iPad alkalmazás, amely segít megtanulni a Swift kódolását. Ez az Xcode egy eszköze a Playgrounds létrehozásához is. Futtathatja az Xcode-ban létrehozott Playgroundokat iPad-en és fordítva.

A különbség az iPad alkalmazás és az Xcode eszköz között az, hogy az iPaden az Ön által létrehozott Játszóterek olyan funkciókhoz férhetnek hozzá, mint a kamera, az érintőképernyő stb. De miközben Playgroundot működtetsz Xcode-on, ezt nem teheted meg. További információ a Swift játszóterekről itt.

Míg a bejegyzésben szereplő fogalmak és példák Xcode-ot használnak, a Playgrounds létrehozható és futtatható az iPad alkalmazáson is.

Néhány tanulandó fogalom

1. Hogyan kell játszani / játszani a játszótereket, és hogyan kell velük kezdeni

A nyílt forráskódú játszótereket letöltheti itt, itt és itt. A lejátszáshoz kattintson az Segédszerkesztőre az Xcode-ban, és válassza ki az „Élő nézet” lehetőséget, ha az nincs automatikusan kiválasztva.

Élő nézetben a kód kimenete vagy eredményei jelennek meg. Amikor létrehoz egy olyan objektumot a kódjában, amelyet meg akar jeleníteni az élő nézetben, hozzá kell rendelnie a Játszótér oldal Élő nézet tulajdonságát ehhez az objektumhoz.

Most itt van a kód, amely a Játszótér Oldal Élő nézet tulajdonságát hozzárendeli egy UIView objektumhoz. Rendelhet osztályt vagy nézetvezérlőt is.

Ehhez importálnia kell a PlaygroundSupport keretrendszert és az UIKit is.

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

A navigációs panelen két mappa látható: Források (az összes kiegészítő kódhoz) és az Erőforrások (az összes kép- és hangeszközhöz).

Tapasztalatom szerint valamilyen oknál fogva nem működik a Swift fájl húzása az Object könyvtárból a Playgroundsban. Ehelyett kattintson a jobb gombbal a Források mappára, majd kattintson az „Új fájl” elemre egy új Swift fájl létrehozásához.

2. Hogyan hozhat létre nézetet?

A játszótereken nincsenek Storyboards. Bármilyen méretű (legfeljebb 1024 x 768) nézetet (UIView) programozottan létrehozhat.

A fenti példában hoztam létre egyet.

3. Mi az a PlaygroundSupport?

A PlaygroundSupport egy olyan keretrendszer, amely lehetővé teszi például a játszótér oldalának elérését és annak végrehajtásának kezelését, az élő nézetek kezelését, valamint a tartós adatok megosztását és elérését.

Alapvetően ezt a keretrendszert kell importálnia ahhoz, hogy a játszótér oldal élő nézet tulajdonságát hozzárendelhesse egy létrehozott objektumhoz.

4. Gazdag dokumentáció készítése a jelöléssel

A Swift Playgrounds segítségével gyönyörű dokumentumokat készíthet (amelyek könnyebben olvashatók, mint a szokásos megjegyzések) a Markup nevű nyelv segítségével.

A Markup for rich dokumentáció alapvető szintaxisa a következő:

  1. Használja a „//: stuff” elemeket az egyes megjegyzésekhez, ami, ha észreveszi, csak egy további „:” -t jelent a // után (amelyet rendszeres megjegyzésekhez használunk).
  2. Használja a „/ *: stuff * /” szót többsoros megjegyzésekhez.
  3. A címsor létrehozása előtt tegyen egy sort hashtag-el, például „#stuff”.
  4. Csomagoljon egy csillagba egy szöveget, például „* cucc *”, hogy dőlt betűvel jelenjen meg.
  5. Tekerje be a szöveget két csillagba, például „** cucc **”, hogy félkövéren jelenjen meg.

Miután megírta a tartalmat a szintaxisban, nyers jelölési formátumban van. A megjelenített jelölési formátumban (az igazi gazdag dokumentáció) való megjelenítéshez lépjen a Szerkesztőbe, és a „Játszótér beállításai” részben válassza a „Megjelenítési dokumentáció” lehetőséget.

A Markupról itt olvashat bővebben.

Első lépés egy egyszerű játszótér építésével

Rendben, mocskoljuk be a kezünket egy kód megírásával! Hozzunk létre egy hacker szimulátort, mint például a 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! :)