Welcome!

Apache Authors: Gilad Parann-Nissany, ChandraShekar Dattatreya, Michael Meiner, MC Brown, Amy Lindberg

Blog Feed Post

Tutorial: Building a Mobile App With Orchestrate Database and Appery.io Development Platform

Originally published by Dmitry Zaytsev on the Appery.io blog. 

Appery.io and Orchestrate have collaborated to create this easy-to-follow tutorial on how to build a mobile app. The app is built in the Appery.io visual development platform, connected to an Orchestrate database via REST APIs, tested, and deployed.

Gone are the days when you could afford to take months to build an enterprise mobile app. In today’s fast market, you need to be able to prototype the app in a few days (or even hours), release the first version in a few weeks, get feedback, fix bugs, release the second version. Repeat.

This tutorial shows how fast it is to build a real mobile app connected to an API back end when using powerful cloud tooling: Appery.io and Orchestrate.

Register for the Appery.io and Orchestrate joint webinar on September 11, 2014 at 10:00 AM PT

Building Enterprise Mobile Apps Fast with the Orchestrate Database and Appery.io Development Platform

Register now

Orchestrate – database as a service

Orchestrate is a managed service that exposes the querying capabilities of NoSQL databases like ElasticSearch, HBase and Hadoop, allowing developers to add full-text search, events, graph, and key/value to applications with a simple REST API. Orchestrate handles security, monitoring, and daily backups with no licenses, no software, and no lock-in.

Appery.io – mobile development as a service

Appery.io is a cloud-based platform with visual development tools and integrated backend services. Appery.io provides a drag and drop visual app builder for creating app UI, connecting and visually binding to any REST APIs, testing the app, and packing the app for native (iOS, Android, and Windows Phone).

What we are going to build

In this tutorial we will show you how to build a cross-platform mobile app for a food truck that sells burgers. We will call our truck Burgerio. The app allows to place a burger order ahead of time, and when the truck arrives, you’ll simply pick up the order.

What you will learn

After completing this tutorial you will learn:

  • Building mobile app in Appery.io
  • Creating and using Orchestrate database
  • Connecting for Orchestrate database from Appery.io app using REST APIs
  • Publishing the app as HTML5, or PhoneGap

Before you begin

Before you begin, you need to have an Appery.io account and an Orchestrate account. That’s pretty simple to do; just follow the links below to sign up:

Sign up for an Appery.io Starter (free) plan

Sign up for an Orchestrate (free) plan

Building the mobile app

You will perform the following steps to build the app:

  1. Create a new app
  2. Build app UI
    1. Orders page
    2. AddOrder page
    3. DeleteConfirmation popup
  3. Test the UI
  4. Create a database (in Orchestrate)
  5. Define and bind REST API services
  6. Test
  7. Deployment options
    1. Appery.io HTML5 hosting
    2. Package as binary

Creating a new app

To begin, you are going to create a new app. Click the “Create new app” button, name the app: Burgerio, and click “Create.”

When the new app loads, you will see the Start page (this page has links to documentation, tutorials, events, etc).

Open the first page: Pages > startScreen.

Let’s quickly pick a different theme for our app. Go to Project > App settings > General, for Theme, select flat-ui.

Go back to the startScreen page, and you will see this:

Building the Orders page

Okay, lets build the UI for the Orders page:

1. The first step is to rename the page. With the page name selected (use breadcrumbs to select startScreen), rename the page to Orders in Properties.

2. Select the Header and change its Text property in the Properties panel to Burgerio.

3. By using the drag and drop place the Button component on the page (drag it on the Header component right to the Burgerio title). Change its Text property to New order and its Name to navigate_to_add_order_button. Also choose the “plus” icon by clicking “Icon” in Properties panel:

new_order

This button will navigate the user to a page where a food order can be made.

4. Now place the List component on the page. This list will display all the orders. Change its Name to records_list. Because the List items will be generated dynamically based on the retrieved data, you should leave only one item. Change the Items property to 1 and click “Apply”.

5. We will use Counter property of the List item to show how many burgers of each type were ordered. Select the List item (use breadcrumbs for simpler navigation) and check the “Counter Visible” property in the Properties panel. Also change its Name to records_item.

6. We’re almost done with this List- we just need to place two labels inside of it. Drag two Label components directly into the List item.

7. Select the first label and change its Text property to Burger and its Name to burger_label. Burger name will be displayed using this label.

8. The second label will be used to keep the ID of the current order (retrieved from Orchestrate backend, we will come back to this later). Select it and change its Name to order_number. Uncheck the “Visible” checkbox.

The final Orders page looks like this:

orchestrate_orders_page_finished

Building the AddOrder page

The second page will allow you to place an order.

1. To create a new page select Create New > Page. Type AddOrder and click “Create Page.”

2. Select the Header and change its Text property in the Properties panel to Add Order. Check the “Back Button” checkbox.

3. Place a Select component into the AddOrder page. This component will be used to select the burger that you want to order. Change its Name property to hamburger_select. In the Properties panel, click “Change” to the right of the Options label. Configure the Select component Options as following:

aio_select_data

To add new values, enter new label/value pairs and click the “Add” button.

4. Now lets add a Slider component to a page and configure it. By using this component, the user will choose the amount of ordered burgers. Drag the Slider component to a page below the Select. Change its Max value to 10, Value (default value) to 1 and Min value to 1. Also, change its Name property to qty_slider.

5. You just need to place a Button component that will save the order into the Orchestrate backend. Add a Button component to the page and change its Text property to Place order. Also, change its Name to place_order_button, and check the “Inline” option.

The final AddOrder page looks like this:

aio_addorder_page_finished

Okay, you are almost done with the UI. The last page (dialog) you need to create is when deleting an order.

Building the DeleteConfirmation dialog

  1. Click Create New > Dialog. TypeDeleteConfirmation and click “Create Dialog.” The dialog similar to the classic page, but it can be opened as dialog (like a popup).
  2. Select the Header and change its Text property in the Properties panel to Delete?
  3. Next, add the Label component and change its Text property to Are you sure you want to remove this order?
  4. Add the Grid component. The Grid will serve as convenient container to place other components. Change its Rows count to 1 in the Properties panel:
  5. Place the Label component in the first Grid column. Change its Text property to Burger name and its Name to burger_name.
  6. Place a Button below the Label and change its Text property to Yes. Also change its Name property to yes_button.
  7. Place the Label component in the second Grid column. Change its Text property to Burgers quantity and its Name to burgers_qty.
  8. And place the last Button below the burgers_qty label and change its Text property to No. Also change its Name property to no_button.

The final DeleteConfirmation dialog looks like this:

delete_confirmation_dialog

Adding navigation

Now, when the greater part of the UI is ready, we need the ability to navigate between the pages. By adding a single event, the user will be able to navigate from the Orders to AddOrder page. Go to the Orders page and select “New order.” Expand the Events tab and add the following event:

navigate_to_add_order_button > Click > Navigate to page > AddOrder. Click “Add event”:

orchestrate_navigate_to_addorders_event

Testing the UI

Burgerio doesn’t have all the functionality now, but you can test the UI and see how it looks. Click “Test” in the top right corner of the screen. Once the page loads, you will see your app in mobile frame.

For instance, here is how the AddOrder page looks:

orchestrate_add_order_page

Creating a database

Now that we are done with the app UI, you are going to create the app backend in Orchestrate.

  1. Sign in with your Orchestrate credentials at http://orchestrate.io/. Click “+ NEW APPLICATION” to create a new application. Name the application: Burgerio_db, then click the green icon to create it.
  2. Once the application is created, you will see the dashboard and your API key. Let’s create a new collection by clicking “+NEW COLLECTION.” Name the collection: Orders, and click the green icon to create it.

We will upload all data from the app side, for now  just copy the API key.

This is how the Orchestrate dashboard with the database you just created should look:

oio_dashboard

Everything created in Orchestrate is instantly exposed via REST APIs. Connecting to any RESTful API in an Appery.io app is super easy- and that’s exactly what we are going to do next.

Defining and binding REST API services

When you have more than one API service, it’s a good idea to keep the API key (and other common properties) in a single place and then simply reference it from the services.

1. Switch to the Appery.io app builder and select Create New > Service. Choose Settings (REST settings) and click “Create Service”:

2. Add two parameters and their values:

  • orders_collectionOrders.
  • api_key – paste your API key from the Orchestrate dashboard:

orchestrate_settings

Adding the PlaceOrder service

Now lets add a PlaceOrder service that will send the order to Orchestrate.

1. Select Create New > Service > REST Service. Type PlaceOrder and click “Create Service.” Configure the REST service as following:

  • Type the following string for the URL field:
    https://{api_key}@api.orchestrate.io/v0/{orders_collection}/{key}

    As you can see, the URL contains values in braces – those values will be taken from the specified Settings file.

  • Choose put as Method.
  • Select Settings (that was created in a previous step) for Settings.
  • Click “New channel” to create a new Appery.io Proxy channel, type OrchestrateProxy and click “Create.” This Proxy channel will be used with all further REST Services.

Here is how PlaceOrder REST Service Settings should look:

orchestrate_place_order_settings

3. Open the Request tab and add two parameters – key and json.

4. Open the Test tab. Specify a key value as number sequence. For example – 3681236897512. And value for json as:

{"burgerName":"Hamburger","burgersQty":"2"}

5. Click “Test.” If you’ll see the Test successful message then order was placed.

Congratulations, you just ordered 2 hamburgers!

orchestrate_test_place

6. You can also ensure that order was placed by checking the collection on the Orchestrate side. Go to Orchestrate.io, select the Burgerio_db app and then the Orders collection. The Key/Value tab will open. You shouldn’t type anything here, just click the red square button with small white arrow to make a GET request:

orchestrate_check_order

As you can see, 2 hamburgers are there.

Next you are going to add the service to the page:

1. Open the AddOrder page and switch to Data view. Choose Service as datasource, select PlaceOrder and click “Add.” Rename the service instance to place_order:

2. Click “Edit Mapping” to bind the service to the page. Mapping (binding) allows you to take values from the page and use them as values for service input parameters, and take data from the service and map it to the page for display.

3. Request mapping for PlaceOrder service requires a unique value for the key. Click the “Add JS” button for the key parameter. Instead of mapping a value from the page (usually entered by the user), we are going to generate the unique value in JavaScript. Orchestrate stores values under a unique key. This key can used further to retrieve or delete data that was stored under this key. We will show you how to use a simple UUID generator to automatically generate a key.

Add the following JavaScript and click “Save & Return”:

return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
    return v.toString(16);
});

Any time the PlaceOrder service triggers, this code will be executed and will generate a unique key.

4. As the actual data needs to be in JSON format, the actual order payload also needs to be created in JavaScript. Click “Add JS” to the right of the JSON parameter. Add the following JavaScript code and click “Save & Return”:

return JSON.parse('{"burgerName":"' + Apperyio("hamburger_select").val() + '","burgersQty":"' + Apperyio("qty_slider").val() + '"}');

This code will take values from UI components and wrap it in JSON format.

Switch to Design view, select the place_order_button and expand the Events tab. Add the following event:

place_order_button > Click > Invoke Service > place_order.

Adding the GetAllOrders service

Let’s create a service that will retrieve all the orders.

1. Go to the Orders page and select Create New > Service > Rest Service. Type GetAllOrders and click “Create Service.” Configure the REST service as following:

  • Type the following string as URL:
    http://{api_key}@api.orchestrate.io/v0/{orders_collection}/
  • Select the Settings and Proxy:

orchestrate_get_all_orders_settings

2. Open the Test tab and click “Test.” You should see one order that you created. Click “Automatically Create Service Response.” This automatically creates the service response structure based on the test data.

3. Open the Orders page and switch to Data view. Add the GetAllOrders service instance. Name it get_records.

4. Click “Edit Mapping.” There is nothing to map for the input. Open the Response tab and create the following mapping:

orchestrate_get_all_orders_response_mapping

Okay, now switch to Design view and add the event that will trigger the get_records service when page loads:

Orders > Page show > Invoke Service > get_records.

Now you can test the app! Click “Test” button in top right of the screen and you’ll see your orders when the page loads:

orchestrate_get_all_orders_preview

Try to add some orders by navigating to the AddOrder page. Cool, isn’t it?

Setting an event to open the delete dialog

Do you remember that we created a DeleteConfirmation dialog? The user should have the ability to cancel an order, so let’s work on that.

Select the records_item and add the following events:

  • records_item > Click > Set local storage variable > selected_order. Check “Bind to component” select the Target component – order_number and Property name  – Text.
  • records_item > Click > Open as dialog > deleteConfirmation.

This will open up the delete confirmation dialog.

Adding the GetOrder service

Go to to the deleteConfirmation dialog and follow the steps to add a GetOrder service. It needs to retrieve information about the selected order (on which the user clicked):

1. Select Create New > Service > Rest Service. Type GetOrder and click “Create Service.” Configure the REST service as following:

  • Type the following string as URL:
    http://{api_key}@api.orchestrate.io/v0/{orders_collection}/{key}
  • Select the Settings and Proxy:

orchestrate_get_order_settings

2. Open the Request tab and add the key parameter:

orchestrate_get_order_request

3. Open the Response tab and add the JSON parameter with two nested parameters – burgerName and burgersQty:

orchestrate_get_order_response

4. Add the service instance to the page at the Data tab, and name it get_order.

5. Click “Edit Mapping” for the get_order service and create the following mapping for Request:

orchestrate_get_order_request_mapping

6. Switch to Response tab and create following mapping:

orchestrate_get_order_response_mapping

Now we need an event that will invoke GetOrder service on page Load event. Switch to Design view and open Events tab. Add the following event:
deleteConfirmation > Load > Invoke Service > get_order.

Adding the DeleteOrder service

1. Select Create New > Service > Rest Service. Type DeleteOrder and click “Create Service.” Configure the REST service as following:

  • Type the following string as URL:
    http://{api_key}@api.orchestrate.io/v0/{orders_collection}/{key}
  • Select get for Method.
  • Select the Settings and Proxy.

orchestrate_delete_order_settings

2. Open the Request tab and add the key parameter:

orchestrate_delete_order_request

3. Open the deleteConfirmation dialog and switch to Data view.

4. Add the service instance to the page and name it delete_order.

5. Click “Edit Mapping” for the delete_order service.

Create the following mapping for the Request tab:

orchestrate_delete_order_request_mapping

Now we just need to add events to invoke the services. Switch to Design view and select the yes_button. Add the following events:

  • yes_button > Click > Invoke service > delete_order.
  • yes_button > Click > Close dialog > DeleteConfirmation:

Select the no_button.  Add the following events:

  • no_button > Click > Set local storage variable. Type selected_order as Variable name and leave the Value field empty.
  • no_button > Click > Close dialog > DeleteConfirmation:

Test the app again and try to remove an order by clicking on it. Here you go- now users can order some tasty burgers and cancel the order if they change their mind.

Publishing the app

Once the app is done, you can publish the app as an HTML5 mobile app, or package it as binary for iOS, Android, or a Windows Phone.

Publishing as an HTML5 app

For instance, you can try our hosting to publish your app. Go to the Appery.io dashboard, select your app (don’t open, just select) and scroll down the page to see the Hosting section. Type burgerio in Appery.io domain and click “Publish.” Once the app will published you’ll see its publishing date:

orchestrate_publishing_appery_hosting

You can now access your app via the following URL:

http://burgerio.app.appery.io/

Packaging for native

You can build a binary to install this app on real devices.

Here is how you can do that for Google Play and iOS AppStore:

To export the app for a specific platform, click “Export”:

orchestrate_publishing

Sometimes it’s much faster to use the Appery.io Mobile Tester instead of building and installing the binary each time you need to test your app on the device.


Read the original blog entry...

More Stories By Max Katz

Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past four years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of "Practical RichFaces" book (Apress). Max holds a BS in computer science from the University of California, Davis.

@ThingsExpo Stories
The security devil is always in the details of the attack: the ones you've endured, the ones you prepare yourself to fend off, and the ones that, you fear, will catch you completely unaware and defenseless. The Internet of Things (IoT) is nothing if not an endless proliferation of details. It's the vision of a world in which continuous Internet connectivity and addressability is embedded into a growing range of human artifacts, into the natural world, and even into our smartphones, appliances, and physical persons. In the IoT vision, every new "thing" - sensor, actuator, data source, data con...
Cultural, regulatory, environmental, political and economic (CREPE) conditions over the past decade are creating cross-industry solution spaces that require processes and technologies from both the Internet of Things (IoT), and Data Management and Analytics (DMA). These solution spaces are evolving into Sensor Analytics Ecosystems (SAE) that represent significant new opportunities for organizations of all types. Public Utilities throughout the world, providing electricity, natural gas and water, are pursuing SmartGrid initiatives that represent one of the more mature examples of SAE. We have s...
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff happens, where data lives and where the interface lies. For instance, it's a mix of architectural styles ...
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
The Internet of Things is tied together with a thin strand that is known as time. Coincidentally, at the core of nearly all data analytics is a timestamp. When working with time series data there are a few core principles that everyone should consider, especially across datasets where time is the common boundary. In his session at Internet of @ThingsExpo, Jim Scott, Director of Enterprise Strategy & Architecture at MapR Technologies, discussed single-value, geo-spatial, and log time series data. By focusing on enterprise applications and the data center, he will use OpenTSDB as an example t...
An entirely new security model is needed for the Internet of Things, or is it? Can we save some old and tested controls for this new and different environment? In his session at @ThingsExpo, New York's at the Javits Center, Davi Ottenheimer, EMC Senior Director of Trust, reviewed hands-on lessons with IoT devices and reveal a new risk balance you might not expect. Davi Ottenheimer, EMC Senior Director of Trust, has more than nineteen years' experience managing global security operations and assessments, including a decade of leading incident response and digital forensics. He is co-author of t...
The Internet of Things will greatly expand the opportunities for data collection and new business models driven off of that data. In her session at @ThingsExpo, Esmeralda Swartz, CMO of MetraTech, discussed how for this to be effective you not only need to have infrastructure and operational models capable of utilizing this new phenomenon, but increasingly service providers will need to convince a skeptical public to participate. Get ready to show them the money!
The Internet of Things will put IT to its ultimate test by creating infinite new opportunities to digitize products and services, generate and analyze new data to improve customer satisfaction, and discover new ways to gain a competitive advantage across nearly every industry. In order to help corporate business units to capitalize on the rapidly evolving IoT opportunities, IT must stand up to a new set of challenges. In his session at @ThingsExpo, Jeff Kaplan, Managing Director of THINKstrategies, will examine why IT must finally fulfill its role in support of its SBUs or face a new round of...
One of the biggest challenges when developing connected devices is identifying user value and delivering it through successful user experiences. In his session at Internet of @ThingsExpo, Mike Kuniavsky, Principal Scientist, Innovation Services at PARC, described an IoT-specific approach to user experience design that combines approaches from interaction design, industrial design and service design to create experiences that go beyond simple connected gadgets to create lasting, multi-device experiences grounded in people's real needs and desires.
Enthusiasm for the Internet of Things has reached an all-time high. In 2013 alone, venture capitalists spent more than $1 billion dollars investing in the IoT space. With "smart" appliances and devices, IoT covers wearable smart devices, cloud services to hardware companies. Nest, a Google company, detects temperatures inside homes and automatically adjusts it by tracking its user's habit. These technologies are quickly developing and with it come challenges such as bridging infrastructure gaps, abiding by privacy concerns and making the concept a reality. These challenges can't be addressed w...
The Domain Name Service (DNS) is one of the most important components in networking infrastructure, enabling users and services to access applications by translating URLs (names) into IP addresses (numbers). Because every icon and URL and all embedded content on a website requires a DNS lookup loading complex sites necessitates hundreds of DNS queries. In addition, as more internet-enabled ‘Things' get connected, people will rely on DNS to name and find their fridges, toasters and toilets. According to a recent IDG Research Services Survey this rate of traffic will only grow. What's driving t...
Connected devices and the Internet of Things are getting significant momentum in 2014. In his session at Internet of @ThingsExpo, Jim Hunter, Chief Scientist & Technology Evangelist at Greenwave Systems, examined three key elements that together will drive mass adoption of the IoT before the end of 2015. The first element is the recent advent of robust open source protocols (like AllJoyn and WebRTC) that facilitate M2M communication. The second is broad availability of flexible, cost-effective storage designed to handle the massive surge in back-end data in a world where timely analytics is e...
Scott Jenson leads a project called The Physical Web within the Chrome team at Google. Project members are working to take the scalability and openness of the web and use it to talk to the exponentially exploding range of smart devices. Nearly every company today working on the IoT comes up with the same basic solution: use my server and you'll be fine. But if we really believe there will be trillions of these devices, that just can't scale. We need a system that is open a scalable and by using the URL as a basic building block, we open this up and get the same resilience that the web enjoys.
We are reaching the end of the beginning with WebRTC, and real systems using this technology have begun to appear. One challenge that faces every WebRTC deployment (in some form or another) is identity management. For example, if you have an existing service – possibly built on a variety of different PaaS/SaaS offerings – and you want to add real-time communications you are faced with a challenge relating to user management, authentication, authorization, and validation. Service providers will want to use their existing identities, but these will have credentials already that are (hopefully) i...
"Matrix is an ambitious open standard and implementation that's set up to break down the fragmentation problems that exist in IP messaging and VoIP communication," explained John Woolf, Technical Evangelist at Matrix, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
P2P RTC will impact the landscape of communications, shifting from traditional telephony style communications models to OTT (Over-The-Top) cloud assisted & PaaS (Platform as a Service) communication services. The P2P shift will impact many areas of our lives, from mobile communication, human interactive web services, RTC and telephony infrastructure, user federation, security and privacy implications, business costs, and scalability. In his session at @ThingsExpo, Robin Raymond, Chief Architect at Hookflash, will walk through the shifting landscape of traditional telephone and voice services ...
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at Internet of @ThingsExpo, James Kirkland, Chief Architect for the Internet of Things and Intelligent Systems at Red Hat, described how to revolutioniz...
Bit6 today issued a challenge to the technology community implementing Web Real Time Communication (WebRTC). To leap beyond WebRTC’s significant limitations and fully leverage its underlying value to accelerate innovation, application developers need to consider the entire communications ecosystem.
The definition of IoT is not new, in fact it’s been around for over a decade. What has changed is the public's awareness that the technology we use on a daily basis has caught up on the vision of an always on, always connected world. If you look into the details of what comprises the IoT, you’ll see that it includes everything from cloud computing, Big Data analytics, “Things,” Web communication, applications, network, storage, etc. It is essentially including everything connected online from hardware to software, or as we like to say, it’s an Internet of many different things. The difference ...
Cloud Expo 2014 TV commercials will feature @ThingsExpo, which was launched in June, 2014 at New York City's Javits Center as the largest 'Internet of Things' event in the world.