jQuery Mobile and Parse.com User Sign Up (PART 1 of 2)

Download Project Files:

The project files wont work unless you put your own Application ID & JavaScript key in js/main.js.

Tutorial Required Skills:

Basic HTML & CSS
Basic JavaScript
Basic jQuery

Introduction:

jQuery mobile is an excellent framework for getting your mobile app ideas off the ground fast and with ease. The developers describe it as:

“a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.”

Despite the versatility of the framework it also has its limitations. jQuery Mobile only takes care of the front end / client side aspects of your app. This covers all the user-interface, interactivity and data stored locally on the user’s device but not the back-end / server-side features needed to make mobile apps centralised, social and secure. For these types of features we need to employ a server side database such as MySQL or mongoDB. There is a steep curve to learning how to setup, maintain and code for a fully fledged database. This curve is usually the main barrier stopping beginner app developers from realising their great ideas. This is where the Parse.com service comes in. Parse.com hosts a multitude of great services but the one we are interested in is the Core Data service. This service: “handles everything you need to store data securely and efficiently in the cloud. Store basic data types, including locations and photos, and query across them without spinning up a single server.” It also takes care of “Connect[ing] your users via traditional logins or third party social networks with just a few lines of code.”

Using a combination of jQuery Mobile and Parse.com even the most novice developer can get their ideas off the ground and hopefully this tutorial will fast track the process even further.

Aims:

For simplicity this tutorial is divided in to two parts. The first part will look at setting up a basic jQuery Mobile page and then code up the User Sign Up functionality. The second part will continue by adding the “Log in” functionality and then allowing the user to see a home page.

The specific stages of part 1 go as follows:

Create a jQuery Mobile page (Sign Up Page).
Add a user sign up form.
Listen for the Submit button click event.
Collect the data from the user.
Send the data to Parse.com.
Listen for a response from Parse.com.
Relay the response to the users.

The stages of part two of this tutorial will be very similar but instead of adding a new user to the database Parse.com will check to see if the data the user entered matches up with a record in the database. If so the user will granted access to their “Home Page”.

Lets Begin:

First of all lets take a very brief look at how to setup all the files needed to create a jQuery Mobile application. If you haven’t guessed already by the name, jQuery Mobile is built upon jQuery so we need to include it. Then we need to include the jQuery mobile javaScript and CSS files. Once these files are included we can start using the jQuery Mobile markup to create our interface. For simplicity, in this tutorial we will include the files from a Content Delivery Network (CDN) rather than downloading them and hosting them ourselves. This also has some added benefits in terms of page speeds and cacheing that are out of the scope of this tutorial. We will be using Google’s CDN to serve up our jQuery Mobile files. So when it comes to including jQuery and jQuery Mobile our mark up will look like this:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

User Interface (jQuery Mobile):

Now lets look at how to create an individual page of a jQuery Mobile app. Create a new folder for this tutorial and make sure that from now on you use this folder as the root of your project. Create a HTML file called signup.html in this folder, the contents of which should look like this (see HTML comments for an explanation of what the mark up does):

<!doctype html>
<html>
<head>
 <title>My Mobile App</title>

 <!-- Info about view ports can be found here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Include the javaScript and CSS files for jQuery Mobile --> 
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script> 
 
</head>
<body>


<!-- create a div to contain the single page, the ID most be unique to the page -->
<div data-role="page" id="signup">

 <!-- Create the a header and include a title -->
 <div data-role="header" data-theme="b">
 <h1>My Mobile App</h1>
 </div>

 <!-- Create a div for content -->
 <div data-role="content"> 
 
 <!-- Create a standard html form for the user to complete -->
 <form id="signupform" method="post" action="#">
 <h3> Sign Up: </h2>
 <input type="text" name="username" id="username" placeholder="User Name" required/>
 <input type="password" name="password" id="password" placeholder="Password"/>
 <input type="text" name="email" id="email" placeholder="Email Address" required/>
 </form>

 <!-- Add a submit button -->
 <button id="submit-signup" class="ui-btn">Join Us!</button>

 </div> <!-- Close the content div -->
</div> <!-- Close the page div -->


</body>
</html>

<!doctype html>

<html>

<head>

<title>My Mobile App</title>

</head>

<body>

<h1>My Mobile App</h1>

</div>

</form>

</div>

</div>

</body>

</html>

IMPORTANT: jQuery Mobile uses the data-role attribute to style elements so pay close attention to the mark up, for example, the main page <div> has the attribute: data-role=”page”. For more information about jQuery Mobile pages go HERE.

Now test this in the browser by double clicking the html file in the folder. Hopefully it should look like this (it might help to resize the browser to get a sense of what it would look like on a mobile device):

Sign up to Parse and add the JavaScript files:

Now that the user-interface (UI) is sorted we can start to look at how to integrate with the Parse.com core service. The aim is to detect when the user clicks / touches the “Join Us!” button and then send the user’s information to Parse.com to be processed and if valid, saved to a database.

Before you can start using the Parse.com service you will have to sign up with the Parse.com service here.

Once you have signed up to the Parse.com website we need to include two JavaScript files into our signup.html, the Parse.com JavaScript library and a new JavaScript file for our own custom JavaScript. Again, we will use a CDN to host the Parse.com JavaScript file but we also need to create a new JavaScript file called “main.js” saved into a new folder called “js” in the root folder.

Our root folder should now look like this:

We can include these two Javascript files into the bottom of our signup.html page like so:

</div> <!-- Close the content div -->
</div> <!-- Close the page div -->


<!-- ADD the last two javascript files --> 
<script src="//www.parsecdn.com/js/parse-1.3.2.min.js"></script>
<script src="js/main.js"> </script>

</body>
</html>

</div>

</div>

</body>

</html>

Write the Javascript to bring it all together:

Everything we do from now on goes in to our custom JavaScript file main.js. These are the steps we need to make with JavaScript in order for the user’s data be sent to Parse.com, validated and then a response message sent back:

Initialise the Parse.com class with your application ID & JavaScript key.
Hijack the submit button.
When the button has been clicked get all the information from the form.
Send the information to Parse.com using AJAX (handled by the Parse JavaScript library).
Wait for the Parse.com server to return a message.
Output that message for the user to see.

Application ID & JavaScript key:

To locate your Application ID and JavaScript key for the application database that was created for you on sign up, follow this link to the “getting started” section of the Parse.com documentation. Follow this link to get to the screen below.

The red arrow points at the line of code that we need to copy into the top of main.js. Make sure that you copy it all as it is much longer than the containing box.

The main.js file should now look like this but your app keys should replace the “*******”

Parse.initialize("******************************", "******************************");

1	Parse.initialize("****************************", "****************************");

Submit the Form:

Next we need to hijack the submit button’s click event. We do this from inside the “pagecreate” event. This event is specific to jQuery Mobile and is triggered every time our signup.html file is loaded into the Document Object Model (DOM). Add the code below to main.js and read the comments to help understand what is going on.

// ------------------------------------------------------ SIGN UP PAGE ------- //
// Listen for when the signup page has been created
$(document).on("pagecreate", "#signup", function () {
    
	// Hijack the submit button
   	$('#submit-signup').on('tap', function(e){
        
		// prevent the browser from navigating away from this page
                e.preventDefault();
        
		// NEXT CODE GOES HERE
		
    });
});

// ------------------------------------------------------ SIGN UP PAGE ------- //

// Listen for when the signup page has been created

$(document).on("pagecreate", "#signup", function () {

// Hijack the submit button

$('#submit-signup').on('tap', function(e){

// prevent the browser from navigating away from this page

e.preventDefault();

// NEXT CODE GOES HERE

});

Gather the users information from the form:

Now we collect data from the form ready to post to the Parse.com server. We do this in the section below the JavaScript comment “// NEXT CODE GOES HERE”.

Add the code below to this section of the main.js file and again, read the comments to make sense of what the code is doing.

// retrieve the form values and save them to variables.
var username = $('input[name=username]').val();
var password = $('input[name=password]').val();
var email = $('input[name=email]').val();

// retrieve the form values and save them to variables.

var username = $('input[name=username]').val();

var password = $('input[name=password]').val();

var email = $('input[name=email]').val();

Create a Parse object from the variables:

Next we package the form data into a Parse User object ready to post via AJAX. The three fields username, password and email are required but you can also add your own custom fields as well. Here we are adding one custom field called score that we will use later on. I have also commented out several other examples of custom fields you might want to add depending on your situation. This code goes just below the previous code.

// create a new user object client side using the values retrieved from the form
var user = new Parse.User();

// set the properties of the user
user.set("username", username);
user.set("password", password);
user.set("email", email);
 
// Create a custom field for the user (there is no limit to the number of custom records)
user.set("score", 0);
  
// other custom fields could be added like this:
// user.set("user-status", "I am happy");
// user.set("nickname", "super-user");

// create a new user object client side using the values retrieved from the form

var user = new Parse.User();

// set the properties of the user

user.set("username", username);

user.set("password", password);

user.set("email", email);

// Create a custom field for the user (there is no limit to the number of custom records)

user.set("score", 0);

// other custom fields could be added like this:

// user.set("user-status", "I am happy");

// user.set("nickname", "super-user");

Send and respond:

Now all thats left to do is send the user’s data to Parse.com, wait for the response and then relay the response to the user. The code below sends the data to Parse.com and has two callback functions; one to deal with a success and the other for failure. Eventually we will navigate to the signin.html page after the user has successfully signed up but for now we will just alert the user to the response. Add the code below to the previous code:

// save the user to the cloud storage
user.signUp(null, {
     success: function(user) {
           // return the success response
           alert("Success!");
     },
     error: function(user, error) {
            // return the error response
            alert("Error: " + error.code + " " + error.message);
      }
});

// save the user to the cloud storage

user.signUp(null, {

success: function(user) {

// return the success response

alert("Success!");

error: function(user, error) {

// return the error response

alert("Error: " + error.code + " " + error.message);

}

});

That’s it. Well kind of. At least for now. The data has been sent to Parse.com and Parse.com has checked to make sure no one else is signed up to your app with those credentials. Parse.com also checks to make sure that the user has submitted a valid email address. If all goes well then the user will be added to the Users table for your app at Parse.com. Go ahead and try it out; fill out the form. As a test I always try:

Username: admin
Password: admin
admin@admin.co.uk

Hopefully when you press the “Join Us” button you should see the screen below:

If you receive the success message then the user has been added to the database. We can get further confirmation by visit the Parse.com website and looking at the raw data that has been saved. To locate the User table at Parse.com follow the link HERE. Now click on the button where the arrow is pointing below (you will need to hover over the box to reveal the button):

When you get to the window below, click the User button on the left and then you should see a table on the right with the new users credentials horizontally across the screen. Thats proof that everything is coded up correctly.

Next Time:

Now that you have finished the “Sign In” functionality, in the next tutorial we will look at allowing the user to log in. Once they have logged in they will see a message specific to them with dynamic content from the database.

Thanks for playing along 😛

Download Project Files:

Project Files (Part 1)

javascript , jQuery , mobile , Parse.com , User login

Blog

jQuery Mobile and Parse.com User Sign Up (PART 1 of 2)

Recent Posts