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

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.