Acest articol vă va învăța minimul necesar pentru a începe să creați aplicații în partea de sus a API-ului Dropbox.

După ce ați citit-o, puteți verifica și pagina noastră curs gratuit pe API-ul Dropbox dacă sunteți interesat să aflați mai multe. În acel curs, veți învăța cum să creați o aplicație de organizare a cheltuielilor folosind JavaScript modern.

Faceți clic pe imagine pentru a ajunge la cursul nostru Dropbox
Faceți clic aici pentru a ajunge la curs

Acest articol folosește JavaScript pentru exemplele sale, cu toate acestea, SDK-urile sunt foarte asemănătoare între diferite limbi, deci chiar dacă sunteți, de exemplu, un dezvoltator Python, ar trebui să fie totuși relevant.

Pregatirea

Pentru a construi deasupra Dropbox, mai întâi aveți nevoie de un Dropbox cont. După ce te-ai înregistrat, mergi la secțiunea dezvoltator. Alege Aplicatiile mele în partea stângă a tabloului de bord și faceți clic Creați aplicație.

Alegeți următoarele setări și dați aplicației dvs. un nume unic.

Setări preferate pentru acest tutorial

Setări preferate pentru acest tutorial

În tabloul de bord, accesați OAuth 2 secțiunea sub Jeton de acces generat și faceți clic pe Generate pentru a obține un API accessToken, pe care o vom salva pentru mai târziu.

1612174147 70 Aflati API ul Dropbox in 5 minute

Acum, să instalăm aplicația desktop Dropbox. Conectați-vă la aplicație cu noile acreditări de dezvoltator și ar trebui să puteți vedea un folder cu același nume ca aplicația dvs. recent creată. În cazul meu, este LearnDbxIn5Minutes.

1612174148 967 Aflati API ul Dropbox in 5 minute

Plasați câteva fișiere și imagini în dosar, astfel încât să le putem accesa prin intermediul API-ului nostru.

Instalare și clasa inițială Dropbox

Acum să instalăm biblioteca Dropbox în proiectul nostru.

npm install dropbox

sau

yarn add dropbox

Importați Dropbox și creați dbx cu biblioteca noastră de jetoane și preluare a trecut în instanțierea clasei noastre. Daca preferi axios sau orice altă bibliotecă de preluare, nu ezitați să o treceți.

import { Dropbox } from 'dropbox';

const accessToken = '<your-token-from-dashboard>';

const dbx = new Dropbox({  
  accessToken,  
  fetch  
});

Rețineți că Dropbox este un import numit. Motivul este că există și alte sub-biblioteci în interior 'dropbox', de exemplu, DropboxTeam, dar ne vom concentra doar asupra Dropbox în acest tutorial.

Obținerea fișierelor

Prima metodă pe care o vom analiza este de a obține fișiere.

dbx.filesListFolder({  
  path: ''  
}).then(response => console.log(response))

filesListFolder() ia o cale către folderul țintă și listează toate fișierele din interior. Această metodă returnează o promisiune.

De asemenea, merită să rețineți că veți furniza un șir gol '' și nu o bară'/' pentru a ajunge la rădăcina aplicației noastre. Acum rădăcina este rădăcina folderului aplicației noastre și nu cel al contului Dropbox. Putem schimba oricând această opțiune în setările aplicației noastre.

Când rulăm codul nostru, consola ar trebui să înregistreze intrările din folderul nostru Dropbox:

1612174148 2 Aflati API ul Dropbox in 5 minute

Obținerea mai multor fișiere

În această parte, ne vom uita la încărcarea fișierelor suplimentare, cu potențial de implementare a paginării sau a unei caracteristici de derulare infinită.

În acest scop, Dropbox are un concept de cursor, care indică poziția noastră actuală între fișierele pe care le-am primit și cele care trebuie trimise.

De exemplu, avem un folder cu 10 fișiere și am solicitat 5. Cursorul ne va informa că există mai multe fișiere de descărcat prin has-more: true proprietate pe response. Putem continua să solicităm fișiere folosind filesListFolderContinue() trecând în cursor până nu vor mai rămâne fișiere și vom obține has_more: false.

const getFiles = async () => {  
  const response = await dbx.filesListFolder({  
    path: '',   
    limit: 5  
  })

console.log(response)  
}

getFiles()

Când examinăm răspunsul pe care l-am primit în consolă, putem vedea has_more: true.

1612174149 102 Aflati API ul Dropbox in 5 minute

Să ne actualizăm codul pentru a gestiona cazurile în care avem mai multe fișiere de primit.

const getFiles = async () => {  
  const response = await dbx.filesListFolder({  
    path: '',   
    limit: 5  
  })

// We can perform a custom action with received files  
  processFiles(response.entries)

if (response.has_more) {  
    // provide a callback for the newly received entries   
    // to be processed  
    getMoreFiles(response.cursor, more => processFiles(more.entries))  
  }  
}

getFiles()

Oferim cursorul pentru a informa API-ul despre intrările pe care le-am primit, deci nu vom mai primi aceleași fișiere.

const getMoreFiles = async (cursor, callback) => {  
  // request further files from where the previous call finished  
  const response = await dbx.filesListFolderContinue({ cursor })

// if a callback is provided we call it  
  if (callback) callback(response)

if (response.has_more) {  
    // if there are more files, call getMoreFiles recursively,  
    // providing the same callback.  
    await getMoreFiles(response.cursor, callback)  
  }  
}

Rețineți apelul către care vă oferim getMoreFiles() funcţie. Este un truc foarte frumos pentru a ne asigura că fișierele noastre primite recent primesc același tratament ca și predecesorii lor.

În cele din urmă, când nu mai sunt fișiere de primit, primim has_more: false

1612174149 631 Aflati API ul Dropbox in 5 minute

De asemenea, merită menționat faptul că apelul recursiv este implementat aici pentru simplitatea tutorialului, mai degrabă decât pentru performanța funcției. Dacă aveți de încărcat cantități mari de date, vă rugăm să refacturați acest lucru într-o funcție mai performantă.

Se obțin miniaturi

A treia metodă pe care o vom studia este de a obține miniaturi pentru fișierele noastre.

Pentru a solicita miniaturi pentru fișierele încărcate, putem apela filesGetThumbnailBatch().

dbx.filesGetThumbnailBatch({  
  entries: [{  
    path: '',  
    size: 'w32h32',  
    format: 'png',  
  }]  
});

Acest punct final este optimizat pentru a obține mai multe miniaturi și acceptă o serie de obiecte, în care fiecare obiect poate avea mai multe proprietăți specificate.

Proprietatea esențială este path, care deține aceleași avertismente ca în filesListFolder().

În răspunsul nostru, putem accesa imaginile noastre prin intermediul thumbnail proprietăți.

1612174150 790 Aflati API ul Dropbox in 5 minute

Puteți vedea că miniaturile nu sunt returnate ca link-uri, ci ca șiruri foarte lungi – aceasta este o imagine de bază64. Puteți utiliza șirul din HTML pentru a seta src de <img> la "data:image/jpeg;base64, ${file.thumbnail}".

Și dacă aș da răspunsul meu, aș primi aceste pisici uimitoare!

Aflati API ul Dropbox in 5 minute
1612174151 886 Aflati API ul Dropbox in 5 minute
Credite imagine: Max Pixel (1, 2, 3)

Credite imagine: Max Pixel (1, 2, 3)

Mutarea fișierelor

În cele din urmă, vom acoperi mutarea fișierelor noastre dintr-un dosar în altul.

Putem folosi filesMoveBatchV2() pentru mutarea fișierelor noastre în loturi dintr-un folder în altul. Această metodă funcționează cel mai bine atunci când este implementată ca parte a unui async funcţie.

Metoda acceptă entries o serie de obiecte, care constau din from_path și to_path proprietăți.

filesMoveBatchV2() se întoarce fie success dacă apelul a avut succes imediat, în cazul în care există doar câteva fișiere de procesat. Cu toate acestea, pentru sarcini de lucru mai mari, va returna un obiect cu o proprietate async_job_id, și asta înseamnă că apelul dvs. este în curs de executare și va trebui să îl verificăm într-o etapă ulterioară.

Putem folosi filesMoveBatchCheckV2() să continuăm să verificăm dacă finalizarea lucrării noastre este completă și nu este completă in_progress mai mult.

const entries = {  
  from_path: 'origin_folder',  
  to_path: 'destination_folder  
}

const moveFiles = async () => {  
  let response = await dbx.filesMoveBatchV2({ entries })  
  const { async_job_id } = response  
  if (async_job_id) {  
    do {  
      response = await dbx.filesMoveBatchCheckV2({ async_job_id })  
      // This where we perform state update or any other action.  
      console.log(res)  
    } while (response['.tag'] === 'in_progress')  
  }  
}

Învelire

Felicitări! Acum aveți o înțelegere foarte simplă a API-ului Dropbox și a SDK-ului JavaScript al acestuia.

Dacă doriți să aflați mai multe despre API-ul Dropbox și să creați o aplicație deasupra acestuia cu Vanilla JavaScript, asigurați-vă că consultați curs gratuit pe Scrimba. A fost, împreună cu această postare, sponsorizat și plătit de Dropbox. Această sponsorizare îl ajută pe Scrimba să păstreze luminile aprinse și ne permite să continuăm să creăm conținut gratuit pentru comunitatea noastră pe tot parcursul anului 2019. Deci, o mulțumire deosebită Dropbox pentru asta!

Codificare fericita 🙂