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
Information technology is an industry that has always experienced change, and the dramatic change sweeping across the industry today could not be truthfully described as the first time we've seen such widespread change impacting customer investments. However, the rate of the change, and the potential outcomes from today's digital transformation has the distinct potential to separate the industry into two camps: Organizations that see the change coming, embrace it, and successful leverage it; and...
SYS-CON Events announced today that Sheng Liang to Keynote at SYS-CON's 19th Cloud Expo, which will take place on November 1-3, 2016 at the Santa Clara Convention Center in Santa Clara, California.
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life sett...
Video experiences should be unique and exciting! But that doesn’t mean you need to patch all the pieces yourself. Users demand rich and engaging experiences and new ways to connect with you. But creating robust video applications at scale can be complicated, time-consuming and expensive. In his session at @ThingsExpo, Zohar Babin, Vice President of Platform, Ecosystem and Community at Kaltura, will discuss how VPaaS enables you to move fast, creating scalable video experiences that reach your ...
One of biggest questions about Big Data is “How do we harness all that information for business use quickly and effectively?” Geographic Information Systems (GIS) or spatial technology is about more than making maps, but adding critical context and meaning to data of all types, coming from all different channels – even sensors. In his session at @ThingsExpo, William (Bill) Meehan, director of utility solutions for Esri, will take a closer look at the current state of spatial technology and ar...
The vision of a connected smart home is becoming reality with the application of integrated wireless technologies in devices and appliances. The use of standardized and TCP/IP networked wireless technologies in line-powered and battery operated sensors and controls has led to the adoption of radios in the 2.4GHz band, including Wi-Fi, BT/BLE and 802.15.4 applied ZigBee and Thread. This is driving the need for robust wireless coexistence for multiple radios to ensure throughput performance and th...
SYS-CON Events announced today that SoftLayer, an IBM Company, has been named “Gold Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2016, at the Javits Center in New York, New York. SoftLayer, an IBM Company, provides cloud infrastructure as a service from a growing number of data centers and network points of presence around the world. SoftLayer’s customers range from Web startups to global enterprises.
In his General Session at DevOps Summit, Asaf Yigal, Co-Founder & VP of Product at Logz.io, will explore the value of Kibana 4 for log analysis and will give a real live, hands-on tutorial on how to set up Kibana 4 and get the most out of Apache log files. He will examine three use cases: IT operations, business intelligence, and security and compliance. This is a hands-on session that will require participants to bring their own laptops, and we will provide the rest.
SYS-CON Events announced today that Bsquare has been named “Silver Sponsor” of SYS-CON's @ThingsExpo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. For more than two decades, Bsquare has helped its customers extract business value from a broad array of physical assets by making them intelligent, connecting them, and using the data they generate to optimize business processes.
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lea...
Internet of @ThingsExpo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 19th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devices - comp...
Just over a week ago I received a long and loud sustained applause for a presentation I delivered at this year’s Cloud Expo in Santa Clara. I was extremely pleased with the turnout and had some very good conversations with many of the attendees. Over the next few days I had many more meaningful conversations and was not only happy with the results but also learned a few new things. Here is everything I learned in those three days distilled into three short points.
What are the new priorities for the connected business? First: businesses need to think differently about the types of connections they will need to make – these span well beyond the traditional app to app into more modern forms of integration including SaaS integrations, mobile integrations, APIs, device integration and Big Data integration. It’s important these are unified together vs. doing them all piecemeal. Second, these types of connections need to be simple to design, adapt and configure...
Why do your mobile transformations need to happen today? Mobile is the strategy that enterprise transformation centers on to drive customer engagement. In his general session at @ThingsExpo, Roger Woods, Director, Mobile Product & Strategy – Adobe Marketing Cloud, covered key IoT and mobile trends that are forcing mobile transformation, key components of a solid mobile strategy and explored how brands are effectively driving mobile change throughout the enterprise.
“We're a global managed hosting provider. Our core customer set is a U.S.-based customer that is looking to go global,” explained Adam Rogers, Managing Director at ANEXIA, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.