Comienza a Construir tu Blog con Parse.js: Trabajando con Datos

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image — What You'll Be Creating

La última vez, configuraste un servidor local (XAMPP), un servidor web (Página GitHub), y un servidor de base de datos (Parse.com). También realizaste el HTML de una página de blog y embebiste código Parse.js básico para enlazar a la base de datos. En este sesión, te enseñaré como crear, recuperar y generar tu primer objeto.

Si puedes soportar usar Parse.com como tu panel de administración, puedes crear fácilmente portafolios, blogs, páginas landing, etc. por ti mismo después de aprender esta sesión.

El concepto de una Clase y una Instancia

Antes de que nos sumerjamos en el código base y hagamos que suceda, déjame asegurarme de que estás familiarizado con clases e instancias. De nuevo, siéntete libre se saltar esta parte si ya estás familiarizado con esos conceptos.

De acuerdo con Wikipedia:

Una clase es "una plantilla de código de programa extensible para crear objetos, proporcionar valores iniciales para estado (miembros de variables) e implementaciones de comportamiento (funciones de miembro, métodos);" y "cuando un objeto es creado por un constructor de la clase, el objeto resultante es llamado una instancia de la clase".

Si esas definiciones son demasiado abstractas para ti, pongámoslas en el contexto de un blog.

Una Clase de Blog

Piensa sobre los componentes comunes de todos los blogs. Estos probablemente tienen un título, un autor, una página de contenido, una hora a la que fueron creados, etc. Estos atributos compartidos harán una plantilla común para todos los blogs que hacemos, de ahí la clase de Blog:

Una Instancia de Blog

Y cuando tenemos la clase Blog, cada blog específico que encaja en esta plantilla sería una instancia de la clase Blog:

Para ayudar a identificar cuando nos estamos refiriendo a la clase Blog y cuando nos estamos refiriendo a un blog específico, siempre capitalizamos la primer letra de una clase. Así que "Blog" para la clase blog y "blog" para una instancia de blog. Esta regla aplica tanto para este artículo tutorial como para el código JavaScript que estarás escribiendo.

También, notarás que en Parse.com, verás la palabra "objecto" demasiado. En este contexto, estaremos utilizando la regla de capitalización y uso de la palabra "objeto" para instancia y "Objeto" para clase. Pronto te acostumbrarás a eso.

Una Tabla de Blog

Debido a que una clase define todos los atributos que sus instancias tienen, es fácil almacenar todas las instancias de una clase dada en una tabla: cada atributo sería una columna, y cada instancia sería una fila:

Y así es exactamente como vas a almacenar datos en Parse.com

Creando una Clase de Blog

Ahora continuemos y creémosla en Parse.com.

Paso 1: Agrega una Clase Blog

Primero, ve a tu dashboard en Parse.com, encuentra tu proyecto y ve a "Core" . "Data" (anteriormente Data Browser). Después, da clic a "Agregar Clase".

Como puedes ver en la captura, necesitas crear una clase personalizada para tus blogs. Nombrémosla Blog. Siempre querrás que tus nombres de clase sean totalmente claros y mencionen lo que almacenan.

Y como puedes ver, ahora tienes una clase vacía personalizada en Parse.com:

Cada clase personalizada tendría cuatro atributos de sistema:

objectId - un identificador único generado de manera automática por Parse cuando un nuevo objeto es creado. De esa manera, el programa siempre sabe a qué objeto te estás refiriendo. (Como puedes ver, aquí objeto significa instancia.)
createdAt - una estampa de tiempo generada automáticamente por Parse cuando creas un objeto.
updatedAt - una estampa de tiempo generada automáticamente y actualizada por Parse cada vez que actualizas ese objeto.
ACL - una Lista de control de acceso a nivel de objeto que define quien puede leer y escribir a ese objeto. Si no está definido, se pone por defecto al acceso de control a nivel de clase. lo discutiremos en sesiones futuras. Puedes dejarlo vacío por ahora.

Paso 2: Agrega Columnas a la Clase Blog

Después, continuemos y creemos columnas para los atributos que definen un blog. Para mantenerlo tan simple como sea posible, hagamos solo dos de ellas: title y content.

Da clic en el botón "+ Col" para crear una nueva columna. Establece el tipo a "String" y nómbralo title.

Repite el mismo proceso y crea una columna content, también establece el tipo a "String".

Paso 3: Agrega Algunos Blogs

¡Tiempo de agregar algunos blogs! Da clic en el botón "+ Row" y da doble clic sobre las celdas title y content para agregar algo de contenido:

Nota que también puedes poner sintaxis HTML en la columna content. De hecho, todas las columnas string puede almacenar correctamente sintaxis HTML. Sin embargo, recuerda no usarlo de más. En este caso, la columna título probablemente no debería contener sintaxis HTML.

Como mencioné antes, ya que Parse.com te deja manipular tu base de datos de esta manera, puedes usarla totalmente como tu panel de administración si no quieres escribir el tuyo. Y una vez que aprendes como generar esos datos en tu sitio web, puedes crear fácilmente un blog dinámico o portafolio propio. Continuando a la siguiente parte, te mostraré cómo hacer eso.

Recuperando Datos de Blog

Regresa a tu archivo blog.js. ¡Es tiempo de sacar el código de prueba y llevar esos datos de blog de Parse.com a tu sitio web!

Primero, extiende una clase JavaScript de la clase Blog en Parse.com:

1	var Blog = Parse.Object.extend("Blog");

Pensando sobre una página de inicio de blog, probablemente quieras tener una lista de blogs de una sola vez. Esa lista de objetos de la misma clase es llamada una colección por Parse. Definamos también eso:

1	var Blogs = Parse.Collection.extend({
2	model: Blog
3	});

Nota que tanto Blog como Blogs son clases. Son plantillas abstractas para blogs y colaciones de blogs. Puedes tener blogs diferentes, específicos y colecciones de blogs. Esas son sus instancias.

Así que ahora, para poder tener una colección real de todos los blogs que agregaste en Parse.com, necesitas crear una nueva instancia de la colección Blogs (nota que la primer letra no debería estar en mayúscula aquí):

1	var blogs = new Blogs();

Si no especificamos nada y solo recuperamos esa nueva colección con datos, traerá todas las filas en la tabla Blog por defecto.

Recuperemoslo e imprimamoslo en la consola:

blogs.fetch({
  success: function(blogs) {
		console.log(blogs);
	},
	error: function(blogs, error) {
		console.log(error);
	}
});

Carga el sitio wen en tu servidor local de nuevo, y revisa tu consola en tus herramientas de desarrollador, deberías poder ver esto:

¡Ahora tienes los datos!

Muestra Datos en la Página

Antes de que mostremos los datos de blog en la página, necesitamos preparar una plantilla HTML para eso.

Paso 1: Limpia HTML

Limpia todo dentro de .blog-main y reemplaza eso con un simple contenedor:

1	<div class="col-sm-8 blog-main">
2	<div class="main-container"></div>
3	</div>

Después, si echas un vistazo a la plantilla original de blog, encontrarás que la estructura HTML de una publicación puede ser simplificada así:

<div class="blog-post">
    <h2 class="blog-post-title"><a href="#">A title</a></h2>
	<p class="blog-post-meta">At time by an author</p>
	<div>Some content</div>
</div>

Todo lo que queremos es reemplazar esos contenedores de texto con los datos de cada blog que tenemos en Parse.com.

Paso 2: Prepara la Plantilla de Blog

Para hacer eso, primero necesitamos cambiar el HTML a una plantilla, lo cuál toma un objeto de datos y lo cambia a una cadena de HTML.

Queremos que la plantilla tome un arreglo de blogs:

[{
    title: 'Hello World',
	content: 'The first blog post!'
}, {
	title: 'Second Blog',
	content: '<p>You can put HTML in content, too.</p>'
}, ...]

Y lo genere como HTML así:

<div class="blog-post">
    <h2 class="blog-post-title"><a href="#">Hello World</a></h2>
	<p class="blog-post-meta">At time by an author</p>
	<div>The first blog post!</div>
</div>
<div class="blog-post">
	<h2 class="blog-post-title"><a href="#">Second Blog</a></h2>
	<p class="blog-post-meta">At time by an author</p>
	<div><p>You can put HTML in content, too.</p></div>
</div>

Te mostraré como usar handlebars.js para hacer eso en este tutorial pero también puedes usar underscore.js, mustache y otras plantillas que prefieras.

Para usar handlebars.js, primero lo agregamos al index.html bajo parse.js.

1	<!-- Handlebars.js -->
2	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>

Después, tomemos el HTML limpio de una publicación de blog y lo ponemos en una etiqueta especial <script> para handlebars justo sobre las etiquetas <script> para los archivo JavaScript. También démosle el id de #blogs-tpl. De esta manera, handlebars sabría que es una plantilla, y tendrías una forma de referirte a ella:

<script id="blogs-tpl" type="text/x-handlebars-template">
    <div class="blog-post">
		<h2 class="blog-post-title"><a href="#">A title</a></h2>
		<p class="blog-post-meta">At time by an author</p>
		<div>Some content</div>
	</div>
</script>

Después, para hacer saber a handlebars en donde poner el valor de title y content, necesitas cambiar "A title" a {{title}} y "Some content" a {{{content}}}. Hnadlebars.js identifica el contenido dentro de "llaves dobles" {{}} como variables.

<script id="blogs-tpl" type="text/x-handlebars-template">
    <div class="blog-post">
		<h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
		<p class="blog-post-meta">At time by an author</p>
		<div>{{{content}}}</div>
	</div>
</script>

Nota que para content, usamos {{{}}} en lugar de solo {{}}. Eso es porque handlebars.js escapa valores HTML por defecto. Usar "Triples llaves" {{{}}} mantiene toda la sintaxis HTML en el contenido.

El cambio final que necesitas hacer al #blogs-tpl es envolver la plantilla de blog dentro de {{#each blog}} {{/each}}, de manera que toma un arreglo de objetos y los genera uno por uno.

<script id="blogs-tpl" type="text/x-handlebars-template">
    {{#each blog}}
	<div class="blog-post">
		<h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
		<p class="blog-post-meta">At time by an author</p>
		<div>{{{content}}}</div>
	</div>
	{{/each}}
</script>

Paso 3: Generar Blogs

Ahora que tenemos una plantilla, regresemos a blog.js y generemos esos blogs en la página.

Para hacer eso, estarás creando una vista para la colección de blog. El concepto de una vista es del patrón arquitectónico MVC (model-view-controller), y Parse sigue ese patrón. No me adentraré en MVC aquí. Solo saber que una instancia de vista para una colección de blog genera HTML para este y maneja todos sus eventos. Y una clase Vista es la plantilla abstracta para esa instancia.

Puede ser confuso por ahora, pero sería más claro mientras escribo el código. Escribamos una clase BlogsView:

var BlogsView =  Parse.View.extend({
    template: Handlebars.compile($('#blogs-tpl').html()),
	render: function(){ 
		var collection = { blog: this.collection.toJSON() };
		this.$el.html(this.template(collection));
	}
});

Así como extendemos las clase Blog de Parse.Object y la clase Blogs desde Parse.Collection, puedes simplemente extender una nueva clase de Vista desde Parse.View de manera que tenga todos los valores predefinidos y funciones desde Parse.

Aquí, la variable template obtiene la plantilla que preparamos antes. Después, la función render() obtiene los datos en this.collection, los convierte en formato JSON, los genera con la plantilla handlebars, y los asigna a this.$el.

Después, cambiemos el callback success de blogs.fetch() para crear una nueva instancia de BlogsView, genera esa nueva instancia, y la pone en el $('.main-container') en la página.

success: function(blogs) {
    var blogsView = new BlogsView({ collection: blogs });
	blogsView.render();
	$('.main-container').html(blogsView.el);
}

Nota cuando creas una nueva instancia de BlogsView, pasas blogs, la información de blogs que obtienes del servidor Parse, ese valor se vuelve this.collection para la función render(). Y cuando pones el HTML en $('.main-container'), usas el valor de blogsView.el, que era el contenido de this.$el, creado por la función render(). (Aquí blogsView.$el = $(blogsView.el)) Así es como la clase View y la instancia view funcionan.

Ahora refresquemos la página: http://localhost/blog/

¡Y está funcionando! ¡Ahora puedes solo empujarlo a tu Página GitHub y tener un sitio de contenido dinámico funcional! Si tomas un poco de tiempo para cambiar la plantilla de blog y modificar un poco el código, puedes crear portafolios fácilmente y otros sitios web de contenido.

Conclusión

Hoy, has creado tu primera clase en Parse.com. También aprendiste cómo agregar contenido en esa clase en Parse.com y cómo generarlo en tu sitio web. Podría haber algunos cuantos conceptos nuevos para ti, pero estoy seguro que te familiarizarás con esos muy pronto.

En la siguiente sesión, comenzaremos construyendo la página de administración para el sistema de blog. Crearás tu segunda clase - la clase User. También aprenderás como manejar inicio de sesión de usuario, y crear dos nuevas vistas: vista de inicio de sesión y vista de bienvenida. Así que permanece en sintonía, muchas habilidades están por lllegar.

Creo que ustedes podrían tener montones de diversión con lo que has aprendido en esta sesión. Déjame saber si este tutorial te ayudó a crear algo. Y como siempre, revisa el archivo fuente si te atoras y deja un comentario si te encuentras con cualquier dificultad siguiendo el tutorial.