Scheduling Event App

Um aplicativo de agendamento de eventos desenvolvido com React-Redux e Firebase

MOTIVAÇÃO

Na grade extracurricular do Nanodegree de Desenvolvedor Front-End da Udacity temos umas aulas de melhores práticas de implementação de campos Inputs e preenchimento de formulários de forma mais intuitiva.

Como projeto final ele nos desafia a fazer uma aplicação de agendamento de eventos com cadastro e credenciamento de usuário, criação de agendamento de eventos e apresentar a lista destes para cada usuário logado na aplicação.

OS REQUISITOS

Não se fazia obrigatório a criação de um Back-end ou uma funcionalidade de salvar as informações do usuário, porém para se mostrar a lista de eventos criados por usuários ele sugere o uso da localStorage ou o Firebase.

Escolhi o Firebase por ser um Back-End como serviço mais robusto e completo e já tinha vontade de aprender mais sobre ele então aproveitei a oportunidade e posso adiantar, é muito fácil de configurar e usar.

Já sobre a tecnologia para o Front-End que escolhi, o ReactJs, devido eu ter me dado muito bem com ele. Agora estou me especializando nele.

Os requisitos mínimos solicitados eram:

Para a criação da conta do usuário

nome
Email
Password

Para a criação do Evento:

nome do Evento
Tipo do Evento
Local do Evento
Data e Hora de inicio
Data e Hora de Fim
Lista de convidados
Endereco do Evento
Mensagem para os Convidados

A intenção é tornar o preenchimento desses campos intuitivo e prático usando de validações no Front-End, auto preenchimento, campos requeridos etc. tando para telas pequenas quanto em telas maiores.

ORGANIZANDO O PROJETO

Primeiro ponto no qual me preocupei foi na organização dos arquivos, ou melhor, na estruturação das pastas dentro do framework do ReactJs.

Usei o create-react-app disponibilizado pelo Facebook que já nos fornece toda uma estrutura configurada. Como sou novo usando React procurei ver uns vídeos para saber como outros desenvolvedores estão estruturando seus arquivos já que o React é orientado a componentes, e acho que é por isso que o código no geral fica muito bem organizado, estruturado e de fácil manutenção.

Separei da seguinte forma, criei uma pasta de containers, que é a pasta que irá conter os componentes que iram renderizar outros componentes com conteúdo, estes componentes containers serão as “paginas” as que vão na URL, seram instanciadas nas Rotas da aplicação.

Em outra pasta chamada componentes, botei os componentes comuns e com conteúdo final, são os usados pelos containers.

Separei a configuração do servidor em uma pasta chamada server e criei uma pasta chamada útil para por alguns helpers e o arquivo responsável pelas mensagens ao usuraio.

Scheduling Event App

CODIFICANDO

Comecei implementando os componentes para criação de uma conta na aplicação, configurando o serviço do Firebase. Realizei os testes e logo com tudo funcionando comecei com os componentes responsáveis pelo credenciamento do usuário na aplicação (o Login).

Em seguida veio os componentes para renderizar a lista dos eventos do usuário logado, mas ainda sem nenhum item na lista. Para isto implementei os componentes responsáveis por adicionar um Evento na aplicação.

Ao deixar tudo funcionando cuidei para que a lista com os Eventos adicionados fossem listados na pagina de eventos.

Após isto, passei para a Edição e Exclusão do Evento, para os ícones utilizei o Fontawesome, o de Editar e de Excluir para por ao lado de cada Evento na lista para ser possível editar e excluir qualquer evento adicionado.

Para o botão Editar, implementei os componentes responsáveis para navegar ate a pagina de edição reutilizando o mesmo componente de formulário usado na adição de um novo evento.

Para o botão excluir, decide fazer um componente de Modal pois como só se tratava de dois botões, um de excluir e outro de cancelar essa seria a forma mais pratica.

E então por fim apenas implementei os componentes responsáveis por renderizar os detalhes do Evento também usando o componente Modal devido ser apenas para visualização.

GERENCIANDO O ESTADO DA APLICAÇÃO

Após deixar tudo funcionando apenas como o React, resolvi tentar aprender mais sobre o Redux, então implementei ele na minha aplicação.

Com o fim de gerenciar o credenciamento do Usuário na aplicação e sua devida Lista de Eventos, eu criei um estado único para a aplicação para que todos os componentes se beneficiem com estas informações que são necessárias para o completo ciclo de vida do App.

CONCLUINDO

A cada projeto que faço com ReactJs fico mais apaixonado, é muito prático, organizado e de fácil manutenção. A aplicação funciona com um ótimo desempenho.

Após finalizar o App eu quis reestruturar as pastas e a organização dos arquivos separando o que era container e o que era componentes, e posso dizer que foi muito tranquilo com poucas mudanças no importes.

Você consegue programar de forma que deixe seus componentes bem desacoplados e com responsabilidades claras. Fica tudo mais fácil.

Em Ação Aqui