Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Aprenda a Criar um Blog Usando 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

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.

XAMPP website

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!

Localhost when XAMPP is running

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.

Add a new branch gh-pages

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

Set gh-pages as the default branch

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

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.

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

Localhost - hello world

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

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 :)

GitHub Page - hello world

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.

Parsecom website

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.

Put Bootstrap in blog folder

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.

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

Add Bootstrap basic template

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:

Add example blog template

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:

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

Static template

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.

Create a blog app on Parsecom

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

Parse Quickstart Guide

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:

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:

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

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

Success alert message

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.

Parse Data Browser

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!

Advertisement
Advertisement
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.