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: Trabalhando com Dados

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js
Get Started Building Your Blog With Parse.js: User Login

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

Final product image
What You'll Be Creating

No último post, nós preparamos um servidor local (XAMPP), um servidor web (Páginas do GitHub) e um servidor de base de dados (Parse.com). Também preparamos o HTML de uma página de blog e embutimos o código básico do Parse.js para conecta-lo à base de dados. Nessa seção, ensinarei como criar, buscar e mostrar seu primeiro objeto.

Se você não se importar em usar o painel administrativo do Parse.com, você pode criar portfolios, blogs, páginas de destino (landing pages), etc, assim que terminar essa seção.

O Conceito de uma Classe e de uma Instância

Antes de nos aprofundarmos nso códigos e continuarmos criando a aplicação, vejamos o básico sobre classes e instâncias, para garantir que todos tenham uma mesma base de conhecimento. Novamente, sinta-se a vontade para pular essa parte, caso esses conhecimentos já lhe sejam familiares.

De acordo com a Wikipedia:

Uma classe “é uma estrutura que abstrai um conjunto de objetos com características similares. Uma classe define o comportamento de seus objetos através de métodos e os estados possíveis destes objetos através de atributos;” and "quando um objeto é criado pelo construtor de uma classe, o objeto resultando é chamado de instância da classe."

Se essas definições são muito abstratas para você, vejamos sua aplicação no contexto de um blog.

Uma Classe Blog

Pense nos principais componentes dos blogs. Eles, provavelmente, tem um título, um autor, uma página de conteúdo, um horário de quando foi criado, etc. Esses atributos compartilhados servirão de modelo para todos os blogs que temos. Assim, surge a classe Blog:

A blog class

Uma Instância de Blog

E quando temos a classe Blog, cada blog que se encaixa nesse modelo, pode ser uma instância da classe Blog:

A blog instance

Para identificar quando estivermos falando sobre a classe Blog, sempre usaremos a letra inicial (B) em maísculo. Por outro lado, quando estivermos tratando de um blog específico, usaremos a letra inicial (b) em minúsculo. Essa regra serve tanto para esse tutorial quanto para o código JavaScript que criaremos.

Você também perceberá que no Parse.com você verá, bastante, a palavra "object" (objeto). Nesse contexto, utilizaremos a regra do maísculo-minúsculo: usaremos "object" para uma isntância e "Object" para a classe. Você logo se acostumará.

A Tabela Blog

Uma vez que a classe define todos os atributos que uma instância possui, é fácil guardar todas as instâncias de uma mesma classe em um tabela: cada atributo seria uma coluna e cada instância seria um registro:

A blog table

E é exatamente dessa forma que você guardará seus dados no Parse.com

Criando a Classe Blog

Vamos lá... Criemos a classe no Parse.com.

Passo 1: Adicionando uma Classe Blog

Primeiro, vá até seu painel no Parse.com, encontre o seu projeto e clique em "Core" - "Data" (antigamente, Data Browser). E então, clique em "Add Class."

Add a blog class on Parse

Como pode ver pela captura de tela, é preciso criar uma classe customizada para seus blogs. Vamos chamá-la de Blog. Você sempre quererá que suas classes sejam bem diretas e verbosas, explicando o que elas guardam na base de dados.

Como você pode ver, temos uma classe customizada, vazia, no Parse.com:

Newly created custom class on Parse

Cada classe customizada deve ter quatro atributos próprios do sistema do do Parse.com:

  • objectId - um identificado único, gerado automaticamente pelo Parse quando um objeto é criado. Dessa forma, o programa saberá a qual objeto você se refere. (Como vê, aqui, a palavra objeto está relacionado a uma instância)
  • createdAt - a marca temporal (timestamp), gerada automaticamente pelo Parse quando você cria o objeto pela primeira vez.
  • updatedAt - a marca temporal gerada e atualizada automaticamente pelo Parse, toda vez que você atualiza o objeto.
  • ACL - uma lista de controle de acesso aos objetos, que define quem pode ler e mexer com aquele objeto. Se não estiver definido, ele usa o valor padrão de controle de acesso à classe. Discutiremos melhor sobre isso em seções futuras. Pode deixar em branco, por hora.

Passo 2: Adicionando Colunas à Classe Blog

Agora, continuemos e criemos colunas para os atributos que definem um blog. Para manter as coisas o mais simples possível, criaremos apenas dois deles: title (título) e content (conteúdo).

Clique no botão "+ Col" para criar uma nova coluna. Atribua o tipo "String" e o nomeie como title.

Add title column on Parse

Repita o processo e crie uma coluna content, também do tipo "String".

Passo 3: Adicionando Alguns Blogs

Hora de adicionar alguns blogs (nota: blogs, em inglês, também é usados para referir-se a posts)! Clique no botão "+ Row" e clique duas vezes nas células do título e conteúdo para adicionar algum conteúdo:

Add blog posts on Parse

Perceba que você também pode colocar código HTML na coluna de conteúdo. Na verdade, todas as colunas do tipo "string" podem salvar, sem problemas, código HTML. Nesse caso, porém, a coluna do título não devee conter qualquer código HTML.

Como falei antes, uma vez que o Parse.com permite você manipular sua base de dados dessa forma, você pode usá-la, normalmente, como seu painel administrativo, caso não queira criar o seu próprio. E, uma vez que você aprenda como renderizar dados em seu site, você poderá criar, facilmente, seus blogs ou portfolios dinâmicos. Dando continuidade, mostrarei como fazer isso.

Buscando e Retornando os Dados do Blog

Volte ao seu arquivo blog.js. É hora de remover o código de teste e pegar os dados do blog, lá no Parse.com!

Primeiro, crie uma classe JavaScript, estendendo a classe Blog, usando a API do Parse.js:

Em se tratando da página inicial de um blog, você, provavelmente, quererá uma lista com os últimos posts. Essa lista com ojetos de um mesmo tipo, é chamado de coleção pelo Parse. Criemos a nossa primera coleção:

Note que tanto Blog quanto Blogs são classes. Elas são os modelos abstratos para blogs e coleções de posts. Você pode ter blogs e coleções específicas e diferentes. E aquelas serão suas bases.

Agora, para obter uma coleção de verdade com todos os blogs que você adicionou lá no Parse.com, é preciso criar uma instância da coleção Blogs (perceba que a primera letra não deve ser maiúscula, aqui):

Se não especificarmos qualquer coisa e apenas pegarmos uma nova coleção com os dados, ela buscará todos os registros na tabela Blog, por padrão.

Busquemos e imprimamos os dados no console:

Carregue o site no seu servidor local, novamente, verifique o console das suas ferramentas de desenvolvedor, e você será capaz de ver algo assim:

Blog data in console

Agora você já tem os dados!

Mostrando os Dados na Página

Antes de mostrarmos os dados do blog na página, precisamos preparar um modelo HTML para isso.

Passo 1: Limpando o HTML

Limpe tudo que esteja dentro de .blog-main e substitua por um recipiente simples:

Agora, se você olhar o modelo original do blog, perceberá que a estrutura HTML para um único post pode ser simplificada, dessa forma:

Tudo que queremos é substituir os espaços reservados com os dados de verdade de cada post que temos no Parse.com.

Passo 2: Preparando o Modelo de Blog

Para fazer isso, precisamos transformar o HTML em um modelo, que receberá um objeto de dados e o transformará em uma cadeia de caracteres HTML.

Queremos que o modelo receba um vetor de blogs:

E o renderize em HTML, dessa forma:

Mostrarei como usar o handlebars.js para fazer realizar essa tarefa, nesse tutorial, mas você também pode usar o underscore.js, mustache ou outra biblioteca de modelos que preferir.

Para poder usar o handlebars.js, primeiro, temos de adicioná-lo no arquivo index.html abaixo do arquivo parse.js:

Agora, pegaremos o HTML ajustado para um único post e o colocaremos em uma tag <script> especial para o handlebars, logo acima das tags <script> dos nossos arquivos JavaScript externos. Também o daremos o id de #blogs-tpl. Dessa forma, o handlebars poderá saber que ela é um modelo, além de ter uma forma de referenciá-la:

Depois, para permitir que o handlebars saiba onde colocar os valores do título e do conteúdo, precisará substituir o "Um título" por {{title}} e "Algum conteúdo" por {{{content}}}. O Handlebars.js percebe o conteúdo entre o conjunto de chaves {{}} como variáveis.

Perceba que, para o conteúdo, usamos três pares de chaves, {{{}}}, ao invés de apenas dois, {{}}. Ao usar apenas dois pares, o handlebars.js converte todo o HTML dentro da propriedade usada, por padrão. Ao usar três pares, o handlebars.js mantém o HTMl intacto no conteúdo.

A alteração final que precisa fazer no #blogs-tpl é envolver o modelo do blog dentro do par {{#each blog}} {{/each}}. Assim, ele poderá receber um vetor de objetos para renderizar a todos, um por um:

Passo 3: Renderize os Blogs

Agora que temos um modelo pronto, voltemos para o arquivo blog.js e renderizemos esses posts na página.

Para tanto, precisará criar uma visão para a coleção de blogs. O conceito de visão vem do padrão de arquitetura MVC (model–view–controller, ou modelo-visão-controlador, em português), e o Parse segue esse padrão. Não aprofundarei o conceito de MVC aqui. Apenas saiba que a instância de uma visão para uma coleção de blogs gera o HTML necessário e administra todos seus eventos. E uma classe View é o modelo abstrato para esse tipo de instância.

Isso pode soar confuso, agora, mas ficará mais claro com o código. Criemos a classe BlogsView:

Da mesma forma que estendemos a classe Blog a partir de Parse.Object e a classe Blogs a partir de Parse.Collection, você pode, simplesmente, estender uma nova classe View a partir de Parse.View, obtendo todos os valores e funções pré-definidas do Parse.

Aqui, a variável template busca o modelo que preparamos antes. Então, a função render() busca os dados em this.collection, converte-os para o formato JSON, renderiza-o com o modelo do handlebars, e o atribui a this.$el.

Agora, é hora de alteramos a callback success de blogs.fetch() para criarmos uma nova instância de BlogsView, renderizarmos essa nova instância e adicioná-la à $('.main-container') da página.

Perceba que, quando criamos uma nova instância de BlogsView, passamos um valor, blogs, que são os dados dos posts que obtemos do servidor do Parse, que se tornará o this.collection da função render(). E quando você colocar o HTML em $('.main-container'), você usará o valor de blogsView.el, que é o conteúdo de this.$el, criado pela função render(). (Assim, blogsView.$el = $(blogsView.el)). É assim que a classe View e a instância view funcionam.

Atualizemos a página http://localhost/blog/

Blogs rendered

Está funcionando! Agora, basta você enviar para sua Página do GitHub e terá um site dinâmico! Se você parar algum tempo para alterar o modelo do blog e alterar um pouco o código, você pode criar vários tipos de sites diferentes.

Conclusão

Você criou, hoje, sua primeira classe no Parse.com. Também aprendeu como adicionar conteúdo nessa classe, diretamente, a partir do Parse, e como renderizá-los no seu site. Você pode ter visto vários novos conceitos, mas, tenho certeza, que logo estará familiarizado com eles.

Na próxima parte, construiremos o painel administrativo para o sistema de blog. Você criará sua segunda classe - a classe Usuário. Também aprenderá como lidar com acesso de usuários, bem como criará duas novas visões: a de acesso e de boas vindas. Então, fique ligado, muito mais conteúdo interessante vem aí.

Acredito que vocês podem ficar entretidos o bastante com o que aprenderam hoje. Avisem-me caso tenham criado algo com esse tutorial. E, como sempre, verifique os arquivos de código fonte caso tenha achado algo confuso ou tenha sentido dificuldades em alguma parte.

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.