Giter Site home page Giter Site logo

practice-uffs / forms Goto Github PK

View Code? Open in Web Editor NEW
5.0 5.0 0.0 8.63 MB

Serviço de criação de formulários/enquetes online (similar ao Google Forms) baseado em análise de texto

License: Apache License 2.0

Shell 0.23% PHP 54.34% Blade 44.75% Hack 0.68%

forms's Introduction


Forms

O Practice Forms é um sistema que possibilita que usuários criem enquetes/formulários ao estilo do Google Forms, porém a criação (e edição) se dá em formato de texto puro. O objetivo principal é facilitar a criação através de uma interface mais intuitiva.

IMPORTANTE: se você deseja utilizar o sistema, o Practice Forms está em funcionamento em practice.uffs.edu.br/forms.

✨ Features

O forms possui um conjunto considerável de features:

  • Autenticação a partir do idUFFS.
  • Criação de enquetes/forms a partir de texto puro.
  • Acompanhamento de respostas (em tempo real).

🚀 Começando

1. Dependências

Para executar o projeto, você precisa ter o seguinte instalado:

1.1 Git

sudo apt install git

1.2 PHP

sudo apt install php7.4-cli

1.3 Composer

1.4 Node JS

sudo apt install nodejs

1.5 NPM

sudo apt install npm

1.5.1 Módulo "n" e alterando versão do Node

sudo npm install -g n
sudo n stable

1.6 Extensões necessárias

sudo apt install php-cli php-mbstring php-zip php-xml php-curl php-gd

2. Configuração

Feito a instalação das dependências, é necessário obter uma cópia do projeto. A forma recomendada é clonar o repositório para a sua máquina.

Para isso, rode:

git clone --recurse-submodules https://github.com/practice-uffs/forms && cd forms

Isso criará e trocará para a pasta forms com o código do projeto.

2.1 PHP

Instale as dependências do PHP usando o comando abaixo:

composer install

2.2 Instalando sqLite 3

sudo apt install php-sqlite3

2.3 Banco de Dados

O banco de dados mais simples para uso é o SQLite. Para criar uma base usando esse SGBD, rode:

touch database/database.sqlite

2.4 Node

Instale também as dependências do NodeJS executando:

npm install

2.5 Laravel

Crie o arquivo .env a partir do arquivo .env.example gerado automaticamente pelo Laravel:

cp .env.example .env

Criação as tabelas do banco de dados com as migrações esquemas:

php artisan migrate

Rode os seeders (que crias as categorias/serviços padrão):

php artisan db:seed

Gere aa chave de autenticação da aplicação:

php artisan key:generate

Por fim gere os recursos JavaScript e CSS:

npm run dev

DICA: enquanto estiver desenvolvendo, rode npm run watch para manter os scripts javascript sendo gerados sob demanda quando alterados.

3. Utilizacão

3.1 Rodando o projeto

Depois de seguir todos os passos de instalação, inicie o servidor do Laravel:

php artisan serve

Após isso a aplicação estará rodando na porta 8000 e poderá ser acessada em localhost:8000.

Para que as notificações em tempo real funcionem, você precisa rodar as filas (queues) do Laravel

php artisan queue:work

E também o servidor websocket (use outra sessão/aba do terminal para isso):

php artisan websockets:serve

3.2 Utilização da API

Se você utilizar a API dessa aplicacão, todos endpoints estarão acessivel em /api, por exemplo localhost:8000/api. Os endpoints que precisam de uma chave de autenticação devem ser utilizar o seguinte cabeçalho HTTP:

Authorization: Bearer XXX

onde XXX é o valor da sua chave de acesso (api token do Jetstream), por exemplo c08cbbfd6eefc83ac6d23c4c791277e4. Abaixo está um exemplo de requisição para o endpoint user utilizando a chave de acesso acima:

curl -H 'Accept: application/json' -H "Authorization: Bearer c08cbbfd6eefc83ac6d23c4c791277e4" http://localhost:8080/api/user

🤝 Contribua

Sua ajuda é muito bem-vinda, independente da forma! Confira o arquivo CONTRIBUTING.md para conhecer todas as formas de contribuir com o projeto. Por exemplo, sugerir uma nova funcionalidade, reportar um problema/bug, enviar um pull request, ou simplemente utilizar o projeto e comentar sua experiência.

Veja o arquivo ROADMAP.md para ter uma ideia de como o projeto deve evoluir.

🎫 Licença

Esse projeto é licenciado nos termos da licença open-source MIT e está disponível de graça.

🧬 Changelog

Veja todas as alterações desse projeto no arquivo CHANGELOG.md.

🧪 Links úteis

Abaixo está uma lista de links interessantes e projetos similares:

forms's People

Contributors

dovyski avatar alissonpeloso avatar zorteaadriano avatar cleissonvieira avatar

Stargazers

 avatar Guilherme Rafael Graeff avatar JFP avatar  avatar  avatar

Watchers

 avatar Giancarlo Salton avatar Luciano L. Caimi avatar Andrew M. Silva avatar Jean Carlo Hilger avatar

forms's Issues

Resetar Barra de Progresso

Em questões de múltiplas respostas a barra não está voltando para o estado inicial.
Precisamos resetar a barra de progresso, na configuração do JS ainda está populado os valores dos campos preenchidos.

Divergência na contagem de respostas

Ao alterar uma pergunta em que já haviam respostas, as respostas da pergunta antiga não são mais listadas na aba de respostas, embora continuem contabilizando no total de respostas do formulário.

image

Nesse exemplo alterei a pergunta para 'Minha nova pergunta', mas antes disso eu já havia respondido 3 vezes a pergunta antiga, e nesse caso a pergunta antiga não está mais sendo listada, embora esteja sendo contabilizada como resposta do formulário.

A proposta é alterar na listagem das perguntas para buscar todas as respostas buscando pelo id do formulário, tendo em vista 0,,que está buscando pelo texto da pergunta.

Bug nas respostas únicas

Nas permissões tem a opção de deixar uma resposta única por pessoa (precisa logar no forms). No caso, se você realizar uma resposta e dar "ok" depois da confirmação, ele te redireciona pra mesma página de respostas. Isso faz com que você possa responder mais de uma vez. Acredito que se redirecionar para a página inicial depois de uma resposta nesse caso de configuração, ele funcione corretamente, pois se você fechar a aba e tentar entrar no link de resposta, ele não permite.

O objetivo desta issue é resolver esse problema e verificar se há mais casos como esse nas permissões das perguntas

Barra de progresso na tela de respondente

-Criar um layout de barra de progresso superior na tela de respondente do formulário.
-Ao selecionar uma opção ou inserir algum texto no campo de resposta da pergunta, criar funcionalidade para avançar a barra de progresso.

Tela de responder Formulários

Ao acessar um formulário e enviar sem preencher os campos é retornado um erro em código data.poll 0 conforme imagem abaixo. É necessário traduzir o campo ao usuário
image

Tela de editar/criar Forms

  • web: diminuindo a resolução abaixo de 990x o menu está ficando oculto.
    image

  • web: hoje ao criar ou editar um formulário, não existe botão de confirmar criação ou salvar edição. Se o usuário clica em criar e sai da página, automaticamente cria um formulário em branco, mesmo sem título. Seria interessante existir esses botões para confirmar o fluxo.
    Atualização: Foi buscada uma forma mais simples de resolver o problema pois o formulário estava automatizado salvando as alterações à cada mudança no formulário, para não alterar toda essa estrutura foi criado um botão de exclusão na listagem, possibilitando essa limpeza dos formulários em branco.

  • mobile: alguns itens estão ficando em cima de outros. As frases precisam ser melhor alocadas. As caixas de texto e preview precisam ser fixadas lado a lado e o QR Code precisa ser responsivo de acordo com a resolução do mobile.
    image image

Revisão de conteúdo

Conforme conversado em reunião crio está tarefa para direcionar alguém para revisar o conteúdo do FORMS
Está sendo feito ajustes finais no mesmo para de fato anunciar.

Pasta do drive para incluir a revisão

Incluir opção de configuração respostas

Atualmente temos um campo de texto para detalhamento da perguntas do formulário, utilizando a biblioteca PollFromText para reconhecer dois tipos de perguntas: perguntas de resposta de texto (input) e pergunta com resposta de seleção (por padrão, utilizado o select). Reutilizando essa estrutura, devemos possibilitar a configuração de uma pergunta para definir que tipo de resposta ela irá aceitar.

Perguntas do tipo input, aceitarão respostas do tipo: texto, data, hora, email, telefone e arquivo.
Perguntas do tipo select, aceitarão resposta do tipo: Select (padrão), Radio (item único), Checkbox (múltiplos itens)

Ajustes de layout na página de submissão do formulário

  • Barra de progresso deve ficar no topo, ao rolar a tela, a barra de progresso deverá continuar aparecendo, em tamanho reduzido.

  • Alterar configurações da página para que a aparência seja de uma prova: os background-color nas laterais com algum tom mais escuro presente no projeto, as questões exibindo separadas com um bom espaço entre elas (testar com blocos separados ou somente uma linha dividindo as questões), o texto da pergunta aparecendo em formato maior.

Adicionar o widget da aura no forms

Pode se basear nessa issue aqui: practice-uffs/app-practice#219

A ideia é utilizar um iframe e utilizar o token de autenticação (se estiver logado) sem precisar fazer o login pelo widget.

v0/widgets/aura?type=button é a rota de acesso pela API. Vamos utilizar a type button pois é a que faz sentido para uma aplicação web.

Corrigir problemas de UI/UX

Desktop

  • Ajustar footer no modo
    image

  • Não aparece nada na página de respostas se não há respostas ainda (no momento de criação)
    image

  • Precisa adicionar wrap nos formulários criados
    image

  • Centralizar botão de Enviar na tela "Responder"
    image


Mobile

  • Ajustar o header
    image

  • Diminuir espaçamento, página inicial
    image

  • Ajustar padding, página inicial
    image

  • Ajustar o exemplo, acho que dá pra colocar um abaixo do outro
    image

  • Centralizar a animação de gráficos
    image

  • Ajustar footer
    image

  • Overflow nos forms criados (talvez um overflow-x com scroll resolva)
    image

  • Corte na visualização do form, talvez um padding-bottom
    image

  • Centralizar botão de "enviar" na tela "responder"
    image

Problema na redenização das respostas

Há um livewire para respostas no Forms, porém as respostas não aparecem como deveriam após alguem responder. Acredito que precise vincular um evento relacionado a uma resposta para que o livewire ative, mas não tenho certeza.

Mas o correto é que após uma resposta, a página de respostas do formulário mostre a resposta recém criada sem precisar recarregar a página.

O objetivo dessa issue é encontrar uma forma de ajustar esse livewire.

Criar submissão de respostas do tipo checkbox

-Na tela de respondente do formulário, exibir a opção de resposta do tipo checkbox.
-Ao submeter o formulário, concatenar as opções selecionadas e salvar.

-Posteriormente criar issue para visualização desse tipo de resposta no relatório.

Controle de tempo limite para responder um formulário

-Nas configurações do formulário, criar um campo para definir um tempo limite pro usuário responder.
-Criar um contador de relógio no topo da página de respondente exibindo o tempo restante atualizado.
-Ao zerar o tempo, alertar o usuário e fazer a submissão automática do formulário.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.