How to Build a User Registration System for a jQuery Mobile Application

User registration is the foundation that allows you to provide a personalized experience for the users of your mobile apps. In this jQuery Mobile tutorial we are going to create a user registration system for a jQuery Mobile application.

signup-flow-2

In a previous jQuery Mobile tutorial of this series we designed and created the jQuery Mobile pages that we will use in the application that is the subject of this article. In a recent NodeJs and MongoDB tutorial, we also created the backend that will perform the registrations and store the user profiles.

Now we are going to connect the two pieces and create and end-to-end system that allows users to register with the application. Let’s start by creating a few helper files.

Continue Reading →

Using MongoDB and Mongoose for User Registration, Login and Logout in a Mobile Application

This mobile application tutorial shows you how to create a user registration, login and logout backend using MongoDB and Mongoose. This article is part of a series of mobile application development tutorials that I have been publishing on my blog MiamiCoder.com, which shows you how to create a Meeting Room Booking mobile application. This app will be used to browse an inventory of meeting rooms and reserve rooms for conference calls and other types of events.

Using MongoDB and Mongoose for User Registration, Login and Logout in a Mobile Application

The backend that we will create in this article will connect with the user account management screens that we built in a previous chapter of this series. This backend will consist of the following modules:

Continue Reading →

Mobile UI Patterns – A Flowchart for User Registration, Login and Logout

In this mobile UI patterns article we will build a flowchart depicting the screens needed to handle user registration, login and logout in a mobile application. As a UX designer, it’s very important that you are familiar with these screens and how the interact with each other.

Let’s start by taking a look at the typical application launch sequence.

An Application’s Launch Sequence

A large number of applications have a launch sequence that takes users to a Landing Page or Landing Screen, however you like to call it, from where they have access to deeper areas of the app. We could draw this UI pattern like this:

screen-flow-app-launch

The Login Flowchart

Most apps provide personalization features that require a user to have an account in the app. In those applications the launch sequence changes quite a bit. For starters, when users arrive at the Landing Page and you don’t know who they are, you need to redirect them to a Login Page where they will enter their credentials:

screen-flow-login-locked

Continue Reading →