15 secrets de dev – Maîtrisez les meilleures API de Google

Le géant de la recherche, Google, est un vrai trésor d’API, découvrez-en les meilleures.

Le logiciel est un produit unique en ce qu’il peut être reproduit pour un coût modique. Une fois que le développement a été préparé, ajouter de nouvelles installations consiste bien souvent à acheter du matériel supplémentaire. Google a utilisé cette approche particulière pour produire diverses API et fournir aux Webdesigners l’accès à la conception des blocs utilisés pour la réalisation de ses propres services. Certains sont, heureusement pour nous, disponibles gratuitement : Google paie de bonne grâce pour lier les développeurs à son propre écosystème.
Outre l’introduction finale de la monétisation (les API bien établies ont tendance à cesser d’être gratuites dès que beaucoup de gens les utilisent), Google profite de la capacité d’avoir ses API testées en situation par des tiers sans avoir à payer pour leur travail.
Un autre bénéfice, peut-être plus effrayant, implique un accès supplémentaire aux données consommateur. Si un site génère des graphiques et autres fonctionnalités exploitant les services de Google, le moteur de recherche peut suivre les mouvements de l’utilisateur et le temps passé sur le site plus efficacement. Il ne serait pas surprenant que ces données trouvent d’une façon ou d’une autre leur voie dans des classements du moteur de recherche. Par exemple, un escroc avec un site au contenu pauvre mais bien placé pourrait s’octroyer une durée de visite très brève.
Mais oublions pour l’heure les précautions : en toute impartialité, les possibilités offertes sont bien trop élevées pour qu’on se contente de les laisser passer. Dans les prochaines pages de notre liste des meilleures API, attendez-vous à créer sans effort des diagrammes et graphiques, à gérer automatiquement les connexions, à louer des bases de données au besoin. Si vous en connaissez le nom, il y a des chances que Google l’ait déjà couverte.

 

Enregistrer des comptes

API : Google Sign In

Prix : Gratuit

Obliger les utilisateurs à s’inscrire est la certitude de les perdre : créer un nouveau compte est extraordinairement pénible. Beaucoup d’utilisateurs fermeront l’onglet à la vue d’une telle page : ils veulent le contenu tout de suite et maintenant, sans avoir à patauger entre les blocs de nom d’utilisateur et de mot de passe. Mais en utilisant le système d’enregistrement de Google, on peut atténuer ce problème en permettant aux utilisateurs de se connecter avec un compte Google déjà accessible.

Se lancer dans les API Google requiert, pour la plupart d’entre elles, de créer un compte dans la console de Google Developper (console.developers.google.com). Ensuite, créez un projet, ouvrez la sous-section APIs&auth et cliquez sur le sous-onglet Credentials. Puis créez un Auth ID. SI vous avez créé un nouveau projet, la Developer Console vous demandera de configurer l’écran Consent : les informations saisies seront présentées aux utilisateurs pendant l’authentification de votre app. Ensuite, il ne reste qu’à créer un ID client pour une application Web : n’oubliez pas de remplir les champs URL autorisés avec vos URL de test et de déploiement pour empêcher Google de bloquer l’app. Google récompensera vos efforts en générant un ID client et un secret client.

À l’étape suivante, il faut bidouiller un test. Sa structure est relativement simple : il charge un script et lance une onSignin-Method quand le processus de connexion est complété :

<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
<script type="text/javascript">
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend!
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
</script>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>

Ce code est remarquable car le bouton de connexion est généré via une classe <div> prédéfinie, qui extrait ses propriétés du header. Mais soyez conscient que cette procédure d’enregistrement ne fonctionnera que si le fichier HTML est envoyé depuis l’une des URL précisées : tester ce fichier nécessite de monter un serveur local.

Front shot of a MacBook Air shot with studio lighting
N’abusez pas des données

Une mauvaise utilisation des données provenant de Google attire toujours l’attention des médias. Assurez-vous que leur service juridique punisse le coupable.

 

Gérer et stocker des API

API : Task manager

Prix : Gratuit

Google propose un système de gestion de to-do list avancé pour chaque détenteur d’un compte Google. Les applications tierces peuvent accéder à cette to-do list pour ajouter, enlever
et gérer des tâches à la main. Les développeurs devraient tenir compte de cette API car Google n’offre pas de client Android et/ou iOS.

API : Accessing Drive

Prix : Selon usage

Google Drive fait partie des services de stockage cloud les plus répandus, il est accessible via une API dédiée. Les développeurs habitués aux systèmes de fichiers classiques doivent repenser leur approche : Drive utilise un schéma de stockage basé sur l’ID des fichiers. Comme les dossiers, ils sont représentés par un ID unique global qui doit être utilisé pour finalement trouver d’éventuels enfants.

API : Google Analytics

Prix : Selon usage

Intégrer des analytiques dans un site et/ou une app est très pratique. On peut aussi se préparer à un flux interminable de tous types de données sur les consommateurs et leur comportement dans la propriété Web une fois en test. Google Analytics rassemble aussi des données système qui peuvent être utilisées pour améliorer le ciblage, l’alimentation des ressources et le déploiement des fonctions.

API : Google Picker

Prix : Gratuit

Le système de fichiers par ID susmentionné rend les chemins extrêmement précieux. Heureusement, cette API fournit aux utilisateurs une expérience de type CommonDialog. On peut adapter le contenu affiché avec des propriétés spéciales : par exemple, une application de gestion de photos pourrait réorienter l’utilisateur vers le répertoire d’images de sa webcam.

 

Mettez vos jeux en vente

API : Google Game Services

Prix : Gratuit

La fidélité des joueurs est de plus en plus difficile à maintenir. Le temps passant, les exploits et classements bâclés se sont autoproclamés “baromètres de la fidélité”.

Leur implémentation à la main n’est pas compliquée : sur le marché actuel fulgurant des jeux vidéo, le temps nécessaire serait mieux investi dans un peu plus de marketing. Par conséquent, les offres de Google tombent à pic : Game Services est accessible à des apps natives, Android, iOS et C++ générique.

Dans tous les cas, le voyage vers un produit compatible Game Services commence dans la Google Play Developer Console sur play.google.com/apps/publish/signup/. Les développeurs qui ne se sont pas enregistrés sur le Play Store se retrouveront à devoir payer 25 $ : Google insiste sur la vérification du compte. À l’étape suivante, créez un Auth ID et commencez à mettre en place des tableaux de classement et/ou des récompenses.

La véritable implémentation commence par un processus de connexion Auth 2.0 adapté aux étapes abordées dans bit.ly/1L8CiMo. Une fois effectuée, on peut réussir un enregistrement en lançant une requête POST basée sur le schéma (bit.ly/1L8CjQn).

Dans les grandes lignes, les classements se comporteront de la même façon : spécifier un critère et s’assurer que l’esprit de compétition du joueur est activé. Google fournit une liste de calls Restt intéressants, comme afficher un classement ou soumettre un score final, sur bit.ly/1KBP7It. Les Play Services ne se content pas de proposer du contenu “statique”. Le système peut aussi être utilisé pour maintenir la communication entre joueurs : la synchronisation en temps réel ne concerne que les apps natives.

Dans les grandes lignes, la synchronisation d’un jeu implique la transmission fréquente d’objets JSON avec des informations d’état. Les joueurs sont regroupés en match par le système, et une fois un jeu mis en place, les tours sont pris jusqu’à ce qu’une des instances de jeu rapporte une victoire.

Les jeux cross-platform ont récemment repris de la vigueur, une bonne chose pour les fans de gaming qui aiment voir leur plateforme préférée prendre le pas sur un concurrent honni. Par défaut, Google Play Services rassemble les joueurs indépendamment de leur système d’exploitation : une situation presque idéale.

Studio lit, isolated shot of Apple 27" iMac with magic mouse, which has been cutout on Photoshop.

Conseil professionnel

L’optimisation de l’achat en ligne est aujourd’hui une science à part entière : il n’y a aucune honte à chercher une aide professionnelle pour cette addiction d’IAP de jeu.

Diagrammes personnalisés et instantanés

API : Diagrams pour tous

Prix : Gratuit

Un diagramme vaut mille mots. L’implémentation courante de la balise <canvas> a permis la création
de bibliothèques de rendu de diagramme qui opèrent par magie dans le navigateur du poste de travail du consommateur. Copiez le fichier dans votre poste de travail et chargez-le dans un navigateur pour régaler vos yeux avec le diagramme en barre :

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Good');
data.addColumn('number', 'Amount');
data.addRows([
['Silver', 300],
['Gold', 100],
['Platinum', 12],    
]);
var options = {'title':'Wealth allocation plan',
'width':640,
'height':480};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
</body>
</html>

Google insiste sur le fait que les paquets constituant l’API Charts doivent être téléchargés à chaque chargement de page via le chargeur Google JS. Dans la prochaine étape, un objet donné est conçu. Google fournit une classe DataTable prête à l’emploi avec un panel de fonctions de commodité qui facilite beaucoup la saisie de données.

Le véritable processus de rendu est ensuite déclenché en invoquant la méthode draw sur l’objet diagramme. Les diagrammes implémentent une dizaine de types différents : ils diffèrent en format, invocation et requête de chargement. Commencez par visiter bit.ly/1VcR8AZ : Google fournit un exemple instructif pour la plupart des diagrammes. Soyez averti que l’usage de Google Chartes nécessite une connexion Internet active sur les postes de travail de votre client.

Anno1

Les diagrammes Candlestick sont particulièrement utiles pour des analyses techniques : ils affichent en ouvert, élevé, bas et fermé dans un diagramme compact

Anno2

Les donuts sont de légères variantes du camembert : le trou au centre économise de l’encre au moment d’imprimer de grands diagrammes.

Anno3

Les diagrammes à barres sont fréquents, classiques avec leurs informations faciles à lire et une légende pour distinguer les données.

anno4

Créer des diagrammes régionaux s’apparente à la magie noire. La bibliothèque de Google facilite beaucoup cette tâche : elle fournit même les contours de la carte.

Cartes, polices et designs

API : Material Design Lite

Prix : Gratuit

Les piles GUI JavaScript ont tendance à être aléatoires. Material Design Lite de Google est une implémentation légère du thème Material Design d’Android s’appuyant sur HTML5, CSS
et un peu de JavaScript. Il est proposé avec un panel de widgets comprenant templates, composants et thèmes. Ils sont faciles à intégrer, à personnaliser et à télécharger une fois la structure utilisée comprise. Comme Material Design Lite peut s’auto-héberger, les paranoïaques ne seront pas dissuadés de l’utiliser.

API : Google Maps

Prix : Selon usage

Créer des cartes à la main n’est pas pour les mauviettes. Si on ne dispose pas d’une compréhension solide de la gestion et de la matrice de données, mieux vaut lire ceci avec attention avant de s’y essayer. Google permet d’accéder à ses fonctionnalités de système cartographique grâce à une variété d’API. L’usage est généralement gratuit, mais une fois qu’on dépasse 25 000 chargements de cartes par jour, l’utilisation de certaines API ouvrira au paiement.

API : Fonts API

Prix : Selon usage

Les guerres de polices se sont étendues au Web dès que les navigateurs ont commencé à pouvoir analyser les polices personnalisées. Le Font respository de Google fournit aux développeurs une grande sélection de polices libres de droits. Les déployer est aussi facile que d’intégrer le fichier CSS nécessaire :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>

Données haute performance

API : Google Cloud SQL

Prix : Sur facture

Les systèmes devenant plus importants, des bases de données s’engorgent. Lancer des systèmes de serveur haute performance et étendus relève en soi de la science-fiction : si on n’a pas un expert des données attitré, mieux vaut externaliser.

Google est le maître des big data : gérer son index de recherche est un exercice en databasing de haute performance. C’est facile de se lancer avec un Cloud SQL : connectez-vous à la console de développeur et créez une nouvelle instance Cloud SQL dans le projet. Ensuite, informez-le des plages IP qui ont le droit d’interagir avec le système.

Du point de vue de l’utilisateur, les bases de données hébergées en Cloud SQL ne présentent quasi aucune différence avec des bases de données normales : on peut se connecter comme à n’importe quelle autre instance SQL. Les administrateurs seront heureux de constater que beaucoup de tâches DB courantes peuvent être lancées depuis le back-end graphique de Google Developer Console. Mettre en place une réplication vers un hébergeur de base de données local ne requiert plus l’usage d’obscures commandes SQL, même si des magiciens SQL peuvent, évidemment, appliquer leur magie à la base de données via le client MySQL.

Google fournit deux modèles de facturation différents, qui affectent aussi la disponibilité et le fonctionnement. Une instance facturée à l’usage est coupée quand des clients l’abandonnent pendant 15 minutes. Les versements fixes, en revanche, ont tendance à être actifs pendant toute leur existence, ne se fermant qu’après plus de dix heures d’inactivité.

Front shot of a MacBook Air shot with studio lighting

 

Le meilleur parti de YouTube

API : La puissance de YouTube !

Prix : Gratuit

Le streaming vidéo est une méthode imparable pour contrarier l’hébergeur. Google propose diverses API qui permettent d’utiliser YouTube comme système de stockage et gestion. Intégrer un lecteur sur un site peut être effectué avec un peu de JavaScript :

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

C’est une partie des fonctions, on peut aussi utiliser cette API pour permettre aux utilisateurs
de se connecter sur YouTube. Les événements de streaming live peuvent aussi être mis en place via YouTube avec un processus relativement plus complexe.

Diagrammes statiques

L’API Image Charts de Google autorise la création de diagrammes en intégrant une balise <img> avec un attribut src formaté.

API pour payer, dater et trouver

API : Calendar

Prix : Gratuit

Google Calendar n’a pas beaucoup captivé au départ, mais a été mis en lumière quand les smartphones Android et leur capacité de synchronisation se sont répandus. L’API JavaScript permet aux applications d’interagir avec les données calendaires du consommateur. On peut ajouter, supprimer et modifier des événements : une app d’actions pourrait s’en servir pour ajouter des informations de dividende sur un smartphone. Google implémente l’API Calendar sous forme de service REST. Les interactions avec le serveur interviennent en envoyant des chaînes JSON prédéfinies : les développeurs JavaScript doivent faire sans les classes d’abstraction trouvées dans les SDK pour d’autres langages.

API : Android Pay

Prix : Non communiqué

Android Pay Service fait passer Google Wallet dans la réalité. Il a pour but de simplifier le processus de paiement à la fois dans les apps et dans les vraies boutiques. Plus les utilisateurs s’habituent au fonctionnement du système, plus les taux de conversion devraient monter. Malheureusement, toutes les dates annoncées de lancement pour Android Pay ont été repoussées jusqu’à présent : on ne peut pas savoir quand le service sera finalement lancé.

API : Geocoding made easy

Prix : Gratuit avec un usage limité

Les adresses du monde réel sont adaptées aux humains : les applications géodésiques ont tendance à mieux travailler avec des coordonnées. L’API Geocoding de Google est dédiée à ce processus de conversion : les utilisateurs peuvent saisir un nom de rue, puis l’app recueille les données de latitude et longitude en retour. Mais attention, car Google limite toujours les apps à dix requêtes par seconde.

 

Cet article est extrait du n°72 de WebDesign.

web-design-n72

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *