Sobre • Feedback Widget • Instalação • Tecnologias • Autor

Sobre

Projeto desenvolvido durante a NLW Return, evento criado pela Rocketseat.
Um evento 100% online e GRATUITO, com conteúdo exclusivo e INÉDITO.

Ocorreu do dia 02 ao dia 08 de Maio de 2022 e teve como intuito mostrar na prática o poder da stack NodeJS + ReactJS + React Native e como essas tecnologias podem te levar até os seus maiores objetivos como programador.

FeedbackWidget

O Feedback widget é uma aplicação disponibilizada para os usuários terem contato com o time de desenvolvimento para que possam falar sobre problemas, repassar alguma ideia que tenham ou falar sobre outros assuntos. A aplicação está disponível tanto na web quanto no mobile e possui as mesmas funcionalidades em ambas as plataformas.

Vamos ver abaixo na pratica como tudo funciona...😎

Widget na web

Ao acessar a página que contenha o widget teremos no canto inferior direito nossa funcionalidade, conforme imagem a seguir:

Ao clicar no widget, as opções disponíveis serão exibidas para o usuário:

Ao escolher a opção desejada, o usuário terá um pequeno formulário contendo um campo de texto para ele digitar sua mensagem para os desenvolvedores e um botão para tirar um printScreen para anexar na mensagem dele, conforme exemplificado abaixo:

Feito isso, basta enviar o feedback e, após a tela de confirmação abaixo, bastará aguardar contato da equipe responsável: 🙃

Vamos acompanhar o fluxo completo no GIF abaixo e ver a simplicidade e agilidade que a aplicação entrega para a funcionalidade proposta:

Widget no mobile

No mobile o funcionamento é o mesmo. Na página aonde o widget está adicionado teremos o seguinte:

Após clicar no widget ele será aberto e teremos as três opções disponíveis:

Ao clicar na opção desejada o formulário de feedback será exibido na tela com o campo de texto e o botão para tirar um printScreen da tela:

Após escrever nossa mensagem à equipe responsável e adicionar nossa evidência, teremos a mensagem a seguir para confirmar que o feedback foi enviado com sucesso:

E pronto, nosso feedback foi enviado para a equipe responsável com todas as informações preenchidas! 🙃

Abaixo um exemplo do fluxo de feedback completo para exemplificar a facilidade e agilidade do widget para concessão de feedbacks:

Instalação

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.

🎲 Rodando o Back End (servidor)

# Clone este repositório
$ git clone git@github.com:MrRioja/nlw-return.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-return

# Vá para a pasta server
$ cd server

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev

# O servidor inciará na porta 3333 ou na porta definida no arquivo .env na variável APP_PORT - acesse <http://localhost:3333>

🖥️ Rodando o Front End (Web)

# Clone este repositório
$ git clone git@github.com:MrRioja/nlw-return.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-return

# Vá para a pasta web
$ cd web

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev

# O servidor inciará na porta 3000 - acesse <http://localhost:3000>

📱 Rodando o App (Mobile)

# Clone este repositório
$ git clone git@github.com:MrRioja/nlw-return.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-return

# Vá para a pasta mobile
$ cd mobile

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute a aplicação
$ expo start

# Será aberto no terminal o menu do Expo onde poderá scanear o QR Code para executar o app diretamente no seu celular ou as opções de executar no emulador android ou iOS

Tecnologias

Autor

Luiz Rioja

Backend Developer