Crie um blog com React e banco de dados no Firebase

Você está pronto(a) para descobrir a estrutura de um blog desenvolvido em React?

Se você é um entusiasta do desenvolvimento web e busca uma plataforma moderna e dinâmica para seu blog, aqui você encontrará uma arquitetura baseada em componentes do React, que você pode personalizar e expressar seu lado criativo.

Se você é novo(a) no React, não se preocupe. Ao longo do artigo, vou fornecer exemplos e explicações claras para ajudá-lo a entender os conceitos-chave e começar a desenvolver seu próprio blog nesta biblioteca front-end.

Prepare-se para levar suas habilidades para o próximo nível!

Configuração do ambiente de desenvolvimento

Antes de começar a desenvolver seu blog em React, é importante configurar o ambiente de desenvolvimento adequado. Isso inclui a instalação do Node.js, o gerenciador de pacotes npm e qualquer outra ferramenta que você precise para trabalhar com React.

1) Instalação do Node.js: Para começar, você deve instalar o Node.js em sua máquina. Você pode baixar a versão estável mais recente do Node.js no site oficial e seguir as instruções de instalação para o seu sistema operacional.

2) Configuração do npm: O npm é o gerenciador de pacotes do Node.js e permitirá que você instale as dependências necessárias para seu projeto React. Depois de instalar o Node.js, o npm estará disponível em seu sistema. Você pode verificar a instalação executando o seguinte comando no terminal:

npm -v

Se o comando mostrar a versão instalada do npm, significa que está configurado corretamente.

3) Criação de um novo projeto React: Uma vez configurado o npm, você pode criar um novo projeto React usando a ferramenta Create React App. Abra seu terminal e execute o seguinte comando:

npx create-react-app mi-blog-react

Isso criará uma nova pasta chamada "meu-blog-react" com todos os arquivos e configurações necessários para começar a desenvolver seu blog em React.

Com o ambiente de desenvolvimento configurado, é hora de criar os componentes principais do seu blog em React. Na próxima seção, veremos como criar e utilizar esses componentes.

Configurar o Firebase para um blog em React

Para configurar o Firebase em um blog React, você precisa:

1) Criar um projeto Firebase

Acesse o Console do Firebase, crie um novo projeto e selecione um nome.

Siga as instruções para registrar seu aplicativo web.

2) Instalar o SDK do Firebase

No seu projeto React, instale o SDK do Firebase com npm ou yarn:

npm install firebase

3) Inicializar o Firebase

Importe as funções necessárias dos módulos do Firebase para o aplicativo, autenticação, banco de dados e armazenamento. Em seguida, defina um objeto firebaseConfig que contém a configuração específica do projeto Firebase, como a chave de API, o domínio de autenticação, o ID do projeto, entre outros.

Com esta configuração, inicialize o aplicativo Firebase usando `initializeApp(firebaseConfig)`. Depois, obtenha as instâncias dos serviços de autenticação getAuth, banco de dados getFirestore e armazenamento getStorage passando o aplicativo inicializado como argumento.

Finalmente, essas instâncias são exportadas para que possam ser usadas em outras partes do aplicativo. É importante manter a confidencialidade da apiKey e outros detalhes sensíveis para proteger o aplicativo contra usos não autorizados.

4) Configurar a autenticação

Habilite a autenticação no console do Firebase.

Escolha o método de autenticação que deseja usar (e-mail, Google, Facebook, etc.).

Implemente a lógica de autenticação em seu aplicativo.

A função handleAuth é ativada quando ocorre o evento de envio de formulário devido à chamada a e.preventDefault(), que evita que o formulário seja enviado da maneira padrão. Se a variável signUp for falsa, indica que o usuário está tentando fazer login em vez de se registrar, a função verifica se o e-mail e a senha foram fornecidos.

Se sim, utiliza a função signInWithEmailAndPassword para autenticar o usuário com as credenciais fornecidas. Se a autenticação for bem-sucedida, define o usuário com setUser(user) e muda a visualização ativa para home com setActive("home").

Se o e-mail ou a senha não forem fornecidos, mostra uma mensagem de erro usando toast.error, pedindo ao usuário que preencha todos os campos.

Isso é típico em aplicações web modernas que utilizam frameworks como React junto com Firebase para a autenticação de usuários.

5) Configurar o Firestore Database

• Crie um banco de dados Firestore no console do Firebase.
• Defina a estrutura dos seus dados.
• Use firebase.firestore() para ler, escrever e deletar dados.

A função handleSubmit é ativada quando o formulário é enviado, e começa prevenindo o comportamento padrão do evento de envio para evitar que a página recarregue. Imediatamente, verifica se todas as variáveis necessárias (category, tags, title, description, trending) estão presentes e não são nulas.

Se alguma dessas variáveis faltar, é mostrada uma mensagem de erro para o usuário.

Se for um novo blog (ou seja, id não está presente), tenta criar um novo documento na coleção blogs do banco de dados com os dados do formulário, a data do servidor e as informações do autor. Se a operação for bem-sucedida, mostra uma mensagem de sucesso. Em caso de erro, registra o erro no console.

Esse padrão de tratamento de erros é comum em operações assíncronas, onde se utiliza try e catch para lidar com exceções que podem ocorrer durante as operações no banco de dados.

Entendendo a estrutura de um blog em React

Antes de nos aprofundarmos nos detalhes de como desenvolver um blog em React, é importante compreender a estrutura básica de um blog construído com essa tecnologia. Em React, um blog pode ser organizado em componentes e páginas que representam diferentes partes do mesmo.

Os principais componentes que você precisará para desenvolver um blog em React incluem:

1) Componente de cabeçalho ou Header: São exibidos diferentes elementos da interface dependendo se o usuário está autenticado ou não. Se userId for verdadeiro, são exibidos um perfil e uma opção para Logout. Se userId for falso, são exibidas opções para login ou registro.

Gerencia a navegação para diferentes rotas.

Link: Cria links para as páginas.

Home

Criar

Sobre Nós

Login/Auth. Gerencia a autenticação do usuário.

userId: Verifica se existe um usuário autenticado, se houver um usuário autenticado, mostra a imagem de perfil e o nome do usuário. Também oferece um botão de Logout. E, se não houver um usuário autenticado, mostra um botão de Login.

2) Componente de Trending: O componente OwlCarousel está presente para criar um carrossel, que pode mostrar múltiplos elementos em uma sequência.

Recebe uma lista de blogs como prop.

• A variável options: é um objeto que modifica o comportamento do carrossel aplicando (loop, margens, botões de navegação, resposta a diferentes tamanhos de tela). Também adapta o número de elementos visíveis a diferentes tamanhos de tela.
• blogs: é o array que contém os dados dos blogs a serem exibidos. Além disso, usamos map para criar os elementos do carrossel. Com o seguinte código adicionamos a Imagem, título, autor e data.
• Link para a página de detalhe do blog, ao clicar em um blog, direciona para a página /detail/${item.id}.

3) Componente de BlogSection: Recebe três propriedades: blogs, que é um array de objetos blog; user, que contém informações do usuário atual; e handleDelete, que é uma função para gerenciar a exclusão de blogs.

Recebe uma lista de blogs, informações do usuário e uma função de exclusão como props:

a. blogs: Array que contém os dados dos blogs a serem exibidos.

b.user: Objeto com informações do usuário autenticado.

c. handleDelete: Função para excluir blogs.

Renderiza os blogs em uma lista

d. Itera através do array blogs usando map para criar os elementos da lista.

Mostra informações de cada blog

e. Imagem, categoria, título, autor, data, descrição breve e botão "Ler mais".

Link para a página de detalhe do blog

f. Ao clicar no botão Ler mais, direciona para a página /detail/${item.id}.

Oferece opções de edição e exclusão para os autores

g. Se o usuário autenticado for o autor do blog, são exibidos os ícones de lixeira e lápis para excluir ou editar o blog respectivamente.

4) Componente de MostPopular: Cada blog é exibido com uma imagem e um título. A imagem é obtida da propriedade imgUrl do objeto blog e o título da propriedade title. Além disso, é exibida a data do blog, que é obtida convertendo o timestamp para uma string de data legível.

• Recebe uma lista de blogs como prop

blogs: Array que contém os dados dos blogs mais populares.

• Renderiza os blogs em uma lista

Itera através do array blogs usando map para criar os elementos da lista.

• Mostra informações de cada blog

Imagem, título e data.

• Habilita a navegação para a página de detalhe

Ao clicar em qualquer parte do elemento do blog, direciona para a página /detail/${item.id} usando useNavigate.

As principais páginas que você precisará para desenvolver um blog em React incluem:

1) Home.js:

Obtém os blogs da coleção blogs no Firebase

• Utiliza onSnapshot para se inscrever em mudanças em tempo real.
• Armazena os blogs e as etiquetas no estado local.

Obtém os blogs em tendência de forma separada

• Utiliza uma consulta ao Firebase para filtrar os blogs marcados como trending que sejam iguais a yes.

Gerencia o estado de carregamento

• Mostra um spinner enquanto os dados estão sendo obtidos.

Gerencia a exclusão de blogs

• Permite que os usuários excluam blogs com confirmação.

Renderiza os diferentes componentes

• Trending: Mostra os blogs em tendência.
• BlogSection: Mostra a lista de blogs diários.
• Tags: Mostra as tags disponíveis.
• MostPopular: Mostra os blogs mais populares.

2) Auth.js

Gerencia estados

a. signUp: Controla se o formulário de registro ou de login é exibido.

b. state: Armazena os dados do formulário (email, senha, nome, sobrenome).

Gerencia eventos do formulário

c. handleChange: Atualiza o estado quando os campos do formulário mudam.

d. handleAuth: Valida os dados, realiza a autenticação com Firebase e redireciona para a página principal.

Interage com Firebase Auth

e. signInWithEmailAndPassword: Faz login com email e senha.

f. createUserWithEmailAndPassword: Cria um novo usuário com email e senha.

g. updateProfile: Atualiza o nome do usuário no seu perfil do Firebase.

Exibe campos condicionais

h. Renderiza os campos de nome e sobrenome apenas no modo de registro.

Alterna entre formulários

i. Permite alternar entre login e registro através de um link.

Exibe notificações

j. Utiliza toast para mostrar mensagens de erro ou sucesso.

Redireciona para a home

k. Após uma autenticação bem-sucedida, redireciona para a página principal.

3) AddEditBlog.js

Gerencia estados

a. form: Armazena os dados do blog (título, tags, categoria, etc.).

b. file: Armazena o arquivo de imagem selecionado.

c. progress: Indica o progresso do upload da imagem.

Recebe props

d. user: Informação do usuário atual.

e. setActive: Função para gerenciar a barra lateral.

f. id: ID do blog a ser editado.

Gerencia eventos do formulário

g. handleChange: Atualiza o estado do formulário.

h. handleTags: Gerencia o componente de tags.

i. handleTrending: Atualiza o estado de "tendência".

j. onCategoryChange: Atualiza a categoria selecionada.

k. handleSubmit: Envia o formulário para criar ou atualizar o blog.

Faz upload de imagens para Firebase Storage

l. useEffect: Observa mudanças em file.

m. uploadFile: Inicia o upload da imagem para Firebase Storage.

• Armazena a URL de download no estado do formulário.

Obtém dados de um blog existente (se aplicável)

n. useEffect: Observa mudanças em id.

o. getBlogDetail: Obtém os dados do blog do Firestore.

Interage com Firestore para salvar dados

p. addDoc: Cria um novo documento na coleção blogs.

q. updateDoc: Atualiza um documento existente na coleção blogs.

4) Detail.js

Obtém dados de blogs

a. useEffect: Obtém todos os blogs e suas etiquetas ao iniciar o componente.

b. getBlogData: Obtém os dados de todos os blogs da coleção "blogs" no Firestore

c. Armazena os resultados nos estados blogs e tags.

Obtém dados do blog a ser exibido

d. useEffect: Obtém os dados do blog específico quando seu id é fornecido.

e. getBlogDetail: Obtém os dados do blog com o ID especificado.

f. Armazena os resultados no estado blog.

Mostra informações do blog

g. Renderiza a data, título, autor, descrição e imagem do blog.

Mostra componentes adicionais

h. Tags: Mostra as etiquetas do blog atual.

i. MostPopular: Mostra os blogs mais populares (presumivelmente usando a lista de blogs obtida anteriormente).

Esses são apenas alguns exemplos dos principais componentes que você pode utilizar em um blog desenvolvido em React. Ao seguir esses passos, você terá criado os componentes principais do seu blog em React. Lembre-se de que essas são apenas algumas ideias de funcionalidades que você pode adicionar ao seu blog em React.

A funcionalidade exata dependerá de seus objetivos e requisitos específicos. Certifique-se de manter um equilíbrio entre funcionalidade e simplicidade para oferecer uma experiência de usuário agradável.