# React-Query

[React-Query](https://tanstack.com/query/latest/docs/framework/react/overview) est une librairie pour gérer les requêtes en **React.js** qui s'utilise aussi bien avec du **Rest API** ou du **GraphQL**. 

L'utilisation de **react-query** demande la mise en place d'un **higher order component** qui viendra wrapper les composants dans lesquels on déclenche les requêtes.

**React-Query** est :
- Simple à mettre en place
- Gère le cache de réponses nativement
- Rend très simple les **Render conditionnels**, **Refetching** etc...

En fait l'outil n'ayant quasiment que des **pour** et peu de **contre**, je ne peux que le recommander chaudement.

# Un hook pour utiliser une requête

React-Query est lui même un hook, donc vous vous demanderez probablement, pourquoi un hook ?

<u>Etant donné, qu'il n'est pas rare d'avoir plusieurs composants ou pages qui utilisent les mêmes requêtes, voir les requêtes comme des hooks permet de réduire la duplication de code.</u> 

hooks/posts.tsx :

```
import React from "react";
import { useQuery } from "react-query";

export const useGetPost = () => {
  const { isFetching, error, data } = useQuery({
    queryKey: ["posts"],
    queryFn: () =>
      fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
        res.json()
      ),
  });

  return {
    isFetching,
    error,
    data,
  };
};
```

☝️ Il est possible de factoriser encore plus la partie requête en créant une librairie **api**, utiliser des variables d'environnement pour l'URL, etc...  

Enfin dans la page qui déclenche la requête, vous pouvez tout simplement faire :

```
function App() {
  const { isFetching, data: posts } = useGetPost();

  return (
    <div className="App flex justify-center flex-wrap">
      {isFetching && "Getting posts..."}
      {!isFetching &&
        posts?.map((post: Post) => {
          return <PostCard key={post.id} post={post} />;
        })}
    </div>
  );
}
```

Cette méthodo permet de factoriser et d'organiser sainement vos requêtes pour la réutilisation.

Cela donne une arborescence comme suit :

```
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── components
│   │   └── post.tsx
│   ├── custom-types
│   │   └── post.ts
│   ├── hoc
│   │   └── queries.tsx
│   ├── hooks
│   │   └── posts.tsx
│   ├── index.css
│   ├── index.tsx
```

En tout cas je vous recommande cette organisation, du moins, éviter au maximum de faire des appels direct à **react-query** dans les composants et recréer systématiquement des copies de vos requêtes. 
Car le jour où l'API évoluera et les endpoints changeront de forme, cela vous évitera de repasser partout pour faire des correctifs. 

Voici [le repository](https://github.com/aluzed/react-query-hook-sample/tree/master).

Soyez efficacement paresseux ! 🐼




large_react-query.jpg

medium_react-query.jpg

small_react-query.jpg

thumbnail_react-query.jpg

react-query.jpg

Tous les projets  React ne sont pas égaux en matière d'organisation des requêtes. J'aime bien que les dossiers ne soient pas un labyrinthe et que l'on sache exactement quoi faire pour répliquer l'existant sans créer de doublons. Voici comment je procède.

Organiser efficacement ses requêtes React-Query

# Pourquoi ne pas partir d'un Boilerplate ?

J'évite toujours de partir d'un **Boilerplate** public pour plusieurs raisons :

- Je veux éviter d'avoir trop de dépendances pour simplifier la maintenance et la montée de version. 
- Je veux maîtriser ce qui est installé dans mon projet pour éviter tout problème de hack ou problème de droit.
- A part les gros projets, les **boilerplates** sont souvent déjà obsolètes

# Certains boilerplate sont pratiques

Il y a tout de même certains **boilerplate** qui sont utiles : 

- **Create React App**
- **Next.js**

Et il m'arrive même d'en faire pour moi même, mais pour un projet backend **Typescript**, on peut partir from scratch

# Un projet Typescript avec Jest et SWC 

Il ne faut pas grand chose pour mettre cela en place :


```bash
mkdir new_project
cd new_project

yarn init

# Install Typescript

yarn add -D typescript @types/node ts-node
npx tsc --init

# Cela va générer un fichier tsconfig.js
# En général je configure les rootDir et outDir

# Install Jest

yarn add -D jest @swc/core @swc/jest @types/jest 
npx jest --init

# Cela va générer un fichier jest.config.js 
```

Dans le fichier jest.config.js

```bash
module.exports = {
	// ...
	transform: {
		"^.+\\.(t|j)sx?$": ["@swc/jest"],
	},
};
```

Vous pouvez maintenant créer votre fichier **src/index.ts**

Pour exécuter le code :

```bash
npx ts-node src/index.ts
```

Pour exécuter les tests :

```bash
npx jest 
```

large_building-construction-typescript.jpg

medium_building-construction-typescript.jpg

small_building-construction-typescript.jpg

thumbnail_building-construction-typescript.jpg

building-construction-typescript.jpg

Pour monter un projet backend Typescript en moins d'une minute, from scratch, sans partir d'un boilerplate, rien de plus simple...

Un projet backend Typescript from scratch

Si vous faîtes du frontend **ReactJS**, il est fort probable d'avoir du code qui ressemble à ceci :

```js
<div className="flex flex-col items-center w-full px-20 mt-20">
      <div className="flex items-center pb-8">
        {Object.keys(totalSell).map((currency: string) => {
          return (
            <Badge
              key={currency}
              color={
                totalSell[currency] - totalBuy[currency] > 0 ? "green" : "red"
              }
              title={`Total Buy: ${totalBuy[currency].toFixed(2)} - 
              Total Sell: ${totalSell[currency].toFixed(2)}`}
              className="text-3xl"
            >
              {currency}:{" "}
              {(totalSell[currency] - totalBuy[currency]).toFixed(2)}
            </Badge>
          );
        })}
      </div>
```

Fonctionnellement tout est OK, ce composant s'affiche bien etc. 


<u>Mais vous ne trouvez pas cela perturbant d'avoir autant de balise dans une partie qui est sensé être composé que de strings ?</u> 🤔

Lorsque je vois ça, il me faut un peut plus de temps pour me projeter sur ce à quoi cela peut ressembler au rendu. Aussi, je me dis que le code pourrait être bien plus lisible et structuré pour nos collègues. 💡

Quelque chose qui ressemble à ceci par exemple :

```js
<div className="flex items-center pb-8">
        {Object.keys(totalSell).map((currency: string) => {
          return (
            <Badge
              key={currency}
              color={
                totalSell[currency] - totalBuy[currency] > 0 ? "green" : "red"
              }
              title={new TextFormatter(
                `Total Buy: %totalBuy% - Total Sell: %totalSell%`
              ).format({
                totalBuy: totalBuy[currency].toFixed(2),
                totalSell: totalSell[currency].toFixed(2),
              })}
              className="text-3xl"
            >
              {new TextFormatter(`%currency%: %balance%`).format({
                currency,
                balance: (totalSell[currency] - totalBuy[currency]).toFixed(2),
              })}
            </Badge>
          );
        })}
      </div>
```

Et pour arriver à ce résultat, je vais créer une classe **TextFormatter** comme ceci :

```typescript
class TextFormatter {
  text: string;

  constructor(text: string) {
    this.text = text;
  }

  toString() {
    return this.text;
  }

  format(
    obj: Record<string, string | number>,
    options = { openTag: "%", closeTag: "%" }
  ) {
    let result = this.text;
    for (let key of Object.keys(obj)) {
      result = result.replace(
        new RegExp(`${options.openTag}${key}${options.closeTag}`, "g"),
        obj[key].toString()
      );
    }
    return result;
  }
}

export default TextFormatter;
```

Vous pouvez personnaliser les tags sur la méthode format en second paramètre :

```typescript
new TextFormatter(`{{currency}}: {{balance}}`).format({
  currency,
  balance: (totalSell[currency] - totalBuy[currency]).toFixed(2),
}, { openTag: '{{', closeTag: '}}' })
```

Je ne vous cache pas que je garde tout de même, une préférence pour un texte sans brackets, donc j'éviterai de l'utiliser sous cette forme.

Voilà je pense qu'avec cela, vous serez en mesure de faire du texte plus lisible dans vos composants React. 😉

Bon code à vous !

large_formater-texte-react.jpg

medium_formater-texte-react.jpg

small_formater-texte-react.jpg

thumbnail_formater-texte-react.jpg

formater-texte-react.jpg

Lorsque l'on fait du frontend en React, il n'est pas rare d'avoir du code horrible à relire, surtout lorsque celui ci est composé de templates string dans tous les sens, on obtient on joyeux galimatias. Je vous propose d'y remédier.

Comment formater son texte sur des composants React

Pour régler le problème qui arrive souvent sur les projets **node**: 

```shell
Error: EMFILE, too many open files, watch ...
```

Nous allons augmenter le nombre de fichier que le système peut watch simultanément !

Pour celà, faîtes un :

```shell
sudo nano /etc/sysctl.conf
```

Dans le fichier **/etc/sysctl.conf**, ajoutez les lignes :

```shell
fs.file-max = 65535 
fs.inotify.max_user_watches=524288
fs.inotify.max_user_instances=512
```

Sauvegardez et rechargez votre fichier sysctl : 

```shell
sudo sysctl --system
```

large_error-emfile.png

medium_error-emfile.png

small_error-emfile.png

thumbnail_error-emfile.png

error-emfile.png

Lorsque vous travaillez sous linux, le watch mode, qui sert à compiler à la volée lorsque vous modifiez le code, notamment si vous faîtes du Typescript, un projet react-create-app ou autre, risque de rencontrer un problème au lancement. Comment solutionner cela ?

Gérer le problème too many open files sous Ubuntu 22

### Installer Temporal sous Windows

Temporal est livré avec son propre CLI (son exécutable), la commande **temporal** depuis un terminal. Mais il ne suffit pas de [télécharger le CLI](https://www.restack.io/docs/temporal-knowledge-temporal-io-download).

Pour pouvoir l'installer et l'utiliser vous aurez besoin [d'installer Nodejs](https://nodejs.org/en/download) et [d'installer Rust](https://www.rust-lang.org/tools/install).

Une fois que installé, et le projet  **Temporal** cloné, j'ai pour habitude de lancer Temporal au démarrage de la machine. 

### Lancer Temporal au boot

Cliquez sur Windows et tapez "run", vous aurez une commande d'exécution qui va s'ouvrir, tapez: "shell:startup".

Un dossier va s'ouvrir. 📁

Il faut savoir que tout ce que vous allez mettre ici se lance automatiquement au démarrage.

Je crée 2 fichiers **.bat** : un pour le serveur un pour le worker. 🗎

**server.bat**
```shell
cd "<chemin vers le projet temporal>"
yarn start:dev --ui-ip <ip de la machine>
```

**worker.bat**
```shell
cd "<chemin vers le projet temporal>"
yarn start
```

### La subtilité

Pour éviter d'avoir des problèmes avec un accès distant, j'ai redirigé l'ip de la web interface vers l'ip locale (pour éviter de forcer localhost). Dans le cas contraire votre machine est inaccessible depuis le réseau local.

Cependant, assurez vous de:

- Basculer en réseau privé (au lieu de public)
- Ajouter une exception  dans votre firewall en TCP sur les port : **7233**, **8233**

### Résultat 

![temporal-remote.png](https://bo.dev-freelance.fr/uploads/temporal_remote_ad0ac72389.png)

Dans mon cas, j'ai redirgé uniquement l'ip de la web interface, donc si vous avez besoin d'accéder au serveur **Temporal** directement depuis un Worker sur une autre machine, là c'est une autre pair de manches. C'est un scénario que je n'ai pas testé, mais je prendrai le temps de le faire prochainement.



large_windows-10-temporal.jpg

medium_windows-10-temporal.jpg

small_windows-10-temporal.jpg

thumbnail_windows-10-temporal.jpg

windows-10-temporal.jpg

Sous Windows 10 et 11, il n'est pas évident de déployer un Temporal accessible de partout sur un réseau local. Pour éviter les problèmes de timeout, il va falloir faire quelques modifications.

Comment mettre en place un serveur Temporal sous Windows

Avez vous eu à intégrer des process multi étapes en programmation ? 

Cela peut être :
- Une chaîne de vente (vente/paiement, mise à jour des stocks, logistique, livraison, consolidation en compta)
- Une chaîne d'appro (commande, logistique, stockage, mise à jour des stocks, inventaire)

Tout process qui peut durer dans le temps est difficile à traduire informatiquement, car on a souvent du mal à savoir quand est-ce que les événement vont se produire.

A tel point que, les méthodes mises en place par les sociétés informatiques, consistent souvent à coder plusieurs étapes du process séparément, puis en planifier l’exécution récurrente. 

Ainsi il n'est pas rare d'avoir une chaîne de vente qui ressemble à cela :

![Process de vente traditionnel ><](https://bo.dev-freelance.fr/uploads/temporal_sample_process_drawio_e26a2662ee.png)

⚠️ <u>Si une étape est en erreur, c'est l'intégralité du process qui est remis en question.</u>

Pour une pièce défectueuse à remplacer dans la commande avant expédition, il faudra rajouter une étape de réassort etc... **Le simple fait de casser le schéma connu de process peut corrompre son fonctionnement. De même que les rattrapages sont souvent gérés à la main, c'est à dire, hors process.**

Gérer la complexité d'un process long est un cauchemar pour tout développeur qui l'a déjà fait. Souvent, à cause du fait que chacune de ces étapes passe par un outil ou une passerelle dédié. Chaque équipe de l'entreprise ayant son mode de fonctionnement, il n'est pas rare d'avoir : 
- Un logiciel de Caise AAAA
- Un logiciel de gestion de stock BBBB
- Un prestataire de livraison avec une plateforme CCCC
- Un logiciel comptable DDDD

Vous voyez où je veux en venir ? Les passerelles sont souvent différentes, et jusqu'à présent, il y a peu d'outils capable d'unifier tout le process, de gérer facilement le prolongement d'une étape dans le temps, un retry de process sans avoir à tout reprendre de 0. J'ai l'air de décrire quelque chose de magique et d'impossible jusque là. Pourtant cet outil existe réellement et il s'appelle [Temporal](https://temporal.io/) ⚡ !

![temporal-logo-dark.svg ><](https://bo.dev-freelance.fr/uploads/temporal_logo_dark_8217d6ff16.svg)

### Pourquoi cette solution est incroyable ?

Temporal est une technologie qui a été créée par le Tech Lead d'**Amazon SQS**. Et rien qu'avec ça on sait que le bougre en a sous le coude avec les process asynchrones. 

**SQS** pour **Simple Queue Service**, est un service d'**Amazon** qui permet à plusieurs briques de code de s'interfacer (via un messaging system) efficacement et à moindre coût. Il s'agit d'un outil taillé pour les architectures micro-service. 

**Temporal** est tout de même différent de **SQS**, il peut fonctionner de plusieurs façons, même au sein d'un service unique et sera plutôt un orchestrateur de process. Il s'agit d'un moteur de workflow, c'est à dire qu'il va séquencer les étapes les unes après les autres afin de reproduire tout le process de A à Z. <u>Que vous soyez en micro-service ou en monolithique importe peu.</u>

De même, il est très utilisé par des boîtes comme **Uber**, le géant de la mise en relation du transport pour une raison bien particulière : son extrême résilience vis à vis du long-run. 

### Le long run c'est quoi ?

Lorsque chacune de vos étapes de process peut tourner pendant période difficilement prévisible, il y a plusieurs façon de procéder :

 - Soit on fait du **Cron** (une tâche planifiée qui s'exécute automatiquement) et on réessaye régulièrement pour voir s'il y de nouveaux traitements à faire
 - Soit on a un process qui est tourne en tâche de fond et qui prend les jobs aussitôt qu'ils tombent (cela consomme de la ressource en permanence)

**Temporal** vous propose la seconde option, mais plutôt que ce soit vos systèmes qui passent en position d'attente, c'est le process de **Temporal** qui va le faire pour votre système, laisse ainsi de la ressource disponible pour continuer à opérer.

Dans l'idée, vous aurez besoin de coder des micro étapes de votre process. Tant que vous pouvez découper, il faut découper :
- Sélection d'un produit = 1 étape
- Paiement = 1 étape
- Mise à jour de stock = 1 étape
- Préparation de commande = 1 étape
- Remise au livreur = 1 étape

Dans Temporal, ces étapes s'appellent des **activities**.

Si l'on peut découper encore plus finement, il faut le faire, et vous allez comprendre pourquoi. Le principe même de Temporal, c'est de venir **Wrapper** chacune de ces étapes, de manière à être capable de relancer uniquement celle qui s'est arrêté ou a rencontré une erreur.

### En quoi est-ce une révolution ?

Au lieu d'avoir des process qui doivent être rejoué de A à Z en cas d'erreur, ici nous sommes dans une situation ou chacune des étapes peut être jouée l'une après l'autre, et lorsqu'une étape s'arrête, elle peut être reprise à tout moment. 

A tel point que si vous avez un bug dans le code, cette fonctionnalité vous permet de redéployer entièrement votre projet. Le processus se relancera comme si rien n'avait bougé, et réexécutera uniquement l'activité en erreur. 

<u>Pas de gestion de l'invalidation à faire, pas de rollback à prévoir.</u>

Je m'adresse à tout ceux qui ont déjà codé des process longs ☝️, vous savez de quoi je parle, pas vrai ? 😝

Après rien ne vous empêche de faire le flow sur mesure, qui gère le rollbck ou autre. 

Cepandant, il y a quelques principes de base à respecter comme <u>toujours utiliser des fonctions déterministes</u> pour vos **activities**, car ces inputs vont créer un pattern qui permettra de savoir si oui ou non cette étape a déjà été jouée. Il faut qu'une fonction qui soit appelée avec le même input retourne le même résultat. 

### Les avantages de Temporal

Les avantages de Temporal sont légions :
- sous Licence MIT
- Gère la problématique de long run comme s'il s'agissait d'un jeu d'enfant
- Built-in retry en cas d'erreur d'une étape
- On ne relance pas un process entier depuis le début
- Un dashboard détaillé pour suivre le process
- Déclenchement par le code (client sdk à disposition), CLI ou autre
- Scalable grâce aux workers
- Concepts très simples mais très puissant si on a un besoin complexe à gérer

### Les inconvénients de Temporal

- En terme de ressources : Temporal a besoin de déployer **un serveur pour orchestrer les jobs** et **des workers pour jouer les workflows**
- Est plus efficace avec une base de donnée (même si cela reste optionnel)  car si non, rien ne sera loggé à chaque fois que l'on relance l'instance server

### Conclusion

Je pense qu'il y a largement plus d'avantages que d'inconvénients. Vous pouvez même opter pour un modèle SaaS hébergé par la société qui édite **Temporal**, si vous décidez de déléguer l'administration d'un serveur.

Qu'attendez-vous pour vous y mettre ? Prochainement je vous parlerai de mes expériences avec **Temporal**.


large_temporal.jpg

medium_temporal.jpg

small_temporal.jpg

thumbnail_temporal.jpg

temporal.jpg

Lorsque vous intégrez un process business dans un projet applicatif, il est très compliqué de transposer la réalité sur un système informatique. Que ce soit au niveau des données, mais surtout au niveau process. C'est pourquoi je vous présente un outil qui est spécialement conçu pour intégrer des process de l'entreprise.

Connaissez-vous Temporal ?

## La GED

La **GED** (pour Gestion Electronique des Documents) est un domaine spécifique en informatique. Il s'agit de l'archivage et parfois de la compréhension de documents imprimés ou écrits. Pour ces derniers, on parle d'**OCR** (optical character recognition), comprenez la reconnaissance des caractères. Chaque domaine spécifique en informatique demande une compétence spécifique, c'est à dire que les professionnels experts de la **GED** sont souvent bien meilleurs que les autres sur le sujet, car ils ont eu le temps d'expérimenter beaucoup d'approches et ont une expérience dédiée au sujet.

Moi, qui suis un néophyte en la matière, je vous propose de faire un retour d'expérience sur le sujet car j'ai eu l'occasion de me pencher sur le traitement des relevés bancaires fournis en **PDF** scanné. 

## Le PDF

Le format **PDF** (portable document format) a été créé par **Adobe**, l'éditeur logiciel qui a créé entre-autres, **Photoshop**, le meilleur logiciel de retouche photo, à mon avis. Le **PDF** est un format permettant de récupérer un ensemble de pages dans un seul fichier. Jusqu'alors, scanner un document signifiait avoir l'extraction de chaque page en un fichier image différent.

Le **PDF** permet non seulement de regrouper plusieurs documents en un seul, et peut être généré au <u>format texte</u> ou au <u>format image</u>. Inutile de vous préciser que lorsque vous scannez un document en **PDF**, très souvent vous obtiendrez un format image, (même si certains scanner font l'effort de faire de l'**OCR**). Et c'est sur ce format spécifique, constitué d'images que nous allons nous pencher, car, il est beaucoup plus difficile à traiter.

## Tesseract

Lorsque l'on veut faire de l'**OCR**, on utilise des librairies très connus tel que **Tesseract**. Cette librairie a été dévelopée par **HP** avec le soutien de **Google** et est distribuée sous licence **Apache**. Avec **Tesseract**, en quelques lignes dans un terminal on peut lui faire sortir un fichier texte depuis une source image.

Et cela peut se faire en une ligne très simple :

```
tesseract image.png output.txt
```

Alors, vous l'aurez compris, si la condition est d'avoir en entrée un fichier image, il suffit de splitter le **PDF** en plusieurs fichier image et de les passer chacune à **Tesseract** et le tour est joué ?

Et bien, ce n'est pas si simple !

Lorsque le fichier image est complexe (c'est notamment le cas d'un tableau de relevé bancaire avec des alignements dans toutes les colonnes et des données pouvant être d'un côté et de l'autre du document) **Tesseract** est incapable de gérer les alignements. 
Il n'est par rare qu'il mette tous les caractères à côté alors que dans le fichier source ils sont à 10 cm l'un de l'autre. De même, il n'est pas rare que **Tesseract** zappe littéralement des portions du fichier, que vous ne retrouverez pas en sortie !

## Pourquoi faire du machine learning ?

Je vais vous expliquer maintenant pourquoi, j'ai opté pour une approche **IA** plutôt qu'un simple script étape par étape qui va passer les éléments à **Tesseract**.

J'ai procédé à un test simple, j'ai splité chaque ligne du tableau de relevé bancaire et je l'ai passé à Tesseract pour voir comment il réagissait.  Le résultat est incroyable, désormais, tous les éléments sont restitués, il n'y a plus de partie manquante en sortie. Le seul petit bémol, c'est qu'il n'arrive toujours pas à gérer les alignements correctement.

En revanche l'IA peut gérer ce problème d'alignement :

Etant donné que chaque banque fourni systématiquement un format spécifique avec des alignements toujours identiques, on pourrait imaginer un système qui s'appuie sur de l'**object detection** en IA, qui serait dédié à chaque type de banque afin d'avoir une reconnaissance automatique des colonnes du relevés à savoir : date, libellé, débit, crédit. 

L'object détection consiste à faire détecter des éléments à l'IA. Pour ce faire, on va marquer ces éléments sur plusieurs images et entrainer un modèle sur ces marquages jusqu'à ce qu'il sache de lui même les repérer lorsqu'on lui passe un flux (image, vidéo ou autre). 

Pourquoi je veux absolument faire un modèle d'object detection dédié par banque ? 

<u>En machine learning, le nerf de la guerre c'est la data</u>. 

Il faut avoir énormément de données sources pour que le modèle puisse s'entrainer et assimiler. Le problème d'un modèle unique, multi banque, c'est que je vais devoir avoir une quantité énorme de documents à fournir et à marquer. Alors qu'un modèle dédié, me permettrait de fournir une vingtaine de fichier par banque, car on couvrirait une quantité raisonnable de cas et je pense que cela serait suffisant pour que l'IA comprenne quel élément correspond à quelle colonne.

## Le plan d'attaque

Voici comment je vais procéder :

![ia_releve_bancaire.drawio.png](https://bo.dev-freelance.fr/uploads/ia_releve_bancaire_drawio_8e79e1bc32.png)

Je vais commencer par faire de la classification, puis, par banque, je vais faire de l'object detection pour extraire les lignes qui m'intéressent de manière splittée, ensuite je vais refaire de l'object detection sur chaque ligne afin de repérer les colonnes et enfin je vais assembler les données.

### Qu'est-ce que la classification ?

Plus haut, je vous parlait de l'**object detection**. De la même manière, la **Classification** est une méthodologie en IA qui permet de déterminer visuellement quel type d'élément on manipule. C'est de cette façon que les développeur créent des classificateurs Chats/Chiens, etc... 

![classification.drawio.png](https://bo.dev-freelance.fr/uploads/classification_drawio_71c004ed5f.png)

Nous allons entraîner un modèle qui permet de déterminer quel est le nom de la banque du relevé que l'on fourni. De manière général, c'est un procédé très simple qui consiste à mettre dans un dossier plusieurs éléments d'une même famille afin de les regrouper. Une fois le modèle d'IA entraîné, il saura de lui même, à quelle famille appartient cet élément.

Pour la classification je me sers de **Tensorflow**. Je vais créer un réseau neuronal assez classique, en 9 couches. 

## L'object detection

Ensuite, une fois que nous savons quelle est la banque concernée par le relevé, nous passons le relevé dans une autre moulinette qui va chercher à faire de l'**object detection**. Pour faire cela, nous allons utiliser un outil en **Python** qui s'appelle **LabelImg**. En gros, ça consiste à délimiter des zones et décrire ce qui s'y trouve. 

Au passage, lorsque vous installez **LabelImg**, vous constaterez peut-être quelques bugs, mais pas de panique, c'est du **Python**, il suffit d'ouvrir les fichiers et de faire des fixs à la main (simple conversion float > int).

L'outil ressemble à ça :
![labelimg-image-annotation-software.jpg](https://bo.dev-freelance.fr/uploads/labelimg_image_annotation_software_43dcd351b8.jpg)

Je vais répéter ce procédé une dizaine de fois pour marquer chacun des relevés sur les éléments suivants: **Logo**, **Information**, **Ligne**.

Une fois ces 3 éléments annotés, le **logo** pourra nous confirmer de quelle banque il s'agit, les **informations** pourront être passé à l'OCR si besoin, et les **lignes** seront aussi converties par OCR pour générer un fichier de sortie.

Pour faire la détection, j'ai utilisé la librairie **Yolo** que j'ai entrainé sur un modèle custom à partir de mes relevés marqués par **LabelImg**. Après une série de tests je réalise que le modèle fonctionne bien mieux lorsque je paramètre un nombre très grand d'**épochs** (cycle d'entrainement du modèle). 

Généralement, les **épochs** sont paramétrés à 100 sur des entraînements assez simple: détection d'humain, détection de voiture. 

Dans notre cas, nous essayons de détecter un élément écrit parmi tant d'autres et il va falloir comprendre en quoi ils sont différents. J'ai effectué des tests pendant une journée entière sur un petit nombre d'épochs et, il m'était impossible d'avoir une bonne qualité de détection en sortie. D'autant plus que les images sont redimmensionnés pendant le passage au réseaux neuronal, ce qui fera la vitesse et l'efficacité de la détection dépend énormément de la compression de l'image. Si elle est trop grande, cela demandera beaucoup trop d'effort au matériel.

Tiens, tiens ! Le matériel... parlons en ! 

Pour entraîner un modèle comme celui-ci avec comme base **Yolov8n** (n pour nano: c'est un petit modèle pré-trained qui est déjà capable de détecter des objets de la vie quotidienne comme un téléphone, un ordinateur ou autre), mon ordinateur qui possède un GPU de type RTX 3060 Ti prends 20 minutes pour passer les 2000 epochs. Et la charge ram monte à 4go sur les 8go de disponible, il ne faut donc, pas lésiner sur les moyens:

![yolo_train.png](https://bo.dev-freelance.fr/uploads/yolo_train_e5eecfc498.png)

Il reste tout de même un avantage là dedans : le modèle est immédiatement sauvegardé. Je n'aurais donc pas à repasser par cette étape si je veux le réutiliser pour lancer immédiatement la détection.

J'ai lancé la détection sur un relevé **Bred** et voici le résultat :

![detection_private.jpg](https://bo.dev-freelance.fr/uploads/detection_private_78a8a1896b.jpg)

Observez les petits décalages à gauches sur les lignes, ce n'est pas 100% parfait, mais ceci est dû au fait que je n'ai entraîné le modèle que sur une quantité réduite de documents (2 ou 3 pages, car c'est usant de faire du LabelImg). Je pense qu'avec plus de données, et plus d'épochs, je peux arriver à un résultat quasi parfait.

## Compréhension des lignes

Après détection, on peut directement demander à extraire les **matches** au format texte. Mais pas si vite, <u>on ne peut pas passer le résultat directement à l'OCR</u>. J'ai fait le test avec un second relevé, de chez N26 : 

![ligne_bancaire.png](https://bo.dev-freelance.fr/uploads/ligne_bancaire_4e08ca30bb.png)

Et là, nous rencontrons un problème :

![img-to-txt-tesseract.png](https://bo.dev-freelance.fr/uploads/img_to_txt_tesseract_30e836398b.png)

Vous le voyez vous aussi ? Tesseract n'arrive pas à détecter les colonnes. Dans notre cas, il s'agit d'un débit, mais comme il n'arrive pas à gérer les offsets, il faut repasser par une étape de détection, cette fois ci, beaucoup plus simple. Qui consiste à dire, pour telle banque, voici la position des colonnes. 

![label-img-ligne.png](https://bo.dev-freelance.fr/uploads/label_img_ligne_bf69b2ea86.png)

Nous pourrons ainsi, de la même façon que l'object detection de lignes, obtenir le champs dédié et faire un simple OCR sur ce champs. 

On récupère chacune des lignes dans un tableau de dict et le tour est joué, on peut en faire un **txt**, un **csv**, ou autre.

## Bilan

C'était un petit projet passionnant, j'ai adoré la phase exploratoire ou je me demandais toujours : Comment je vais procéder ? Quel outil je vais pouvoir utiliser ?

Après avoir identifié ce dont j'aurai besoin, le départ a été plutôt fastidieux car la mise en place des réseaux de neurones, la partie tweaking du réseau pour que ça fonctionne comme attendu, a été assez longue. <u>J'ai dû y passer 2 à 3 jours</u>. Mais au final, j'ai réussi avec aussi peu de données en entrée (entrainement) à faire un petit extracteur de mouvements pour les relevés bancaires. Je pense que si j'y passe 1 mois, j'obtiendrai quelque chose de très puissant (exploitable sous forme de SaaS j'entends).

**Python** est un langage simple et accessible, et les outils de machine learning sont légions sur ce langage. Internet regorge d'exemples et de tutos que vous pourrez suivre pour vous aussi vous y mettre. Une fois que l'on a compris quelques principes, ce n'est pas très compliqué. Si c'est un sujet qui vous intéresse depuis longtemps, mais que vous n'avez toujours pas franchi le pas, vous devriez vous y mettre.

large_premier-projet-ia.jpg

medium_premier-projet-ia.jpg

small_premier-projet-ia.jpg

thumbnail_premier-projet-ia.jpg

premier-projet-ia.jpg

Je vous parlais dernièrement de mon convertisseur de relevés bancaires pour le traitement comptable et les rapprochements. Celui-ci fonctionnait à l'aide d'exports bancaires CSV ou Excel. Qu'en est-il d'un relevé scanné fourni au format PDF ? 

Mon premier "gros" projet IA

Pour créer des mocks en **Python**, je m'appuie sur la librairie **responses** j'imagine par opposition au paquet **requests**.

```shell
pip install responses
# on n'oublie pas d'installer pytest si ce n'est pas fait
pip install pytest
```

Nous allons créer une petite lib de test qui fait des appels API, puis mettre en place les mocks pour tester cette lib. Voici l'arborescence:

```shell
.
├── libs
│   ├── resource.py
└── tests
    └── test_resource.py
```

Nous allons créer un contenu très simple pour notre lib **resource.py**:

```python
# resource.py
import requests

def get_resource(id):
  headers = {
    'Accept': 'application/json'
  }
  response = requests.get('http://localhost:3000/resource/' + id, headers=headers)
  
  if response.status_code != 200:
    raise Exception('Unable to get resource ' + id)
  
  return response.json()


def create_resource(data):
  headers = {
    'Accept': 'application/json',
    'Authorization': 'Bearer blabla' 
  }
  response = requests.post('http://localhost:3000/resource', data=data, headers=headers)

  if response.status_code != 201:
    raise Exception('Unable to get resource ' + id)
  
  return response.json()
```

Maintenant pour mettre en place nos tests, respectons les conventions de **Pytest**, nous allons créer un dossier **tests** et un fichier **test_resource.py** au sein de ce dossier:

```python
# test_resource.py
import os
import sys
import responses

parent_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), '..')
sys.path.append(parent_dir)

from libs.resource import get_resource, create_resource

```

Maintenant, avant d'aller plus loin, nous allons utiliser un décorateur qui va expliquer à **responses** que nous souhaitons mettre en place dans cette fonction, l'interception des appels HTTP. Un décorateur c'est une ligne qui se positionne juste avant la déclaration de votre fonction qui viendra altérer le fonctionnement de votre fonction, sans avoir à écrire des lignes entière de code.

```python
@responses.activate
def test_get_resource():
```

Je vais ensuite déclarer la réponse du mock. C'est à dire, les données que je souhaite manipuler pendant mon test unitaire.

```python
  response_mock = {
    'username': 'Foo',
    'email': 'foo@bar.com',
    'role': 'user'
  }
```

Puis, on va déclarer dans **responses** quel appel intercepter afin de donner notre mock en réponse personnalisée en retour:

```python
responses.add(
    responses.get(
      url='http://localhost:3000/resource/3',
      json=response_mock,
      status=200,
      content_type='application/json'
    )
  )
```

Il ne reste plus qu'à déclencher l'appel et effectuer nos tests:

```python
  resource = get_resource(str(3))
  assert resource['username'] == response_mock['username']
```

Voici le fonctionnement en gros, et nous appliquons la même logique pour la partie POST. Sans vous faire languir plus longtemps, je vous met directement le fichier entier afin de vous donner une idée du résultat final.

```python
# test_resource.py
import os
import sys
import responses

parent_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), '..')
sys.path.append(parent_dir)

from libs.resource import get_resource, create_resource


@responses.activate
def test_get_resource():
  response_mock = {
    'username': 'Foo',
    'email': 'foo@bar.com',
    'role': 'user'
  }

  responses.add(
    responses.get(
      url='http://localhost:3000/resource/3',
      json=response_mock,
      status=200,
      content_type='application/json'
    )
  )

  resource = get_resource(str(3))
  assert resource['username'] == response_mock['username']

@responses.activate
def test_create_resource():
  response_mock = {
    'id': '45',
    'username': 'Blah',
    'email': 'blabla@bar.com',
    'role': 'admin'
  }

  responses.add(
    responses.post(
      url='http://localhost:3000/resource',
      json=response_mock,
      status=201,
      content_type='application/json'
    )
  )

  response = create_resource({
    'username': 'Blah',
    'email': 'blabla@bar.com',
    'role': 'admin'
  })

  assert response['id'] == '45'
```

Pour lancer les tests, on utilise :

```
python3 -m pytest -s
```

C'est tout bon ! J'espère que cet article vous a été utile et qu'il vous aidera à mettre en place **vos mocks** dans vos projets **Python**. 


large_mock_python.jpg

medium_mock_python.jpg

small_mock_python.jpg

thumbnail_mock_python.jpg

mock_python.jpg

Lorsque vous codez vos tests unitaires, il arrive que vous ayez besoin que certains appels API ne se déclenchent pas. Surtout si cet API déclenche des appels impactants, suppression, paiement, etc. Cela peut être intéressant de mettre en place un mock. Voici comment procéder...

Comment créer des mocks HTTP en Python

Et oui, incroyable mais vrai, la simple installation de **yarn** sous windows n'est pas sans manipulation. 

Rien de compliqué en soit mais il se peut que même après avoir installé yarn en global sur votre machine: 

```shell
npm i -g yarn
```

Vous soyez dans l'incapacité de lancer une commande yarn et receviez en retour ce message d'erreur:

```shell
yarn.ps1 cannot be loaded because running scripts is disabled on this system. For more informations, see about_Execution_Policies at https...

+ CategoryInfo: SecurityError (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess 
```

Alors qu'est-ce que c'est que ce charabia ? Tout simplement que **yarn** est incapable de se lancer sur votre machine, faute de droits.

Pour y remédier, rien de compliqué, ouvrez **windows** et tapez **powershell** puis faîtes un clic droit > exécuter en tant qu'administrateur.

![powershell_admin.jpg](https://bo.dev-freelance.fr/uploads/powershell_admin_59e7c13b60.jpg)

Une fois **powershell** ouvert, entrez ceci :

```shell
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
```

On vous demandera de confirmer avec **O**, faîtes-le. 

Voilà, désormais vous êtes en mesure d'utiliser vos commandes **yarn** sur Windows 11 sans problèmes.


large_yarn.jpg

medium_yarn.jpg

small_yarn.jpg

thumbnail_yarn.jpg

yarn.jpg

C'est de plus en plus dur de coder quelque chose sous Windows. De manière générale, je trouve que c'est plus fastidieux qu'ailleurs de faire quoique ce soit dans le dev sous Windows. Chercher des paquets à la main etc, avant l'introduction de nuget du moins. Aujourd'hui nous allons voir comment utiliser yarn (le paquet node) sous Windows.

Découvrez tous nos articles de la catégorie Dev - page 2 sur 6