Dropbox-datastores en drop-ins

Onlangs kondigde Dropbox zijn nieuwe Datastore API en Drop-ins aan, een aantal fantastische nieuwe functies die erop gericht zijn om de kracht van toegang tot bestanden te gebruiken en (nu met Datastores) andere algemene informatie vanaf elk apparaat en die gegevens gesynchroniseerd over alle platforms, pijnloos te houden.

datastores

Tegenwoordig ondersteunt de Datastore API alleen use-cases voor één gebruiker, maar scenario's voor meerdere gebruikers zijn in de toekomst van Dropbox.

Laten we beginnen met bespreken welke datastores zijn. Je kunt ze zien als een kleine database om sleutel / waarde informatieparen bij te houden. U kunt nu zeggen dat uw toepassing een webservice met een database kan gebruiken en uw gegevens op alle apparaten hetzelfde zijn, en hoewel dit waar is, nemen we met behulp van de Datastore API de overhead weg van het verwerken van een back-up einde dienst.

Met dit in gedachten kunnen applicaties die geen grote hoeveelheid gebruikersgegevens hoeven te bewaren en geen zware verwerking vereisen, het databasebeheer delegeren aan Dropbox en vergeten om het handmatig te verwerken. Neem bijvoorbeeld een spel met meerdere platforms. Je zou de gebruiker willen toestaan om hem 's morgens op zijn iPad te spelen, aan het werk te gaan en terwijl hij in het verkeer is, door te spelen op zijn iPhone. In dit scenario zou u normaal gesproken die gebruiker nodig hebben om zich aan te melden bij het systeem, ze te spelen en vervolgens hun voortgang op te slaan.

Nu met de Datastore API kun je het hele aanmeldproces en de overhead van het verwerken van de voortgangsgegevens vergeten, je gebruikt gewoon de meegeleverde SDK en slaat de informatie op die je wilt opslaan, later die dag wanneer je gebruiker je applicatie opent vanuit een andere Dropbox verbonden apparaat kunt u eenvoudig hun informatie ophalen. In dit geval behandelt Dropbox de opslag, beveiliging en privacy van de informatie.

Hoewel vanaf nu de Datastore API alleen use-cases voor één gebruiker ondersteunt. Volgens Dropboxer Steve M. zijn scenario's voor meerdere gebruikers van plan voor Dropbox.

Aanhoudende TODOs-app

Als je ooit een JavaScript-framework / -bibliotheek hebt gebruikt en in voorbeeldtoepassingen bent gekomen, is de kans groot dat in een van die apps een TODO-app van een of andere vorm bestond. Dus, in de geest van het consistent houden van dingen en het demonstreren van enkele van de meest voorkomende functies, laten we een TODO-app bouwen met de Dropbox Datastore API.

Aangezien dit een tutorial is over de Dropbox-functionaliteiten die aan ontwikkelaars worden aangeboden, zal ik niet de HTML of de CSS in de applicatie uitleggen, je kunt die vinden in de bestanden bij deze tutorial.

Stap 1 - De applicatie instellen

Allereerst moeten we net als bij de meeste openbare API's een nieuwe applicatie binnen het systeem maken. Log hiervoor in op je Dropbox-account en ga naar de App Console. Klik op "Create app", kiezen "Dropbox API-app" en "Datastores alleen" en geef je app eindelijk een naam.

Je komt misschien in de verleiding om te selecteren "Bestanden en datastores", Als uw toepassing deze machtiging echter niet gebruikt, wordt deze bij het aanvragen van de productiestatus geweigerd, en houdt u zich aan het Dropbox-beleid voor elke toepassing die u maakt.

Nu heb je een nieuwe applicatie in Dropbox en kun je beginnen met het gebruik van de Datastore API (en andere bronnen). Om dit te doen, heeft u uw App-sleutel. Als u de JavaScript-SDK gebruikt, zoals we in deze zelfstudie zullen doen, heeft u uw App Secret (houd deze string geheim).

Stap 2 - De SDK toevoegen

We gaan de JavaScript-SDK van Dropbox gebruiken voor interactie met de Datastore API. Om het te installeren, voegt u gewoon de volgende scriptverklaring toe aan uw HTML-document bovenstaande het script voor je applicatie.

Stap 3 - Aanmaken van onze applicatie

Onze applicatie zal een enkel JavaScript-bestand zijn onder de "Js" map. Maak een nieuw "App.js" bestand met de volgende code:

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

Wat dit doet, is een nieuw Dropbox Client-object maken met de app-sleutel die is verkregen via de app-console. Vervolgens wordt het toepassingsobject gedefinieerd en wanneer alles gereed is, noemen we het in het methode.

De gebruikerssessie controleren

Het eerste wat onze applicatie moet doen, is controleren of we een toegangstoken hebben voor de gebruiker van onze applicatie. Voeg de volgende code toe aan de in het methode:

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

Hier proberen we de gebruiker van de app te verifiëren voor de Dropbox API-server. Door de interactieve optie om vals, we vragen de methode om de gebruiker niet door te sturen naar de Dropbox-site voor authenticatie, op deze manier kan onze applicatie de normale stroom voortzetten. We gaan de gebruiker er later handmatig naartoe sturen.

Nu moeten we controleren of de gebruiker is geverifieerd en zo ja, doorgaan met het laden van hun gegevens. Voeg de volgende code toe aan uw CheckClient methode:

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

Hier werken we onze interface dienovereenkomstig bij, op basis van het feit of de gebruiker is geverifieerd of niet.

De gebruiker authenticeren

Tot nu toe hebben we onze applicatie-interface dienovereenkomstig bijgewerkt, als de gebruiker is geverifieerd of niet. Nu gaan we het proces van authenticatie van de gebruiker in het systeem afhandelen. Voeg de volgende code toe aan de anders verklaring van de CheckClient methode:

$ ('# link-knop') .klik (functie () client.authenticate (););

Dit is slechts een callback die wordt aangeroepen wanneer de gebruiker op de knop klikt "Connect Dropbox" knop in de interface. Merk op dat we niet de interactieve optie deze keer, waardoor de omleiding mogelijk is. Als de gebruiker niet is aangemeld bij Dropbox, wordt een aanmeldingsformulier weergegeven en vraagt het systeem de gebruiker om de toepassing toe te staan.

Ophalen van gebruikersgegevens

Nadat de gebruiker toegang heeft gekregen tot de toepassing, wordt deze doorgestuurd naar ons. In dit geval is de oproep naar de isAuthenticated methode zal true retourneren, op dit punt moeten we de opgeslagen Dropbox-gegevens van de gebruiker ophalen. Voeg de volgende code toe aan de als verklaring van de CheckClient methode:

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

Deze methode haalt de Datastore van de geverifieerde gebruiker op en opent de todos tafel. In tegenstelling tot een SQL-tabel hoeft de tabelstructuur niet voorafgaand aan gebruik te worden gedefinieerd, de tabel bestaat zelfs niet eens totdat we er gegevens aan toevoegen.

Wat dit ook betekent, is dat de tabel gegevens kan bevatten en dat één record niet dezelfde gegevens hoeft te bevatten als de andere. Het is echter een goede gewoonte om een vergelijkbare, zo niet dezelfde structuur, onder records te bewaren.

Records renderen

Op dit punt hebben we de gebruikersinformatie, maar deze wordt niet getoond aan de gebruiker. Voeg hiervoor de volgende code toe aan de updateTodos methode:

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 ($ ('

Deze methode stelt eenvoudig een containerelement in voor de HTML-tag die onze lijst met todos bevat, waarna we de records ophalen in onze todos tafel door het te bellen vraag methode van de Datastore API. Vervolgens wissen we de lijst met items en ten slotte renderen we elk record naar het scherm.

Een record verwijderen

Nu we de mogelijkheid hebben om de opgeslagen TODO's van de gebruiker op te halen bij het opstarten van het programma, laten we werken aan het verwijderen van die records. In onze weergavenmethode maken we een X knop. Voeg de volgende code toe aan de onderkant van de updateTodos methode:

$ ('li-knop') .klik (functie (e) e.preventDefault (); var id = $ (this) .parents ('li') .attr ('data-record-id'); todosList.get (id) .deleteRecord (););

In deze code krijgen we alleen de ID kaart van het te verwijderen record, haal het daadwerkelijke record op door het krijgen methode en verwijder deze door te bellen deleteRecord op het verkregen object. Aangezien we eerder de recordsChanged callback, onze interface zal als magisch worden bijgewerkt.

Een record bijwerken

Tot zover is goed, we kunnen een lijst met taken ophalen uit de Datastore van de gebruiker en we kunnen er een record van verwijderen. Wat dacht je van het bijwerken van een record? Voor deze nieuwe functie gaan we de mogelijkheid om een record te markeren als toevoegen voltooid of niet. Voeg de volgende code toe aan de onderkant van de updateTodos methode:

$ ('li-invoer') .klik (functie (e) var el = $ (e.target), id = el.parents ('li') .attr ('data-record-id'); todosList.get (id) .set ('completed', el.is (': checked')););

Net als bij de verwijdermethode halen we de ID kaart van het object dat moet worden bijgewerkt, haal het recordobject zelf op en stel het in voltooid eigendom volgens de huidige staat.

Een record maken

Ten slotte moeten we nieuwe records kunnen maken in de Datastore van de gebruiker. Om dit te doen, moeten we reageren op de formulierinzending die de add-todo formulier zal activeren. Voeg de volgende code toe aan de onderkant van de als verklaring in onze CheckClient methode:

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

Dit is gewoon een luisteraar voor het submit-evenement op de add-todo het formulier. Nu voor het echte creëren van een record. Voeg de volgende code toe aan de createTodo methode:

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

Hiermee hebben we onze voorbeeldtoepassing voltooid. Zoals u ziet, zijn de CRUD-bewerkingen voor onze gegevens heel eenvoudig geworden en hebben we er toegang toe op meerdere apparaten. Tijdens het gebruik van deze service is het niet nodig om een volledige back-endservice te maken om de gebruikersgegevens op te slaan.

Datastore-extra's

Als extra service voor ontwikkelaars, laat Dropbox je de gegevens in je Datastores verkennen. Om dit te controleren, gaat u naar de App-console en selecteert u Bladeren door datasores in het submenu, selecteert u de applicatie waarvoor u de Datastores wilt controleren en krijgt u een lijst met de bestaande tabellen en elk record in de tabel te zien.

Space Limits

Bij het maken van Datastores moet u rekening houden met de hoeveelheid informatie die u wilt opslaan. Elke toepassing heeft maximaal vijf MB's per gebruiker, te gebruiken in alle datastores. Zolang uw gegevens deze limiet niet bereiken, draagt de Datastore niet bij aan het Dropbox-quotum van de gebruiker. Houd er rekening mee dat gegevens over deze limiet meetellen voor het opslagquotum van de gebruiker in Dropbox en dat de schrijfbewerkingen mogelijk beperkt zijn.

Veldtypen

Datastore-records kunnen worden gezien als JSON-objecten, maar er zijn bepaalde beperkingen voor de gegevens die een veld kan bevatten, bijvoorbeeld, ook al kunt u een record als een JSON-document zien, u kunt geen ingesloten documenten hebben. De soorten gegevens die u kunt opslaan, zijn als volgt:

Draad
Boolean
Integer - 64 bits ondertekend
Drijvend punt
Datum - POSIX-achtige tijdstempel
Bytes - Willekeurige binaire gegevens tot 100 kB
Lijst

Een lijst is een speciaal soort waarde die een bestelde lijst met andere waarden, maar niet zelf.

Drop-Ins

Een andere geweldige functie toegevoegd aan Dropbox voor ontwikkelaars zijn Drop-ins. Er zijn twee soorten Drop-ins, de Kiezer en de Saver. Met deze nieuwe functies kunt u ondersteuning aan uw toepassing toevoegen om bestanden rechtstreeks vanuit Dropbox met de Kiezer te selecteren (voor het delen of voor andere doeleinden) en om bestanden rechtstreeks op te slaan in Dropbox met de Saver.

Dus als je doorgaat met ons voorbeeld, kun je drop-ins toevoegen aan onze TODOs-applicatie.

Stap 1 - Setup

Net als bij de Datastore API moeten we een toepassing voor Dropins maken, ga naar de App-console, selecteer Maak nieuw, Kiezen Drop-in-app en geef het een naam.

Nu hebben we een nieuwe applicatie, in tegenstelling tot de applicaties voor andere Dropbox-API's, deze heeft geen productietoegang nodig, dus als je er eenmaal klaar voor bent, kun je deze zonder gedoe aanbieden aan je gebruikers.

Nu is het enige dat we moeten doen om Drop-ins-ondersteuning aan onze applicatie toe te voegen, de SDK toe te voegen, de volgende code aan de SDK toe te voegen scripts aangiften in het HTML-bestand, bovenstaande het script voor je toepassing:

Merk op ID kaart met een waarde van dropboxjs, Als je dit verwijdert of wijzigt, kan Dropbox je applicatiesleutel niet krijgen, waardoor de Drop-in-functionaliteit wordt verbroken.

Stap 2 - Kiezer

OK, dus nu hebben we de Drop-ins API op zijn plaats, laten we beginnen met de Kiezer Drop-in. Om de. Toe te voegen Kies uit dropbox knop, gebruik de volgende code.

Dit genereert de knop voor u en wanneer u erop klikt, wordt er een venster geopend waarin u bestanden kunt selecteren in de Dropbox van de gebruiker. Gebruik de klasse om dit element te stijlen dropbox_choose. In mijn geval centreer ik het eenvoudig op het scherm. De datalink-type attribuut geeft aan of de verkregen link een a is direct link naar het bestand (nuttig voor downloaden of weergeven) of een voorbeeld, in welk geval u naar de link gaat om naar de Dropbox-interface te gaan.

Beide links hebben nadelen, bijvoorbeeld een directe link vervalt binnen vier uur na de aanmaak ervan, en een voorbeeldkoppeling kan stoppen met werken als de gebruiker die het bestand bezit het bestand verwijdert of wijzigt. Het voorbeeldlinktype is de standaard die door de kiezer wordt gebruikt.

Werken met het resultaat

Als u de bovenstaande code toevoegt, genereert u een knop 'Kiezen uit Dropbox'. Als u hierop klikt, wordt er een venster weergegeven om het gewenste bestand te selecteren. Om het geselecteerde bestand (en) op te halen, ja het ondersteunt meerdere selectie, uw applicatie moet reageren op de DbxChooseSuccess gebeurtenis in het invoerelement. Voeg de volgende methode toe aan uw JavaScript-toepassing:

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

Nadat u de gebeurtenislistener heeft gemaakt, moet u deze aan de toepassing toevoegen, onderaan uw in het methode, voeg de volgende regel code toe:

TodosApp.listenChooser ();

Deze gebeurtenis geeft ons een payload die, onder andere, een reeks bestanden bevat die door de gebruiker zijn geselecteerd. In dit geval selecteren we een enkel bestand en voegen we de eigenschap link toe aan een afbeeldingstag die al in de DOM staat. Elk bestand in de array bevat een aantal andere velden, zoals de bestandsgrootte, de naam, enzovoort. Voor een volledige lijst van de eigenschappen in elk bestand gaat u naar de Kiezelaar Drop-in documentatie.

Stap 3 - Saver

Last but not least hebben we de Saver Drop-in. Met deze Drop-in kun je bestanden direct opslaan in de Dropbox-map van de gebruiker. Net als bij de Kiezer hebt u een Drop-in-toepassing nodig om de API te gebruiken. Gelukkig hebben we er al een gemaakt en het werken met deze Drop-in is zelfs eenvoudiger dan al het andere tot nu toe, maak eenvoudig een link als volgt:

De href en klasse parameters zijn vereist voor de Drop-in om te werken. De href is het bestand dat wordt opgeslagen in de Dropbox-map van de gebruiker en de klasse vertelt de applicatie dat het een Saver Drop-in is. Bovendien kunt u een derde parameter toevoegen: data-filename welke zal worden gebruikt als een gebruikersvriendelijke naam voor het bestand dat moet worden opgeslagen. Als u er geen opgeeft, wordt de naam overgenomen van de href parameter.

Net als bij de Chooser zijn er een paar meer geavanceerde dingen die je kunt doen met de Saver Drop-in, maar voor een referentie daarover, kijk je in de officiële documentatie.

Conclusie

Zoals u kunt zien met deze nieuwe functies in de Dropbox Developer Services, kunnen we eenvoudig krachtige gegevensopslagmogelijkheden toevoegen aan onze web- en mobiele applicaties. Dit bevrijdt ons van de top van het creëren van een back-end service wanneer er weinig gegevensverwerking nodig is.

Hopelijk voel je je nu comfortabel door CRUD-ondersteuning toe te voegen aan je applicatie met behulp van de Datastore API en de mogelijkheden toe te voegen om te lezen en te schrijven vanuit de Dropbox-accounts van je gebruiker, met behulp van de Drop-ins API. Houd er rekening mee dat beide API's echt nieuw zijn, de Datastore API nog steeds actief is beta versie, maar u ziet wel het potentieel dat ze vertegenwoordigen. Zorg ervoor dat je de officiële Dropbox-documentatie raadpleegt voor meer informatie over deze en andere geweldige services die het platform te bieden heeft.

Code