Playground on Andrew Bancroft

Apple's SwiftUI Essentials Tutorial Series as Playgrounds

Sat, 06 Jul 2019 03:11:48 +0000

Resources

Why Playgrounds?

I’ve been making my way through Apple’s SwiftUI tutorials.

If you’re anything like me, you learn by tinkering with things. Change the modifiers, reposition Text, use a different Image, and see what happens.

BUT.

Without macOS Catalina, iterating quickly on these tinker sessions involves starting and stopping a simulator to see the changes.

#annoying, right?

However… since you can use SwiftUI in a Playground, I decided to take my learning experience out of the sample Xcode projects that Apple provides, and turn them into Playgrounds.

I’ve pushed them to GitHub, just in case they’d be useful to you.

Repository Structure

Each tutorial in the Essentials series has its own completed Playground.

Download or clone the repository to experiment with the SwiftUI tutorials individually in a Playground environment.

Run the playground, and show the live preview to see it in action.

Creating and Combining Views

All resources required for generating the SwiftUI preview have been added under the Resources folder.

Helper code for loading the JSON data file and generating images in the UI at different sizes has been placed in the Data Helpers.swift file.

Model Objects.swift contains the code for the Landmark and Coordinates types.

Handling User Input

All resources required for generating the SwiftUI preview have been added under the Resources folder.

Helper code for loading the JSON data file including the new isFavorite property, and generating images in the UI at different sizes has been placed in the Data Helpers.swift file.

Model Objects.swift contains the code for the Landmark and Coordinates types. It also adds the UserData bindable object.

Using SwiftUI in a Playground

Thu, 13 Jun 2019 04:00:18 +0000

If you’re looking for a quicker way to iterate while you’re building SwiftUI views, and you don’t have macOS Catalina installed, you might enjoy the Playground experience more than you enjoy pressing command + R every time you make a change and want to see it in the user interface.

How do you do it? Here’s a code snippet to copy-paste into a Playground to get you going.

 1import UIKit
 2import PlaygroundSupport
 3import SwiftUI
 4
 5// Make a SwiftUI view
 6struct ContentView: View {
 7    var body: some View {
 8        Text("SwiftUI in a Playground!")
 9    }
10}
11
12// Make a UIHostingController
13let viewController = UIHostingController(rootView: ContentView())
14
15// Assign it to the playground's liveView
16PlaygroundPage.current.liveView = viewController
17
18// RUN!

Showing the Live View in a Swift Playground

Tue, 28 May 2019 05:06:19 +0000

Where’s the Live View?

So you’ve created a new Single View playground from the template picker…

You run the playground right out of the gate to see what you’ve got…

But… Where’s the Live View?

Showing the Live View

To get the live view to show up, you need to open the Assitant Editor.

You can do this by clicking View - Assistant Editor - Show Assistant Editor.

Or you can press option + command + return to show it.

And we’re off to play!

Using a Core Data Model in Swift Playgrounds

Sun, 10 Jul 2016 20:48:54 +0000

Did you know that you can tinker with Core Data inside of Swift playgrounds in Xcode? You can!

Jeremiah Jessel, author at http://www.learncoredata.com, wrote up an article in 2015 detailing how you can use the Core Data framework inside a playground. He shows how you can do everything from setting up the Core Data stack, to creating NSManagedObjects programmatically in code. Great stuff!

After I read his guide, I got to thinking: I wonder if you can take an .xcdatamodeld file created with Xcode’s Data Model designer and use it in a Playground….

The short answer is, kinda. You can’t use the .xcdatamodeld file (at least, I couldn’t find a way), BUT, you can use the compiled “momd” file that gets created when you build your app.

Limitations

There’s at least two limitations / caveats I’ve come across as I’ve been playing with this concept:

No NSManagedObject subclasses

While you can create instances of the Entities in the model, if you’ve created NSManagedObject subclasses for your Entities, you won’t be able to use those in the playground. You’d have to resort back to setting properties on your NSManagedObject instances using setValue(_: forKey:).

But this is a minor drawback, especially if you’re just wanting to tinker.

Model updates

After you read the walkthrough, you’ll know how to get the model into your playground.

Here’s the deal though: If you ever make changes to your model, you’ll need to go through the steps necessary to re-add a freshly-compiled model to the playground’s Resources folder that includes the changes. This is because resources that are added to a playground are copied, not referenced.

I don’t think that’s a terrible draw-back, especially once you know how to do it.

So how do you do it? Here’s how:

Walkthrough

Get started by adding a Data Model to your project. If you’ve got a project already going that uses Core Data, you probably already have a .xcdatamodeld file in your project. If you don’t, though, one is easily add-able from the File menu:

Add Data Model file (unless you already have one)

File -> New -> File…

For my “smoke test”, just to see if it was possible, I left the default value for the model name as “Model.xcdatamodeld”.

Add entity with attribute

Once I had the data model added to the project, I went in and added an entity (named “Entity”) with an attribute (named “attribute” of type Integer 16):

Add a playground

Next up, I added a new playground to my project:

File -> New -> Playground…

Build project; Locate “momd” file

With a playground and a data model has some structure to it, I built the project (CMD + B) so that the .xcdatamodeld file would be compiled into an “momd” file. It’s the momd file that needs to be added to the playground as a resource.

To find the “momd” file, expand “Products” in your project navigator, right-click the .app file, and click “Show in Finder”:

Show .app package contents

In the finder window, right-click the .app file, and click “Show package contents”:

Drag “momd” file from Finder to playground Resources folder

Write Core Data code to use model

That’s it! Now that the “momd” file is in the playground’s Resources folder, you’re set to write code against it. You can insert NSManagedObject instances, perform fetch requests, etc. Here’s an example that I wrote up:

import UIKit
import CoreData

// Core Data Stack Setup for In-Memory Store
public func createMainContext() -> NSManagedObjectContext {
    
    // Replace "Model" with the name of your model
    let modelUrl = NSBundle.mainBundle().URLForResource("Model", withExtension: "momd")
    guard let model = NSManagedObjectModel.init(contentsOfurl: modelUrl!) else { fatalError("model not found") }
    
    let psc = NSPersistentStoreCoordinator(managedObjectModel: model)
    try! psc.addPersistentStoreWithType(NSInMemoryStoreType, configuration: nil, URL: nil, options: nil)
    
    let context = NSManagedObjectContext(concurrencyType: .MainQueueConcurrencyType)
    context.persistentStoreCoordinator = psc
    
    return context
}

let context = createMainContext()

// Insert a new Entity
let ent = NSEntityDescription.insertNewObjectForEntityForName("Entity", inManagedObjectContext: context)
ent.setValue(42, forKey: "attribute")

try! context.save()

// Perform a fetch request
let fr = NSFetchRequest(entityName: "Entity")
let result = try! context.executeFetchRequest(fr)

print(result)

Woohoo! I thought this was pretty cool.

Don’t forget: If you make updates to your model, you need to re-build your app, delete the “momd” folder from your playground’s resources, re-drag the freshly-compiled “momd” file to your playground again to work with the latest version of the model.

Potential usefulness

The other important question to ask, besides “I wonder if this is possible?” is “How is this useful?”

Learning. Playgrounds in and of themselves make sense as a learning tool. How cool is it to be able to build the model you’re thinking of in the Xcode designer, import that into a playground, and tinker with it as a learning exercise??
This could also be useful when you need to try out your data model but don’t really want to wire it up to an actual user interface yet. Strip away all the UI complexity and just work with the data model… in a playground! It just seems like a more elegant solution to the “print it out to the console” method of experimenting with the model.
There might be situations when you’re building semi-complicated NSPredicate instances for a fetch request – why not get it working in a playground first, then migrate it over to your app? Just an idea!

Create Documentation for your Swift Playground

Wed, 10 Sep 2014 03:44:16 +0000

As I opened Apple’s latest “Patterns Playground” blog post, I was impressed with the look and feel. Rather than create the documentation as comment blocks, they managed to put in sharp-looking notes and explanations before each code example / experiment. It’s like an interactive book, reminiscent of the Swift Programming Language iBook! Here’s a snippet of what their Playground looks like:

[][1]

Of course, my immediate question / thought was, “How’d they do that?! Can I do that? I want to do that!”. I didn’t know it at the time of this publication, but apparently Apple has some pre-release documentation out on developer.apple.com, detailing how all this is done. I (as usual) did it the hard way and hacked my way through it. I figured I’d go ahead and share my discoveries alongside the official documentation from Apple.

I’m already a believer in using Playgrounds for teaching. The read-example-experiment loop is so easy in the Playground environment. I think using this documentation technique has the potential to enhance the Playground experience even more to create professional, sharp-looking educational material_. _

For this post, I wanted to take a simple example (the File -> New Playground playground) and convert the comment-style documentation into “fancy” documentation.

Before:

[][2]

After:

[][3]

Let’s explore.

The Gist

Create yourself a playground (and note where you save it).
Navigate to where the .playground file is saved in Finder.
Right-click the .playground file, and choose “Show Package Contents”.
Add a new folder named “Documentation”.
Create a new HTML file in the Documentation folder. It should contain the HTML markup and the text explanation that you’d like to enhance your playground with. Make sure it is a well-formed HTML document by the time you’re finished creating it. I describe a quick way to jumpstart your documentation process at the end of this article…
Although optional, I’d recommend styling your HTML file with appropriate CSS. Adding a CSS file and referencing it within the HTML file you created is probably a good idea (and this is allowed for Playground documentation).
Open contents.xcplayground with the text editor of your choice by right-clicking and choosing “Open With”.
Modify the XML so that the
element contains a node as shown in the highlighted code lines in the example below. Be sure to replace the relative-path value with the name of the HTML file you created in step 5 (I named mine “doc-fragment-0.html”):



  9.  Save, and open the playground in Xcode 6.  Your Playground should now contain documentation!

As a way to jump-start my own Playground documentation, I simply borrowed one of the HTML files and the CSS file from Apple's Patterns Playground.  Then I modified the markup to contain the educational material I wanted for _my_ playground, customized the styles to what I wanted, added the <span class="lang:default decode:true  crayon-inline "><documentation></span> node to the contents.xcplayground file, saved, and voila:  Fancy documentation!

&nbsp;

 [1]: http://www.andrewcbancroft.com/wp-content/uploads/2014/09/Patterns_playground.png
 [2]: http://www.andrewcbancroft.com/wp-content/uploads/2014/09/MyPlayground_WithDocumentation_playground_before.png
 [3]: http://www.andrewcbancroft.com/wp-content/uploads/2014/09/MyPlayground_WithDocumentation_playground_after.png