Dropbox Datastores și Drop-Ins

Recent, Dropbox și-a anunțat noile aplicații Datastore API și Drop-in, câteva noi caracteristici noi, menite să mobilizeze puterea de accesare a fișierelor și (acum cu Datastores) alte informații generale de pe orice dispozitiv și să păstreze acele date sincronizate pe toate platformele,.

Datastores

Astăzi, Datastore API suportă numai cazuri de utilizare pentru un singur utilizator, dar scenarii pentru mai mulți utilizatori sunt în planurile viitoare pentru Dropbox.

Să începem prin a discuta despre ce sunt datastorele. Vă puteți gândi la ele ca la o bază de date mică pentru a păstra perechi de informații cheie / valori. Acum, puteți spune că aplicația dvs. ar putea utiliza un serviciu web cu o bază de date și datele dvs. vor fi identice în toate dispozitivele și, în timp ce acest lucru este adevărat, prin utilizarea API-ului Datastore, serviciu final.

Având în vedere acest lucru, aplicațiile care nu au nevoie să stocheze o cantitate mare de date de utilizator și nu necesită procesare intensă, pot delega gestionarea bazei de date la Dropbox și pot uita să o manipuleze manual. Luați, de exemplu, un joc pe mai multe platforme. Ați dori să permiteți utilizatorului să-l joace pe iPad dimineața, să se îndrepte spre serviciu și în timp ce vă aflați în trafic, continuați să jucați pe iPhone. În acest scenariu, în mod normal, ar trebui ca acel utilizator să se logheze în sistem, să se joace și apoi să salveze progresul.

Acum, cu API-ul Datastore puteți să uitați de întregul proces de conectare și de cheltuielile aferente manipulării datelor despre progres, utilizați SDK-ul furnizat și stocați informațiile pe care doriți să le stocați mai târziu în ziua în care utilizatorul dvs. vă deschide aplicația dintr-un alt Dropbox un dispozitiv conectat, puteți să le preluați cu ușurință informațiile. În acest caz, Dropbox gestionează stocarea, securitatea și confidențialitatea informațiilor.

Deși, încă de acum, API-ul Datastore suportă numai cazuri de utilizare pentru un singur utilizator. Potrivit Dropboxer Steve M., scenarii cu utilizatori multipli sunt în planurile viitoare pentru Dropbox.

Aplicație persistentă TODOs

Dacă ați folosit vreodată un cadru / bibliotecă JavaScript și ați găsit aplicații de exemplu, este posibil ca într-una din aceste aplicații să existe o aplicație TODO de un fel. Deci, în spiritul păstrării coerenței și al demonstrării unora dintre cele mai comune caracteristici, să construim o aplicație TODO utilizând API-ul Dropbox Datastore.

Deoarece acesta este un tutorial despre funcționalitățile Dropbox oferite dezvoltatorilor, nu voi explica HTML și CSS în aplicație, le puteți găsi pe cele din fișierele care însoțesc acest tutorial.

Pasul 1 - Configurarea aplicației

În primul rând, ca și în cazul majorității API-uri publice, trebuie să creați o nouă aplicație în cadrul sistemului. Pentru aceasta, conectați-vă la contul Dropbox și mergeți la Consola de aplicații. Click pe "Creați aplicația", Selectați "Aplicația API Dropbox" și "Numai cu date de stocare" și în final dați aplicației dvs. un nume.

Ați putea fi tentat să selectați "Fișiere și baze de date", cu toate acestea, dacă aplicația dvs. nu utilizează de fapt această permisiune, atunci când solicitați starea de producție, aceasta va fi respinsă, respectați politicile Dropbox pentru fiecare aplicație pe care o creați.

Acum aveți o nouă aplicație în Dropbox și puteți începe să utilizați API-ul Datastore (și alte resurse). Pentru a face asta, ai nevoie de tine Cheia aplicației. Dacă utilizați setul SDK JavaScript, așa cum vom face în acest tutorial, nu aveți nevoie de dvs. Secretul aplicației (păstrați secretul acestui șir).

Pasul 2 - Adăugarea setului SDK

Vom folosi SDK-ul JavaScript oferit de Dropbox pentru a interacționa cu API-ul Datastore. Pentru ao instala, pur și simplu adăugați următoarea declarație de script în documentul dvs. HTML de mai sus scriptul pentru aplicația dvs..

Pasul 3 - Crearea aplicației noastre

Cererea noastră va fi un singur fișier JavaScript sub "js" pliant. Creaza un nou "app.js" fișier cu următorul cod:

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

Ceea ce face este să creați un nou obiect Dropbox Client folosind cheia App obținută din consola de aplicații. Apoi definește obiectul nostru de aplicare și când totul este gata, numim init metodă.

Verificarea sesiunii utilizatorului

Primul lucru pe care aplicația trebuie să-l facă este să verifice dacă avem un jeton de acces pentru utilizatorul aplicației noastre. Adăugați următorul cod la init metodă:

client.authenticate (interactive: false, funcția (eroare, răspuns) if (error) console.log ('Eroare OAuth: + eroare)); TodosApp.checkClient ();

Aici încercăm să autentificăm utilizatorul aplicației la serverul API Dropbox. Prin setarea interactiv opțiunea pentru fals, solicităm metodei să nu redirecționeze utilizatorul la site-ul Dropbox pentru autentificare, astfel încât aplicația noastră să își poată continua fluxul normal. Vom trimite manual utilizatorul acolo mai târziu.

Acum trebuie să verificăm dacă utilizatorul este autentificat și, dacă da, continuați să încărcați datele. Adăugați următorul cod la adresa dvs. checkClient metodă:

checkClient: funcția () if (client.isAuthenticated ()) $ ('# link-button') .fadeOut (); $ ('#main') .fadeIn ();  altceva $ ('#main') .fadeOut ();

Aici actualizăm interfața noastră în mod corespunzător, pe baza faptului dacă utilizatorul a fost autentificat sau nu.

Autentificarea utilizatorului

Până în prezent, interfața noastră de aplicație este actualizată în mod corespunzător, dacă utilizatorul este autentificat sau nu. Acum vom gestiona procesul de autentificare a utilizatorului în sistem. Adăugați următorul cod la altfel declarație a checkClient metodă:

$ ('# link-button'). clic (functie () client.authenticate (););

Acesta este doar un apel invers care se numește atunci când utilizatorul face clic pe "Conectați Dropbox" butonul din interfață. Rețineți că nu setăm interactiv de această dată, permițând astfel redirecționarea. Dacă utilizatorul nu este conectat la Dropbox, va fi afișat un formular de autentificare și sistemul va cere utilizatorului să permită aplicarea.

Recuperarea datelor utilizatorului

După ce utilizatorul a primit accesul la aplicație, acesta va redirecționa înapoi la noi. În acest caz, apelul către isAuthenticated metoda va reveni la adevărat, în acest moment trebuie să preluăm datele stocate de Dropbox ale utilizatorului. Adăugați următorul cod la dacă declarație a checkClient metodă:

client.getDatastoreManager () funcția (eroare, Datastore) if (eroare) console.log ('eroare Datastore:' + eroare); todosList = Datastore.getTable (TodosApp.updateTodos) ; Datastore.recordsChanged.addListener (TodosApp.updateTodos););

Această metodă readuce Datastore-ul utilizatorului autentificat și accesează Todos masa. Contrar unui tabel SQL, structura tabelului nu trebuie să fie definită înainte de utilizare, de fapt, tabelul nu există nici măcar până când nu îi adăugăm date.

Ceea ce înseamnă, de asemenea, că tabela poate conține orice date și că o înregistrare nu trebuie să aibă aceleași date ca celelalte. Cu toate acestea, este o bună practică păstrarea unei înregistrări similare între structurile similare, dacă nu egale.

Redarea înregistrărilor

În acest moment, avem informațiile utilizatorului despre todos, dar acesta nu este afișat pentru utilizator. Pentru a face acest lucru, trebuie doar să adăugați următorul cod la updateTodos metodă:

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

Această metodă stabilește pur și simplu un element container pentru eticheta HTML care va conține lista noastră de articole, apoi vom prelua înregistrările din Todos tabel, sunând la întrebare din API-ul Datastore. Apoi, ștergem lista articolelor și, în final, facem fiecare înregistrare pe ecran.

Ștergerea unei înregistrări

Acum, că avem abilitatea de a prelua TODO-urile stocate de utilizator la pornirea aplicației, să lucrăm la ștergerea acestor înregistrări. În metoda noastră de redare, vom crea un X buton. Adăugați următorul cod în partea de jos a paginii updateTodos metodă:

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

În acest cod primim doar id a înregistrării pentru a șterge, a prelua înregistrarea reală prin apelarea obține și ștergeți-o prin apelare deleteRecord pe obiectul obtinut. Deoarece am setat anterior recordsChanged callback, interfața noastră se va actualiza ca și magia.

Actualizarea unei înregistrări

Până acum, putem extrage o listă de sarcini de la Datastore și putem șterge o înregistrare din acesta. Acum, despre actualizarea unei înregistrări? Pentru această nouă funcție vom adăuga posibilitatea de a marca o înregistrare ca terminat sau nu. Adăugați următorul cod în partea de jos a paginii updateTodos metodă:

$ ('li input') .click (funcția (e) var el = $ (e.target), id = el.parents ('li') .attr ('data-record-id'); todosList.get (id) .set ('completat', el.is (': verificat')););

Ca și metoda de ștergere, vom prelua id a obiectului de actualizare, preluarea obiectului de înregistrare în sine și setarea acestuia terminat proprietate în funcție de starea sa actuală.

Crearea unei înregistrări

În cele din urmă, trebuie să putem crea noi înregistrări în Datastore-ul utilizatorului. Pentru a face acest lucru, trebuie să reacționăm la evenimentul de depunere a formularului add-todo formularul va declanșa. Adăugați următorul cod în partea de jos a paginii dacă declarație în checkClient metodă:

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

Acesta este pur și simplu un ascultător pentru evenimentul de prezentare pe add-todo formă. Acum, pentru crearea reală a înregistrărilor. Adăugați următorul cod la createTodo metodă:

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

Cu aceasta, am finalizat aplicația noastră de exemplu. După cum puteți vedea, operațiile CRUD pentru datele noastre au devenit foarte simple și le putem accesa pe mai multe dispozitive. În timp ce folosim acest serviciu, nu avem nevoie să creăm un serviciu complet de back-end pentru stocarea informațiilor utilizatorului.

Datastore Extras

Ca un serviciu suplimentar pentru dezvoltatori, Dropbox vă permite să explorați datele din interiorul Agendei de Date. Pentru a verifica acest lucru, accesați consola App și selectați Răsfoire date din submeniu, selectați aplicația pe care doriți să o verificați și veți primi o listă a tabelelor existente și a fiecărei înregistrări din tabel.

Spațiul limită

Când creați Datastores, trebuie să țineți cont de cantitatea de informații pe care intenționați să o stocați. Fiecare aplicație are până la cinci MB pe utilizator, pentru a fi utilizată pe toate bazele de date. Atâta timp cât datele dvs. nu ating această limită, Datastore nu va contribui la cota Dropbox a utilizatorului. Rețineți că orice date care depășesc această limită vor conta pentru cota de stocare Dropbox a utilizatorului, iar operațiile de scriere pot fi limitate.

Tipuri de câmpuri

Înregistrările Datastore pot fi văzute ca obiecte JSON, cu toate acestea există anumite constrângeri cu privire la datele pe care un câmp poate conține, de exemplu, chiar dacă puteți vedea o înregistrare ca document JSON, nu puteți avea documente încorporate. Tipurile de date pe care le puteți stoca sunt după cum urmează:

Şir
boolean
Integer - 64 de biți semnate
Punctul de plutire
Data - marcaj de timp POSIX
Bytes - Datele binare arbitrare de până la 100 KB
Listă

O listă este un tip special de valoare care poate conține o ordonat lista de alte valori, dar nu și listele.

Drop-Ins

O altă facilitate extraordinară adăugată la Dropbox pentru dezvoltatori este Drop-ins. Există două tipuri de Drop-in-uri, Selectorul și Saver-ul. Cu aceste funcții noi puteți adăuga suport aplicației dvs. fie pentru a selecta (pentru partajare sau pentru alte scopuri) fișiere direct din Dropbox cu Chooser și pentru a stoca direct fișierele în Dropbox cu Saver.

Deci, continuând cu exemplul nostru, permiteți adăugarea de drop-ins-uri în aplicația noastră TODOs.

Pasul 1 - Configurare

Ca și în API-ul Datastore, trebuie să creați o aplicație pentru Dropins, accesați consola App, selectați Creaza nou, alege Drop-in app și dați-i un nume.

Acum avem o nouă aplicație, spre deosebire de aplicațiile pentru alte API-uri Dropbox, aceasta nu are nevoie de acces la producție, așa că, odată ce sunteți gata, puteți să le oferiți utilizatorilor dvs. fără probleme.

Acum, singurul lucru pe care trebuie să-l facem pentru a adăuga suportul Drop-ins pentru aplicația noastră este adăugarea SDK-ului, adăugarea următorului cod la script-uri declarații în fișierul HTML, de mai sus scriptul pentru aplicația dvs.:

Rețineți id cu o valoare de dropboxjs, dacă eliminați sau modificați acest lucru, Dropbox nu va putea să obțină cheia dvs. de aplicație, prin urmare, rupe funcția Drop-in.

Pasul 2 - Selector

OK, deci avem acum API-ul Drop-ins, să începem cu Drop-in Chooser. Pentru a adăuga Alegeți din căsuța de etichetă , utilizați următorul cod.

Acest lucru va genera butonul pentru tine și când faceți clic pe el, va deschide o fereastră care vă permite să selectați fișiere din Dropbox-ul utilizatorului. Pentru a modela acest element, utilizați clasa dropbox_choose. În cazul meu, o voi centra doar pe ecran. -Link-tip de date atributul specifică dacă linkul obținut va fi a direct link-ul către fișier (util pentru descărcare sau afișare) sau previzualizare, caz în care mergeți la link vă va duce la interfața Dropbox.

Ambele link-uri au dezavantaje, de exemplu, o legătură directă va expira în termen de patru ore de la crearea acesteia și un link de previzualizare poate să nu mai funcționeze dacă utilizatorul care deține fișierul îl elimină sau îl modifică. Tipul de link-uri de previzualizare este implicit folosit de selector.

Lucrul cu rezultatul

Adăugarea codului de mai sus va genera un buton "Alegeți din Dropbox", care când se face clic va afișa o fereastră pentru a selecta fișierul dorit. Pentru a prelua fișierele selectate, da, acceptă mai multe selecții, aplicația trebuie să răspundă la DbxChooseSuccess eveniment în elementul de intrare. Adăugați următoarea metodă în aplicația dvs. JavaScript:

('dp-chooser') .addEventListener ('DbxChooserSuccess', funcția (e) $ (' .link); fadeIn ();, false);

După ce ați creat ascultătorul evenimentului, trebuie să îl adăugați în aplicație, în partea de jos a acestuia init adăugați următoarea linie de cod:

TodosApp.listenChooser ();

Acest eveniment ne va da o sarcină utilă care conține, printre altele, o serie de fișiere selectate de utilizator. În acest caz, selectăm un singur fișier și adăugăm propria sa legătură într-o etichetă de imagine deja din DOM. Fiecare fișier din matrice conține și alte câmpuri, cum ar fi dimensiunea fișierului, numele acestuia etc. Pentru o listă completă a proprietăților din fiecare fișier, accesați documentația Chooser Drop-in.

Pasul 3 - Salvarea

Nu în ultimul rând, avem un "Saver Drop-in". Această introducere permite salvarea fișierelor direct în dosarul Dropbox al utilizatorului. La fel ca la Chooser, aveți nevoie de o aplicație Drop-in pentru a utiliza API-ul. Din fericire, am creat deja unul și lucrăm cu acest Drop-in este chiar mai ușor decât orice altceva până acum, creați pur și simplu un link după cum urmează:

href și clasă parametrii sunt necesari pentru ca Drop-in să funcționeze. href este fișierul care va fi salvat în dosarul Dropbox al utilizatorului și clasă spune că este vorba despre un "Saver Drop-in". În plus, puteți adăuga un al treilea parametru: date nume de fișier care va fi folosit ca nume ușor de utilizat pentru salvarea fișierului. Dacă nu specificați una, numele va fi luat de la href parametru.

Ca și la Selector, există câteva lucruri mai avansate pe care le puteți face cu Saver Drop-in, dar pentru o referire la aceștia verificați documentația oficială.

Concluzie

După cum puteți vedea cu aceste noi caracteristici din Dropbox Developer Services, putem adăuga cu ușurință capabilități puternice de stocare a datelor în aplicațiile noastre web și mobile. Acest lucru ne eliberează de cheltuielile generale de creare a unui serviciu back-end atunci când este necesară o prelucrare a datelor.

Sperăm că vă simțiți confortabil adăugând suportul CRUD aplicației dvs. utilizând API-ul Datastore și adăugând capabilitățile de citire și scriere din conturile Dropbox ale utilizatorului, utilizând API-ul Drop-ins. Rețineți că ambele API-uri sunt cu adevărat noi, API-ul Datastore este încă în beta versiune, cu toate acestea, puteți vedea potențialul pe care îl reprezintă. Asigurați-vă că verificați documentația oficială Dropbox pentru informații suplimentare despre aceste și alte servicii excelente pe care platforma le poate oferi.

Cod