Collaborative Google Maps in Flex using Cocomo

Earlier this year Christophe Coenraets, a colleague on the Platform Evangelism team, created an example application which combined Google’s ActionScript API, Flex and BlazeDS to provide a real-time collaborative experience for map browsing.

Following the recent beta release of Cocomo on Adobe Labs I decided to implement the same basic application, with map co-browsing, whiteboard support and chat functionality, using the Cocomo components and leveraging the hosted service provided on Acrobat.com.

I should point out up-front that Cocomo adds to the existing technology in the Flash Platform and provides further choice in terms of how you build and deploy collaborative applications – it does not replace the approach provided by BlazeDS/LCDS. Whilst the Cocomo service removes the complexity associated with deployment, maintenance and scalability of your application by leveraging the existing Acrobat.com infrastructure, BlazeDS/LCDS provides the ultimate level of control, integration and customisation that comes from managing your own application deployment.

With that said, Cocomo makes it really easy to add social and collaborative features to your Flex applications, with support for VoIP, webcam video, chat, multi-user whiteboards, real-time file sharing, user management and robust data messaging. You can add many of these features with just a couple of lines of code as the Cocomo SDK contains a number of pre-built components, whilst it is also flexible enough to create more complex applications.

You can try out a hosted version of the Cocomo Google Maps collaborative application here and you can also download the source code for the project. To try out the application follow these steps:

1. Access http://demo.ashorten.com/gmapcocomo/ on two different machines or in two browser windows on the same machine.
2. Make sure to login with two different user names (your user name is also your display name in the application).
3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
5. The zoom level and the map type are also synchronized between users.
6. Click the “Whiteboard” button in one browser, pick a tool to draw on the map and start drawing.

As a comparison you can check out Christophe’s BlazeDS version of the application here (view source is enabled) – note however that there are some minor differences between the functionality offered between each version.

From a development perspective the big difference for this application is that many of the visual components ship out of the box in the Cocomo SDK, so there was very little I needed to do to get chat and whiteboard support. In addition, I didn’t have to deal with the setup and configuration of the server, I just created a ‘room’ using the admin console for my Cocomo account and then everything else was configured on the client-side using the Cocomo components and ActionScript APIs.

To get started with Cocomo in your own applications I’d recommend you do the following:

• Review the overview information on Adobe Labs
• Create a free developer account at the Cocomo Developer Portal
• Download the Cocomo SDK, read through the Developer Guide and setup Flex Builder as per the instructions to get access to the new Cocomo components
• Examine the ‘DefaultPods’ example application to understand the role of the Authentication, ConnectionSessionContainer and default Cocomo pods such as Roster and SimpleChat.

To ask questions about Cocomo and share your experiences of building collaborative applications be sure to visit the forums.

Advertisement