Aprenda a Criar um Blog Usando Parse.js: Acesso Dos Usuários

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

Final product image — What You'll Be Creating

No artigo anterior, você aprendeu a adicionar dados no Parse.com e a apresentar esses dados no seu site. Você se familiarizou ao conceito de objetos, coleções e visões, além de criar sua primeira classe. Deste artigo em diante, você aprenderá a criar o painel administrativo do sistema de blog.

E tudo começa com a criação da classe User e habilitando o login.

1. Classe `User`

Passo 1: Adicione a Classe `User`

O Parse.com tornou extremamente simples a adição de uma nova classe User. Apenas clique em "Add Class" e escolha "User" para criá-la.

Adicione um novo registro para você mesmo:

Passo 2: Adicione Controles de Acesso a Nível de Classe

Agora que você tem um usuário, podemos tornar a aplicação mais segura, configurando algumas permissões de acesso a nível de classe.

Vá até a tabela dos artigos do blog e clique em "Security":

Altere "Add Fields" de público para apenas você mesmo:

Isso prevenirá os outros de adicionar novos campos à tabela.

Similarmente, vá até a tabela User e limite o "Add Fields" para somente você também.

Você pode configurar o resto das permissões a nível de classe de acordo com suas necessidades, mas deixaremos assim, por hora.

2. Prepare uma Página de Administração

Passo 1: Limpe a Navegação

Primeiro, limpemos uma pouco a barra de navegação do modelo HTML, para dar espaço para a nova página administrativa. Altere o elemento <nav> de forma que tenha somente dois links: Home e Admin:

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

Passo 2: Prepare o Arquivo `admin.html` e Seu CSS

Agora, duplique o arquivo index.html e o renomeie para admin.html, e também duplique o arquivo blog.js e o renomeie para admin.js (Para aqueles familiarizados ao conceito de roteamento e odeiam código duplicado, por favor, continue seguindo o artigo. Prometo que aprenderemos a criar e usar um roteador e limpar um pouco as coisas!).

No arquivo admin.html, aplique a classe .active à aba correta:

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

E chame o arquivo admin.js ao invés do blog.js:

1	<script src="js/admin.js"></script>

Garanta que tudo ainda esteja funcionando normalmente para que possamos continuar e criar a página de Login.

Mesma coisa de antes, vá até http://getbootstrap.com/examples/signin, e copie o HTML de .form-signin para dentro de .main-container.

<div class="main-container">
  <form class="form-signin" role="form">
		<h2 class="form-signin-heading">Por favor, faça seu login</h2>
		<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
		<input type="password" class="form-control" placeholder="Senha" required="">
		<div class="checkbox">
			<label>
				<input type="checkbox" value="remember-me"> Manter-me conectado
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">Acessar</button>
	</form>
</div>

Pegue os estilos no arquivo signin.css e copie-o para seu arquivo blog.css, exceto os estilos relacionados ao elemento body:

.form-signin {
max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
	margin-bottom: 10px;
}
.form-signin .checkbox {
	font-weight: normal;
}
.form-signin .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}
.form-signin .form-control:focus {
	z-index: 2;
}
.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

Passo 4: Limpe o Arquivo `admin.js`

Finalmente, limpe tudo que estiver abaixo de Parse.initialize() no arquivo admin.js:

$(function() {

Parse.$ = jQuery;

    // Substitua essa linha pela que aparece na página Quickstart Guide
    Parse.initialize("HC87tn6aA7c3sYx9X0vwwLVXeqHDRMYYmrUBK5zv", "3piNGGnRMhvWo8u9pKD9TDc1MJlWhlvK78Vr3fHo");

});

Agora, atualize a página:

Tudo certo!

Passo 5: Ajustando o Formulário de Login

Alguns ajustes finais à página: usaremos o nome de usuário para acessar a página administrativa, então, altere o campo de e-mail para um campo de texto e adicione o atributo name em ambos os campos:

<input type="text" name="username" class="form-control" placeholder="Nome de Usuário" required="" autofocus="">

<input type="password" name="password" class="form-control" placeholder="Senha" required="">

Também altere o seletor CSS de email para text:

.form-signin input[type="text"] {
margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

E remova o campo de seleção "Manter-me conectado", porque não traremos disso nesse tutorial.

3. Habilite o Login

Agora, finalmente somos capazes de acessar o painel administrativo. Criemos uma função JavaScript básica para permitir os usuários acessarem ao clicar no botão Enviar in admin.js:

$('.form-signin').on('submit', function(e) {

    // Previne o envio padrão do formulário
    e.preventDefault();

    // Obtém os dados do formulário e os coloca em variáveis
    var data = $(this).serializeArray(),
        username = data[0].value,
        password = data[1].value;

    // Invoca a função Login do Parse.com com as variáveis acima
    Parse.User.logIn(username, password, {
        // Se o nome de usuário e senha existirem
        success: function(user) {
            alert('Welcome!');
        },
        // Se houver algum erro
        error: function(user, error) {
            console.log(error);
        }
    });

});

É hora de tentarmos...

Simples assim: você acessou a página administrativa!

4. Visão de Login e Visão de Boas-Vindas

Após realizar login, com certeza, você não quer ver apenas uma mensagem de alerta e permanecer na mesma página login. Precisamos criar uma tela de boas-vindas para os usuários logados.

Para fazer do melhor jeito, criaremos tanto a página de login quanto a de boas-vindas, usando Views e servi-las através do Parse.js.

Passo 1: Crie os Modelos

Assim como fizemos com os modelos para o blog, removamos tudo de .main-container e criemos modelos para a página de login e para a página de boas-vindas:

<script id="login-tpl" type="text/x-handlebars-template">
<form class="form-signin" role="form">
        <h2 class="form-signin-heading">Por favor, faça seu login</h2>
        <input type="text" name="username" class="form-control" placeholder="Nome de Usuário" required="" autofocus="">
        <input type="password" name="password" class="form-control" placeholder="Senha" required="">
        <button class="btn btn-lg btn-primary btn-block" type="submit">Acessar</button>
    </form>
</script>

<script id="welcome-tpl" type="text/x-handlebars-template">
    <h2>Bem-vindo, {{username}}!</h2>
</script>

Podemos manter a tela de boas-vindas bem simples, por hora. Ela pegará o objeto que contém o usuário logado e mostrará seu nome, apenas.

Passo 2: Definindo as Visões

Definamos as visões no arquivo admin.js. Uma vez que a LoginView não precisa mostrar qualquer objeto, a função render apenas joga o modelo HTML direto no DOM.

var LoginView = Parse.View.extend({
	template: Handlebars.compile($('#login-tpl').html()),
		render: function(){
			this.$el.html(this.template());
		}
	}),
	WelcomeView = Parse.View.extend({
		template: Handlebars.compile($('#welcome-tpl').html()),
		render: function(){
			var attributes = this.model.toJSON();
			this.$el.html(this.template(attributes));
		}
	});

Passo 3: Adicione o Evento de Login à Visão

Lembra-se da simples função de Login que temos? Agora, podemos torná-la em um evento dentro da LoginView:

var LoginView = Parse.View.extend({
template: Handlebars.compile($('#login-tpl').html()),
    events: {
        'submit .form-signin': 'login'
    },
    login: function(e) {

        // Previne o envio padrão do formulário
        e.preventDefault();

        // Obtém os dados do formulário e os coloca em variáveis
        var data = $(e.target).serializeArray(),
            username = data[0].value,
            password = data[1].value;

        // Invoca a função Login do Parse.com com as variáveis acima
        Parse.User.logIn(username, password, {
            // Se o nome de usuário e senha existirem
            success: function(user) {
                alert('Welcome!');
            },
            // Se houver algum erro
            error: function(user, error) {
                console.log(error);
            }
        });
    },
        render: function(){
        this.$el.html(this.template());
    }
})

Perceba que alteramos o $(this).serializeArray() para $(e.target).serializeArray(). Isso se dá porque, nesse contexto, o this apontará para a LoginView.

Passo 4: Mostre a `LoginView` na Página

Antes de seguirmos para visão de boas-vindas, primeiro mostraremos a LoginView na página atual e ver se ela funciona:

1	var loginView = new LoginView();
2	loginView.render();
3	$('.main-container').html(loginView.el);

Execute novamente e funcionará como antes.

Passo 5: Mostre a Tela de Boas Vindas Através da Callback de Sucesso

Agora, alteremos a função callback de sucesso da função login() para renderizar a tela de boas-vindas usando o objeto user retornado.

success: function(user) {
var welcomeView = new WelcomeView({ model: user });
    welcomeView.render();
    $('.main-container').html(welcomeView.el);
}

Teste outra vez:

E sim, funciona de verdade!

Conclusão

Neste artigo, você criou sua segunda classe: a classe User. você também criou duas visões importantes as LoginView e WelcomeView. Você também habilitou o login de usuários em seu site, e agora você pode enviar uma mensagem personalizada para seus usuários.

Esse é só o começo da construção do painel administrativo do blog. Fique ligado que, no próximo artigo, criaremos uma nova visão e habilitaremos a função de "Adicionar novo artigo".

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!