Intégrer des services en ligne gratuits dans votre site

Dans ce chapitre je vais évoquer quelques services en ligne gratuits qui facilitent le travail du développeur Web ; on les appelle aussi API tierces.
Ces API tierces ne sont pas implémentées par les navigateurs, il faut charger un fichier .js pour pouvoir les utiliser.
Pour obtenir la dernière version de l'application, il est conseillé de charger à partir d'un CDN.
La plupart des API tierces sont proposées par Google mais pas uniquement ...

OpenStreetMap (OMS)
Google Translate
Google Search
Google Charts

Projet OpenStreetMap (OMS)

API leaflet

Vous pouvez interagir avec le service OSM en ligne via l'API leaflet.
Leaflet.js est une librairie JavaScript de cartographie interactive open-source.

Première carte avec leaflet

Le code HTML correspondant

...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
...
<body>
...
   <div id="carte" style="width:100%; height:100%"></div>
...

Attention l'API comprend non seulement un fichier JavaScript mais aussi une feuille de style.
Ici les deux fichiers sont récupérés sur un site : unpkg.com. On est donc assuré d'avoir la dernière version de la librairie.
Il faut créer une boite identifiée carte qui va contenir effectivement une carte.

Le script

var ma_carte = L.map('carte').setView([50.94, 1.87], 12); 
// centrer la carte sur Calais avec un niveau de zoom de 12

var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',       maxZoom: 19     });
// définir un fond de carte
ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée "ma_carte"

Avec la méthode L.map on définit le centre de la future carte et le niveau de zoom ; le centre a les coordonnées GPS 50.94 de latitude et 1.87 de longitude et un niveau de zoom de 12.
Avec la méthode L.tileLayer on définit une carte.
Ensuite il faut que cette carte devienne le "background" de la boite.

Deuxième carte

Nouveauté : un marqueur au centre de la carte !

Le code HTML

...
 <link rel="stylesheet" href="leafleft/leaflet.css" />
 <script type="text/javascript" src="leaflet/leaflet.js"></script>
 ...
<body>
...
	<div id="carte" style="width:100%; height:100%"></div>
...

Différence notable avec l'exemple précédent : on suppose que le dossier correspondant à la librairie a été récupéré sur le site https://leafletjs.com puis décompressé et installé en local ; le dossier se nomme "leafleft" et se situe dans le même répertoire que les documents HTML tenant lieu d'exemples.

Les différents fichiers de la librairie Leafleft :

Notez le dossier "images" contenant les marqueurs.

Le script

var ma_carte = L.map('carte', { zoomControl:false }).setView([48.80952, 7.776818], 13);
				
var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
// définir un fond de carte
ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte

var marker = L.marker([48.804128, 7.776792]).addTo(ma_carte).bindPopup("LIJE Creative");

Le centre de la carte correspond à la position GPS de la ville de Hagueneau en Alsace !

Par rapport au script précédent une instruction supplémentaire pour positionner un marqueur au centre de la carte.

Indiquer à l'internaute sa position sur la carte via un marqueur

Il faut donc récupérer la position GPS de l'internaute grâce à l'objet geolocation de JS (qui est implémentée par tous les navigateurs récents) puis utiliser l'API leaflet pour définir le centre de la carte, ajouter le fond de carte et positionner le marqueur.

La carte

Le script correspondant

if(navigator.geolocation) navigator.geolocation.getCurrentPosition(fcarte) ;
function fcarte(position)
{
		var vlatitude = position.coords.latitude; 
		var vlongitude = position.coords.longitude; 
				
		var ma_carte = L.map('carte').setView([vlatitude, vlongitude], 17); 				
		var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte
			
		var marker = L.marker([vlatitude, vlongitude]).addTo(ma_carte).bindPopup("LIJE Creative");
}
...

L'internaute est géolocalisé (si il a autorisé son navigateur à accéder à sa position) ; ses coordonnées alors sont récupérées dans deux variables.
Les méthodes L.map et L.marker sont alors argumentées avec ces deux variables.

Google Translate

Google propose plusieurs API qu'il est relativement facile d'installer dans une page web.
Commençons par Google traduction qui permet à un visiteur étranger de traduire toute la page dans sa langue maternelle. En implémantant cet outil, vous réalisez donc un site multilingue.

Installer le service de traduction Google dans une page web

C'est relativement simple. Dans la partie HEAD il faut créer un lien vers le service de traduction mis à disposition par Google. <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>

Attention écrivez bien "https" (et non pas "http").
Il faut ensuite et dans la partie BODY, créer une boîte DIV vide car elle sera remplie par l'API : une liste déroulante proposant toutes les langues possibles.

Le code HTML correspondant

	<div id="traduction" style ="width : 30%; border : 1px solid red; margin : auto; ">
		<h5>Traduction</h5>
	</div>

Il faut ensuite écrire une fonction JS

function googleTranslateElementInit() 
{
	new google.translate.TranslateElement({pageLanguage: 'fr'}, 'traduction');
}

Test

Pour voir comment ça marche, remontez tout en haut de la page. Juste au dessus du sommaire du tutoriel en cours, vous découvrez une petite boite bordurée de rouge avec pour légende "Traduction" et juste en dessous une liste déroulante.
Ouvrez cette liste et sélectionnez "anglais" et observez ; toute la page est traduite dans cette langue.

Créer un moteur de recherche pour son site

Une courte vidéo qui vous explique comment personnaliser à votre site le moteur de recherche de Google.

Création d'un moteur de recherche pour votre site

Cinq minutes de travail !
Vous devez avoir un compte Google.
Vous ouvrez le navigateur Chrome puis vous tapez l'URL : cse.google.fr
Vous précisez le nom de domaine de votre site. Par exemple : darchevillepatrick.info
Vous copiez le code proposé par "programmable search engine" dans la partie BODY de la page qui doit accueillir la zone de recherche.

Exemple de code proposé par cse.google.fr : <script async src="https://cse.google.com/cse.js?cx=33e24936714bb0f38"></script> <div class="gcse-search"></div>

Code que j'ai inséré dans la page d'accueil de mon site : index.htm

Dans ce site j'ai créé un moteur de recherche pour l'ensemble de mon site mais aussi pour chaque tutoriel du site.

darchevillepatrick.info/bio (tuto de biologie aquatique)
darchevillepatrick.info/pyton (tuto sur Python)
darchevillepatrick.info/css (tuto sur le CSS)
etc.

Utilisation du moteur de recherche personnalisé

Dans la zone de recherche de la page d'accueil, je tape, par exemple, "afficher heure et date courantes".
Le résultat de cette recherche pour cette question.

Dans la capture d'écran vous voyez des liens vers différentes pages appartenant à différents tutos de mon site.

Google ne peut s'empêcher d'afficher d'abord quelques annonces.
Faites défiler pour arriver aux liens vers votre site.

Google Charts

Vous rêvez d'une page web contenant un superbe graphique interactif ? Et bien c'est possible en utilisant l'API Google Charts.

Google Charts est un service Web interactif qui crée des graphiques à partir d'informations fournies par l'utilisateur dans d'une page web.

Comment utiliser Google Charts ?

Il faut bien sûr charger la bibliothèque Google Charts.
Il faut ensuite produire un script qui charge la version la plus récente du module de visualisation et qui contient une fonction de traçage.
Le code HTML appelle la fonction et crée une zone de traçage.

Tracer un camembert

Le code correspondant

...
<script  src="https://www.gstatic.com/charts/loader.js"></script>
<script> 
	// chargement du module de visualisation le plus récent
	google.charts.load("current", {packages: ["corechart"]});
    
function tracerGraphe() 
{ 
	// données à représenter dans le graphe
    var donnees = google.visualization.arrayToDataTable(
        [
            ['Cours', 'Heures par semaine'],
            ['histoire & géo', 4],
            ['Anglais',     3],
            ['Mathématiques',     4],
            ['Français', 4],
            ['Sciences physiques',3],
			['Sciences de la vie',3]
        ]);
	// options du graphe
    var options = {title: 'Cours de la semaine'};
	// instanciation du graphe : diagramme circulaire ou camembert
    var graphique = new  google.visualization.PieChart(document.querySelector('#graphe'));
	// dessin du graphique
    graphique.draw(donnees, options);
} 
</script>
<body onload ="tracerGraphe()">
	<div id="graphe" style="width: 60%; height: 400px; margin : 10px auto;"></div>
...

Il faut d'abord charger l'API Google Charts dans un premier script.

appeler la méthode load qui permet de charger la dernière version de l’API (“current“), et de charger les graphiques standard ([“corechart”]).
décrire la fonction de traçage

Cette fonction de traçage est appelée sur chargement de la page.

La fonction de traçage

Ici, on définit des données à l’aide d’un tableau indicé à deux dimensions que l’on transforme en type de données utilisable par GoogleCharts à l’aide de la méthode arrayToDataTable.
la variable graphique correspondant à l’objet graphique de type "PieChart" (un camenbert) qui sera affiché dans un élément HTML identifié "graphe".
graphique.draw(donnees, options) : méthode draw appliquée à l'objet de type "PieChart" pour dessiner le graphique.

Le rendu dans un Iframe

Variante : diagramme en bâtons

Le rendu

Le code

Le code de cette deuxième page web est strictement identique à la première à une exception près.

...
 var graphique = new  google.visualization.BarChart(document.querySelector('#graphe'));
 ...

Il suffit donc d'utiliser "BarChart" à la place de "PieChart" dans l'instruction d'instanciation.

Deuxième variante : nuage de points

Le rendu

Il s'agit donc d'un nuage de points.

Le code

 ...
 var options = {title: 'Répartition horaire par matière ', hAxis: {title: 'Matières'},
          vAxis: {title: 'horaires', minValue: 0, maxValue: 8},};  
// instanciation du graphe : diagramme en batons
var graphique = new  google.visualization.ScatterChart(document.querySelector('#graphe'));
 ...

J'ai donc précisé "ScatterChart" pour définir un nuage de points.
Auparavant j'ai personnalisé les deux axes dans les options.

Dessiner des cartes avec l'API

L'API permet non seulement d'afficher des graphiques mais aussi de colorier certains pays sur une mapmonde.

Thème : colorier certains pays sur une mapmonde en fonction de leur population.

Le code

 ...
 <script  src="https://www.gstatic.com/charts/loader.js"></script>
<script> 
	google.charts.load("current", {packages: ["geochart"]});
    
function tracerCarte() 
{ 
	// données à sélectionner sur la carte du monde
     var donnees = google.visualization.arrayToDataTable(
        [
           ['Pays', 'Indicateur'],
          ['United States', 300],
          ['Brazil', 150],
          ['RU', 200],
		  ['India',1200],
		  ['China',1500]
        ]);
	// options du graphe
    var options = {};
	// instanciation de la carte
    var chart = new google.visualization.GeoChart(document.getElementById('carte'));
	// dessiner la carte
    chart.draw(donnees, options);
} // fin fonction
</script>
</head>
<body onload ="tracerCarte()">
	<div id="carte" style="width: 90%; height: 800px; margin : 10px auto;"></div>
 ...

Attention il faut charger le package "geochart" et non pas "corechart".
La procédure d'instanciation précise également qu'il s'agit de produire une carte.

Le rendu dans un Iframe

Les pays énumérés dans le tableau donnees sont coloriés avec un nuance de vert en fonction de leur population (en millions).

Pour en savoir davantage

Mon propos n'est qu'un simple survol de cette API qui est très riche.
Pour en savoir plus il suffit de visiter : documentation officielle en français proposée par Google

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Intégrer des services en ligne gratuits dans votre site

Projet OpenStreetMap (OMS)

API leaflet

Première carte avec leaflet

Le code HTML correspondant

Le script

Deuxième carte

Le code HTML

Le script

Indiquer à l'internaute sa position sur la carte via un marqueur

La carte

Le script correspondant

Google Translate

Installer le service de traduction Google dans une page web

Le code HTML correspondant

Il faut ensuite écrire une fonction JS

Test

Créer un moteur de recherche pour son site

Création d'un moteur de recherche pour votre site

Utilisation du moteur de recherche personnalisé

Google Charts

Comment utiliser Google Charts ?

Tracer un camembert

Le code correspondant

La fonction de traçage

Le rendu dans un Iframe

Variante : diagramme en bâtons

Le rendu

Le code

Deuxième variante : nuage de points

Le rendu

Le code

Dessiner des cartes avec l'API

Le code

Le rendu dans un Iframe

Pour en savoir davantage