2.3.1. Annotator
¶ 1 Commenter le paragraphe 1 0 J’ai décidé de tester Annotator en premier, sa structure très modulaire me permettant de procéder par étapes de plus en plus complexes, en partant d’actions que je connaissais (implémentation d’une librairie javascript dans une page web) jusqu’au déploiement du serveur. CommentPress n’est pas du tout adapté au code. Je vous prie de m’excuser pour la mise en page déplorable de ce chapitre : ce sera mieux dans le mémoire final.
2.3.1.1. Installer Annotator comme client
¶ 2 Commenter le paragraphe 2 1 J’ai donc commencé par installer Annotator comme client sur une page web test, en utilisant le web service AnnotateIt comme magasin d’annotation (espace de stockage). Il s’agit d’une action simple : il suffit de placer la librairie JavaScript d’annotator sur le serveur puis de l’appeler dans la page web. Pour fonctionner le client Annotator nécessite aussi la librairie JQuery (version min. 1.6.).
¶ 3 Commenter le paragraphe 3 0 Il faut d’abord lier la CSS propre à Annotator et appeler les librairies Annotator et JQuerry dans la page HTML. Pour cela, il suffit d’ajouter les fichiers correspondants dans le répertoire www du serveur, puis de lier la CSS <annotator.min.css> dans le header, comme il suit.
<head> <meta charset="utf-8" /> <title>Page d'essai d'annotation</title> <!--- Ici, je lie la CSS de la librairie annotator --> <link href="javascript/annotator.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="essai.css" /> <link rel="canonical" href="http://annotatorjs.org"> </head>
Il faut ensuite, à la fin de <body> appeler les librairies annotator et JQuery :
<!-- Appel de la librairie jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Ajout de la libraire showdown pour supporter le markdown --> <script src="javascript/showdown.js"></script> <!-- Appel de la librairie annotator que j'ai installé sur mon serveur --> <script src="javascript/annotator-full.min.js"></script>
A ce stade, nous n’avons fait qu’appeler les librairies : elles ne sont pas opérationnelles. Il est nécessaire d’écrire un script très simple, grâce auquel Annotator peut s’appliquer aux contenus inclus entre les balises <div id = « content » >. Il est donc nécessaire d’identifier les ressources annotables en les plaçant entre de telles balises.
<!-- script qui fait fonctionner l'annotateur dans les div balisées content -->
<script>
jQuery(function ($) {
$('#content').annotator()
.annotator('setupPlugins');
});
</script>
Cette version test du client est disponible en ligne sur mon serveur alwaysdata : http://pecccadille.alwaysdata.net/BriceSaintGervais.html. Il est nécessaire de créer un compte AnnotateIt pour le tester (gratuit).
¶ 7
Commenter le paragraphe 7 0
¶ 8
Commenter le paragraphe 8 0
2.3.1.2. Installation du magasin de stockage des annotations (Annotator Store)
¶ 9 Commenter le paragraphe 9 0 L’installation du magasin de stockage des annotations est en revanche plus complexe. Elle nécessite plusieurs prérequis :
- Python ( >= 2.6 ou >=3.3) Dans notre cas, nous disposions de Python 2.7
- ElasticSearch (>= 1.0.0.)
- Virtualenv
- Java 7 (prérequis d’ElasticSearch)
¶ 11 Commenter le paragraphe 11 0 Toute l’installation ci-dessous décrite a été réalisée sous Debian, en ligne de commande, dans le terminal.
- Installer Java 7
¶ 13 Commenter le paragraphe 13 0 Le système Debian installé sur l’ordinateur de la fac disposait de Java 1.6. J’ai donc installé OpenJDK 1.7.0_55 via la ligne de commande (recherche du paquet et installation :
sudo get-cache search openjdk apt-get install openjdk-7-jdk
Une fois l’opération d’installation effectuée, il faut changer la version java utilisée par le système grâce à la commande update-alternatives—config java. Le terminal renvoie la liste des installations java qu’il possède : l’utilisateur doit sélectionner celle que le système doit utiliser en priorité.
¶ 15 Commenter le paragraphe 15 0 Il faut ensuite inscrire la version de java dans la variable JAVA_HOME. COMPLETER.
- Installer ElasticSearch
¶ 17 Commenter le paragraphe 17 0 ElasticSearch est un moteur de recherche open source, basé sur la librairie Apache Lucene, utilisant une base de donnée NoSQL et l’architecture REST. Il permet de rechercher et de naviguer parmi les annotations enregistrées dans le serveur.
¶ 18 Commenter le paragraphe 18 0 Il faut d’abord télécharger la dernière version d’ElasticSearch et l’installer.
wget -qO - http://packages.elasticsearch.org/GPG-KEY-elasticsearch | sudo apt-key add – deb http://packages.elasticsearch.org/elasticsearch/1.3/debian stable main apt-get update && apt-get install elasticsearch
Pour mettre en route ElasticSearch, la commande à écrire dans le terminal est la suivante :
sudo service elasticsearch start
- Installer Virtualenv
¶ 21 Commenter le paragraphe 21 0 Le store d’annotator doit être installé dans Virtualenv, qui est un outil pour créer des environnements Python isolés[1]. L’installation peut être faite au moyen de pip (outil d’installation des librairies python) :
pip virtualenv
- Télécharger Annotator Store
¶ 23 Commenter le paragraphe 23 0 Une fois virtualenv installée, il faut télécharger Annotator depuis la source Github et le placer dans le ficher voulu.
- Installer Annotator Store
¶ 25 Commenter le paragraphe 25 0 Dans le terminal, il faut se placer dans le dossier où a été chargée la source d’Annotator. Pour procéder à l’installation, il faut inscrire les commandes suivantes :
virtualenv pyenv source pyenv/bin/activate pip install -e . cp annotator.cfg.example annotator.cfg python run.py
A ce stade, Annotator est installé. Il faut maintenant procéder aux tests grace à Nose Mock. A installer (en virtualenv) avec la commande suivante :
pip install nose mock
(et nonpip install nosetests mock comme indiqué dans le tutoriel d’Annotator). Auparavant, il faut s’assurer que Elasticsearch est présent et démarré.
- Configurer l’API
¶ 29 Commenter le paragraphe 29 0 Le magasin d’annotation communique avec le client via une API REST et doit être monté par défaut sur /api . Dans notre installation (en local), l’adresse était cependant la suivante : http://127.0.0.1:5000/annotations (et non http://127.0.0.1/api/annotations). En écrivant cette requête, le serveur renvoie normalement un tableau vide [].
- Test d’ajout d’annotation
¶ 31 Commenter le paragraphe 31 0 A partir des exemples présents dans la documentation, il est possible de tester l’installation via des requêtes curl et en respectant l’architecture REST, comme dans l’exemple ci-dessous (création d’une annotation) :
curl -i -X POST -H 'Content-Type: application/json' -d '{"text": "Annotation text"}' http://127.0.0.1:5000/annotations
2.3.1.3. Lier le client au serveur d’annotation
Pour lier le client au serveur d’annotation, il faut modifier le script présent dans la page HTML en indiquant dans les variables l’adresse sur serveur d’annotation. Il convient aussi d’attacher l’URL de la page à annoter afin que les métadonnées des annotations soient correctement inscrites. (INFORMATION A VERIFIER)
<script>
jQuery(function ($) {
var content = $('#content').annotator(); content.annotator('addPlugin', 'Store', {
// Inscrire ici le point d’entrée du serveur d’annotation.
prefix: 'http://127.0.0.1:5000',
// Attach the uri of the current page to all annotations to allow search.
annotationData: {
'uri': 'http://this/document/only'
},
// This will perform a "search" action when the plugin loads. Will
// request the last 20 annotations for the current url.
// eg. /store/endpoint/search?limit=20&uri=http://this/document/only
loadFromSearch: {
'limit': 20,
'uri': 'http://this/document/only'
}
});
});
</script>
¶ 33 Commenter le paragraphe 33 0 A ce stade, l’installation est opérationnelle.
Jean-Michel Girardot
faute de frappe :« la librairie JavaScript d’Annotator » (majuscule)