Dropbox

Save sensor values to dropbox

How it works

Dropbox is webservice that sync folders of computer and also save it on cloud.
Dropbox provide JavaScript SDK.
With obniz, Users can save temperature values to dropbox, save photo taken by a camera connected to an obniz is easy task.

Include external JavaScript

Dropbox SDK is
https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js
The js file appear when we click it.

Simply, we can copy and paste JavaScript file of dropbox to HTML.
But browser can include js file from the internet by adding

<script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>

It's easy. Now we can use dropbox on HTML.
Don't add code which use dropbox above this script tag.
AFTER this tag, dropbox is available.
So, this is good.

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.2.0/obniz.js"></script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    // use dropbox here
  }
</script>
</body>
</html>

And this never work.

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    // NG. 
    // you can't use dropbox here
  }
</script>
<script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</body>
</html>

Dropbox api

Let's use dropbox.
We are going to save the time when someone pressed the button.
First, conenct a button to obniz io 0,1. and handle it.

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");

  obniz.onconnect = async function () {
    var button = obniz.wired("Button",  {signal:0, gnd:1});
    button.onchange = function(pressed){
      if (pressed) {
        // when pressed 
      }
    };
  }
</script>
</body>
</html>

And save the time when pressed.

dropbox Documents available here
http://dropbox.github.io/dropbox-sdk-js/
But First, you should generate access key to access your dropbox account.

Generate AccessToken

Generate it on dropbox.
Login and Open AppConsole
https://www.dropbox.com/developers/apps
You can see "CreateApp" button, Presse it to create new app.

You will be asked questions below. Choose

  • Kind. Not Business. Choose DropboxAPI
  • Limited within App Folder or Full Access. Now choose App Folder limited.

And others are as you wish.
Then create.

You will be on AppConsole.
"Generate" button" should be on "Generated access token" section.
Press it and you get long alphabet accessToken.
This is the key to access your dropbox.

Code it

OK, Let's program

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>
<div id="text"></div>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");

  obniz.onconnect = async function () {
    var dbx = new Dropbox.Dropbox({ accessToken: '<YOUR ACCESS TOKEN HERE>' });
    var button = obniz.wired("Button",  {signal:0, gnd:1});
    button.onchange = function(pressed){
      if (pressed) {
      dbx.filesUpload({path: '/obniz.txt', contents: "[Button Pressed]\n" + new Date(), mode: 'overwrite' })
        .catch(function(error) {
          alert(error);
        });
      }
    };
  }
</script>
</body>
</html>

Replace OBNIZ_ID_HERE to your obniz id.
And <YOUR ACCESS TOKEN HERE> to your accessToken generated.

Press the button. You can see the file named "obniz.txt" on your folder Dropbox>App>Appname_you_defined
It contains timestamp.

In the program

dbx.filesUpload({path: '/obniz.txt', contents: "[Button Pressed]\n" + new Date(), mode: 'overwrite' })

This is uploading part.
dpx is SDK which has accessToken.
path define the file and contents is file itself and mode defines file will be overwritten.

Easy!

This is simple example. You can read a file and get a file list with dropbox SDK.
Document below.

http://dropbox.github.io/dropbox-sdk-js/Dropbox.html

And they provide examples.

https://github.com/dropbox/dropbox-sdk-js/tree/master/examples/javascript



Next : Download from Dropbox