Aprenda a Criar um Blog Usando Parse.js: Categorias

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:

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.

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

Passo 3: Objeto Comentário

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

Category = Parse.Object.extend('Category', {});

Passo 4: Coleção de Comentários

E a coleção:

Categories = Parse.Collection.extend({
  model: Category
})

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.

render: function(){
	...
	var self = this,
		categories = new Categories();
	categories.fetch().then(function(categories){
		attributes.categories = categories.toJSON();
		self.$el.html(this.template(attributes)).find('.write-content').wysihtml5();
	});
}

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.

categories.fetch().then(function(categories){
	attributes.categories = categories.toJSON();
	// Get current selected category
	if (attributes.category) {
		attributes.categories.forEach(function(category, i){
			if (category == attributes.category) {
				attributes.categories[i].selected = true;
			}
		});
	}
	console.log(attributes);
	self.$el.html(self.template(attributes)).find('.write-content').wysihtml5();
});

Passo 3: Rendizando Categorias no Menu Suspenso

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

<div class="form-group">
	<label for="category">Category</label>
	<select>
		{{#each categories}}
		<option value="{{objectId}}" {{#if selected}}selected{{/if}}>{{name}}</option>
		{{/each}}
	</select>
</div>

Passo 4: Salvemos a Categoria Selecionada

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

submit: function(e) {
	...
	this.model.update({
		title: data[0].value,
		category: data[1].value,
		summary: data[2].value,
		content: data[3].value
	});
}

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

Blog = Parse.Object.extend('Blog', {
	update: function(data) {
		...
		var category = new Category();
		category.id = data.category;
		this.set({
			'title': data.title,
			'category': category,
			...
		}).save(null, {
			...
		});
	}
})

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:

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:

<div class="col-sm-3 col-sm-offset-1 blog-sidebar"></div>

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

<script id="categories-tpl" type="text/x-handlebars-template">
	<div class="sidebar-module">
		<h4>Categories</h4>
		<ol class="list-unstyled">
			{{#each category}}
			<li><a href="#/category/{{objectId}}">{{name}}</a></li>
			{{/each}}
		</ol>
	</div>
</script>

Passo 2: CategoriesView

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

CategoriesView = Parse.View.extend({
	template: Handlebars.compile($('#categories-tpl').html()),
	render: function() { 
		var collection = { category: this.collection.toJSON() };
		this.$el.html(this.template(collection));
	}
})

Passo 3: Renderizando CategoriesView

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

initialize: function(options){
	this.blogs = new Blogs();
	this.categories = new Categories();
}

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

start: function(){
	...
	this.categories.fetch().then(function(categories){
		var categoriesView = new CategoriesView({ collection: categories });
		categoriesView.render();
		$('.blog-sidebar').html(categoriesView.el);
	});
}

Testemos e vejamos que ela renderiza:

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:

routes: {
	...
	'category/:id': 'category'
}

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

category: function(id) {
	// Get the current category object
	var query = new Parse.Query(Category);
	query.get(id, {
		success: function(category) {
			// Query to get the blogs under that category
			var blogQuery = new Parse.Query(Blog).equalTo("category", category).descending('createdAt');
			collection = blogQuery.collection();
			// Fetch blogs
			collection.fetch().then(function(blogs){
				// Render blogs
				var blogsView = new BlogsView({ collection: blogs });
				blogsView.render();
				$container.html(blogsView.el);
			});
		},
		error: function(category, error) {
			console.log(error);
		}
	});
}

Agora, tudo está funcionando.

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.