by Harshita Arora

通過Harshita Arora

如何使用Swift Playgrounds制作東西 (How to make something with Swift Playgrounds)

Just a few days ago, I finished my WWDC 2018 scholarship submission. It was so much fun creating Alice in codeLand. This was my first year applying for WWDC scholarships, and I hope to get in!

就在幾天前，我完成了WWDC 2018獎學金提交。在codeLand中創建Alice真是太有趣了。這是我申請WWDC獎學金的第一年，我希望能加入！

Alice in codeLand is a three-in-one. It’s a hacker/coding simulator that looks like the Mac OS terminal that you can play with offline. It’s also a funny story of a hacker named Alice who tried gaining unauthorized access to Apple’s WWDC portal after succeeding at hacking into toothtube.com (a video sharing platform for toothpaste reviews) and macaroonsarethebest.com (a social platform for macaroon lovers like myself). And finally, it’s a technical demonstration of SQL injections (a hacking technique) for people to learn about information security and the step-by-step process for SQL injections after finding out if a website is vulnerable or not.

codeLand中的Alice是三合一。這是一個黑客/編碼模擬器，看起來像可以離線使用的Mac OS終端。這也是一個有趣的故事，一個名叫愛麗絲(Alice)的黑客在成功入侵到tubetube.com(一個用于牙膏評論的視頻共享平臺)和macaroonsarethebest.com(一個針對像我這樣的蛋白杏仁餅干愛好者的社交平臺)之后，試圖獲得對Apple WWDC門戶的未經授權的訪問。。最后，這是SQL注入的技術演示(一種黑客技術)，人們可以在確定網站是否易受攻擊之后，了解信息安全和SQL注入的分步過程。

Since 2017, Apple has put forth the challenge to scholarship applicants of creating an interactive experience in Swift Playgrounds.

自2017年以來，Apple向獎學金申請者提出了在Swift Playgrounds中創建互動體驗的挑戰。

When I started out, I was pretty confused. I’d never made a thing in Playgrounds before, as I’ve always worked with Xcode projects (that let you create the real iOS apps). I had only ever used Playgrounds when I started learning Swift to learn and code basic programming concepts. The instructors in the my online courses were using it, but those courses were only two weeks long, and I never created any graphics or animations in them.

當我開始的時候，我很困惑。我以前從未在Playgrounds上做過任何事，因為我一直都在處理Xcode項目(可讓您創建真正的iOS應用程序)。當我開始學習Swift來學習和編碼基本編程概念時，我才使用過Playgrounds。我在線課程中的講師正在使用它，但是這些課程只有兩周之久，而且我從未在其中創建任何圖形或動畫。

So it took some time to get familiar with Playgrounds. In hindsight, I could have saved half the time had I known where to look for the right answers and how to get started working with them.

因此，花了一些時間來熟悉Playgrounds。事后看來，如果我知道在哪里尋找正確的答案以及如何開始使用它們，我可以節省一半的時間。

So this post is for all the future WWDC scholarship applicants, because it seems Apple will continue to give this task for the scholarship every year. Even if you have nothing to do with WWDC scholarships, I think Swift Playgrounds is an awesome tool for building and prototyping something quickly.

因此，該職位適用于所有將來的WWDC獎學金申請者，因為蘋果似乎每年都會繼續為這項獎學金提供這項任務。即使您與WWDC獎學金無關，我認為Swift Playgrounds還是一個很棒的工具，可以快速構建和制作原型。

Note: This post assumes you have a background in Swift and iOS frameworks like UIKit. If you’ve built iOS apps before, that’d be a huge bonus!

注意：本文假定您具有Swift和iOS框架(如UIKit)的背景。如果您以前曾構建過iOS應用程序，那將是一筆不小的數目！

Let’s start!

開始吧！

那么什么是Swift Playgrounds，為什么要打擾呢？ (So what are Swift Playgrounds, and why bother?)

Swift Playgrounds is an iPad app introduced by Apple in 2014 that helps you learn to code in Swift. It’s also a tool in Xcode to create Playgrounds. You can run Playgrounds created in Xcode on an iPad and vice-versa.

Swift Playgrounds是Apple在2014年推出的iPad應用程序，可幫助您學習Swift編碼。它也是Xcode中用于創建Playgrounds的工具。您可以在iPad上運行以Xcode創建的Playground，反之亦然。

The difference between the iPad app and the Xcode tool is that on the iPad, the Playgrounds you create can access features like the camera, touch screen, and so on. But while running a Playground on Xcode, you can’t do that. More about Swift Playgrounds here.

iPad應用程序和Xcode工具之間的區別在于，在iPad上，您創建的Playgrounds可以訪問相機，觸摸屏等功能。但是在Xcode上運行Playground時，您無法做到這一點。更多關于Swift Playgrounds的信息。

While the concepts and examples in this post use Xcode, the Playgrounds can be created and run on the iPad app as well.

盡管本文中的概念和示例使用Xcode，但Playgrounds也可以在iPad應用程序上創建和運行。

一些需要學習的概念 (Some concepts to learn)

1.如何運行/玩游樂場，并開始使用它們 (1. How to run/play Playgrounds, and getting started with them)

You can download open-sourced Playgrounds here, here, and here. In order to play them, click on Assistant Editor in Xcode and select the “Live View” if it’s not automatically selected.

您可以在此處，此處和此處下載開源的Playgrounds。為了播放它們，請在Xcode中單擊助手編輯器，如果未自動選擇“實時顯示”，請選擇它。

A live view is where the output or the results of your code are displayed. When you create some object in your code that you want to be displayed in the live view, you need to assign the Live View property of the Playground page to that object.

實時視圖是顯示代碼的輸出或結果的位置。當您在代碼中創建要在實時視圖中顯示的對象時，需要將“操場”頁面的“實時視圖”屬性分配給該對象。

Now, here’s the code to assign the Live View property of the Playground Page to a UIView object. You can also assign either a class or a view controller.

現在，這是將Playground Page的Live View屬性分配給UIView對象的代碼。您也可以分配一個類或一個視圖控制器。

You’d have to import the framework PlaygroundSupport for that, and UIKit as well.

為此，您必須導入框架PlaygroundSupport和UIKit。

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

PlaygroundPage.current.live = view

In the navigation pane, you’ll see there’s two folders: Sources (for all the auxiliary code) and Resources (for all image and audio assets).

在導航窗格中，您將看到兩個文件夾：Sources(用于所有輔助代碼)和Resources(用于所有圖像和音頻資產)。

From my experience, dragging a Swift file from the Object library doesn’t work in Playgrounds for some reason. Instead, right-click on the Sources folder and click on “New file” to create a new Swift file.

根據我的經驗，出于某種原因，從對象庫中拖動Swift文件在Playgrounds中不起作用。相反，右鍵單擊Sources文件夾，然后單擊“ New file”以創建一個新的Swift文件。

2.如何創建視圖？ (2. How do you create a view?)

Playgrounds don’t have Storyboards. You can create a view (UIView) of any size (max 1024 x 768) programmatically.

游樂場沒有情節提要。您可以通過編程創建任意大小(最大1024 x 768)的視圖(UIView)。

I created one in the example above.

我在上面的示例中創建了一個。

3.什么是PlaygroundSupport？ (3. What is PlaygroundSupport?)

PlaygroundSupport is a framework for doing things like accessing a playground page and managing its execution, managing live views, and sharing and accessing persistent data.

PlaygroundSupport是一個框架，用于執行諸如訪問游樂場頁面并管理其執行，管理實時視圖以及共享和訪問持久數據的操作。

Basically, you need to import this framework to be able to assign the live view property of the playground page to an object you created.

基本上，您需要導入此框架，以便能夠將游樂場頁面的實時視圖屬性分配給您創建的對象。

4.使用標記創建豐富的文檔 (4. Creating Rich Documentation with Markup)

Swift Playgrounds lets you create beautiful documentation (that is easier to read than the regular comments) using a language called Markup.

Swift Playgrounds可讓您使用稱為標記的語言來創建精美的文檔(比常規注釋更易于閱讀)。

The basic syntax for Markup for rich documentation is as follows:

用于豐富文檔的標記的基本語法如下：

Use “//: stuff” for single comments, which if you notice, means just an additional “:” after the // (which is used for regular comments).
對單個注釋使用“ //：stuff”，如果您注意到，則表示在//后僅加一個“：”(用于常規注釋)。
Use “/*: stuff */” for multi-line comments.
對多行注釋使用“ / *：stuff * /”。
Prefix a line with a hashtag, for example, “#stuff” to create a heading.
在帶有前綴標簽的行之前添加前綴，例如“ #stuff”以創建標題。
Wrap text inside an asterisk, for example, “*stuff*” to display in italics.
在星號內包裹文本，例如“ * stuff *”以斜體顯示。
Wrap text inside two asterisks, for example, “**stuff**” to display in bold.
在兩個星號(例如“ ** stuff **”)內換行，以粗體顯示。

After you’ve written the content in the syntax, it’s in the raw markup format. And to display it in the rendered markup format (the real rich documentation), go to the Editor, and under “Playground Settings,” select “Render Documentation.”

用語法寫完內容后，它就是原始標記格式。并以渲染的標記格式(真正的豐富文檔)顯示它，請轉到編輯器，然后在“操場設置”下選擇“渲染文檔”。

通過建立一個簡單的游樂場開始 (Getting started by building a simple Playground)

Alright, let’s get our hands dirty by writing some code! Let’s create a hacker simulator like hackertyper.com! :-D

好吧，讓我們通過編寫一些代碼來弄臟我們的手！讓我們創建一個像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.

讓我們開始為黑客模擬器創建背景。然后，使用shouldChangeTextIn方法，我們將在文本視圖中顯示的文本更改為具有數組的字符串，該數組具有我們要在用戶輸入任何文本時顯示的代碼。這實際上創建了一個黑客模擬器，可以在按任意鍵后使代碼顯示在屏幕上。

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

隨您去吧-您已經用不到50行代碼制作了一個基本的黑客模擬器！現在該輪到您在Playgrounds上發揮創意了！ ;)

一些很棒的資源可以查看更多信息 (Some awesome resources to check out to learn more)

Apple documentation.
Apple文檔。
WWDC session videos. Check out this, this, this, and this, in that order.
WWDC會議視頻。按此順序檢查this ， this ， this和this 。
Playgrounds in depth at RWDevCon 2017.
在RWDevCon 2017上的游樂場。
The Kaseys video
Kaseys視頻
Code tutsplus tutorial
代碼tutsplus教程
WWDC 2017 and WWDC 2018 submissions. Also, awesome Swift Playgrounds to check out and get ideas from.
WWDC 2017和WWDC 2018提交。此外，很棒的Swift Playgrounds可以簽出并獲得想法。
A short chapter from a great book.
一本好書中的一小章。