Advertisement
  1. Code
  2. Web Development

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

by
Read Time:6 minsLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js: Working with Data
Get Started Building Your Blog With Parse.js: Add a New Blog

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

Final product imageFinal product imageFinal 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.

Add a User classAdd a User classAdd a User class

Adicione um novo registro para você mesmo:

Add a new userAdd a new userAdd a new user

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":

Blog securityBlog securityBlog security

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

Set permissionSet permissionSet permission

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:

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:

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

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.

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

Passo 4: Limpe o Arquivo admin.js

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

Agora, atualize a página:

Login pageLogin pageLogin page

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:

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

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:

É hora de tentarmos...

Login successLogin successLogin success

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:

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.

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:

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:

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.

Teste outra vez:

Welcome screenWelcome screenWelcome screen

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!

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.