Aprenda a Criar um Blog Usando Parse.js: Refatoração

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

Final product image — What You'll Be Creating

Nos seis artigos anteriores, construimos um sistema de blog do zero. Tudo está funcionando direito! Contudo, o código está um tanto bagunçado—temos colocado tudo junto e deixado muito código repetido e soluções temporárias no lugar. Hoje, focaremos em como limpar as coisas e ajustar alguns problemas que encontramos.

1. Mesclar index.html e admin.html

Antes de tudo, já que temos um roteador (se não lembra disso, veja a Parte 5: Roteador), não precisamos mais de dosi arquivos .html e .js. Mesclemo-nos.

Passo 1: Mesclar Arquivos

Nossa sugestão é mesclar admin.html e admin.js a index.html e blog.js já que eles tem mais código, mas fica a seu critério. Deve ser bem simples.

Se ronemar os arquivos, apenas tenha certeza que blog.js é chamado no index.html (antes, admin.html). Além disso, lembremo-nos de copiar #blogs-tpl do antigo index.html para o novo e copiar BlogsView do antigo blog.js para o novo.

Agora, visitemos http://localhost/seu-diretorio/ e será possível ver a tela de login por padrão (ou a tela de admin caso já tenhas as credenciais).

Passo 2: Atualizar Roteador

Depois, podemos adicionar um novo padrão de URL ao roteador para casar a URL raiz a uma nova função, index():

1	routes: {
2	'': 'index',
3	...
4	},

index() deve renderizar o que antes estava na página inicial.

index: function() {
	this.blogs.fetch({
		success: function(blogs) {
			var blogsView = new BlogsView({ collection: blogs });
			blogsView.render();
			$('.main-container').html(blogsView.el);
		},
		error: function(blogs, error) {
			console.log(error);
		}
	});
}

E para ver funcionando, usemos o redirecionamento padrão para essa URL quando o retoeador iniciar:

1	start: function(){
2	Parse.history.start({pushState: true});
3	this.navigate('', { trigger: true });
4	}

Passo 3: Atualizar Navegação

O próximo passo é atualizar a navegação no topo. Mudemos os arquivos HTML com as URLs:

1	<nav class="blog-nav">
2	<a class="blog-nav-item active" href="">Home</a>
3	<a class="blog-nav-item" href="admin">Admin</a>
4	</nav>

E para funcionarem, precisamos adicionar um evento a .blog-nav-item para uar blogRouter.navigate() ao invés do link de evento padrão:

$(document).on('click', '.blog-nav-item', function(e) {
	e.preventDefault();
	var href = $(e.target).attr('href');
	blogRouter.navigate(href, { trigger: true });
});

E adicionemos lógica para alternar a classe .active, também:

$(document).on('click', '.blog-nav-item', function(e) {
	e.preventDefault();
	var href = $(e.target).attr('href');
	blogRouter.navigate(href, { trigger: true });
	$(this).addClass('active').siblings().removeClass('active');
});

Agora, se clicarmos pelos meus, tudo deve estar funcionando!

2. Mesclar Add e Edit

Continuando, vemos que AddBlogView e EditBlogView são bem parecidas. Assim como update() e create() da classe Blog. Mesclemo-nas também.

Passo 1: Mesclar #add-tpl e #edit-tpl

Primeiro, mesclemos os dois modelos em index.html para ser #write-tpl.

<script id="write-tpl" type="text/x-handlebars-template">
	<h2>{{form_title}}</h2>

	<form class="form-write" role="form">
		<div class="form-group">
			<label for="title">Title</label>
			<input name="title" type="text" class="form-control" id="title" value="{{title}}"></input>
		</div>
		<div class="form-group">
			<label for="content">Content</label>
			<textarea name="content" class="form-control" rows="20">{{{content}}}</textarea>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
	</form>
</script>

Vemos que é basicamente #edit-tpl com mudanas de classe e título de formulário dinâmico. Apenas passaremos "" para title e content ao adicionar um novo blog.

Passo 2: Mesclar as funções update() e create()

Agora, mesclemos update() e create() na classe Blog. Podemos encadear this.set().save() tnato para update() quanto para create(). Para os campos que não precisam ser tocados por update(), podemos preencher com o valor atual:

update: function(title, content) {
	this.set({
		'title': title,
		'content': content,
		// Set author to the existing blog author if editing, use current user if creating
		// The same logic goes into the following three fields
		'author': this.get('author') || Parse.User.current(),
		'authorName': this.get('authorName') || Parse.User.current().get('username'),
		'time': this.get('time') || new Date().toDateString()
	}).save(null, {
		success: function(blog) {
			alert('You updated a new blog: ' + blog.get('title'));
		},
		error: function(blog, error) {
			console.log(blog);
			console.log(error);
		}
	});
}	

Passo 3: Mesclar AddBlogView e EditBlogView

Agora, é hora de mesclar as duas visões:

WriteBlogView = Parse.View.extend({
	template: Handlebars.compile($('#write-tpl').html()),
	events: {
		'submit .form-write': 'submit'
	},
	submit: function(e) {
		e.preventDefault();
		var data = $(e.target).serializeArray();
		// If there's no blog data, then create a new blog
		this.model = this.model || new Blog();
		this.model.update(data[0].value, data[1].value);
	},
	render: function(){
		var attributes;
		// If the user is editing a blog, that means there will be a blog set as this.model
		// therefore, we use this logic to render different titles and pass in empty strings
		if (this.model) {
			attributes = this.model.toJSON();
			attributes.form_title = 'Edit Blog';
		} else {
			attributes = {
				form_title: 'Add a Blog',
				title: '',
				content: ''
			}
		}
		this.$el.html(this.template(attributes)).find('textarea').wysihtml5();
	}
})

Note como podemos usar if (this.model) para mudar entre as funções add e edit.

Passo 4: Atualizar Roteador

Por fim, vinculemos a nova WriteBlogView ao rotador. Apenas mudemos ambas visões para WriteBlogView e tudo deverá continuar funcionando.

add: function() {
	// Check login
	if (!Parse.User.current()) {
		this.navigate('login', { trigger: true });
	} else {
		var writeBlogView = new WriteBlogView();
		writeBlogView.render();
		$container.html(writeBlogView.el);
	}
},
edit: function(id) {
	// Check login
	if (!Parse.User.current()) {
		this.navigate('login', { trigger: true });
	} else {
		var query = new Parse.Query(Blog);
		query.get(id, {
			success: function(blog) {
				var writeBlogView = new WriteBlogView({ model: blog });
				writeBlogView.render();
				$container.html(writeBlogView.el);
			},
			error: function(blog, error) {
				console.log(error);
			}
		});
	}
}

Notemos que também podemos enviar os usuários de volta para a página de login se não tiverem as credenciais.

3. Adicionar Lista de Controle de Acesso aos Blogs

Agora uqe removemos o código repetitivo, podemos continuar com as funcionalidades que podemos aprimorar.

Muitos perguntaram como manter os dados seguros se a API está no código. Parse.js provê Listas de Controle de Acesso (ACLs) a nível de classe e item para ajudar a administrar o acesso dos usuários. Falamos delas a nível de classe na Parte 3: Login de Usuário. Hoje, falaremos sobre elas a nível de item.

Como um exemplo, assumamos que queremos toda psotagem seja editável apenas por seu autor.

Para tanto, precisamos usar um campo ACL em update():

update: function(title, content) {

	// Only set ACL if the blog doesn't have it
	if ( !this.get('ACL') ) {
		// Create an ACL object to grant access to the current user 
		// (also the author of the newly created blog)
		var blogACL = new Parse.ACL(Parse.User.current());
		// Grant read-read only access to the public so everyone can see it
		blogACL.setPublicReadAccess(true);
		// Set this ACL object to the ACL field
		this.setACL(blogACL);
	}

	this.set({
		...
	});
}

4. Raiz e URL Estática

Outro ponto que muitos falaram foi da dificuldade de testar o sistema de blog que criamos. Para testarmos, temos de voltar em http://localshot/seu-diretorio/ para ativar o roteador.

Resolvamos esse problema.

Passo 1: Adicionar Root em BlogRouter.start()

Parse.js facilita isso, então mudemos BlogRouter.start() e configuremos uma raiz.

start: function(){
	Parse.history.start({
		// put in your directory below
		root: '/tutorial_blog/'
	});
}

Percebamos que podemos remover this.navigate() agora.

Passo 2: URL Estática

Outro problems é que as URLs não podem ser favoritadas ou revisitadas. Tudo que queremos fazer, temos de iniciar na URL principal. Por exemplo, se visitamos http://localhost/blog/admin, o roteador aceitar o padrão da URL mas o servidor ainda retorna 404. Isso porque ao visitar /admin, o servidor não sabe que deve ir a index.html primeiro para iniciar o roteador.

Uma forma de resolver esse problema e configurar o servidor para redirecionar todas URLs para index.html. Mas isso não é o escopo dessa classe. Tentaremos de outra forma: adicionando #/ antes das URLs.

A URL do painel admin ficaria http://localhost/blog/#/admin. Não é o ideal, mas é uma saída fácil. Quando o navegador encontra /#, não vai encarar o resto da URL como caminho de um arquivo, vai, na verdade, direcionar o usuario para index.html para o Roteador fazer o resto.

Agora, continuemos e mudemos o atributo href de todas as tags <a> em index.html de:

1	<a class="app-link" href="edit/{{url}}">Edit</a>

para algo como:

1	<a class="app-link" href="#/edit/{{url}}">Edit</a>

De forma similar, mudemos todos BlogApp.navigate() em blog.js de:

1	BlogApp.navigate('admin', { trigger: true });

para algo como:

1	BlogApp.navigate('#/admin', { trigger: true });

Também podemos remover alguns dos eventos da tag <a>:

Por exemplo, o botão "Adicionar um Novo Blog" tinha um:

events: {
	'click .add-blog': 'add'
},
add: function(){
	blogRouter.navigate('#/add', { trigger: true });
}

Podemos removê-lo e vinculá-lo a index.html:

1	<a href="#/add" class="add-blog btn btn-lg btn-primary">Add a New Blog</a>

Também podemos remover essa função já que as URLs funcionarão por conta própria:

$(document).on('click', '.blog-nav-item', function(e) {
	e.preventDefault();
	var href = $(e.target).attr('href');
	blogRouter.navigate(href, { trigger: true });
	$(this).addClass('active').siblings().removeClass('active');
});

Também removamos a classe active por hora. Em artigos futuros colocaremo-na novamente de outro jeito.

1	<nav class="blog-nav">
2	<a class="blog-nav-item" href="">Home</a>
3	<a class="blog-nav-item" href="#/admin">Admin</a>
4	</nav>

Certo, naveguemos pelo blog, testemos e garantamos que todos os links são, agora http://localhost/#/..., exceto a página inicial.

Agora, temos URLs que podemos atualizar e revisitar. Esperamo que tenha facilitado suas vidas!

Bônus: Outros Ajustes e Aprimoramentos

Se não se importarem com tutoriais longos, gostaríamos de aprimorar algumas coisas. Eis alguns ajustes que podemos fazer.

Passo 1: Ordenação

Talvez tenham percebido que as publicações estão ordenadas da mais antiga para a mais nova. Geralmente, queremos que os mais novos primeiro. Então, mudemos a coleção Blogs para ordená-los dessa forma:

1	Blogs = Parse.Collection.extend({
2	model: Blog,
3	query: (new Parse.Query(Blog)).descending('createdAt')
4	})

Passo 2: Redirectionar para WelcomeView após update()

Eis outro ponto a aprimorar. Ao invés de abrir uma janela de alerta após atualizar o blog, podemos apenas redirecionar para a página /admin:

this.set({
	...
}).save(null, {
	success: function(blog) {
		blogRouter.navigate('#/admin', { trigger: true });
	},
	error: function(blog, error) {
		...
	}
});

Passo 3: Mesclar AdminView em WelcomeView

Se gostaram da limpeza, também podemos mesclar AdminView e WelcomeView em uma—não há necessidade de ter duas visões separadas.

De novo, primeiro o modelo HTML:

<script id="admin-tpl" type="text/x-handlebars-template">
	<h2>Welcome, {{username}}!</h2>
	<a href="#/add" class="add-blog btn btn-lg btn-primary">Add a New Blog</a>
	<table>
		<thead>
			<tr>
				<th>Title</th>
				<th>Author</th>
				<th>Time</th>
				<th>Action</th>
			</tr>
		</thead>
		<tbody>
			{{#each blog}}
			<tr>
				<td><a class="app-link" href="#/edit/{{objectId}}">{{title}}</a></td>
				<td>{{authorName}}</td>
				<td>{3:25 PM}</td>
				<td>
					<a class="app-link app-edit" href="#/edit/{{objectId}}">Edit</a> | 
					<a class="app-link" href="#">Delete</a>
				</td>
			</tr>
			{{/each}}
		</tbody>
	</table>
</script>

Então, mudemos BlogRouter.admin() para enviar username para AdminView:

admin: function() {

	var currentUser = Parse.User.current();

	// Check login
	if (!currentUser) BlogApp.navigate('#/login', { trigger: true });

	this.blogs.fetch({
		success: function(blogs) {
			var blogsAdminView = new BlogsAdminView({ 
				// Pass in current username to be rendered in #admin-tpl
				username: currentUser.get('username'),
				collection: blogs 
			});
			blogsAdminView.render();
			$('.main-container').html(blogsAdminView.el);
		},
		error: function(blogs, error) {
			console.log(error);
		}
	});
}

E passemos username para renderização em #admin-tpl:

BlogsAdminView = Parse.View.extend({
	template: Handlebars.compile($('#admin-tpl').html()),
	render: function() {
		var collection = { 
			// Pass in username as variable to be used in the template
			username: this.options.username,
			blog: this.collection.toJSON()
		};
		this.$el.html(this.template(collection));
	}
})

Passo 4: $container

Por fim, podemos salvar $('.main-container') como uma variável, evitando múltiplas consultas.

1	var $container = $('.main-container');

Depois, basta substituir $('.main-container') por $container.

Conclusão

Antes tudo, parabéns por chegar ao final! Foram vários artigos, mas você terminou o projeto inteiro. Além disso, adicionamos ACL aos blogs, implementamos URLs estáticas e ajustamos muitas coisas. Agora sim é um bom projeto.

Na próxima seção, aceleraremos as coisas e adicionaremos três novas funções: visualização e remoção de blog, e logout, porque agora temos um bom entendimento do Parse.js e poderemos ir bem mais rápido. Recomendamos pensar sobre como criar essas funções logo para já testar os conhecimentos um pouco. No mais, fique de olho!