# Desafio Final - Código do Futuro
## Grupo 4
### Equipe

| Integrante | Foto | 
| :------------: | :------------: | 
| Matheus Rodrigues | <img width="100px" src="https://user-images.githubusercontent.com/94070505/214923657-dc6b8c3f-f6a0-4a10-ad79-4a47515251d9.jpg">|
| Gustavo Pereira | <img width="100px" src="https://user-images.githubusercontent.com/94070505/214923731-823670b8-0164-4929-87d3-8ff54a70b6ab.jpg">
| Pedro M. Alonso | <img width="100px" src="https://user-images.githubusercontent.com/94070505/214923567-b312d74a-c189-484a-b968-16124ed4d5aa.jpg">
| David Webner | <img width="100px" src="https://user-images.githubusercontent.com/94070505/214923782-9f4d6067-d973-4feb-ae21-4116dc859127.jpg">
| Alexandre da Costa Pedro | <img width="100px" src="https://user-images.githubusercontent.com/94070505/214923929-98251caa-24ea-44be-a07c-411d499cda76.jpg"> 

<div align = "center">
  <h1> Projeto Radar - Desafio Final </h1>
</div>
<br>

<div align = 'center' justify-content = 'space-around' >
<table>
  <thead>
    <tr>
      <th>Descrição da imagem</th>
      <th>Tela</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align = 'center'>Home Login / Cadastro </td>
      <td><img width="1604" alt=" Home Login" src="https://i.imgur.com/2BNEl3O.png"></td>
    </tr>
    <tr>
      <td align = 'center'>Página Dashboard</td>
      <td><img width="1604" alt=" Página Home" src="https://i.imgur.com/WHShUYx.png"></td>
    </tr>
    <tr>
      <td align = 'center'>Página de Campanha</td>
      <td><img width="1604" alt=" Página de Campanha" src="https://i.imgur.com/thPyzhl.png"></td>
    </tr>
    <tr>
      <td align = 'center'>Página de Lojas</td>
      <td><img width="1604" alt=" Página de lojas" src="https://i.imgur.com/pyvHdoE.png"></td>
    </tr>
    <tr>
      <td align = 'center'>Página de clientes</td>
      <td><img width="1604" alt=" Página de clientes" src="https://i.imgur.com/LkmYUrX.png"></td>
    </tr>
    <tr>
      <td align = 'center'>Página de Pedidoss</td>
      <td><img width="1604" alt=" Página de pedidos" src="https://i.imgur.com/jk6mSVx.png"></td>
    </tr>
  </tbody>
</table>
</div>
<br>
<br>

<p></p>

<p align="center">
  <a href="#theproject">O Projeto</a> •
  <a href="#target">Objetivo</a> •
  <a href="#technologies">Tecnologias utilizadas</a> •
  <a href="#development">Desenvolvimento</a> •
  <a href="#howtouse">Como utilizar</a> •
  <a href="#greetings">Agradecimentos</a>
</p>
<br>

<div id="theproject">
<h2> 👨🏻‍💻 O Projeto </h2>
<p> Nós recebemos o desafio para desenvolver um sistema chamado Radar, o qual possibilita ao lojista fazer o gerenciamento do fluxo de entrada e saída do seu negócio. </p>
</div>

<div id="target">
<h2> 💡 Objetivo </h2>
<p> Desenvolvimento de um sistema chamado Radar, o qual possibilita ao lojista fazer o gerenciamento do fluxo de entrada e saída do seu negócio.

O sistema foi desenvolvido em Angular, com as seguintes funcionalidades:
<br>
<ul>
  <li>Página de login</li>
  <li>Página home</li>
  <li>Página de cadastro de produtos</li>
  <li>Página cadastro de clientes</li>
  <li>Página cadastro de pedidos dos clientes</li>
  <li>Página de fluxo de caixa, mostrando a movimentação do mês</li>
  <li>Página de Campanha</li>
  <li>Página de lojas</li>
</ul>

Para gravação das informações, criou-se uma API em Node.js e Express, com a persistência em disco com arquivo.json. Esta API foi integrada à aplicação frontend (Angular).
</p>
</div>
 
<div id="technologies">
<h2> 🛠 Tecnologias utilizadas </h2>
As seguintes tecnologias foram utilizadas para construção do projeto:<br><br>

|                       Descrição                       |           Ferramenta           |
| :----------------------------------------------: | :-----------------------: | 
|                       IDE                        |          VS CODE          |
|                       IDE                        |       Visual Studio       |
|   Linguagem de programação (Backend, Frontend)   |        JAVASCRIPT         |
|        Linguagem de programação (Frontend)       |        TYPESCRIPT         |
|          Framework JavaScript (Frontend)         |          ANGULAR          | 
|            Framework de CSS (Frontend)           |         BOOTSTRAP         | 
|                      .NET 7.0                    |         .NET 7.0          | 
|                 Ferramenta Swagger               |          Swagger          |
|                 Ferramenta Firebase              |          Firebase         |
|                        MySQL                     |          MySQL            |



<div align = 'center'>
  <h3>Backend | API</h3>
  <img height =' 100px ' left=' 20px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg"/>
  <img height =' 100px ' left=' 20px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dotnetcore/dotnetcore-original.svg"/>
  <img height =' 100px ' left=' 20px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg"/>
  <br>
  <h3>IDE</h3>
  <img height =' 100px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" />
  <img height =' 100px ' src="https://visualstudio.microsoft.com/wp-content/uploads/2021/10/Product-Icon.svg" />
  <br>
  <h3>Frontend</h3>
  <img width =' 100px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" />
  <img width =' 100px ' left='80px' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" />
  <img width =' 100px ' left='80px' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" />
  <img height =' 100px ' left='80px' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg"/>
  <br>
   <h3>DevOps</h3>
  <img height =' 100px ' left=' 20px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg"/>
  <img height =' 100px ' left=' 20px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg"/>
  <img height =' 100px ' left=' 20px ' src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg"/>
  <br>
</div>
<br>

<div id="development">
<h2> 📓 Desenvolvimento </h2>
<p> ✔️ Metodologias Ágeis: <br>Para ter uma melhor produtividade no desenvolvimento do projeto foi utilizado a metologia ágil Kaban. Dessa forma, para melhor organização o projeto foi fragmentado em quatro quadros, sendo: 
<br>
<ul>
  <li><bold>Backlog<bold>: as tarefas que precisam ser cumpridas no decorrer da Sprint</li>
  <li><bold>A Fazer<bold>: as tarefas que ainda serão realizadas</li>
  <li><bold>Em andamento<bold>: as tarefas que já estão sendo desenvolvidas</li>
  <li><bold>Concluído<bold>: as tarefas que foram cumpridas</li>
  <li><bold>Testes<bold>: testes a serem feitos</li>
</ul>
<p>
  <a href="https://grupo7-radar.atlassian.net/jira/software/projects/PI/boards/3 alt="Metodologia Kanban - quadro Jira"> Clique aqui para visualizar os cards.
  </a>
  <br>
</div>

<div id="howtouse">
<h2>🧪 Como utilizar</h2>
  <ol &nbsp;>
    <li &nbsp;>Abra a organização</li>
      <li>https://github.com/Projeto-Radar-Final</li>
    <li &nbsp;>Configure a IDE - Visual Studio Code</li>
    <li &nbsp;>Clone os repositório
      <ul>
        <li>git clone https://github.com/Projeto-Radar-Final/Back-end-Radar</li>
        <li>git clone https://github.com/Projeto-Radar-Final/desafio-angular-codigo-do-futuro</li>
      </ul>
    </li>
    <li &nbsp;>Entre no diretório dos projetos
    </li>
    <li><b>Testing</b>
      
   
</div>

<div id="greetings">
<h2> 🤝 Agradecimentos </h2>
<p> Agradecemos à Febrafar/Farmarcas pela oportunidade de participarmos desta bela iniciativa que é o programa de treinamento Código do Futuro, que proporciona a ampliação de conhecimentos e de qualificação na área de desenvolvimento Full Stack - Frontend e Backend (Angular, C#/DotNet). </p>
</div>
