dito-front/src/app/app.component.html

<h3>Desafio Dito Front-end</h3>
<p>
    A solução foi desenvolvida utilizando Angular6 + SCSS. O código fonte está disponível no repositório git.
    <a href="https://git.eugeniocarvalho.dev/eugeniucarvalho/dito-front">https://git.eugeniocarvalho.dev/eugeniucarvalho/dito-front</a>
</p>

<h4>Recursos Utilizados</h4>
<ul>
    <li>Foi utilizada a fonte <a href="https://fonts.googleapis.com/css?family=Roboto">Roboto</a></li>
    <li>Os icones foram convertidos para uma font utilizando o serviço <a href="http://fontastic.me/">fontastic.me</a></li>
    <li>As datas foram tratadas com o framework <a href="https://momentjs.com/">moment.js</a></li>
    <li>Os valores foram formatados utilizando o pipe de currency do angular.</li>
</ul>


<h4>Caracteristicas da Solução</h4>

<p>
    Foi criado um component <b>TimelineComponent</b> que se comunica com um serviço <b>ApiEventsService</b>.
    O component realiza uma chamada ao serviço que devolve uma estrutura organizada que facilita a renderização por
    parte do component.
</p>
<p>
    O serviço consome os dados do endpoint <a href="https://storage.googleapis.com/dito-questions/events.json">https://storage.googleapis.com/dito-questions/events.json</a>.
</p>

<blockquote>
    * Não foi possivel realizar a chamada ajax para o endpoint devido a uma restrição de cross-origin não
    especificada no arquivo armazenado no storage do google.
    O serviço possui o código que representa a requisição ajax. Para demonstrar o funcionamento do component o
    conteudo do arquivo foi inserido manualmente como entrada da chamada.
    Detalhes sobre o cors no google cloud storage podem ser obtidos <a href="https://cloud.google.com/storage/docs/configuring-cors">aqui</a>.
</blockquote>

<h4>Tratamento da Entrada</h4>
<p>
    O conteudo da entrada passa por um processamento onde os dados são selecionados e reorganizados.
    O serviço gera uma lista de transações. Cada transação possui uma lista de itens e um header.
    Uma representação da classe encontra-se abaixo.
</p>
<pre [innerHTML]=classe></pre>

<h4>Component em execução</h4>
<dito-timeline></dito-timeline>