Как да направите нещо с Swift Playgrounds

Само преди няколко дни завърших подаването на стипендия за WWDC 2018. Беше толкова забавно да създавам Алиса в codeLand. Това беше първата ми година за кандидатстване за стипендии на WWDC и се надявам да вляза!

Алиса в codeLand е три в едно. Това е симулатор на хакер / кодиране, който прилича на терминала на Mac OS, с който можете да играете офлайн. Също така е забавна история за хакер на име Алис, който се опита да получи неоторизиран достъп до портала на WWDC на Apple, след като успя да проникне в toothtube.com (платформа за споделяне на видео за отзиви за паста за зъби) и macaroonsarethebest.com (социална платформа за любителите на макароните като мен) . И накрая, това е техническа демонстрация на SQL инжекции (хакерска техника), за да могат хората да научат за сигурността на информацията и поетапния процес за SQL инжекции, след като разберат дали уебсайтът е уязвим или не.

От 2017 г. Apple постави предизвикателството пред кандидатите за стипендии да създадат интерактивно изживяване в Swift Playgrounds.

Когато започнах, бях доста объркан. Никога преди не бях правил нещо в Playgrounds, тъй като винаги съм работил с проекти на Xcode (които ви позволяват да създавате истинските приложения за iOS). Бях използвал Playgrounds едва когато започнах да уча Swift, за да уча и кодирам основни концепции за програмиране. Преподавателите в моите онлайн курсове го използваха, но тези курсове бяха само две седмици и никога не съм създавал никакви графики или анимации в тях.

Така че отне известно време, за да се запознаете с Playgrounds. Погледнато назад, можех да спестя половината от времето, ако знаех къде да търся правилните отговори и как да започна да работя с тях.

Така че тази публикация е за всички бъдещи кандидати за стипендии на WWDC, защото изглежда Apple ще продължи да дава тази задача за стипендията всяка година. Дори да нямате нищо общо със стипендиите на WWDC, мисля, че Swift Playgrounds е страхотен инструмент за бързо изграждане и прототипиране на нещо.

Забележка: Тази публикация предполага, че имате фон в Swift и iOS рамки като UIKit. Ако сте създавали приложения за iOS и преди, това би било огромен бонус!

Да започваме!

И така, какво представляват Swift Playgrounds и защо да си правим труда?

Swift Playgrounds е приложение за iPad, въведено от Apple през 2014 г., което ви помага да се научите да кодирате в Swift. Това е и инструмент в Xcode за създаване на детски площадки. Можете да стартирате Playgrounds, създадени в Xcode на iPad и обратно.

Разликата между приложението iPad и инструмента Xcode е, че на iPad площадките, които създавате, имат достъп до функции като камерата, сензорния екран и т.н. Но докато пускате Playground на Xcode, не можете да го направите. Повече за Swift Playgrounds тук.

Докато концепциите и примерите в тази публикация използват Xcode, Playgrounds могат да бъдат създадени и стартирани и в приложението iPad.

Някои понятия за научаване

1. Как да стартирате / играете детски площадки и как да започнете с тях

Можете да изтеглите детски площадки с отворен код тук, тук и тук. За да ги възпроизведете, щракнете върху Assistant Editor в Xcode и изберете “Live View”, ако не е избран автоматично.

Изглед на живо е мястото, където се показват изходът или резултатите от вашия код. Когато създавате някакъв обект в кода си, който искате да се показва в изгледа на живо, трябва да присвоите свойството Live View на страницата Playground на този обект.

Ето кода за присвояване на свойството Live View на Playground Page към обект UIView. Можете също да зададете клас или контролер на изглед.

Трябва да импортирате рамката PlaygroundSupport за това, както и UIKit.

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

В навигационния екран ще видите две папки: Източници (за целия спомагателен код) и Ресурси (за всички изображения и аудио активи).

От моя опит плъзгането на Swift файл от Object библиотеката не работи в Playgrounds по някаква причина. Вместо това щракнете с десния бутон върху папката „Източници“ и щракнете върху „Нов файл“, за да създадете нов Swift файл.

2. Как се създава изглед?

Детските площадки нямат Storyboards. Можете да създадете изглед (UIView) с произволен размер (макс. 1024 x 768) програмно.

Създадох такъв в горния пример.

3. Какво е PlaygroundSupport?

PlaygroundSupport е рамка за извършване на неща като достъп до страница на детска площадка и управление на нейното изпълнение, управление на изгледи на живо и споделяне и достъп до постоянни данни.

По принцип трябва да импортирате тази рамка, за да можете да присвоите свойството на живо изглед на страницата на детската площадка на обект, който сте създали.

4. Създаване на богата документация с маркиране

Swift Playgrounds ви позволява да създавате красива документация (която е по-лесна за четене от обикновените коментари) с помощта на език, наречен Markup.

Основният синтаксис за маркиране за обогатена документация е както следва:

  1. Използвайте „//: stuff“ за единични коментари, което, ако забележите, означава само допълнително „:“ след // (което се използва за редовни коментари).
  2. Използвайте “/ *: stuff * /” за многоредови коментари.
  3. Добавете префикс на ред с хаштаг, например „#stuff“, за да създадете заглавие.
  4. Увийте текст в звездичка, например „* неща *“, за да се покаже в курсив.
  5. Увийте текст в две звездички, например „** неща **“, за да се покаже с получер шрифт.

След като сте написали съдържанието в синтаксиса, то е в суров формат за маркиране. И за да го покажете във формат на визуализирана маркировка (истинската богата документация), отидете в редактора и под „Настройки на детската площадка“ изберете „Render Documentation“.

Прочетете повече за маркирането тук.

Първи стъпки чрез изграждане на проста детска площадка

Добре, нека си изцапаме ръцете, като напишем някакъв код! Нека създадем хакерски симулатор като hackertyper.com! :-Д

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! :)