JayData.org

Hybrid mobile development with JayData

Author: Hajnalka Battancs October 13th, 2016

, ,


Hybrid mobile applications are all the rage nowadays. A hybrid application is essentially an app that is installed and run as a native application but uses HTML5 and Javascript to render its UI and perform part or all of its business logic operations.

This approach allows developers to keep vast portion of their code cross-platform, and diverge with vendor-specific native code only where it is absolutely necessary. The most popular framework for building such applications is PhoneGap / Apache Cordova, which makes development and deployment extremely easy.
JayData comes into picture as the first truly comprehensive HTML5 / Javascript data access library, which allows you to handle even more and even more comfortably in pure Javascript code, without resorting to native Objective-C or JAVA components.

If you have a look at the OData Ajax application walkthrough, the clientside result is a plain static HTML file and three Javascript files… Did I get you thinking already?

Here is how you can get it on an Android phone as a native application:

  • Change the service URL in the context definition file. (As “localhost” won’t cut it from a mobile device…)
  • Zip up the HTML and the script files.
  • Upload them to the PhoneGap build cloud service.
  • Take the android package and install it!

And well, this is only the beginning. We will guide you through this steps to get hands-on experience with JayData and mobile application development.

To create an HTML5-based hybrid mobile application, we have to follow only a few easy steps. First, we will develop an HTML5 ToDo list application, after this, we will deploy it using PhoneGap.

Developing a ToDo list application with JayData

After this section, you will have a basic ToDo list application running in desktop/mobile browsers. The application will store the ToDo list items in the WebSQL database of the web browser and will be packed to a mobile application in the next section.

To have a sneak preview of the working example, check out the web-based version.

Before we begin (requirements)

This tutorial assumes basic HTML, JavaScript and jQuery experience. We skip the details of the CSS classes and the explanaiton of jQuery features.

As JayData doesn’t require any specific development environment or operating system, you can use your favorite one (we recommend Visual Studio 11 to enjoy the JavaScript auto-complete feature).

Creating a project structure

To put the application skeleton together we will need to files:

  • · index.html
  • · todo.js

index.html

This HTML file should include jQuery and your CSS files and reference JayData.js:

To render some basic user interface we will add the following HTML fragment to the HTML body:

todo.js

The JavaScript file will contain our model definition (database structure), business logic and data management operations… sounds complex, but let’s see how easy it is using JayData.
Defining a TodoEntry type with JayData API we will have a class defition and a database structure, too.

We will keep these TodoEntry object instances in a collection of the context. To make this happen we define our custom context deriving from the $data.EntityContext type.

After we defined our entity model and context definition, we have to create an instance of the context, which we can utilize to access the WebSQL database using JayData API (JavaScript Query Language).

After this point we have the infrastructure to perform CRUD operations over our WebSQL datastore with developer-friendly JavaScript API. The ‘webSql’ parameter instructs the context to use the WebSQL storage. The advantage of JayData is that developers are able to change the datastore type simply by modifying this parameter..

Adding new ToDo list items to the datastore

Our first feature will be to save new ToDo items to the WebSQL datastore. Since we created the entity model and context object our job is easy just like below.

To apply this snippet to our application, we will save the ToDoEntry item with the description from textbox (filled by the user) and the current date.

As you can see there is an updateView function call to refresh the current page in order to display the current list of ToDo items. To achieve this we will retrieve all the records from the WebSQL database using JayData JavaScript Language Query (JSLQ) and render the items using jQuery template.

Notice that we retrieve the records from the WebSQL database with a single line of code:

$todo.context.TodoEntries.toArray( );

To define the jQuery template for the rendering, navigate back to the index.html file and add the following snippet to the head element:

To delete existing records from the database using JayData means we have to perform two operations:

  • remove the desired elements from the entity set of the context
  • call context.saveChanges()

We are done with the data management part of our application there is only one thing left: to assign operations to the onClick event of the buttons.

Now we have a working application, which can be tested on desktop browsers and mobile browsers. We are ready to navigate to our file system and pack our application to a jaydata-example.ziparchive file.

Creating a mobile application from our JayData-powered HTML5 application

In this section we will show how easy it is to deliver our HTML5 application developed with JayData library to mobile platforms.

As JayData library is designed to run in all HTML5-compatible platforms, we can host our hybrid application with PhoneGap. You have two options to create your installer package for each platform:

  •    You download SDKs and setup a local development/build environment
  •    You use your favourite HTML/CSS/JavaScript development tools and build your app using PhoneGap Build cloud service (preferred)

Packaging HTML5 apps with PhoneGap build

We will guide you through the most efficient way to pack your app to different platforms. PhoneGap offers the online build service with free trial. To try the online build, navigate to https://build.phonegap.com/and register a new account.

After the registration you are able to create new apps on the UI, let’s click the new app button in the top-right corner.

jaydata-mobile-1-create-new-phonegap-app

After clicking the new app button you will see the following modal window. After filling the name textbox choose the third upload method: upload an archive or index.html file.

jaydata-mobile-2-phonegap-new-app

Note: visit http://docs.phonegap.com/phonegap-build/ to read the details of specific application metadata. We haven’t provide any metadata, so our app won’t have fancy logo and we won’t be able to publish to the AppStore

After clicking the Choose File button, upload the jaydata-example.ziparchive. The PhoneGap build creates the packages for each platform.

jaydata-mobile-3-phonegap-build-packages

After downloading the Android package, we can copy the APK file to our device.

jaydata-mobile-4-android-app

Conclusion

  • We can define the database structure by defining a JayData Entity
  • Changing the type of the database can be achieved by changing one parameter of JayData EntityContext
  • Saving a record to the WebSQL database of our smartphone requires 3 lines of code in JayData
  • We can persist and query data from different datasources with the same JavaScript API syntax
  • Managing data in HTML5 applications using JayData doesn’t require server-side development experience
  • JayData library can be used to create cross-platform HTML5 hybrid applications hosted by PhoneGap

, ,