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
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
SYS-CON Events announced today that Golden Gate University will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is ...
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, will introduce two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a...
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...
While some vendors scramble to create and sell you a fancy solution for monitoring your spanking new Amazon Lambdas, hear how you can do it on the cheap using just built-in Java APIs yourself. By exploiting a little-known fact that Lambdas aren’t exactly single-threaded, you can effectively identify hot spots in your serverless code. In his session at @DevOpsSummit at 21st Cloud Expo, Dave Martin, Product owner at CA Technologies, will give a live demonstration and code walkthrough, showing how ...
Docker containers have brought great opportunities to shorten the deployment process through continuous integration and the delivery of applications and microservices. This applies equally to enterprise data centers as well as the cloud. In his session at 20th Cloud Expo, Jari Kolehmainen, founder and CTO of Kontena, discussed solutions and benefits of a deeply integrated deployment pipeline using technologies such as container management platforms, Docker containers, and the drone.io Cl tool. H...
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
Any startup has to have a clear go –to-market strategy from the beginning. Similarly, any data science project has to have a go to production strategy from its first days, so it could go beyond proof-of-concept. Machine learning and artificial intelligence in production would result in hundreds of training pipelines and machine learning models that are continuously revised by teams of data scientists and seamlessly connected with web applications for tenants and users.
In his session at 20th Cloud Expo, Scott Davis, CTO of Embotics, discussed how automation can provide the dynamic management required to cost-effectively deliver microservices and container solutions at scale. He also discussed how flexible automation is the key to effectively bridging and seamlessly coordinating both IT and developer needs for component orchestration across disparate clouds – an increasingly important requirement at today’s multi-cloud enterprise.
Historically, some banking activities such as trading have been relying heavily on analytics and cutting edge algorithmic tools. The coming of age of powerful data analytics solutions combined with the development of intelligent algorithms have created new opportunities for financial institutions. In his session at 20th Cloud Expo, Sebastien Meunier, Head of Digital for North America at Chappuis Halder & Co., discussed how these tools can be leveraged to develop a lasting competitive advantage ...
With Cloud Foundry you can easily deploy and use apps utilizing websocket technology, but not everybody realizes that scaling them out is not that trivial. In his session at 21st Cloud Expo, Roman Swoszowski, CTO and VP, Cloud Foundry Services, at Grape Up, will show you an example of how to deal with this issue. He will demonstrate a cloud-native Spring Boot app running in Cloud Foundry and communicating with clients over websocket protocol that can be easily scaled horizontally and coordinate...
IT organizations are moving to the cloud in hopes to approve efficiency, increase agility and save money. Migrating workloads might seem like a simple task, but what many businesses don’t realize is that application migration criteria differs across organizations, making it difficult for architects to arrive at an accurate TCO number. In his session at 21st Cloud Expo, Joe Kinsella, CTO of CloudHealth Technologies, will offer a systematic approach to understanding the TCO of a cloud application...