Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

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

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

Adicione um novo registro para você mesmo:

Add 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 security

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

Set 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 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 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 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.