Dropbox Datastores og Drop-Ins

Nylig har Dropbox kunngjort sin nye Datastore API og Drop-ins, et par flotte nye funksjoner som har til hensikt å utnytte kraften til å få tilgang til filer og (nå med Datastores) annen generell informasjon fra en hvilken som helst enhet og holde dataene synkronisert på alle plattformer, smertefritt.

datalagre

I dag støtter Datastore API bare engangsbruk, men multi-user scenarier er i fremtidige planer for Dropbox.

La oss begynne med å diskutere hvilke datastore. Du kan tenke på dem som en liten database for å holde nøkkel / verdier par av informasjon. Nå kan du si at søknaden din kan bruke en webtjeneste med en database, og dataene dine vil være de samme på alle enheter, og mens dette er sant, bruker vi Datastore API, og tar bort overhead for å håndtere en back- slutt service.

Med dette i bakhodet, programmer som ikke trenger å lagre en stor mengde brukerdata og ikke krever tung behandling, kan delegere databasestyringen til Dropbox og glemme å håndtere det manuelt. Ta for eksempel et multi-plattformspill. Du vil gjerne tillate brukeren å spille den på iPad om morgenen, gå til jobb og i trafikken, fortsett å spille på iPhone. I dette scenariet vil du normalt ha den brukeren til å logge inn på systemet, spille, og deretter lagre deres fremgang.

Nå med Datastore API kan du glemme hele innloggingsprosessen og overhead for å håndtere fremdriftsdataene, du bruker bare den medfølgende SDK og lagrer informasjonen du vil lagre, senere den dagen når brukeren åpner programmet fra en annen Dropbox tilkoblet enhet, kan du enkelt hente informasjonen. I dette tilfellet håndterer Dropbox lagringen, sikkerheten og personvernet til informasjonen.

Selv om Datastore API bare støtter brukerbruker-saken, gjelder det nå. Ifølge Dropboxer Steve M. er multi-user scenarier i fremtidige planer for Dropbox.

Vedvarende TODOs App

Hvis du noen gang har brukt et JavaScript-rammeverk / bibliotek og kom over eksempelprogrammer, er det sjansene for at i en av disse appene var det en TODO-app av noe slag. Så, i en ånd for å holde ting konsekvent og å demonstrere noen av de vanligste funksjonene, la oss bygge en TODO-app ved hjelp av Dropbox Datastore API.

Siden dette er en veiledning om Dropbox-funksjonalitetene som tilbys til utviklere, skal jeg ikke forklare HTML eller CSS i programmet, du finner dem i filene som følger med denne opplæringen.

Trinn 1 - Sette opp applikasjonen

Først og fremst, som med de fleste offentlige APIer, må vi opprette en ny applikasjon i systemet. For å gjøre dette, logg inn på Dropbox-kontoen din og gå til App Console. Klikk på "Opprett app", å velge "Dropbox API-app" og "Bare datastore" og til slutt gi appen ditt et navn.

Du kan bli fristet til å velge "Filer og datastore", men hvis søknaden din ikke bruker denne tillatelsen, vil du bli nektet, når du ber om produksjonsstatus, i henhold til Dropbox-retningslinjene for hvert program du lager.

Nå har du en ny applikasjon i Dropbox, og du kan begynne å bruke Datastore API (og andre ressurser). For å gjøre dette, trenger du din App-nøkkel. Hvis du bruker JavaScript SDK, som vi vil i denne opplæringen, trenger du ikke din App Secret (hold denne strengen hemmelig).

Trinn 2 - Legge til SDK

Vi skal bruke JavaScript SDK levert av Dropbox for å samhandle med Datastore API. For å installere det, må du bare legge til følgende skriftdeklarasjon til HTML-dokumentet ovenfor Skriptet for søknaden din.

Trinn 3 - Opprette vår applikasjon

Vår søknad vil være en enkelt JavaScript-fil under "js" mappe. Lage en ny "app.js" fil med følgende kode:

var klient = ny Dropbox.Client (nøkkel: YOUR_DROPBOX_APP_KEY), TodosApp = TodosApp || todosList: null, init: function () , checkClient: function () , createTodo: funksjon (e) , updateTodos: function () ; $ ('dokument') .ready (TodosApp.init);

Hva dette gjør er å opprette et nytt Dropbox-klientobjekt ved hjelp av App-nøkkelen hentet fra appkonsollen. Det definerer deretter vårt programobjekt og når alt er klart, kaller vi i det metode.

Kontrollerer brukerens økt

Det første som søknaden vår bør gjøre, er å se om vi har et tilgangstoken for brukeren av vår søknad. Legg til følgende kode i i det metode:

client.authenticate (interactive: false, funksjon (feil, svar) if (error) console.log ('OAuth error:' + error);); TodosApp.checkClient ();

Her prøver vi å autentisere appens bruker til Dropbox API-serveren. Ved å sette inn interaktiv alternativ til falsk, Vi spør metoden om ikke å omdirigere brukeren til Dropbox-siden for godkjenning, slik at applikasjonen vår kan fortsette sin normale strømning. Vi skal manuelt sende brukeren det senere.

Nå må vi sjekke om brukeren er autentisert, og i så fall fortsett å laste inn dataene sine. Legg til følgende kode i din checkClient metode:

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

Her oppdaterer vi grensesnittet vårt tilsvarende, basert på om brukeren har blitt godkjent eller ikke.

Godkjenning av brukeren

Så langt har vi vårt programgrensesnitt oppdatert tilsvarende, dersom brukeren er autentisert eller ikke. Nå skal vi håndtere prosessen med å autentisere brukeren i systemet. Legg til følgende kode i ellers uttalelse av checkClient metode:

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

Dette er bare en tilbakeringing som kalles når brukeren klikker på "Koble til Dropbox" knappen i grensesnittet. Legg merke til at vi ikke setter inn interaktiv alternativ denne gangen, og dermed tillate omdirigering. Hvis brukeren ikke er logget inn i Dropbox, vil et innloggingsskjema bli vist, og systemet vil be brukeren om å tillate applikasjonen.

Henter brukerdata

Når brukeren har fått tilgang til søknaden, vil den omdirigere tilbake til oss. I dette tilfellet er anropet til isAuthenticated Metoden kommer tilbake sann, på dette tidspunktet må vi hente brukerens Dropbox lagrede data. Legg til følgende kode i hvis uttalelse av checkClient metode:

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

Denne metoden henter den godkjente brukerens Datastore og får tilgang til todos bord. I motsetning til et SQL-tabell, må tabellstrukturen ikke defineres før bruk, faktisk eksisterer tabellen ikke en gang før vi legger til data for det.

Hva dette også betyr er at tabellen kan inneholde data, og en post trenger ikke å ha de samme dataene som de andre. Det er imidlertid en god praksis å bevare en lignende, om ikke lik struktur, blant poster.

Rendering Records

På dette tidspunktet har vi brukerens todosinformasjon, men det vises ikke til brukeren. For å gjøre dette, bare legg til følgende kode til updateTodos metode:

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

Denne metoden angir ganske enkelt et beholderelement for HTML-taggen som inneholder vår liste over todos, så henter vi postene i vår todos bord ved å ringe spørsmål metode fra Datastore API. Deretter tømmer vi listen over elementer og til slutt lagrer vi alle poster til skjermen.

Sletter en post

Nå som vi har muligheten til å hente brukerens lagrede TODOer ved programstart, la oss jobbe med å slette disse postene. I vår gjengivelsesmetode lager vi en X knapp. Legg til følgende kode nederst på siden updateTodos metode:

$ ('li-knappen') .click (funksjon (e) e.preventDefault (); var id = $ (dette) .parents ('li') .attr ('data-record-id'); todosList.get (id) .deleteRecord (););

I denne koden får vi bare id av posten for å slette, hent den aktuelle posten ved å ringe få metode, og slett den ved å ringe deleteRecord på det oppnådde objektet. Siden vi tidligere satte inn recordsChanged tilbakeringing, vårt grensesnitt vil oppdatere som magi.

Oppdaterer en post

Så langt så bra kan vi hente en liste over oppgaver fra brukerens Datastore, og vi kan slette en post fra den. Nå, hva med å oppdatere en plate? For denne nye funksjonen skal vi legge til i muligheten til å markere en post som fullført eller ikke. Legg til følgende kode nederst på siden updateTodos metode:

$ ('li input') .click (funksjon (e) var el = $ (e.target), id = el.parents ('li') .attr ('data-record-id'); todosList.get (id) .sett ('fullført', el.is (': merket')););

Som med slettemetoden, henter vi id av objektet for å oppdatere, hente oppføringsobjektet selv og sett det fullført eiendom i henhold til gjeldende tilstand.

Opprette en post

Til slutt må vi kunne opprette nye poster i brukerens Datastore. For å gjøre dette må vi reagere på skjemainnleveringshendelsen at add-todo skjemaet vil utløse. Legg til følgende kode nederst på siden hvis uttalelse i vår checkClient metode:

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

Dette er rett og slett en lytter for innleveringshendelsen på add-todo form. Nå for den faktiske opprettelsen av opptak. Legg til følgende kode i createTodo metode:

e.preventDefault (); todosList.insert (todo: $ ('#todo') .val (), opprettet: ny dato (), fullført: false); $ ('#todo') .val (");

Med dette har vi fullført vårt eksempelprogram. Som du kan se, har CRUD-operasjonene for våre data blitt veldig enkle, og vi kan få tilgang til det på flere enheter. Når du bruker denne tjenesten, trenger vi ikke å opprette en full back-end-tjeneste for å lagre brukerens informasjon.

Datastore Ekstras

Som en ekstra tjeneste til utviklere, lar Dropbox deg utforske dataene i Datastores. For å sjekke dette, gå til App-konsollen og velg Bla gjennom datasores fra undermenyen, velg programmet du vil sjekke Datastores for, og du vil bli presentert med en liste over eksisterende tabeller og hver post i tabellen.

Space Limits

Når du lager Datastores, må du ta hensyn til mengden informasjon du planlegger å lagre. Hver applikasjon har opptil fem MBer per bruker, for å bruke på tvers av alle datastore. Så lenge dataene dine ikke rammer denne grensen, vil Datastore ikke bidra til brukerens Dropbox-kvote. Husk at data over denne grensen vil telle mot brukerens Dropbox-lagerkvote, og skriveoperasjoner kan være begrenset.

Felttyper

Datastore-poster kan ses som JSON-objekter, men det er visse begrensninger om dataene som et felt kan inneholde, for eksempel, selv om du kan se en post som et JSON-dokument, kan du ikke ha innebygde dokumenter. Hvilke typer data du kan lagre, er som følger:

string
boolean
Heltall - 64 biter signert
Flytende punkt
Dato - POSIX-lignende tidsstempel
Bytes - Vilkårlig binær data opptil 100 KBs
Liste

En liste er en spesiell type verdi som kan inneholde en bestilt liste over andre verdier, men ikke lister seg selv.

Drop-Ins

En annen flott funksjon lagt til Dropbox for utviklere er Drop-ins. Det finnes to typer drop-ins, velgeren og Saver. Med disse nye funksjonene kan du legge til støtte til søknaden din for å enten velge (for deling eller andre formål) filer direkte fra Dropbox med velgeren og lagre filer direkte til Dropbox med Saver.

Så fortsetter vi med vårt eksempel, legger du til Drop-ins i vår TODOs-applikasjon.

Trinn 1 - Oppsett

Som med Datastore API, må vi opprette et program for Dropins, gå til App-konsollen, velg Lag ny, velge Drop-in app og gi det et navn.

Nå har vi en ny applikasjon, i motsetning til søknadene om andre Dropbox-APIer, trenger denne ikke produksjonstilgang, så når du er klar, kan du tilby den til brukerne uten å måtte.

Nå er det eneste vi må gjøre for å legge til Drop-ins-støtte til vår søknad, legg til SDK, legg til følgende kode i skript erklæringer i HTML-filen, ovenfor Skriptet for søknaden din:

Legg merke til id med en verdi på dropboxjs, Hvis du fjerner eller endrer dette, vil Dropbox ikke kunne hente programnøkkelen din, og dermed bryte Drop-in-funksjonaliteten.

Trinn 2 - Vælger

OK, så nå har vi Drop-ins API på plass, la oss begynne med Chooser Drop-in. For å legge til Velg fra dropbox knappen, bruk følgende kode.

Dette vil generere knappen for deg, og når du klikker på den, åpnes det et vindu som lar deg velge filer fra brukerens Dropbox. For å style dette elementet, bruk klassen dropbox_choose. I mitt tilfelle vil jeg bare sentrere det på skjermen. De data-link-type Attributt angir om den innhentede lenken vil være a direkte lenke til filen (nyttig for nedlasting eller visning) eller forhåndsvisning, i så fall vil linken ta deg til Dropbox-grensesnittet.

Begge koblingene har ulemper, for eksempel vil en direkte kobling utløpe innen fire timer etter etableringen, og en forhåndsvisningslink kan slutte å fungere hvis brukeren som eier filen, fjerner eller endrer den. Forhåndsvisningslinketypen er standard som brukes av velgeren.

Arbeide med resultatet

Hvis du legger til koden ovenfor, genereres en "Velg fra Dropbox" -knappen, som når du klikker, viser oss et vindu for å velge ønsket fil. For å hente den valgte filen / filene, ja det støtter flere valg, må søknaden din svare på DbxChooseSuccess hendelse i inngangselementet. Legg til følgende metode for JavaScript-programmet:

lytteKauser: funksjon () document.getElementById ('dp-chooser') .addEventListener ('DbxChooserSuccess', funksjon (e) $ ('# valgt bilde') .attr ('src', e.files [0] .link) .fadeIn ();, false);

Etter at du har opprettet hendelseslytteren, må du legge den til i søknaden, nederst på din i det metode, legg til følgende linje av kode:

TodosApp.listenChooser ();

Denne hendelsen vil gi oss en nyttelast som blant annet inneholder en rekke filer valgt av brukeren. I dette tilfellet velger vi en enkelt fil og legger til linkegenskapen til en bildemerke allerede i DOM. Hver fil i oppsettet inneholder noen andre felt, som filstørrelsen, navnet sitt, etc. For en fullstendig liste over egenskapene i hver fil, gå til dokumentasjonen Valger velg.

Trinn 3 - Saver

Sist men ikke minst har vi Saver Drop-in. Denne innløsningen lar deg lagre filer direkte til brukerens Dropbox-mappe. Akkurat som med velgeren, trenger du en innrullingsprogram for å bruke API. Heldigvis har vi allerede opprettet en og arbeider med denne Drop-in er enda enklere enn alt annet så langt, bare opprett en link som følger:

De href og klasse Parametere er påkrevd for Drop-in-arbeidet. De href er filen som vil bli lagret i brukerens Dropbox-mappe, og klasse forteller programmet at det er en Saver Drop-in. I tillegg kan du legge til en tredje parameter: Data-filename som vil bli brukt som et brukervennlig navn for filen å lagre. Hvis du ikke angir en, vil navnet bli tatt fra href parameter.

Som med velgeren er det et par avanserte ting du kan gjøre med Saver Drop-in, men for en referanse på dem, sjekk den offisielle dokumentasjonen.

Konklusjon

Som du kan se med disse nye funksjonene i Dropbox Developer Services, kan vi enkelt legge til kraftige datalagringsfunksjoner til våre web- og mobilapplikasjoner. Dette frigjør oss fra overhead for å skape en back-end-tjeneste når lite databehandling er nødvendig.

Forhåpentligvis føler du deg nå komfortabel å legge til CRUD-støtte til søknaden din ved hjelp av Datastore API og legge til evnen til å lese og skrive fra brukerens Dropbox-kontoer, ved hjelp av Drop-ins API. Vær oppmerksom på at begge APIene er veldig nye, Datastore API er fortsatt inne Beta versjon, men du kan se potensialet de representerer. Pass på å sjekke den offisielle Dropbox-dokumentasjonen for mer informasjon om disse og andre gode tjenester plattformen har å tilby.

Kode