Il ne s'agit pas de deleguer votre créativité à l'ia, mais plutôt de l'utiliser comme votre assistant.
Évidemment, parfois vous aurez tendance à la laisser divaguer pour franchir des obstacles qui vous seraient insurmontables ouvrir des voies auxquelles vous n'auriez pas pensé, ou meme peaufiner un détail qui vous ferait perdre trop de temps...
Mais attention à ce que vous avez entre les mains.
Les IA sont devenues très impressionnantes. Utiliser une IA, c'est un peu comme si aviez dans la poche un "Arnold Schwarzenegger' de 4 ans (c'est l'acteur de Terminator).
Évidemment, si vous ne gardez pas un oeil attentif sur lui, vous vous exposer potentiellement à des graves ennuis.
Voyez ça comme un expert, très puissant, mais qui peut dans la seconde vriller à la psychopathie schzophrenique si vous n'y prenez pas garde.
Si vous n'avez pas l'intention de prendre votre Arnold par la main et de lui apprendre à se tenir bien, à l'éduquer, à le choyer, à l'éduquer... passez votre chemin, ce n'est pas pour vous...
Travailler avec une IA, c'est un métier, c'est comme "etre parent", sauf que là aussi, les enfants sont tous différents, il n'y a pas de notice, et ce qui fonctionne avec l'un ne fonctionnera pas forcément avec l'autre. Ce qui a fonctionné à un moment peut ne plus fonctionner demain...
Évidemment, la création assistée par IA ne s'adresse pas aux artistes déjà confirmés et établis qui ne verront dans ces outils que perte de temps et de créativité,
Par contre s'ils sont ouverts à l'innovation, à l'usage de nouveaux outils, de techniques inconnues, aux melanges des styles et des influences, ou même simplement curieux, il peuvent imaginer l'assistant IA comme un miroir de leur art qui va les pousser dans leurs retranchements les plus enfouis, leur permettre d'explorer des horizons insoupçonnés, ou experimenter des combinaisons de techniques qu'ils pourraient considérer en temps normal comme incroyables...
Mais gardons pour l'instant les pieds sur et Terre 🌎 et explorons.
Commençons concrètement... ou plutôt, non!
Commençons par nous imaginer en août 1492, tel un apprenti explorateur assis dans le port de "Palos de la Frontera" et regardant la mer. Prêt à embarquer sur une caravelle aux côtés de Christophe Colomb. Quelque soit le métier que vous choisissez, menuisier, cuissot, timonier, médecin, botaniste, peintre,... préparer vos plus beaux outils.
Vous ne savez ni "quand", ni "si" vous reviendrez un jour sur la terre ferme. La seule chose que vous puissiez imaginer, c'est que s'offre à vous une infinité de possibles, guidée par les choix que vous ferez et les instructions que vous transmettrez.
Et n'oubliez pas que vos premiers voyages ne seront pas forcément de grands voyages du premier coup.
Vous devrez certainement essuyer des tempêtes, faire table rase, recommencer, apprendre à avancer étape par étape pour vos créer méthodes et expérience...
Car c'est bien beau d'avoir une barrière LEGO qui se lève à l'approche d'un véhicule, seulement le problème, c'est une fois que l'on est passé, comment on fait pour revenir, car il n'y a pas de capteur de l'autre côté de la barrière...
La solution est d'utiliser une télécommande, sur laquelle nous utiliserons deux boutons... un pour lever la barrière et l'autre pour la baisser !
<video>
Prenez maintenant la télécommande et son capteur fournis dans le kit (voir l'article La Barrière LEGO pour vous procurer le kit )
Sur la plaque du capteur infrarouge, repérez les broches S et -
PIN
Description
Couleur du câble
Connexion vers la carte ARDUINO
S
Sortie des données
marron
D11
3.3 - 5V
rouge
VCC / 5V
-
0V
noir
GND
--> Utilisez les câbles fournis avec la télécommande et reliez
la pin S du capteur à la pin D11 de la carte Arduino
la pin du milieu du capteur à la pin 5V / VCC de la carte Arduino
la pin - du capteur
<troisphotos branchements>
Installez la librairie IRremote et ouvrez l'exemple IRrecvDemo
<trois photos install>
Nous n'allons pas nous servir du code hexadécimal de la touche, mais son code décimal. Pour ce faire, ajoutez la ligne
Serial.println(results.value);
comme indiqué dans le code ci-dessous :
#include <IRremote.h>
int RECV_PIN = 11;
IRrecv irrecv(RECV_PIN);
decode_results results;
void setup()
{
Serial.begin(9600);
// In case the interrupt driver crashes on setup, give a clue
// to the user what's going on.
Serial.println("Enabling IRin");
irrecv.enableIRIn(); // Start the receiver
Serial.println("Enabled IRin");
}
void loop() {
if (irrecv.decode(&results)) {
Serial.println(results.value, HEX);
Serial.println(results.value);
irrecv.resume(); // Receive the next value
}
delay(100);
}
Enregistrez ce code sous le nom de "Test_Telecommande" et téléverser-le sur la carte.
Ouvrez le moniteur série (dans le menu Outils) et appuyez alternativement sur les touches "Fleche Haut" et "Fleche Bas" de la télécommande.
Attention, si vous appuyez trop longtemps sur une touche, il peut arriver que les codes parasites "FFFFFFFF" et "4294967295", mais nous allons les gérer
<photo codes>
A chaque appui de touche, vous devriez voir apparaître un code correspondant à la touche appuyée . Moi j'ai pour :
Flèche HAUT
Flèche BAS
code hexadécimal
FF18E7
FF4AB5
code décimal
16718055
16730805
Notez les codes que vous affiche le moniteur, ils peuvent être différents des miens !
Modifiez maintenant le code de la manière suivante pour détecter l'appui sur les deux flèches "HAUT" et "BAS".
#include <IRremote.h> int RECV_PIN = 11; IRrecv irrecv(RECV_PIN); decode_results results; void setup() { Serial.begin(9600); // In case the interrupt driver crashes on setup, give a clue // to the user what's going on. Serial.println("Enabling IRin"); irrecv.enableIRIn(); // Start the receiver Serial.println("Enabled IRin"); } void loop() { if (irrecv.decode(&results)) { // Serial.println(results.value, HEX); // Serial.println(results.value); if (results.value == 16718055) { Serial.println("HAUT"); } else if (results.value == 16730805) { Serial.println("BAS"); } else { Serial.println(results.value); } irrecv.resume(); // Receive the next value } delay(100); }
Enregistrez votre programme (que l'on appelle également Sketch chez Arduino), et téléversez-le sur la carte. Ouvrez-le moniteur série et appuyez successivement sur les touches "HAUT" et "BAS". Ces deux mots devraient maintenant s'afficher dans le moniteur :
<photo moniteur haut bas>
On va maintenant utiliser deux fonctions leve_barriere() et baisse_barriere() dans lesquelles ont ajoutera le code contrôlant le servomoteur...
Modifiez maintenant le code comme suit :
00);
#include <IRremote.h>
int RECV_PIN = 11;
IRrecv irrecv(RECV_PIN);
decode_results results;
void setup()
{
Serial.begin(9600);
// In case the interrupt driver crashes on setup, give a clue
// to the user what's going on.
Serial.println("Enabling IRin");
irrecv.enableIRIn(); // Start the receiver
Serial.println("Enabled IRin");
}
void loop() {
if (irrecv.decode(&results)) {
// Serial.println(results.value, HEX);
// Serial.println(results.value);
if (results.value == 16718055) {
leve_barriere();
} else if (results.value == 16730805) {
baisse_barriere();
} else {
Serial.println(results.value);
}
irrecv.resume(); // Receive the next value
}
delay(100);
}
void leve_barriere(){
Serial.println("HAUT dans la fonction");
}
void baisse_barriere(){
Serial.println("BAS dans la fonction");
}
<photo leve barriere fonction>
Bien bien bien, pas mal jusque là... Il ne nous reste plus qu'à brancher le servomoteur comme dans l'article précédent sur la PIN D9 et à ajouter le code qui gère ce moteur :
Comme on n'a pas utilisé les lignes "bleus et rouges" pour le 5V et le GRND, on va juxtaposer les câbles d'alimentation du moteur à ceux du capteur infra rouge .
<photos branchement moteur>
Un petit peu de copier/coller depuis le code produit dans l'article précédent, et votre code pourrait ressembler à ceci :
#include <IRremote.h>
#include <Servo.h>
int RECV_PIN = 11;
IRrecv irrecv(RECV_PIN);
decode_results results;
/* Creation d'un objet Servo pour contrôler le servomoteur */
Servo mon_servo;
void setup()
{
Serial.begin(9600);
// In case the interrupt driver crashes on setup, give a clue
// to the user what's going on.
Serial.println("Enabling IRin");
irrecv.enableIRIn(); // Start the receiver
Serial.println("Enabled IRin");
mon_servo.attach(9);
mon_servo.write(180);
}
void loop() {
if (irrecv.decode(&results)) {
// Serial.println(results.value, HEX);
// Serial.println(results.value);
if (results.value == 16718055) {
leve_barriere();
} else if (results.value == 16730805) {
baisse_barriere();
} else {
Serial.println(results.value);
}
irrecv.resume(); // Receive the next value
}
delay(100);
}
void leve_barriere() {
Serial.println("HAUT dans la fonction");
mon_servo.write(90);
}
void baisse_barriere() {
Serial.println("BAS dans la fonction");
mon_servo.write(180);
}
ET voilà, notre Barrière LEGO télécommandée !!!!!
<video >
Ajouter des leds pour indiquer si l'on peut avancer ou pas ???
Inspirez-vous de ce code : un mix des exemples Blink et Fade présents dans Fichier / Exmples / 01.Basic ou sur le site Arduino --> vous aurez aussi des indications sur la manière de brancher vos leds si vous avez des doutes
Connectez vos led sur les pin 5 et 7 de l'Arduino Sans oublier de les protéger par des resistances de 220 ohms !
int led_rouge = 5;
int led_verte = 7;
void setup() {
// initialize digital pin as an output.
pinMode(led_rouge, OUTPUT);
pinMode(led_vertee, OUTPUT);
}
// the loop function runs over and over again forever
Objets connectés, iot, Arduino, par où commencer ?
"La barrière LEGO, un bon projet pour débuter avec Arduino".
" ça serait bien, une barrière pour ma maison LEGO !
- Une barrière pour ta maison de LEGO, ok, qu'est-ce qu'il nous faut ? Un moteur pour actionner la barrière, et un moyen de la déclencher. Pour le moteur, on va utiliser un SG90, fourni avec la plupart des kits Arduino, et pour activer ce moteur ?? J'ai une Funduino Mega2560 qui traîne, on va voir ce qu'on peut faire avec, mais note que n'importe quelle carte Arduino, ou compatible doit faire l'affaire..."
ES-TU PRÊT A RELEVER LE DEFI DE CREER UNE BARRIERE LEGO EN SEULEMENT 20 LIGNES DE CODE ???
quelques leds de couleur et les resistances qui les protègent
des câbles pour effectuer les connexions...
C'est tout ce qu'il faut pour construire les deux versions de la "Barrière LEGO Arduino"
! le kit "Barrière LEGO Arduino" ne comprend pas les pièces LEGO pour fixer le servomoteur (voir au bas de cette page pour plus de précisions)
La barrière LEGO peut être déclinée sous plusieurs versions, et celles-ci peuvent être combinées :
- 1 la barrière LEGO à partir d'un capteur ultrason.
- 2 la barrière LEGO utilisant la télécommande infrarouge
... a vous de voir ensuite comment vous pouvez améliorer votre barrière LEGO... 😉
1 breadboard (ou planche à pain en français ), c'est la plaque où l'on va positionner nos composants et qui nous permettra d'établir les connexions entre ceux-ci.
A l'interieur de la breadbord, des connexions sont déjà établies (traits noirs sur la photo ci-dessous), par exemple, vous pour connecter une broche qui serait connectée en 'A1', vous pouvez utilisez tous les trous de 'B1' à 'E1'. Les trous 'F1' à 'J1' sont également connectés entre eux.
une carte Arduino Uno ou
une carte Arduino Nano avec son cable USB,
ou compatible
un capteur ultrasons HC-SR04 pour capter le passage d'un véhicule
Un servomoteur SG90 pour actionner la barrière
Une dizaine de câbles pour relier tout ça
Une barre LEGO Technic qui servira de barrière
+ Quelques briques LEGO pour fixer le servomoteur
Repérez les deux lignes à l'extérieur de la breadboard: une rouge et une bleue. Ne les utilisez pas pour l'instant, elles serviront à transmettre le courant pour alimenter les composants.
Effectuer les branchements
1. Commencez par positionner et enficher la carte Arduino et le capteur ultrasons HC-SR04 sur la breadboard :
- la carte Arduino au centre de la breadbord et le capteur sur le bord.
2. Pour alimenter le capteur ultrason HC-SR04, nous allons créer un circuit :
- repérez sur la carte Arduino la broche notée '5V' (c'est le + ) et branchez un fil pour la relier jusqu'à la ligne rouge.
- repérez sur le capteur HC-SR04 la broche notée 'VCC' et reliez la également à la ligne rouge
Dans un deuxième temps :
- repérez sur la carte Arduino une des broches notée 'GND' (c'est le -) et branchez un fil pour la relier jusqu'à la ligne bleue.
- repérez sur le capteur la broche notée 'GND' et reliez-la avec la ligne bleue.
Vous devriez maintenant avoir une carte Arduino, un capteur ultrason HC-SR04 et 4 fils comme sur la photo suivante :
Le capteur HC-SR04 est un capteur ultrason et fonctionne suivant le principe du sonar de la chauve-souris : un ultrason est émis, puis l’écho est réceptionné, la délai entre l’émission et la réception permet de calculer la distance de l'obstacle.
Sur le capteur il reste deux broches : 'Trig' et 'Echo' . Avec deux autres fils, reliez 'Trig' à la broche 'D3' de la carte Arduino et 'Echo' à la broche 'D4' . 'Trig' enverra un ultrason et 'Echo' réceptionnera l'écho...
Passons maintenant à la programmation de la carte Arduino :
Une petite video pour l'installation du logiciel,
Pensez bien à vérifier la configuration de la carte dans le menu 'Outils/ type de carte' et 'Outils/port' (choix de la carte et de son port). Pour plus de précisions ces sujets ont étés maintes fois traités comme ici.
Voici le code de test du capteur HCSR-04 présenté dans la vidéo : #include <HCSR04.h> UltraSonicDistanceSensor distanceSensor(3,4); // Initialize sensor that uses digital pins 13 and 12. void setup () { Serial.begin(9600); // We initialize serial connection so that we could print values from sensor. } void loop () { // Every 500 miliseconds, do a measurement using the sensor and print the distance in centimeters. Serial.println(distanceSensor.measureDistanceCm()); delay(500); }
En allant ensuite consulter le traceur série, vous devriez voir une courbe apparaître :
Maintenant que le capteur est opérationnel, on va pouvoir brancher le servomoteur :
sur un servomoteur, nous avons 3 fils :
- le + (rouge)
- le - (noir ou marron)
- la mesure (jaune ou blanc)
Utilisez trois nouveaux fils pour prolonger ceux issus du moteurs
et connectez ceux-ci de la manière suivante :
le + vers la ligne rouge de la breadboard,
le - vers la ligne bleue de la breadboard
le 3ème vers la broche 'D9' de la carte Arduino
Reprenons maintenant notre code et modifions le pour prend en compte le moteur. On peut s'inspiré de l'exemple 'Knob' comme évoqué dans la vidéo d'installation du logiciel Arduino :
Attention les deux vidéos suivantes se superposent pour montrer à la fois la partie code et la partie exécution du code :
Confection du code :
Voici le code qui permet de faire fonctionner notre barrière LEGO avec déclenchement par capteur Ultrason :
////////////////////////////////////////////////////////////////////////////////////////
// Le code suivant correspond au tutoriel présenté à cette adresse : //
// http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html //
// L'objectif est de créér une barrière qui se lève lorsqu'un véhicule passe devant //
// le capteur ultrason //
// Pensez à bien vérifier le type de carte et le port COM dans le menu 'Outils' //
////////////////////////////////////////////////////////////////////////////////////////
/* Import de la librairie pour le capteur ultrason HCSR04
et pour le servomoteur */
#include <HCSR04.h>
#include <Servo.h>
/* On créé un objet capteur ultrason (UltraSonicDistanceSensor)
que l'on initialise sur les pins D3 pour TRIG et D4 pour ECHO*/
UltraSonicDistanceSensor capteur_distance(3, 4);
/* Creation d'un objet Servo pour contrôler le servomoteur */
Servo mon_servo;
/* la fonction setup() permet de mettre en place l'environnement */
void setup () {
/* - On initialise une connection série pour pouvoir afficher les
valeurs dans le moniteur ou le traceur (menu Outils).
- On indique que notre servomoteur est relié à la Pin 9
- On positionne notre servomoteur à l'horizontale (180°) */
Serial.begin(9600);
mon_servo.attach(9);
mon_servo.write(180);
}
/* la fonction loop() boucle à l'infini,
lit la valeur du capteur et actionne le moteur */
void loop () {
/* on lit la distance en cm mesurée par le capteur grâce
à la fonction measureDistanceCm de l'objet capteur_distance précédemment créé */
int distance = capteur_distance.measureDistanceCm();
/* on teste si la valeur est comprise entre 1 cm et 15 cm */
if ( distance > 1 && distance < 15 ) {
/* Si elle est comprise entre 1 cm et 15 cm
on l'envoi à la connexion série pour l'afficher dans le moniteur ou le traceur */
Serial.println(distance);
/* On demande envoi un angle de 90° au servo moteur ce qui doit lever la barrière */
mon_servo.write(90);
/* et on attend 3000 millisecondes = 3 secondes avant de continuer */
delay(3000);
} else {
/* Sinon, la distance n'est pas comprise entre 1cm et 15 cm,
on baisse la barrière en positionnant le servomoteur à 180° */
mon_servo.write(180);
}
/* On attend 500 millisecondes avant d'effectuer une nouvelle boucle (loop)
et de lire la valeur suivante */
delay(500);
}
Exécution du code :
Qu'est-ce qu'il vous reste à faire ?
Trouver le moyen de fixer le servo-moteur à l'aide de briques et de plaques LEGO, ci dessous un exemple de ce que l'on peut faire :
Difficulté du tuto ? ça devrait être accessible à toute personne qui a un peu approché le javascript...
Dans ce petit tutoriel, on va voir comment utiliser Polymer ( plus d'infos ) pour effectuer des requêtes vers un endpoint sparql et afficher les résultats, on va ici utiliser :
Nous utilisons ici Polymer 2 car à l'heure où l'on écrit ces lignes, Polymer 3 n'est pas encore stabilisé.
Créez un dossier pour votre appli et un dossier 'public' à l'intérieur de celui-ci et installez l'appli exemple de Polymer:
mkdir tutosparql && cd tutosparql
mkdir public && cd public
polymer init
choisissez '6) polymer-2-starter-kit'
lancez polymer serve
Votre appli 'starter-kit' devrait normalement être accessible à l'adresse http://127.0.0.1:8081
Utilisez maintenant votre éditeur préféré pour changer le code de cette appli
Le fichier principal de notre application se trouve dans 'public/src' et se nomme 'my-app.html'
Dans le code du fichier 'my-app.html', on constate l'import des modules 'my-view1', 'my-view2' et 'my-view3', on va utiliser et modifier 'my-view1' qui se trouve être la page d'accueil de notre appli.
Commençons par créer un nouvel élément que nous allons ensuite inclure dans la page 'my-view1'.
Arrétez le server (Ctrl+C) ou ouvrez un nouvel invite de commande/ terminal, placez vous dans le dossier 'public/src', créez un dossier pour votre nouvel élément, lancez à nouveau 'polymer init' et choisissez 'polymer-2-element'
Ceci vous créé un élément nommé 'spoggy-sparql' dans 'public/src'.
Commencez par modifier la première ligne du fichier 'public/src/spoggy-sparql/spoggy-sparql.html' (on utilise un dossier public, qui n'est pas réellement la norme, donc il faut ajouter '../' pour remonter d'un niveau de plus et aller chercher 'polymer' dans le dossier 'bower_components' ;-) ) :
et ensuite le positionner entre les balises <template> .... </template>
Ce qui nous donne en consultant la page http://127.0.0.1:8081 (si vous avez arrêté le serveur avec Ctrl+C, relancez-le avec 'polymer serve'
Jusque là, tout va bien, attention, ça se corse...
ETAPE 2 : CREATION DE L'ELEMENT SPOGGY-SPARQL QUI VA EFFECTUER LES REQUETES VERS LE ENDPOINT
Bon passons aux choses sérieuses. Maintenant que notre structure d'appli est prête, on va pouvoir utiliser tout le potentiel de Polymer, et notamment la réutilisation des web-components ou elements...
On va par exemple avoir besoin du composant <iron-ajax> qui nous permettra d'effectuer les requêtes ajax asynchrones...
Sans plus tarder, entrons dans le vif du sujet :
Placez-vous dans le dossier 'public' et installez le composant 'iron-ajax' : ( si vous n'avez pas encore installé bower, installez-le maintenant en global avec la commande 'npm install -g bower' )
Vous pouvez retrouver les composants installés dans le dossier 'public/bower_components'
Maintenant que le composant iron-ajax est installé, on va pouvoir l'inclure dans notre composant 'spoggy-sparql'... C'est bon ? vous suivez toujours ???
De la même façon que tout à l'heure, il faut importer le composant avec la ligne :
et le placer entre les balises <templates></templates>
Ici, rien n’apparaît car le composant <iron-ajax> ne sert qu'à faire des requêtes, il n'a pas de 'visuel', mais on s'occupera de ça plus tard.
Tout va bien ?
On attaque maintenant la requête
ETAPE 3 : LA REQUETE VERS L'ENDPOINT SPARQL.
Donc, ce qui nous intéresse, Thérèse, c'est d'aller chercher des data à l'adresse http://data.persee.fr/sparql . Ne soyons pas plus royalistes que ceux qui le sont déjà, sur cette page, il y a déjà un exemple de reqûete que voici :
select distinct ?p where {?p a foaf:Person} LIMIT 100
On va pas aller chercher plus loin pour l'instant...
Mais il va falloir paramétrer notre élement <iron-ajax>.
le composant iron-ajax a en effet besoin de quelques paramètres :
id : un identifiant, ça ne fait pas de mal, et on en aura besoin plus tard pour lancer la requête
url : une url, pour savoir à quelle adresse effectuer la requête
param : des options qui vont contenir le corps de la requête
handle-as : on défini le format dans lequel on souhaite recevoir le résultat de la requête
on-response : la fonction à exécuter lorsque un résultat est disponible (Attention au 's' dans _handleResponse, avec un 's' comme en anglais, je me suis fait avoir plus d'une fois...
on-error : la fonction à exécuter en cas d'erreur de la requête (ça peut être utile)
On peut donc remplacer <iron-ajax></iron-ajax> par :
<iron-ajax
id="sparqlRequest"
url="{{url}}"
params="{{options}}"
handle-as="application/sparql-results+json"
on-response="_handleResponse"
on-error="_handleError"></iron-ajax>
En fait, ici, nous n'avons pas défini 'url' et 'params', mais nous avons mis en face des variables Polymer ( reconnaissables avec les doubles accolades {{...}}), cela nous permet de les modifier plus facilement, donc allons y, c'est un peu plus bas, toujours dans le fichier spoggy-sparql.html, dans la fonction 'properties (){...}'
Et on va remplir les variables pour accéder à l'endpoint de Persée :
url avec 'http://data.persee.fr/sparql'
et options avec la requête : 'select distinct ?p where {?p a foaf:Person} LIMIT 100 '
... voici ce qu'il faut ajouter :
url: {
type: String,
value: 'http://data.persee.fr/sparql'
},
options: {
type: Object,
value: {
query: 'select distinct ?p where {?p a foaf:Person} LIMIT 100',
format: 'application/sparql-results+json',
}
}
ETAPE 4 : LANCER LA REQUETE ET RECUPERER LES RESULTATS.
Commençons par créer un bouton pour lancer la requête :
Comme d'habitude, on va inclure un element <paper-button> et lui mettre une fonction quand on clique dessus :
installer le composant paper-button :
dans 'public' executez la commande : bower install paper-button
Puis importez-le dans notre module spoggy-sparql...
placement entre les balises <template>...</templates> avec le code :
<paper-button on-tap="executeRequete" raised> Executer la requête</paper-button>
Et ça donne quoi ??? Ben y'a qu'à aller voir sur http://127.0.0.1:8081, et actualiser la page via la touche F5, ou le bouton de rafraîchissement de page pour qu'elle se recharge
On a bien notre bouton (1) mais quand on clique dessus, on a une erreur dans la console (2):
listener method `executeRequete` not defined
Ah bah oui, mince, on n'a pas défini la méthode 'executeRequete' qu'on souhaite utiliser lors de l'evenement 'on-tap' du bouton (quand on clique sur le bouton)... Et bien allons-y, définissons cette méthode... son rôle ??? on a dit que quand on clique sur le bouton, on l'application devait executer la requête, non? Ok, c'est parti, attention c'est trop hard :
Cette fois, c'est après la fonction 'properties', et il faut ajouter (voir n°3 dans l'image qui suit):
executeRequete(){
this.$.sparqlRequest.generateRequest()
}
ici, on utilise l'identifiant de notre requete 'sparqlRequest' et on lui applique la fonction 'generateRequest()' .... Tu vois... trop dur ...
Et tant qu'on y est, maintenant, je te sens chaud, allez, on se lâche, on écrit la fonction qu'on avait définie pour récupérer les résultats, rappelle-toi, c'est la fonction '_handleResponse' dans la requete <iron-ajax> (voir n°4 dans l'image qui suit)
_handleResponse(data){
console.log("Reponse Sparql");
// console.log(data);
// console.log(data.detail);
// console.log(data.detail.error);
// console.log(data.detail.error.message);
// console.log(data.detail.request);
console.log(data.detail.response);
let response = JSON.parse(data.detail.response);
let link = response.head.link;
let vars = response.head.vars;
let results = response.results.bindings;
console.log(results);
}
Maintenant quand on clique sur le bouton, les résultats s'affichent dans la console, mais c'est déjà pas mal....
ETAPE 5 : AFFICHAGE DES RESULTATS SOUS FORME DE LISTE.
Mouais dans la console, ça fait pas une appli, ça, donc, on vas récupérer ces résultats, les mettre dans une variable de l'appli (this.results) et utiliser un nouveau composant Polymer (dom-repeat) pour boucler sur les resultats, agrémenté d'un autre composant, paper-item, qui est tout approprié pour afficher des listes...
Ajoutez à la fin de la fonction _handleResponse la ligne 'this.results = results'
ce qui nous donne :
_handleResponse(data){
console.log("Reponse Sparql");
// console.log(data);
// console.log(data.detail);
// console.log(data.detail.error);
// console.log(data.detail.error.message);
// console.log(data.detail.request);
console.log(data.detail.response);
let response = JSON.parse(data.detail.response);
let link = response.head.link;
let vars = response.head.vars;
let results = response.results.bindings;
console.log(results);
this.results = results;
}
Maintenant que nous avons sorti nos 'results' de la fonction et l'avons affecté à une variable du composant spoggy-sparql,
on peut boucler dessus en ayant pris soin :
d'avoir installé le composant 'paper-item' avec la commande 'bower install paper-item'
d'avoir importé les composants 'dom-repeat' et 'paper-item' (voir n°5)
Un truc sympa, à mon humble avis, c'est de coupler avec VisJs,
Pour voir ce que ça donne, utilisez Spoggy pour vous brancher sur Persée ou DbPedia: http://spoggy.herokuapp.com/
ATTENTION utilisez l'adresse http://spoggy.herokuapp.com/ et non httpS://spoggy.herokuapp.com/ --> sans le 's' de https, car http://data.persee.fr/sparql n'est pas accessible en mode sécurisé
