Dropbox Datastore könyvjelző

Megjelent egy új szolgáltatás a Dropbox palettáján. Röviden összefoglalva adatbázisként is tudjuk használni mostantol. A legjobb, hogy JavaScript API kliens is jár hozzá, amivel később nagyon jól össze lehet hozni mondjuk az Angular.js-es alkalmazásukat.

Ez egy remek lépés volt tőlük, mert ha valaki ezt használja, mint fejlesztő, akkor rákényszeríti a felhasználóit, hogy rendelkezzenek Dropbox fiókkal. Most akkor készítsünk egy egyszerű könyvjelzőalkalmazást.

Első lépések

Miután persze már van egy Dropbox felhasználónk, létre kell hoznunk az alkalmazásunkat egy dedikált felületen, az App Console

Itt sok dolgunk nincsen. Kiválasztjuk a Dropbox API App lehetőséget, kiválasztjuk, hogy mihez szeretnénk hozzáférni. Jelenleg elég lesz a Datastore only opció is. Fájlokkal is lehet játszadozni, de azt most nem vizsgáljuk meg. Ha megvan, akkor adnunk kell egy nevet az alkalmazásnak. Jelen esetben ez a FolyamBookmark. Dropbox-ban egészen jól fejleszthető, mert csak https:// címeket fogad el, mint átirányítási cím. Ez alől csak a localhost kivétel. Tehát a legegyszerűbb, ha létrehozol egy fájlt (vagy letöltöd az itt elkészültet) és feltöltöd valami publikus könyvtárba Dropbox-on. Kapsz hozzá egy publikus címet és azt bemásolod mint Redirect URL. Egyedül a App key, amire szükségünk lesz egyelőre.

HTML

Gyorsan vázoljuk fel a html struktúránkat. Nem lesz sok nem kell félni 🙂

0

Nem hazudtam, mert tényleg nem sok 🙂 A lényeges pont a végén a JavaScript betöltés. Ez ugyanis a Datastores API kliens. Jelenleg még béta címkét kapott, de majd szépen átlendül ezen a fázison. Addig is nyugodtan lehet használni. Bár vigyázz, mert akinek nincs Dropbox fiókja az nem fogja tudnk használni, amíg nem csinál.

Alap JavaScript hozzá

1

Két lényeges pont látható. Jelen példánkban, ha valaki nincs bejelentkezve, akkor egy üres lapot lát maga előtt. Ez azért sem fájdalmas, mert gomb nélkül egyértelműen bejelentkeztetjük a felhasználót, mert most nem akarunk szívni mindenféle dekorációval.

A másik a kliens meghívásakor paraméterben átadott key. Ezt az előző lépésből jól megjegyeztük. Nem? Akkor lapozzunk oda, másoljuk át.

Ha sikeresen bejelentkezett a felhasználó, akkor kiírjuk, hogy ki is ő, nehogy véletlenül ne tudja. Milyen dolog lenne már?

Mielőtt továbbmennénk csináljunk neki valami arcot is. A <title> tag alá (de még a head zárótag főlé) másoljuk be a stílust.

2

A lényeg

Itt az ideje, hogy a már bejelentkezett felhasználónk érjük el az adatbázist. Nem olyan bonyolult ez, mint amilyennek hangzik. Mikor betöltődik az alkalmazás egyből megpróbáljuk azonosítani a látogatót. Ha sikerült, akkor betöltjük a felhasználó információit, majd kiiratjuk. Ezek után inicializáljuk az adatbázist és minden elemet kikérdezve beillesztünk egy li elemet minden linknek. Minden link mellé rakunk egy törlés gombot, hogy lehessen őket törölni. Az egész alatt egy beviteli mező ékeskedik és jelzi számunkra, hogy ide tudjuk beírni a kívánt címet. Ha itt egy entert ütünk, akkor elmentjuk adatbázisba, majd beillesztjük a li elemet.

3

Elnézést a simán csak összecsapott bemutatóért, de ezt most gyorsan le akartam rendezni, hogy +Robert Cartman ezzel kapcsolatos kívánsága mielőbb teljesülhessen.

A végeredmény használható formában elérhető Dropbox-on keresztül, amint átengedik a szűrőn. Publikáláshoz ki kell tölteni egy egyszerű formot, amiben megadod, hogy mi ez és hol érhető el. 🙂

Kapcsolódó cikkek:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these