Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Cocomo

Compatible Flex Builder 3. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis Exter), le 10 février 2009
Le service semble s'appeller aujourd'hui LiveCycle Collaboration Service (LCCS) / Adobe Flash Collaboration Service (AFCS). lilive - 29/10/2009

Cocomo qui signifie « Common Collaboration Model » est le nom de code d’une plateforme de services qui permet aux développeurs Flex d’ajouter des fonctionnalités qui sont :

  • Voix sur IP pour l’audio
  • Webcam vidéo
  • Chat
  • Tableau blanc multi utilisateurs
  • Partage de fichiers en temps réel
  • Gestion des utilisateurs
  • Rôles et permissions
  • Robuste messagerie des données

Ces services sont hébergés par Adobe, il n’y a donc pas de problème de déploiement, maintenance et d’adaptation.

Afin de pouvoir utiliser ces services, il faut vous connecter au portail développeurs à l’adresse suivante :

https://cocomo.acrobat.com/

Si vous avez déjà un compte associé avec votre ID Adobe, il vous suffit d’entrer votre ID et de cliquer sur « Login ». Si vous n’avez pas encore de compte, alors cliquez sur « New Dev ? Sign up ! » Complétez les informations demandées et cliquez sur « Create », vous serez automatiquement redirigé sur le portail développeurs.

Depuis ce portail vous avez la possibilité de créer une « Room » qui est un endroit virtuel sur Adobe.com et qui sera présenté dans votre application et aux autres utilisateurs comme une URL. Les clients se connectent et peuvent envoyer et recevoir des messages des autres clients présents. Vous pouvez créer ces « rooms » programmaticallement ou depuis la console de développement.

Nous allons voir tout de suite comment en créer une depuis la console :

- Dans le panneau « Room instance », il suffit de cliquer sur « Add »

- Entrer un nom pour votre « Room »

- Cliquez sur « Save »

Une « room » vide est ainsi crée.

Depuis la console d’administration vous pouvez également créer une clé secrète. Celle-ci est uniquement utile lorsque vous êtes prêts à déployer une application qui utilise une authentification externe. Cette solution n’est pas obligatoire, car Cocomo permet aux invités de se connecter, et comprend également les mots de passes des ID d’Adobe. Cette solution est cependant utile lorsque :

- Vous ne voulez pas que Adobe connaissent les mots de passe de vos utilisateurs.

- Vous voulez créer et gérer vos comptes utilisateurs avec vos propres outils et votre propre infrastructure.

Pour générer une clé secrète, il suffit d’aller dans le panneau « Account Information » et de cliquer sur « Generate ». Si vous avez déjà une clé, celle-ci sera remplacée par la nouvelle.

Nous allons maintenant télécharger le SDK, cela se fait depuis la console d’administration en cliquant sur « Download the SDK ». Vous pouvez ensuite déziper l’archive à l’endroit de votre choix.

Nous allons voir comment configurer l’environnement de développement, il va de soit que vous devez avoir préalablement installé Flex Builder 3, Flex builder 2 n’étant pas supporté. Le SDK peut être facilement installé comme un plugin sous Flex builder, vous aurez ainsi un accès facile à l’API, ainsi qu’à l’aide dans Flex builder. Pour l’installer, il faut copier le SDK dans le répertoire des plugins :

-Windows: C:\Program Files\Adobe\Flex Builder 3\plugins\com.adobe.cocomo

-Macintosh: /Applications/Adobe Flex Builder 3/plugins/com.adobe.cocomo

Et redémmarer Flex builder.

Créons notre projet FLex à l’aide de Flex Builder pour cela il faut cliquer sur le menu « File » –> « New » –> »Flex project », nommer votre projet « Cocomo ». Pour ajouter la librairie à notre projet :

- Cliquez sur « Project » – « Properties »

- Sélectionnez « Flex Build Path »

- Cliquez sur l’onglet « Library Path »

- Cliquez sur « Add SWC »

- Naviguez jusqu’à <SDK install root>/lib/<player9 | player10>/.

- Sélectionez cocomo.swc

- Cliquez sur “OK” Pour définir le chemin de la source pour le débuggeur:

- Sélectionnez l’onglet « Source Path »

- Cliquez sur « Add Folder »

- Naviguez jusqu’à <SDK install root>/src/.

- Cliquez sur “OK” Nous allons maintenant voir combine il est simple de créer un simple chat à l’aide de Cocomo.

Pour débuter, nous importons les librairies utiles à notre projet.

import com.adobe.rtc.pods.simpleChatClasses.ChatMessageDescriptor;
import com.adobe.rtc.pods.simpleChatClasses.SimpleChatModel;
import com.adobe.rtc.events.ChatEvent;

La librairie « com.adobe.rtc.pods » est la librairie qui contient des mini applications, qui fournissent toute les fonctionnalités tel que :

- Webcam vidéo

- Chat

- Tableau blanc multi utilisateurs

- Partage de fichiers en temps réel

- Liste des participants

- Ajout de notes

Nous allons ensuite créer le modèle en appelant le constructeur, mais cela ne suffit pas pour créer la collection de nœuds et pour passer des messages, il faut également donner un ID, qui sera le nom de la collection de nœud, puis appeler la méthode « Subscribe » :

[Bindable]
	public var chatModel:SimpleChatModel;
	protected function buildModel():void
	{
		chatModel = new SimpleChatModel();
		chatModel.sharedID = "myChat";
		chatModel.subscribe();
		chatModel.addEventListener(ChatEvent.HISTORY_CHANGE, onChatMsg);
		this.addEventListener(KeyboardEvent.KEY_UP, onKeyStroke);
	}

On ajoute ensuite la fonction qui permet d’envoyer les messages :

protected function submitChat(str:String):void
	{
		var cmd:ChatMessageDescriptor = new ChatMessageDescriptor();
		cmd.displayName = cSession.userManager.getUserDescriptor(cSession.userManager.myUserID).displayName;
		cmd.msg =  str;
		chatModel.sendMessage(cmd);
		entMsg.text = "";
			}

On ajoute une fonction qui permet d’effacer les messages :

	protected function clearChat():void
	{
		dispMsg.text = "";
		chatModel.clear();
	}

Lors de la création du modèle, on a ajouté un événement « ChatEvent.HISTORY_CHANGE » qui permet de formater les messages lors de leur affichage.

protected function onChatMsg(p_evt:ChatEvent):void
	{
		if(p_evt.message != null && p_evt.message.msg != null && p_evt.message.displayName != null)
		dispMsg.text += "\r\n" +  p_evt.message.displayName + ": " + p_evt.message.msg;
		else
			dispMsg.text = "";
		}

On ajoute également une fonction qui permettra aux utilisateurs d’envoyer leurs messages en pressant la touche « Enter ».

protected function onKeyStroke(p_evt:KeyboardEvent):void
{
	if(p_evt.keyCode == Keyboard.ENTER) {
		submitChat(entMsg.text);
	} 
}

Le MXML se présente comme ceci :

La première partie sert à l’identification de l’utilisateur. Dans notre exemple, nous ne demandons pas d’identification, donc tout le mode pourra se connecter et apparaîtrons sous le nom « Guest » :

<rtc:AdobeHSAuthenticator 
		id="auth" 
		userName="Guest"/>

mais vous pouvez également utilisez l’identification d’Adobe comme ceci :

<rtc:AdobeHSAuthenticator 
		id="auth" 
		userName="ADOBEID"
		password="ADOBEPWD"  />

ou ADOBEID est votre username (email) utilisé lors de l’enregistrement, et ADOBEPWD est votre mot de passe, mais dans ce cas ci, il vous faudra utiliser votre propre système d’authentification.

Nous passons ensuite les valeurs du login à la propriété « authenticator » du « ConnectSessionContainer », et le « IConnectSession » authentifie l’utilisateur en fonction des paramètres.

<rtc:ConnectSessionContainer roomURL="http://connectnow.acrobat.com/XXXYOURACCOUNTXXX/XXXYOURROOMNAMEXXX" id="cSession" authenticator="{auth}" width="100%" height="100%"> 
		<mx:Canvas width="100%" height="100%" creationComplete="buildModel()"> 
			<mx:VBox id="chatBox">
				<mx:TextArea width="800" height="500" id="dispMsg"/>
				<mx:TextInput width="800" id="entMsg"/>
				<mx:HBox>
					<mx:Button label="Submit Chat" click="submitChat(entMsg.text)"/>
					<mx:Button label="Clear Chat" click="clearChat()"/>
				</mx:HBox>								
			</mx:VBox>
		</mx:Canvas> 
	</rtc:ConnectSessionContainer>

N’oubliez pas de remplacer « XXXYOURACCOUNTXXX » par le nom de votre compte et « XXXYOURROOMNAMEXXX » par le nom de votre « Room ».

Cet exemple fait partie des exemples distribué par Adobe avec le SDK, il y a de nombreux autres exemples, sur les autres services fournit par Cocomo. Le but de ce tutoriel était d’expliquer comment installer Cocomo et l’utiliser dans une application Flex.



Vous pouvez télécharger les sources de ce tutoriel ici.

Pour en discuter, le sujet du forum se trouve ici: http://flash.mediabox.fr/index.php?showtopic=102176