Innovative Features in Tiggr Mobile Apps Builder

by on 10/18/11 at 8:14 am

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.

What is Tiggr?

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.

Add events

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.

Add actions

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.

Sign Up for a Free Trial

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.

About Max Katz:
Max Katz is a Senior Systems Engineer and Lead RIA Strategist at Exadel. Max is the community manager for Tiggr. Max writes about RIA technologies on his blog, and can be found on Twitter as @maxkatz. Max holds a Bachelor of Science in computer science from the University of California, Davis and MBA from Golden Gate University.

10 Responses to “Innovative Features in Tiggr Mobile Apps Builder”

  1. Mep

    Oct 18th, 2011

    …holy crap. Amazing

    • Ronan

      Aug 28th, 2013

      Hi folks, for anyone who needs to put together iOS, Android or Win8 mobile app prototypes a little bit quicker check out http://www.fluidui.com/ You can easily create fully linked prototypes with touch gestures and animated transitions using the drag and drop tool, and then test the prototype on your mobile by scanning a QR code for free. Hope this helps!

  2. Robin

    Oct 21st, 2011

    $45 a month per user ><.

    • Max

      Oct 24th, 2011

      @Robin: we believe it provides enormous value to designers and developers. Using Tiggr, you will save a lot of time. Please try Tiggr. If you need more time, we can always extend your trial.

      Having said that, we are considering to introduce a lower priced plan or maybe even a Free plan.

  3. bill

    Oct 26th, 2011

    So you can build a native app, and then download as native app to test? This example was just a mobile website, so I am curious.

    • Max

      Oct 27th, 2011

      Yes. You build the app with jQuery Mobile, HTML, JavaScript and CSS and then can package the app as native with PhoneGap. You can also of course use PhoneGap API to access native features such as camera, contacts, etc.

  4. andrew

    Oct 28th, 2011

    Hello Max, so the $45/month allows me to develop unlimited numbers of apps? Any “Tiggr” logo or brand on the App? Or any “hosting fee”, or any other fees?

    • Max

      Nov 2nd, 2011

      Sorry for the delay in replying. This site doesn’t sent notifications when a comment is posted.

      Yes, you can build any number of apps. Any brand.

      Once you build the app, it’s yours. Host it any where. You only pay as long as you use the builder. No other fees.

  5. Jennifer

    Jan 27th, 2012

    Hi
    $45 per user was for last year . Is it the same this year or has it been changed .

  6. Nick Lachey

    Feb 24th, 2012

    Fantastic post. Here’s a tool that lets you build web and mobile apps fast and without coding! http://www.caspio.com/

Leave a Comment