Building a jQuery Mobile App with back-end data using Appery.IO

Apps without data are not very useful. provides a platform to build apps with ease. Integrating with back-end data is as easy.

The example in this post is the same as the example at Appery.IO site although some names are different. You may find more details (screen shots) than at the site.

Here are steps to create apps which takes in data from the database.

Creating the App
Designing the APP UI
Import the Server Code script

Mapping the Service to the UI
Invoking the Service
Testing the app 

Go to Apps on platform. Create a new App called Bigbox.


Choose new blank template using jQuery Mobile in Create new app window.


Bigbox project page opens.

Designing the APP UI

Click Open Pages and click on startScreen.


The startScreen header is now reading Caption, the same in the Properties -Header window as shown.


Change Caption to My App in the Proprieties - Header. The startScreen header also changes.

Drag and drop List from the PALETTE to the startScreen which now appears as shown.


As seen above, the List component comes with 3 list items. Since the database is loaded to the list item, you need only one list item and the other two are not needed.

In the bread-crumb of UI above click on mobilecontainer

In the Properties - List shown here.


Change Items from 3 to 1 and click Apply. Now two of the Link items disappears from the startScreen.

You can also remove the icon for the List. Click on Buttons Icon and choose No Icon


Now the > icon is gone.

With this the UI is done.
The final design of UI is as shown.

Import the Server Code script

Click Create New > Back-end Services > Server Code Service


Choose your script in the Import Server Code service as shown.


Click Import selected services.

The Services node in the Project folders gets the loaded service.


Click Test link on the left in the tabbed page loadGoodsScript_service.


Click Test button far right in the Response pane.

The Response pane gets populated with data from the back-end database as shown.


The above is the JSON response from the database replying to your request. Now port this response to your app by clicking Import as Response button.

You have successfully created the Service response.

Mapping the Service to the UI:
This step involves associating the database items to the UI elements.

Go to startScreen and click  open the Data view.


Choose Service in the first drop-down box, the second automatically changes as shown.


Click Add and the UI changes as shown.

The Before Send events are not relevant and you can remove the Mapping button for the Before Send event.

For the Success event click the Mapping button.  Mapping items from Service to the App is opened as shown.


Map the items as shown by joining the items shown with your mouse.


Click Save and return at the right hand side of Mapping Editor.

The Data now looks like this.


Invoking the Service

Click DESIGN to open the Design View

Select startScreen in page bread crumbs

Open Events tab


For the EVENT choose Page show from this drop-down list.


For the ACTION choose Invoke service


Click Save.

Testing the app

Click Test at the top.

App gets launched as shown


In the Apps page you can see the details of this app.


That is all folks!

Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

Setting up Kid's Corner on Windows 10 Phone

Intel XDK: Controls 6: Using the Google Map Widget