Dropbox APIs for JavaScript developers

5573f0b3cbe983ae0f2d00a2e610d6be?s=47 Leah Culver
September 18, 2014

Dropbox APIs for JavaScript developers

Nordic.js, Sept 18, 2014
http://nordicjs.com/

We live in a world where users expect their data to follow them seamlessly across devices and platforms, and developers therefore require simple APIs to enable this seamless integration. This talk will cover the range of Dropbox APIs available for JavaScript developers, from simple file uploading and downloading to more complex file system interfaces and data storage.

Find out how to do a simple upload/download Dropbox integration with just a few lines of code or how to more deeply integrate with the Dropbox file system, powered by notifications. Also learn how to use the Dropbox Datastore API, a database-like backend for your JavaScript application as demoed in the Dropbox clone of the popular game 2048.

5573f0b3cbe983ae0f2d00a2e610d6be?s=128

Leah Culver

September 18, 2014
Tweet

Transcript

  1. Dropbox APIs for JavaScript developers Leah Culver
 Nordic.js September 2014

  2. Dropbox “Your [digital] stuff everywhere”

  3. Files

  4. Data

  5. Files Drop-ins
 (simple) Core (powerful) Sync (mobile)

  6. Drop-ins Just a few lines of code • Choose a

    file from Dropbox • JavaScript, iOS, Android • Save a file to Dropbox • JavaScript Chooser Saver
  7. <script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" type="text/javascript" data-app-key="APP_KEY"></script> Drop-ins

  8. Chooser demo

  9. None
  10. var button = Dropbox.createChooseButton(options); document.getElementById("container").appendChild(button); Chooser

  11. var options = { success: function(files) { alert("Here's the file

    link: " + files[0].link) }, cancel: function() {}, linkType: "preview", // or “direct" multiselect: false, // or true extensions: [“.jpg”, “.png”], } Chooser options
  12. Chooser result file = { name: "filename.txt", link: "https://...", bytes:

    464, icon: "https://...", thumbnailLink: "https://...?bounding_box=75&mode=fit", }
  13. Saver demo

  14. None
  15. <a href="FILE_URL" class="dropbox-saver"></a> Saver

  16. var button = Dropbox.createSaveButton(options); document.getElementById("container").appendChild(button); Saver

  17. Saver options var options = { files: [ // Up

    to 100 files [“url":"…", "filename":"…"}; ], success: function() {}, cancel: function() {}, error: function(errorMessage) {}, // Called periodically, between 0 and 1 progress: function(progress) {}, }
  18. Saver caching • Download unique files once • HTTP headers

    to determine freshness • Cache-Control and Expires
  19. Drop-ins Supported browsers • Chrome • Firefox • Safari •

    Internet Explorer 8+ • Safari • Android browser • Chrome on Android Desktop Mobile
  20. Core API

  21. Core API • REST-ish, OAuth 2.0, JSON • SDKs for

    Python, Ruby, PHP, Java, Android, iOS, OSX • Community-supported libraries for JavaScript, C#, Perl, and more HTTP API for files
  22. • List files
 /metadata/<root>/<path> • Upload file
 /files_put/<root>/<path> • Get

    a thumbnail
 /thumbnails/<root>/<path> • Share via a link
 /shares/<root>/<path> Core API
  23. Files are great. So what now?

  24. Datastore API Structured data

  25. Datastore API Structured data • Like a no-SQL database •

    JavaScript, iOS, OSX, Android, Python • Stored in user’s Dropbox
  26. Datastore API account → datastore → table → record →

    field → value
  27. • Notifications of changes • Updates in real time Datastore

    API
  28. Just launched! Shared datastores

  29. Datastore Demo Lists

  30. None
  31. var client = new Dropbox.Client({ key: ‘APP_KEY' }); client.authenticate(updateAuthenticationStatus); !

    function updateAuthenticationStatus(err, client) { var datastoreManager = client.getDatastoreManager(); … } Setup and auth
  32. // Create a datastore datastoreManager.createDatastore(function(err, ds){ … }); // Open

    existing datastore datastoreManager.openDatastore(dsid, function(err, ds) { … }); // Delete a datastore datastoreManager.deleteDatastore(dsid, function(){ … }); Datastore manager actions
  33. Listen for changes // Datastores changed datastoreManager.datastoreListChanged.addListener(function(e){ // DatastoreInfo objects

    for all datastores var infos = e.getDatastoreInfos(); … }); ! // Records changed in a single datastore datastore.recordsChanged.addListener(function(e){ … });
  34. Source code github.com/dropbox/Lists-js

  35. Dropbox APIs for JavaScript Drop-ins Core API Datastore API

  36. More dropbox.com/developers

  37. Photos https://www.flickr.com/photos/10509890@N05/4404748689/ https://www.flickr.com/photos/mujitra/14019699087/ https://www.flickr.com/photos/stephanieasher/131012025/ http://www.flickr.com/photos/aliaholle/5888906660/ https://www.flickr.com/photos/jcherfas/309721036/ https://www.flickr.com/photos/drurydrama/10403531196/ https://www.flickr.com/photos/asalexander/3176093015/ https://www.flickr.com/photos/roome/290072931/ https://www.flickr.com/photos/tambako/3129100592/

    https://www.flickr.com/photos/picdrop/2809262/ https://www.flickr.com/photos/enggul/2384977639