Criação de telas em Vuejs e Vuetify em um sistema em desenvolvimento

Contexto Geral do Projeto

Introdução Este projeto tem a finalidade de desenvolver telas como especificado na imagem abaixo, através da utilização dos frameworks VueJS, Vuetify e NodeJS. A imagem passada serve apenas de guia para o desenvolvimento do projeto, não é necessário e nem esperado que seja exatamente igual a imagem passada. Nesse projeto somente as telas são exigidas, não será necessária a implementação de integração para a comunicação com o backend. Assim, conforme a necessidade, para cada tela é requerido que seja utilizado um conjunto de componentes já pré-definidos que serão passados ao desenvolvedor mediante a aceitação de desenvolvimento do projeto. O uso desses componentes é importante para se manter um padrão de design nas telas. Caso nenhum dos componentes fornecidos seja útil para resolver algum problema em questão, pode se utilizar os componentes já definidos no framework Vuetify e se mesmo assim ele não o atender, então é esperado o desenvolvimento de um componente próprio (seguindo um padrão de nome: W + Nome base + Funcionalidade específica se tiver). Esperamos que os componentes passados não sejam modificados, com exceção de extrema necessidade. Novamente para manter o padrão de design os ícones gratuitos do fontawesome devem ser utilizados. Tempo estimado 1 a 2 semanas Conhecimentos necessários VueJS Vuetify Fontawesome NodeJS Dados a serem passados ao desenvolvedor Componentes: uma pasta com os componentes pré-definidos que pode ser importado no arquivo main.js com o código “import ‘./Components’”, e assim ser usados em qualquer lugar do projeto vuetify.js: arquivo que contém cores pré-definidas do projeto. README: link para o gitlab com a documentação dos componentes a serem usados: https://gitlab.com/aluizio/wiki/-/blob/master/vue_personal_components.md (obs: não postar esse link, será passado apenas quando for aceito o projeto) Telas: será passado uma imagem png de cada tela, além de uma imagem global que mostras todas as telas e o relacionamento delas. Texto de especificação das telas: será passado um texto que fornece informações mais detalhadas sobre cada tela. Padrões do projeto Nosso interesse nesse projeto é mais o código do que a tela em si, devido a isso esse projeto deve seguir alguns padrões de desenvolvimento: Código em inglês: com exceção dos textos exibidos para o usuário todo o resto do código tem que ser desenvolvido em inglês, até o nome dos arquivos. Camel Case: todo o código tem que usar camel case, até os nomes de arquivo. Identação 4 espaços: todo o código desde o html ao javascript tem que usar identação de 4 espaços. Sem erros no console: o desenvolvedor deve checar se não há erros no console do browser. Testes no firefox: preferível que seja testado o projeto no navegador firefox, por exibir mais erros normalmente. Componentes externos proibidos: não é aceito o uso de componentes externos além dos que serão passados e dos componentes definidos no vuetify. Nome de componentes próprios: o nome tem que seguir o seguinte formato: W + Nome base + Funcionalidade específica se tiver Componente v-text-field: esse component do vuetify pode ser usado com o tipo regular de design, que é o tipo padrão desse componente, o mesmo se aplica a outros componentes de entrada. Cores: é esperado que seja usado as cores pré-definidas no arquivo vuetify.js. Responsivo: as telas tem que ser responsivas, ou seja, no minimo adequadas para o tamanho de tela do celular. Telas Agora será especificado alguns detalhes referentes a cada tela é o que é esperados das mesmas. Tela 1: tela de pré-venda é esperado o uso dos componentes WHeader para o título e WListBase para a lista, os filtros acima da lista é esperado o uso do v-select e o v-chip para o campo esperando resposta. Tem que ser feita em um arquivo view.vue exclusivo. Tela 2: tela de pós-venda é esperado o uso dos componentes WHeader para o título e WListBase para a lista, os filtros acima da lista é esperado o uso do v-select, a não ser para o filtro pedido que pode ser um v-text-field, e o v-chip para o campo esperando resposta. Tem que ser feita em um arquivo view.vue exclusivo. Tela 3: tela de avaliações é esperado o uso dos componentes WHeader para o título e WListBase para a lista, os filtros acima da lista é esperado o uso do v-select e o v-chip para o campo esperando resposta. Tem que ser feita em um arquivo view.vue exclusivo. Tela 4 e 5: telas de mensagens pré-definidas é esperado o uso do componente WHeader para o titulo, e uso do v-tabs para as abas. Esses duas telas são apenas duas visões de uma mesma tela e tem que serem feitas em um mesmo arquivo view.vue. As 3 primeiras abas dessa tela seguem a forma de conteúdo da tela 4 e as demais abas seguem o formato do conteúdo da tela 5. Como há somente dois formatos de conteúdo, é esperado que seja feito dois componentes separados um para cada formato de conteúdo, assim não há repetição de código. Para os campos de entrada o v-text-field e o v-textarea devem ser usados. Tela 6 e 7: telas de Templates é esperado o uso do componete WHeader para o título, o WListBase para a lista, o WButtonFab para os botões de ações na lista e para o botão com o + dentro, o v-chip para o campo nome na lista e o v-select para os filtros da lista, o botão de editar da lista leva para a tela 7 assim como o botão com o icone + e o botão de excluir tem que usar o component WConfirmBox em conjunto. A tela 7 é um dialog que deve usar o WDialog, e como entrada os componentes v-text-field, v-textarea e v-select. Não é necessário o nome ‘Bye’ no titulo do dialog. Tela 8: tela de cnpjs, é esperado o uso do componente WHeader para o titulo e WListBase para a lista, WButtonFab para os botões de ações na lista e para o botão com o icone +, o botão de excluir tem que usar o component WConfirmBox em conjunto, e o icone do meio nas ações leva para a tela 9. Um v-text-field pode ser usado para o filtro. Tela 9: tela de marketplaces de uma loja, é esperado o uso do component WHeader para o titulo, WListBase para a lista, WButtonFab para as ações na lista e para o botão com icon +, e o WConfirmBox para o botão de excluir. O filtro pode usar o v-text-field. Não é necessário o botão de voltar que está no título dessa tela.

Categoria TI e Programação
Subcategoria Programação
Qual é o alcance do projeto? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Integrações de API Outros (Outras APIs)
Funções necessárias Designer, Desenvolvedor

Prazo de Entrega: 11 de Janeiro de 2021

Habilidades necessárias