<h1>
    <a href="<https://www.laboratoria.la/br>">
     <img align="center" width="40px" src="./src/images/android-chrome-192x192.png"></a>
    <span>Projeto 03 - DataverseChat Comunidade Criativa</span>
</h1>

## 📚 Confira meu caderno de estudos:

[![portfolio](<https://img.shields.io/badge/Caderno_de_Estudos_-_DATAVERSE_CHAT-74BA9C?style=for-the-badge&logo=ko-fi&logoColor=white>)](<https://elzbieta.notion.site/03-SAP012-Dataverse-Chat-70d305c8870b4f669756cdf5a5225f93>)

## 📝 Ferramentas utilizadas no sistema DataverseChat

- [GitHub do Projeto]()
- [Figma - Protótipo do projeto](<https://www.figma.com/file/asUYQQBBq3lTGP2og7X0Et/Dataverse-Chat?type=design&node-id=201%3A441&mode=dev&t=5njNnMhiYVumzElG-1>)

### Este projeto exibe vários personagens, cada um dos quais pode interagir por meio de um sistema de chat desenvolvido pela API OpenAI.

<table>
  <thead>
    <tr align="left">
      <th>Nº</th>
      <th>Status</th>
      <th>Etapas</th>
      <th>Etapas do Desenvolvimento do Projeto</th>
    </tr>
  </thead>
  <tbody align="left">
    <tr>
      <td>01</td>
      <td><img width="30px" height="30px" align="center" alt="icon check" src="./src/images/check.png"></td>
      <td>Marco 01 SPA - Protótipos.</td>
      <td align="center">
        <a href="<https://github.com/elizabetefabri/SAP012-dataverse-chat/blob/main/docs/package/marco-01/README.md>" target="_blank">
           <img align="center" alt="Botao" src="<https://img.shields.io/badge/Ver%20desenvolvimento-090912?style=for-the-badge>" width="250px">
        </a>
      </td>
    </tr>
    <tr>
      <td>02</td>
      <td><img width="30px" height="30px" align="center" alt="icon check" src="./src/images/check.png"></td>
      <td>Marco 02 DADOS - Vizualização do sistema, funções de filtragem, ordenação e cálculo.</td>
      <td align="center">
        <a href="<https://github.com/elizabetefabri/SAP012-dataverse-chat/blob/main/docs/package/marco-02/README.md>" target="_blank">
           <img align="center" alt="Botao" src="<https://img.shields.io/badge/Ver%20desenvolvimento-74BA9C?style=for-the-badge>" width="250px">
        </a>
      </td>
    </tr>
    <tr>
      <td>03</td>
      <td><img width="30px" height="30px" align="center" alt="icon check" src="./src/images/check.png"></td>
      <td>Marco 03 API - Conectar com API OpenAI(chat individual).</td>
      <td align="center">
        <a href="<https://github.com/elizabetefabri/SAP012-dataverse-chat/blob/main/docs/package/marco-03/README.md>" target="_blank">
           <img align="center" alt="Botao" src="<https://img.shields.io/badge/Ver%20desenvolvimento-090912?style=for-the-badge>" width="250px">
        </a>
      </td>
    </tr>
    <tr>
      <td>04</td>
      <td><img width="30px" height="30px" align="center" alt="icon check" src="./src/images/check.png"></td>
      <td>Marco 04 API - Conectar a API OpenAI(chat grupal).</td>
      <td align="center">
        <a href="<https://github.com/elizabetefabri/SAP012-dataverse-chat/blob/main/docs/package/marco-04/README.md>" target="_blank">
           <img align="center" alt="Botao" src="<https://img.shields.io/badge/Ver%20desenvolvimento-74BA9C?style=for-the-badge>" width="250px">
        </a>
      </td>
    </tr>
    </tbody>
  <tfoot>
  </tfoot>
</table>

## Instalação
### Instale meu projeto com npm

npm install my-project cd my-project npm run start

### Executando testes

npm run test

## 📱 Páginas do Mobile

<table>
  <thead>
    <tr align="center">
      <th><h3 align="center">Página do Home Mobile</h3></th>
      <th><h3 align="center">Componente Modal</h3></th>
    </tr>
  </thead>
  <tbody align="center">
    <tr>
      <td><img  align="center" alt="icon check" src="./docs/assets/home.gif"></td>
      <td><img  align="center" alt="icon check" src="./docs/assets/modal.gif"></td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr align="center">
      <th><h3 align="center">Página do Chat em Grupo Mobile</h3></th>
      <th><h3 align="center">Página do Chat Individual Mobile</h3> </th>
    </tr>
  </thead>
  <tbody align="center">
    <tr>
      <td><img  align="center" alt="icon check" src="./docs/assets/grupo.gif"></td>
      <td><img  align="center" alt="icon check" src="./docs/assets/individual.gif"></td>
    </tr>
  </tbody>
</table>

## 💻 Página Home e componente Modal
![Imagem desktop](./docs/assets/desktop.gif)

## 💻 Página do Chat em Grupo
![Imagem desktop](./docs/assets/chat-grupo.gif)

## 💻 Página do Chat em Individual
![Imagem desktop](./docs/assets/chat-individual.gif)

<div align="center">

<img src="<https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif>"><br>

##### Desenvolvido por <span>Elizabete Fabri</span> 💚

</div>