Windows Phone export in Tiggzi will be available tomorrow.

If you are not familiar with a hackathon format, it goes like this. The event usually starts Friday evening with what’s called “developer dating” or simply networking. After about an hour, event sponsors and tool providers make a 5-10 minute presentation on their API’s and tools. After that the attendees get a few minutes to pitch their app ideas. Once all the presentations are done, it’s time to form teams and start building the apps. Team forming or app building goes until about midnight. The next day the event restarts at about 10am, accompanied by breakfast and the teams start building and hacking. This goes until about 7pm at which point all development stops and teams get about 3 minutes to present their apps. Once everyone presented, the judges get together and decide on the winners.

This was our fourth hackathon after attending hackathons in San Diego and Seattle (sponsored by AT&T) and one in San Francisco sponsored by Microsoft. The Palo Alto one was the biggest hackathon so far. This is probably because it was in the heart of Silicon Valley and sponsored by Facebook.

We arrived at AT&T Foundry around 6pm on Friday, and the place was already pretty busy. AT&T Foundry is a great place for a hackathon, large area, large tables. The entire place was divided into small sections (but still open) which are perfect for teams working together.

Alex Donn started the event around 7:30pm introducing himself, his team, AT&T and all the partners. He always shows this picture which shows all the various tools that attendees can use during the hackathon:

More companies presented after Facebook. There were presentations from Apigee UserGrid, AT&T mHealth, Mozilla and Viafo. We (Tiggzi) also got a chance to present. We got about 3-4 minutes to show how to build an app in Tiggzi. What’s really amazing is that I built a Twitter search app in under 2 minutes! Yes – that’s how long it takes to build a simple app in Tiggzi. The app is jQuery Mobile on the UI and connects to Twitter’s search REST API.

I did run into a small glitch during the demo. My WiFi connection went down. Yes, even thought the event was happening at AT&T, WiFi connection was rather flaky. Most likely due to number of different devices (laptops, tablets, phones) in the same room, all trying to use the same network. I haven’t had any demo issues for a very long time so I guess it was just time. So, the next one is now far away! For about 1 minute I didn’t have Internet connection and was about to give up but then I got reconnected and was able to finish the app.

Anyone who wanted to use Tiggzi to build their app could get 2 months Pro plan. In fact, any attendee could get the 2 months Pro plan. We also offered prizes to winning teams. 1st place best app built in Tiggzi gets 12 months Pro plan for the entire team. 2nd and 3rd places get 6 months Pro plan for the entire team.

Sasha and I stayed at the hackathon until around midnight talking with people and telling them more about Tiggzi. We got home around 1:30am.

Next morning we met around 9am and drove to Palo Alto getting there just after 10am. A good number of teams were already there and building their apps. We settled down in the main (first) room where people could easily find us.

We counted about 10 teams (out of 29) using Tiggzi to build their apps. The rest of the day was very busy for us. I don’t think we had more than 5 minutes of free time, both of us were helping different teams with Tiggzi questions as well as various API questions. It was busy but we had a lot of fun!

To win the best app prize and $20,000 the app had to use Facebook Graph API. We came prepared to the hackathon and created a step-by-step tutorial on how to build an app in Tiggzi that uses Facebook API. Note: turned out you can also use client-only authentication which is a little bit simpler than described in the tutorial.

Everything was going well, and a number of teams started testing the app on the actual phones. Tiggzi comes with a really awesome test feature where at any moment you can launch the app in the browser for testing. To give a feeling of a real phone, the app opens inside a frame – where the actual frame looks like a generic smart phone:

When you open the same test URL on a mobile device, we detect the device and don’t render the frame. The transition between frame and the non-frame version is done with a basic redirect. The redirect unfortunately caused a problem when testing the app on the actual mobile device. Facebook would do a callback to a page in Tiggzi app with query parameters that need to be saved. A redirect would happen (when testing the app on a mobile device) but the query parameters would be lost. An obvious solution was to use mobile only pages (for callback and in Facebook app settings). We found another problem, now with jQuery Mobile. The callback URL from Facebook uses # (instead of ?) to separate the start of query parameters and this caused jQuery Mobile fail to load. At the end we did find a workaround, and users were able to test on the actual mobile device. We are working on long term solution as well. For example, we are making the phone frame to be optional.

At 7pm development stopped and all the teams lined up to present their apps. All the teams that used Tiggzi presented the app running in desktop browser, the phone frame is a nice feature and mimics a real device. At the end, the bug wasn’t such a big issue – after all the teams did build the apps.

Once all the presentations were done, we went to a separate room and picked the winners. We also picked best three apps built with Tiggzi. Best Tiggzi app 1st place (12 months Pro plan winners) was won by a team that didn’t have any HTML or jQuery Mobile experience.

The feedback was pretty much universal from all the teams, people are amazed how easy it is to build apps with Tiggzi. At the same time, we get a ton of feedback on improving Tiggzi builder. Here is what we are planning based on hackathon feedback:

1. Simplify project creation – just one project type (the app can be either mobile web or PhoneGap app)
2. Make the phone frame for testing optional. By default we will open the app link in full browser window. This might not look as “nice”, but technically it gives a better view of how the app looks and behaves.

We are looking forward to the next hackathon!

I want to thank Sasha for spending the weekend helping build apps instead of being in Yosemite. I also want to thank the entire Tiggzi team for amazing job done. They are many more awesome features they are planning to release.

Just in time for the hackathon, we published a tutorial on how to connect to Facebook.

See you there.

Do you want to see how to use in-app carrier billing in developing a mobile app? Come join us as Exadel and WAC, in conjunction with Deutsche Telekom’s Developer Garden, present a hands-on interactive webinar in which we will demonstrate how to build an app with Tiggzi Mobile App Builder and WAC’s in-app billing API. We’ll show everything from the WAC sign-up process to the creation and testing of a complete functioning app.

Webinar organizers:
Tiggzi/Exadel (Twitter, Facebook)
WAC (Twitter, Facebook)
Deutsche Telekom’s Developer Garden (Twitter, Facebook)

When: Wednesday, May 23, 2012 9:00 AM – 10:00 AM PDT
Register: https://www1.gotomeeting.com/register/971108977

Now you can create your mobile app in Tiggzi and instantly build the iOS binary file (or Android).

As we use the standard iOS build process, you will still need to provide your Apple developer information (nothing we can do about that, more information here on how to get it). The information is then set in project profile:

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!

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: