Using Parse to power up your Framer prototypes.

Part One — The Basics of Data

Introduction

Have you ever wished your prototypes could be just a bit more realistic? Are you tired of prototypes resetting back to their initial state when you close them? Maybe you just want an easier way to integrate real data without dealing with obnoxious blobs of JSON.

In this series of tutorials, I’m going to be exploring some interesting use cases for integrating Parse with Framer. Hopefully they’ll help you think of new ways to use data to enhance your own prototypes with the awesome power of a real mobile backend.

Unfortunately as of Jan. 28th, 2016, Parse is no longer accepting new users and the service will sunset on Jan 28th, 2017.

Part One — The Basics

This is what we’ll be trying to build in this guide.

In this first guide, we’re just going to go through some basic things you can do with Parse. We’ll set you up with an account, create your first app, set up a class full of data, and then pull that in to the prototype. We’ll also link up a simple “like” interaction that will save data back to Parse.

Our app concept is simple: we just want to display a list of locations (that have their own background images) and store a total like count per location.

Play with the completed prototype

Did you notice anything interesting about the like counts in the example? They don’t reset back to a specific number when you refresh the prototype. All of the information you see is powered by Parse.

What is Parse?

Let’s take a step back. Parse is a cloud platform that lets app developers quickly and easily integrate a lot of complicated, scalable server-side functionality into their products.

Parse has three main products:

Core

Store data and run code on a remote server.

Push

Send push notifications to your users via an API or the web composer.

Analytics

Track events in your app and gain valuable insights.

It’s important to note that Parse is built for real, production-level apps — so it has a lot of power under the hood. Thankfully, it also has a simple and easy-to-use API and a JavaScript SDK, so it’s the perfect addition to Framer prototypes. With Parse + Framer, you’ll be able to do almost anything: read and save data, create users and let them log in, remember app states, track events, and so much more.

Seriously, look at the documentation — you can do pretty much anything.

Let’s get started.

Get an account

In order to use Parse, you’ll need an account. Head over to parse.com and click the “Sign up” button in the top right. Create your account with an email and password, and name your first app (“Framer Prototype” is a good choice, but feel free to name it whatever you like). If you’re just doing simple data storage, you can use the same app for as many prototypes as you want. If you end up using more of what Parse has to offer, you may want to create a new app for each prototype.

Grab your keys

From your Parse dashboard, hover over the gear icon and click keys. We’ll only be using the Application ID and the JavaScript Key so feel free to copy them somewhere easy to get to (like an empty text file) or just leave this page open in another tab. Keys are unique strings of characters that act as your password when communicating with Parse. It tells Parse what app you’re trying to connect to, and proves that you are allowed to make that connection.

Plan your data

We’ll need some data to pull in to our prototype. Looking at the designs, we’ll probably need a city, a state, a like count, and an image URL. It also might be nice to have a way to toggle certain locations on and off. It’s important to think through this as best as you can before you start prototyping to prevent any messy data issues.

There are a few different special types of data that you can store in Parse. It’s important to make sure you choose the right one for each field. Here are the most common data types you might use in prototyping:

String:
Any kind of text. Whatever you put here is exactly what you’ll get back. We’ll use this type for the city, state and image URL.

Number:
This type is specific for numbers. Using this allows you to do math operations with out any kind of type conversion. We’ll use this type to track the like count in our prototype.

Boolean:
This can be either true or false. It’s helpful for toggles and states. We’ll use this to determine if a location is shown or hidden.

Create your class

In Parse, a set of data is called a class. This is very similar to a sheet in your favorite spreadsheet app. From your dashboard, hover over the app and click on “Core” at the bottom. This will take you to the Parse data browser.

Here, we’re going to create a new class called “Locations” and add columns for the different types of data that we planned for. Once you’ve created the class, click the “+ Col” button to add a new column (remember to use the right types that we defined in the previous step). Once you’ve made all the right columns, go ahead and add some rows of data. Here’s a screenshot of the complete class I made for this example:

Note: Column names are case-sensitive, so be sure you are consistent. I prefer to use camel case (i.e. likeCount vs LikeCount) and that is how the code in this guide is written.

You can see the data is pretty straight forward. If you’ve ever used any kind of spreadsheet application, this will feel very familiar. The only columns you really need to worry about with prototypes are the ones you’ve created. You can safely ignore all the Parse columns (like objectId, createdAt, etc.).

For the images, all I’ve done is dropped in a direct link to some photos from Instagram. If you want to use your own images, you can use something like Imgur or even just a public Dropbox folder. I’ve also preset a couple like counts, but you could leave these as all zeroes too.

(this is where the magic happens)

Integrate with Framer

If you’re in a rush and want to save some time you can download this blank Parse + Framer template that has the Parse SDK pre-installed and skip to the next step.

Now that we’ve got a class and some data, we can finally start our Framer integration! Luckily, this part is super easy. Start a new Framer Studio project and paste in this code:

Now you’re probably getting an error in Framer Studio, which is OK. This is because Framer doesn’t know what Parse is yet. We have to add the Parse JavaScript SDK to the index file for your Framer project.

Save your project and close it. Open up Finder, navigate to where your project is, and click on it. You should see something like this:

Open up the “index.html” file in your favorite code editor (I prefer Brackets) and add this line as the first script in the script block:

<script src="https://www.parsecdn.com/js/parse-1.3.2.min.js"></script>

Your index file should look like this now:

Check out line 18, that’s where we added the Parse Javascript SDK.

Once you’ve added the line, save the file and close it. Now re-open your project in Framer Studio, and your device should have a green screen. Congrats, you’ve successfully initialized your Parse app!

Write a query

Everything in Parse that relates to reading data is centered around the query. Luckily, queries are pretty easy to write and it’s a piece of cake to sift through the data you get back. Let’s get our list of locations from the class we made earlier:

Be sure to read the comments to see exactly what we’re doing here.

You can see on lines 23–25 how we access data thats returned from Parse. We get a big “results” object back that we then loop through and act on each “result.” Each column in your class is exposed as an attribute of a result, so for example if you had a column called “cuteKittens” you would get to it by looking at result.attributes.cuteKittens.

Ugly, but awesome!

If you’ve followed along correctly so far, you should end up with something like this. Obviously we have a lot of styling and overall prettifying work to do, but hey you just pulled some dynamic data in to your prototype!

High five!

Write some data back

Now that we’re able to read data in, we might want to save something back to our database. For this example, we’re going to create a like function that increments the like count in our app and save it back to Parse.

Again, make sure you read through the comments!

Now nothing will happen visually in our app because we’re not actually displaying the likes anywhere yet, but if you refresh your Parse data browser you’ll see the like counts going up by one every time you click a location. You’re now reading and writing to a cloud database, all from inside your own Framer prototype!

Keep going

By now, you should have a semi-functional prototype and basic mental idea of how Parse works. I’ve completely built out this example prototype below, so download it and take a look at how it works. Also, there is a ton of documentation on Parse that can teach you how to take this example even further. Take what you’ve experimented with here and use that knowledge to enhance your own prototypes!

Explore the finished project

Check it out in Framer Studio or download the source.

Thanks for reading! Please give me a shout on Twitter if you have any questions or if you have ideas for future guides you’d like to see.