Dropbox Datastores et Drop-Ins

Dropbox a récemment annoncé la mise en place de sa nouvelle API Datastore et de ses Drop-ins, deux nouvelles fonctionnalités destinées à exploiter au mieux la puissance d'accès aux fichiers et (désormais avec Datastores) d'autres informations générales issues de tout appareil et de synchroniser ces données sur toutes les plates-formes..

Magasins de données

Aujourd'hui, l'API Datastore ne prend en charge que les cas d'utilisation pour un utilisateur unique, mais des scénarios pour plusieurs utilisateurs sont dans les plans futurs de Dropbox..

Commençons par discuter de ce que sont les magasins de données. Vous pouvez les considérer comme une petite base de données pour conserver des paires d'informations clé / valeur. Vous pouvez maintenant dire que votre application peut utiliser un service Web avec une base de données et que vos données seront les mêmes sur tous les périphériques. Bien que cela soit vrai, en utilisant l'API Datastore, nous évitons la surcharge liée à la gestion d'une service final.

Dans cet esprit, les applications qui n'ont pas besoin de stocker une grande quantité de données utilisateur et qui ne nécessitent pas un traitement lourd, peuvent déléguer la gestion de la base de données à Dropbox et oublier de la gérer manuellement. Prenons par exemple un jeu multi-plateforme. Vous voudriez permettre à l'utilisateur de le jouer sur son iPad le matin, au travail, et dans le trafic, de continuer à jouer sur son iPhone. Dans ce scénario, cet utilisateur doit normalement se connecter au système, jouer, puis enregistrer sa progression..

Désormais, avec l’API Datastore, vous pouvez oublier le processus de connexion complet et les frais généraux liés au traitement des données de progression. Il vous suffit d’utiliser le SDK fourni et de stocker les informations que vous souhaitez stocker plus tard dans la journée lorsque votre utilisateur ouvre votre application depuis une autre Dropbox. appareil connecté, vous pouvez facilement récupérer leurs informations. Dans ce cas, Dropbox gère le stockage, la sécurité et la confidentialité des informations..

Bien que, pour l’instant, l’API Datastore ne prend en charge que les cas d’utilisation mono-utilisateur. Selon Dropboxer Steve M., des scénarios multi-utilisateurs sont dans les plans futurs de Dropbox.

Application persistante TODOs

Si vous avez déjà utilisé un framework / une bibliothèque JavaScript et rencontré des exemples d'applications, il y a de fortes chances que l'une de ces applications contienne une application TODO. Ainsi, dans un souci de cohérence et de démonstration des fonctionnalités les plus courantes, construisons une application TODO à l'aide de l'API Dropbox Datastore..

Comme il s’agit d’un tutoriel sur les fonctionnalités de Dropbox offertes aux développeurs, je ne vais pas expliquer le code HTML ni le CSS dans l’application, vous pouvez les trouver dans les fichiers accompagnant ce tutoriel..

Étape 1 - Configuration de l'application

Tout d'abord, comme avec la plupart des API publiques, nous devons créer une nouvelle application dans le système. Pour ce faire, connectez-vous à votre compte Dropbox et dirigez-vous vers la console d'applications. Cliquer sur "Créer une application", sélectionner "Application API Dropbox" et "Datastores seulement" et enfin donner un nom à votre application.

Vous pourriez être tenté de choisir "Fichiers et magasins de données", Toutefois, si votre application n'utilise pas réellement cette autorisation, lorsque vous demandez le statut de production, elle sera refusée. Adhérez aux stratégies Dropbox pour chaque application créée..

Vous avez maintenant une nouvelle application dans Dropbox et vous pouvez commencer à utiliser l’API Datastore (et d’autres ressources). Pour ce faire, vous aurez besoin de votre Clé d'application. Si vous utilisez le SDK JavaScript, comme nous le verrons dans ce tutoriel, vous n’avez pas besoin de votre App Secret (garder cette chaîne secrète).

Étape 2 - Ajout du SDK

Nous allons utiliser le SDK JavaScript fourni par Dropbox pour interagir avec l'API Datastore. Pour l'installer, ajoutez simplement la déclaration de script suivante à votre document HTML au dessus de le script de votre application.

Étape 3 - Création de notre application

Notre application sera un fichier JavaScript unique sous le "js" dossier. Créer un nouveau "app.js" fichier avec le code suivant:

var client = new Dropbox.Client (clé: YOUR_DROPBOX_APP_KEY), TodosApp = TodosApp || todosList: null, init: function () , checkClient: function () , createTodo: function (e) , updateTodos: function () ; $ ('document') .ready (TodosApp.init);

Cela crée un nouvel objet Client Dropbox à l'aide de la clé d'application obtenue à partir de la console d'application. Il définit ensuite notre objet d’application et lorsque tout est prêt, nous appelons le init méthode.

Vérification de la session de l'utilisateur

La première chose que notre application devrait faire est de vérifier si nous avons un jeton d'accès pour l'utilisateur de notre application. Ajoutez le code suivant au init méthode:

client.authenticate (interactive: false, fonction (erreur, réponse) if (erreur) console.log ('erreur OAuth:' + erreur);); TodosApp.checkClient ();

Ici, nous essayons d'authentifier l'utilisateur de l'application auprès du serveur d'API Dropbox. En mettant le interactif option de faux, nous demandons à la méthode de ne pas rediriger l'utilisateur vers le site Dropbox pour l'authentification, afin que notre application puisse continuer son flux normal. Nous allons envoyer manuellement l'utilisateur plus tard.

Nous devons maintenant vérifier si l'utilisateur est authentifié et, le cas échéant, charger ses données. Ajoutez le code suivant à votre checkClient méthode:

checkClient: function () if (client.isAuthenticated ()) $ ('# lien-bouton') .fadeOut (); $ ('#main') .fadeIn ();  else $ ('#main') .fadeOut ();

Ici, nous mettons à jour notre interface en conséquence, selon que l'utilisateur est authentifié ou non..

Authentification de l'utilisateur

Jusqu'à présent, notre interface d'application est mise à jour en conséquence, si l'utilisateur est authentifié ou non. Nous allons maintenant gérer le processus d’authentification de l’utilisateur dans le système. Ajoutez le code suivant au autre déclaration du checkClient méthode:

$ ('# link-button') .click (function () client.authenticate (););

Il s’agit simplement d’un rappel qui est appelé lorsque l’utilisateur clique sur le bouton "Connecter Dropbox" bouton dans l'interface. Notez que nous ne mettons pas la interactif option cette fois, permettant ainsi la redirection. Si l'utilisateur n'est pas connecté à Dropbox, un formulaire de connexion s'affiche et le système demande à l'utilisateur d'autoriser l'application..

Récupération des données utilisateur

Une fois que l'utilisateur a été autorisé à accéder à l'application, il sera redirigé vers nous. Dans ce cas, l'appel du est authentifié méthode retournera true, à ce stade, nous devons récupérer les données stockées par Dropbox de l'utilisateur. Ajoutez le code suivant au si déclaration du checkClient méthode:

client.getDatastoreManager (). openDefaultDatastore (function (error, Datastore) if (error) console.log ('Erreur datastore:' + error); todosList = Datastore.getTable ('todos'); TodosApp.updateTodos () ; Datastore.recordsChanged.addListener (TodosApp.updateTodos););

Cette méthode récupère le magasin de données de l'utilisateur authentifié et accède au todos table. Contrairement à une table SQL, il n'est pas nécessaire de définir la structure de la table avant son utilisation. En fait, la table n'existe même pas avant que nous y ajoutions des données..

Cela signifie également que la table peut contenir toutes les données et qu'un enregistrement ne doit pas nécessairement contenir les mêmes données que les autres. Cependant, il est recommandé de conserver une structure similaire, sinon identique, entre les enregistrements..

Rendu des disques

À ce stade, nous avons les informations de l'utilisateur, mais elles ne sont pas affichées à l'utilisateur. Pour ce faire, ajoutez simplement le code suivant à la updateTodos méthode:

var liste = $ ('#todos'), records = todosList.query (); list.empty (); pour (var i = 0; i < records.length; i++ )  var record = records[i], item = list.append( $( '') .attr (' id-enregistrement-données ', record.getId ()) .append ($ ('

Cette méthode définit simplement un élément conteneur pour la balise HTML qui contiendra notre liste de tâches, puis nous récupérons les enregistrements dans notre todos table en appelant le question méthode de l'API Datastore. Ensuite, nous effaçons la liste des éléments et nous affichons enfin chaque enregistrement à l'écran..

Suppression d'un enregistrement

Maintenant que nous avons la possibilité de récupérer les TODO stockés par l'utilisateur au démarrage de l'application, travaillons à la suppression de ces enregistrements. Dans notre méthode de rendu, nous allons créer un X bouton. Ajoutez le code suivant au bas de la updateTodos méthode:

$ ('li button') .click (fonction (e) e.preventDefault (); var id = $ (this) .parents ('li') .attr ('data-record-id'); todosList.get (id) .deleteRecord (););

Dans ce code, nous obtenons simplement le identifiant de l’enregistrement à supprimer, récupérez l’enregistrement en appelant le obtenir méthode et supprimez-la en appelant deleteRecord sur l'objet obtenu. Depuis que nous avons précédemment défini le recordsChanged callback, notre interface se mettra à jour comme par magie.

Mise à jour d'un enregistrement

Jusqu'ici tout va bien, nous pouvons récupérer une liste de tâches à partir du magasin de données de l'utilisateur et supprimer un enregistrement de celui-ci. Maintenant, que diriez-vous de mettre à jour un enregistrement? Pour cette nouvelle fonctionnalité, nous allons ajouter la possibilité de marquer un enregistrement comme terminé ou pas. Ajoutez le code suivant au bas de la updateTodos méthode:

$ ('li input') .click (fonction (e) var el = $ (e.target), id = el.parents ('li') .attr ('data-record-id'); todosList.get (id) .set ('complete', el.is (': vérifié')););

Comme avec la méthode delete, nous récupérons le identifiant de l'objet à mettre à jour, récupérer l'objet d'enregistrement lui-même et définir sa terminé propriété en fonction de son état actuel.

Créer un enregistrement

Enfin, nous devons pouvoir créer de nouveaux enregistrements dans le magasin de données de l'utilisateur. Pour ce faire, nous devons réagir à l’événement de soumission de formulaire que le ajouter-todo la forme va se déclencher. Ajoutez le code suivant au bas de la si déclaration dans notre checkClient méthode:

$ ('# add-todo') .submit (TodosApp.createTodo);

C’est simplement un auditeur pour l’événement submit sur le ajouter-todo forme. Passons maintenant à la création d’un enregistrement. Ajoutez le code suivant au createTodo méthode:

e.preventDefault (); todosList.insert (todo: $ ('#todo') .val (), créé: new Date (), complété: false); $ ('#todo') .val (");

Avec cela, nous avons complété notre exemple d'application. Comme vous pouvez le constater, les opérations CRUD pour nos données sont devenues très simples et nous pouvons y accéder sur plusieurs appareils. Lors de l'utilisation de ce service, nous n'avons pas besoin de créer un service principal complet pour stocker les informations de l'utilisateur..

Extras de magasin de données

En tant que service supplémentaire destiné aux développeurs, Dropbox vous permet d'explorer les données contenues dans vos magasins de données. Pour ce faire, accédez à la console de l'application et sélectionnez Parcourir les fichiers de données dans le sous-menu, sélectionnez l'application pour laquelle vous souhaitez consulter les magasins de données. Une liste des tables existantes et chaque enregistrement de la table s'afficheront..

Limites d'espace

Lors de la création de magasins de données, vous devez prendre en compte la quantité d'informations que vous prévoyez de stocker. Chaque application possède jusqu'à cinq Mo par utilisateur, à utiliser dans tous les magasins de données. Tant que vos données n'atteignent pas cette limite, le magasin de données ne contribuera pas au quota Dropbox de l'utilisateur. N'oubliez pas que toutes les données dépassant cette limite sont prises en compte dans le quota de stockage Dropbox de l'utilisateur et que les opérations d'écriture peuvent être limitées..

Types de champs

Les enregistrements de banque de données peuvent être vus comme des objets JSON. Toutefois, certaines contraintes relatives aux données qu'un champ peut contenir, par exemple, même si vous pouvez voir un enregistrement sous forme de document JSON, vous ne pouvez pas avoir de documents incorporés. Les types de données que vous pouvez stocker sont les suivants:

Chaîne
Booléen
Entier - 64 bits signés
Point flottant
Date - horodatage de type POSIX
Octets - Données binaires arbitraires jusqu'à 100 Ko
liste

Une liste est un type spécial de valeur pouvant contenir un commandé liste d'autres valeurs, mais pas les listes elles-mêmes.

Drop-Ins

Drop-ins est une autre fonctionnalité intéressante ajoutée à Dropbox pour les développeurs. Il existe deux types de Drop-ins, le sélecteur et l’économiseur. Avec ces nouvelles fonctionnalités, vous pouvez ajouter un support à votre application pour sélectionner (pour le partage ou autre chose) des fichiers directement à partir de Dropbox avec le Sélecteur et pour stocker directement des fichiers dans Dropbox avec le logiciel de sauvegarde.

Donc, continuons avec notre exemple, ajoutons des Drop-ins à notre application TODOs.

Étape 1 - Configuration

Comme avec l’API Datastore, nous devons créer une application pour Dropins, allez à la console d’application, sélectionnez Créer un nouveau, choisir App Drop-in et lui donner un nom.

Maintenant, nous avons une nouvelle application, contrairement aux applications des autres API Dropbox, celle-ci n’a pas besoin d’accès à la production. Ainsi, une fois que vous êtes prêt, vous pouvez l’offrir à vos utilisateurs sans tracas..

Maintenant, la seule chose que nous devons faire pour ajouter le support Drop-ins à notre application est d'ajouter le SDK, d'ajouter le code suivant à la liste. des scripts déclarations dans le fichier HTML, au dessus de le script de votre application:

Noter la identifiant avec une valeur de dropboxjs, si vous supprimez ou modifiez cela, Dropbox ne pourra pas obtenir votre clé d'application, ce qui briserait la fonctionnalité Drop-in..

Étape 2 - Sélecteur

OK, nous avons maintenant l'API Drop-ins en place. Commençons par le menu déroulant Sélecteur. Pour ajouter le Choisissez parmi les boîtes de dépôt bouton, utilisez le code suivant.

Cela générera le bouton pour vous et lorsque vous cliquez dessus, il ouvrira une fenêtre vous permettant de sélectionner des fichiers dans la Dropbox de l'utilisateur. Pour styler cet élément, utilisez la classe dropbox_choose. Dans mon cas, je vais simplement le centrer sur l'écran. le type de liaison de données attribut spécifie si le lien obtenu sera un direct lien vers le fichier (utile pour le téléchargement ou l'affichage) ou aperçu, auquel cas, le lien vous mènera à l'interface Dropbox.

Les deux liens ont des inconvénients: par exemple, un lien direct expirera dans les quatre heures suivant sa création et un lien de prévisualisation peut cesser de fonctionner si l'utilisateur propriétaire du fichier le supprime ou le modifie. Le type de lien de prévisualisation est la valeur par défaut utilisée par le sélecteur..

Travailler avec le résultat

L'ajout du code ci-dessus générera un bouton "Choose from Dropbox" (Choisir dans une boîte de dialogue) qui, une fois cliqué dessus, affichera une fenêtre permettant de sélectionner le fichier souhaité. Pour récupérer le (s) fichier (s) sélectionné (s), si elle prend en charge la sélection multiple, votre application doit répondre à la DbxChooseSuccess événement dans l'élément d'entrée. Ajoutez la méthode suivante à votre application JavaScript:

listenChooser: function () document.getElementById ('dp-chooser') .addEventListener ('DbxChooserSuccess', function (e) $ ('# image-sélectionnée') .attr ('src', e.files [0] .link) .fadeIn ();, false);

Après avoir créé l’écouteur d’événements, vous devez l’ajouter à l’application, au bas de votre écran. init méthode, ajoutez la ligne de code suivante:

TodosApp.listenChooser ();

Cet événement nous donnera une charge utile contenant, entre autres choses, un tableau de fichiers sélectionnés par l'utilisateur. Dans ce cas, nous sélectionnons un seul fichier et ajoutons sa propriété link à une balise image déjà présente dans le DOM. Chaque fichier du tableau contient d'autres champs, tels que la taille du fichier, son nom, etc. Pour obtenir la liste complète des propriétés de chaque fichier, reportez-vous à la documentation du Sélecteur..

Étape 3 - Economiseur

Dernier point mais non le moindre, nous avons le Saver Drop-in. Cette Drop-in vous permet d’enregistrer des fichiers directement dans le dossier Dropbox de l’utilisateur. Tout comme avec le sélecteur, vous avez besoin d'une application Drop-in pour utiliser l'API. Heureusement, nous en avons déjà créé un et travailler avec cette Drop-in est encore plus facile que tout le reste, créez simplement un lien comme suit:

le href et classe des paramètres sont requis pour que le système Drop-in fonctionne. le href est le fichier qui sera enregistré dans le dossier Dropbox de l'utilisateur, et le classe indique à l'application qu'il s'agit d'un point d'écoute Saver. De plus, vous pouvez ajouter un troisième paramètre: nom de fichier qui sera utilisé comme nom convivial pour le fichier à enregistrer. Si vous n'en spécifiez pas, le nom sera pris à partir du href paramètre.

Comme avec le sélecteur, vous pouvez faire quelques choses plus avancées avec Saver Drop-in, mais pour plus de détails, consultez la documentation officielle..

Conclusion

Comme vous pouvez le constater avec ces nouvelles fonctionnalités dans les services de développement Dropbox, nous pouvons facilement ajouter de puissantes capacités de stockage de données à nos applications Web et mobiles. Cela nous évite d'avoir à créer un service d'arrière-plan lorsque peu de traitement de données est nécessaire.

J'espère que maintenant vous vous sentirez à l'aise pour ajouter le support CRUD à votre application à l'aide de l'API Datastore et pour ajouter les fonctionnalités de lecture et d'écriture à partir des comptes Dropbox de votre utilisateur, à l'aide de l'API Drop-ins. Veuillez noter que les deux API sont vraiment nouvelles, que l’API Datastore est toujours en cours. Bêta version, mais vous pouvez voir le potentiel qu’elles représentent. Assurez-vous de consulter la documentation officielle de Dropbox pour plus d’informations sur ces services et d’autres excellents services proposés par la plate-forme..

Code