Give your Framer prototypes a better memory.
Part Two — Remembering Users with Parse
Traditional prototypes act a lot like Dory from Finding Nemo — as soon as you walk away, they completely forget your existence. This creates some challenges when trying to prototype flows that depend on being aware of who the user is, e.g. a login flow. In the past, you’d either have to customize your prototype for every test, or just have to explain to the user to “make believe that you’re Jane Doe.”
Unfortunately as of Jan. 28th, 2016, Parse is no longer accepting new users and the service will sunset on Jan 28th, 2017.
Part Two — Saving Users
In this second Parse + Framer guide, we’re going to build a flow that will both allow you to create users and remember that they exist. We’ll even throw in a little bit of form validation to make sure that the data we’re saving in to Parse is good, clean data.
Play with the fully built prototype.
Try signing up, and then logging back in to see if it remember your vibes.
(P.S. it also looks best in Safari)
FYI: If you missed the first guide, you should probably at least go back and skim it because you’ll need to know how to do most of that before you can start this.
Parse Users
Luckily, the Parse JavaScript SDK offers a really, really easy way to create users and let users log in. Seriously, it’s so easy that we’re just going to jump straight in to Framer — no setup on the Parse side is necessary.
Pop open a copy of your handy-dandy Parse + Framer Template and paste in your app keys (you can use the same app from last time, or make a new one). We’re going to need some way for users to input data (a username and password), and a way for them to submit the form.
Now, with this code, you should have a basic form input on your device. There is nothing too crazy going on here — just some basic styling and events. Next, let’s dig in to those doSignUp and doLogin functions.
Note: if you’re unable to type in the inputs, you may be using an older version of Framer. Go to File > Update Framer and try it again.
Signing Up and Logging In
Even though these two actions use the same inputs (username and password), they’re very different. A key part of the Parse JavaScript SDK is the User object which includes helper functions to make this process super smooth. Let’s start with validating our input and creating a new user:
If you look closely, you’ll notice that the actual part that creates new users is only ~6 lines long! Most of this code is just checking the different cases for an invalid entry. Once we know that the form is filled out correctly, all it takes is a quick user.signUp call to actually add the user to the database. If you log in to Parse now, this is what you should see:
Parse automatically creates a special class called User which has some unique special fields (like password) specifically for storing users. Parse also helps us out by throwing an error if you try to create the same user twice (give it a try!) which is some awesome free functionality.
Now, let’s try logging someone in:
This code is identical up until our Parse call on line 30, where we log in the user with 1 line of code. SUPER RAD.
Taking it further
At this point, we have a fully working user registration and log in flow. There are a bunch of different directions you could take this — profile images, friend lists, chat conversations, and so on. For the sake of this guide, let’s just save something simple back to the user and then recall it on login.
The easiest way to do this is to just add a column to our User class. Let’s add a string column to keep track of the user’s vibes.
Go to your User class, click “+ Col”, choose “string” and name the field “vibes”. Now lets add a saveVibes() function to our project which we can then tie to some buttons.
Yep. It’s really that easy. Parse automatically creates and manages a session when you authenticate a user, so all you have to do is ask Parse who is current, set their vibes, and call a save. Everything else is automatically handled in the background. If you wanted, you could add a callback to the save to change up the UI in some way that makes sense for your prototype.
That’s all for now!
This guide was pretty short, but that’s mostly because Parse does the heavy lifting for you. If you want to learn more, you should definitely check out all the User documentation on Parse. We’ve only just scratched the surface!
As always, I hope this guide was helpful and is making you think in new and different ways about prototyping. Ping me on twitter if you have any ideas for more guide topics.
Explore the finished projects
Hey! Are you a product designer? Do you think that prototyping with Parse is the coolest thing since sliced bread? Then hit me up on twitter, we’re hiring.
