Blog

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

feature-image

Download Project Files:

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

Project Files (Part 1)

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 endclient 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:

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

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 page

Sign Up Page

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:

File structure

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

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.

app keys

 

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 “*******”

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.

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.

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.

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:

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:

success

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

Check

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.

raw data

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 :P

Download Project Files:

Project Files (Part 1)