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

0

L41 - Rapport

Performances du site

Après une petite semaine de 'mise en production' le site du dossier L41 est passé dans les moulinettes des analyseurs en lignes pour en tester la qualité et la vitesse. Après l'utilisation des bonnes pratiques du genre (optimisation des images, minification et compression du CSS et du JavaScript) et quelques réglages savants dans le fichier .htaccess nous sommes à même de communiquer les résultats.

  • http://www.modern.ie/fr/report : télécharger le rapport .pdf (228Ko)
  • https://developers.google.com/speed/pagespeed/insights : Mobile 70/100 - Expérience utililisateur : 100/100 - Ordinateur : 88/100
  • http://tools.pingdom.com/fpt/ : 88/100 (site 98% plus rapide que la moyenne)
  • http://gtmetrix.com : Page Speed Grade : 99% - YSlow Grade : 92%
  • http://www.webpagetest.org : 98/100 (Paris-Chrome)
  • https://reporting.opquast.com/fr/ : Qualité 8/10
  • http://www.dareboost.com/fr/home : 96/100 (Firefox 25 - Paris) Télécharger le rapport.pdf  (146Ko)

Les tests portent sur la page d'acceuil du site (la plus lourde en terme de requettes, images, css et javascript) d'un poids de 389.5kb (moyenne mondiale : 320Ko) délivrée en 0,85 secondes (temps moyen) optenue après 37 requettes (moyenne mondiale : 86).

Visiter le site : http://www.flds.fr/l41/public/

A lire également le blog de l'équipe de développement de Internet Explorer (http://blogs.msdn.com/b/ie_fr/) qui fournit des informations interessantes concernant IE11 et de nouvelles balises  (non encore standardisées) pour la prédiction d'affichage (prerender) des pages ou le pré-chargement des ressources (prefetch) type .css ou .js (http://blogs.msdn.com/b/ie_fr/archive/2013/12/09/getting-to-the-content-you-want-faster-in-ie11.aspx). 

Prise en charge du prérendu et de la prérécupération : http://msdn.microsoft.com/fr-fr/library/ie/dn265039%28v=vs.85%29.aspx

Commentaires: Pas de commentaires

0

Laravel 4.1

Le dossier L41

Le dossier L41

Le site : L41

La sortie de la version 4.1 du framwork PHP Laravel à été l'occasion de le tester en profondeur. Pour cela nous avons développé un site Internet et son back-office : le dossier L41.

Son étude et la conception du code on été élaboré sur une période de 2 mois. Cela correspond à une courbe d'apprentissage plutôt courte sachant que beaucoup d'autres composants ont aussi été mis en oeuvre. Le but du site étant justement de détailler l'ensemble des briques logiciels (toutes Open Sources) qui ont permis de le construire.

Comme on le constate, l'élaboration d'un site Internet et avant tout constitué de l'assemblage de multiples ressources que l'on fait fonctionner ensembles.

La première impression est que la version 4 constitue une version majeure de ce framwork. A partir de cette fondation très solide l'avenir du produit semble assuré auprès des 'artisans' du Web que sont les développeurs. Simple à utiliser et à comprendre, très complet, robuste, permissif et relativement rapide à l'exécution, Laravel reste mon outil de conception préféré pour tous les projets de développements professionnels pour l'Internet. Le buz autour de LARAVEL me semble donc tout à fait justifié. Il devient plus aisé aujourd'hui de trouver des ressources et des tutoriels et il est tout fait possible de se former tout seul.

Webapp

Le site intégre une mini-web application, pretexte à l'utilisation des API de Google DRIVE. Elle démontre qu'il est tout a fait possible de downloader un fichier issu du site directement dans le DRIVE de l'utilisateur ou de Uploader un document local sur celui-ci sans sortir de l'application.

Webapp Landing page

Une fois enregistré l'utilisateur peut gérer son profil et tester l'application.

Webapp

Le Back-Office

le site est entirement administrable à cette adresse : http://www.flds.fr/l41/public/admin/auth/login

Un aperçu de la page Tableau de bord du Back-Office

L41 - Back-office - Tableau de bord

Pour information, voici l'URL utilisée dans le tableau de bord pour la comparaison des recherches de Framwork PHP : http://www.google.fr/trends/explore?hl=fr#q=laravel,+codeigniter,+cakephp,+symphony+2&date=1/2011+48m&cmpt=q

Catégories: Développement WEB

Commentaires: Pas de commentaires