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.
一本好书中的一小章。