Ecrire ses propres blocs de service pour Microsoft Popfly

Par Christophe Lauer – Janvier 2008

Qu’est-ce que Microsoft Popfly ?

Microsoft Popfly est le nom d’une nouvelle plate-forme actuellement en phase de Bêta-test permettant de créer, de publier et de partager des applications web composites dites « mash-ups », des gadgets ou encore des pages Web, et ceci sans nécessiter l’écriture de code dans un langage informatique. Dans Popfly, vous pouvez créer des applications de façon ludique en assemblant simplement plusieurs « blocs » à l’aide de la souris, comme s’il s’agissait d’un jeu de construction.

Pour accéder à Microsoft Popfly, dirigez simplement votre navigateur internet vers l’adresse suivante : http://www.popfly.com

Du fait de ce positionnement, Microsoft Popfly s’adresse à des utilisateurs d’internet désireux de réaliser des créations originales, et de les partager ensuite, mais sans avoir à passer par les phases longues, fastidieuses et parfois ingrates de l’apprentissage d’un langage informatique, quel qu’il soit.

Toujours dans l’objectif d’aller vers plus de simplicité, Microsoft Popfly n’est pas une application que vous installez sur votre ordinateur. Au contraire, il s’agit d’une application complètement Web qui s’exécute dans votre navigateur internet et pour laquelle tout se passe en ligne, connecté à internet.

Pour accéder à Microsoft Popfly, il vous suffit donc d’un ordinateur connecté à internet avec Internet Explorer version 6 ou 7, ou Mozilla Firefox 2.0 sous Windows XP, Windows Vista ou Apple MacOS X. En outre, vous devrez posséder ou créer un compte Windows Live ID pour vous connecter à Popfly. Si vous ne possédez pas de compte Windows Live ID, vous pouvez en créer un gratuitement depuis cette adresse : http://login.live.com.

Enfin, certains blocs d’affichage utilisent Microsoft Silverlight pour présenter des affichages riches et interactifs. Vous devrez installer le plug-in Silverlight sur votre ordinateur pour bénéficier de ces blocs. Le plug-in Silverlight peut être gratuitement téléchargé depuis cette adresse : http://www.microsoft.com/silverlight/install.aspx.

Bien que Popfly ne s’adresse pas en premier lieu aux développeurs, il existe une fonctionnalité intéressante dans Popfly qui va nous permettre d’enrichir la plate-forme en nous permettant d’écrire nos propres blocs de traitement, et en les partageant avec les autres utilisateurs. L’objectif de cet article est précisément de vous montrer comment écrire son propre bloc dans Popfly, en utilisant le langage Javascript bien connu des développeurs Web.

NB : S’agissant d’une application en version Bêta test, Microsoft Popfly est disponible pour le moment uniquement en Anglais, et il n’existe pas de version localisée de l’application ni de son interface utilisateur. Par conséquent, cet article mentionnera les noms des menus et options de l’interface utilisateur en Anglais dans un souci de clarté et afin d’éviter toute ambiguïté.

De quoi ai-je besoin pour créer mes propres blocs ?

Rien de plus. A partir du moment où vous possédez un compte Windows Live ID qui vous permet d’utiliser la version Bêta de Popfly, vous disposez de tout ce qui est nécessaire pour créer vos propres blocs de traitement, puisque cette fonctionnalité est proposée en standard par Popfly, et qu’elle est accessible depuis l’interface web du site.

Mais penchons nous déjà rapidement sur le fonctionnement du « Mashup Creator » de Popfly et sur la façon dont on utilise des blocs pour créer des mashup avec Popfly.

Donc on parle de blocs…

Depuis le début de cet article, nous parlons de blocs sans avoir réellement défini ce dont il s’agit. La notion de « bloc » dans Popfly peut être expliquée à travers l’image d’une chaine de traitement qui va relier la sortie d’une fonction de traitement à l’entrée d’une autre. Chacun de ces blocs de traitement est vu par l’utilisateur final comme une « boite noire », dans le sens ou l’utilisateur n’a pas besoin de connaitre la façon dont ce bloc fonctionne pour pouvoir l’utiliser.

Ainsi, pour créer une application de mashup, l’utilisateur va choisir plusieurs blocs de traitement et un bloc d’affichage parmi les blocs proposés dans la boite à outils de Popfly, et il va ensuite arranger ces blocs logiquement en reliant la sortie d’un bloc à l’entrée d’un autre bloc, de façon à obtenir le traitement souhaité.

Dans Popfly, vous trouverez dans la partie gauche de l’éditeur « Mashup Creator » une boite à outils qui vous propose la liste de tous les blocs de traitement ou d’affichage que vous pouvez utiliser pour créer une application (Figure 1). Ces blocs sont regroupés en plusieurs thèmes fonctionnels comme par exemple « Images & Video », « Shops » ou encore « Social Networks ». A l’intérieur d’un groupe, les blocs « standards » fournis par Popfly sont repérés par une icône « M » blanche sur fond bleu – et qui fait référence au classique logo Microsoft - tandis que les blocs proposés et partagés par d’autres utilisateurs de la communauté sont repérés par une icône représentant un buddy vert.

La partie supérieure de la boite à outils comporte une zone de saisie qui agit comme un filtre. Par exemple, entrez le texte « picture » dans la zone et cliquez sur la loupe pour filtrer le contenu de l’affichage de la boite à outils et révéler l’ensemble des blocs qui ont un rapport avec le traitement, la manipulation ou l’affichage d’images ou de photos. Vous pouvez ensuite supprimer ce filtre d’affichage en cliquant sur la croix rouge à droite de la zone de saisie.

Assembler des blocs pour créer un mash-up

Vous pouvez simplement expérimenter la création d’un mashup à partir de l’assemblage de plusieurs blocs en étudiant le fonctionnement d’un mashup existant. Pour cela, vous allez sélectionner l’option Create a Mashup / Mashup / Image Carousel depuis la page d’accueil de Popfly, comme sur la capture d’écran ci-contre. Cette option va ouvrir l’éditeur de mashups et y créer un projet complet à partir d’un modèle fourni par Popfly.

C’est une façon simple de démarrer à partir d’un mashup complet et fonctionnel. Si on survole ce premier exemple d’application, on voit littéralement que ce mashup consiste à extraire des images de deux sources différentes, à en combiner puis à les afficher au sein d’un ultime bloc nommé « Carousel » et utilisant Silverlight pour afficher les photos avec une animation.

En parcourant les blocs dans le sens des flèches bleues – et par convention généralement de gauche à droite dans la sens de la lecture – on repère un premier bloc « Flickr » qui va chercher des images contenant le mot clé « tofino », puis au dessous un second bloc « Image Scrapper » qui va rechercher les images contenues dans une page Web, ici en l’occurrence dans la page d’un site touristique consacré également à la ville de Tofino en British Columbia au Canada. Les deux collections d’images retournées par chacun de ces blocs sont alors combinées en une seule et unique liste par l’utilisation du bloc « Combine » puis le tout est alors envoyé au bloc d’affichage « Carousel ». (Figure 3)

Maintenant que les présentations et la théorie ont été abordées, revenons-en à notre sujet initial : à savoir l’écriture d’un bloc de service personnalisé.

Créer son premier bloc

Depuis le menu « Create stuff », cliquez sur l’option « Blocks » : l’éditeur de blocs se charge dans votre environnement Popfly. Celui-ci affiche deux onglets : l’un destiné à recevoir le code Javascript contenant la logique et les traitements de votre bloc, l’autre devant recevoir un document XML – selon une grammaire propre à Popfly – qui décrit votre bloc, c'est-à-dire qui contiendra les méta-données sur votre bloc comme son nom, le nom de son auteur, les différentes méthodes que votre bloc propose, ainsi que pour chaque méthode, les paramètres attendus en entrée et ceux retournés en sortie.

Par défaut, ces deux zones sont vierges et ne comportent qu’un commentaire qui fait office de « placeholder ». Popfly vous propose donc de démarrer de zéro pour écrire un bloc, ce qui n’est pas aisé, surtout pour écrire votre premier bloc.

Heureusement, Popfly vous propose dans le menu de gauche une liste de tous les blocs officiels proposés par la plate-forme, ainsi que ceux partagés par les autres utilisateurs. Vous pouvez alors choisir un bloc fonctionnellement proche de celui que vous voulez réaliser et le copier dans votre environnement en cliquant simplement sur le nom de ce bloc. Ceci a pour effet de dupliquer le code et le descriptif XML du bloc sélectionné dans votre éditeur de blocs au sein d’un nouveau projet que vous pourrez sauvegarder ensuite à côté de vos autres créations.

Nous allons commencer par étudier un bloc très simple, le bloc « Text Helper ». Saisissez le mot « Text » dans la zone de recherche supérieure du menu gauche pour filtrer les blocs et cliquez ensuite sur le descriptif de ce bloc afin de l’importer dans votre environnement de travail, comme sur la copie d’écran suivante :

Vous devriez obtenir quelque chose d’équivalent à la copie d’écran suivante, avec les contenus des onglets de code et de description importés depuis le code d’origine du bloc Text Helper :

Détaillons maintenant ensemble le contenu de ce document XML. Commençons par le début.

<?xml version="1.0"?>
<block class="TextHelperClass">
   <description>Text Helper. Provides simple operations for manipulating text.</description>

La première ligne est le classique prologue présent dans tout document XML. La seconde, sans grande surprise, comporte le nom logique – ie interne à Popfly – de la classe Javascript représentant notre nouveau bloc. La troisième comporte le libellé en clair destiné à l’utilisateur et qui sera affichée à l’utilisateur dans l’éditeur de mash-ups au survol du bloc concerné par la souris, comme dans la copie d’écran de la figure 4.

Vient ensuite un élément « Operations » contenant une liste d’éléments « Operation ». Chaque Operation représente une des méthodes exposées par le bloc en question. Dans le cas du bloc Text Helper, on repère ainsi quatre Operations qui sont : getSubstring, append, skipFirstCharacters et split.

Détaillons à présent le premier élément Operation, concernant la méthode getSubstring :

<operations>
  <operation name="getSubstring" callMode="sync">
    <description>Returns a portion of the input text, given a position and length.</description>
    <inputs>
      <input name="text" required="true" type="string">
       <description>The input text.</description>
       <defaultValue>Geronimo</defaultValue>
       <constraints/>
     </input>
      <input name="startIndex" required="false" type="nonNegativeInteger">
       <description>The position of the first character of the destination string.</description>
       <defaultValue>0</defaultValue>
       <constraints/>
     </input>
      <input name="length" required="false" type="nonNegativeInteger">
       <description>The length of the destination string, if you don't want to go to the end of the input string.</description>
       <defaultValue>1</defaultValue>
       <constraints/>
     </input>
    </inputs>
    <outputs>
     <output isArray="false" type="string"/>
   </outputs>
  </operation>

La lecture de ce bloc nous apprend que la méthode prend trois paramètres en entrée et produit une valeur en sortie. Les trois paramètres en entrée sont dans l’ordre text, startIndex et length. Ces paramètres sont typés. Le premier est une chaine de caractères (string) alors que les deux derniers sont des valeurs numériques entières non négatives (nonNegativeInteger).

La valeur de sortie, quant à elle, est une valeur unique de type chaine de caractères. Si notre bloc avait dû retourner une liste de chaines de caractère, l’attribut isArray de notre élément de sortie output aurait reçu la valeur true. Par exemple, la méthode split découpe une chaine de caractères en deux en donnant en sortie les différentes sous-chaines formées par rapport à un caractère séparateur donné. En sortie, la méthode split retourne donc un tableau de chaines de caractères. Aussi, son type de sortie est définit de la façon suivante :

      <outputs>
        <output isArray="true"type="string" />
      </outputs>

Nous verrons par la suite dans notre exemple comment écrire des blocs qui vont produire des types de sortie complexe, allant au-delà d’une simple valeur non scalaire. Nous devrons pour cela définir le type du paramètre de sortie en définissant une structure ad hoc.

Passons maintenant à la lecture du code Javascript de notre bloc de traitement en cliquant sur l’onglet « Block Code ». Le code intégral de notre bloc est fourni ici dessous. On remarquera que le code de notre bloc est moins long en nombre de lignes que son fichier XML de description.

function TextHelperClass() {
};
TextHelperClass.prototype.getSubstring = function(text, startIndex, length)
{
    if (!startIndex)
        startIndex = 0;
    if (!length)
        return text.substr(startIndex);
    else
        return text.substr(startIndex, length);
};
TextHelperClass.prototype.append = function(first, second)
{
    return first + second;
};
TextHelperClass.prototype.skipFirstCharacters = function(text, skipCount)
{
    return text.substring(skipCount, text.length);
};
TextHelperClass.prototype.split = function(text, separator)
{
    return text.split(separator);
};

Notre code Javascript contient la définition d’un objet ayant pour nom TextHelperClass. C’est ce même nom de classe que l’on retrouve dans la seconde ligne de l’entête de notre fichier XML de description de notre bloc. La voici pour rappel :

<?xml version="1.0" encoding="utf-8"?>
<block class="TextHelperClass">
  <description>Text Helper.  Provides simple operations for manipulating text.</description>
  <operations>

Ensuite, on trouve dans le code Javascript la définition de nos quatre méthodes getSubstring, append, skipFirstCharacters et split. La notation utilisée est celle qui passe par le mot clé Javascript prototype. Grâce à cette notation, on définit nos quatre méthodes comme des extensions à la classe TextHelperClass qui seront partagées par toutes les instances de cette classe. C’est la notation retenue par l’ensemble des blocs dans Popfly. C’est donc aussi celle qui est implicitement recommandée pour écrire vos propres blocs.

Le reste du code de ce bloc est simplissime. Il s’agit essentiellement d’exposer des méthodes classiques de manipulation de chaine de caractères en Javascript sous la forme d’un bloc Popfly. La plupart des méthodes de notre bloc Text Helper ne comportent donc qu’une seule ligne de code et ne font pas de traitement d’erreurs.

Un bloc de service plus complexe avec Popfly

Nous allons maintenant nous attaquer à l’écriture d’un bloc de service plus complexe et présentant des données exposées publiquement sur Internet au travers d’un flux RSS.

Dans notre exemple, nous allons écrire un bloc Popfly qui sera chargé de récupérer une liste des biens immobiliers proposés à la vente ou à la location par le site SeLoger.com. Les résultats pourront être ensuite utilisés par différents blocs d’affichage, en particulier par le bloc Virtual Earth, ce qui nous permettra alors de situer ces biens immobiliers sur une carte.

NB : Avant de construire un bloc Popfly utilisant une source de données qui ne vous appartient pas, il est de votre responsabilité de contacter le fournisseur du service ou le propriétaire des données de façon à obtenir l’autorisation d’utiliser ces données. Nous concernant, nous avons bien entendu obtenu l’autorisation de la part du site en question pour écrire et partager un bloc Popfly qui utilise leur flux RSS public.

Dans notre exemple, nous avons choisi d’utiliser le flux RSS d’un site grand public en tant que source de données. Nous aurions aussi bien pu aller piocher notre source de données parmi les innombrables APIs publiques proposées par les sites et services en ligne, et dont une liste conséquente est maintenue à jour par le site ProgrammableWeb.com à l’adresse suivante :

http://www.programmableweb.com/apis

Le flux RSS proposé par SeLoger.com est construit autour d’une URL qui contient les différents paramètres de la recherche. Nous avons passé un peu de temps à en comprendre le fonctionnement et voici ce à quoi nous avons abouti :

Le flux RSS accepte un certain nombre de paramètres en GET dans l’URL. En voici le détail :

•  idtt : Identification du type de transaction, soit 1 pour une recherche d’un bien en Location, 2 pour un bien proposé à la Vente
• dtypebien : Identifiant du type de bien recherché. Par exemple, utiliser les valeurs 1 pour une Maison, 2 pour un Appartement, 3 pour un Parking ou un Box, 4 pour un terrain et enfin 5 pour un commerce
• cp : Code postal ou département de la zone de recherche. Utiliser par exemple 75005 pour le 5ème arrondissement de Paris, 17 pour le département des Charentes Maritimes, et 94100 pour la commune de Saint-Maur des Fossés.
• surfacemin : Exprimée en mètres carrés, la surface minimale du bien recherché
• nb_pieces : La liste sous la forme d’une énumération du nombre de pièces pour le bien recherché. Utiliser par exemple la valeur « 2,3,4 » pour rechercher un bien allant du 2 au 4 pièces.

Ainsi, l’URL suivante permet de retrouver une liste d’appartements en location dans le 5ème arrondissement de Paris, et ayant une surface supérieure à 60 m2, et comportant entre 2 et 4 pièces :

http://www.seloger.com/rss,recherche.xml?euro=1&idtt=1&idtypebien=1&nb_pieces=2,3,4&cp=75005&surfacemin=40

Nous allons proposer la saisie de ces différents critères à l’utilisateur de notre bloc via les paramètres. Nous allons donc exposer ceci au niveau du fichier de description XML de notre bloc.

Symétriquement, les informations retournées par notre bloc pour un bien donné sont multiples : descriptif, surface, prix, etc. Il nous faut donc définir une structure permettant de retourner ces informations pour chacun des biens. Nous allons donc créer une entrée dans la section « Objects » de notre fichier XML. Cette section était vide dans le bloc Text Helper puisque nous n’avions pas besoin de définir de type de données personnalisé. Voici la définition complète de notre nouveau type SeLogerItem :

<objects>
<object name="SeLogerItem">
<field name="title" type="title" isArray="false"/>
<field name="link" type="url" isArray="false"/>
<field name="description" type="description" isArray="false"/>
<field name="location" type="location" isArray="false"/>
<field name="prix" type="string" isArray="false"/>
<field name="ville" type="string" isArray="false"/>
<field name="type_bien" type="string" isArray="false"/>
</object>
</objects>

On note que dans cette structure qui définit les données contenues dans un SeLogerItem, certaines données ont des types peu courants pour un développeur habitué aux langages classiques. Ainsi, la donnée link est de type « url », la donnée location est de type « location » et enfin la donnée description est de type « description ».

En fait, l’utilisation de ces types qui permet de préciser l’usage et la finalité de la donnée en question va permettre au Mashup Creator de Popfly de trouver automatiquement des liens logiques entre des données en sortie d’un bloc et des données en entrée d’un autre bloc.

Par exemple, quand on connecte la sortie du bloc Flickr à l’entrée du bloc Carousel, le Mashup Creator va automatiquement connecter les données des deux blocs ayant des types compatibles (par exemple de type « url ») en supposant que des données sont compatibles et que le fait de les connecter a bien un sens.

Il est donc important de choisir avec soin le type le plus précis et le plus adapté à la sémantique d’une donnée. Ainsi, le Mashup Creator pourra faire des associations automatiques qui seront une aide précieuse pour les utilisateurs débutants.

Voici la liste non exhaustive des types principaux supportés par Popfly. Commençons tout d’abord par les types de données le plus classiques :

integer
decimal
string
date
dateTime

Passons maintenant à des types plus spécifiques à Popfly, ainsi qu’à une explication sur le contexte dans lequel les utiliser :

id // Un identifiant unique quelconque
userName // Un nom d’utilisateur
title // Un titre
city // Un nom de ville ou de commune
state // Un nom ou un code d’état, par exemple « WA » pour Washington, « CA » pour Californie
countryOrRegion // Un nom de pays ou de région
location // Un endroit, par exemple « Paris, France »
longitude // Une valeur numérique flottante exprimant la longitude
latitude // Une valeur numérique flottant exprimant la lattitude
description // Une chaine de caractères contenant un texte descriptif humainement lisible
url // Une adresse internet vers une ressource ou un site
imageUrl // Une adresse internet pointant vers une image ou une photo
thumbnailImageUrl // Une adresse interent pointant vers une image ou photo en format vignette
nonNegativeInteger // Une valeur entière positive ou nulle
category // Une valeur de catégorie, parmi une liste énumérée arbitraire

Ainsi, on note que l’on a utilisé pour définir notre structure SeLogerItem les types suivants : string, title, description, location et url.

Pour le reste, notre bloc SeLoger ne comportera qu’une seule méthode, afin de rester dans un exemple simple et facile comprendre. Voici la définition de cette méthode que nous allons parcourir ensemble :

<operations>
<operation name="getItems" callMode="auto">
<description>
Searches for houses or appartments from SeLoger feed according to the provided criterias.
</description>
<inputs>
<input name="typeBien" required="false" type="nonNegativeInteger">
<description>Le type de bien recherche (1: Maison, 2: Appartement, 3: Box)</description>
<defaultValue>2</defaultValue>
<constraints/>
</input>
<input name="codePostal" required="false" type="nonNegativeInteger">
<description>Departement ou code postal de la recherche (ex: '75005', '17' ou '94210')</description>
<defaultValue>92</defaultValue>
<constraints/>
</input>
<input name="typeTransaction" required="false" type="nonNegativeInteger">
<description>Type de recherche (1: Location, 2: Vente)</description>
<defaultValue>1</defaultValue>
<constraints/>
</input>
<input name="nbPieces" required="false" type="string">
<description>Le nombre de pieces dans le bien recherche (ex: '2', '3', ou '2,3,4')</description>
<defaultValue>2,3,4</defaultValue>
<constraints/>
</input>
</inputs>
<outputs>
<output isArray="true" type="custom" object="SeLogerItem"/>
</outputs>
</operation>
</operations>

Notre méthode getItems comporte donc quatre paramètres en entrée. Aucun de ces paramètres n’est obligatoire, puisque tous ont la valeur « false » pour leur attribut required.

Ne disposant pas de la possibilité d’utiliser des valeurs énumérées de type « code / libellé » actuellement avec Popfly, nous avons du nous rabattre sur l’utilisation de valeurs entières pour les paramètres idtt, idtypebien et cp. Nous fournissons une explication à l’utilisateur sur les valeurs utilisables via le message présenté dans une infobulle et qui est construit à partir du contenu de l’élément description du paramètre.

Enfin, on remarque qu’on fournit une valeur par défaut pour chacun des paramètres. D’une part ça permet d’aider l’utilisateur en lui présentant un exemple du type de valeur attendue en entrée, et d’autre part, ça permet à l’utilisateur de tester rapidement le bloc avec des valeurs « qui marchent ».

Le fait de fournir ce fichier descriptif du fonctionnement de notre bloc à la plate-forme Popfly va permettre à cette dernière de générer automatiquement une représentation artificielle de notre bloc sous la forme d’un cube que l’on va pouvoir venir configurer directement et visuellement depuis l’éditeur de Mashups de Popfly. Voici à quoi ressemble notre bloc SeLogerClass une fois terminé et en mode configuration au sein du Mashup Creator :

Passons à présent au code de notre bloc à proprement parler.

Le code commence par la déclaration de notre objet SeLogerClass et la définition de son unique méthode utilisateur getItems :

function SeLogerClass()
{
}
// Pass the requested url to base class function and get the formatted XML.
SeLogerClass.prototype.getItems = function (typeBien, codePostal, typeTransaction, nbPieces){
// Retrieves items from the specified SeLoger feed.

Il faut souligner que le prototype de notre méthode getItems prend en paramètres en entrée le même nombre de paramètres, et dans le même ordre que ceux qui sont définis dans la section « inputs » du fichier de description en XML.

Notre méthode getItems va commencer par formatter l’URL de façon à pouvoir requêter le flux RSS en fonction des paramètres spécifiés par l’utilisateur. Suite à cela, notre méthode va effectuer la requête sur l’URL ainsi construite via la méthode environment.getXML de Popfly. Il s’agit d’un moyen d’effectuer des requêtes cross-domaine vers des sites et services tiers.

La réponse à cette requête est le corps du flux RSS retourné par SeLoger.com. Nous allons passer ce contenu XML à une méthode privée nommée __formatResponseDataSeLogerItem qui aura pour objectif de traiter les Items contenus dans ce document RSS. Par convention, on préfixe dans Popfly par un double caractère de soulignement les méthodes privées qui ne sont pas exposées en tant que service à l’utilisateur. C’est le cas de __formatResponseDataSeLogerItem.

On note aussi la présence d’une méthode toString pour notre type SeLogerItem. C’est cette méthode qui est responsable du formattage de la sortie destinée à un affichage brute des données en sortie au sein de l’interface utilisateur de Popfly, en l’absence d’un bloc de sortie. Voici la sortie produite par notre méthode toString :

NB : On récupère de notre flux RSS des données présentant des problèmes d’encoding des caractères. La plate-forme Popfly étant en phase de Bêta test, ces aspects ne sont pas encore pris en charge et certains dysfonctionnements tels que celui-ci peuvent être observés.

Toujours en observant le code de notre classe SeLogerClass, on remarque que contrairement à notre premier exemple simpliste, ce bloc présente une gestion des erreurs assez poussée et que la plupart des cas d’erreur et des exceptions sont traitées. C’est cet effort de rigueur dans le traitement des erreurs qui permet d’améliorer en toute circonstance l’expérience utilisateur, et rend l’outil globalement plus utilisable et compréhensible par un utilisateur n’ayant pas un profil technique. Dans ce contexte, une gestion des erreurs rigoureuse au sein des blocs Popfly destinés à être partagés n’est pas une option, c’est une exigence.

Dans cette optique, vous noterez aussi que l’instruction console.write(string) permet de produire des messages de trace et de mise au points qui viennent s’afficher dans la « Console » du Mashup Editor pendant la phase de mise au point. Ces sorties vous seront précieuses car elles constituent à peu près le seul outil de Debug proposé par Popfly dans la mise au point du code d’un bloc. Voici un exemple de sortie dans la console par notre bloc SeLogerClass :

Le reste du code de notre bloc Popfly ne pose aucun problème de complexité, et sera facilement compréhensible. Vous pouvez facilement retrouver ce bloc depuis l’outil Popfly même en faisant une recherche sur son nom « SeLoger » ou bien vous pouvez en télécharger le code qui est proposé dans une archive Zip en complément de cet article pour l’étudier en dehors de l’environnement Popfly.

Une fois que vous avez terminé et mis au point votre bloc, vous allez le sauvegarder en cliquant sur les options « Save » ou « Save As » présentes dans le coin supérieur droit de l’interface du Mashup Creator, comme représenté ci après :

NB : En fait, l’outil Popfly étant en phase de Bêta test, sa stabilité n’est pas encore optimale. De ce fait, il est conseillé de sauvegarder votre travail régulièrement au risque de tout perdre et d’avoir à tout recommencer depuis le début.

La boite de dialogue d’enregistrement de votre blog vous demandera quelques informations au-delà du simple nom que vous voulez lui donner. Ces informations seront présentées aux utilisateurs qui trouveront votre bloc comme résultat à une recherche. Voici les informations demandées par la boite de dialogue d’enregistrement du bloc :

Au final, après avoir enregistré votre bloc, vous devrez le partager afin qu’il puisse être utilisé et dupliqué par les autres utilisateurs de Popfly. Pour cela, vous allez dans le menu « My Stuff » puis vous sélectionnez l’option « Projects ». Dans la liste de vos projets, vous repérez l’entrée correspondant au bloc nouvellement créé et vous cliquez sur l’option « Share » pour le partager. A l’issue de cette opération, l’affichage de votre liste de projets devrait ressembler à ceci :

Voilà qui termine la création de notre bloc complexe. Afin de voir ce bloc en action, vous pouvez rechercher le projet d’exemple nommé « SeLogerDemo » qui met en œuvre notre bloc SeLogerBloc en affichant sur une carte Virtual Earth une liste de biens retrouvés par notre bloc de services.

Conclusion

Nous avons passé en revue l’ensemble des étapes à suivre pour créer un bloc de service dans Popfly aujourd’hui. Il est à noter que pour le moment, il n’est pas possible de créer des blocs d’affichage spécifiques. Cette fonctionnalité devrait être proposée dans une version future, mais n’est pas possible pour le moment.

Pour aller plus loin, vous voudrez sans doute consulter la liste des ressources que nous vous proposons ci-dessous.

Amusez-vous bien avec Microsoft Popfly, partagez et publiez vos créations !

Ressources

Le blog de l’équipe Popfly (en Anglais)

http://popflyteam.spaces.live.com/

Les forums Popfly sur MSDN (en Anglais)

http://forums.microsoft.com/MSDN/default.aspx?ForumGroupID=434&SiteID=1