WorkFlow.

Créer une Application Mobile ENT avec Reconnaissance d’Écriture et Intégration API

L’objectif de cet article est de vous guider à travers la création d’une application mobile ENT (Environnement Numérique de Travail) permettant aux étudiants d’un IUT de consulter leur emploi du temps. Cette application se distingue par l’intégration d’une reconnaissance d’écriture pour récupérer les informations de l’étudiant (comme son identifiant ou son nom), qui seront ensuite envoyées via une requête API pour afficher l’emploi du temps.

1. Introduction

De nos jours, de nombreuses applications de gestion scolaire ont été créées pour faciliter la vie des étudiants. Une fonctionnalité innovante pourrait consister à intégrer la reconnaissance d’écriture dans une application mobile ENT, permettant ainsi aux étudiants de simplement écrire leurs informations (identifiant, nom) pour obtenir instantanément leur emploi du temps.

Dans cet article, nous allons explorer les étapes nécessaires pour créer une telle application à l’aide de React Native, de la bibliothèque Tesseract.js pour la reconnaissance d’écriture, et de l’API d’un IUT pour récupérer les emplois du temps des étudiants.

2. Prérequis

Avant de commencer, voici les principales technologies que vous allez utiliser :

React Native : Framework JavaScript pour créer des applications mobiles natives.
Tesseract.js : Bibliothèque pour la reconnaissance d’écriture manuscrite.
Axios : Pour effectuer des requêtes HTTP et récupérer les données de l’API.
API de l’IUT : Une API permettant de récupérer l’emploi du temps des étudiants en fonction de leurs informations (identifiant, nom).
State Management (facultatif) : Context API ou Redux pour gérer l’état global de l’application.

3. Création de l’Application Mobile

3.1 Initialisation du Projet React Native

Commencez par créer un nouveau projet React Native. Si vous n’avez pas encore React Native installé, vous pouvez utiliser Expo (plus simple pour démarrer rapidement).

Avec Expo :

npx create-expo-app EntApp
cd EntApp

Avec React Native CLI :

npx react-native init EntApp
cd EntApp

3.2 Installer les Dépendances Nécessaires

Reconnaissance d’écriture avec Tesseract.js : Utilisez react-native-tesseract-ocr pour intégrer la reconnaissance d’écriture.

npm install react-native-tesseract-ocr

Requêtes API avec Axios : Installez Axios pour interroger l’API et récupérer l’emploi du temps de l’étudiant.

npm install axios

Gestion de l’état (optionnel) : Si vous souhaitez utiliser un état global pour gérer les données de l’application, vous pouvez utiliser Redux ou le Context API de React.

3.3 Implémentation de la Reconnaissance d’Écriture

La première étape consiste à capturer l’écriture de l’utilisateur et à la convertir en texte. Vous pouvez utiliser la caméra ou une image d’écriture manuscrite pour ce faire.

Voici un exemple de code permettant de capturer l’écriture et de la traiter avec Tesseract.js :

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import TesseractOcr from 'react-native-tesseract-ocr';

const WriteRecognition = () => {
  const [result, setResult] = useState('');

  const handleCapture = async () => {
    try {
      const recognizedText = await TesseractOcr.recognize('path_to_image', 'eng', {
        whitelist: null,
      });
      setResult(recognizedText);
    } catch (error) {
      console.log(error);
      setResult('Erreur de reconnaissance.');
    }
  };

  return (
    <View>
      <Button title="Capturer l'écriture" onPress={handleCapture} />
      {result && <Text>Résultat de la reconnaissance : {result}</Text>}
    </View>
  );
};

export default WriteRecognition;

Dans cet exemple, l’utilisateur peut capturer une image de son écriture, et le texte sera extrait pour être utilisé dans la requête API suivante.

3.4 Faire une Requête API pour Récupérer l’Emploi du Temps

Une fois l’écriture reconnue, l’application peut envoyer cette information à une API (comme celle de l’IUT) pour récupérer l’emploi du temps de l’étudiant. Vous pouvez utiliser Axios pour effectuer une requête HTTP.

Voici un exemple de fonction pour interroger l’API :

import axios from 'axios';

const fetchEmploiDuTemps = async (userInput) => {
  try {
    const response = await axios.get(`https://api.iut.fr/emploi-du-temps/${userInput}`);
    return response.data; // Les données de l'emploi du temps
  } catch (error) {
    console.log(error);
    return null; // En cas d'erreur, renvoyer null
  }
};

3.5 Affichage de l’Emploi du Temps

Une fois les données récupérées, vous pouvez les afficher à l’utilisateur dans une interface simple.

Voici un exemple pour afficher l’emploi du temps sous forme de liste :

import React, { useState } from 'react';
import { View, Button, Text, ScrollView } from 'react-native';

const EmploiDuTempsScreen = ({ userInput }) => {
  const [emploiDuTemps, setEmploiDuTemps] = useState(null);

  const getEmploiDuTemps = async () => {
    const data = await fetchEmploiDuTemps(userInput);
    setEmploiDuTemps(data);
  };

  return (
    <View>
      <Button title="Obtenir l'emploi du temps" onPress={getEmploiDuTemps} />
      {emploiDuTemps ? (
        <ScrollView>
          {emploiDuTemps.map((item, index) => (
            <View key={index}>
              <Text>{item.matière} - {item.horaire}</Text>
            </View>
          ))}
        </ScrollView>
      ) : (
        <Text>Chargement en cours...</Text>
      )}
    </View>
  );
};

Cela affichera l’emploi du temps de l’étudiant sous forme de liste, avec le nom de la matière et l’horaire.

4. Conclusion

L’intégration de la reconnaissance d’écriture dans une application ENT est une fonctionnalité innovante qui facilite la consultation de l’emploi du temps pour les étudiants. Grâce à React Native, Tesseract.js pour la reconnaissance d’écriture et Axios pour les requêtes API, nous pouvons créer une application simple mais efficace qui répond aux besoins des étudiants.

Cette application permet non seulement d’exploiter les technologies modernes mais aussi de rendre l’expérience utilisateur plus fluide et interactive.

Astuce : N’oubliez pas de tester l’application sur différents appareils pour vous assurer que la reconnaissance d’écriture fonctionne de manière fluide et précise.

ENT intelligent