Skip to content

JulianySavazzi/feedbacker

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

246 Commits
.idea
.idea
 
 
feedbacker-dashboard
feedbacker-dashboard
 
 
laravel-feedbacker
laravel-feedbacker
 
 
nuxt-feedbacker
nuxt-feedbacker
 
 
widget
widget
 
 
.DS_Store
.DS_Store
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

feedbacker

Aplicação web de dashboard com autenticação e instalador do web component de envio e recebimento de feedbacks para sites.

  • Sobre a aplicação:

    • a pasta laravel-feedbacker, contém o projeto criado com o framework Laravel para o backend (API);

    • a pasta nuxt-feedbacker contém o projeto nuxt usando vue3 para o front-end da dashboard;

    • a pasta widget contém o projeto nuxt do componente de envio de feedbacks;

    • a pasta try-widget contém uma página web para testar o widget;

    • 💡

    • o projeto conta com alguns testes unitários e testes de integração;

    • o deploy da API será no Vercel, e do dashboard na Netlify;

    • ❗️

    • a branch local-server-api está com o projeto pronto e configurado localmente (funcionando no servidor local);

    • a branch main tem o deploy da dashboard e backend respectivamente no netlify e vercel, porém o backend deployado está apresentando erros de redirecionamento (status 303), e por enquanto o widget não está completo nela (apenas na branch para servidor local);

    • acessar feedbacker dashboard

  • Observações:

    • a pasta feedbacker-dashboard contém um projeto Vue3 CLI criado no treinamento gratuido da Vue.js Brasil;
    • ele foi criado para estudos e será usado de base (componentes e algumas regras de negócio) para os projetos com nuxt e laravel;
    • ele não está com a dashboard completa, o front-end completo utilizado para o dashboard da aplicação foi feito em nuxt.

Tecnologias utilizadas:

- Laravel Framework v10
- Nuxt3
- Vue3
- TailwindCSS

Executar aplicação:

desativar o prevent tracking no navegador;

servidor backend na pasta laravel-feedbacker pelo terminal:

#laravel
php artisan serve

servidor web via node na pasta nuxt-feedbacker pelo terminal:

#npm
npm run dev

se aparecer um erro de pacotes do pinia ao executar o servidor nuxt, verificar se o pinia foi instalado e fazer o seguinte comando na pasta nuxt-feedbacker:

#npm
npm i pinia -f

Executar testes:

Testes unitários usando jest:

  • instalar jest no nuxt:
npm i --save-dev @nuxt/test-utils jest @vue/test-utils happy-dom playwright-core
npm install --save-dev @jest/globals
npm install --save-dev ts-jest
npm i ts-node
npm init jest@latest
  • no package.json -> scripts -> tests: "node --experimental-vm-modules node_modules/jest/bin/jest.js"
npm run test

Testes end 2 end usando cypress:

  • Instalar e abrir cypress no nuxt:
npm install cypress --save-dev
#npx cypress open
npm run cy:open
  • para o ultimo comdando funcionar no package.json -> scripts -> "cy:open": "cypress open", se não precisa executar pelo comando npx

Desafios

Problemas com o Jest:

  • Como o nuxt por padrão utiliza o vitest, foi trabalhoso instalar o jest e faze-lo funcionar para os testes unitários.
  • Ainda não consegui fazer testes na store com o Jest, mesmo após pesquisar sobre testes unitarios em stores que usam o Pinia.
  • Talvez eu mude para o vitest para tentar refazer os testes unitários também na store e nos componentes.

Dificuldades com o cypress:

  • Ainda não consegui executar o cypress em segundo plano salvando os outputs dos testes em uma pasta.
  • Porém consegui fazer vários testes end2end, a documentação dele me ajudou bastante.

Implantação do projeto nuxt no netlify:

  • Fazer o deploy do projeto nuxt de front-end no netlify foi algo novo para mim, eu nunca tinha usado a plataforma e a documentação do nuxt deixou um pouco a desejar nessa parte, pois fiz o deploy seguindo as instruções de lá e o site simplesmente carregava uma página de status 404.
  • Estou usando o plano gratuíto. Após pesquisar em forums, e revisitar a documentação do nuxt e netlify, descobri que para funcionar corretamente, eu precisava adicionar uma variável ENV nas configurações da implantação no netlify chamada de SERVER_PRESET, habilitando as edge functions (isso não estava explícito, na documentação do nuxt dizia que era opicional, porém sem essa ENV, o site simplesmente não funcionava, qualquer página que você tentava acessar retornava 404).
  • Mas esse de longe foi o menor dos problemas que encontrei.

Implantação da API laravel no vercel:

  • Até agora meu maior desafio está sendo em tentar fazer meu backend funcionar corretamente depois de fazer o deploy no vercel.

  • Primeiramente, fui surpreendida pela documentação do vercel, quando oferecia apenas templates para frameworks de front-end e backend com NodeJs (e pelo que entendi e pesquisei, só garantem 100% de compatibilizade no plano gratuíto para essas plataformas mencionadas na doc).

  • Após pesquisar em muitos foruns e tutoriais, consegui fazer o deploy da API laravel, utilizando o pacote laravel-vercel para composer e o PHP Runtime for Vercel (deixei os links na seção de links úteis).

  • O primeiro grande problema que consegui contornar foi o problema de CORS, o qual me fez pesquisar muito sobre headers e allow origins. Como eu não tinha um único domínio, pois eu estou usando o dominio fornecido no meu deploy do netlify para o front-end e o do vercel para o backend, tive que implantar um proxy no projeto nuxt, o que deu um pouco de trabalho mas funcionou corretamente, após eu fazer todas as configurações ENV no backend implantado no vercel (SESSION_DOMAIN, APP_URL, SANCTUM_STATEFUL_DOMAIN etc).

  • Sofri muito testando várias configurações do vercel.json, até que consegui deixar o arquivo clean (apenas com o necessário para funcionar), já que a maioria dos guias da documentação que eu tentava seguir quando implementados me davam alguns problemas (simplesmente não conseguia fazer o build da aplicação impedindo e deploy e dando um erro nada específico que falava que o meu vercel.json tinha conflitos, o que me fazia voltar a estaca zero). Porém ainda estou com um grande problema.

  • As rotas da API funcionam como esperado quando faço requisições usando o ThunderClient: status 200 para rotas sem autenticação, 204 para a rota get sanctum/crsf-token (utilizado para autenticação do SPA), e para as rotas do tipo POST que eu preciso do cookie XSRF-TOKEN respondem 419 (pois no thunderclient, não passo o cookie na hora de testar a requisição).

  • No meu servidor local, a autenticação utilizando Sanctum e as rotas de login e registro de uruário usando Fortify funcionam perfeitamente.

  • Porém no meu deploy estou tendo o seguinte problema: todas as rotas que utilizam o midleware do sanctum (rotas que precisam da autenticação) retornam um status 302 (não estão conseguindo ser redirecionadas corretamente).

  • A requisição sanctum/crsf-token funciona, os cookies são salvos e passados corretamente nos cabeçalhos de request e response, a rota register salva os usuarios novos no banco de dados, porém não é redirecionada corretamente retornando um status 302 e depois um 404. As rotas que dependem de login também retornavam um 302 e depois um 404. Vi que esse 404, era para a rota /home, e consegui contornar esse bug, porém ainda continua retornando 302 após fazer request na rota /login, ele até carrega a pagina de usuario logado retornando um 200 em seguida, mas não traz os dados do banco (os dados que deveriam vir do usuário logado ficam em branco). Até agora não achei nada que me ajudasse a resolver esse problema.

  • VERCEL LOGS APÓS FAZER LOGIN:

TIME STATUS HOST REQUEST MESSAGE
MAY 17 11:27:49.97 GET200 feedbacker-julianysavazzis-projects.vercel.app / 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/ 🐘 Querying / 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:51464 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:51464 Closing
MAY 17 11:27:49.93 GET302 feedbacker-julianysavazzis-projects.vercel.app /api/feedbacks 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/api/feedbacks?limit=2&offset=0&total=0&type= 🐘 Querying /api/feedbacks?limit=2&offset=0&total=0&type= 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:51458 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:51458 Closing
MAY 17 11:27:49.84 GET200 feedbacker-julianysavazzis-projects.vercel.app / 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/ 🐘 Querying / 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52802 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52802 Closing
MAY 17 11:27:49.81 GET302 feedbacker-julianysavazzis-projects.vercel.app /api/feedbacks/summary 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/api/feedbacks/summary 🐘 Querying /api/feedbacks/summary 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52790 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52790 Closing
MAY 17 11:27:49.50 GET200 feedbacker-julianysavazzis-projects.vercel.app / 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/ 🐘 Querying / 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52784 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52784 Closing
MAY 17 11:27:49.47 GET302 feedbacker-julianysavazzis-projects.vercel.app /api/user 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/api/user 🐘 Querying /api/user 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52782 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52782 Closing
MAY 17 11:27:49.27 GET200 feedbacker-julianysavazzis-projects.vercel.app / 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/ 🐘 Querying / 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52770 Accepted [Fri May 17 14:27:49 2024] 127.0.0.1:52770 Closing
MAY 17 11:27:49.22 GET302 feedbacker-julianysavazzis-projects.vercel.app /home 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/home 🐘 Querying /home 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52756 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52756 Closing
MAY 17 11:27:49.05 POST302 feedbacker-julianysavazzis-projects.vercel.app /login 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/login 🐘 Querying /login 🐘STDERR: [Fri May 17 14:27:48 2024] 127.0.0.1:52746 Accepted 🐘STDERR: [Fri May 17 14:27:49 2024] 127.0.0.1:52746 Closing
MAY 17 11:27:47.93 GET204 feedbacker-julianysavazzis-projects.vercel.app /sanctum/csrf-cookie 🐘 Accessing feedbacker-julianysavazzis-projects.vercel.app/sanctum/csrf-cookie 🐘 Query

Observação:

Localmente, tanto o projeto laravel que desenvolvi para fazer minha API no backend, quanto o projeto nuxt que desenvolvi para fazer o front-end da minha aplicação, funcionam corretamente (todas as rotas e funcionalidades).

Links uteis e documentações utilizadas:

About

Dashboard de feedback para sites - treinamento Vue.js Brasil

feedbacker-ruby.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages