Як щось зробити за допомогою Swift Playgrounds

Буквально кілька днів тому я закінчив подання стипендії на WWDC 2018. Було так весело створювати Алісу в codeLand. Це був мій перший рік, коли я подавав заявку на стипендії WWDC, і я сподіваюся потрапити!

Аліса в codeLand - це три в одному. Це симулятор хакера / кодування, схожий на термінал Mac OS, з яким можна грати в автономному режимі. Це також кумедна історія хакера на ім'я Аліса, який намагався отримати несанкціонований доступ до порталу WWDC від Apple після успішного злому на toothtube.com (платформа для обміну відео для оглядів зубної пасти) та macaroonsarethebest.com (соціальна платформа для любителів мигдального печива, як я) . І нарешті, це технічна демонстрація ін’єкцій SQL (техніка злому), щоб люди дізналися про інформаційну безпеку та покроковий процес ін’єкцій SQL після з’ясування, чи веб-сайт вразливий чи ні.

З 2017 року Apple поставила перед претендентами на стипендії виклик створити інтерактивний досвід на Swift Playgrounds.

Коли я починав, я був досить розгублений. Я ніколи раніше не робив нічого на Playgrounds, оскільки завжди працював із проектами Xcode (що дозволяють створювати справжні програми для iOS). Я коли-небудь використовував ігрові майданчики лише тоді, коли почав вивчати Swift для вивчення та кодування основних концепцій програмування. Викладачі моїх онлайн-курсів цим користувались, але ці курси тривали лише два тижні, і я ніколи не створював в них жодної графіки та анімації.

Тож знайомство з дитячими майданчиками зайняло певний час. Оглянувшись назад, я міг би заощадити половину часу, якби знав, де шукати правильні відповіді та як почати з ними працювати.

Тож ця публікація призначена для всіх майбутніх претендентів на стипендії WWDC, оскільки, схоже, Apple продовжуватиме давати це завдання на стипендію щороку. Навіть якщо у вас немає нічого спільного зі стипендіями WWDC, я вважаю, що Swift Playgrounds - це чудовий інструмент для швидкого створення та створення прототипів.

Примітка: Цей допис передбачає, що у вас є досвід роботи в платформах Swift та iOS, таких як UIKit. Якщо ви раніше створювали додатки для iOS, це було б величезним бонусом!

Давайте розпочнемо!

То що таке Swift Playgrounds, і навіщо турбуватись?

Swift Playgrounds - це додаток для iPad, представлений Apple у 2014 році, який допомагає навчитися кодувати в Swift. Це також інструмент у Xcode для створення ігрових майданчиків. Ви можете запускати ігрові майданчики, створені в Xcode, на iPad і навпаки.

Різниця між програмою iPad та інструментом Xcode полягає в тому, що на iPad створені вами ігрові майданчики мають доступ до таких функцій, як камера, сенсорний екран тощо. Але під час запуску Playground на Xcode це зробити не можна. Детальніше про ігрові майданчики Swift тут.

Хоча концепції та приклади в цій публікації використовують Xcode, ігрові майданчики також можна створювати та запускати в додатку iPad.

Деякі поняття для вивчення

1. Як запускати / грати на дитячих майданчиках та як розпочати з ними роботу

Ви можете завантажити ігрові майданчики з відкритим кодом тут, тут і тут. Щоб відтворити їх, натисніть Редактор помічника в Xcode і виберіть "Live View", якщо це не було вибрано автоматично.

Перегляд у режимі реального часу - це місце, де відображаються вихідні дані або результати вашого коду. Коли ви створюєте в коді якийсь об’єкт, який ви хочете відображати у режимі реального часу, вам потрібно призначити цьому об’єкту властивість Live View сторінки Playground.

Ось код для присвоєння властивості Live View сторінки Playground об’єкту UIView. Ви також можете призначити клас або контролер перегляду.

Вам доведеться імпортувати фреймворк PlaygroundSupport для цього, а також UIKit.

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

На панелі навігації ви побачите дві папки: Джерела (для всього допоміжного коду) та Ресурси (для всіх зображень та звукових ресурсів).

З мого досвіду, перетягування файлу Swift із бібліотеки об’єктів чомусь не працює на Playgrounds. Натомість клацніть правою кнопкою миші папку Джерела та натисніть “Новий файл”, щоб створити новий файл Swift.

2. Як створюється подання?

На ігрових майданчиках немає розкадрувань. Ви можете програмно створити подання (UIView) будь-якого розміру (макс. 1024 x 768).

Я створив такий у наведеному вище прикладі.

3. Що таке PlaygroundSupport?

PlaygroundSupport - це рамка для здійснення таких речей, як доступ до сторінки ігрового майданчика та управління її виконанням, керування переглядами в реальному часі, обмін та доступ до постійних даних.

По суті, вам потрібно імпортувати цей фреймворк, щоб мати можливість призначити властивість live view сторінки дитячого майданчика об’єкту, який ви створили.

4. Створення розширеної документації з розміткою

Swift Playgrounds дозволяє створювати прекрасну документацію (яку читати легше, ніж звичайні коментарі), використовуючи мову, що називається Розмітка.

Основний синтаксис розмітки для розширеної документації такий:

  1. Використовуйте “//: stuff” для окремих коментарів, що, якщо ви помітите, означає лише додаткове “:” після // (що використовується для звичайних коментарів).
  2. Використовуйте “/ *: stuff * /” для багаторядкових коментарів.
  3. Префіксуйте рядок хештегом, наприклад, “#stuff”, щоб створити заголовок.
  4. Оберніть текст усередині зірочки, наприклад, “* stuff *” для відображення курсивом.
  5. Оберніть текст двома зірочками, наприклад, "** **" для відображення жирним шрифтом.

Після того, як ви написали вміст у синтаксисі, він має вихідний формат розмітки. А щоб відобразити його у відтвореному форматі розмітки (справжня багата документація), перейдіть до редактора та в розділі «Налаштування майданчика» виберіть «Візуалізація документації».

Детальніше про розмітку читайте тут.

Початок роботи з побудови простого дитячого майданчика

Добре, давайте забруднимо руки, написавши якийсь код! Давайте створимо хакерський симулятор, такий як 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! :)