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

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

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Edit
Get Started Building Your Blog With Parse.js: Delete, Logout, and Single Blog View

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

rename admin page

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():

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

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

Passo 3: Atualizar Navegação

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

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

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

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.

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:

Passo 3: Mesclar AddBlogView e EditBlogView

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

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.

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():

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.

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:

para algo como:

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

para algo como:

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

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

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

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

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

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:

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:

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:

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

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

Passo 4: $container

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

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!

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