Rapid Mobile App Development With Appery.io – Creating Vacation Request App

I just got back from Stamford, CT where I did a talk at the Web, Mobile and Backend Developers Meetup. In about 90 minutes we built a prototype version of a productivity app called Vacation Request using Appery.io cloud development platform. The app helps employees request and submit time off from their mobile phones. The app has the following functionality:

  • User login and registration
  • Submit vacation request. The request is saved into Appery.io database
  • Send an SMS message to the manager notifying him/her of a new request
  • Send an email to the manger notifying him/her of a new request
  • Push notifications to notify of a new request, or notify the employ when the request is approved
  • Customer Console for the manager to view/approve requests from a user-friendly console
  • Package the app for Android

Let me walk you through the app in more details.

The first page we designed was the Login page:

Screen Shot 2014-10-15 at 1.44.03 PM

Appery.io Backend Services comes with out-of-the-box User Management built-in so you can register users, sign in users, and logout users. This is how the Users collection looks:

Screen Shot 2014-10-15 at 1.47.36 PM

As the App Builder and the Database are integrated, it’s fast to generate the login/sign up services automatically:

Screen Shot 2014-10-15 at 1.50.27 PM

Then the service is added to the page and mapped to the page. This is request mapping (from page to service):

Screen Shot 2014-10-15 at 1.55.08 PM

and this is response mapping (from service to page or local storage). In our example, we are saving the user id and the user session into local storage:

Screen Shot 2014-10-15 at 1.55.44 PM

The steps are identical for registration.

In case login or registration fail for some reason, we will display a basic error:

Screen Shot 2014-10-15 at 1.59.11 PM

Next we built the Vacation Request page where you make the actual request. This page is based on a template which has a Panel menu that slides from the left:

Screen Shot 2014-10-15 at 2.22.31 PM

And this is how it looks when the menu (from the template) is opened in development:

Screen Shot 2014-10-15 at 2.23.36 PM

The Save button saves the request into Appery.io Database (into Vacation collection):

Screen Shot 2014-10-15 at 2.26.17 PM

The Email button sends an email to the manager using the SendGrid API. The functionality was imported as plugin.

The SMS buttons sends an SMS message to the manager using the Twilio API.

Once we were done building the app, we added push notifications capability:

Screen Shot 2014-10-15 at 2.47.07 PM

To send a push notification, the app has to be installed on the device. Packaging for various native platforms is as simple as clicking a button:

Screen Shot 2014-10-15 at 2.48.51 PM

Lastly, we activated the Customer Console which allows the manager to view the data (vacation requests or any other app data) and approve the requests there. The Customer Console is a user-friendly app that allows editing the app data without asking the developer to do that. It also allows to send push notifications. Access to data and whether you can send push messages is configurable.

Screen Shot 2014-10-15 at 2.51.41 PM

The goal was to show how rapidly you can build a mobile app using Appery.io. In about 90 minutes, we were able to build a prototype or a first version of an app that saves vacation requests, allows sending an email or an SMS message, with push notifications. And we built a binary for Android. I think folks enjoyed the talk:

Screen Shot 2014-10-15 at 3.00.18 PM

Build an Android App in 5 Minutes Using Appery.io Platform

This tutorial will show you how to build an Android app in about 5 minutes and install it on a device.

  1. Sign up for Appery.io Starter (free) plan
  2. Create a new app by entering its name and clicking the Create button:
    2013-07-11_1514
  3. Build the mobile UI:
    AndroidUI
    Make the changes shown in Properties and make sure to rename the menu component.
  4. Update Options for the drop-down list:
    2013-07-11_1610
  5. Select the button and open Events tab
  6. Add Click > Run JavaScript, enter the following code:
     var times = Appery("menu").val();
     navigator.notification.beep(times);

    This is Apache Cordova (PhoneGap) API to make the device beep x-number of times. As you are a building a hybrid app, you get access to all Apache Cordova API.

  7. Now let’s start the Android binary build. Click Export > .apk for Android:
    AndroidExport
  8. After a few seconds, you will be able to scan a QR code and install the app on your device (the file will also be saved on your computer):
    2013-07-11_1621
    If you don’t have a QR code scanner app, you can email the downloaded file to your phone.
  9. Run and test the app. Select the number of beeps and click the button.

Another way to test the app without installing it on the device is to use the Appery.io Tester available on Google Play.

Tiggzi And The Backend as a Service Ecosystem Map by Kinvey

Our friends at Kinvey posted an update to their really nice Backed as a Service Ecosystem map. Some call it the subway map, the Pacman map, or you can also look at it as “Where we fly map”.

Thank you to Kinvey for including Tiggzi, we really appreciate it.

Tiggzi is right there:

A lot has changed in Tiggzi in the past couple of months so I would like to offer an update. Hopefully the map can be updated.

I don’t believe Mobile SDK is the best fit for Tiggzi (and other players such Sencha and Appcelerator). Tiggzi is much more than a mobile SDK, in fact, it’s a mobile app platform (more about it below). One suggestion is to add a new line that would include Tiggzi and others such as Appcelerator.

Tiggzi is a mobile app platform, and one of its biggest components is the mobile app builder.


Drag and drop app builder

It’s a cloud-based, drag and drop builder (IDE) for creating HTML5, jQuery Mobile and PhoneGap apps. As Tiggzi app builder uses jQuery Mobile and PhoneGap to create apps — it’s probably best to list it on a separate line with lines going to jQuery Mobile and PhoneGap (already exists). Again, this is just my opinion.

In early July we launched Backend Services under io.tiggzi.com. The first feature in the backend services is a cloud database.


Database features


Database web console

We are also working on Push, File storage, Server-side code, and Analytics features. I think there should be a line going from Tiggzi to BaaS line (io.tiggzi.com) – similar to Sencha’s connection to Sencha.io.

To summarize, this is Tiggzi mobile platform:

  • Visual UI builder (HTML5, JavaScript, CSS, libraries such as jQuery Mobile, PhoneGap, etc)
  • 3rd party REST API services
    • Plug-ins (pre-packaged API services and pages)
  • Backend services
    • Database
    • Push (available soon)
    • File storage (soon)
    • Server-side code (soon)
    • Analytics (soon)
  • HTML5 app hosting
  • Binary build

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

Tiggzi At AnDevCon Conference: Building Android Apps With Cloud-based Mobile App Builder


Wednesday and Thursday this week the Tiggzi team will be at AnDevCon conference in San Francisco. Stop by our stand and learn how to build Android apps, connected to any REST API using Tiggzi app builder. What’s really nice is that you can build an app in Tiggzi, export the Android binary, and instantly publish it to Google Play Store.

Be Your Own Enterprise Mobile Apps Powerhouse with HTML5

ReadWriteWeb published SAP Plans to Dominate Enterprise Mobile Apps with HTML5 and New Partnerships article a few days ago. SAP acquired a mobile development firm Syclo and also announced important partnerships with Appcelertaor, Adobe (PhoneGap) and Sencha to become “…most powerful enterprise mobile developers in the world”.

Dan Rowinksi makes a number of very good points.

Enterprise mobile development is different from its consumer counterparts. The objectives of enterprise apps often have less to do with mobile device performance and more to do with functionality. Consumer app development often centers on games and location, testing how well an app can perform within the bounds of a mobile device’s hardware. While location is an increasingly important feature for many enterprises, communication, data management and collaboration are the real drivers in enterprise mobility.

Most enterprise or business apps are content or data-driven. More and more enterprise expose their data, content and resources via REST API services and these apps consume that data. This is the next evolution of client/server architecture or more precise, the new mobile-cloud shift. Basicially, you got a mobile app talking connected to cloud-based REST API resources. HTML5 or hybrid (PhoneGap) mobile apps are the perfect fit here.

In this type of environment, strict native applications are not always the most cost-efficient solution.

Natively supporting iOS, Android, and at least another platform Windows Phone or BlackBerry is simply a challenge and very expensive for most organizations. It’s not uncommon for a company first to release the iOS app, then after some time followed by Android, followed by mobile web and maybe Windows Phone and BlackBerry. Maintaining and updating these apps is a challenge and different versions usually have different features, with iOS version having the most features.

While it is nice to have a mobile development guru on staff that can create an app for iOS, Android, BlackBerry and Windows Phone, those types of people are hard to find and may not be attracted to enterprise development work.

We (Exadel) have a large number of enterprise customers, and that’s exactly the problem they are facing today. Finding qualified mobile developers for different platforms is difficult.

Three companies, three strengths

SAP wants to be the mobile powerhouse by partnering with Sencha, PhoneGap (Adobe) and Appcelerator.

Sencha is the “…leading HTML5 development frameworks and can create hybrid apps for both iOS and Android. PhoneGap (Adobe) is hybrid mobile framework that makes it very easy to packaqe mobile apps as native (hybrid) apps and also gives you access to native device features. Appcelerator’s, Titanium SDK leverages JavaScript, HTML5 and CSS to create native apps with Web-based software. Note: I’m not aware of any Web-based development tools provided by Appcelerator.

Your own mobile powerhouse

But, you don’t have to be SAP to be a mobile powerhouse, there are cloud tools that make it very simple and easy to build HTML5 and hybrid (PhoneGap) apps connected to REST API services.

Cloud-based mobile app builder, with jQuery Mobile

Tiggzi is a cloud-based mobile app builder. Because it’s running in the cloud there is nothing to install or download (as opposed to Appcelerator tools which are more traditional tools and need to be installed and configured). It’s very easy to get started. It comes with a visual, drag-and-drop builder for building the UI, with jQuery Mobile and HTML5 components.

Because the builder is running the cloud, trying or testing the app is super easy. With a single click, you can open the app in browser (desktop) or on the actual device.

Hybrid apps with PhoneGap

Tiggzi also uses the simple and powerful PhoneGap framework to create hybrid apps. First, any HTML5 mobile app can be exported as PhoneGap app (iOS, Android). This this allow you to put the app into the app market. Second, in addition to just putting the app inside a native wrapper you can also invoke any of the PhoneGap’s native API. Lastly, Tiggzi comes with Android and iOS binary build (similar to PhoneGap Build). Can’t get any simpler. Build the app in Tiggzi, get iOS or Android app in seconds.

Service API’s

Enterprises have vast amount of resources exposed as REST API. Mobile apps created in Tiggzi can quickly and easily connect and consume any cloud-based REST API’s. Tiggzi comes with a powerful REST services editor where the service can be defined, tested (similar to apigee.com test console) and even its JSON response structure created automatically. Once the service is created, it is mapped to mobile UI using a visual mapper:

Mobile back-end services

If you need to create your own mobile back-end services, there are powerful and easy easy to use cloud-services such as StackMob and Parse. Anything you create in these services is instantly exposed as REST services which in turn can be consumed inside a mobile app (built in Tiggzi).

As you can see, you can easily have your own mobile powerhouse, in the cloud with Tiggzi app builder, HTML5, jQuery Mobile, PhoneGap, REST API’s and mobile back-end services.

Tiggzi Plugins – The Pre-packaged Approach to Consuming REST APIs in jQuery Mobile App [Webinar recording]

In this webinar I built an mobile app connected to ATT SMS API and then packaged the services as plug-in for reuse.