Comienza a construir tu blog con Parse.js

Spanish (Español) translation by Joaquin Revuelta (you can also view the original English article)

Final product image — What You'll Be Creating

¿Alguna vez te has sentido emocionado por la idea de un proyecto web, pero te has dado cuenta de que sería patético echarlo a rodar y funcionar en un servidor? Con Parse.js, cualquiera que entienda los principios básicos de HTML, CSS y JavaScript puede crear sitios dinámicos y aplicaciones web operativas con suma facilidad.

En este tutorial, te llevaré a lo largo de todo el proceso de crear un sistema de blogs con Parse.js desde cero. Usarás las herramientas de bootstrapping, y llevarás a la práctica real la noción de un prototipo rápido, la reutilización y el framework MVC. Al final de esta serie, deberías ser capaz de crear cualquier Gestor de Contenidos (CMS) por ti mismo.

Aunque se va a tratar de ofrecer tantos detalles como sea posible, este tutorial presupone que tienes conocimientos básicos de HTML, CSS, JavaScript/jQuery y GitHub. Si no estás familiarizado con las herramientas mencionadas, hay montones de impresionantes tutoriales aquí en Tuts+ que puedes usar.

Configurar el Entorno de Desarrollo

Vamos a empezar por la configuración de nuestro entorno de desarrollo. Necesitarás tener a mano un servidor local de pruebas, un servidor web, un servidor de datos, y un controlador de versiones. Como hemos dicho antes, el tutorial no requiere conocimientos previos sobre el panel de administración (backend). Os llevaré a través de todo el proceso paso a paso. Puedes saltarte esta parte si ya tienes configuradas todas las herramientas.

Paso 1: Instalar XAMPP

Después de probar varias plataformas diferentes, XAMPP sigue siendo la más sencilla que he encontrado para configurar un servidor de pruebas local. Por tanto, usaré XAMPP como servidor local de pruebas en este tutorial.

Si todavía no lo has hecho, comienza por descargar XAMPP aquí. Elige el que corresponda a tu sistema operativo e instálalo.

Yo utilizo Mac, así que lo usaré como ejemplo de ahora en adelante. Si usas otro sistema operativo, el proceso debería ser prácticamente el mismo.

Tras instalarlo, abre XAMPP y pon a funcionar el 'Apache Web Server',

XAMPP - Manage Servers - Start Apache Web Server

Si vas a http://localhost/ con el navegador, deberías ver la página por defecto de XAMPP. ¡Eso significa que está operativo y funciona!

Paso 2: Crear una nueva página en GitHub

Para seguir adelante, vamos a crear un nuevo repositorio git en GitHub. Lo llamo blog, sólo porque es corto y claro para mí. Para hacer que funcione como servidor Web, necesitamos configurarlo como una página GitHub.

Primero, añade una nueva dependencia, gh-pages.

Después ve a la configuración y convierte gh-pages en la rama principal por defecto.

Fantástico. Ahora vamos a introducirnos en las líneas de comando y clonar esa dependencia en GitHub en el interior de la carpeta htdocs de XAMPP.

1	$ cd /Applications/XAMPP/xamppfiles/htdocs
2	$ git clone https://your-git-HTTPS-clone-URL-here

Bucea hacia el interior de la carpeta de repositorio Git que acabas de clonar, crea un simple archivo index.html y escribe Hola Mundo en su interior.

1	$ cd blog
2	$ echo 'hello world' > index.html

Comprueba el servidor local (localhost) y asegúrate de que está funcionando.

Estupendo. Ahora vamos a subirlo a GitHub

1	$ git add index.html
2	$ git commit -am "Add index.html"
3	$ git push

Ve a http://yourusername.github.io/reponame, dale unos minutos y comprobarás que tu index.html está viva :))

Paso 3: Consigue tu cuenta en Parse.com.

Es muy sencillo alojar contenido estático en una página de GitHub, pero en lo que se refiere al backend, las cosas pueden ponerse más complicadas. Por suerte, ahora tenemos Parse.js. Podemos usar Parse.com como nuestro servidor de datos y comunicarnos a través de JavaScript. De esta forma, todo lo que tenemos que hacer es alojar los archivos HTML, CSS y JavaScript en GitHub.

Sigue adelante y regístrate en Parse.com si no lo has hecho ya.

Ahora ya tienes tu servidor de datos en la nube.

Plantilla estática HTML con Bootstrap

Lo que haremos en este momento es preparar una versión estática de nuestra plataforma de blogs. Para mostrarte lo rápido que puedes empezar los procesos de esta forma, simplemente usaré la plantilla de ejemplo de Bootstrap. Recordaré otra vez que si ya tienes algo de experiencia con Bootstrap o has diseñado una página web estática puedes saltarte este proceso o hacerlo a tu manera. Si eres novato en Bootstrap, sigue las indicaciones.

Paso 1: Descarga Bootstrap.

En primer lugar, descarga Bootstrap (ahora mismo estamos usando la versión 3.2.0), descomprímela, y coloca su contenido en tu carpeta XAMPP/xamppfiles/htdocs/blog.

Paso 2: Comienza a trabajar con la Plantilla Básica de Bootstrap.

Luego, edita index.html para tener la plantilla básica de Bootstrap. Ésta nos da una estructura HTML básica que enlaza con bootstrap.min.css, bootstrap.min.js y jquery.min.js. Comenzar con una plantilla como esta te ahorrará muchísimo tiempo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Actualiza y asegúrate de que funciona.

Paso 3: Copia encima la Plantilla de Ejemplo del Blog.

Ahora sigue adelante y abre el blog de ejemplo desde Bootstrap http://getbootstrap.com/examples/blog/.

En la página web, haz clic con el botón derecho y elige "View Source". Lo que tenemos que hacer es copiar el contenido de <body> en el de nuestra index.html y reemplazar el <h1>¡Hola, mundo!</h1> en la plantilla básica.

No copies las etiquetas <script> porque ya tenemos todos los ficheros JavaScript que necesitamos.

En este momento tendrías que estar viendo esta página:

Paso 4: Copia el estilo del Blog de Ejemplo y añádelo a index.html.

Fíjate en que los estilos no responden todavía, La causa es que necesitamos blog.css, la hoja de estilos específica del blog aplicada por encima de los estilos básicos de bootstrap.

Sigue adelante y cópiala desde el código fuente: http://getbootstrap.com/examples/blog/blog.css

Copia ese fichero y ponlo en la carpeta blog/css.

Enlázalo en index.html debajo de bootstrap.min.css:

1	<!-- Bootstrap -->
2	<link href="css/bootstrap.min.css" rel="stylesheet">
3	<link href="css/blog.css" rel="stylesheet">

Ahora nuestros estilos tendrían que ser los correctos, y ya tenemos lista nuestra plantilla estática.

Configuración y conexión a la base de datos Parse

Para convertir nuestro blog estático en dinámico, necesitamos configurar su propia base de datos en Parse.com.

Paso 1: Crear una nueva App.

Ve al Panel de control de Parse.com y haz clic en "Create New App".

Por ahora, vamos a llamarla Blog.

Una vez creada, ve a "Quickstart Guide - Data - Web - Existing project".

Paso 2: Añade Parse.js a index.html.

Siguiendo la guía de inicio rápido (Quickstart Guide), primero añade Parse.js a tu index.html. Pero en lugar de colocarlo en el <head>, colócalo debajo del jQuery.

1	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
3	<!-- Parse.js -->
4	<script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>

Paso 3: Comprueba el Parse SDK.

Para seguir adelante, crea un blog.js dentro de tu carpeta blog/js con el ID de tu Aplicación, la clave JavaScipt y código de prueba. Todo ello lo encontrarás en tu Quickstart Guide.

$(function() {

    Parse.$ = jQuery;

  // Replace this line with the one on your Quickstart Guide Page
	Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ");

	var TestObject = Parse.Object.extend("TestObject");
	var testObject = new TestObject();
	testObject.save({foo: "bar"}).then(function(object) {
	  alert("yay! it worked");
	});

});

Guárdalo, y enlaza este archivo JavaScript dentro de tu index.html, debajo de bootstrap.min.js.

1	<!-- Include all compiled plugins (below), or include individual files as needed -->
2	<script src="js/bootstrap.min.js"></script>
3	<script src="js/blog.js"></script>

Actualiza otra vez el index.html en tu servidor local (localhost), y tendrías que encontrarte con este mensaje de alerta:

Eso significa que ahora estás conectado a la base de datos de tu Blog en la nube :))

Si ahora compruebas tu "Data Browser" en Parse.com, verás el TestObject que acabas de crear.

Conclusión

Hoy hemos configurado todos los servidores que necesitamos: XAMPP como nuestro servidor de pruebas local y Parse.com como nuestro servidor de datos. También tenemos una plantilla básica del blog en su sitio, y ahora ya está conectada a la base de datos.

En la próxima sesión os enseñaré cómo añadir artículos al blog desde el navegador de datos de Parse, extrayéndolos con JavaScript, y mostrándolos en el resultado final.

Revisa el archivo fuente si te quedas bloqueado. Y, por favor, deja un comentario si encuentras cualquier dificultad a la hora de seguir el tutorial.