Aprenda a Criar um Blog Usando Parse.js

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image — What You'll Be Creating

Você, alguma vez, já se entusiasmou com a ideia de um projeto web, mas foi muito complicado de fazê-lo funcionar em um servidor? Com o Parse.js, todo mundo que conhece o básico de HTML, CSS e JavaScript pode criar sites web apps dinâmicos, facilmente.

Nesse tutorial, mostrarei o processo da criação de um sistema de blog, a partir do zero, usando o Parse.js. Você utilizará todas as ferramentas de inicialização de projetos e praticará as ideias de prototipação rápida, refatoração e framework MVC. Ao final da série, você deve ser capaz de criar qualquer CMS por conta própria.

Embora eu tente ser o mais detalhado possível, esse tutorial assumirá que você tem conhecimento prévio e básico em HTML, CSS, JavaScript/jQuery e do GitHub. Se você não for familiarizado com as ferramentas mencionadas, há inúmeros tutoriais aqui, no Tuts+, que você pode ler antes.

Preparando o Ambiente de Desenvolvimento

Comecemos pelo preparo do nosso ambiente de desenvolvimento. Você precisará de um servidor de testes local, um servidor web e um sistema de controle de versão. Como já dito, esse tutorial não requer qualquer conhecimento relacionado à programação backend. Guiarei você, passo-a-passo. Sinta-se livre para pular essa parte, caso já tenha tudo preparado.

Passo 1: Instale o XAMPP

Após tentar diversas soluções diferentes, o XAMPP ainda é a maneira mais fácil de preparar um servidor local. Assim, usaremos ele como servidor local de testes nesse tutorial.

Se não o tiver feito, comece baixando o instalador do XAMPP aqui. Escolha a opção que se adeque ao seu sistema e instale.

Aqui, uso Mac, então, usarei ele de exemplo, de agorar em diante. Se usar outro sistema operacional, o processo deverá ser bem parecido.

Após instalá-lo, Execute o XAMPP e inicie o "Servidor Web Apache".

XAMPP - Manage Servers - Start Apache Web Server

Agora, se visitar o endereço http://localhost/ em seu navegador, você deverá ver a página padrão do XAMPP. Se isso acontecer, quer dizer que tudo está funcionando bem!

Passo 2: Crie uma Nova Página no GitHub

Continuando, criemos um novo repositório Git no GitHub. Chamarei ele de blog, uma vez que ele é curto e conciso. Para fazê-lo funcionar como um servidor web, precisamos transformá-lo em uma Página do GitHub.

Primeiro, crie uma ramificação (branch) chamada gh-pages.

Depois, vá até as configurações e selecione gh-pages como a ramificação padrão.

Ótimo. Agora, vamos para a linha de comando e clonemos essa ramificação presente no GitHub, dentro do diretório htdocs do XAMPP.

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

Navegue até o diretório do respositório Git que você acabou de clonar, crie um simples arquivo index.html e, simplesmente, escreva Olá, Mundo! nele.

1	$ cd blog
2	$ echo 'Olá, Mundo!' > index.html

Verifique o endereço http://localhost para garantir que está funcionando.

Maravilha. É hora de enviá-lo para o GitHub.

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

Acesse o endereço http://seu-nome-de-usuario.github.io/nome-do-repositorio, espere alguns minutos e você verá que seu arquivo index.html está funcionando, ao vivo e na web :)

Passo 3: Crie Sua Conta no Parse.com

É bem fácil criar conteúdo estático como uma Página do GitHub, mas, quando se trata de backend, as coisas ficam um pouco mais complicadas. Felizmente, agora, temos o Parse.js. Podemos usar o Parse.com como nosso servidor de dados e realizar a comunicação entre nossa página e ele, usando JavaScript. Dessa forma, só precisamos hospedar arquivos HTML, CSS e JavaScript no GitHub.

Vá em frente e registre uma conta no Parse.com se ainda não o fez.

Agora, você tem seu servidor de dados nas nuvens.

Modelo HTML Estático com Bootstrap

Agora, preparemos uma versão estática do sistema de blog que faremos. Para mostrar como você pode acelerar essa parte, simplesmente, utilizarei o modelo de blog exemplo existente na página do Bootstrap. De novo, se você já é familiarizado com o Bootstrap ou já possui alguma página estática feita, sinta-se à vontade em fazer da sua maneira. Se for iniciante com Bootstrap, continue acompanhando.

Passo 1: Baixe o Bootstrap

Primeiro, baixe o Bootstrap (nesse momento, estamos usando a versão 3.2.0), extraia os arquivos e coloque o conteúdo dentro do seu diretório XAMPP/xamppfiles/htdocs/blog.

Passo 2: Comece Pelo Modelo Básico do Bootstrap

Agora, edite o arquivo index.html de modo que ele tenha o conteúdo do modelo básico do Bootstrap. Ele provê uma estrutura HTML básica, com links para bootstrap.min.css, bootstrap.min.js e jquery.min.js. Começando com um modelo como esse, você economizará muito tempo.

<!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>Modelo Básico doBootstrap</title>

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

    <!-- HTML5 Shim e Respond.js - Suporte ao IE8 para os elementos HTML5 e media queries -->
    <!-- CUIDADO: Respond.js não funciona se você visualizar a página a partir de um documento local, através do 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>Olá, Mundo!</h1>

    <!-- jQuery (necessário para os plugins do Bootstrap) -->
    <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>

Atualize a página e tenha certeza que tudo está funcionando.

Passo 3: Copie o Modelo de Blog Exemplo

Vá até o exemplo de blog do Bootstrap: http://getbootstrap.com/examples/blog/

Na página, clique com o botão direito e escolha "Visualizar Código Fonte". Copiaremos todo o conteúdo que fica entre as tags <body> para nosso arquivo index.html e substituiremos o <h1>Olá, Mundo!</h1> no modelo base.

Não copie as tags <script>, uma vez que já temos todos os arquivos JavaScript que precisamos.

Você deve ter algo assim, agora:

Passo 4: Copie o CSS do Blog Exemplo e Adicione-o ao Arquivo `index.html`

Perceba como os estilos ainda não estão bem ajustados. Isso ocorre por ainda precisarmos do arquivo blog.css, que é o arquivo específico com os estilos CSS para um modelo de blog que utiliza o Bootstrap como base.

Vá em frente e encontre-o no código-fonte: http://getbootstrap.com/examples/blog/blog.css

Copie esse arquivo e coloque-o no diretório blog/css.

Crie uma chamada para ele no arquivo index.html logo abaixo da chamada para bootstrap.min.css:

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

E, agora, os estilos devem estar no lugar. Temos nosso modelo estático pronto.

Prepare e Conecte-se À Base de Dados do Parse

Para tornar nosso blog estático em algo dinâmico, precisamos, primeiro, preparar nossa própria base de dados no Parse.com.

Passo 1: Crie um Novo App

Vá até o painel do Parse.com, e clique em "Create New App".

Chameme-o de Blog, por hora.

Uma vez criado, vá até "Quickstart Guide - Data - Web - Existing project"

Passo 2: Adicione o Arquivo `Parse.js` ao `index.html`

Seguindo o Guia Rápido, primeiro adicione o arquivo Parse.js ao seu index.html. Mas, ao invés de colocá-lo no elemento <head>, você pode posicioná-lo abaixo da chamada de jQuery:

1	<!-- jQuery (necessário para os plugins do Bootstrap) -->
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>

Passo 3: Teste a SDK do Parse

Continuando, crie um arquivo blog.js dentro do diretório blog/js com o ID e chave da sua aplicação, e adicione um código teste. Ambos podem ser encontrados no Guia Rápido:

$(function() {

    Parse.$ = jQuery;

  // Substitua essa linha por aquele que você vê na página do Guia Rápido
	Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ");

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

});

Salve o arquivo e chame esse arquivo JavaScript em sua página index.html, logo abaixo do bootstrap.min.js.

1	<!-- Inclui todos os plugins compilados -->
2	<script src="js/bootstrap.min.js"></script>
3	<script src="js/blog.js"></script>

Agora, atualize a página http://localhost e você deverá ver a seguinte mensagem de alerta:

Isso significa que você está conectado à sua base de dados Blog, na núvem :)

Se você verificar seu "Data Browser", lá no Parse.com, verá que há um objeto ObjetoTeste criado.

Conclusão

Hoje, preparamos todos os servidores que precisamos: XAMPP como nosso servidor local para testes, Páginas do GitHub como nosso servidor web e o Parse.com como nosso servidor de dados. Também criamos nosso modelo básico e o conectamos com nossa base de dados.

Na próxima sessão, ensinarei como adicionar artigos em seu blog, a partir do navegador de dados do Parse, buscá-los usando JavaScript e renderizá-los no front-end.

Veja o código-fonte caso tenha ficado emperrado em alguma parte. Por favor, deixe seu comentário caso tenha alguma outra dificuldade.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!