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.

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
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
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
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