Pimp my gif : création d’un widget avec dashing

Je vous ai brossé dans l’article précédent tout l’intérêt d’un dashboard sur mesure avec Dashing. Aujourd’hui je vous propose de voir comment celui-ci fonctionne à travers la création concrète d’un widget. 

Pour cet exemple je vous propose de créer avec vous un widget permettant d’afficher sur notre dashboard dashing un gif animé, qui sera récupéré en fonction d’un ensemble de mots clés.  Pour cela nous allons utiliser Giphy et son API.

Avant de commencer je vais vous expliquer les concepts clé dans Dashing :

  • nous allons commencé par créer un dashboard, celui-ci déclarera l’ensemble des widgets que nous allons avoir et leur définira un id
  • pour la partie widget nous pouvons soit utiliser les widgets existants soit créer un widget custom.
  • enfin pour envoyer la donnée nous pouvons soit l’envoyer directement via un appel POST en HTTP, soit créer un job en ruby dans dashing.

dashing-architecture

Création du dashboard

Pour commencer vous aurez installé Ruby & Dashing (qui vous demandera certainement également l’installation de NodeJS). 

Puis pour initier notre projet nous allons utiliser la commande : 

dashing new mysuperdashboard

Allez dans mysuperdashboard et tapez :

dashing generate dashboard foodash

Dashing nous a créé un fichier foodash.erb dans le répertoire dashboard qui a cette tête :



<div class="gridster">


<ul>


<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">


<div data-id="my_widget" data-view="Text"></div>


</li>


</ul>


</div>


Ce dashboard contient par défaut un widget de type « Text » (que vous trouverez dans le répertoire widgets/text).

Vous pouvez dès maintenant voir le résultat en tapant dashing start puis en vous rendant à l’adresse http://localhost:3030

Mais comme vous pouvez le voir c’est un peu léger encore…

Modifions ce dashboard :



<div class="gridster">


<ul>


<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">


<div data-id="giphy_widget" data-view="Giphy"></div>


</li>


</ul>


</div>


Le widget de type Giphy n’existe pas encore, nous allons le créer, pour lui envoyer des données nous utiliserons l’id « giphy_widget ».

Création de notre widget

Allons y pour créer notre widget giphy !

dashing generate widget giphy

Dashing crée 3 fichiers pour nous :

  • widgets/giphy/giphy.coffee

class Dashing.Giphy extends Dashing.Widget

ready: ->

# This is fired when the widget is done being rendered

onData: (data) ->

# Handle incoming data

# You can access the html node of this widget with `@node`

# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

  • widgets/giphy/giphy.scss

.widget-giphy {

}

  • widgets/giphy/giphy.html


<div data-bind="value"></div>


Remplaçons le code html pour mettre à la place :



<h1 class="title" data-bind="title"></h1>


<img data-bind-src="giphyurl"></img>

Soit un titre et une image. Dashing utilise batman.js pour effectuer le binding des objets (ici le title qui sera injecté entre les balises h1 et l’url de l’image).

Notre widget est terminé! C’était difficile :p

Envoie des données

Nous attaquons la partie un peu plus complexe, la création de notre job qui va alimenter en donnée notre widget.

Avant de commencer nous allons déclarer dans le fichier Gemfile les dépendances dont nous allons avoir besoin. Rajoutez donc dans votre fichier :

gem 'httparty'
gem ‘json'

Puis exécutez la commande ruby :

bundle install

Puis créons notre job :

dashing generate job giphy

Qui va nous créer un fichier ruby giphy.rb dans le répertoire jobs :


# :first_in sets how long it takes before the job is first run. In this case, it is run immediately

SCHEDULER.every '1m', :first_in => 0 do |job|

send_event('widget_id', { })

end

Que l’on va remplacer par notre job :


require 'httparty'

require 'json'

SCHEDULER.every '1m', :first_in => 0 do |job|

words = ["agile", "scrum", "devops", "happy", "fun"]

word = getRandomItem(words)

url = "http://api.giphy.com/v1/gifs/search?q="+ word +"&api_key=dc6zaTOxFJmzC&limit=100"

send_event('giphy_widget', {title: "#"+word, giphyurl: getAnimatedGifUrl(url)})

end

def getAnimatedGifUrl(apiUrl)

res = HTTParty.get(apiUrl)

list = res["data"]

return getRandomItem(list)["images"]["original"]["url"]

end

def getRandomItem(array)

array[rand(array.length)]

end

C’est la partie la plus complexe (mais le code ruby se lit très bien n’est-ce pas?). Nous appelons l’api giphy grâce à la librairie httparty. Dans le retour nous prenons un élément random dont nous extrayons l’url. Puis nous le passons au widget grâce à la fonction send_event. Cette fonction va envoyer sur le widget grâce à l’id du widget (giphy_widget) et les données seront bindées par leurs noms (« title » & « giphyurl »).

Et voilà le résultat de notre widget :

devops-giphy

Notre widget va recevoir une nouvelle image toutes les minutes. C’est assez cool et c’était très simple à faire.

Envoyer des données par API

Petit bonus, on peut également directement envoyer les données à notre widget via une simple requête REST de type POST :

http://localhost:3030/widgets/giphy_widget

Avec comme body :

{ "title": "#Tribu", "giphyurl": "http://www.agiletribu.com/img/at/agile_tribu_logo.png", "auth_token": "YOUR_AUTH_TOKEN » }

Le auth_token est celui par défaut et peut-être modifié dans le fichier config.ru

En conclusion

Vous l’aurez donc vu écrire un widget pour dashing et un job pour l’alimenter est vraiment très simple. Cela ne nous a pas pris plus d’une dizaine de lignes de code assez simple. La principale problématique pour vous lorsque vous créerez vos widgets dashing sera l’accès et l’ouverture de vos données.

Dans le prochain article je vous montrerai comment comment créer un widget pour JIRA en réutilisant le widget existant gauge et en lui ajoutant de la couleur en fonction des résultats de l’équipe.

Une réflexion sur “Pimp my gif : création d’un widget avec dashing

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s