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
   

   View Slide

2. Dropbox
   “Your [digital] stuff everywhere”
   

   View Slide

3. Files
   

   View Slide

4. Data
   

   View Slide

5. Files
   Drop-ins

   (simple)
   Core
   (powerful)
   Sync
   (mobile)
   

   View Slide

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
   

   View Slide

7. id="dropboxjs" type="text/javascript"
   data-app-key="APP_KEY">
   Drop-ins
   

   View Slide

8. Chooser demo
   

   View Slide

9. View Slide

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

    View Slide

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
    

    View Slide

12. Chooser result
    file = {
    name: "filename.txt",
    link: "https://...",
    bytes: 464,
    icon: "https://...",
    thumbnailLink: "https://...?bounding_box=75&mode=fit",
    }
    

    View Slide

13. Saver demo
    

    View Slide

14. View Slide

15. 
    Saver
    

    View Slide

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

    View Slide

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) {},
    }
    

    View Slide

18. Saver caching
    • Download unique files once
    • HTTP headers to determine freshness
    • Cache-Control and Expires
    

    View Slide

19. Drop-ins
    Supported browsers
    • Chrome
    • Firefox
    • Safari
    • Internet Explorer 8+
    • Safari
    • Android browser
    • Chrome on Android
    Desktop Mobile
    

    View Slide

20. Core API
    

    View Slide

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
    

    View Slide

22. • List files

    /metadata//
    
    • Upload file

    /files_put//
    
    • Get a thumbnail

    /thumbnails//
    
    • Share via a link

    /shares//
    Core API
    

    View Slide

23. Files are great. So what now?
    

    View Slide

24. Datastore API
    Structured data
    

    View Slide

25. Datastore API
    Structured data
    • Like a no-SQL database
    • JavaScript, iOS, OSX, Android, Python
    • Stored in user’s Dropbox
    

    View Slide

26. Datastore API
    account → datastore → table → record → field → value
    

    View Slide

27. • Notifications of changes
    • Updates in real time
    Datastore API
    

    View Slide

28. Just launched!
    Shared datastores
    

    View Slide

29. Datastore Demo
    Lists
    

    View Slide

30. View Slide

31. var client = new Dropbox.Client({ key: ‘APP_KEY' });
    client.authenticate(updateAuthenticationStatus);
    !
    function updateAuthenticationStatus(err, client) {
    var datastoreManager = client.getDatastoreManager();
    …
    }
    Setup and auth
    

    View Slide

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
    

    View Slide

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){
    …
    });
    

    View Slide

34. Source code
    github.com/dropbox/Lists-js
    

    View Slide

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

    View Slide

36. More
    dropbox.com/developers
    

    View Slide

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
    

    View Slide