Building a Parse.com Enabled PhoneGap App - Part 2
Building a Parse.com Enabled PhoneGap App - Part 2
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
There are two main technologies I'll be using for this application. They are PhoneGap and Parse. In this blog entry I'm going to focus on the set up steps you'll need to make use of these technologies.
Let's tackle the easy one first - PhoneGap. In order to circumvent the normal Getting Started process, I'm just going to make use of PhoneGap Build. PhoneGap Build is a free service that can take care of building out your native applications for you. Using PhoneGap at the command line is easy. Using PhoneGap Build is even easier. Signing up requires an Adobe or Github username, and for more details, I encourage you to read my Adobe Developer Connection article: PhoneGap Build Levels Up. I'm not even going to worry about this aspect till later in the series so you can entirely skip this part for now if you want.
Parse's set up is slightly more complex so the rest of the entry will focus on that process. If you plan on following along and building your own copy of the application, you will need to follow these steps. (And do leave me a comment below if you plan on doing this - I'd just like to know who is paying attention. ;)
First, navigate over to the Parse signup.
Note that signup is 100% free and doesn't require a credit card. After signing up, you are immediately dropped into a form to create a new application:
Now this part is a bit odd - after naming your first application, you get brought back to the main Parse site. Just click the Dashboard link, which will bring you to a listing of your apps - all one of them:
Click the application and you're brought into the detail view of the application. Here you will want to make note of the keys to the left. There are two important values here, the Application ID and the JavaScript Key.
You won't need them just yet, but keep in mind where they are. Finally, click Downloads.
You will be interested in the JavaScript section. Development links to a readable copy of the JavaScript API whereas Production leads to the minified version. The blank project isn't necessarily blank. It actually has a bit of CSS and some code that automatically creates an object for you. You want to grab the minified version of the JavaScript library and drop it into a new folder.
I've set up a folder for the root of my application called cowtipline. In there is a folder called "js" where I saved the Parse JavaScript library. I then made a very simple index.html file:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/parse-1.1.2.min.js"></script>
<script>
$(document).ready(function() {
Parse.initialize("oe3dboiG0RzJNULxKvdHYGWEb3Cq7mzHRC3Dwh6E", "cR8whmMjybMoXUqfAzhxUJSiBXw3QPt7ZB4bRGw8");
});
</script>
</head>
<body>
</body>
</html>
I've provided my own Application ID and JavaScript Keys above. (And in case you're wondering about the safety of that - stay with me - the last entry in the series will discuss how we can secure those values.)
If you run this - nothing will happen. But we've got the basics done and can now start coding. I've also set up the GitHub repository here: https://github.com/cfjedimaster/CowTipLine
In the next entry I'll begin setting up the UI based on the mockups from the previous entry. I'll also add the first set of logic to let you start creating Tips from the application.
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Published at DZone with permission of Raymond Camden , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}