How to Build a Cloud App in an Afternoon with Parse

for the demo we are building a simple application called code mesh quotes that will allow people to submit a quote that they hear at the conference and then it will also list all the quotes that have been submitted so we’re making a simple web app and an iOS app and then we’re also going to deploy some business logic to the server with what parse calls cloud code so we’re using parse comm as our back-end we do have a starter project here that I built it’s just very simple HTML all static content we have our bacon ipsum here that’s just typed right into the HTML and we have this form that pops up here and this is just a form that is hooked up to nothing if you submit it it just does the default action of reloading the page it’s not hooked up to anything so let’s get started here we are going to go to parse comm and since I’m already logged in we’re gonna hit this app button here and that’s gonna take me to the dashboard where I can create a new app with this button here so I’ll click this and all it needs to know is a name that’s all you have to do to get up and running we’re gonna call this code mash quotes and now we have our own little look in parse comms cloud and we have all of our keys here that identify our app and a nice little graph showing our daily number of API requests which is obviously flatlined at zero right now since we just created the app all right so we’re gonna start with the web portion let’s go to quick start and since we’re starting with the web we’re going to choose JavaScript as our platform they do have a starter project for you you can click new project to download that but since we have a starting point we are going to choose existing project and we’ll select our app here as code mesh quotes notice that the keys change those update dynamically based on the app that you are working on so anytime you see this blue box and the documentation it’s specific to your app there’s only really two things that you got to do the first is to include the SDK from parse comm and that’s hosted at there’s CBN so we’re just going to copy this and down at the bottom of our HTML file where our scripts are I’m just going to copy that right here and then underneath that we have to initialize it the is our application ID and our JavaScript key this identifies us to parse comm so we’re going to copy that and paste it over here it will have to live inside script tags we’ll just paste that in there and then anytime after this we are able to interact with parse so this it initializes us and we will be working in app KS for the rest of the time so let’s take a look at our application and see what we need to do now we have this feed here where we’re going to be getting the quotes from parse and displaying them out but it makes more sense to start with adding the quote and hooking up this form because if we start with this the database will be empty and there won’t be anything to show so we’re gonna take this form here that has two text fields and we’re gonna grab the values of these and save them to parse so let’s go back over here and we will pull up side by side our app dot J s and our index dot HTML this JavaScript over here is given to us by foundation when we start we’re just going to ignore it and then I have one function already set up here close modal this is going to make that pop-up go away so let’s start by creating a function called save quote and this is going to be called when we’re ready to save our quote let’s also take a look at document dot ready and here we’re going to listen for that form to be submitted so we see over here this is our ad quote dialog the form has a nice ID of a new quote so we are going to grab that with a jQuery selector and when it’s submitted we are going to do a couple things first this event which is passed through to us we’re gonna call a dot prevent default this is going to stop the page from refreshing like we saw a second ago the default behavior of a form and then next we’re just going to call safe quote so let’s look at actually filling in this function here there’s a couple things that you need to do what we’re going to need to do is create a PF object is the data model for purse comm it’s what we’re going to store all our key value pairs inside we also need to tell it what class it’s going to be a part of so let’s start by creating an instance of the class here we’re going to start by calling it a quote and this is going to extend parsed object and we’re going to pass in a string quote so what this is doing is it’s saying that this represents the class and we’ll see this in our data browser called quote and we don’t have to set up anything on parse

com ahead of time if it doesn’t recognize this it will create it on the fly for us so let’s actually creating the instance of this class we’ll call it little cute quote and we’re gonna call new quote so now this little cute quote is what we’re actually going to store our data in and this right here tells parse where the data needs to be stored so on this little cue quote well let’s get back to that in a second here let’s first create some variables to hold the values of these text fields we’re just going to use jQuery to grab the quote text and Val will give us the value of that and call attribution and do the same thing all right we see the class are the IDS here attribution and quote text and we’re getting the value of those okay so now let’s actually stick those in the little cute quote object so we’re gonna call quote dot set and then it’s just key value right so we haven’t set these before they need to stay consistent but the first time you have some flexibility because like the class if they haven’t if person doesn’t recognize it it’s just gonna create it on the fly so let’s call quote text the Kiba code text and then we’re going to pass in the actual variable that has the value and let’s do it again for the attribution let’s call this key bye and then we will pass an attribution okay so this quote object has two key value pairs set on it that is enough that’s all we have to save so now let’s actually save it to parse so it’s real simple to do that we’re just going to call quote dot save and then inside here you can actually pass it an object with key value pairs what we do not we’re not doing that now since we set it explicitly up there so we’re gonna say there’s nothing else we want to save and then we’re gonna get one of two callbacks we’re gonna get a success or an error if we get an error it’s gonna pass back two things it’s gonna pass back the object that we try to save and then an error message so if we get that let’s just log out the error message so error has a property called message which is just plain text reason why it failed we’ll just log that out to the console if we save it successfully let’s log out a message that just saved and then let’s also close that modal since we don’t need it anymore that form is done being used okay so let’s take a look at what we did here we created a new class the first time and every time after that is just gonna tell parse what class to look at we created a new instance of this quote class and then we stuff these two variables into it with our key and value pairs then we called save which is actually going to hit parses servers and save this object and we get one of two callbacks with the save was successful we get this if it wasn’t we get this so let’s go back over to our project and I’m going to refresh this and we’re also going to pull up our console here so we can see the log messages and let’s try saving a quote so I’m gonna call we’re gonna pull up the ad quote thing this will be a test quote I will and will submit it and we see the modal went away and we got logged out here saved so it looks like it was successful let’s go back to parse comm here and check out our data browser this is a visual representation of all the data that we save here so I’m going to choose code match quotes as my app and then we’re gonna go to data browser tab here and inside here we should see that it created the class quote for us automatically it did right here and inside this class we have object we see by is the what string well and quote text is test quote we also get a few other things here we get a unique identifier an object ID and two dates one for the data was created and the last time it was updated that’s great okay so now let’s go back to our demo here now we need to focus on getting these things back out of parse so we want to get the all the quotes and display them one by one in this feed style template here let’s go back to our HTML and see how this is set up make this a little bit bigger here we’re gonna go back up right here so I have this div that has an idea of quote list and inside we have this little block which represents a single quote so what we want to do is we want to turn this into a template that we can reuse and stick dynamic values in there so we’re gonna use handlebars for that handlebars is a HTML template little JavaScript program that does HTML templating really well so we’re going to create a template out of this I’m gonna cut this out of the HTML here and we’re going to just empty that take out the whitespace and then down here at the

bottom we’re going to stick this in script tags so it’s gonna be script type is text slash X handlebars template and we’ll give it an ID so it’s easy to grab and it’ll be single quote template close out our script tags and then we will paste in that HTML I’ll get my indentation set here okay and now what we’re going to want to do is this is the quote text here let’s take that out and replace it with a variable we’re going to name our variable the same as we did our key which is quote text and then the person is the attribution that key was just by so we’re gonna have handlebars replace these variables which are in double curly braces that’s how it knows with the dynamic values that we grabbed from parse comm so of course to be able to use handlebars we’re gonna have to include it so we’re gonna go to handlebars J Escom and will download it here and I’m just going to save this into screencast web JavaScript’s and it’s just gonna be handlebars J s alright so that is done go back here and we see it there and let’s not forget to include that in the project okay so now we have access to handlebars we have this single quote template set up since it’s in script tags it does not get rendered automatically on page load we see we should have an empty list here because we cut that out the static HTML of our list and we now can work with this template so now we’re going to go back to app dot j s and we’re gonna need a new function here we’re gonna need get quotes so let’s create that function get close and inside this we’re gonna have to ask parse for all the quotes so to do that we’re gonna start by again telling you what class to look in so we’re gonna make var quote with a big Q and that’s going to be parsed object dot extend we’re gonna pass in that string quote so it knows what bucket to look in and now from this we’re gonna create a query a query is how you get data out of parse so far query is equal to new parse query and then you pass this the class that you’re looking at so this tells it what bucket to look in and then query is our object that we can start setting parameters and constraints on so there’s a whole bunch of stuff you can do with this we’re going to keep it really simple we’re gonna call query dot descending is going to tell us how to order the results that come back to us we just passed this a key I’m going to use created at we saw earlier that this is given to us for free on every object and the descending is going to basically say give me the newest ones first we’ll also limit it to 25 results so that this page does not get overwhelming you can put as many of these constraints as you want on query once we’re all set we’re gonna call query dot find which is actually going to hit parse comm with this query object they’re gonna send back all the results that match so we will get one of two callbacks success which will come which will have her own array of results or we will get error which will pass back an error object and we’ll do the same thing as before we’re just going to log this out error message alright but if we do have a success what we’re going to want to do is we’re going to grab this template fill in the values and then stick it in the quote list div right okay so this right here is where we’re sticking things let’s first compile our template with handlebars so let’s make a new variable to hold the template and then we’re gonna call handlebars dot compile and then we just pass it a jQuery selector well we use a jQuery selector to find this script tag that holds our template that’s why we have an ID so we can grab it real simply and then we’re gonna grab the HTML out of what it finds all right so handlebars is going to find this and compile it so it knows where these variables go and then after that we’re gonna want to iterate over the results so we’re gonna use jQuery again for that we’re gonna get the results and

we’re gonna use each so inside this block this will execute once for every result we get back let’s start by grabbing e is the element that we are iterating on and let’s store the value of e got to jason we’re gonna serialize it to jason and store it in just work on a queue and then we’re gonna grab where we’re going to append this which is quote list or you’re called dot append and then we’re gonna pass a pen this template that we’ve created up here and to template we’re gonna pass queue so this is the json serialized object that we are iterating over and we’re passing this to the template which is then going to fill in these two variables which are conveniently named the exact same as the keys and we’re appending that to this quote list so for every one we’re going to add another block in this quote list okay so if the only thing that we have to do here is if this is called more than once we’re gonna get a double list or a triple list of quotes so let’s say if there’s a success before we do anything else let’s just find this quote list and empty it out so we’re just gonna call HTML and pass it an empty string and that that will empty it out also we never call it get quotes anywhere we’re gonna need to do that so let’s use that in or do that in document dot ready so once the page loads we will get two quotes okay so let’s save both of these files and we’re gonna go back over here and refresh the page and we see that once the page loads it got the quotes it found my test quote which is the one we submitted let’s add one more piece of functionality here and say once this once this save quote has been successful let’s also refresh this quote list so that way when we submit a quote we won’t have to refresh to be able to see it we’ll see it right away so before we close this modal let’s also call get quotes right here okay so let’s go back here we will refresh the page so that last little addition is in here and let’s try adding a quote and seeing if it shows up right away another your great quote well I will submit it and we see that this is the newest one it’s showing up first because we had that descending by creative date in there and everything seems to be working so we got it up and running with parse we see all the quotes we can add quotes and they show up automatically awesome okay so let’s go back actually let’s move on to the iOS version of this app we have Xcode up here we’re just moving right into it here we’re going to create a new Xcode project and we’re gonna use their starter project master detail application click Next and we’re gonna call it code mash quotes and same Q here and we’re gonna make this just for iPhone we’re gonna use storyboards and a RC I’m gonna save this in my screencast iOS directory alright so first I want to show you what we’re starting with here this master detail application does give you a lot of nice functionality to start with so I’m just going to click run here and that’ll bring up the simulator okay so what we have here is just a basic table view and we can the default functionality here is you can add these and it adds a timestamp here and you drill down into the detail view so what we’re going to do with this is we’re going to list all the quotes here we’re gonna list all the authors of the quotes in here and then you’re going to be able to drill down and see the entire quote also we’re going to have this plus

button actually pop up a modal dialog that lets us input a new quote so this is our starting point we’re gonna be going from here so there’s a few things you have to do when you’re starting out with an iOS app the very first one which probably won’t surprise you is we have to include the parse SDK so I already have it downloaded here we’re just going to drag parsed up framework into our frameworks and we’re going to make sure that we have this check copy items in the destination group folder so if we go back to parse comm and we go to quick start and we choose iOS this time we’ll see that we have two options just like before a new project or existing project the new project is will get you up and running a little bit faster but it doesn’t use storyboards by default and I am going to use storyboards for this demo so we’re going to choose existing project and we’re going to use the base that we just created there so let’s go on here to code mesh quotes and there’s a few things that we have to do first unfortunately this is something that is really nice that it takes care of for you when you choose their starter project and it adds all these libraries for you since we’re not using that I am gonna have to do that manually so bear with me for a second here while we add all these libraries so you click on your project here and then you go to build phases link binary with libraries and this is where we’re going to add all these libraries so audio toolbox you all right once we add those we’re just gonna select all of them and for tidiness we’re just going to drag those right into the frameworks folder and roll that up so we don’t have to look at it okay so now we’re done with that the next thing you have to do is in your appdelegate.m we are going to import ours and then in our application did finish launching with options we’re going to initialize parse so we did this in our JavaScript application as well we also do it in here and it gives you this nicely filled in with the appropriate keys based on the app that you have selected so we can just copy and paste this right from here into did finish launching with options okay so now just like the JavaScript once we include the SDK and initialize parse we can start working with parse right away so for this list view this table view controller parse comm does actually give you a starting point for this let’s go check it out in their documentation they have what’s called a PF query table view controller this is a table view controller that knows how to talk to parse it knows how do you get results and display them in table view cells and takes care of a lot of things for you unfortunately like before I mentioned that they don’t use storyboards by default so I actually improved this a little bit we’re going to user interface here and then we go to PF query table view controller they have this template file that you can use it’s a subclass of the table view controller so if you go here and then go to Forks you’ll see mine up top here well view fork and then this is actually what we’re going to use this is just a modification of the template they have that uses storyboards so let’s view raw here and we’re going to use this in just a second so let’s go back to our Xcode project and we’ll bring this back foot width okay so in our master view controller this is the table view controller by default we’re going to import parse so it knows what we’re talking about here before the headers and then weird it’s a subclass of table view controller so we can just

take this and replace it with PF query table view controller so now let’s go into our M file and this is where we’re going to copy over everything after the implementation so right after here we’re going to take from here all the way to the bottom and we’re going to copy it and from I I’m going to take from here down we’re just going to copy over everything here okay so now we have a file that knows how to talk to parse and there’s just two things that we have to do here we have to set the class name so it knows what class to look at and we know this is capital Q quote and then this text key is what by default is going to show up in the table view cell on the master view controller so we just replaced this with the key of the string in the PF object that we want to use and I said we’re gonna choose to show the authors of the quote and then drill down to see the entire quote so this is just gonna be by this is our attribution key and that’s all we have to do let’s go to the detail view control this is what showed when you drill down and we’re gonna go into the implementation file here and we are going to just replace this self dot detail item which is the item that’s passed to this controller and instead of description we’re gonna do object for key and we’re just going to pass it quote text so this is going to say there’s already a string filled into here we saw that before this is just going to fill that string in with whatever’s in quote text so let’s run this and see what happens it says loading from parse we have two quotes in here both from will we drilled down and we see the quote text awesome okay so we got this working now let’s work on adding quotes in here so to do that we’re gonna go to our storyboard here and take a look if you’re not familiar with storyboards we’ll just do a quick run-through here so we have this master detail view controller here and this is the table view cell that we drill through into here so we’re going to create another one that’s a modal pop-up from here and that’s going to display the form where we create the quote so let’s actually do the code first we’re gonna add a couple files it’s going to be an objective-c class and it’s just going to be a uiviewcontroller and we’re gonna call this the add quote view controller okay so in our add quote view controller there’s just a couple things we need to do here first we are going to set up a couple IB outlets so one is going to be a UI text field and that’s gonna be the little one we’re gonna call that the attribution and then let’s make another one for the actual quote text that’s gonna be a UI text view so it could be a little bigger and we’re gonna call this quote text excellent and then we’re gonna need two methods in here one just called done and the other is gonna be easy all right so done is simple this is just gonna be self dismissed view controller and we’re gonna say an animated yes and we don’t care about the completion so we will ignore that save is gonna be a little different save is where we need to grab the values so we’re gonna have these two text input fields one is going to be a text view one’s gonna be a text field what we’re gonna want to grab the values of these and save them to parse so similar to the JavaScript we’re gonna need to tell it what kind of class were working with here so we’re going to create a new PF object oops so before we can create a PF object we need to import the headers so it knows what the heck we’re talking about we’ve done that it should know what PF object is great and we’re gonna

call this quote and this is going to be PF object object with class name and this is where we’re going to set it to capital Q quote all right so now quote is what we store our data in here just like before so it’s going to be we’re gonna call quote set object and then this is going to be the value and then we’ll set the key because iOS is backwards like that so this is going to be self let’s do the quote text first quote text next four key quote text so let’s and we’ll do the same thing for the attribution so quote set object itself attribution look at the text from that and the key is going to be by all right so once we’re done with that we’re gonna call quote save and it has a couple different methods here we’re gonna do save in background with block this won’t block the main thread and it will give us a call back when it’s done so if it succeeded there won’t be an error so we’ll say if no error then we’re just gonna call done so that’ll be self done and we’re not going to worry about whether it fails right now normally you would definitely want to do some error caching but for simplicity we’re not going to worry about it so this is all we have to do in code let’s go to storyboards and actually make this magic happen here okay so here is our storyboard let’s add a new view controller up here and we’re going to tell it what it is here we’re gonna set its class to the add quote view controller and then let’s add in a couple elements in here let’s first start with uh you have a navigation bar so it can have a title all right so the title be out of quote and then let’s give it two buttons here so we’ll make the one on the right be save and this one will make cancel ok so now let’s add the text fields get a tiny text field in here and then we’ll have a bigger textview for the actual quote text and let’s just give that a little label here so that’s a placeholder that says by holding placeholders down that’ll say bye and then let’s give this just a little background here because it’s difficult to see otherwise the background color just this really light gray all right so now we have all the fields that we care about let’s go to our controller here and start hooking things up so we have our attribution we’ll hook that up to this text field and we have our code text we’ll hook it up to this textview we have done which will trigger on the cancel button and then we have save which will trigger on the Save button now let’s hook this up to the other one here on our master view controller let’s

add a bar button item down here and we’ll make this an ADD button this will be adding a quote and then we just going to right click drag from here to this view controller and make it a modal all right so that should be all that we have to do here save when it’s successful will dismiss itself and I’ll show back to this list view so let’s just do one more nice little thing and we’ll say when this view is loaded we want to refresh the cells so we’ll go to our master view controller dot M here and we’re just going to find viewwillappear and we’ll call cell load objects we’ll reload this ListView all right so let’s give it a try save everything here and run so let’s click add a quote here it brings up our dialog box let’s do a quote I’m in the simulator by iOS simulator we’re gonna call save here we see it shows up automatically we can drill through them in the simulator do this we can cancel everything is good so another thing to notice is that something you get for free here is a nice pull-to-refresh we could also do that to refresh and now we have our iOS app working I do see one problem though and that is there’s no validation here so these could be empty and we can save it anyway and we would have an empty cell here that’s not really great so let’s think of a way to fix that without having to write client-side code right so if we want a very valid validate that these things are not empty we could write some validation on every client application we have we could write it for iOS we could write it for JavaScript but the right place to do this is really in the cloud on the servers before it’s saved so parse does give us a way to do that and that’s what we’re looking at next it’s called cloud code and we’re gonna write some right here so they have just a tiny terminal utility that you can use here so I have my terminal and I’m in the cloud directory here and I’m just going to do parse new and then I’m going to give it the the project name we’re just going to call it cloud code it’s gonna ask me to log in from the terminal here so I’m gonna give it my email and then my password and it’s gonna see that we have three apps and I’m gonna say we want to do this for code match quotes so we’re gonna enter one and now we’re all set up you see we have a new directory in here for cloud code we have a config file that has some of our keys and then in cloud we have mange a s and this is where we’re actually going to be working all right so what we want to do is we want to do so you can actually do functions in here and have functions call from the cloud but what we’re gonna do is parse that cloud dot before save we’re gonna give it this class of quote so this is gonna be called before any quote object is saved and that’s exactly what we want to do so if we want to change something with validation we don’t have to update every one of our client applications we can do it from one central location and also this can be updated without having to wait for an iOS review process or anything like that that might slow you down so let’s let’s get some validation in here we’ll call response dot success if we want it to be allowed to be saved or response dot error if we don’t so let’s start by grabbing the variables that we need here this is just JavaScript by the way this is running on the cloud but it’s the same JavaScript syntax as we used before the object that we’re gonna be saving or that is trying to be saved is in request object so let’s grab that with var we’ll call it quote text and this is gonna be request dot object and we’re gonna use our getters and setters here to safely get this so we’ll cook it and then we’ll pass it the string which is quote text do the same for the attribution request dot object get by alright so now we have these two values that we’re trying to save let’s check let’s say if quote text that length and since this is true the– if it evaluates to zero it’ll be false which means it’s empty but if it is good let’s call response dot success

otherwise response that error and we can pass it in an error message okay so we don’t want the quote text to be blank but an attribution could actually be blanked so let’s check for that too so let’s say if the quote text exists which is this instead of calling response to success let’s check for something else so let’s see if the attribution length alright so if both of these are filled in no mess no fuss we’re just gonna call response dot success if not let’s actually set this attribution to anonymous so we’re gonna say request dot object dot set and we’re gonna grab it with the key by and we’re gonna pass it a string none of us so this is actually going to take what is trying to be saved and it’s going to overwrite it it’s gonna get request that object which is the object they’re trying to save and it’s gonna set for the key by this string and it’s gonna override whatever was in there once that’s done then we can call response that success all right so now to deploy this it’s very simple we just go right back we save this go back to our terminal and then we call parse Oh first we actually have to go into our directory cloud code once we’re in here now we can do parse deploy this is gonna upload it to the cloud it’s gonna get it all everything up and running and it says new release is name v1 that’s just increments every time you do it and now let’s go back to this okay so I have not recompiled I have not rerun this is the exact same thing let’s try to add something with no quote text and we get an error error what is a quote without text well cancel let’s go back to the witches let’s make this empty empty what is it quote without text awesome so let’s see what happens if we do have a quote but no attribution now it’s saved and it’s automatically put with anonymous all right so we saw how easy it is to create an app with parse using parses the back end we got a demo up and running very quickly on a web app in iOS app and we also have some business logic deployed to the server side and we can update this at any time without having to update the code in our our code in our client applications so I hope you enjoyed the demo I definitely enjoy working with parse it’s great for rapid prototyping if you have any questions about this demo the screencast anything else hit me up at Twitter and we’ll Vegas WI ll da GES thank you very much for watching