Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)
Soy un gran admirador de Parse, una tecnología que hace que el desarrollo de aplicaciones web y móviles sea más rápido. Te permite almacenar, sincronizar y enviar datos en la nube sin escribir una línea de código del lado del servidor. Sigue leyendo para ver cómo puedes integrar Parse en tu próximo proyecto.
Un poco de trasfondo
¡Interactuar con la base de datos es extremadamente indoloro!
Vamos a dar un paso atrás y evaluar dónde estaba el desarrollo web hace cinco años. Estábamos usando lenguajes como PHP / Ruby en el back-end que interactuaba con bases de datos relacionales (como MySQL), y nuestro front-end estaba lleno de varios archivos JavaScript. No sé sobre ti, pero la mayoría de mis proyectos fueron en algún servidor con una pequeña cantidad de espacio en disco, RAM y ancho de banda.
Muchas tecnologías nuevas aprovechan la nube, y no es raro ver a los desarrolladores aprovechando estos servicios rentables, como AWS, Amazon S3, Heroku y más. La introducción de estos servicios esencialmente alteró el panorama del desarrollo web; Más de lo que hacemos reside en la nube.
Hoy, vamos a ver a Parse, una startup que ofrece un sistema de gestión de datos basado en la nube. Al aprovechar su servicio, pude crear rápidamente nuevas aplicaciones móviles y web. Vamos a utilizar Parse para crear la aplicación web obligatoria de tareas pendientes, y espero que te dé una idea de lo que el servicio puede ofrecer.
¿Qué es Parse?
En pocas palabras, Parse es un sistema de gestión de datos basado en la nube que te permite desarrollar rápidamente aplicaciones web y móviles.
Hace que desarrollar aplicaciones sea realmente fácil al quitar el back-end de tus manos.
Entonces, ¿cómo funciona esto? Bueno, supongamos que eres un desarrollador web. Puedes agregar el archivo Parse JavaScript en tu página, obtener una clave API y comenzar a guardar "objetos" en la nube con solo unas pocas líneas de código. Parse te libera de configurar una pila del lado del servidor.
Piensa en esto por un minuto. Tradicionalmente, configura una pila del lado del servidor (LAMP o RoR, ASP.NET u otra cosa), configura una base de datos y luego interactúa con ella a través de Ajax en el cliente. Parse acaba de reducir todo ese trabajo a unas pocas líneas de código.
En este tutorial, utilizaremos el SDK de JavaScript de Parse. Sin embargo, no estás limitado a usar solo JavaScript; Hay bibliotecas Parse en muchos lenguajes diferentes, incluidos PHP, NodeJS, Java, C # y más. Puedes encontrar todas las bibliotecas disponibles aquí.
Usando Parse para tus proyectos basados en la web
Antes de comenzar, tomemos un minuto y pensemos cómo se podría crear una aplicación de lista de tareas tradicional usando una pila LAMP.
- Crearías una base de datos MySQL.
- Es posible que tengas una clase PHP responsable de realizar operaciones CRUD. Opcionalmente, podrías tener un montón de funciones PHP.
- Podrías usar JavaScript y Ajax en el lado del cliente para llamar a los scripts PHP respectivos y pasar cadenas de consulta.
- Deberías desinfectar la entrada para protegerte contra los ataques XSS, así como preocuparte por la seguridad de la base de datos en general.
- Si se trata de una aplicación colaborativa, deberás realizar un seguimiento de diferentes usuarios y administrar sus listas. Más código, más tablas y más esquemas.
- Tendrás que asegurarte de que tu base de datos se mantenga eficiente.
Tienes la idea. Hay mucho en qué pensar y muchas áreas para cometer errores. Parse maneja estos problemas por nosotros.
Crear una cuenta en Parse
Antes de hacer algo, crea una cuenta gratuita de Parse. Luego crea una nueva aplicación llamada EnvatoTodo.
Descargar el proyecto vacío
Parse proporciona una excelente guía de inicio rápido para ayudarte a comenzar. Selecciona JavaScript y elije EnvatoTodo del menú desplegable en el paso 2 (que se muestra en la imagen a continuación). Parse generará un archivo zip que contiene Parse SDK e index.html.
El lado del cliente
Antes de comenzar a interactuar con Parse, configuremos una estructura básica del lado del cliente para nuestra aplicación. Como la interfaz de usuario no es el foco de esta aplicación, solo te mostraré el código que utilicé. No es nada lujoso, pero estoy usando YUI3. Opcionalmente, puedes usar jQuery. Todo está en index.html.
1 |
<!DOCTYPE html>
|
2 |
<head>
|
3 |
<meta charset="utf-8"> |
4 |
|
5 |
<title>Todo App Built on Parse</title> |
6 |
<meta name="description" content="My Parse App"> |
7 |
<meta name="viewport" content="width=device-width"> |
8 |
<link rel="stylesheet" href="css/reset.css"> |
9 |
<link rel="stylesheet" href="css/styles.css"> |
10 |
<script src="https://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script> |
11 |
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.0.19.min.js"></script> |
12 |
|
13 |
<style>
|
14 |
body { |
15 |
font-family: "HelveticaNeue-Light", sans-serif; |
16 |
font-weight:300; |
17 |
}
|
18 |
h2 { |
19 |
font-size:16px; |
20 |
text-transform:uppercase; |
21 |
}
|
22 |
a { |
23 |
text-decoration:none; |
24 |
}
|
25 |
.hidden { |
26 |
display:none; |
27 |
}
|
28 |
#main { |
29 |
text-align:center; |
30 |
}
|
31 |
input { |
32 |
padding: 10px; |
33 |
border-radius: 3px; |
34 |
border:1px solid #ccc; |
35 |
box-shadow: inset 0 0 10px #eee; |
36 |
font-size:24px; |
37 |
}
|
38 |
|
39 |
#input-wrapper { |
40 |
padding-bottom:15px; |
41 |
}
|
42 |
|
43 |
#list-item-submit { |
44 |
background: #73D175; |
45 |
color: white; |
46 |
box-shadow:none; |
47 |
border-color: #599E5A; |
48 |
}
|
49 |
|
50 |
li { |
51 |
text-align:left; |
52 |
font-family:sans-serif; |
53 |
list-style: none; |
54 |
padding: 10px 0; |
55 |
border-bottom:1px solid #ccc; |
56 |
margin-left:-10px; |
57 |
}
|
58 |
li input { |
59 |
margin-right:15px; |
60 |
}
|
61 |
</style>
|
62 |
</head>
|
63 |
|
64 |
<body>
|
65 |
<h1>Todo List built on <a href="http://www.parse.com" alt="Parse">Parse</a></h1> |
66 |
<div id="main"> |
67 |
<div id="input-wrapper"> |
68 |
<input type="text" id="list-input" placeholder="Enter a todo here..."> |
69 |
<input type="button" id="list-item-submit" value="Add"> |
70 |
</div>
|
71 |
<div>
|
72 |
<h2>Incomplete Tasks</h2> |
73 |
<ul id="incomplete-items"> |
74 |
<li id="no-incomplete-message">There are no incomplete tasks! Consider adding one above.</li> |
75 |
</ul>
|
76 |
</div>
|
77 |
</div>
|
78 |
|
79 |
<!-- This is a template that we'll be using to populate our list items -->
|
80 |
<script id="todo-items-template" type="x/handlebars"> |
81 |
<li class="list-item"><input type="checkbox" id="{id}">{content}</li> |
82 |
</script>
|
83 |
|
84 |
<script>
|
85 |
//Use the YUI 'node' module.
|
86 |
YUI().use('node', function(Y) { |
87 |
|
88 |
//Lets declare some variables that we'll be using.
|
89 |
var ListItem, |
90 |
query, |
91 |
noTasksMessage = Y.one('#no-incomplete-message'), |
92 |
submitBtn = Y.one("#list-item-submit"), |
93 |
incompleteItemList = Y.one('#incomplete-items'), |
94 |
completeItemList = Y.one('#complete-items'), |
95 |
input = Y.one("#list-input"); |
96 |
|
97 |
//The rest of our application code will go below.
|
98 |
|
99 |
submitBtn.on('click', function(e) { |
100 |
|
101 |
/*
|
102 |
When the submit button is clicked, we want to get the contents of the input and save a new todo list item.
|
103 |
*/
|
104 |
|
105 |
});
|
106 |
|
107 |
|
108 |
/*
|
109 |
|
110 |
When a <li> is clicked, we want to save that item as being complete. We use 'delegate' here instead of 'on' so that we only create one event listener instead of one for each checkbox.
|
111 |
*/
|
112 |
|
113 |
incompleteItemList.delegate('click', function(e) { |
114 |
|
115 |
}, 'li'); |
116 |
|
117 |
|
118 |
/* We also want to get the 10 most recent incomplete tasks and add them to <div id="incomplete-items"></div> */
|
119 |
|
120 |
|
121 |
});
|
122 |
</script>
|
123 |
</body>
|
124 |
|
125 |
</html>
|
La parte importante a notar en el código anterior es la inclusión del archio Parse JavaScript, < script src="http://www.parsecdn.com/js/parse-1.0.19.min.js"> /script>.< /script>. Este archivo contiene el objeto Parse con el que interactuaremos.
Agregar clases en el navegador de datos
Parse te libera de configurar una pila del lado del servidor.
Volvamos a Parse. Ver el navegador de datos de EnvatoTodo (actualmente está vacío). El navegador de datos es similar a un servidor de base de datos MySQL, pero el DB Parse no tiene esquema. Si bien puedes especificar columnas en el Navegador de datos, en realidad puedes guardar cualquier objeto con JSON simple (no muy diferente de muchas bases de datos NoSQL / Document). Esta es una característica extremadamente importante y útil de Parse.
Vamos a seguir adelante y agregar una "clase" a la base de datos. Piensa en una clase como una mesa. La razón por la que se llama una clase es porque generalmente creará objetos de una clase determinada y luego guardará ese objeto en la base de datos.
Descargo de responsabilidad: JavaScript no tiene clases oficialmente (todavía), pero tiene el equivalente lógico. En aras de la simplicidad, utilizaré la terminología "clase" en este tutorial.
Parse tiene cinco tipos de clases.
- Las clases de usuario almacenan información específica del usuario, y Parse proporciona métodos sencillos como
signUp(),login()y más para ayudar con la administración de usuarios. - Las clases de instalación se usan generalmente para enviar notificaciones push para aplicaciones móviles. Sí, Parse admite notificaciones push a todos los clientes.
- Las clases de roles ayudan a segregar a los usuarios en roles específicos, controlando el acceso para leer / escribir en otras clases. Esto se llama LCA (lista de control de acceso) dentro de Parse.
- Las clases de productos almacenan datos de productos en la aplicación.
- Las clases personalizadas son para cualquier otra cosa.
Creemos una clase personalizada llamada ListItem. Una vez creado, notarás que ya tiene cuatro propiedades. Parse actualiza automáticamente las propiedades de cada clase que cree. Algunas clases, como las clases de usuario, pueden tener sus propias propiedades específicas.
Nuestros objetos ListItem contendrán una propiedad de content para mostrar lo que contiene Todo y una propiedad isComplete para indicar si se completó Todo. Podríamos agregar columnas para estas propiedades, pero Parse lo resolverá a partir de nuestro JSON.
Inicializando Parse
Volvamos a index.html para agregar algunos códigos. Lo primero que queremos hacer es inicializar Parse con nuestro ID de aplicación y clave de JavaScript. Estos se pueden encontrar en la pestaña Descripción general de tu aplicación dentro del Navegador de datos. Agrega la siguiente línea a su JavaScript, reemplazando APP_ID y JS_KEY con los valores apropiados:
1 |
Parse.initialize(APP_ID, JS_KEY); |
Guardando tareas pendientes
Comencemos agregando funcionalidad a nuestra aplicación. Primero guardaremos un elemento de la lista de tareas pendientes cuando el usuario haga clic en el botón Agregar. El siguiente código es todo lo que necesitamos para esta funcionalidad:
1 |
submitBtn.on('click', function(e) {
|
2 |
|
3 |
//Extend the native Parse.Object class. |
4 |
var ListItem = Parse.Object.extend("ListItem");
|
5 |
|
6 |
//Instantiate an object of the ListItem class |
7 |
var listItem = new ListItem(); |
8 |
|
9 |
//listItem is now the object that we want to save, so we assign the properties that we want on it. |
10 |
listItem.set("content", text);
|
11 |
listItem.set("isComplete", false);
|
12 |
|
13 |
//We call the save method, and pass in success and failure callback functions. |
14 |
listItem.save(null, {
|
15 |
success: function(item) {
|
16 |
//Success Callback |
17 |
}, |
18 |
error: function(gameScore, error) {
|
19 |
//Failure Callback |
20 |
} |
21 |
}); |
22 |
}); |
¡Interactuar con la base de datos es extremadamente indoloro! Cada clase personalizada en Parse hereda de Parse.Object; por lo tanto, ListItem es una subclase. El argumento de cadena "ListItem" le dice a Parse que esta clase se correlaciona con la tabla ListItem que creamos. Luego creamos un nuevo objeto ListItem, establecemos sus propiedades y llamamos a save().
Mostrando objetos
Para mostrar una lista de elementos de tareas pendientes, utilizaremos la API de JavaScript de Parse para consultar los diez elementos guardados más recientemente y enumerarlos debajo de la aplicación. Esto te dará una idea de cómo funcionan las consultas en Parse.
1 |
//Once again, we extend the Parse.Object class to make the ListItem class |
2 |
ListItem = Parse.Object.extend("ListItem");
|
3 |
|
4 |
//This time, we use Parse.Query to generate a new query, specifically querying the ListItem table. |
5 |
query = new Parse.Query(ListItem); |
6 |
|
7 |
//We set constraints on the query. |
8 |
query.equalTo('isComplete', false)
|
9 |
query.limit = 10; |
10 |
query.descending('createdAt');
|
11 |
|
12 |
//We submit the query and pass in callback functions. |
13 |
query.find({
|
14 |
success: function(results) {
|
15 |
//Success callback |
16 |
}, |
17 |
error: function(error) {
|
18 |
//Error Callback |
19 |
} |
20 |
}); |
Una vez más, es bastante simple y fácil de leer. El método Parse.Query()es bastante poderoso. Aquí, realizamos una consulta bastante básica, pero las consultas de Parse también pueden ser complejas. Puedes consultar expresiones regulares específicas, realizar consultas relacionales y muchas más. Asegúrate de visitar la Documentación de consulta para obtener más ejemplos y fragmentos de código.
Poniéndolo todo junto
Lo siguiente que debemos agregar es la capacidad de marcar un elemento de tarea pendiente como completo al marcar la casilla de verificación del elemento. Cada casilla de verificación tiene una id asociada con el objeto Parse que representa. Por lo tanto, cuando se hace clic en una casilla de verificación, necesitamos:
- Obtén la identificación.
- Consulta un objeto Parse con esa identificación.
- Obten el objeto Parse devuelto y actualiza su propiedad
isCompletecomotrue. - Guarda el objeto actualizado.
- Eliminarlo de la lista mostrada.
Así es como se ve ese código:
1 |
incompleteItemList.delegate('click', function (e) {
|
2 |
|
3 |
//keep a reference to this |
4 |
var self = this; |
5 |
|
6 |
//create a Parse query object |
7 |
var query = new Parse.Query(ListItem); |
8 |
|
9 |
//The query.get() method requires the objectId as its first argument. It returns the object with that id. |
10 |
query.get(self.one('input').get('id'), {
|
11 |
success: function(item) {
|
12 |
|
13 |
//Once the object is returned, we update its property and save it. |
14 |
item.set('isComplete', true);
|
15 |
item.save(); |
16 |
|
17 |
//Since the item is no longer incomplete, we remove it from the list. |
18 |
self.remove(); |
19 |
|
20 |
//If there's nothing in the list, show a message saying the list is empty. |
21 |
if (incompleteItemList.all('li').size() >= 1) {
|
22 |
noTasksMessage.removeClass('hidden');
|
23 |
} |
24 |
|
25 |
}, |
26 |
error: function(object, error) {
|
27 |
alert("Error when updating todo item: " + error.code + " " + error.message);
|
28 |
} |
29 |
}); |
30 |
}, 'li'); |
En este fragmento, consultamos un elemento individual con una id específica, lo actualizamos y lo guardamos. Luego lo eliminamos de la lista con self.remove().
En Parse, actualizar objetos es muy similar a guardar objetos: en ambos casos, llamamos a save(). Parse descubre si es un objeto existente (sucio) o un objeto completamente nuevo y realiza la acción adecuada.
Código fuente completo
¡Con eso, estamos listos! Bastante fácil, ¿no? Descarga el archivo ZIP adjunto y abre index.html para ver el código fuente completo.
Otras características
En este tutorial, vimos principalmente a Parse desde el punto de vista del desarrollo web. Sin embargo, el servicio se inició originalmente con los desarrolladores móviles en mente. Parse tiene un SDK muy completo para Android e iOS, y admite características como notificaciones push para todos los usuarios de su aplicación móvil.
Algunas otras características importantes que no cubrimos en este tutorial incluyen usuarios, roles y el almacenamiento de información relacional.
Parse hace que sea relativamente sencillo crear usuarios y asignarles diferentes roles. Por ejemplo, en un sistema de gestión de aprendizaje, puedes tener "Maestros", "Estudiantes" y "Administradores". Al asignar roles, puedes especificar qué tipo de usuario tiene acceso a ciertos objetos de Parse.
¿Qué hay de la seguridad?
Muchas nuevas tecnologías aprovechan la nube ...
Como desarrollador, me gusta que Parse se haga cargo de muchas de las preocupaciones de seguridad que tengo. Como se indica en el sitio web, los SDK de Parse están diseñados "para que normalmente no tenga que preocuparse por cómo se guardan los datos". Todavía existe el problema de que los usuarios tengan acceso a información que no deberían poder. Para abordar esta preocupación, Parse ofrece permisos a nivel de objeto y de clase.
Los permisos a nivel de objeto permiten que un desarrollador especifique una matriz de ID de objeto que tiene acceso para leer y / o escribir el objeto. Los permisos de nivel de clase permiten a un desarrollador especificar qué aspectos de una clase Parse se pueden manipular desde la API. Las siguientes operaciones se pueden permitir o denegar por clase: obtener, buscar, actualizar, crear, eliminar y agregar campos.
Pros y contras
Quiero destacar que Parse no es adecuado para todo tipo de proyecto. Aunque el plan gratuito es muy generoso, Parse es un servicio pago. Puede ser costoso si superas ciertos límites. Afortunadamente, el modelo de precios es muy transparente y deberías poder calcular cuánto puede costar tu aplicación. En términos generales, lo uso para proyectos más pequeños donde puedo anticipar un cierto límite cuando se trata de la cantidad de solicitudes de API que hago. Todavía tengo que probar Parse para un gran proyecto.
Un problema común con un servicio como Parse es el efecto de bloqueo.
Si usas Parse para un proyecto pequeño que de repente despega, puede ser difícil pasar a un servicio o plataforma diferente. Como puedes imaginar, reemplazar Parse con tu propio back-end implicaría una gran cantidad de refactorización. Esto no significa que no debas usar Parse, pero es algo a tener en cuenta.
Observaciones finales
En este tutorial, vimos cómo podemos usar Parse para crear una aplicación web relativamente simple. He usado este servicio para varios proyectos para varios clientes, y creo que el equipo de Parse es muy útil cuando surgen problemas. ¡Te animo a que pruebes el servicio y tomes tu propia decisión!
Divulgación: no tengo ninguna relación con Parse ni con ninguno de sus empleados. Solo soy un desarrollador que utiliza su servicio, y considero que es una adición útil a mi flujo de trabajo de desarrollo.
By
