Intégrer une API plaque d'immatriculation dans une application mobile

Sur mobile, chaque champ de formulaire coûte cher : clavier qui masque l'écran, autocomplétion capricieuse, utilisateur pressé. Remplacer la sélection marque / modèle / version par une simple saisie de plaque transforme l'expérience. Encore faut-il l'intégrer correctement, car une application mobile pose une contrainte particulière : tout ce qui est embarqué dans l'application peut être extrait.

Ce tutoriel montre comment intégrer une API plaque d'immatriculation dans une application React Native ou Flutter, avec une architecture sûre et une interface agréable.

L'erreur à ne pas commettre : la clé dans l'application

Il est tentant d'appeler l'API directement depuis l'application en y embarquant la clé RapidAPI. C'est une erreur : un binaire mobile se décompile en quelques minutes, et votre clé serait réutilisable par n'importe qui pour consommer votre quota.

La bonne architecture place un back-end intermédiaire entre l'application et l'API :

1. L'application envoie la plaque à votre serveur (ou à une fonction serverless).
2. Le serveur authentifie l'utilisateur, valide la plaque et applique un rate limit.
3. Le serveur appelle l'API avec la clé, stockée en variable d'environnement.
4. Le serveur renvoie à l'application uniquement les champs utiles.

Le back-end minimal

Une simple fonction serverless suffit. Elle expose GET /vehicule?plaque=... à votre application :

import express from "express";

const app = express();
const SIV = /^[A-HJ-NP-TV-Z]{2}\d{3}[A-HJ-NP-TV-Z]{2}$/;

app.get("/vehicule", async (req, res) => {
const plaque = String(req.query.plaque ?? "").toUpperCase().replace(/[\s-]/g, "");
if (!SIV.test(plaque)) return res.status(400).json({ error: "Plaque invalide" });

const url = new URL("https://api-plaque-immatriculation-siv.p.rapidapi.com/get-vehicule-info");
url.searchParams.set("immatriculation", plaque);

const r = await fetch(url, {
  headers: {
    "x-rapidapi-host": "api-plaque-immatriculation-siv.p.rapidapi.com",
    "x-rapidapi-key": process.env.RAPIDAPI_KEY,
  },
  signal: AbortSignal.timeout(10_000),
});
if (!r.ok) return res.status(r.status).json({ error: "Véhicule indisponible" });

const { data } = await r.json();
res.json({
  marque: data.marque,
  modele: data.modele,
  version: data.sra_commercial,
  energie: data.energieNGC,
  miseEnCirculation: data.date1erCir_fr,
});
});

app.listen(3000);

Renvoyer un objet réduit allège les échanges réseau et découple votre application du format exact de l'API : si le fournisseur évolue, seul le serveur change.

Côté application : React Native

Dans React Native, l'appel au back-end est un simple fetch. L'essentiel du travail porte sur l'expérience utilisateur : clavier adapté, mise en majuscules automatique, indicateur de chargement et messages d'erreur clairs.

import { useState } from "react";
import { ActivityIndicator, Button, Text, TextInput, View } from "react-native";

export function PlateLookup() {
const [plaque, setPlaque] = useState("");
const [vehicule, setVehicule] = useState<any>(null);
const [erreur, setErreur] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

async function rechercher() {
  setLoading(true);
  setErreur(null);
  try {
    const r = await fetch(`https://votre-api.example/vehicule?plaque=${encodeURIComponent(plaque)}`);
    const json = await r.json();
    if (!r.ok) throw new Error(json.error ?? "Erreur");
    setVehicule(json);
  } catch (e: any) {
    setErreur(e.message);
  } finally {
    setLoading(false);
  }
}

return (
  <View>
    <TextInput
      value={plaque}
      onChangeText={(t) => setPlaque(t.toUpperCase())}
      autoCapitalize="characters"
      autoCorrect={false}
      placeholder="AB-123-CD"
      maxLength={10}
    />
    <Button title="Rechercher" onPress={rechercher} disabled={loading} />
    {loading && <ActivityIndicator />}
    {erreur && <Text>{erreur}</Text>}
    {vehicule && <Text>{vehicule.marque} {vehicule.modele}</Text>}
  </View>
);
}

Côté application : Flutter

En Flutter, le principe est identique avec le package http. Pensez à textCapitalization: TextCapitalization.characters pour faciliter la saisie :

import 'dart:convert';
import 'package:http/http.dart' as http;

class Vehicule {
final String marque;
final String modele;
Vehicule(this.marque, this.modele);

factory Vehicule.fromJson(Map<String, dynamic> j) =>
    Vehicule(j['marque'] ?? '—', j['modele'] ?? '—');
}

Future<Vehicule> rechercherVehicule(String plaque) async {
final uri = Uri.https('votre-api.example', '/vehicule', {'plaque': plaque});
final r = await http.get(uri).timeout(const Duration(seconds: 10));
if (r.statusCode != 200) {
  throw Exception(jsonDecode(r.body)['error'] ?? 'Erreur');
}
return Vehicule.fromJson(jsonDecode(r.body));
}

// Dans le widget :
// TextField(
//   textCapitalization: TextCapitalization.characters,
//   autocorrect: false,
//   decoration: const InputDecoration(hintText: 'AB-123-CD'),
// )

Soigner l'expérience utilisateur

Quelques détails font la différence sur mobile :

• Confirmation visuelle : affichez marque, modèle et version, et demandez « Est-ce bien votre véhicule ? ». L'utilisateur garde le contrôle.
• Mode dégradé : en cas d'erreur 404, proposez une sélection manuelle plutôt qu'un cul-de-sac.
• Hors connexion : désactivez le bouton et expliquez pourquoi, au lieu d'échouer silencieusement.
• Mémorisation : stockez localement le dernier véhicule identifié pour ne pas redemander la plaque à chaque session.
• Accessibilité : libellés explicites pour les lecteurs d'écran, zones tactiles suffisantes.

Maîtriser la consommation

Une application populaire peut générer beaucoup d'appels. Mettez en cache les réponses côté serveur par plaque normalisée, limitez le nombre de recherches par utilisateur et surveillez votre consommation dans RapidAPI. Ajustez ensuite votre offre sur la page Tarifs.

Conclusion

Intégrer une API plaque d'immatriculation dans une application mobile est simple si l'on respecte une règle : la clé reste sur le serveur. Avec un petit back-end intermédiaire et une interface soignée, vous transformez un formulaire fastidieux en une saisie de quelques secondes.

FAQ

Puis-je appeler RapidAPI directement depuis l'application ?

C'est déconseillé : la clé embarquée dans l'application peut être extraite et réutilisée par des tiers.

Quelle solution serverless choisir pour le back-end ?

N'importe laquelle convient (fonctions cloud, routes API d'un framework web…). L'important est de stocker la clé dans une variable d'environnement.

L'API fonctionne-t-elle aussi pour une application web progressive ?

Oui, l'architecture est exactement la même : la PWA appelle votre serveur, qui appelle l'API.