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.
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.
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
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:
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)
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.
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:
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
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!
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.
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!
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!
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.