Welcome!

Blog Feed Post

Creating a Tip Calculator Mobile App in Appery.io 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 Appery.io 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 Appery.io.

Let’s start!

Creating a new mobile app in Appery.io

The first step is to create a new mobile app in Appery.io. If you don’t have an Appery.io 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var billAmount = Number(Apperyio("billAmount").val());
 
if (billAmount === 0) {
    alert ("Please enter bill amount.");   
    return;
}
 
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:

http://tip.app.appery.io

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

Appery.io 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 heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.

Latest Stories
SYS-CON Events announced today that MobiDev will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business managers to a full-scale mobile software company with over 200 develope...
WebRTC is bringing significant change to the communications landscape that will bridge the worlds of web and telephony, making the Internet the new standard for communications. Cloud9 took the road less traveled and used WebRTC to create a downloadable enterprise-grade communications platform that is changing the communication dynamic in the financial sector. In his session at @ThingsExpo, Leo Papadopoulos, CTO of Cloud9, will discuss the importance of WebRTC and how it enables companies to fo...
SYS-CON Events announced today that MangoApps will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. MangoApps provides modern company intranets and team collaboration software, allowing workers to stay connected and productive from anywhere in the world and from any device. For more information, please visit https://www.mangoapps.com/.
Companies can harness IoT and predictive analytics to sustain business continuity; predict and manage site performance during emergencies; minimize expensive reactive maintenance; and forecast equipment and maintenance budgets and expenditures. Providing cost-effective, uninterrupted service is challenging, particularly for organizations with geographically dispersed operations.
SYS-CON Events announced today TechTarget has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. TechTarget is the Web’s leading destination for serious technology buyers researching and making enterprise technology decisions. Its extensive global networ...
SYS-CON Events announced today that EastBanc Technologies will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. EastBanc Technologies has been working at the frontier of technology since 1999. Today, the firm provides full-lifecycle software development delivering flexible technology solutions that seamlessly integrate with existing systems – whether on premise or cloud. EastBanc Technologies partners with p...
SYS-CON Events announced today that Tintri Inc., a leading producer of VM-aware storage (VAS) for virtualization and cloud environments, will exhibit at the 18th International CloudExpo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, New York, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Isomorphic Software will exhibit at SYS-CON's [email protected] at Cloud Expo New York, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Isomorphic Software provides the SmartClient HTML5/AJAX platform, the most advanced technology for building rich, high-productivity enterprise web applications for any device. SmartClient couples the industry’s broadest, deepest UI component set with a java server framework to deliver an end-...
SYS-CON Events announced today that BMC Software has been named "Siver Sponsor" of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2015 at the Javits Center in New York, New York. BMC is a global leader in innovative software solutions that help businesses transform into digital enterprises for the ultimate competitive advantage. BMC Digital Enterprise Management is a set of innovative IT solutions designed to make digital business fast, seamless, and optimized from mainframe to mo...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, wh...
The IoT is changing the way enterprises conduct business. In his session at @ThingsExpo, Eric Hoffman, Vice President at EastBanc Technologies, discuss how businesses can gain an edge over competitors by empowering consumers to take control through IoT. We'll cite examples such as a Washington, D.C.-based sports club that leveraged IoT and the cloud to develop a comprehensive booking system. He'll also highlight how IoT can revitalize and restore outdated business models, making them profitable...
SYS-CON Events announced today that Alert Logic, Inc., the leading provider of Security-as-a-Service solutions for the cloud, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Alert Logic, Inc., provides Security-as-a-Service for on-premises, cloud, and hybrid infrastructures, delivering deep security insight and continuous protection for customers at a lower cost than traditional security solutions. Ful...
The essence of data analysis involves setting up data pipelines that consist of several operations that are chained together – starting from data collection, data quality checks, data integration, data analysis and data visualization (including the setting up of interaction paths in that visualization). In our opinion, the challenges stem from the technology diversity at each stage of the data pipeline as well as the lack of process around the analysis.
Designing IoT applications is complex, but deploying them in a scalable fashion is even more complex. A scalable, API first IaaS cloud is a good start, but in order to understand the various components specific to deploying IoT applications, one needs to understand the architecture of these applications and figure out how to scale these components independently. In his session at @ThingsExpo, Nara Rajagopalan is CEO of Accelerite, will discuss the fundamental architecture of IoT applications, ...
SYS-CON Events announced today that Commvault, a global leader in enterprise data protection and information management, has been named “Bronze Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Commvault is a leading provider of data protection and information management...