Home » Adobe, Flex 3, Real Time Collaboration

ADOBE COCOMO (Adobe Flash Collaboration Service)

3 May 2009 One Comment

Cocomo - Common Collaboration Model - è un servizio Adobe, attualmente disponibile a titolo gratuito sul sito Adobe Labs, che permette agli sviluppatori Flex di realizzare logococomoapplicazioni di collaborazione in tempo reale, sincronizzando dati, audio e video.

E’ possibile creare quindi giochi multiuser, audio e video conferenze, chat testuali, pubblicare file condivisi tra più utenti, condividere lavagne, Collection, note e molto altro grazie ai componenti già inclusi nel framework, simili in tutto e per tutto a quelli disponibili nel servizio Adobe Connect

Quali sono quindi le differenze principali rispetto a Flash Media Server (FMS)?

Innanzitutto la semplicità di utilizzo del framework e la velocità con cui è possibile realizzare software multiuser, grazie alle numerose classi e componenti forniti a corredo che permettono di dimenticare diverse problematiche spesso frustranti soprattutto per gli sviluppatori che si affacciano per la prima volta a questa tipologia di applicazioni real-time.

1_component

In secondo luogo, viene totalmente fornito il servizio di hosting (attualmente a titolo gratuito) su cui fare girare le applicazioni, evitando quindi ogni tipo di problematica inerente alla configurazione e gestione del server di streaming.

Primi step: registrazione e configurazione

L’homepage di Cocomo è disponibile al seguente URL, http://labs.adobe.com/technologies/afcs/, ma per utilizzare il servizio è necessario creare un account al sito https://cocomo.acrobat.com/. Una volta effettuato l’accesso potrete effettuare il download dell’SDK e visualizzare il pannello di controllo per il monitoraggio delle informazioni relative al vostro account e creare la vostra room

2_pannellococomo

All’interno dell’SDK trovate:
- reference delle classi e documentazione in formato PDF.
- esempi già funzionanti di videoconferenze, chat, sincronizzazione dati, ecc.
- il file SWC che fornisce classi e componenti alle vostre applicazioni Flex (da posizionare nella cartella libs della propria applicazione Flex o da importare nel progetto)
- un paio di utility realizzate in AIR tra le quali la COCOMO DEV CONSOLE (CocomoDevConsole.air) di cui di seguito mostriamo uno screenshot

3_comomopanel

Per sfruttare Cocomo all’interno della vostra applicazione dovrete infatti inserire direttamente all’interno del codice mxml le vostre credenziali impostando una stanza (room) nella quale fare girare il servizio.

Di seguito il codice MXML relativo all’autenticazione:

<rtc:AdobeHSAuthenticator 
		id="auth" 
		userName="[VOSTRO USERNAME]" 
		password="[PASSWORD]"  />
 
<rtc:ConnectSessionContainer id="cSession" authenticator="{auth}" 
width="100%" height="100%"  
roomURL="http://connectnow.acrobat.com/[ACCOUNT]/[ROOM]" >

NOTA: AdobeHSAuthenticator e ConnectSessionContainer sono due nuove classi disponibili in Cocomo.

Realizziamo quindi un’applicazione multiuser per lo spostamento sincrono di un oggetto

Nell’SDK di Cocomo è presente materiale sufficiente per iniziare a divertirsi. Tuttavia, ho creato un ulteriore esempio per mostrare la semplicità con cui è possibile sincronizzare tra più utenti i dati contenuti in un oggetto e simulando quindi la base per una qualunque applicazione o gioco multi-utente.
Questo compito, in Flash Media Server, era delegato esclusivamente ai remote shared object e talvolta poteva risultare un po’ ostico.

Creeremo, quindi, un pannello trascinabile e faremo in modo che tutti gli utenti collegati all’applicazione vedranno in tempo reale lo spostamento del pannello, e a sua volta potranno riposizionarlo inviando nuovamente a tutti gli utenti le coordinate x,y aggiornate.

In sostanza, se l’utente 1 sposta l’oggetto in una nuova posizione, l’utente 2 vedrà aggiornarsi automaticamente la sua posizione.

4_browser

Il codice di esempio è composto da due file:

1) una classe ValueObject che conterrà le coordinate del pannello e rappresenta l’oggetto che andremo a sincronizzare
2) il file MXML per il funzionamento generale dell’applicazione e della pubblicazione (sincronizzazione) dell’oggetto.

File: ObjectData.as

package
{
	public class ObjectData
	{		
 
		public var x:Number;
		public var y:Number;
 
		public function ObjectData(p_xPos:Number, p_yPos:Number):void
		{
				x = p_xPos ;
				y = p_yPos ;
 
		}
	}
}

File: MoveObject.mxml

<![CDATA[
	import com.adobe.rtc.messaging.MessageItem;
	import com.adobe.rtc.events.CollectionNodeEvent;
	import com.adobe.rtc.sharedModel.CollectionNode;
 
	private var collectionNode:CollectionNode ;
 
	private function onCreationComplete():void
	{
// Creazione CollectionNode indispensabile per il passaggio e la sincronizzazione dei dati
// (per approfondire consultare la documentazione COCOMO)
collectionNode = new CollectionNode();
		collectionNode.sharedID = "complexObjectActionScript" ;
		collectionNode.connectSession = cSession ;
		collectionNode.subscribe();
					collectionNode.addEventListener(CollectionNodeEvent.SYNCHRONIZATION_CHANGE,onSyncChange);
		collectionNode.addEventListener(CollectionNodeEvent.ITEM_RECEIVE,onItemReceive);
 
		// Registriamo il nostro Value Object
		MessageItem.registerBodyClass(ObjectData);
	}
 
	/**
	 * Funzione per la sincronizzazione
	 */
	private function onSyncChange(p_evt:CollectionNodeEvent):void
	{
		if ( collectionNode.isSynchronized ) {
			if ( !collectionNode.isNodeDefined("complexObjectNode")) {
				collectionNode.createNode("complexObjectNode");
			}
		}
	}
 
	/**
	 * Pubblicazione del nostro oggetto
	 */
	private function publish(p_position:ObjectData):void
	{
		collectionNode.publishItem(new MessageItem("complexObjectNode",p_position));
	}
 
	/**
	 * Al ricevimento dell’oggetto aggiornato l'interfaccia verrà modificata
	 * posizionando il pannello alle nuove coordinate
	 */
	private function onItemReceive(p_evt:CollectionNodeEvent):void
	{
		var objectVo:ObjectData = p_evt.item.body as ObjectData ;
		panel.x = objectVo.x;
		panel.y = objectVo.y;
	}
 
	/**
	 * Trascinamento Pannello
	 */
	private function dragMe(p_evt:MouseEvent):void
	{
		panel.startDrag(false)
 
	}
 
	/**
	 * Stop Trascinamento e pubblicazione delle nuove coordinate
	 */
	private function stopDragMe(p_evt:MouseEvent):void
	{
		panel.stopDrag()
		var objectVo:ObjectData = new ObjectData(panel.x,panel.y);
		publish(objectVo);
	}
 
]]>
 
<!--
Autenticazione: inserimento credenziali
-->
 
<!--
	URL room personale
-->

Conclusioni

I vantaggi di Cocomo sono molteplici. Da una parte permette agli sviluppatori junior di avvicinarsi ad una nuova tipologia di applicazioni, finora quasi prerogativa dei senior.
Dall’altra, i developers FMS potranno invece disporre di un nuovo strumento alternativo per velocizzare il loro lavoro, che tradotto in termini economici rappresenta un abbattimento dei costi da parte dell’azienda, sia dal punto di vista delle ore-uomo, sia per quanto riguarda la gestione e il mantenimento dell’hardware necessario al funzionamento delle applicazioni.

Download Source Code

Risorse Utili

Blog Cocomo
Forum Cocomo
http://www.actionscript.it/forum/
Flex-Developers.org – Sezione Red5
ADC – Flash Media Server

One Comment »

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.