(Demo)
Na primeira visita o carregamento pode levar alguns segundos.
Partindo do princípio que você tem Node e Angular instalados...
- Rode
npm install
para baixar as dependências - Suba a aplicação com
npm start
ounpm run start:proxy:api
A API encontra-se no Heroku em uma instância preemptiva, sendo assim pode ser necessário aguardar alguns minutos para que a mesma seja ativada. Caso não ocorra automaticamente, atualize a página. Por ser uma instância preemptiva e gratuita, podem ocorrer falhas ou atrasos no processamento das requisições.
O frontend (Angular) encontra-se no GitHub Pages, sendo assim a ativação é instantânea.
- Implementei uma
fake API
utilizando JSON-Server (https://github.com/typicode/json-server), por permitir o tratamento dos dados de forma assíncrona mais rapidamente, melhor que ao utilizarmoslocalStorage
. JSON-Server possui um endpoint gratuito para repositórios públicos, mas optei por utilizar o Heroku, pois as alterações persistem. - Ao rodar
npm start
localmente a dependência Concurrently automatiza a tarefa, levantando a aplicação comng serve
+json-server db.json
(https://www.npmjs.com/package/concurrently), tudo em um único comando. [npm start
] - Como a tarefa não especifica quais campos devem ou não ser exibidos na tela de listagem, tomei a liberdade de utilizar
table-responsive
do Bootstrap 4 para ocultar algumas colunas na exibição mobile e deixar a tela de certa forma mais organizada, evitando conteúdo verboso. - Para tornar a aplicação mais interativa e demonstrar suas funcionalidades aproveitei também para exibir um
alert
questionando se o usuário deseja alguns dados fictícios inicialmente, caso a listagem esteja vazia. - Não ficou claro se o campo
quantidade
estava relacionado diretamente aunidadeMedida
, neste caso deduzi que ao informar a unidade de medida (quilograma, litros, unidade) o input quantidade receberia o valor correspondente como sufixo. - Para a máscara do input
preço
foi utilizado o repositório de um colega: https://github.com/nbfontana/ngx-currency - Para a máscara dos campos com limite de casas decimais, utilizei o repositório TextMask: https://github.com/text-mask/text-mask
- Não havia obrigatoriedade de o campo
quantidade
ser modelado como do tipo number, neste caso optei por string, acompanhado já da unidade de medida escolhida. - Como utilizei API, para fazer uso do
localStorage
de alguma forma, acabei implementando uma rota para personalização da cor da barra superior, sendo assim a escolha será guardada para visitas posteriores. - O menu lateral fica com status oculto inicialmente, aproveitando melhor o espaço da tela. Na topbar foi adicionado um botão ao estilo
burguer menu
para exibir/ocultar. A animação e triggers foi desenvolvida utilizandoAngular Animations
. A Snackbar também utiliza animações, bem comopipes
para personalizar a ação e tempo na tela.(do() que agora chama-se tap(); switchmap(); timer())
- Mesmo que não obrigatório, utilizei de
EventEmitter
para personalizar o comportamento de alguns components, entre eles a atualização da listagem (quando um evento é emitido), abrir/fechar menu e a snackbar (barra de notificações).