Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How I Develop Mobile Web Apps

DZone's Guide to

How I Develop Mobile Web Apps

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

In this article I will share with you the process that I follow to develop mobile web apps. According to the answers that you provided in my reader survey, many of you are curious about this topic.

Here’s my approach.

For most projects, I perform two or more iterations with the following steps.

Requirements Gathering

As you would suspect, for this step I prefer to go to the people who know the most about what is needed, preferably the end users of the future app or software.

Development Environment Setup

This is where I set up my workstation to develop the project. It entails creating directories for source code, documentation and other resources; setting up source control (I normally use Bitbucket); and installing code libraries, frameworks and third-party software needed for the project.

Low Fidelity UI Prototyping

This is where I create low-fidelity prototypes of the user interface of the app. I useBalsamiq and Pencil as the tools for this step. I prefer short work sessions with the users or clients until they are satisfied with the prototypes.

High Fidelity UI Prototyping

I also make high-fidelity prototypes of the UI, based on the low-fidelity prototypes. I prefer to create these prototypes with jQuery Mobile due to the ease of use of this framework. As with the previous step, I work with users or clients until we agree on the prototypes.

UI Implementation with Mock Data

Once I have UI prototypes that my clients believe are very close to the final product, I start to implement the UI of the app. During this phase I use mock data to populate the screens. I also simulate network connections and other processes that need to be in place in the production app.

The goal here is to have a working UI that users can test on an emulator or physical device. I use emulators such as Ripple and Genymotion, as well as the iOS emulators provided with Xcode.

Once I finish this stage, I know that I can focus on implementing the controllers and services that will drive the UI, with the confidence that there will be little changes to the UI going forward.

Implementation of Client-Side Controllers and Services

The client-side controllers and services drive the app’s UI and perform tasks such as communications with the server and local data access. During this phase, I perform mini-iterations consisting of the following steps:

  • Create behavior-driven tests for the controllers and services layer.
  • Implement the controller and services layer functions.
  • Wire the UI to the controller and remove mock data.

The test-first approach makes it easy to create lean controller and service methods that do what’s needed for the specific task, without code bloat.

It’s simple to create good behavior-driven tests once the UI is well defined. If I need to make changes to the UI down the road, the tests also make it easy to find the places where I need to change the controller or services to respond to the UI changes.

Implementation of Server-Side Endpoints and Services

The server-side endpoints and services store application data and run tasks on behalf of the mobile app. During this phase, I perform mini-iterations consisting of the following steps:

  • Create behavior-driven tests of endpoints with fake data, using Postman or similar tools.
  • Implement the endpoints.
  • Create behavior-driven tests for the services layer (authentication, authorization, data access, etc.).
  • Implement the services layer.

Tests on Emulator and Physical Devices

This phase is all about end-to-end tests of the application on different emulators and physical devices. I first perform functional tests that cover the features of the app; then I move on to non-functional tests, paying particular attention to usability and performance issues.

Here again I use emulators such as Ripple and Genymotion, as well as the iOS provided with Xcode.

Packaging

The packaging step is where I package the application (if needed) so it can be deployed through an enterprise portal or app store.

A Question for You

How do you develop your apps? I’d like to know if you have a set process or if you change based on the project.

Share your answers in the comments form below.

Stay Tuned!

Make sure to sign up for my newsletter so you can be among the first to know when new tutorials are available. When you sign up, I will send you a free Mobile User Interface Recipes Kit with mockups packages for two real-world mobile apps.

CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.

Topics:
java ,mobile ,ui ,ux

Published at DZone with permission of Jorge Ramon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}