What is the Difference Between Appery.io and PhoneGap?

A common question we get asked is: “What is the difference between Appery.io and PhoneGap?”. The simple answer is Appery.io platform uses PhoneGap (actually Apache Cordova). But let’s look into this more.

First, what is difference between PhoneGap and Apache Cordova?. Cordova is an open source framework that has two core capabilities:

  • It allows to package an HTML/JS app as hybrid mobile app. Basically you run HTML/JS app inside a native wrapper (hybrid app) but it basically looks and behaves like a native app. This allows you to target multiple mobile platforms using a single code base.
  • It provides a simple Javascript API to access native device features such as Camera from HTML/JS app

PhoneGap is owned by Adobe and the name it uses for the product. Adobe acquired Nitobi in 200x the maker of PhoneGap and donated the library source to Apache under the name of Apache Cordova. PhoneGap today is Adobe’s product that consists of Cordova plus some extra features around the framework (to make it a product and brand name).

Even thought most people use the names PhoneGap and Cordova interchangeably, Appery.io bundles Cordova in every app.

Cordova allows to package the app as hybrid and provides API to access native device features. You still need a development tool (IDE) to build the app with Cordova. You need a Javascript framework that provides UI components for your app. You still need to connect to REST API services in your app and you need an API backend for your app such as a cloud database, push notifications and server code.

All these features and more are provided by Appery.io. Cordova is just a component within Appery.io platform which enables to build hybrid apps. Appery.io and Cordova don’t complete but compliment each other.

What Kind of Apps Can You Build with Appery.io?

One of the most common questions we get asked is “Can I build an app in Appery.io that does [fill in the blank]”. The answer is usually yes. To understand why it is almost always yes, we should look at the core components in the platform.

Appery.io is a cloud-platform that has two core components. They are:

  • Backend Services
  • App Builder

The Backend Services consist of:

  • Database for storing any app data (this database is in the cloud)
  • Push Notifications for sending push messages to the app
  • Server Code for writing app logic on the server using Javascript

Each service listed above has a console where you manage the service during development. For instance, for database, you can create a new database, create, or edit new collections, create or edit new columns in a collection and so on. This all happens during development time or design time.

Appery.io Backend Services:  Database (development and runtime)
Appery.io Backend Services: Database (development and runtime)

Because of the nature of Backend Services, when you launch your app, the backend that you created also becomes your runtime. It’s the backend that your app uses when it runs.

The App Builder is where you design, build and develop your app. You use the App Builder during development. The App Builder is an IDE (Integrated Development Environment) in the cloud. It is pretty much like your standard/traditional IDE, but now it’s running in the browser (running in the browser has a number of benefits, but that’s for another post).

Appery.io App Builder
Appery.io App Builder (development time)

What technologies are used to build the app? Today Appery.io App Builder uses the following technologies to build the app:

  • HTML, Javascript, CSS
  • jQuery Mobile
  • Bootstrap, AngularJS
  • Apache Cordova (PhoneGap)
  • Any custom HTML, Javascript (or libraries), CSS

As you build the app using the visual editor, that stuff that gets created/generated is just the stuff listed above. The visual tooling makes it faster and easier to build the app – but under the hood you get pretty standard stuff.

Now, you can always write custom Javascript code if you need to customize a particular feature in your app, or you can add a 3rd party Javascript library. Or you can use CSS to customize or change the look and feel of a particular component on the page.

What kind of app you build – is entirely up to you and up to you requirements. The App Builder simply makes it easier and faster to build the app. You are really only limited by what the above technologies support, and the browser or WebView (for hybrid).

The browser or web view – that’s a key point. That’s where your app runs. It doesn’t run in Appery.io. It runs in the browser when you build HTML5 mobile app, or it runs on the device if it’s a hybrid app (it still inside a special browser called WebView). When it runs in the device as a hybrid app, the app also gets access to native APIs such as the camera via Apache Cordova (PhoneGap).

Can you access the local storage in Appery.io app? Of course you can, but it’s not because you are using Appery.io. You can access the local storage because you are building an HTML/JS app that runs in the browser (or WebView when hybrid) and you have full access to all the browser built-in APIs. Need to access IndexedDB database? You can do it via the Javascript API that the database provides.

Can Appery.io app connect to a REST API you just found? Yes, it can. In fact, you can connect to any REST API. Appery.io App Builder helps you define and bind/map the service during development. But when your app is running, the app simply makes a standard Ajax request to the REST API.

It’s important to understand that your app runs on a device (not in Appery.io) and talks to some API backend. Be it Appery.io Backend Services, or a 3rd party REST API, or REST API service inside your enterprise.

As you can see, you can build pretty much any app in Appery.io that you can build with HTML/JS/CSS and PhoneGap. Appery.io simply makes it faster and easier to build the app.

I hope this answers the question if you can build an app that does [insert feature here]. The answer is (probably) yes :).

Tutorial: Creating a Barcode Scanner App With PhoneGap

Introduction

This short tutorial shows how to build a barcode scanner app with Apache Cordova (PhoneGap) using Appery.io cloud development platform.

The tutorial has the following steps:

  1. Register for Appery.io account
  2. Create a new app
  3. Build the app UI
  4. Add Barcode scanner service
  5. Binding the service to the page
  6. Testing the app

Register for Appery.io account

If you don’t have an Appery.io account, please sign up for the Starter (free) plan.  Sign up should take 1-2 minutes.

Create a new app

Once you have an account (or have signed in if you have an existing account), click Create new app button to create a new app. Enter app name and click Create. Every app that you create comes bundled with Apache Cordova and the Barcode scanner plugin. This means you can invoke any Cordova API right way.

Building the app UI

Using the drag and drop editor, build the app UI:

Screen Shot 2014-11-02 at 8.03.16 PM

  • The button will invoke the Barcode scanner
  • The three labels below the button:
    • First label will display the value scanned
    • Second label will display the type of the code scanned
    • Third label will display true or false. True means the scan has been cancelled by the user.

Adding Barcode scanner service

To add the Barcode scanner service, go to Create New > Service > Barcode, click Create Service button. The service will now be listed under Services folder.

Screen Shot 2014-11-02 at 8.10.41 PM

Binding the service to the page

First we need to add the service to the page. Switch to DATA view. For Data source select Device > BarcodeService, click Add. The service will be added to the page:

Screen Shot 2014-11-02 at 8.12.36 PM

The service doesn’t require any input (Before send) mapping.

For output mapping (Success) click the Mapping button. Using drag and drop create the following mapping:

Screen Shot 2014-11-02 at 8.14.12 PM

Click Save and return to save all changes.

The last step is to invoke the service. Go back to Design view. Select the button and open the Events tab. For Action, select Invoke Service > mobilebarcode1.  Click Save.

Testing the app

As you built an app that uses a native API, the app has to be tested on the device. Appery.io provides a special Mobile Tester app that allows you to test the app without installing it on the device. This is very handy as you don’t need to install the app to test after every small update during development.

The tester app is available for Android and iOS:

Once you download and install the app sign in with your Appery.io username and password. You will see a list of all your apps:

Screenshot_2014-11-02-20-26-49

After invoking the app and scanning a bar code:

Screenshot_2014-11-02-20-27-28

Summary

Using the Appery.io cloud development platform to create hybrid mobile apps is fast and easy. If you want to learn more, head to our Dev Center for many other tutorial or check out our YouTube channel.

 

90% of All Apps In The Enterprise Will Be Hybrid or HTML5

Tiggzi Cloud-based App Platform Upgrades to Use PhoneGap 2.0, Plus Cloud Build

This week Tiggzi app platform upgraded to use PhoneGap 2.0. This means that every existing and new app will now use the PhoneGap version 2.0.

Not only can you use PhoneGap API when building an app, but you can also use Tiggzi to build Android and iOS apps with a single click:

The New Paradigm: Cloud Services, Cloud Tools

This article was originally published in Software Developer’s Journal.

Cloud Services

In the past year or so, we have witnessed a major shift from client-server to client-cloud. This shift is primarily
fueled by two factors: mobile devices exceeding desktop computers and the thousands of different APIs available on the Internet today. What started in early 2000 on eBay and Amazon has become a real revolution in 2012 with thousands of companies, from Twitter and Facebook to AT&T, offering cloud-based services.
REST APIOne of the most common ways to access private or public service APIs is via REST requests.
In the client-server approach an organization builds applications that consume its own internal content and
resources. However, even large IT organizations such as AT&T, Verizon and Amazon have come to realize that
they are no match for the social consumer and social enterprise developers out there. By making APIs publicly
available, these organizations hope that developers and “citizen developers” will come and build applications
and mobile apps on top of their services.
Citizen developers at workAnalysts at Gartner see a trend toward app creation independent of IT. They predict that by 2014, citizen developers – employees outside of IT and software development – will build 25% of new business applications. In 2007, they built less than 5%.
One of the best-known API success stories comes from Amazon: Its cloud service APIs let outsiders access
the company’s massive data centers. Twitter, with its deceptively simple 140-character message model, exploded thanks to its API. In fact, you probably read and write tweets via a Twitter application or mobile app rather
than going directly to Twitter’s Web site. Facebook’s Graph API has spawned a whole industry of apps to support its hundreds of millions of users.

Just looking at popular ProgrammableWeb site that lists close to 5,500 APIs (at the time of writing this) and 6,500 mashups or apps created that consume the various APIs. The city of San Francisco, already a mecca for startups, technology, and innovation, has made a big push into attracting developers by making city data and other date from its data.SFgov.org Web site available via API. For example, the city’s MUNI (city bus service) API is available for developers to build apps with using information about bus stations, schedules, and arrivals. Even the United States government jumped on the API bandwagon by making available data.gov, which provides public access to high-value machine-readable data sets generated by the U.S government.
Continue reading “The New Paradigm: Cloud Services, Cloud Tools”

Tiggzi: Build Windows Phone Apps With jQuery Mobile, PhoneGap

You can now build jQuery Mobile apps in Tiggzi and export the app for Windows Phone (with PhoneGap).

VS Project is a Windows Phone PhoneGap project. We will be adding binary build as well. To get a binary, you have two options: 1) build it yourself; 2) take it to PhoneGap Build.

Create Windows Phone App with jQuery Mobile, PhoneGap and Tiggzi App Builder in 3 Easy Steps

Yesterday we attended mobile hackathon sponsored by Microsoft and PhoneGap. The goal was to build a PhoneGap app and install in on Windows Phone. We used Tiggzi App Builder, PhoneGap Build and very quickly installed an app on Windows Phone. Thanks to @jccim for inviting us and giving us a brand new Windows Phone for testing.

Step 1.

Build an HTML5/jQuery Mobile app in Tiggzi Mobile App Builder:

Step 2.

Export the app as HTML/JavaScript/CSS:

We will be adding Windows Phone support to Tiggzi in May (first source code export, followed by binary build).

Step 3.

Upload the app to PhoneGap Build, download the Windows Phone version:

You are done!

Building jQuery Mobile App with StackMob Backend API [New tutorial]

We just published a new hands-on tutorial on creating HTML5/jQuery Mobile app (can also be exported as PhoneGap app) using StackMob backend in Tiggzi app builder.

Sign up for Tiggzi Free plan today and build this mobile app.

The final app is shown below. On the first page we get a list messages we retrieved from StackMob back-end. You can also add a new message:

Click on a message takes you to second page where a message can be deleted:

This is how the first page looks in Tiggzi: