Appery.io Build Packages iOS, Android, And Now Windows Phone Mobile Apps In The Cloud

Appery.io Build allows to packaging apps for iOS, Android and now Windows Phone. Just click Export to see all the options.

Screen Shot 2014-04-30 at 3.59.59 PM
Appery.io Build

You will get a binary app (hybrid) which can be installed on the device or published to the app stores. In addition, you can export the app source or just the HTML/JavaScript/CSS resources — if you are building a mobile web app.

What Is Appery.io App?

Screen Shot 2014-04-29 at 8.32.24 PM

Appery.io is a cloud-based platform with visual development tools and integrated backend services. Appery.io provides powerful visual tools to build the app UI, but what’s the technology under the hood when you create the app? It’s pretty simple, the resulting app has:

  • HTML
  • JavaScript
  • CSS
  • jQuery Mobile
  • Any custom HTML, JavaScript, CSS added by the developer
  • Apache Cordova — for native APIs and hybrid app creation
  • Any custom Apache Cordova plugins

As you can see, it’s a pretty standard technology stack when you build an app in Appery.io.

New Webinar: What’s New in Appery.io Platform

What
What’s new in Appery.io platform webinar

When
Wednesday, April 30, 11am Pacific Time

What you will learn
Learns what’s new in Appery.io. We will cover the the feature such as server-side jobs, the new Customer Console, and other new features.

Register
Register for this webinar

Adding Properties to UI Components in Appery.io App Builder

When you drag and drop a UI component, the Properties panel will show you properties you can set. For instance, here is an example when list item is selected:

Screen Shot 2014-04-25 at 4.49.50 PM

 

Sometimes not all properties might be exposed in the app builder, but it doesn’t mean you can’t set them. Using More Properties feature, you can set any properties supported by the component HTML or jQuery Mobile component.

For example, you want to change the list item icon to something list (no icon option is available but coming soon). With the list item selected, click More Options and add add the following property:

Screen Shot 2014-04-25 at 4.55.14 PM

 

The icon will not update in design time, but when you run the app, the first icon will change to bullets:

Screen Shot 2014-04-25 at 4.55.46 PM

 

To make this work, you need to know the property name and possible values. This is easy to find in jQuery Mobile docs or HTML docs.

Creating Mobile App With Google Maps API, Geolocation in Appery.io [Webinar recording]

This webinar covers:

  • Show one’s location on map
  • Show traffic layer
  • Show route between two cities
  • Show places loaded from database

My code cheat sheet from the webinar.

Register for our next webinar: http://plancast.com/apperyio

Bootstrap Week 4/23: Build a Complete Mobile App with AT&T APIs in Appery.io

What:
AT&T Bootstrap Week Online Tutorial

When:
Wednesday, April 23, 11–12 PM Pacific Time

Session:
Appery.io is the only cloud-based platform with visual development tools and integrated backend services. In this live coding session you will learn how to build a complete mobile app with Appery.io We will create the app UI, add a cloud database, push notifications, and use AT&T APIs. We will then build the app binary with PhoneGap.

What you will learn:

  • How to build a jQuery Mobile/PhoneGap mobile app in Appery.io cloud platform
  • How to integrate with AT&T APIs
  • How to integrated with Appery.io mobile backend (mBaaS)
  • How to test, build and deploy the mobile app

Register:
Register for this online tutorial

Creating jQuery Mobile App in Appery.io Using Page Templates

This video shows how to:

  • Create a jQuery Mobile app in Appery.io
  • Use page templates
  • Use jQuery Mobile Panel component for navigation and menu

Creating jQuery Mobile Tip Calculator App in Appery.io

This video shows:

  • How to create a mobile tip calculator app in Appery.io with jQuery Mobile
  • Build a binary for Android, iOS with PhoneGap
  • Instantly publish as HTML5 mobile app

The app is based on this tutorial.

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:

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.