At the ‘beginner level’, entrants just had to code a pre-defined system. Next came the challenge to integrate with social platforms. Finally, the ‘Secret Agent’ level required more sophisticated integration. Finalists integrated with Amazon and BaseCamp.

For the hackathon, I created Voiceforce with Force.com guru David Schach (X Squared on Demand) and defending champion of last year’s Dreamforce, Elaine Greco. We threw together a system that allows a Support Case to be lodged via a voice interface.

Using Dial2Do, a user can place a phone call, say “Create Case” and leave a message. A minute or so later, the Case appears in Salesforce:

It was quite amazing placing a phone call and seeing the spoken message appear within a Case. Yes — Dial2Do actually transcribed the phone call directly into a case. The flow is basically:

• Call Dial2Do and leave a message
• Dial2Do transcribes the message into text
• It sends the message via a URL to a Force.com Sites page
• The Visualforce controller extracts the message from the URL, creates a Case and inserts the message
• Voila! It appears in the list of cases — providing a voice-to-case system

Unfortunately, Dave Carroll & co didn’t include us in the Top 3 entries, but if they saw our fantastic logos I think they would have changed their mind! (Yes, that ‘No Typing’ logo was hand-created from a mouse mat! Great work, Elaine!)

The most fun was hacking in the company of fellow Force.com developers. It was hard to type without having somebody ‘auto-correct’ my syntax! The M&Ms and bean bags helped, too!

The Bottom Line

• Integration with Force.com is easy — both in & out
• Force.com is a community as well as a platform

The Challenge is designed to evangelize the Force.com platform, encouraging lots of people to discover, learn and use Force.com. The rules are wide open — just build something using Force.com, Visualforce and Sites (so that it is publicly accessible). It’s a very clever idea — sort of a small version of the X-Prize , with the concept that offering prizes will encourage more people to do interesting than actually directly paying people to do it!

Our Entry

So, would you like to know about our entry?

Yes, I use the word ‘Our’ rather than ‘My’ because I’m happy to say that I teamed up with David Schach, author of the X-Squared on Demand blog . Previous readers will remember that I met David some time ago when he visited Australia . Well, it just so happened that David read my previous blog entry about the Cloud Developer Challenge and dropped me an email to say he was visiting Australia again, and did I want some help?

This was a god-send, because I had been hitting lots of brick walls in my ramp-up of Visualforce and Sites knowledge, and David is an absolute expert in the subject. So, I did all the high-level UI, he did all the low-level ‘engine room’ stuff and we worked in the middle to make a very exciting site.

Introducing Daily Shinro

The site we developed is a Social Gaming Website that we call Daily Shinro .

The idea for the site began with my work team at Atlassian , where we play a daily game of SET , a really fun logic puzzle that changes each day. To keep track of our scores, we created a shared Google Apps spreadsheet with our scores and we soon discovered that it was actually just as fun to analyze the scores as to play the game!

We had been looking around for another daily puzzle that we could all play, preferably something that only took a couple of minutes and which had a scoring element. Unfortunately, very few online games took our interest. However, around that time, I had become addicted to playing Shinro Mines on the iPhone. Shinro is a little-known puzzle that has been described as a cross between Minesweeper and Sudoku.

So, once I put together the desire to enter the Cloud Developer Challenge, the need for another team puzzle with a social scoring element and my enjoyment of Shinro Mines, the choice of project became obvious!

A Social Gaming Website

There’s really two parts to Daily Shinro: the game and the social aspect.

The Game
I created the game in JavaScript using the fantastic open-source Raphael JavaScript graphics library that provides cross-browser graphics. It renders in XML for IE (boo!) and SVG for every other browser (yay!). It even supports animation.

Raphael was actually written by Dmitry Baranovskiy , a colleague of mine at Altassian. I highly recommend you look at the demo pages!

To provide a ‘daily’ concept for the game, a new puzzle is made available each day. The background picture for the puzzle is a daily selection from flickr, selected with the help of the beautiful Idée Multicolr Search Lab . It just adds a bit of spice and variety to the daily puzzle!

Social Gaming
From the very beginning, my intention was to create a ‘social’ gaming experience, based upon the spreadsheet developed by my work team. Basically, scores are calculated by how well each player beats the team average. Therefore, it needs at least two people to play the puzzle and all scores net-out to zero. This has the advantage that, if somebody doesn’t play one day, they aren’t penalized.

This scoring system is implemented at two levels in Daily Shinro — Public and ‘League’.

At the Public level, players’ scores are compared to the public average. At the League level, scores are compared only amongst your friends or office co-workers who are members of the same League.

Leagues are all about comparisons within a team rather than between teams — sort of like a private gaming site for friends. Thus, everyone can create their own League and invite friends to join. The score graphs then reflect the scores amongst members of the League.

The charts are generated with some magical Apex code that gathers up League scores, compares players to game averages and then outputs the results into a Google Charts URL.

I invite you all to visit www.dailyshinro.com and play the game!

If you find any bugs or strange behaviors, please let us know!

Will we win?

Ah, that’s the big question! My personal goal is to have the site ‘mentioned’ in the results pages of the Cloud Developer Challenge. That way, we’ll feel rewarded for the long hours that were put into the site.

We’ve done several things to give us an advantage in the competition:

• We made a fun site that is attractive and enjoyable to use.
• We utilized lots of different technologies to showcase how Force.com can ‘pull together’ capabilities from across the web to build an even richer application environment.
• We added lots of pages of explanations , showing how we used Force.com technology. I’m hoping that this will help the folks at Salesforce.com promote the Force.com platform, which means that they’ll want lots of people visiting our site to help promote their technology. And what better way to do this than mentioning us in the final results?! (Clever, eh!)
• Finally, there’s this blog, which I know is read by about 1000 people per month (including some legendary Salesforce staff!). Throw in David’s blog and we’re hoping to get the attention of enough people in Salesforce that we’ll get on the short-list.

Oh, one word to the judges — we fixed a few bugs in the last couple of days. So, if you visited the site already, please visit again and see it in its fully-working glory!

It’s been a tough Challenge, but it was great fun and an utterly fantastic way to learn Visualforce and Sites. I started with zero knowledge and now consider myself a competent user of those technologies. I’d also like to thank David Schach whose knowledge of Visualforce and Sites is just incredible. I couldn’t have done this site without him.

The Bottom Line

• Visualforce and Sites are mature and capable technologies for building websites on Force.com technology
• The Cloud Developer Challenge was an excellent way to ‘spread the word’ and get people to use the technologies
• You’ve got to visit Daily Shinro!
• If you know the judges, please tell them how great we are! :)

I started a bit late because I couldn’t think of anything fun to make. Then, a few cool ideas came together and I’m spending whatever time I can on the effort. I’ll talk more about the entry in a later post, but thought it worthwhile posting my learnings as part of the process.

Visualforce

The Challenge wants something built using Force.com Sites (technical stuff) and that mostly uses Visualforce (technical stuff ).

To date, I haven’t had a business need to justify my learning Visualforce so it remained a mystery. However, that has changed with my need to crash-learn Sites and Visualforce.

The first thing I realised was how reliant Visualforce is on the Apex programming language. I had earlier postulated that Apex was at the top of the Force.com skillset, being the hardest to learn. I’m now thinking that Visualforce should be at the top, because it relies so much on Apex to add useful functionality. Using Visualforce without knowing Apex would be difficult, indeed. So, at least I did things in the ‘right’ order.

Frustration

As with developing any new application, and even moreso when trying to use a new technology, there are things that take a while to figure out. Here’s some things I learned:

Field-level security also impacts Sites. I was trying to figure out why a page wasn’t displaying some fields (they came up as blank) and why I was getting occasional "unauthorized access" errors. Yep, turned out to be field-level security settings for my Sites Guest Profile. I managed to debug it using the Field Accessibility function under Security Controls. It appears that "Guest" profiles used by Sites don’t appear in the selection set when adding a field (unless it’s a Required Field), so after creating a new field I had to go back to the Guest Profile and add access permissions. Argh!

Update: In fact, it could be a bug. The Sites and Portal profiles don’t appear when creating a custom field, but if I hit ‘Previous’ to go back to the Profiles selection screen while creating the field, the additional profiles appear. I’ve logged it as a potential bug.

The <apex:page> tag doesn’t show the page title if showHeader="false". I found it mentioned on a discussion board and mention it here in case it frustrates you, also.

Governor limitations are still our enemy but it’s slightly better under Visualforce. According to Apex documentation, the "Total number of records retrieved by SOQL queries" is 1000 x batch size for Triggers and 10,000 for Visualforce. This becomes a real stinker when used with the count() function on a SOQL query since every row is counted even though the function is only returning an integer. Thus, SELECT Count() from Contact will fail if there are more rows than allowed by the limit. This is really, really stupid. If you agree, vote for this idea to Count the SOQL count() query as a single row query.

Instant Apex in the System Log window is fantastic! I used it to test the Governor Limit with code like this:

List ls = new List();
for (integer i = 0; i < 1000; i++) {
  ls.add(new Test__c());
}
insert ls;
integer c = [select count() from Test__c];
System.Debug(c);

The Salesforce UI was really slow. Really, really slow. I used the Net tab in Firebug to see what was slowing things down, and it was continually reloading JavaScript files that should have been cached and the wholepage was taking 15+ seconds to load. Here’s a picture of the time taken after clicking the ‘New’ button to add a Custom Field:

Well, I eventually discovered that Firefox was not caching SSL pages. I turned it on (enter the address about:config then set browser.cache.disk_cache_ssl to true and now the pages load at a screaming pace!

To trigger field updates via a link, look at Scott Hemmeter’s article on how to Invoke Apex from a Custom Button using a Visualforce Page.

Stylesheets are always a pain but the Salesforce Unearthed blog has a good article Style your VisualForce Pages -for newbies that was very helpful, especially the bit about standardstylesheets="false". I also found a good article about DIV Based Layout with CSS that explains the basics of formatting a page using DIVs. Also, be sure to read the bit in the Visualforce manual that mentions how to match style id.

Static Resources have to be public. I’ll admit, I got some strange variations on this, but lots of documentation give this advice.

In fact, Salesforce Unearthed has an excellent example of how to use a Zip file as Static Resource. It lets you put your stylesheet and images in a single zip file. Fascinating!

The Bottom Line

• There’s a lot to learn to get Sites and Visualforce doing what you envisage
• You’ll need Apex and HTML skills (preferably CSS, too)
• All time for the standard frustration of coding in new systems