4-Minute Video on Creating Responsive App with Bootstrap, AngularJS and Appery.io

4-minute video on creating a responsive app with Bootstrap, AngularJS in Appery.io

View more videos on Appery.io Youtube channel.

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 :).

Appery.io New Features: Bootstrap AngularJS Support, App Creator Express [Video]

This webinar covers new features in Appery.io:

  • Bootstrap/AngularJS support — for creating responsive apps
  • App Creator Express – generate a complete app with database in seconds

The 7 Pains of Developing Mobile Apps (and How to Solve Them)

Mobile apps are on a trajectory the likes of which have yet to be charted. Digi-Capital forecasts that by 2017, the mobile app market will reach $70 Billion of global revenue, with non-game apps to double revenue share from 26% to 51%. This will be made possible by 2017’s expected 200 billion app downloads. Currently, mobile apps account for 82% of the overall time spent on daily media consumption. Needless to say, enterprises are scurrying to develop mobile apps to secure their share of this rapidly growing ecosystem. Due to haste, misguidance, and industry fragmentation, there are a number of pains plaguing the mobile app development process. Solving these problems is critical to developing apps with the potential for scalable success. Continue reading

Did AngularJS Borrow Some Concepts from JSF?

Since Appery.io added support for Bootstrap and AngularJS, I have been using these frameworks a lot. Many years ago I have been using and teaching JSF and RichFaces frameworks. Surprisingly (or not), I see some concept similarities between AnguarJS and JSF. Obviously AngularJS and JSF are very different frameworks, but they do share some concepts. Let’s look at a simple example.

This is how AngularJS page looks:

<html>
<body ng-app="myApp1">
   <div ng-controller="myController">
      <p>Name:<input type="text" ng-model="name"/></p>
      <p>Echo: {{echo}}</p>
      <p>Count: {{count}}</p>
      <p>
         <button ng-click="countAction()">Submit</button>
      </p>
   </div>
</body>
</html>

and this is how JSF page looks:

<html>
<body>
   <h:form>
      <p>Name:<h:inputText value="#{echoBean.name}"/></p>
      <p>Echo: #{echoBean.echo}</p> 
      <p>Count: #{echoBean.count}</p>
      <p><h:commandButton value="Submit" actionListner="#{echoBean.countListner}"/>
   </h:form>
</body>
</html>
  • AngularJS defines the name model via the ng-model directive. The directive extends the functionality of HTML input element.
  • JSF defines the name model via the managed bean. <h:inputText> component extends the functionality of HTML input element.
  • {{echo}} and {{count}} are displayed using expressions and are bound (binding) to AngularJS scope. Both variables are set in AngularJS controller (similar to JSF managed bean)
  • #{echoBean.echo} and #{echoBean.count} are displayed using expressions and are bound (binding) to a managed bean inside JSF scope. Both variables are defined in JSF managed bean (similar to AngularJS controller)
  • ng-click references a function (defined in scope) to count the length of the input
  • actionListener references a function (defined in managed bean) to count the length of the input
  • AngularJS provides directives to extend HTML markup, JSF provides UI components to extend  HTML markup.

As you can see some of the concepts are rather similar even though the syntax is different. Both frameworks define a view (page) that is bound to an object in a scope.

Obviously these are very high level similarities and you can probably argue that many other frameworks share the same concepts. One important difference between the frameworks is that AngularJS is a client-side framework while JSF is a server-side framework.

var myApp = angular.module('myApp1', []);

myApp.controller('myController', ['$scope', function ($scope) {

    $scope.countAction = function () {
        $scope.echo = $scope.name;
        $scope.count = $scope.name.length;
    };
}]);
@ManagedBean(name="echoBean")
@RequestScoped
public class EchoBean {
   private String name; 
   private Integer count;
 
   public void countListener (ActionEvent event){ 
      count = name.length(); }
   }
   // getters and setters
}

You can try the AngularJS example here: https://jsfiddle.net/maxkatz/wbpp331b/

How to Build and Deploy a Complete Mobile App with Appery io and Instant API

This webinar recording shows how to build and deploy a complete hybrid mobile app with Appery.io and Instant API.