Ten Tips for Designing, Implementing and Packaging Apps for Mobile Devices

By David Talbot  |   Email     Print  Post a comment

Building a mobile app capable of running on multiple platforms can be a daunting task. 

Intel Custom content

Different operating systems, screen sizes, offline capabilities and more can be a challenge. A growing number of developers are opting to build their apps in cross-platform HTML5 code that can be compiled into native apps that can be sold in app stores and markets.

There are a lot of great cross-platform HTML5 tools you can use. One freely available tool is Intel XDK New that you can download from http://xdk-software.intel.com/. The Intel XDK New takes the best-of-breed technologies that enable mobile apps with HTML5 and puts it into a package that is easy to use.

Intel has put together a great online course called, “ FastTrack to the Intel XDK New” to get you started that you can find at http://software.intel.com/en-us/html5/articles/fast-track-to-intel-xdk-new. It is a full length e-Book that includes code examples and easy-to-follow instructional videos. Below are ten tips that to help you get started building your first mobile app using the Intel XDK New.

The Ten Tips

Tip 1: Keeping Data Responsive

Almost every modern mobile application uses data in some capacity. Business applications live and breathe data. Even games need to persist game state and be able to send the player’s moves over the internet.

If your app can’t paint your user interface to the screen until a REST service call is completed, then users will perceive your performance as poor. For this reason, it is best to design your app to work on a local copy of data that can be asynchronously synchronized over the internet.

This approach can be as simple as initializing a variable with values that can be used to paint the user interface placeholders until the AJAX call completes to get the updated data.

Tip 2: More Sophisticated Data Handling

If you need to persist the data between sessions on the device you can use WebSQL. WebSQL allows you to store data locally on-device persisted between launches of your app. It also allows you to store and retrieve data using a streamlined sub-set of SQL. In addition to this basic SQL functionality, you can also use JSON to create and populate tables inside of the WebSQL database to simplify bridging AJAX results into persistent and queryable data.

If you are unfamiliar with working how to work with WebSQL, then you can find more information in the Intel Fast Track guide on page 4-25 of Unit 4.

Tip 3: Making AJAX Requests

AJAX is the preferred means of getting and setting data on remote servers over the internet. The Intel XDK New includes jQuery mobile which can make AJAX requests using $.ajax or $.getJSON which most web developers are familiar with. What might catch some developers by surprise is cross-domain security restrictions.

Because your code is running on the mobile device and not served from the remote server you’re making JSON requests to, you will need to either enable CORS on your server or use $.getJSON to make JSON-P requests to the server. CORS is the preferred method as it is more straightforward to enable in your server side language. If it isn’t supported, you will need to use the JSON-P based approach.

For more information on working with data and on making AJAX requests in the Intel XDK New, see page 4-8 in Unit 4 of the FastTrack Guide.

Tip 4: Working with Lists

A surprising number of mobile apps boil down to allowing a user to navigate lists. For example, on Groupon you navigate lists of daily deals, Gmail navigates lists of emails, and bank apps navigate lists of transactions. Within jQuery mobile you can define lists using listview that you can populate from your data using simple string templates.

The humble listview is not limited to simply providing lists of text. You can use the listview to create listings of pictures, products, animations and more. If you have a larger list, the listview can be configured to include a search box that provides find-as-you-type filtering.

To get started with the listview in the Intel XDK New, check out section 4-11 of the FastTrack guide. You can also check out the video walkthrough 4-2 if you prefer to see it in action.

Tip 5: Going Native

To access native device resources, the Intel XDK New leverages the Apache Cordova framework. This framework allows you to step outside of the typical security restrictions of a web page and access key device hardware and certain OS restricted data in a cross-platform way.

Cordova allows you to access device hardware like the camera, accelerometer, compass and GPS (6-1) . In addition to this hardware access you can also access protected operating system data like the device’s contact list (4-28). You can also launch the device’s default phone dialer, email and navigation app pointed at a specific address or phone number (7-8).

Tip 6: Building Forms

The Intel XDK New leverages the jQuery mobile toolkit to build forms (5-2). The XDK allows you to build forms visually via drag and drop or by modifying the HTML code. These widgets contain all of the modern markup handling to insure that native OS widgets are used for input wherever possible. For example, number fields trigger the native device’s number input widget and date fields trigger the native OS date picker.

Adding validation to your forms is as simple as adding attributes to the form tags (5-13). If you need more control, you can even do custom validation and theming.

Once your form is complete and the user’s input has been validated, jQuery mobile allows you to serialize the entire form’s data in a form that is AJAX ready for persistence (5-21).

The walk-through videos in section 5 of the FastTrack documentation will get you building forms, validating them and submitting them to your server in no time.

Tip 7: Theming

After building your mobile app using the Intel XDK New with jQuery mobile, you have multiple options to theme your app. If you want to custom build your CSS by hand, you can modify the included CSS files yourself. You can also go to the jQuery mobile themeroller (9-21) to build your custom theme in-browser.

Walkthrough 9-3 is a great introduction to using themeroller to customize the look and feel of your application with minimal effort.

Tip 8: Get Pushy

Push notifications are an entire new communications medium. Push notifications allow you to send a message from the server to the user’s device. When it arrives on the user’s device, it pops an icon at the top of the device. Some mobile operating systems allow the message to include images and buttons right inside of the push notification. Clicking the push notification can launch your app with a specific event triggered so you can navigate the user to a specific screen in your app.

The Intel XDK New includes out-of-the-box support for the 4 biggest push notification delivery services so getting started is easy (7-20). No matter which push delivery service you choose, you will need to set up an account with the company behind each device platform you need to support as policies of permissible use vary by operating system for spam control reasons.

You can test push notifications in the emulator without using a push delivery service or registering with a device provider.

Tip 9: Multimedia

Audio and Video support is enabled primarily by HTML5 audio and video tags (8-1). You can also embed YouTube and Vimeo videos using the embed tags provided from these vendor’s web sites the same way you would to embed their videos on any other web page.

Tip 10: Hitting the Market

After you’ve designed and debugged your world class app, you’re ready to go global and submit your app to the various markets and app stores. You will need to create a developer account with each of the app stores you want to submit to. This is necessary as each platform you want to submit your app to will provide one or more “publisher keys” to identify you and/or “application keys” to identify your specific app. Some app stores require a registration fee and allow you to submit apps for free and others charge for every submission to the store. Make sure you’re paying attention and understand the costs with each app store before submitting too many builds.

Once you have your developer keys, you can use the Intel XDK New’s build screens (10-2). On these screens you will define the marketing information for your app like the name and preview pictures as well as the kinds of permissions your app will need from the user to run.

Conclusion

Getting started building cross-platform apps using the Intel XDK New is quick and easy. The included tools make building forms, working with the native device and getting into the market a snap. If you are new to mobile development, then the hopefully these tips will help you build a better application. If you are new to the Intel XDK New, then hopefully the links above along with the Intel Fast Track will help you build rock solid mobile apps quicker and easier today!

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.