Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dropbox APIs for JavaScript developers

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.

Leah Culver

September 18, 2014
Tweet

More Decks by Leah Culver

Other Decks in Programming

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/[email protected]/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