Dropbox Datastores y Drop-Ins

Recientemente, Dropbox anunció su nueva API de Datastore y Drop-ins, un par de nuevas y excelentes características destinadas a aprovechar el poder de acceso a los archivos y (ahora con Datastores) otra información general de cualquier dispositivo y mantener la información sincronizada en todas las plataformas, sin complicaciones..

Almacenes de datos

Hoy en día, la API del almacén de datos solo admite casos de uso de un solo usuario, pero los escenarios de múltiples usuarios están en planes futuros para Dropbox.

Comencemos discutiendo qué son los almacenes de datos. Puede pensar en ellos como una pequeña base de datos para mantener pares de información clave / valores. Ahora, puede decir que su aplicación podría usar un servicio web con una base de datos y que sus datos serán los mismos en todos los dispositivos, y si bien esto es cierto, al usar la API del almacén de datos, estamos eliminando la sobrecarga de manejar una copia de seguridad. servicio final.

Teniendo esto en cuenta, las aplicaciones que no necesitan almacenar una gran cantidad de datos de usuarios y no requieren un gran procesamiento, pueden delegar la administración de la base de datos a Dropbox y olvidarse de manejarla manualmente. Tomemos por ejemplo un juego multiplataforma. Desearía permitir que el usuario lo juegue en su iPad por la mañana, vaya al trabajo y mientras esté en el tráfico, continúe jugando en su iPhone. En este escenario, normalmente necesitará que el usuario inicie sesión en el sistema, juegue y luego guarde su progreso..

Ahora, con la API del almacén de datos, puede olvidarse de todo el proceso de inicio de sesión y la sobrecarga de manejar los datos de progreso, simplemente use el SDK proporcionado y almacene la información que desea almacenar, más tarde ese día cuando su usuario abra su aplicación desde otro Dropbox. dispositivo conectado, puede recuperar fácilmente su información. En este caso, Dropbox maneja el almacenamiento, la seguridad y la privacidad de la información..

Aunque, a partir de ahora, la API del almacén de datos solo admite casos de uso de un solo usuario. Según Dropboxer Steve M., los escenarios multiusuario están en planes futuros para Dropbox.

Aplicación de TODOs persistentes

Si alguna vez ha utilizado un marco / biblioteca de JavaScript y ha encontrado aplicaciones de ejemplo, es probable que en alguna de esas aplicaciones haya una aplicación de TODO de algún tipo. Por lo tanto, con el espíritu de mantener las cosas coherentes y demostrar algunas de las características más comunes, construyamos una aplicación TODO utilizando la API del almacén de datos de Dropbox..

Como este es un tutorial sobre las funcionalidades de Dropbox que se ofrecen a los desarrolladores, no voy a explicar el HTML ni el CSS en la aplicación, puede encontrarlos en los archivos que acompañan a este tutorial..

Paso 1 - Configuración de la aplicación

En primer lugar, como con la mayoría de las API públicas, necesitamos crear una nueva aplicación dentro del sistema. Para hacer esto, inicie sesión en su cuenta de Dropbox y diríjase a la Consola de aplicaciones. Haga clic en "Crear aplicación", seleccionar "Aplicación API de Dropbox" y "Sólo almacenes de datos" y finalmente ponle un nombre a tu aplicación.

Puede estar tentado a seleccionar "Archivos y almacenes de datos", Sin embargo, si su aplicación no está utilizando este permiso, cuando solicite el estado de producción, se rechazará, respete las políticas de Dropbox para cada aplicación que cree..

Ahora tienes una nueva aplicación en Dropbox y puedes comenzar a utilizar la API del almacén de datos (y otros recursos). Para hacer esto, necesitarías tu Clave de aplicación. Si usa el SDK de JavaScript, como lo haremos en este tutorial, no necesita su App secreta (mantén esta cadena en secreto).

Paso 2 - Agregar el SDK

Vamos a utilizar el SDK de JavaScript proporcionado por Dropbox para interactuar con la API del almacén de datos. Para instalarlo, simplemente agregue la siguiente declaración de script a su documento HTML encima el script para su aplicación.

Paso 3 - Creando nuestra aplicación

Nuestra aplicación será un único archivo JavaScript bajo la "js" carpeta. Crear un nuevo "app.js" archivo con el siguiente código:

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

Lo que esto hace es crear un nuevo objeto de Dropbox Client usando la clave de la aplicación obtenida de la consola de la aplicación. Luego define nuestro objeto de aplicación y cuando todo está listo, lo llamamos en eso método.

Comprobando la sesión del usuario

Lo primero que debe hacer nuestra aplicación es verificar si tenemos un token de acceso para el usuario de nuestra aplicación. Agregue el siguiente código a la en eso método:

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

Aquí estamos tratando de autenticar al usuario de la aplicación en el servidor API de Dropbox. Estableciendo el interactivo opción a falso, Le pedimos al método que no redirija al usuario al sitio de Dropbox para la autenticación, de esta manera nuestra aplicación puede continuar su flujo normal. Vamos a enviar manualmente al usuario allí más tarde.

Ahora debemos verificar si el usuario está autenticado y, de ser así, proceder a cargar sus datos. Agregue el siguiente código a su CheckClient método:

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

Aquí estamos actualizando nuestra interfaz en función de si el usuario ha sido autenticado o no..

Autentificando al usuario

Hasta ahora, nuestra interfaz de aplicación se está actualizando en consecuencia, si el usuario está autenticado o no. Ahora vamos a manejar el proceso de autenticación del usuario en el sistema. Agregue el siguiente código a la más declaración de la CheckClient método:

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

Esto es simplemente una devolución de llamada que se llama cuando el usuario hace clic en el "Conectar Dropbox" Botón en la interfaz. Tenga en cuenta que no estamos configurando el interactivo Opción esta vez, permitiendo así la redirección. Si el usuario no ha iniciado sesión en Dropbox, se mostrará un formulario de inicio de sesión y el sistema le pedirá al usuario que permita la aplicación..

Recuperar datos de usuario

Una vez que se le haya otorgado acceso a la aplicación, el usuario se redireccionará a nosotros. En este caso, la llamada a la es autenticado el método devolverá verdadero, en este punto necesitamos recuperar los datos almacenados de Dropbox del usuario. Agregue el siguiente código a la Si declaración de la CheckClient método:

client.getDatastoreManager (). openDefaultDatastore (function (error, Datastore) if (error) console.log ('Error del almacén de datos:' + error); todosList = Datastore.getTable ('todos'); TodosApp.updateTodos () ; Datastore.recordsChanged.addListener (TodosApp.updateTodos););

Este método recupera el almacén de datos del usuario autenticado y accede al todos mesa. Contrariamente a una tabla SQL, la estructura de la tabla no tiene que definirse antes de su uso, de hecho, la tabla ni siquiera existe hasta que le agregamos datos.

Lo que esto significa también es que la tabla puede contener cualquier dato, y un registro no tiene que tener los mismos datos que los otros. Sin embargo, es una buena práctica preservar una estructura similar, si no igual, entre los registros..

Registros de renderizado

En este punto, tenemos la información de todos del usuario, sin embargo, no se muestra al usuario. Para hacer esto, simplemente agregue el siguiente código a la updateTodos método:

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

Este método simplemente establece un elemento contenedor para la etiqueta HTML que contendrá nuestra lista de todos, luego recuperamos los registros en nuestro todos mesa llamando al consulta Método de la API del almacén de datos. A continuación, borramos la lista de elementos y, finalmente, representamos cada registro en la pantalla..

Borrando un registro

Ahora que tenemos la capacidad de recuperar los TODO almacenados del usuario en el inicio de la aplicación, vamos a trabajar para eliminar esos registros. En nuestro método de render, crearemos un X botón. Agregue el siguiente código al final de la updateTodos método:

$ ('botón li') .hacer clic (función (e) e.preventDefault (); var id = $ (this) .parents ('li') .attr ('data-record-id'); todosList.get (id) .deleteRecord (););

En este código solo obtenemos la carné de identidad del registro a eliminar, recupere el registro real llamando al obtener método, y elimínelo llamando eliminar el registro Sobre el objeto obtenido. Desde que configuramos previamente el registros cambiados Callback, nuestra interfaz se actualizará como magia..

Actualización de un registro

Hasta ahora todo bien, podemos recuperar una lista de tareas del almacén de datos del usuario y podemos eliminar un registro del mismo. Ahora, ¿qué hay de actualizar un registro? Para esta nueva función, vamos a agregar la posibilidad de marcar un registro como terminado o no. Agregue el siguiente código al final de la updateTodos método:

$ ('li input') .click (función (e) var el = $ (e.target), id = el.parents ('li') .attr ('data-record-id'); todosList.get (id) .set ('completed', el.is (': checked')););

Al igual que con el método de borrar, recuperamos el carné de identidad del objeto a actualizar, recuperar el objeto de registro en sí, y establecer su terminado Propiedad según su estado actual..

Creando un Registro

Finalmente, necesitamos poder crear nuevos registros en el almacén de datos del usuario. Para hacer esto, necesitamos reaccionar ante el evento de envío de formulario que el agregar todo la forma se activará. Agregue el siguiente código al final de la Si declaración en nuestro CheckClient método:

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

Esto es simplemente un oyente para el evento de envío en el agregar todo formar. Ahora para la creación del registro real. Agregue el siguiente código a la crearTodo método:

e.preventDefault (); todosList.insert (todo: $ ('#todo') .val (), creado: nueva Fecha (), completado: falso); $ ('#todo') .val (");

Con esto, hemos completado nuestra aplicación de ejemplo. Como puede ver, las operaciones CRUD para nuestros datos se han vuelto realmente simples y podemos acceder a ellas a través de múltiples dispositivos. Al usar este servicio, no tenemos la necesidad de crear un servicio de back-end completo para almacenar la información del usuario.

Datastore Extras

Como un servicio adicional para desarrolladores, Dropbox te permite explorar los datos dentro de tus almacenes de datos. Para verificar esto, vaya a la consola de la aplicación y seleccione Examinar datasores del submenú, seleccione la aplicación para la que desea verificar los almacenes de datos y se le presentará una lista de las tablas existentes y cada registro en la tabla.

Límites de espacio

Al crear almacenes de datos, debe tener en cuenta la cantidad de información que planea almacenar. Cada aplicación tiene hasta cinco MB por usuario, para usar en todos los almacenes de datos. Mientras sus datos no alcancen este límite, el almacén de datos no contribuirá a la cuota de Dropbox del usuario. Tenga en cuenta que cualquier dato que supere este límite contará para la cuota de almacenamiento de Dropbox del usuario, y las operaciones de escritura pueden ser limitadas.

Tipos de campo

Los registros del almacén de datos se pueden ver como objetos JSON, sin embargo, existen ciertas restricciones sobre los datos que puede contener un campo, por ejemplo, aunque puede ver un registro como un documento JSON, no puede tener documentos incrustados. Los tipos de datos que puede almacenar son los siguientes:

Cuerda
Booleano
Entero - 64 bits firmados
Punto flotante
Fecha - marca de tiempo similar a POSIX
Bytes: datos binarios arbitrarios de hasta 100 KB
Lista

Una lista es un tipo especial de valor que puede contener una ordenado Lista de otros valores, pero no listas en sí mismas..

Drop-Ins

Otra gran característica agregada a Dropbox para desarrolladores son Drop-ins. Hay dos tipos de Drop-ins, el Selector y el Ahorro. Con estas nuevas funciones, puede agregar soporte a su aplicación para seleccionar (para compartir o algún otro propósito) archivos directamente desde Dropbox con el Selector y para almacenar directamente archivos en Dropbox con el Ahorro.

Así que continuando con nuestro ejemplo, vamos a agregar Drop-ins a nuestra aplicación TODOs.

Paso 1 - Configuración

Al igual que con la API del almacén de datos, necesitamos crear una aplicación para Dropins, dirigirse a la consola de la aplicación, seleccionar Crear nuevo, escoger Aplicación Drop-in y dale un nombre.

Ahora tenemos una nueva aplicación, al contrario de las aplicaciones para otras API de Dropbox, esta no necesita acceso de producción, así que una vez que esté listo, puede ofrecérsela a sus usuarios sin problemas..

Ahora, lo único que tenemos que hacer para agregar soporte Drop-ins a nuestra aplicación es agregar el SDK, agregar el siguiente código a la guiones Declaraciones en el archivo HTML, encima el script para su aplicación:

Nota la carné de identidad con un valor de dropboxjs, Si elimina o cambia esto, Dropbox no podrá obtener su clave de aplicación, por lo tanto, romperá la funcionalidad de Drop-in..

Paso 2 - Selector

Bien, ahora que tenemos la API de Drop-ins en su lugar, comencemos con el Selector de Drop-in. Para agregar el Elija de Dropbox botón, usa el siguiente código.

Esto generará el botón para usted y cuando haga clic en él, se abrirá una ventana que le permitirá seleccionar los archivos del Dropbox del usuario. Para estilizar este elemento, usa la clase. dropbox_choose. En mi caso, simplemente lo centraré en la pantalla. los tipo de enlace de datos atributo especifica si el enlace obtenido será un directo enlace al archivo (útil para descargar o visualizar) o una vista previa, en cuyo caso, ir al enlace lo llevará a la interfaz de Dropbox.

Ambos enlaces tienen desventajas, por ejemplo, un enlace directo caducará dentro de las cuatro horas de su creación, y un enlace de vista previa puede dejar de funcionar si el usuario que posee el archivo lo elimina o lo cambia. El tipo de enlace de vista previa es el predeterminado que utiliza el selector.

Trabajando con el resultado

Al agregar el código anterior se generará un botón "Elegir de Dropbox", que al hacer clic nos mostrará una ventana para seleccionar el archivo deseado. Para recuperar los archivos seleccionados, sí, admite la selección múltiple, su aplicación debe responder a la DbxChooseSuccess evento en el elemento de entrada. Agregue el siguiente método a su aplicación de JavaScript:

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

Después de crear el detector de eventos, debe agregarlo a la aplicación, en la parte inferior de su en eso Método, agregue la siguiente línea de código:

TodosApp.listenChooser ();

Este evento nos dará una carga útil que contiene, entre otras cosas, una matriz de archivos seleccionados por el usuario. En este caso, estamos seleccionando un solo archivo y agregando su propiedad de enlace a una etiqueta de imagen que ya está en el DOM. Cada archivo de la matriz contiene algunos otros campos, como el tamaño del archivo, su nombre, etc. Para obtener una lista completa de las propiedades de cada archivo, vaya a la documentación de selección de Selector..

Paso 3 - Ahorrador

Por último, pero no menos importante, tenemos el Saver Drop-in. Este Drop-in te permite guardar archivos directamente en la carpeta de Dropbox del usuario. Al igual que con el Selector, necesita una aplicación Drop-in para usar la API. Afortunadamente, ya creamos uno y trabajar con este Drop-in es incluso más fácil que todo lo demás hasta ahora, simplemente crea un enlace de la siguiente manera:

los href y clase los parámetros son necesarios para que el Drop-in funcione. los href es el archivo que se guardará en la carpeta de Dropbox del usuario y el clase le dice a la aplicación que es un Saver Drop-in. Además, puede agregar un tercer parámetro: nombre de archivo de datos que se utilizará como un nombre fácil de usar para guardar el archivo. Si no especifica uno, el nombre será tomado de la href parámetro.

Al igual que con el Selector, hay un par de cosas más avanzadas que puede hacer con el Saver Drop-in, pero para obtener una referencia, consulte la documentación oficial..

Conclusión

Como puede ver con estas nuevas funciones en los Servicios para desarrolladores de Dropbox, podemos agregar potentes capacidades de almacenamiento de datos a nuestras aplicaciones web y móviles fácilmente. Esto nos libera de la sobrecarga de crear un servicio de back-end cuando se necesita poco procesamiento de datos.

Es de esperar que ahora se sienta cómodo al agregar el soporte de CRUD a su aplicación usando la API del almacén de datos y agregando las capacidades para leer y escribir desde las cuentas de Dropbox de su usuario, usando la API de Drop-ins. Tenga en cuenta que ambas API son realmente nuevas, la API del almacén de datos todavía está en Beta Versión, sin embargo se puede ver el potencial que representan. Asegúrese de consultar la documentación oficial de Dropbox para obtener más información sobre estos y otros excelentes servicios que la plataforma tiene para ofrecer..

Código