jQuery Mobile App In Tiggzi Connected to Kinvey Backend

Kinvey is one of those services that makes building mobile backend way too simple. If you combine Kinvey with a cloud-based app builder Tiggzi, you get everything you need to build an awesome mobile app using cloud services. Let me show you what I mean.

To start, sign up for Kinvey, it’s free and then create your first app backend. We re going to create a backend for beers(!).

Next, create a new collection where we are going to store names of beer we like:

Open the collection. When you open it for the first time it will be empty so we need to define at least one column and enter some data. Click on +Col, and add Name column. Then add a few sample entries by clicking +Row. You can simply double click in Name column to enter values (you don’t need to enter anything for _id or _acl).

That’s pretty much all you need to do. Simple, right?

Let’s now go to Tiggzi app builder and create a jQuery Mobile app.

We will first build the UI with jQuery Mobile:

Next, we are going to add two REST services. Once service for getting all the beers (BeerGet), and one service for creating a new beer (BeerPost).

This is BeerGet service URL:

For Kinvey to know who we are, we need to add Authorization header parameter:

Note you can also calculate the Authorization value in run time.

We can test the service to make sure it works:

Right from the Test window, we can automatically define service’s JSON output structure by clicking on Populate Response Structure button:

For BeerPost service, the service URL is the same but instead of GET we now do POST. As we also need to send the new beer name, we have to add Name request parameter:

Adding both services to the page:

Two more things we are left to do. First is to map services to UI, and second invoke the services. Let’s do the mapping.

When the page loads, we want to get the list of all current beers so we are mapping BeerGet first.

There is nothing we need to map on input (Authorization header is already set). Output mapping looks like this:

Before we can test the app, we need to invoke the service on page load.

We can test in the browser or on the actual mobile device:

Here is how it looks:

Let’s now work on adding a new beer.

Mapping BeerPost to the UI. We are getting the new beer name and mapping it to service’s input.

We don’t need to worry about mapping the response (in this example). You do get back JSON that contains the object id that was created.

Next, we need to invoke the service on button click:

The last thing we need to do is show the updated list once a beer was added. To do that, we want to invoke BeerGet service once BeerPost finished successfully. We are going to use BeerGet success event to invoke BeerGet:

Running the app:

After entering new beer:

And that’s it. Sign up for Kinvey, Tiggzi, and build your mobile app.

Create Windows Phone App with jQuery Mobile, PhoneGap and Tiggzi App Builder in 3 Easy Steps

Yesterday we attended mobile hackathon sponsored by Microsoft and PhoneGap. The goal was to build a PhoneGap app and install in on Windows Phone. We used Tiggzi App Builder, PhoneGap Build and very quickly installed an app on Windows Phone. Thanks to @jccim for inviting us and giving us a brand new Windows Phone for testing.

Step 1.

Build an HTML5/jQuery Mobile app in Tiggzi Mobile App Builder:

Step 2.

Export the app as HTML/JavaScript/CSS:

We will be adding Windows Phone support to Tiggzi in May (first source code export, followed by binary build).

Step 3.

Upload the app to PhoneGap Build, download the Windows Phone version:

You are done!

Building jQuery Mobile App with StackMob Backend API [New tutorial]

We just published a new hands-on tutorial on creating HTML5/jQuery Mobile app (can also be exported as PhoneGap app) using StackMob backend in Tiggzi app builder.

Sign up for Tiggzi Free plan today and build this mobile app.

The final app is shown below. On the first page we get a list messages we retrieved from StackMob back-end. You can also add a new message:

Click on a message takes you to second page where a message can be deleted:

This is how the first page looks in Tiggzi:

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.

HTML5, jQuery Mobile Visual Builder

Tiggzi is a cloud-based HTML5, jQuery Mobile and PhoneGap mobile app builder. It comes with a very powerful and easy to use visual, drag-and-drop builder for HTML5 and jQuery Mobile.

The mobile UI is built by simply dragging and dropping components from the palette on the left into the mobile device frame. Once a component is inserted into the mobile screen, its properties can be changed in the right panel (Properties). You can also set HTML events (click, value change, etc) in the right panel (Events).

Creating the app layout is incredibly simple. You don’t need to worry about pixels. There is a powerful Grid component which allows you to create very flexible layouts. You can easily rearrange the components and even nest grids.

In addition to jQuery Mobile, there are HTML5 components such as audio, and video. There is also Google Map component. In case you need more control and flexibility, there is a special Panel component which allows to insert any custom HTML code.

Another very powerful feature is testing. Because the app you are building is a HTML5, jQuery Mobile you can instantly test it in the browser (desktop) or the actual mobile device. I only covered the visual builder in this post, but you can also connect to REST API services, create data bindings and export the app as mobile web or PhoneGap app (Android, iOS). I’ll cover that in another post. For now, go to http://tiggzi.com and sign up for the Free plan.