Building HTML5 Mobile Apps in Tiggzi with Aepona REST API [Webinar]

At the Mobile World Congress in Barcelona, Exadel an­nounced a part­ner­ship with Aepona, the market leader in Network-as-a-Service so­lu­tions, to make it easier for mo­bile de­vel­opers to take ad­van­tage of Aepona’s ser­vice APIs for its telecom part­ners by in­te­grating the APIs with Tiggzi Mobile App Builder. As a first step, Tiggzi now in­te­grates the Aepona billing and au­then­ti­ca­tion APIs for in­cor­po­rating in-app car­rier billing ca­pa­bil­i­ties that elim­i­nate the need for a credit card or PayPal account.
Come join us as Exadel and Aepona present a hands-on in­ter­ac­tive we­binar about this. See for your­self how to use the Aepona APIs as we build an app in minutes.
Using Aepona API Services in Mobile Apps with Tiggzi
April 12, Thursday
11am US Pacific Time
Register: https://www1.gotomeeting.com/register/947832601

Really Cool New jQuery Mobile Themes!

Check out the new jQuery Mobile themes and swatches we just added to Tiggzi Mobile App Builder. Click on image to see larger version.

Learn How To Build Android Apps Using Cloud Service At AnDevCon II, Nov 6-9

Tiggr Mobile Apps Builder (Exadel) is going to be at AnDevCon II in San Francisco Bay Area, November 6-9. Stop by our booth and learn how to build Android apps ready for the Android Market using cloud services, all in about 5 minutes. It’s really awesome, I promise. To get a peek, watch this video:

Learn How To Build Mobile Apps Using Cloud Services at appsworld, New York

appsworld New York

If you are at appsworld conference in New York, Nov 1-2, you will be able to see the most awesome way to build mobile apps using cloud-based mobile apps builder, Tiggr.

Learn How To Build Mobile Apps Using Cloud Services
November 1, at 13:00
In this cool session you will learn how to build HTML5 and native apps
using Tiggr. Tiggr is a cloud-based mobile apps builder. A real mobile
app will be built during the session, which attendees will be able to
run and test on their own devices.

Tiggr (Exadel) is also exhibiting so stop by our table, say hello and see how to build a mobile app in about 5 minutes.

Getting Started With Android Tutorial Updated

Getting started with Android tutorial updated. It now has screen shots from Tiggr’s new UI and a new section on exporting and publishing your app.

Awesome Webinar: Building Mobile Apps In The Cloud, With jQuery Mobile and PhoneGap

Join us next Tuesday, October 11, 2011 at 11:00 AM Pacific Time and you will see how to build a real mobile app entirely in the cloud with jQuery Mobile, using Tiggr Mobile Apps Builder. In fact, as I build the app, you will be able to try it on your devices. Now that’s pretty cool! You will also see how easy it is to get native app using PhoneGap library.

Don’t wait, register for this cool webinar today.

Mobile Apps Builder – trial period is now 30 days!

Our Mobile Apps Builder had just 15-days trial period. We know it wasn’t enough. Starting today the trial period is now 30 days! You don’t need to give us your credit card, just sign up and try it. We are pretty sure you will love it, it’s super easy to build real mobile Web and native apps.

HTML5 Local Storage – Building a Sample App In Tiggr Mobile Apps Builder

HTML5’s local storage is undoubtedly one of the most interesting and most talked about features in the HTML5 technology stack. Local storage is part of Web Storage specification and is supported by all modern browsers (destkop and mobile). Although local storage (or Web Storage) sounds rather sophisticated, the functionality is very easy to use. You basically get a map as storage inside the browser (available to all browser windows). You can insert, delete or read key/value pairs. That’s it. Data stored in local storage (localStorage) will be there when you close and open the browser. There is also session storage (sessionStorage). As the name implies, it will be only available as long as the browser window is open, and will be cleared when browser window is closed.

The only other thing to know is that data saved by a page is only available for a pages from the same domain. In other words, a page loaded from abc.com, doesn’t have access to data saved by page from domain xyz.com.

We are going to going to build an app that looks like the screen shot below. In fact, you can try the app here (click the image, or scan the QR code). Try it on your mobile device as well.

To build the app, I used Tiggr Mobile Apps Builder. If you are wondering why Tiggr? Well, because it’s incredibly simple and fast to create a project and build app. If you don’t have an account yet, quickly sign up here.

First build the UI by dragging and dropping jQuery Mobile components from the palette on to the phone. At any point, you can click Test to try the app in browser, or mobile browser.

You can use Tiggr to build real mobile apps without writing any JavaScript. But, for more advanced cases (like ours), you can easily write any custom JavaScript. You can even import 3rd party JavaScript libraries. In our case, we are going to create a new JavaScript file (called asset) with the following content:

// save item
function save(item) {
  var size = localStorage.length + 1;
  localStorage.setItem('key' + size, item);
}
// get storage content
function storage(){
   var output='';
   for (i=0; i <= localStorage.length - 1; i++)  {
      key = localStorage.key(i);
      val = localStorage.getItem(key);
      if (i == 0) {
         output = val;
      }
      else {
         output = output + 'n' +val;
      }
   }
   return output;
}
// clear storage
function clear () {
   localStorage.clear();
}

There are three functions, one for saving a new item (save()), one for getting the current storage (storage()) and one for clearing the content (clear()). Local storage API is very simple. For example, to save an item:

localStorage.setItem('key', 'item');

then, to get a value from storage:

localStorage.getItem('key');

This is how the complete file looks inside Tiggr’s JavaScript editor:

The last step is to invoke JavaScript when the buttons are clicked. We also want to load storage content when the screen is loaded for the first time. Let’s work on the buttons first. To invoke JavaScript on button click, we first add click HTML event to the button:

Then we add Run Custom JavaScript action by clicking the + button:

Click on the action to enter JavaScript code. The code for Save to Local Storage button looks like this:

var item =$('[dsid="input"]').val();
save(item);
var output='';
output = storage();
$('[dsid="storageContent"]').text(output);

We first find the input component using jQuery (it’s going to simpler to do that, once we introduce Tiggr JavaScript API, work in progress). Save the value from the input element, reload storage content so we can display it inside the textarea.

Clear Local Storage button looks like this:

clear();
$('[dsid="storageContent"]').text('');
alert('Local storage cleared.');

Lastly, we also add load event to the screen itself so that we can show storage content when the screen loads for the first time:

var output='';
output = storage();
$('[dsid="storageContent"]').text(output);

Try it yourself (it’s easy and fun!) and try the finished app here.

Using Tiggr and PhoneGap to Build Native Apps

If you don’t know what Tiggr is, Tiggr is a Web-based mobile apps builder or a mobile RAD (Rapid Application Development) tool. It enables developers to build mobile Web and native apps very quickly. Tiggr comes with a visual editor and jQuery Mobile components. You simply drag and drop components into the phone area.

This makes it very easy to prototype and build the UI. Once you have developed the UI (which you can share and test in browser or mobile device), you define and connect to REST services. Once the service is defined, it is mapped to the UI. A service usually has inputs and outputs. Mapping means taking input from UI (such as input component) and using it as input for the service. On the other side, taking service output and mapping it back to the UI, for displaying the result. One last step is usually adding an event to invoke the service. For example, on a button click the service can be invoked. What I just described is a very easy and fast way to build mobile Web apps. There is nothing to setup or configure, just launch the Tiggr visual editor and start building.

Now, how do you get a native app? That’s where PhoneGap comes in. PhoneGap is an open source framework, it wraps your mobile Web app and gives you access to native device API. To use native features, PhoneGap provides very clean and elegant API. For example, to sound a notification beep twice, you need to call the following:

navigator.notification.beep(2);

Simple, right?

To get device information, the following code is used:

alert ('Device Name: '  + device.name     + 'n' +
     'Device PhoneGap: ' + device.phonegap + 'n' +
     'Device Platform: ' + device.platform + 'n' +
     'Device UUID: '     + device.uuid     + 'n' +
     'Device Version: '  + device.version  + 'n';

Any native mobile project in Tiggr comes configured with PhoneGap version 1.0. How do you invoke this API when building a mobile app in Tiggr? It’s very simple. Tiggr comes with Run Custom JavaScript action which can be invoked on any HTML event. Let’s take a button. When a button is clicked (click event), you add an action (Run Custom JavaScript) to invoke. That’s it. Inside the Run Custom JavaScript, you can run any custom JavaScript.

You start with a button, we will use the Vibrate button:

Add click HTML event to the button:

Add Run Custom JavaScript action:

and finally add PhoneGap JavaScript call:

navigator.notification.vibrate(1000);

Another option is to create a JavaScript file (Project > JavaScript), write all the custom code there in functions and then invoke any function via Run Custom JavaScript action.

JavaScript file:

Invoking a function from the custom JavaScript file:

Once you use native API, testing in Web browser is no longer possible. To make it super easy to test your native app, you can use Tiggr Mobile Tester. It’s a native app (Android, iOS) which lists all your mobile projects created in Tiggr. You simply tap any app and launch the native app. The app looks like this:

Like what you see? Try Tiggr Mobile Apps Builder yourself!

Thanks to Paul Beusterien for the example idea.

Building Mobile Apps In The Cloud at GigaOM Mobilize

Next Tuesday, September 27, I will be presenting Tiggr Mobile Apps Builder at GigaOM Mobilize event in San Francisco. The session has a workshop format so I will build a real mobile app during the session – an app that everyone in the room can try as I build it.

The workshop starts at 12:45pm (Tuesday, Sept. 27).

Building Mobile Apps in the Cloud
Exadel’s Tiggr is a Cloud-based development platform for building mobile Web and native apps that uses PhoneGap and jQuery Mobile.In this workshop, you will see how to build and test cross-platform, cross device mobile Web apps consuming Cloud and Web services using HTML5, CSS3, and JavaScript using a drag-and-drop visual editor.