Datastore e Drop-in Dropbox

Recentemente, Dropbox ha annunciato la sua nuova API Datastore e Drop-in, un paio di fantastiche nuove funzionalità volte a sfruttare la potenza di accesso ai file e (ora con Datastore) altre informazioni generali da qualsiasi dispositivo e mantenere tali dati sincronizzati su tutte le piattaforme, senza problemi.

datastore

Oggi, l'API di Datastore supporta solo casi d'uso per utente singolo, ma gli scenari per più utenti sono nei piani futuri per Dropbox.

Iniziamo discutendo quali sono i datastore. Puoi considerarli come un piccolo database per conservare coppie di valori chiave / valori. Ora, potresti dire che la tua applicazione potrebbe utilizzare un servizio web con un database e i tuoi dati saranno gli stessi su tutti i dispositivi, e mentre questo è vero, usando l'API Datastore, stiamo eliminando il sovraccarico di gestione di un back- fine servizio.

Con questo in mente, le applicazioni che non hanno bisogno di memorizzare una grande quantità di dati utente e non richiedono un'elaborazione pesante, possono delegare la gestione del database a Dropbox e dimenticare di gestirla manualmente. Prendi ad esempio un gioco multipiattaforma. Dovresti consentire all'utente di giocare sul proprio iPad al mattino, andare al lavoro e mentre sei nel traffico, continua a giocare sul loro iPhone. In questo scenario normalmente avresti bisogno di quell'utente per accedere al sistema, giocare, e quindi salvare i loro progressi.

Ora con l'API di Datastore puoi dimenticare l'intero processo di accesso e il sovraccarico di gestione dei dati di avanzamento, basta utilizzare l'SDK fornito e archiviare le informazioni che desideri memorizzare, più tardi quel giorno in cui l'utente apre l'applicazione da un altro Dropbox dispositivo connesso, è possibile recuperare facilmente le proprie informazioni. In questo caso, Dropbox gestisce l'archiviazione, la sicurezza e la riservatezza delle informazioni.

Sebbene, al momento, l'API Datastore supporta solo casi d'uso per utente singolo. Secondo Dropboxer Steve M., gli scenari multiutente sono nei piani futuri per Dropbox.

App TODO persistente

Se hai mai usato un framework / libreria JavaScript e hai trovato applicazioni di esempio, è probabile che in una di quelle app ci fosse una qualche applicazione TODO. Quindi, nello spirito di mantenere le cose coerenti e di dimostrare alcune delle funzionalità più comuni, costruiamo un'applicazione TODO utilizzando l'API di Dropbox Datastore.

Poiché questo è un tutorial sulle funzionalità di Dropbox offerte agli sviluppatori, non ho intenzione di spiegare l'HTML né i CSS nell'applicazione, puoi trovarli nei file che accompagnano questo tutorial.

Passaggio 1: configurazione dell'applicazione

Prima di tutto, come con la maggior parte delle API pubbliche, abbiamo bisogno di creare una nuova applicazione all'interno del sistema. Per fare ciò, accedi al tuo account Dropbox e vai alla App Console. Clicca su "Crea app", selezionare "App Dropbox API" e "Solo datastore" e infine dai un nome alla tua app.

Potresti essere tentato di selezionare "File e archivi dati", tuttavia se la tua applicazione non sta utilizzando questa autorizzazione, quando richiedi lo stato di produzione, verrà negata, aderirà alle norme di Dropbox per ogni applicazione che crei.

Ora hai una nuova applicazione in Dropbox e puoi iniziare a utilizzare l'API Datastore (e altre risorse). Per fare questo, avrai bisogno del tuo Chiave app. Se usi l'SDK JavaScript, come faremo in questo tutorial, non hai bisogno del tuo App Secret (mantenere questa stringa segreta).

Passaggio 2: aggiunta dell'SDK

Utilizzeremo l'SDK JavaScript fornito da Dropbox per interagire con l'API Datastore. Per installarlo, aggiungi semplicemente la seguente dichiarazione di script al tuo documento HTML sopra lo script per la tua applicazione.

Passaggio 3: creazione della nostra applicazione

La nostra applicazione sarà un singolo file JavaScript sotto il "js" cartella. Crea un nuovo "app.js" file con il seguente codice:

var client = new Dropbox.Client (chiave: YOUR_DROPBOX_APP_KEY), TodosApp = TodosApp || todosList: null, init: function () , checkClient: function () , createTodo: function (e) , updateTodos: function () ; $ ('document') .ready (TodosApp.init);

Ciò che fa è creare un nuovo oggetto Client Dropbox utilizzando il tasto App ottenuto dalla console dell'app. Definisce quindi il nostro oggetto applicazione e quando tutto è pronto, chiamiamo il dentro metodo.

Controllo della sessione dell'utente

La prima cosa che dovrebbe fare la nostra applicazione è controllare se abbiamo un token di accesso per l'utente della nostra applicazione. Aggiungi il seguente codice al dentro metodo:

client.authenticate (interactive: false, function (error, response) if (error) console.log ('OAuth error:' + error);); TodosApp.checkClient ();

Qui stiamo cercando di autenticare l'utente dell'app sul server dell'API Dropbox. Impostando il interattivo opzione a falso, stiamo chiedendo al metodo di non reindirizzare l'utente al sito Dropbox per l'autenticazione, in questo modo la nostra applicazione può continuare il suo flusso normale. In seguito, invieremo manualmente l'utente.

Ora dobbiamo verificare se l'utente è autenticato e, in tal caso, procedere con il caricamento dei dati. Aggiungi il seguente codice al tuo CheckClient metodo:

checkClient: function () if (client.isAuthenticated ()) $ ('# link-button') .fadeOut (); $ ('#main') .fadeIn ();  else $ ('#main') .fadeOut ();

Qui stiamo aggiornando la nostra interfaccia di conseguenza, in base al fatto che l'utente sia stato autenticato o meno.

Autenticazione dell'utente

Finora abbiamo aggiornato la nostra interfaccia dell'applicazione, se l'utente è autenticato o meno. Ora gestiremo il processo di autenticazione dell'utente nel sistema. Aggiungi il seguente codice al altro dichiarazione del CheckClient metodo:

$ ('# link-button') .click (function () client.authenticate (););

Questo è semplicemente un callback che viene chiamato quando l'utente fa clic su "Connetti Dropbox" pulsante nell'interfaccia. Si noti che non stiamo impostando il interattivo opzione questa volta, consentendo così il reindirizzamento. Se l'utente non ha effettuato l'accesso a Dropbox, verrà visualizzato un modulo di accesso e il sistema chiederà all'utente di consentire l'applicazione.

Recupero dei dati dell'utente

Una volta che l'utente ha avuto accesso all'applicazione, verrà reindirizzato a noi. In questo caso, la chiamata al IsAuthenticated il metodo restituirà true, a questo punto dobbiamo recuperare i dati memorizzati di Dropbox dell'utente. Aggiungi il seguente codice al Se dichiarazione del CheckClient metodo:

client.getDatastoreManager (). openDefaultDatastore (function (error, Datastore) if (error) console.log ('Errore datastore:' + error); todosList = Datastore.getTable ('todos'); TodosApp.updateTodos () ; Datastore.recordsChanged.addListener (TodosApp.updateTodos););

Questo metodo recupera il Datastore dell'utente autenticato e accede a Todos tavolo. Contrariamente a una tabella SQL, la struttura della tabella non deve essere definita prima dell'utilizzo, infatti la tabella non esiste nemmeno finché non aggiungiamo dati ad essa.

Ciò significa anche che la tabella può contenere tutti i dati e che un record non deve avere gli stessi dati degli altri. Tuttavia, è buona norma conservare una struttura simile, se non uguale, tra i record.

Record di rendering

A questo punto abbiamo le informazioni di todos dell'utente, tuttavia non è visualizzato all'utente. Per fare ciò, basta aggiungere il seguente codice al updateTodos metodo:

var list = $ ('#todos'), records = todosList.query (); list.empty (); per (var i = 0; i < records.length; i++ )  var record = records[i], item = list.append( $( '') .attr (' data-record-id ', record.getId ()) .append ($ ('

Questo metodo imposta semplicemente un elemento contenitore per il tag HTML che conterrà la nostra lista di tutti i tipi, quindi recupereremo i record nel nostro Todos tavolo chiamando il domanda metodo dall'API Datastore. Successivamente, cancelliamo l'elenco degli elementi e infine rendiamo ogni record sullo schermo.

Cancellare un record

Ora che abbiamo la possibilità di recuperare i TODO memorizzati dell'utente all'avvio dell'applicazione, lavoriamo sull'eliminazione di quei record. Nel nostro metodo di rendering, creeremo un X pulsante. Aggiungi il seguente codice alla fine del updateTodos metodo:

$ ('pulsante li') .click (function (e) e.preventDefault (); var id = $ (this) .parents ('li') .attr ('data-record-id'); todosList.get (id) .deleteRecord (););

In questo codice otteniamo solo il id del record da eliminare, recuperare il record effettivo chiamando il ottenere metodo, ed eliminarlo chiamando deleteRecord sull'oggetto ottenuto. Dal momento che abbiamo precedentemente impostato il recordsChanged callback, la nostra interfaccia si aggiornerà come per magia.

Aggiornamento di un record

Fin qui tutto bene, possiamo recuperare un elenco di attività dal Datastore dell'utente e possiamo cancellare un record da esso. Ora che ne dici di aggiornare un record? Per questa nuova funzione aggiungeremo la possibilità di contrassegnare un record come completato o no. Aggiungi il seguente codice alla fine del updateTodos metodo:

$ ('input li') .click (funzione (e) var el = $ (e.target), id = el.parents ('li') .attr ('data-record-id'); todosList.get (id) .set ('completato', el.is (': checked')););

Come con il metodo di cancellazione, recuperiamo il id dell'oggetto da aggiornare, recuperare l'oggetto record stesso e impostarne il relativo completato proprietà secondo il suo stato attuale.

Creare un record

Infine, dobbiamo essere in grado di creare nuovi record nel Datastore dell'utente. Per fare questo, dobbiamo reagire all'evento di sottomissione del modulo che il add-todo la forma si innescherà. Aggiungi il seguente codice alla fine del Se dichiarazione nel nostro CheckClient metodo:

$ ('# add-todo') .submit (TodosApp.createTodo);

Questo è semplicemente un ascoltatore per l'evento di invio su add-todo modulo. Ora per la creazione del record attuale. Aggiungi il seguente codice al createTodo metodo:

e.preventDefault (); todosList.insert (todo: $ ('#todo') .val (), creato: new Date (), completato: false); $ ('#todo') .val (");

Con questo, abbiamo completato la nostra applicazione di esempio. Come puoi vedere, le operazioni CRUD per i nostri dati sono diventate molto semplici e possiamo accederci su più dispositivi. Durante l'utilizzo di questo servizio, non è necessario creare un servizio di back-end completo per archiviare le informazioni dell'utente.

Datastore Extras

Come servizio extra per gli sviluppatori, Dropbox ti permette di esplorare i dati all'interno dei tuoi Datastore. Per verificarlo, vai alla console App e seleziona Cerca dati dal sottomenu, seleziona l'applicazione per la quale vuoi controllare i Datastore e ti verrà presentato un elenco delle tabelle esistenti e ogni record nella tabella.

Limiti di spazio

Durante la creazione di archivi dati, è necessario tenere conto della quantità di informazioni che si prevede di archiviare. Ogni applicazione ha fino a cinque MB per utente, da utilizzare su tutti i datastore. Finché i tuoi dati non raggiungono questo limite, Datastore non contribuirà alla quota Dropbox dell'utente. Tieni presente che tutti i dati oltre questo limite verranno conteggiati rispetto alla quota di archiviazione Dropbox dell'utente e le operazioni di scrittura potrebbero essere limitate.

Tipi di campo

I record del datastore possono essere visti come oggetti JSON, tuttavia esistono alcuni vincoli sui dati che un campo può contenere, ad esempio, anche se è possibile visualizzare un record come documento JSON, non è possibile avere documenti incorporati. I tipi di dati che è possibile memorizzare sono i seguenti:

Stringa
booleano
Numero intero - 64 bit firmati
Virgola mobile
Data - Timestamp simile a POSIX
Byte: dati binari arbitrari fino a 100 KB
Elenco

Una lista è un tipo speciale di valore che può contenere un ordinato elenco di altri valori, ma non liste stesse.

Drop-Ins

Un'altra fantastica funzionalità aggiunta a Dropbox per gli sviluppatori è l'accesso. Esistono due tipi di Drop-in, Scelta risorse e Risparmio. Con queste nuove funzionalità è possibile aggiungere il supporto all'applicazione per selezionare (per la condivisione o altri scopi) i file direttamente da Dropbox con Scelta Risorse e per memorizzare direttamente i file su Dropbox con il Risparmio..

Quindi continuando con il nostro esempio, aggiungiamo Drop-in alla nostra applicazione TODOs.

Passaggio 1: installazione

Come con l'API Datastore, abbiamo bisogno di creare un'applicazione per Dropins, andare alla console dell'app, selezionare Creare nuovo, scegliere App drop-in e dargli un nome.

Ora abbiamo una nuova applicazione, contrariamente alle applicazioni per altre API Dropbox, questa non ha bisogno di accesso alla produzione, quindi una volta che sei pronto, puoi offrirlo ai tuoi utenti senza problemi.

Ora l'unica cosa che dobbiamo fare per aggiungere il supporto Drop-in alla nostra applicazione è aggiungere l'SDK, aggiungere il seguente codice al file script dichiarazioni nel file HTML, sopra lo script per la tua applicazione:

Notare la id con un valore di dropboxjs, se rimuovi o modifichi questo, Dropbox non sarà in grado di ottenere la chiave dell'applicazione, quindi interromperà la funzionalità Drop-in.

Passaggio 2: Scelta risorse

OK, così ora abbiamo l'API Drop-in, iniziamo con il Drop-in di Scelta Risorse. Per aggiungere il Scegli dalla casella personale pulsante, utilizzare il seguente codice.

Questo genererà il pulsante per te e quando lo fai clic, si aprirà una finestra che ti permetterà di selezionare i file dal Dropbox dell'utente. Per modellare questo elemento, usa la classe dropbox_choose. Nel mio caso, lo centrerò semplicemente sullo schermo. Il data-link-type attributo specifica se il collegamento ottenuto sarà a diretto link al file (utile per il download o la visualizzazione) o l'anteprima, nel qual caso andando al link ti porterà all'interfaccia Dropbox.

Entrambi i collegamenti presentano degli svantaggi, ad esempio un collegamento diretto scadrà entro quattro ore dalla sua creazione e un collegamento di anteprima potrebbe smettere di funzionare se l'utente che detiene il file lo rimuove o lo modifica. Il tipo di collegamento di anteprima è il predefinito utilizzato dal selettore.

Lavorare con il risultato

L'aggiunta del codice sopra genererà un pulsante "Scegli da Dropbox", che quando cliccato ci mostrerà una finestra per selezionare il file desiderato. Per recuperare i file selezionati, sì, supporta più selezioni, l'applicazione deve rispondere a DbxChooseSuccess evento nell'elemento di input. Aggiungi il seguente metodo alla tua applicazione JavaScript:

listenChooser: function () document.getElementById ('dp-chooser') .addEventListener ('DbxChooserSuccess', function (e) $ ('# selected-image') .attr ('src', e.files [0] .link) .fadeIn ();, false);

Dopo aver creato il listener di eventi, devi aggiungerlo all'applicazione, nella parte inferiore del tuo dentro metodo, aggiungi la seguente riga di codice:

TodosApp.listenChooser ();

Questo evento ci fornirà un carico utile contenente, tra le altre cose, una serie di file selezionati dall'utente. In questo caso, stiamo selezionando un singolo file e aggiungendo la sua proprietà link a un tag immagine già presente nel DOM. Ogni file nell'array contiene altri campi, come la dimensione del file, il suo nome, ecc. Per un elenco completo delle proprietà in ogni file, vai alla documentazione di Drop-in di Scelta Risorse.

Passaggio 3: risparmio

Ultimo ma non meno importante, abbiamo il Saver Drop-in. Questo Drop-in consente di salvare i file direttamente nella cartella Dropbox dell'utente. Proprio come con Scelta Risorse, è necessaria un'applicazione Drop-in per utilizzare l'API. Fortunatamente, ne abbiamo già creato uno e lavorare con questo Drop-in è ancora più semplice di qualsiasi altro finora, semplicemente crea un collegamento come segue:

Il href e classe i parametri sono necessari affinché il Drop-in funzioni. Il href è il file che verrà salvato nella cartella Dropbox dell'utente e il file classe dice all'applicazione che si tratta di un drop-in di risparmio. Inoltre, puoi aggiungere un terzo parametro: data-filename che verrà utilizzato come nome user-friendly per il file da salvare. Se non ne specifichi uno, il nome verrà preso da href parametro.

Come con la Scelta Risorse, ci sono un paio di cose più avanzate che puoi fare con il Saver Drop-in, ma per un riferimento su quelli controlla la documentazione ufficiale.

Conclusione

Come puoi vedere con queste nuove funzionalità nei servizi di sviluppo Dropbox, possiamo aggiungere facilmente potenti funzionalità di archiviazione dei dati alle nostre applicazioni web e mobili. Questo ci libera dal sovraccarico della creazione di un servizio di back-end quando è richiesta una scarsa elaborazione dei dati.

Speriamo che ora ti senta a tuo agio ad aggiungere il supporto CRUD alla tua applicazione utilizzando l'API Datastore e aggiungendo le funzionalità per leggere e scrivere dagli account Dropbox dell'utente, utilizzando l'API Drop-in. Tieni presente che entrambe le API sono davvero nuove, l'API di Datastore è ancora presente Beta versione, tuttavia è possibile vedere il potenziale che rappresentano. Assicurati di controllare la documentazione ufficiale di Dropbox per ulteriori informazioni su questi e altri ottimi servizi che la piattaforma ha da offrire.

Codice