Depuis quelques semaines on entend beaucoup parler de Google Drive. Ce service semblable à Dropbox a de grandes ambitions, mais ce n’est pas ça que nous allons voir aujourd’hui. Nous allons voir à travers un exemple de base, comment utiliser l’API Google Drive pour l’inclure dans vos applications web.
Exemple API Google Drive - Picker
Google APIs
Nous allons commencer par se connecter à Google APIs avec un compte Google. Si c’est la première que vous vous connectez, créez un nouveau projet et activez Drive API et Drive SDK.
API et SDK à activer
Dans le menu de gauche, allez dans « API access » et récupérez votre API key dans la section « Simple API Access ».
Code
Pour que cela fonctionne, il faudra utiliser un serveur web, vous pouvez installer WAMP pour Windows par exemple.
Dans votre dossier « www », créez un dossier Drive, puis créez le fichier index.html. Copiez-collez le code suivant :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Exemple Google Picker - Samoht.fr</title>
<!-- The standard Google Loader script. -->
<script src="http://www.google.com/jsapi?key=METTRE VOTRE API KEY ICI"></script>
<script type="text/javascript">
// Use the Google Loader script to load the google.picker script.
google.setOnLoadCallback(createPicker);
google.load('picker', '1', {'language':'fr'});
// Create and render a Picker object.
function createPicker() {
var picker = new google.picker.PickerBuilder().
enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
addView(google.picker.ViewId.RECENTLY_PICKED).
addViewGroup(
new google.picker.ViewGroup(google.picker.ViewId.PHOTOS).
addView(new google.picker.PhotosView().
setType(google.picker.PhotosView.Type.UPLOADED)).
addView(new google.picker.PhotosView().
setType(google.picker.PhotosView.Type.FEATURED))).
addView(google.picker.ViewId.DOCS).
addView(google.picker.ViewId.PDFS).
addView(google.picker.ViewId.YOUTUBE).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
alert('The user selected: ' + fileId);
}
if (data.action == google.picker.Action.PICKED) {
var message = 'Vous avez choisi: ' + data.docs[0].url + ' nom: ' + data.docs[0].name + ' embeded URL: ' + data.docs[0].embedUrl;
document.getElementById('result').appendChild(document.createTextNode(message));
}
}
</script>
</head>
<body>
<div id="result"></div>
<header>Exemple de code</header>
<article>
<p>Testons l'API Google Drive</p>
</article>
<footer><a href="http://samoht.fr">Samoht.fr</a></footer>
</body>
</html>
Détaillons un peu tout ce code.
HTML
Rien de bien compliqué, j’ai simplement utilisé des balises HTML5 pour m’amuser. Le bloc « result » permet d’afficher le résultat.
JavaScript
Nous commençons par créer un « picker » à la ligne 10 en appelant la fonction createPicker que nous allons définir plus loin, puis à la ligne 11 on force le langage pour être en français.
Ensuite, on crée un « picker » et on peut lui ajouter diverses fonctionnalités telles que la multi sélection, ajouter des vues, des groupes de vues, etc. Pour avoir plus d’informations sur les méthodes disponibles, consultez cette page : https://developers.google.com/picker/docs/reference
A la fin de la méthode de création de notre picker, nous le lions à une callback appelée ici pickerCallback.
Cette callback permet de récupérer le choix de l’utilisateur et de l’afficher dans le div « result ».
C’est ici que vous pourrez faire des choses plus intéressantes que simplement afficher ce que l’utilisateur a fait !
Propriétés des documents
Pour chaque type de document, il y a des propriétés particulières que vous pourrez retrouver sur ce lien : https://developers.google.com/picker/docs/results.
Cas particulier pour afficher les photos
Pour récupérer la photo sélectionnée dans Google Drive par l’utilisateur, il faut utiliser la propriété « last thumbnail », ce qui donne :
docs[0].thumbnails[docs[0].thumbnails.length-1]
Conclusion
À travers cet exemple très simple, nous avons vu comment créer un Picker pour utiliser Google Drive, afficher des vues et des groupes de vues, mettre en français, afficher une image sélectionnée …
Maintenant, je laisse place à votre imagination pour créer du code plus intéressant !
Si vous avez des questions ou des remarques, n’hésitez pas à utiliser les commentaires. Enfin, si vous avez aimé ce tuto, faites le tourner sur les réseaux sociaux ou par mail ! Merci :)
Articles similaires :
Dans ce tuto nous allons voir comment installer BackTrack 5 sur Virtua...
If you are looking for the accelerometer's frequency of your Androidph...
BackTrack 5 R3 est sorti le 13 aout 2012, apportant avec lui des corre...
Nous allons voir comment installer un serveur subversion sur votre NAS...
2 commentaires
szsz
4 avril 2013 à 21 h 47 min (UTC 2) Lier vers ce commentaire
merci
Thomas
4 avril 2013 à 23 h 59 min (UTC 2) Lier vers ce commentaire
De rien
Content que cet article ait servi ! Merci d’avoir pris le temps de laisser un commentaire.