Skip to content

Using Parse to Power Up Your Framer Prototypes (Part I)

At Parse, prototyping plays a crucial part of how we craft our products. Read on for a great tutorial to make your prototypes as realistic as possible with the help of Framer. Brought to you by our resident design expert, George Kedenburg III, and originally posted here on Medium.

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.

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


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:

CoreStore data and run code on a remote server.

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

AnalyticsTrack 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

 Screen Shot 2014-12-16 at 9.32.38 AM

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.

Screen Shot 2014-12-15 at 3.18.58 PM

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 likeImgur 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:

# Initialize Parse with the app keys corresponding to your app
Parse.initialize("APPLICATION ID", "JAVASCRIPT KEY");

# Write your Framer Code below this
success = new BackgroundLayer backgroundColor: 'green'

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 preferBrackets) 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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">

<link rel="apple-touch-icon" href="framer/images/icon-120.png">
<link rel="apple-touch-icon" href="framer/images/icon-76.png" sizes="76x76">
<link rel="apple-touch-icon" href="framer/images/icon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="framer/images/icon-152.png" sizes="152x152">

<link rel="stylesheet" type="text/css" href="framer/style.css">

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

</head>
<body>
</body>
</html>

 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:

# Initialize Parse with the app keys corresponding to your app
Parse.initialize("APPLICATION ID", "JAVASCRIPT KEY");

# create an object that extends the class you want to pull data from
Locations = Parse.Object.extend("Locations")

# create a query against the object you just created
queryLocations = new Parse.Query(Locations)

# we're looking for rows that have show set to true
queryLocations.equalTo "show", true

# we're going to sort the response by state and then by city
queryLocations.ascending "state", "city"

# now we actually run the query and get back results
queryLocations.find
success: (results) ->
# if the query is a success, we'll get back a results object.
# this for loop lets us do something to each result in that larger "results" object
for result, i in results
location = new Layer width: 750, height: 300, y: 300 * i
location.html = result.attributes.city + ", " + result.attributes.state
location.image = result.attributes.image
location.name = result.id
# ^^^ super important! the result.id is the ID that Parse
# uses to find that entry. we need to associate it with this
# layer if we ever want to interact with this data in the future
error: (error) ->
# if there was an error, we'd print it
print error

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.

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.

# Initialize Parse with the app keys corresponding to your app
Parse.initialize("APPLICATION ID", "JAVASCRIPT KEY");

# create an object that extends the class you want to pull data from
Locations = Parse.Object.extend("Locations")

# create a query against the object you just created
queryLocations = new Parse.Query(Locations)

# we're looking for rows that have show set to true
queryLocations.equalTo "show", true

# we're going to sort the response by state and then by city
queryLocations.ascending "state", "city"

# now we actually run the query and get back results
queryLocations.find
success: (results) ->
# if the query is a success, we'll get back a results object.
# this for loop lets us do something to each result in that larger "results" object
for result, i in results
location = new Layer width: 750, height: 300, y: 300 * i
location.html = result.attributes.city + ", " + result.attributes.state
location.image = result.attributes.image
location.name = result.id
# ^^^ super important! the result.id is the ID that Parse
# uses to find that entry. we need to associate it with this
# layer if we ever want to interact with this data in the future

location.on Events.Click, ->
# same as when we initially pulled the location list,
# we need to retrieve the item we want to increment from Parse
# so we will need to query our Locations class
likeGet = new Parse.Query(Locations)

# the @ symbol is coffeescript's equivalent of "this"
# so here we're telling our new Parse.Query to fetch the
# row that corresponds with the ID we set back up on line 25
likeGet.get @.name,
# if our call is successful, we'll get back a single row which I've named 'location'
success: (location) ->
# since likes is the number type we can
# use this handy Parse helper called increment
# which will take the specific column 'likes' of
# our 'location' and increment it by 1
location.increment('likes')

# and now all we have to do is call
# save() on our location and the new like count is stored
location.save()

error: (error) ->
# if there was an error, we'd print it
print error

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.