Maxa Blog

A few weeks ago I promised to publish a tutorial on how to build a mobile app and connect it to Parse backend.

You can get the full tutorial here.

You really have to try it yourself building a mobile app in Tiggzi app builder and connecting it to Parse mobile backend is amazingly easy. You can literally build a real mobile app in about 30 minutes. Creating the actual backend is fast as well, takes about 2 minutes. Any backend object is instantly available via REST API and then used in the mobile app.

Here is a general outline of the tutorial:

1. Sign up for Parse and create the mobile backend. The mobile backend object (class) is a list of text messages
2. Build the mobile UI with jQuery Mobile and HTML5 (see screen shot below)
3. Create and use REST service to load text messages (REST: https://api.parse.com/1/classes/Words, GET request)
4. Create and use REST service to create a new texg message, (REST: https://api.parse.com/1/classes/Words, POST request)
5. Update the mobile UI to include a Delete button (REST: https://api.parse.com/1/classes/Words/objectId, DELETE request)
6. Create and use REST service to delete a text message
7. At any step in the tutorial, you can test the actual app in Web browser
8. Optionally, update the look and feel of the app

The final app looks like this:

In mid January we have released an update to Tiggzi mobile app builder and now every app (new or old) is based on jQuery Mobile version 1.0.

Now that there is a Free plan, nothing should stop you from building your mobile app.

Last week we have we have renamed our cloud-based mobile app builder to Tiggzi (from Tiggr). Tiggzi is the most powerful and easy to use cloud-based mobile app builder.

Free Plan!

But, even more interesting news (for you) is that now we have a Free plan. No credit card nothing, just sign up and start building your mobile app.

All the gotiggr.com links work and will continue working and we will be updating all the social media links. For now, use the links below to get help.

Email
Forum
Docs and Getting Started
Blog
Twitter
Facebook

My reply to this Cross-Platform Mobile Visual Development – a Tool Comparison. I tried posting this in the comments but that didn’t work. Tiggzi: the cloud-based mobile app builder should definitely be there.

Home page: http://tiggzi.com
Genesis: The cloud-based HTML5 and hybrid mobile app builder.
Version: Cloud (and white label)
Licensing: Free and premium — http://tiggzi.com/pricing
Download: Nothing to download, cloud-based
Documentation: http://help.gotiggr.com/videos
Sample application: http://tiggzi.com/common/showcase/browse.seam
Wikipedia: http://en.wikipedia.org/wiki/Mobile_application_development
Additional: The app is built with jQuery Mobile/HTML5. Connected to any REST API, tested, and exported as mobile Web, Android or iOS. PhoneGap is used for access to native device features.
Article on how to use: http://help.tiggzi.com/getting-started, Tiggzi and PhoneGap.

In this fas­ci­nating hands-on we­binar, a real mo­bile app will be built, con­nected to a REST ser­vice, and tested. Attendees will be be able to test the app as it’s being built. Beyond that, we will also cover some of the ex­citing fea­tures of the new ver­sion of Tiggr that will have been re­leased by then (under a new name…).

Learn How to Build Mobile Apps in the Cloud with HTML5, jQuery Mobile, REST, and PhoneGap
January 19, Thursday
11am US Pacific Time
Register: https://www1.gotomeeting.com/register/486123896

I’m not sure whether there is any other way to describe it but building a mobile app in Tiggr Mobile Apps Builder and connecting to Parse mobile back end is super easy and fast!

Here is how the app look in design time in Tiggr:

There are three REST services on the right which connect to Parse mobile back end. The services are for loading the current list items, creating new list item and deleting a list item. For example, this is how the service URL to get all List items looks:

https://{username}:{password}@api.parse.com/1/classes/List

List – is a class I created in Parse.

This is how the service URL looks for deleting an item:

https://{username}:{password}@api.parse.com/1/classes/List/{objectId}

objectId – is the class Id to delete.

Parse mobile back end is very easy to use and is very elegant.

Here is how the actual app look when running:

I’ll publishing the actual tutorial on how to build this app.

It’s almost funny how fast a mobile app can be build using Tiggr and Parse. The app was built in about 30 minutes, with nothing to download or install, all the tools are in the cloud.

Happy New Year!

Tiggr – the easiest platform for building mobile apps in the cloud

Tiggr is a cloud-based mobile apps builder. It lets developers build HTML5/JavaScript and native apps very quickly, entirely in the cloud. There is nothing to download, nothing to install, and nothing to configure. Just create a new project, and you are ready to start building your mobile app with HTML5/JavaScript and PhoneGap.

Building mobile UI with jQuery Mobile

To build the mobile UI, there is a visual editor and jQuery Mobile components, as shown below. You simply drag and drop components into the phone area.

You can create multiple screens, navigate between screens, store data in Local Storage, and write custom JavaScript. This means you can create the complete UI for your mobile app and also test in a Web browser.

Testing the mobile app

Testing is one of the most innovative features in Tiggr. There is a big Test button at the top. Clicking that button opens up a browser window with the mobile app in it. Need to test the app on the actual device? Scan the QR code, and e-mail the URL to your device. Don’t forget to make the app public. (More about testing native apps a little bit later.)

Consuming any cloud service

Once the UI is ready, the next step is connecting to cloud services. In Tiggr, you can connect to any cloud REST service. Below is an example of using the service editor to define a connection to Twitter’s search REST service:

Once the service is defined, it is mapped to the UI. A service usually has inputs and outputs. Mapping specifies how different UI components are related to different service parameters for input and output. There is even a visual data mapping editor available (service output is shown on the left, screen components are shown on the right:

The JavaScript column (on the left) allows you to write custom JavaScript to give you more power and flexibility when mapping service to UI (custom JavaScript is also available when mapping UI to service).

One last step is adding an event to invoke the service. For example, on a specific button click (HTML click event) the service could be invoked. You can of course use any other HTML events. With Tiggr this is easy.

Native apps with PhoneGap

PhoneGap is an awesome mobile app platform. It takes advantage of Web technologies developers already know: HTML and JavaScript. PhoneGap makes it super easy to wrap any mobile Web app as native, but also provide access to device native features via its elegant and easy-to-use API.

Exporting native app

Every app (native) in Tiggr comes with PhoneGap installed. To export the app as native is as simple as clicking the big Export button:

If you are targeting for Android, then you can download Android Release binary (.apk). This file is ready for the Android Market. Tiggr has a Android .apk file editor for you to enter all the necessary information.

If you are targeting iOS, then export iOS xCode project (Eclipse). You can then build the app on your machine or use cloud-based PhoneGap Build service to build for iOS.

As an alternative, for both Android, iOS or any other platform you can download the mobile Web version (Web resources, HTML/CSS/JS) and use PhoneGap Build service to build for the platform.

For example, if you need to build for BlackBerry, then simply download the mobile Web version and upload to PhoneGap Build. It’s that simple.

Using PhoneGap API

What if you need to invoke PhoneGap API to access device features? Well, that’s very simple too. Tiggr comes with Run Custom JavaScript action, which can be invoked on any HTML event.
As an example, we will implement a Vibrate button.

First, we add the click HTML event to the button:

Add an action – Run Custom JavaScript:

and finally add the PhoneGap JavaScript call:

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

Note that you can also import an existing JavaScript file (from a URL or via uploading).

Invoking a function from the custom JavaScript file is done via Run Custom JavaScript action:

Testing native apps

Once you use a native API, testing in Web browser is no longer as useful. To test native apps, you can use Tiggr Mobile Tester. It’s a native app (Android, iOS) that lists all your mobile app in Tiggr. You simply tap any app in the list to launch the native app for testing. It’s the easiest and fasted way to test a native app without having to install it. The tester app looks like this:

Device components

Being able to invoke custom JavaScript (and PhoneGap API) almost from anywhere makes Tiggr and PhoneGap so powerful. But, that’s not all. Tiggr now has components in the Device palette which are based on PhoneGap API:

This is even simpler than using the API. More components are planned to be added such as Camera and others.

Tiggr and PhoneGap – The ULTIMATE mobile app development combo?

We think so.

You have Tiggr, a cloud-based mobile apps builder. There is nothing to install or configure. Tiggr uses jQuery Mobile, HTML5, JavaScript and CSS to build mobile apps. The app’s UI is built inside a visual editor, the app can easily be connected to any cloud service, and the app can be tested at any point in a browser or on a device. At the end, you can export the app source.

Then, you have PhoneGap, a powerful framework that uses HTML5 and JavaScript to build native mobile apps and makes it super easy to access native features in an app, such as contacts and camera. PhoneGap’s cloud-based build service allows you to build quickly for multiple platforms.

When you combine the two, Tiggr and PhoneGap, you get powerful cloud-based HTML5 mobile apps builder with an easy way to incorporate native device features and build for multiple mobile platforms.

Sign up for Tiggr and build your mobile app today.

Originally posted on PhoneGap blog: http://phonegap.com/2011/12/15/building-mobile-apps-in-the-cloud-with-tiggr-and-phonegap/

Mapping mobile UI to service is one of the most basic tasks in any mobile app (or a standard Web application). Input data entered by the user is sent to the service (input), the service is invoked, returns data (result) is sent back to the app for displaying results. Tiggr Mobile Apps Builder makes it super easy to map UI to service. Let’s look at an example.

REST service settings:

REST service input parameters:

REST service output parameters:

To open the standard mapping editor, there are two buttons in properties for a service:

Mapping UI to service look like this:

The service input parameters are on the left and are mapped to input components and properties on the right.

Mapping service back to UI for displaying the result looks like this:

The service output parameters are on the left and are mapped to output components and properties on the right.

Now there is even a more visual way to do the same. There is a new Data Mapping tab in the main editor, clicking the tab will open a visual data mapping editor:

That’s a pretty cool way to do mobile UI to REST service mapping.

Slides from my talk at AppsWorld conference in London (Nov 29-30) on building mobile apps in the cloud with Tiggr.

Learn How to Build Mobile Apps Using Cloud Services View more presentations from Max Katz

State of RichFaces

The post originally appeared on StackMob blog: http://www.stackmob.com/2011/11/truly-rapid-prototyping-with-stackmob-and-tiggr/

The blog post is written by Crawford Comeaux an independent mobile app developer that recently participated in Startup Weekend down in Baton Rouge, LA and ended up winning. This post is about how he used StackMob and Tiggr to quickly build a web app prototype during the Startup Weekend event. His app is called AudienceAmp and he needs your help to win Global Startup Battle. Please vote here if you like his idea. Here is his story.

I love Startup Weekends! They provide me a chance to easily find like-minded people looking to make their ideas a reality and they’re nothing but fun. Grueling, exciting, stressful fun. On any given weekend, there’s likely at least one going on somewhere in the world. I’ve been to four of them, successfully pitched one of two ideas at each and my teams have placed three times. These things are like crack for wannabe entrepreneurs with ADHD…or at least for THIS wannabe entrepreneur with ADHD! If you are not familiar with the program, you can find out more here.

I participated in my fourth Startup Weekend from November 11-13 in Baton Rouge, LA. I went in determined to win, since winners of Startup Weekends going down on that weekend & the next were eligible to enter into the Global Startup Battle. The winner of the battle is chosen via online voting and there can only be one. The prize up for grabs has the potential to launch the winning startup. So yeah…I wanted that chance, but first I had to win locally.

Most people go into Startup Weekends with just an idea. There’s no preparation done ahead of time. Me, I’m not going into battle without a plan. I wanted to be able to focus primarily on the prototype for the weekend, since the rest of the work had been pretty much addressed at SW Dallas a few months earlier. We built a prototype in Dallas, but the concept for the app had expanded a bit since then and I wanted to start from scratch. I couldn’t count on developers being available, so that meant it’d likely just be myself and a buddy of mine who’s recently developed an interest in interface design. Since the product is a set of mobile apps and we wanted to present with a live demo that others could participate in, that meant it had to be a mobile web app. And we had 54 hours…so we needed development platforms that 1) a non-coder could use 2) produced mobile web apps 2) allowed for “rapid prototyping” (slamming out quick, successive versions of a product)

There are different platforms/libraries/toolkits/etc that are recommended for “rapid prototyping,” but almost all of them define “rapid” from a non-Startup-Weekender-with-short-a-attention-span perspective. Most of the options available have a bit of a learning curve before you can quickly do whatever you want to do, especially if you’re not a coder. And even with simple docs, coding introduces potential fat-finger syndrome. I’m sorry, but a platform that allows for typo-generated errors or bugs doesn’t fit my definition of “rapid.” There are tools for preventing issues or at least detecting their origins, but the tools aren’t perfect and I want to minimize the amount of time I have to spend fixing glitches.

Thus, I went on the hunt for robust, but ridiculously simple solutions. I knew about PhoneGap Build, but wanted to see if there was something beyond that for building the frontend. What I found was Tiggr, a web-based app builder that supports mobile web app development via jQuery Mobile and has a simple drag-and-drop interface builder that let me set properties/events. Not only can projects be exported to your choice of HTML5/CSS/javascript or native Android/iOS projects, but it’s also collaborative!

Front end platform? Check! Time to move on to the backend. I’d read about StackMob on TechCrunch recently & knew about Cocoafish after meeting some of their devs at SW San Francisco in May. After doing a little digging, I found a couple more services: Kinvey and Parse. I signed up for beta invites to each & managed to convince all but Kinvey to grant me one (I still haven’t received a confirmation email from them, but they seem VERY new).

When I evaluated the features of each service, I kept an eye out for features that would be useful beyond prototyping. After reviewing the features offered by each, I eventually settled on StackMob for a few reasons. With StackMob, I can set which fields are indexed, as well as which fields in an object are related to fields in other objects. Being able to get expanded object data through relationships will save us the hassle of making multiple calls for a single screen’s data. On top of that, being able to build custom objects was really important. Parse allows for custom objects, that’s it. Cocoafish didn’t support custom objects until a few days ago, so that wouldn’t work for us, either. StackMob was the simplest option.

Building the data model in StackMob took about 15 minutes! Even if you add to that the 5 minutes I spent begging them for a beta invite, that’s still a server-side setup personal best!

I skipped right over the process of setting up a database server and went right into setting up my database tables! Sure, you may have a way to streamline/ease that initial process, but I didn’t even have to bother with it!

There’s one more feature I’d like to mention that StackMob & Tiggr actually share: responsiveness. The day of the presentation, I started connecting the UI to the backend and ran into a snag: I couldn’t figure out how to properly call the StackMob APIs from within Tiggr! I tried several different naive approaches to no end and searched online for the answer. I tweeted at every Twitter account tied to both companies begging for help and got a response within 15-20 minutes…on a Sunday! Jordan, one of StackMob’s engineers, connected with me over Google Talk and logged into my Tiggr account after I gave him access. He’s a backend guy, so he wasn’t able to provide a solution at that point, but I’d already fought the problem for too long & had to move on to preparing the presentation. After I presented, I started getting tweeted at from both sides…apparently people from both companies got together & provided me with a solution!

Long story short: I’m sold on this pairing for prototyping. Their ease of use, extensibility and fantastic customer service make for a pretty powerful combo!

Oh…and in case you were wondering, the app I’m working on is called AudienceAmp & we did manage to win first place in Baton Rouge. I’ve been up for 24 hours tapping into my social connections, writing WAY MORE than I’d prefer and working with an editing team to produce a (hopefully) viral video! If you’d like to know more about AudienceAmp, check out the links below. If you’d like to vote for us in the Global Startup Battle, go here and click the big “Vote” button!

Try these new and very easy to follow mobile tutorials:

• Building RSS Mobile App
• Building Hello World HTML5 Mobile App With Local Storage

Next week I will be London at Apps World conference showing how to build mobile apps in the cloud with Tiggr. Exadel is going to have a booth at the conference and also a session in the free Developer Zone area. Stop by and learn how to build a real mobile in under 5 minutes!

Learn how to Build Mobile Apps Using Cloud Services
When: Nov 30, 10:20

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 apps on their own devices

On Thursday, January 5, 2012 I will be presenting at Bay Area Mobile:

Prototyping and building mobile apps in the cloud

When: Thursday, January 5, 2012, 6:30 PM
Where: Mountain View, CA

In this cool session you will learn how to build HTML5 and native apps using Tiggr. Tiggr is a cloud-based mobile apps builder that uses HTML5, jQuery Mobile, REST, and PhoneGap to build apps. A real mobile app will be prototyped and built during the session, which attendees will be able to run and test on their own devices.

To sign up and more info: http://www.meetup.com/BayAreaMobile/events/40927112/.

Two other speakers will be presenting as well. Sally Cox from Adobe will be showing Adobe Proto, and Jonathan Smiley from ZURB will be talking about: Why (and How) to Rapidly Prototype for Multiple Devices.

The webinar shows how to build an RSS mobile app with jQuery Mobile, HTML5, REST, PhoneGap, export it and publish to Android Market, all under 40 minutes.

When: November 16, Wednesday, 11am US Pacific Time
Register: https://www1.gotomeeting.com/register/466425672

One of the great things about Tiggr Mobile Apps Builder is its support for end-to-end development, going all the way from an idea in one person’s mind to an app running in thousands of phones. In this webinar, we’ll show you exactly how it’s done (and how easy it is) by walking you through a hands-on example. The focus will be on exporting options for apps. In this case, we’ll export an Android binary (.apk) and publish to the Android Market. Of course, we’ll quickly build an app first, so you can learn or refresh your memory about how to build the UI with jQuery Mobile, connect to REST services, and test the app.

This article was originally published on http://uxmovement.com/resources/innovative-features-in-tiggr-mobile-apps-builder/

Ask anyone involved in making applications as a developer or a customer: Would you like to see how the app looks and behaves before we actually build it? The answer is an overwhelming yes. We humans are very visual. For us, to understand something better, we would rather look at a prototype than just read a description. That’s exactly why prototyping is hugely important today.

Even though prototyping is crucial to any project, a real prototype is rarely fully developed. Why? There are a number of reasons. First, lack of the right tools. Second, most of the tools that do exist today just enable you to create a static mockup. And third, some believe it’s a waste of time, as the real app usually looks very different from the prototype, so why even bother with it. These are all valid concerns, but a new prototyping tool solves these problems. This prototyping tool is Tiggr Mobile Apps Builder.

Tiggr is cloud-based service for building mobile apps. It enables you to quickly and easily build real mobile Web and native apps, entirely in the cloud. Mobile prototyping and prototype testing is a major part in this cloud-based service.

Build the UI with jQuery Mobile Components

Tiggr uses cross-platform jQuery mobile components. This is what makes Tiggr different from other tools. You are prototyping with real components, not just abstract images or drawings. As you can see from the screenshot, the mobile palette on the left holds all the components, and you simply drag and drop them into the phone. Every component comes with many properties, which you can set in the Properties window on the right. Your project may contain any number of mobile screens (pages). It’s easy and super fast to build a mobile UI like this.

But there is more. We understand that how the app looks is very important. So, for those of you who like to be in control and like more flexibility, Tiggr comes with a visual theme editor. You can quickly and easily create your own theme and use it on screens. As you edit the theme, it instantly shows you a preview of how the UI will look.

Test the Mobile Prototype in Desktop or Mobile Browser

Testing your prototype is important. You can do this at any point during mobile prototyping. That’s really the magic in Tiggr. If we couldn’t test in a Web browser, we would end up with another static mockup. Clicking the Test button will launch the mobile prototype in the browser. What you see is exactly how the mobile app will look. Behind the scenes Tiggr generates all the HTML, JavaScript, and CSS. Open it in any browser and test it. This is a huge feature and what makes Tiggr different. This is how the Test window looks:

But there is more. Testing in a desktop browser is definitely great, but that’s not where the app will be running, right? You want to test it on a mobile device, or in a mobile browser. We’ve made it super easy to get the app on the mobile device and make the app public. You can do this by sending the app URL to the mobile device, scan a QR code (with a QR scanner app) or typing the URL in a mobile browser.
Let’s try an actual mobile prototype. Open this URL: http://gotiggr.com/preview/19011/ or scan the QR code below to open a sample mobile prototype:

Make the Prototype Real with HTML Events and Actions

HTML events and actions enable you to make the apps behave like real apps. You already know that you can open the prototype in a browser. This is already a huge step over a standard static mockup. Now you can also make the prototype real. You can make the prototype behave exactly like the real app. You can add standard HTML events and then attach actions to the events. For example, let’s say you want to open a pop-up when a button is clicked. You would add a click event to the button and then associate the “Open as Pop-Up” action with the event.

Let’s say you want to navigate between pages. You would add a click event to any element on the page and then add a “Navigate to Page” or “Navigate to Link” action. Need to do something when the screen loads for the first time? Simply add the load event. When you test the prototype, you are then going to get the real behavior of the app.

It’s important to point out that everything you create in the app is standard HTML, JavaScript, and CSS. You may be wondering: What if I need to do something custom? That’s not a problem. Tiggr comes with a “Run Custom JavaScript” action. In this action, you can write any custom JavaScript. These events and actions is a crucial feature. It allows you to develop realistic, interactive mobile screens on the fly.

Exporting the Prototype’s HTML/JavaScript/CSS

Not only can you easily build and test the prototype in a desktop or mobile browser, but Tiggr comes with a powerful export feature that allows you to export all the HTML/JavaScript/CSS of your prototype. When you export, you don’t just get a picture of what to build, forcing you to have to do everything from scratch when you have to develop the real app.

Add Real Content to the Prototype with REST Services

We have been talking about mobile prototypes so far, but you can take it one step further and build mobile apps using real content. In Tiggr, you can connect to any available REST API, and easily display the desired content in your app to make it look even more real. This is another feature that makes Tiggr different and powerful. Not only that, but Tiggr also allows you to generate a native app with PhoneGap library. You can learn more about it here.

Sharing and Collaboration

Everything I just described can be done in collaboration mode. Not only can you share the test app link, but also you can invite other people to work and collaborate on the prototype with you. The group can work on the prototype at the same time or at different times. Basically, you get the Google Docs model for mobile prototyping.

Summary

Mobile prototyping is a crucial step in building mobile applications. We would all love to see and experience how a mobile app will look before we start developing. Tiggr Mobile App Builder makes this possible. Sign up today at http://gotiggr.com for a free 30-day trial and start building mobile prototypes that look and behave like real mobile apps.

In the context of mobile apps, basic access authentication is way for a Web browser to provide user name and password when invoking a REST service. A REST service that requires basic access authentication will look like this:

https://username:password@www.host.com/products

As you can see we are using https: and passing the username and password to the service.

Working with REST services (that return JSON or XML) is very easy in Tiggr Mobile Apps Builder. Tiggr comes with a service editor where you define service settings such as URL, and data format type (JSON, JSON, or XML). Request Parameters – for defining service inputs. Response Parameters – for defining service outputs.

Continue reading http://blog.gotiggr.com/2011/11/rest-api-with-basic-access-authentication-in-your-mobile-app/

We just returned from app world conference in New York which was a great success. Next week we are heading to 2 more great events: AnDevCon conference and Mountain View JavaScript Meetup.

AnDevCon

Tiggr Mobile Apps Builder (Exadel) is going to be at AnDevCon II (The Android Developer Conference) 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.

Mountain View JavaScript Meetup Group Building apps with Tiggr, A Cloud Service for Building Mobile Apps Wednesday, November 9, 2011, 7:00 PM

In this cool session you will learn how to build HTML5 and native apps using Tiggr. Tiggr is a cloud-based mobile apps builder that uses HTML5, jQuery Mobile, REST, and PhoneGap to build apps. A real mobile app will be built during the session, which attendees will be able to run and test on their own devices.

Sign up to attend this Meetup.

This article originally appeared on TheServerSide.com: http://www.theserverside.com/opinion/A-cloud-service-to-build-mobile-apps.

I’m sure you’ve heard about platform-as-a-service (PaaS) or cloud-based services like Google Apps Engine, CloudBees, Heruko, Engine Yard, and Cloud Foundry. All are excellent platforms that ease the process of managing, maintaining, and administering the platform on which an application you develop runs. Most tend to be focused on the hosting and managing side of the finished application. But what about a cloud-based service that enables you to build an app, and specifically a mobile app? Well, such a service already exists. The cloud-based service is called Tiggr Mobile Apps Builder.

What is Tiggr?

Tiggr is a cloud-based mobile app builder. It enables you to build both mobile Web and native apps. To get a native app, Tiggr uses the PhoneGap library. The beauty in Tiggr Mobile Apps Builder is that there is nothing to download, nothing to install, and nothing to configure or set up. Creating a new mobile app in Tiggr takes relatively little time compared to traditional methods. Tiggr saves developers time when configuring projects with various libraries.

Building a Mobile UI with jQuery Mobile

Tiggr uses jQuery Mobile components – cross-platform and cross-device mobile components. As you can see from the screen shot, the mobile palette on the left holds all the components and you simply drag and drop them into the phone.

You can rearrange components or set properties. A powerful Grid component is available to simplify building apps with complex layouts. An app can have any number of screens, of course.

Adding HTML events and actions

In Tiggr, you build real mobile apps. To make it possible to build real mobile apps we need to be able to define HTML events such as click and value change and then add an action to be invoked for the event. The action can be navigating to another screen, opening a pop-up, setting a JavaScript variable, or invoking a custom JavaScript.

A look at defining HTML events:

Invoking a custom JavaScript action is a powerful feature because it enables you to code your app beyond Tiggr’s initial parameters. You can write and invoke your own custom JavaScript coding, invoke the PhoneGap API to access device features, or import any existing 3rd-party library and use it in your app. For example, here is an example of using the PhoneGap API to make the phone vibrate for 2 seconds:

navigator.notification.vibrate(2000); Defining a REST service and using it on a screen

What’s an app without data? In Tiggr, you can define and use any available REST service. Creating a REST service usually involves setting the service URL, then defining the service inputs and outputs. For example, click on the URL, http://search.twitter.com/search.json?q=html5, to see result from Twitter’s Search REST service. Input in this example is the value of q, and output is what you are going to see in the Web browser.

Specifying the URL for a REST service:

Specifying the REST service’s input:

Specifying the REST service’s output:

Once the service is defined, to use it on a screen, a special Data Source component has to be associated with the screen. Once the Data Source component is associated (through dragging and dropping on the screen), it can be used to specify the mapping of UI input components to provide input data for the service. When the service is done executing, the data source is used to specify the mapping of the result (output) back to UI components for displaying output.

A Data Source component dropped on to a screen:

Testing the App

This is one of the most innovative features in Tiggr. At any point during app development, the app can be tested in a browser or on a mobile device. To start, when the first component is placed on the screen, clicking the Test button will open the app in the default browser. You can see what the app will look like right away.

Here’s a test window in Tiggr:

Testing in a desktop browser is definitely great, but that’s not where the app will be running, right? You want to test it on the mobile device, in a mobile browser. In order to get the app on the mobile device, make the app public. Then you will get a number of options:

1. Send the app URL to the mobile device
2. Scan a QR code (with a QR scanner app)
3. Type the URL in a mobile browser

Here is how the app looks when testing in desktop browser:

Testing native apps

You may be thinking that testing in a Web browser (desktop or mobile) is all well and good, but only if you are building a mobile Web app. How can we see what happens when we use the PhoneGap API to access device features? Testing in a Web browser won’t show this.

The Tiggr Mobile Tester app (for Android and iOS) is designed to simplify testing native apps on the actual device it is intended for. After installing on the device, you sign in to your Tiggr account with the app to display a list of your mobile apps. Simply tap on any app and a native app will launch.

Here is how Tiggr Mobile Tester looks:

Now, this is an awesome way to test native apps. You don’t need to install the app each time, just tap and you get the latest version of the native app.

Exporting the App

Once you have finished the app, you can export the app as mobile Web (HTML, JavaScript, CSS) or as native. For the native option, you can export the source code as an Eclipse project for either Android or iOS, with PhoneGap library configured. This allows you to continue working on the app outside Tiggr. For Android, you can generate a release binary (.apk file) which is completely ready to be published on the Android Market.

Need a BlackBerry app? Export as HTML/JavaScript/CSS and then use PhoneGap Build to build a native app for BlackBerry or any other platform supported by PhoneGap.

Social Apps Development

There are built-in social features in Tiggr. Not only can you share the test app link, but you can invite other people to work and collaborate on the app with you. Users can work on the app at the same time or at different times. There is also a built-in chat feature. Basically, you get the Google Docs model for mobile prototyping. Now that’s very cool.

What Next?

If you are building a mobile app today, sign up for Tiggr and try building your app. It’s a super easy way to build mobile apps. I truly believe you will like it and could even have some fun with it.

Still not convinced? Watch this video.

Need help or want to keep up on Tiggr? Visit the Tiggr help site, try our tutorials, follow us on Twitter @gotiggr, like us on Facebook at facebook.com/gotiggr, and read our blog.