Le Blog

Le blog laboratoire de F.L.D. Studio
0

Google Drive API

Le DRIVE

google-drive

Comme on l'a vu le site laboratoire du dossier L41 embarque une mini application Web.

Le pretexte de celle-ci étant de tester les possibilitées offertes par les A.P.I. du service DRIVE de Google. Le DRIVE comme on le sait (ou pas) est un service gratuit qui fait partie de l'éco-système de Google et qui permet à tout un chacun de disposer d'un espace de stokage dans le 'cloud'.

Au dela du simple disque virtuel permettant le backup de fichier dans le nuage Internet, Google DRIVE peut aussi être un programme utilitaire que l'utilisateur installe sur son ordinateur et qui va lui permettre de synchroniser de façon 'transparente' (comprendre, sans intervention humaine) ses fichiers sur ses différents appareils. Ainsi un document conçu à la maison sur un PC, sera disponible au bureau avec un Mac et consultable en réunion sur une tablette sous Android ou un smartphone tournant sous IOS. Cela existe avec d'autres services comme DropBox mais Google DRIVE va plus loin. En plus de ces fonctionnalités il est aussi possible avec Google DRIVE de concevoir ou modifier les documents, voir de travailler à plusieurs et en même temps !!!

Les A.P.I.

Pour les développeurs il est désormais facile d'intégrer l'accès au DRIVE de l'utilisateur de façon simple, sécurisé et performante. Pour se former je recommande l' excellent site Code School dont la devise est 'apprendre en pratiquant'. A l'image des différentes formations disponibles sur le site, celle pour apprendre les API du Google DRIVE sont parfaites pour commencer et utiliser les fonctionnalités offertent par le Google  DRIVE dans une application WEB.

L'adresse : http://campus.codeschool.com/courses/discover-drive/intro

Fonctionnalités

Grace aux API's il est possible de downloader un fichier issu de son site directement dans le drive d'un utilisateur. Celui-ci doit bien sur disposer d'un compte chez Google. La mise en place du bouton de download est des plus trivial. On peut aussi aller plus loin puisque une application peux manipuler l'ensemble des fichiers que l'utilisateur autorisent.

Paramétrage des API

Inutile de refaire le cours ici mais voici le minimum à savoir :

Pour le bouton Save (Download d'un fichier)

Pour le upload des fichiers

Upload fichier 1

Détail des opérations sur le site de Google (1-2-3-4)

  • Disposer d'un compte chez Google.
  • Se connecter sur la Google Developper Console : https://console.developers.google.com/project
  • Cliquer sur le bouton rouge : Create Project
  • Saisir le nom du projet : exemple : L41-WEBAPP
  • Dans le menu de gauche, sélectionner : APIs & auth et sélectionner : APIs
  • Apparait une liste d'API, sélectionner : Google Picker API
  • Dans le menu de gauche, sélectionner : Credential
  • Clef authentification type Web Application : Redirect URIs :

  • Cléf public  type Browser Key : Paramétrer la Public API access :

 Public API access

Comme on le voit les cléfs sont définies pour un ou plusieurs domaines. Elles peuvent donc être exposées en sources dans le code sans risque. Dans notre exemple localhost est le domaine utilisé pour le développement en local et www.flds.fr/l41/public/webapp/ est l'adresse compléte d'utilisation du Web service sur le réseau.

Au final on ontient un écran de paramétrage comme celui affiché ci dessous :

recapitulatif configuration

Dans le HTML

Détail dans les pages du site (1-2-3) :

Le premier script permet la connexion et l'identification de l'utilisateur sur son compte Google Drive, ainsi que l'affichage de la boite de dialogue de Upload et consultation des documents dans le DRIVE (fonction : setupPiker, DocsUploadView et DocsView). On peux utiliser le script tel-quel, il faut juste modifier les valeurs des deux premières variables : clientId (Clef  Oauth : Client ID) et developerKey (Clef public API Key)  conformement à celles fournit par le Google Drive au moment du paramétrage de l'application sur la console développeur de Google.

Le second sont les API appellées à partir du site de Google avec la désignation de la fonction de CallBack à lancer après chargement (onApiLoad) Celle-ci appelle la fonction d'identification et la fonction d'affichage de la boite de dialogue.

 <script>
    //
    // API GOOGLE DRIVE pour http://www.flds.fr/l41/public/webapp/upload
    //
    var clientId = 'xxxxxxxxxx.apps.googleusercontent.com',
    developerKey = 'xxxxxxxxxx',
    accessToken;

    function onApiLoad() {
      gapi.load('auth', authenticateWithGoogle);
      gapi.load('picker');
    }
    function authenticateWithGoogle() {
      window.gapi.auth.authorize({
        'client_id': clientId,
        'scope': ['https://www.googleapis.com/auth/drive']
      }, handleAuthentication);
    }
    function handleAuthentication(result) {
      if(result && !result.error) {
        accessToken = result.access_token;
        setupPicker();
      }
    }
    function setupPicker() {
      var picker = new google.picker.PickerBuilder()
        .setOAuthToken(accessToken)
        .setDeveloperKey(developerKey)
        .addView(new google.picker.DocsUploadView())
        .addView(new google.picker.DocsView())        
        .build();
      picker.setVisible(true);
    }
    </script>

    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

Lorsque la page contenant ces scripts est appellée une boite de dialogue apparait par dessus la page du programme

Exemple dans le site

Catégories: Développement WEB

Commentaires: Pas de commentaires

Envoyer un commentaire