In this article I talk about Sencha Touch best practices, specifically for developing user interfaces. I use the following practices in my projects. I think they will help you when developing Sencha Touch UIs.
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 jorgeramon.me, 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.
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:
- Router (using Node.js and Express)
- Data model to represent a user (using Mongoose)
- Database (using MongoDB)
My Sencha Touch book is now updated for Sencha Touch 2.4. The book will teach you how to create a Sencha Touch 2.4 application. Starting with UI mockups, and ending with a production build of the app.
These are the specific topics that you will learn:
- The building blocks of a Sencha Touch application.
- How to implement the Model-View-Controller pattern in a Sencha Touch application.
- How to create an application with multiple views, and how to implement intuitive navigation patterns.
- How to create list-based and master-detail user interfaces in a Sencha Touch application.
- How to use Sencha Touch forms to capture and validate user input.
- How a Sencha Touch app leverages HTML5 local storage to save data on the device.
- How to scaffold, minify, and deploy a Sencha Touch app to production using Sencha Cmd.
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:
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: