Intégrer des services en ligne gratuits dans votre site

Dans les deux chapitres précédents j'ai évoqué des API qui font partie de la spécification HTML5 et qui doivent donc être implémentées par les navigateurs. Je vous les rappelle : API DOM, API Webstorage, API Canvas, API selectors, API geolocation, etc.

Cependant il existe d'autres API dites tierces qui ne sont pas implémentées par les navigateurs.
Dans ce chapitre je vais évoquer quelques unes de ces API tierces qui peuvent faciliter grandement le travail du développeur "front-end".

Chacune des ces API se présentent sous forme d'un fichier d'extension .js.
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.

Google Maps et son alternative OpenStreetMap (OMS)
Google translate
Google search engine limité à votre site
Google Charts

Attention il existe d'autres API tierces. Je présente celles qui me paraissent les plus intéressantes mais ça se discute ...

Un article utile sur les API JavaScript

Projet OpenStreetMap (OMS)

OMS est l'alternative à Google maps.

Google maps : service payant ?

En effet depuis Juin 2018, pour afficher dans une page web une carte google Maps dynamique (qui interagit avec la position GPS) il faut obtenir une clé API. Et pour obtenir cette clé il faut ouvrir un compte de facturation ...

Sachez qu'il existe un service de cartographie en ligne et gratuit : OpenStreetMap (OSM).
Attention OSM c'est uniquement une base de données cartographique en ligne. Pour afficher une carte OSM dynamique dans une page web il faut associer cette base de données à une API appelée leaflet.

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.
Cette API n'est pas intégrée dans le navigateur donc il faut la charger !

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>
	...

Comme cette API n'est pas intégrée au navigateur il faut la charger. 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="../leaflet/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.

Les différents fichiers du framework :

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("<b>LIJE Creative</b>");

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("<b>LIJE Creative</b>");

L'internaute est géolocalisé (si il a autorisé son navigateur à accéder à sa position) et ses coordonnées sont récupérées dans deux variables.
Les méthodes L.map et L.marker sont alors argumentées avec ces deux variables.
Ce n'est donc pas plus compliqué qu'avec l'API proposée par Google.

Utilisation basique de Google Maps

Point besoin d'ouvrir un compte chez Google pour afficher une carte figée (non interactive).

Point besoin d'être développeur web chevronné pour intégrer une carte Google statique dans une page.
Il suffit d'ouvrir google.fr de saisir le nom d'une localité (ou région ou pays) puis de cliquer sur l'onglet "Maps". La carte apparait ! Il faut alors cliquer sur "partager" puis "intégrer une carte" pour obtenir du code HTLM qu'il suffit ensuite de coller dans la page.

Ci-dessus une carte correspondant à la commune de Calais.
Le code généré par l'application Google Maps est le suivant etmodifié par mes soins est le suivant : <iframe src="https://www.google.com/maps/embed?pb=... width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen> </iframe>

Je me suis contenté de modifier les valeurs des attributs height et width.

Google Translate

GOOGLE propose d'autres API qu'il est relativement facile d'installer dans une page web.
Maintenant je vais évoquer l'API 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 correspondant de cette boite DIV : <div id="traduction" style ="width : 30%; border : 1px solid red; margin : auto; "> <h5>Traduction</h5> </div>

Il faut ensuite écrire une fonction JS dont le code est le suivant : 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.
C'est pas formidable !

Créer un moteur de recherche interne sur son site Web sans programmer

Une courte vidéo qui vous explique comment utiliser Google comme moteur de recherche pour votre site

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 tuto du site.
Ainsi, à titre d'exemples, j'ai demandé la génération de code pour le domaine darchevillepatrick.info/bio (tuto de biologie aquatique) pour 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 via la balise script.
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.

Exemple de page : tracer un camembert

Les scripts

...
<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);
    } // fin fonction
</script>
<body onload ="tracerGraphe()">
	<div id="graphe" style="width: 60%; height: 400px; margin : 10px auto;"></div>
</head>

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 code de la partie BODY

<body onload ="tracerGraphe()">
	<div id="graphe" style="width: 60%; height: 400px; margin : 10px auto;"></div>
</body>

Il faut appeler la fonction de traçage sur chargement de la page.

Il faut créer un DIV qui contiendra le graphique.

Le rendu dans un Iframe

Le rendu d'une variante

Le code de cette deuxième page web est strictement identique à la première à une exception ! ... var graphique = new google.visualization.BarChart(document.querySelector('#graphe')); ...

Donc j'ai simplement changé un mot : "BarChart" à la place de "PieChart" dans l'instruction d'instanciation.
La variable graphique correspondant désormais à un objet de type "BarChart" (un diagramme en batons horizontal).

Le rendu d'une deuxième variante

Il s'agit donc d'un nuage de points. ... 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.

Coloriez certains pays sur une mapmonde en fonction de leur population

 ...
 <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 plus

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

Des API HTML utiles très pratiques

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

Intégrer des services en ligne gratuits dans votre site

Projet OpenStreetMap (OMS)

Google maps : service payant ?

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

Le script correspondant

Utilisation basique de Google Maps

Google Translate

Installer le service de traduction GOOGLE dans une page web

Test

Créer un moteur de recherche interne sur son site Web sans programmer

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

Utilisation du moteur de recherche personnalisé

Google Charts

Comment utiliser Google Charts ?

Exemple de page : tracer un camembert

Les scripts

La fonction de traçage

Le code de la partie BODY

Le rendu dans un Iframe

Le rendu d'une variante

Le rendu d'une deuxième variante

Dessiner des cartes avec l'API

Coloriez certains pays sur une mapmonde en fonction de leur population

Le rendu dans un Iframe

Pour en savoir plus