Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Comienza a construir tu blog con Parse.js

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js: Working with Data

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.

XAMPP website

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!

Localhost when XAMPP is running

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.

Add a new branch gh-pages

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

Set gh-pages as the default branch

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.

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.

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

Localhost - hello world

Estupendo. Ahora vamos a subirlo a GitHub

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

GitHub Page - hello world

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.

Parsecom website

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.

Put Bootstrap in blog folder

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.

Actualiza y asegúrate de que funciona.

Add Bootstrap basic template

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:

Add example blog template

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:

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

Static template

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.

Create a blog app on Parsecom

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

Parse Quickstart Guide

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.

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.

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

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

Success alert message

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.

Parse Data Browser

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.