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
Imagine having the ability to leverage all of your current technology and to be able to compose it into one resource pool. Now imagine, as your business grows, not having to deploy a complete new appliance to scale your infrastructure. Also imagine a true multi-cloud capability that allows live migration without any modification between cloud environments regardless of whether that cloud is your private cloud or your public AWS, Azure or Google instance. Now think of a world that is not locked i...
SYS-CON Events announced today that Auditwerx will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Auditwerx specializes in SOC 1, SOC 2, and SOC 3 attestation services throughout the U.S. and Canada. As a division of Carr, Riggs & Ingram (CRI), one of the top 20 largest CPA firms nationally, you can expect the resources, skills, and experience of a much larger firm combined with the accessibility and atten...
In his session at @ThingsExpo, Eric Lachapelle, CEO of the Professional Evaluation and Certification Board (PECB), will provide an overview of various initiatives to certifiy the security of connected devices and future trends in ensuring public trust of IoT. Eric Lachapelle is the Chief Executive Officer of the Professional Evaluation and Certification Board (PECB), an international certification body. His role is to help companies and individuals to achieve professional, accredited and worldw...
MongoDB Atlas leverages VPC peering for AWS, a service that allows multiple VPC networks to interact. This includes VPCs that belong to other AWS account holders. By performing cross account VPC peering, users ensure networks that host and communicate their data are secure. In his session at 20th Cloud Expo, Jay Gordon, a Developer Advocate at MongoDB, will explain how to properly architect your VPC using existing AWS tools and then peer with your MongoDB Atlas cluster. He'll discuss the secur...
Deep learning has been very successful in social sciences and specially areas where there is a lot of data. Trading is another field that can be viewed as social science with a lot of data. With the advent of Deep Learning and Big Data technologies for efficient computation, we are finally able to use the same methods in investment management as we would in face recognition or in making chat-bots. In his session at 20th Cloud Expo, Gaurav Chakravorty, co-founder and Head of Strategy Development ...
SYS-CON Events announced today that Linux Academy, the foremost online Linux and cloud training platform and community, will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Linux Academy was founded on the belief that providing high-quality, in-depth training should be available at an affordable price. Industry leaders in quality training, provided services, and student certification passes, its goal is to c...
DevOps is often described as a combination of technology and culture. Without both, DevOps isn't complete. However, applying the culture to outdated technology is a recipe for disaster; as response times grow and connections between teams are delayed by technology, the culture will die. A Nutanix Enterprise Cloud has many benefits that provide the needed base for a true DevOps paradigm. In his Day 3 Keynote at 20th Cloud Expo, Chris Brown, a Solutions Marketing Manager at Nutanix, will explore t...
In his session at Cloud Expo, Alan Winters, an entertainment executive/TV producer turned serial entrepreneur, will present a success story of an entrepreneur who has both suffered through and benefited from offshore development across multiple businesses: The smart choice, or how to select the right offshore development partner Warning signs, or how to minimize chances of making the wrong choice Collaboration, or how to establish the most effective work processes Budget control, or how to m...
"delaPlex is a software development company. We do team-based outsourcing development," explained Mark Rivers, COO and Co-founder of delaPlex Software, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
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.
SYS-CON Events announced today that CA Technologies has been named “Platinum Sponsor” of SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY, and the 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business – from apparel to energy – is being rewritten by software. From ...
SYS-CON Events announced today that Technologic Systems Inc., an embedded systems solutions company, will exhibit at SYS-CON's @ThingsExpo, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Technologic Systems is an embedded systems company with headquarters in Fountain Hills, Arizona. They have been in business for 32 years, helping more than 8,000 OEM customers and building over a hundred COTS products that have never been discontinued. Technologic Systems’ pr...
In his keynote at @ThingsExpo, Chris Matthieu, Director of IoT Engineering at Citrix and co-founder and CTO of Octoblu, focused on building an IoT platform and company. He provided a behind-the-scenes look at Octoblu’s platform, business, and pivots along the way (including the Citrix acquisition of Octoblu).
What if you could build a web application that could support true web-scale traffic without having to ever provision or manage a single server? Sounds magical, and it is! In his session at 20th Cloud Expo, Chris Munns, Senior Developer Advocate for Serverless Applications at Amazon Web Services, will show how to build a serverless website that scales automatically using services like AWS Lambda, Amazon API Gateway, and Amazon S3. We will review several frameworks that can help you build serverle...
SYS-CON Events announced today that Loom Systems will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Founded in 2015, Loom Systems delivers an advanced AI solution to predict and prevent problems in the digital business. Loom stands alone in the industry as an AI analysis platform requiring no prior math knowledge from operators, leveraging the existing staff to succeed in the digital era. With offices in S...