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: Adicionando Novo Blog

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: User Login
Get Started Building Your Blog With Parse.js: Router

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

Final product image
What You'll Be Creating

Alguma vez já ficou excitado pela ideia de um site, mas falhou miseravelmente tentando torná-lo dinâmico e executá-lo em um servidor?

Com Parse.js, todos que entendem o básico de HTML, CSS e JavaScript podem criar sites dinâmicos e criar apps web. Esse tutorial ensinará a criar um sistema de blog passo-a-passo com Parse.js. E, ao final da série, seremos capazes de criar nosso próprio CMS facilmente.

Nos três artigos anteriores, construímos a base do sistema de blog. Criamos as classes Blog e Use no Parse.com, renderizamos blogs no frontend e habilitamos acessos de usuários. A partir dessa sessão, construiremos funções diferentes do painel administrativo, começando com "Adicionar novo Blog".

1. Criar e Renderizar AddBlogView

Passo 1: Preparemos um Modelo HTML

Primeiro as coisas primeira, premaremos o modelo HTML para a página, para termo algo que trabalhar. Mais uma vez, podemos usar elementos existentes do Bootstrap para acelerar o processo:

Adicionemos isso ao admin.html.

Notemos que estamos criando um modelo, embora não haja qualquer valor dinâmico ainda. O fazemos assim porque:

  1. É bom manter o HTML bem estruturas e cada coisa tem seu próprio bloco de modelo.
  2. No futuro, construiremos o menu suspenso das categories, logo, potencialmente, teremos conteúdo dinâmico na página.
  3. O mesmo modelo de página seria resuável ao construirmos a função "Editar" e, definitivamente, precisaremos por o conteúdo existente em EditBlogView.

Passo 2: Criando AddBlogView

Continuando, vamos ao admin.js e criemos uma nova Visão: AddBlogView. Menteremo-na bem mínima por hora, já que apenas renderizaremos o modelo:

Passo 3: Conectar a AddBlogView

Agora que temos AddBlogView, queremos conectá-la ao painel administrativo. Adicionemos o botão WelcomeView:

E então, vincularemos um evento a cliques naquele botão. Geralmente, fazemos algo assim no admin.js:

Contudo, não é necessário ao usar o Parse.js. Podemos apenas adicionar um evento ao objeto da Visão e vincular a função, assim:

Podemos tentar, antes de continuar_

Test View Function

Agora mudamos a função para renderizar a nova instância de AddBlogView.

Rendered addBlogView

Muito bom.

2. Salvando na Base de Dados

Agora, precisamos vincular uma função ao botão submit na página e salvar o conteúdo na base de dados no Parse.com.

Passo 1: Adicionar Evento Submit

Adicionar um evento submit à AddBlogView não é muito diferente de adicionar um evento click.

Passo 2: Incluir a Classe Blog

Como queremos salvar conteúdo na tabela Blog no Parse.com, precisamos incluir a classe Blog.

Passo 3: Adicionar Função create() à Classe Blog

Depois, criaremos a função create() na classe Blog para invocá-la de qualquer objeto de visão. Ela deverá receber ter dois parâmetros, title e content, e salvar na base de dados.

Parse.js torna tudo simples. Uma vez criada uma intância da classe Blog, apenas precisamos attribuir os valores que queremos e invocar save() para salvar na base de dados.

Ou podemos apenas salvar os dados na função save():

Ambos funcionam.

Percebamos que também incluímos author na base de dados com Parse.User.current(). Esse é o método usado para capturar o usuário loagado.

Passo 4: Invcar blog.create em AddBlogView

Como passo final para tudo funcionar, precisamos invocar blog.create() em AddBlogView que acabamos de criar.

Adicionemos a função submit():

Testemo-na. Parece que funciona!

Submit Success Alert

E se checarmos o Parse.com, veremos o conteúdo salvo na tabela Blog.

Submit Success Database

Parabéns! Estamos escrevendo na base de dados.

3. Salvar Nome do Autor e Horário da Publicação

É hora de trabalhar com a listagem do blog de novo:

Problem in the Blog List

Perceberemos que, ao invés do nome de usuário, mostramos o ID. E também não mostramos o horário da criação da publicação. Nós temos createdAt e updatedAt no backend, mas não são legíveis pelo usuário.

Para resolver isso, há duas abordagens:

  • Ao lermos da base de dados, pegamos o nome de usuário pelo ID e mudamos o formato do horário da publicação.
  • Ao salvar na base de dados, adicionamos dois novos campos para salvar o nome de usuário e o horário.

Escolhendo a primeira, faremos a mesma coisa, de novo e de novo, além de usar tempo e recursos do usuário. Assim, devemos fazê-lo ao salvar na base de dados. Não nos preocupemos sobre "e se o usuário alterar seu nome". Sempre podemos realizar atualizações em massa quando isso acontece.

Passo 1: Adicionar Duas Novas Colunas à Tabela Blog

Já devemos estar familiarizados ao processo. Criemos o nome e o tipo dos campos, assim:

  • authorName (String)
  • time (String)

Passo 2: Adicionar Campos à Função create()

Agora, precisamos modificar a função create() para salvar os valores:

Apenas usamos .toDateString() . Também se pode usar outras funções de data para obter o formato de hora desejado.

Passo 3: Atualizar Modelos de Blog para Usar os Valores

Por último, atualizamos #blogs-tpl no index.html para usar os novos valores:

Agora, podemos apagar as publicações existentes e adicionar novas usando a página "Adicionar novo Blog".

Delete Existing Posts

Agora, todos os campos devem estar funcionando.

Blog List Updated

4. Bonus: Editor WYSIWYG

Por usarmos {{{content}}} no modelo, já podemos usar tags HTML no conteúdo do <textarea> e será renderizado corretamente no frontend. Contudo, a maioria das pessoas, eu incluso, não acha natural escrever assim.

Mostraremos como adicionar um editor WYSIWYG simples, bem rápido, para ver como é possível.

Passo 1: Baixar Plugin

Primeiro, baixemos o plugin.

Ele já foi atualizado, mas para a demo e tutorial, usaremos a versão antiga.

Passo 2: Adicionemos CSS e JS

Extraia os arquivos, copie /dist/bootstrap-wysihtml5-0.0.2.css e coloque-os no diretório do CSS. Similarmente, copiemos /dist/bootstrap-wysihtml5-0.0.2.min.js e /lib/js/wysihtml5-0.3.0.min.js para apasta JS.

Agora, adicionemo-nos no admin.html:

Passo 3: Habilitemos Wysihtml no JavaScript

Para habilitar wysihtml5, precisamos invocar wysihtml5() no elemento <textarea>. Adicionemos isso à função render() de AddBlogView:

Então, ao invés de obter texto puro com a função serializeArray(), obteremos HTML com val(). Alteremos create() para usá-la:

O código é bem simples. Sinta-se à vontade para modificá-lo e ser mais eficiente, se preciso. (Usar uma classe como seletor, salvar $('textarea') como variável, etc.).

Agora, se atualizarmos e testarmos, deve funcionar!

wysihtml5 in Action

Como não é o foco do tutorial, pararemos por aqui. wysihtml5 oferece muitas outras opções, então vejão os dois repositórios caso esteja interessado:

Conclusão

Nessa seção, permitimos que usuários criem publicações. Preparamos a interfáce de usuário e a vinculamos à base de dados do backend. Também adicionamos mais campos à classe Blog, para ser mais legível na listagem. Por útlimo, adicionamos um plugin WYSIWYG. Acredito que foi muito e espero que sinta o mesmo!

No próximo artigo, ajustaremos a base para um painel administrativo mais funcional. Aprenderemos o conceito de roteador e fundiremos index.html e admin.html em um só. Além disso, exibiremos uma lista de publicações no painel administrativo para podermos editá-los e apagá-los. Fique ligado.

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.