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

Aprenda a Criar um Blog Usando Parse.js: Categorias

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: Comments
Get Started Building Your Blog With Parse.js: Migration to Your Own Parse Server

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

Final product image
What You'll Be Creating

Antes de tudo, bem vindo ao final da série!

Na parte anterior, mostramos como adicionar uma nova função ao blog: adicionar comentários. É uma funcionalidade autônoma. Hoje, mostraremos como adicionar categorias ao sistema de blog. É uma tarefa mais difícil, já que será mais atrelada ao código existente.

Modelo da Categoria

Passo 1: Classe da Categoria

Sabe como é: o modelo sempre vem antes. Uma nova classe no Parse.com: a classe Category. Deve ser simples. Apenas precisamos um campo personalizado:

  • string name

Criemos duas categorias falsas para facilitar o teste:

categories

Passo 2: Campo Cateogira na Tabela da Classe Blog

Agora, adicionemos uma nova coluna na tabela da classe Blog no Parse.com e apontemo-na para Category.

pointer

Também vinculemo-nos a várias publicações do blog.

posts

Passo 3: Objeto Comentário

Agora, o objeto Comment no blog.js. Novamente, é bem simples.

Passo 4: Coleção de Comentários

E a coleção:

Adicionando um Menu Suspenso de Categoria no Formulário de Criação de Publicações

Passo 1: Buscando Categorias

Como nos comentários, busquemos as categories ao renderizar WriteBlogView.

Passo 2: Encontremos a Categoria Atual

Agora, precisamos encontrar a categoria atual ao existir uma categoria para a publicação em edição. Podemos apenas iterar pelo vetor attribute.categories e configurar selected como TRUE para a categoria atual.

Passo 3: Rendizando Categorias no Menu Suspenso

E no HTML, renderizemos as categorias num menu <select>:

Passo 4: Salvemos a Categoria Selecionada

Agora, salvemo-na na função submit() em WriteBlogView:

E adicionemo-na na função Blog.update() :

Percebamos que não podemos apenas usr o id da categoria, mas podemos criar uma nova instância de category e configurar o id para o id da categoria que recebemos do formulário.

Testemos e esperemos que tudo esteja funcionando e salvo na base de dados:

New Post

Páginas de Categoria

Agora, vejamos como criar uma barra lateral que vincula a diferentes categorias.

Passo 1: Limpando e Criando um Modelo

Primeiro, removamos o HTML estático da barra lateral:

E  criemos um novo modelo de div para o modelo do menu da categoria:

Passo 2: CategoriesView

Então, criemos uma Visão para a lista de categorias:

Passo 3: Renderizando CategoriesView

Como a lista de categorias está em todas as páginas, podemos criar uma variável compartilhada BlogRouter.initialize():

E renderizá-la na função .start() :

Testemos e vejamos que ela renderiza:

sidebar

Por termos, agora, uma variável compartilhada, podemos usá-la em WriteBlogView.render():

Passo 4: Adicionando um Roteador

Agora precisamos fazer /category/{{objectId}} funcionar.

Adicionarmos o padrão de roteameto primeiro:

Agora, criemos a função category. É bem direta, apenas a combinação das coisas que aprendemos até agora.

Agora, tudo está funcionando.

categoryPage

Conclusão

Wow, não acredto que levamos tanto tempo para terminar essa série. Nas últimas dez seções, aprendemos sobre Parse.js e desenvolvimento web em geral. Juntos, construímos um sistema de blog completo: adição, edição, remoção, login, comentários e categorias.

Esperamos que tenha curtido a série. Compartilhe seu feedback, sugestões e conteúdos que gostariam que fossem cobertos no futuro. E se tiver criado qualquer projeto web usando essas técnicas do tutorial, gostaríamos de saber sobre ele.

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.