Sobre mim

Technical Blog | mostly about web development, Occasionally software engineering topics.


Em resumo, eram 2 demandas:

1. Consolidar os dados de várias fontes diferentes em um único local.
2. Fazer um dashboard para facilitar a análise destes dados.

Uma das fontes (a mais complicada) era organizada assim:
15 ativos no total (item 1, item2,…), sendo que cada ativo tinha 9 variáveis, inseridas em datas específicas na planilha.

<img
  src="/images/exceldesafio.png"
  alt="exceldesafio"
  width="548"
  height="197"
  align="center"
  justify="center"
/>

Definitivamente, essa planilha não é amigavel para o Power BI.

Então eu pensei: como posso organizar estes dados para que o trabalho com eles seja realmente dinâmico?
Fiz uns pequenos testes manuais e o formato que decidi colocar como meta foi

|     |     | Data       | Ativo  | Variável | Valor |     |     |
| --- | --- | ---------- | ------ | -------- | ----- | --- | --- |
|     |     | 10/10/2020 | Item 7 | Var2     | 12,3  |     |     |

Primeiramente eu deveria carregar a planilha

```python
xls = pd.ExcelFile('Planilha de resultados-UCS.xlsx')
raw_data_frame = pd.read_excel(xls, 'Poços')
```

Consegui finalizar com toda a planilha convertida para este formato:

<img
  src="/images/excelconvertida.png"
  alt="excelconvertida"
  width="540"
  height="240"
  align="center"
  justify="center"
/>


Teste


Em uma empresa que trabalhei, alguns dados importantes não estavam disponíveis no sistema centralizador de informações. Isso causava um problema para análise de dados, compartilhamento de informações e até mesmo auditorias. Na situação em questão, era necessário inserir todos os dados em menos de um dia.
Só tinha um problema: minha funcão não era de desenvolvedor na empresa. De fato, isso dificultava um pouco, pois o acesso ao banco de dados ou a alguma api resolveria rapidamente este problema.

De qualquer forma, precisava ser feito e eu não podia deixar esse desafio passar sem nenhuma pitada de código (claro).

O fluxo de registro manual no sistema era assim:

1. Digitar o valor do registro no campo específico
2. Selecionar a data e hora daquele registro
3. Clicar no botão _atualizar_
4. Clicar no botão salvar
5. Esperar a boa vontade do sistema carregar novamente

A primeira etapa que fiz foi entender os padrões de registro e definir os requisitos:

- Os registros deveriam ser inseridos a cada 2 horas (de alguns anos anteriores)
- Construir um _array_ com os valores para iterar
- Esperar a resposta do sistema entre cada registro
- Formato da data: dd/MM/YYYY HH:mm

Lembro que a primeira coisa que fiz foi verificar como eu iria preencher os campos de valor e de data e os botões de atualizar e salvar. Um inspecionar acabou resolvendo isso:

| Campo           | Id                      |
| --------------- | ----------------------- |
| Valor           | #aha93_AppointmentValue |
| Data            | #Filter_BaseHour        |
| Botão atualizar | #btnRefreshBaseHour     |
| Botão salvar    | #btnManualInputSave     |

> Encontrei, vamos de Jquery: `.val()` e `.click()`

Na época eu achava isso espetacular...

Primeiramente, precisava formatar a data assim: dd/MM/YYYY HH:mm

```javascript
function formatDate(date) {
  var minutes = "" + date.getMinutes();
  var hours = "" + date.getHours();
  var month = "" + (date.getMonth() + 1);
  var day = "" + date.getDate();
  var year = date.getFullYear();
  if (month.length < 2) month = "0" + month;
  if (day.length < 2) day = "0" + day;
  if (hours.length < 2) hours = "0" + hours;
  if (minutes.length < 2) minutes = "0" + minutes;
  return [day, month, year].join("/") + " " + [hours, minutes].join(":");
}
```

> Ahh, e o `toLocaleString()`?

🤔

O próximo passo era construir um _Array_ contendo as datas a cada duas horas. Vou colocar como exemplo o intervalo de **01/01/2022 00:00** até **10/01/2022 00:00**.

```javascript
var date = new Date(2022, 1, 1, 00, 00);
const finalDate = new Date(2022, 1, 10, 00, 00);
const dateList = [];
while (date < finalDate) {
  dateList.push(formatDate(date));
  date.setHours(date.getHours() + 2);
}
console.log(dateList);

date.setHours(date.getHours + 2);
```

A lista dos valores das variáveis estava disponível em um arquivo Excel, então eu só precisei exportar como _.CSV_ e meu _array_ de valores estava pronto: `[412, 345, 444 ...]`
Em seguida, eu criei a função para preencher os valores e clicar nos botões, e foi assim que dei o nome a ela:

```javascript
preencherClicar = (data, valor) => {
  formated = formatDate(data);
  console.log(formated);
  $("#Filter_BaseHour").val(formated);
  $("#btnRefreshBaseHour").click();
  $("#aha93_AppointmentValue").val(valor);
  $("#btnManualInputSave").click();
};
```

A partir daqui eu precisava juntar tudo isso em um loop de tempo para inserir os dados. A questão era que o sistema demovava para confirmar que os dados haviam sido inseridos, então, a cada clique no botão salvar, era necessário aguardar o retorno do sistema. O sistema demorava em média 3 segundos para confirmar, então eu dobrei o valor e defini como tempo de espera entre os ciclos.

Primeiro, defini a função que deveria ser executada em loop:

```javascript
var index = 0;
const timedLoop = () => {
  if (index >= values.length) {
    clearInterval(loop); // parar a execução da função loop
  }
  preencherClicar(dateList[i], vallues[i]);
};
```

Depois coloquei em execução a cada 6 segundos:

```javascript
const loop = setInterval(timedloop, 6000);
```

Depois de algum tempo, dados inseridos!

## Uma nova perspectiva

Posteriormente, fui submetido a um desafio neste mesmo contexto, com o mesmo sistema. Então eu pensei que pudesse resolver de uma forma diferente, e até mais rapida.

> E se eu utilizar a chamada da API que insere no sistema?

Teclei F12 e fui verificar o que acontecia quando o botão salvar era clicado, e lá estava uma chamada para `/SaveManualInputAppointment`, do melhor jeito possível, uma lista de objetos.

```javascript
[
  {
    AppointmentTimestamp: "", // Aquela mesma data que falamos anteriormente
    AppointmentValue: "470",
    Id: "", //
    Name: "",
    HasNoteValue: "",
    RelationalDatabase: "",
  },
  ...,
]
```

O fato de ser uma lista (`[ ]`) era importante porquê significava que eu poderia inserir muitos valores em uma única chamada.

Em seguida, imaginei que eu poderia ter problemas de autorização para poder usar esta API, e de fato, eu recebi um erro de usuário não autenticado. Maaas, se era um erro de autenticação, então era só fazer pelo próprio navegador com o meu usuário logado que funcionaria, certo?

Bom, novamente eu tinha os dados em csv e, desta vez, resolvi utilizar a capacidade de edição extrema do _VS Code_. Veja no gif:

<figure>
  <img
    src="https://media.giphy.com/media/QVIzFlgbXCkFEBIsUI/giphy.gif"
    width="480px"
    height="206px"
    alt="new array()"
  />
</figure>

Com os dados formatados da forma que eu precisava, bastava colocar os dados em uma variável `data` e executar a função `fetch` para inserir os dados no sistema.

```javascript
fetch(".../SaveManualInputAppointment", {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
});
```


Blog.css-1r0tbje{font-size:var(--chakra-fontSizes-sm);margin-top:var(--chakra-space-2);margin-bottom:var(--chakra-space-2);font-weight:var(--chakra-fontWeights-normal);}

Blog