Click here to close now.


Blog Feed Post

Creating a Tip Calculator Mobile App in with jQuery Mobile and PhoneGap

Smashing Magazine has published a great 4-part article on how to build a Tip Calculator mobile app using various mobile technologies, one of them being jQuery Mobile + PhoneGap. As platform is based on jQuery Mobile + PhoneGap, I figured I will show that it is even faster and easier to build exactly the same app in

Let’s start!

Creating a new mobile app in

The first step is to create a new mobile app in If you don’t have an account, get the free Starter plan. To create a new mobile app takes just a few seconds. This is how it looks when the app builder loads (with updated theme: flat-ui, swatch: B):

Screen Shot 2014-04-02 at 12.49.28 PM

Creating the app UI

The app has two pages:

  1. Main tip calculations page
  2. Settings page (popup)

The UI is built by drag and dropping components into the page and setting their properties. This is how the tip page looks:

Screen Shot 2014-04-02 at 12.56.05 PM

This is how the settings page (popup) looks:

Screen Shot 2014-04-02 at 1.08.57 PM

The page has a Select component to change the tip percent (10%, 15%, 20%).

Performing tip calculations

The Calculate Tip button has a Run JavaScript action defined (on Click event) that does the tip calculations. Here is a screen show which followed by the code:

Screen Shot 2014-04-02 at 8.26.40 PM

Code to calculate the tip:

var billAmount = Number(Apperyio("billAmount").val());
if (billAmount === 0) {
    alert ("Please enter bill amount.");   
var tipFromSettings = localStorage.getItem('tipPercent');
if (tipFromSettings) {
  tipPercent = tipFromSettings;
var tipAmount = billAmount * tipPercent/100 ;
var totalAmount = billAmount + tipAmount;
Apperyio('tipAmount').text('$' + tipAmount.toFixed(2));
Apperyio('totalAmount').text('$' + totalAmount.toFixed(2));

Line 1: Read the value from the input component

Line 3-6: Basic input validation to make sure an amount was entered

Line 8-12: Read the value from local storage. If the value is set, then use it as the tip percent. The tip percent value is saved into local storage in settings popup.

Line 14-15: Perform tip calculations

Line 17-18: Set the tip value and total amount value into the label components (inside the grid)

In the settings popup, when a new percent value is selected (value change event), we save the new value into local storage:

var tip = Apperyio('tipListSettings').val();
localStorage.setItem('tipPercent', tip);

Testing the app

You can test the app right in the browser:

Screen Shot 2014-04-02 at 8.56.18 PM

By scanning the QR code (requires a QR code app), you can also test the app directly on the device.

Publishing as HTML5 mobile app

To publish this app as HTML5 mobile app, simply give the app a sub-domain name. You can also publish using a custom domain:

Screen Shot 2014-04-02 at 9.05.32 PM

After a few seconds, the app is published and live:

Publishing as PhoneGap app

It’s as easy to build a binary for Android or iOS using PhoneGap:

Screen Shot 2014-04-02 at 9.08.11 PM

Once the binary build is done, you will be able to download and then publish the app to the app store.

Summary uses standard mobile technologies such as HTML5, jQuery Mobile, and PhoneGap to create mobile apps. Using a cloud-based visual platform, you dramatically increase speed of development and productivity.

Read the original blog entry...

More Stories By Max Katz

Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past four years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, He is an author of "Practical RichFaces" book (Apress). Max holds a BS in computer science from the University of California, Davis.

Latest Stories
Today air travel is a minefield of delays, hassles and customer disappointment. Airlines struggle to revitalize the experience. GE and M2Mi will demonstrate practical examples of how IoT solutions are helping airlines bring back personalization, reduce trip time and improve reliability. In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect with GE, and Dr. Sarah Cooper, M2Mi's VP Business Development and Engineering, will explore the IoT cloud-based platform technologies driv...
Docker is hot. However, as Docker container use spreads into more mature production pipelines, there can be issues about control of Docker images to ensure they are production-ready. Is a promotion-based model appropriate to control and track the flow of Docker images from development to production? In his session at DevOps Summit, Fred Simon, Co-founder and Chief Architect of JFrog, will demonstrate how to implement a promotion model for Docker images using a binary repository, and then show h...
SYS-CON Events announced today that IBM Cloud Data Services has been named “Bronze Sponsor” of SYS-CON's 17th Cloud Expo, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. IBM Cloud Data Services offers a portfolio of integrated, best-of-breed cloud data services for developers focused on mobile computing and analytics use cases.
As the world moves towards more DevOps and microservices, application deployment to the cloud ought to become a lot simpler. The microservices architecture, which is the basis of many new age distributed systems such as OpenStack, NetFlix and so on, is at the heart of Cloud Foundry - a complete developer-oriented Platform as a Service (PaaS) that is IaaS agnostic and supports vCloud, OpenStack and AWS. In his session at 17th Cloud Expo, Raghavan "Rags" Srinivas, an Architect/Developer Evangeli...
The Internet of Things (IoT) is growing rapidly by extending current technologies, products and networks. By 2020, Cisco estimates there will be 50 billion connected devices. Gartner has forecast revenues of over $300 billion, just to IoT suppliers. Now is the time to figure out how you’ll make money – not just create innovative products. With hundreds of new products and companies jumping into the IoT fray every month, there’s no shortage of innovation. Despite this, McKinsey/VisionMobile data...
DevOps is here to stay because it works. Most businesses using this methodology are already realizing a wide range of real, measurable benefits as a result of implementing DevOps, including the breakdown of inter-departmental silos, faster delivery of new features and more stable operating environments. To take advantage of the cloud’s improved speed and flexibility, development and operations teams need to work together more closely and productively. In his session at DevOps Summit, Prashanth...
In their session at DevOps Summit, Asaf Yigal, co-founder and the VP of Product at, and Tomer Levy, co-founder and CEO of, will explore the entire process that they have undergone – through research, benchmarking, implementation, optimization, and customer success – in developing a processing engine that can handle petabytes of data. They will also discuss the requirements of such an engine in terms of scalability, resilience, security, and availability along with how the archi...
DevOps is gaining traction in the federal government – and for good reasons. Heightened user expectations are pushing IT organizations to accelerate application development and support more innovation. At the same time, budgetary constraints require that agencies find ways to decrease the cost of developing, maintaining, and running applications. IT now faces a daunting task: do more and react faster than ever before – all with fewer resources.
DevOps has often been described in terms of CAMS: Culture, Automation, Measuring, Sharing. While we’ve seen a lot of focus on the “A” and even on the “M”, there are very few examples of why the “C" is equally important in the DevOps equation. In her session at @DevOps Summit, Lori MacVittie, of F5 Networks, will explore HTTP/1 and HTTP/2 along with Microservices to illustrate why a collaborative culture between Dev, Ops, and the Network is critical to ensuring success.
Containers have changed the mind of IT in DevOps. They enable developers to work with dev, test, stage and production environments identically. Containers provide the right abstraction for microservices and many cloud platforms have integrated them into deployment pipelines. DevOps and containers together help companies achieve their business goals faster and more effectively. In his session at DevOps Summit, Ruslan Synytsky, CEO and Co-founder of Jelastic, will review the current landscape of...
Overgrown applications have given way to modular applications, driven by the need to break larger problems into smaller problems. Similarly large monolithic development processes have been forced to be broken into smaller agile development cycles. Looking at trends in software development, microservices architectures meet the same demands. Additional benefits of microservices architectures are compartmentalization and a limited impact of service failure versus a complete software malfunction....
There will be 20 billion IoT devices connected to the Internet soon. What if we could control these devices with our voice, mind, or gestures? What if we could teach these devices how to talk to each other? What if these devices could learn how to interact with us (and each other) to make our lives better? What if Jarvis was real? How can I gain these super powers? In his session at 17th Cloud Expo, Chris Matthieu, co-founder and CTO of Octoblu, will show you!
Developing software for the Internet of Things (IoT) comes with its own set of challenges. Security, privacy, and unified standards are a few key issues. In addition, each IoT product is comprised of at least three separate application components: the software embedded in the device, the backend big-data service, and the mobile application for the end user's controls. Each component is developed by a different team, using different technologies and practices, and deployed to a different stack/...
As a company adopts a DevOps approach to software development, what are key things that both the Dev and Ops side of the business must keep in mind to ensure effective continuous delivery? In his session at DevOps Summit, Mark Hydar, Head of DevOps, Ericsson TV Platforms, will share best practices and provide helpful tips for Ops teams to adopt an open line of communication with the development side of the house to ensure success between the two sides.
The last decade was about virtual machines, but the next one is about containers. Containers enable a service to run on any host at any time. Traditional tools are starting to show cracks because they were not designed for this level of application portability. Now is the time to look at new ways to deploy and manage applications at scale. In his session at @DevOpsSummit, Brian “Redbeard” Harrington, a principal architect at CoreOS, will examine how CoreOS helps teams run in production. Attende...