Klark Mobile | KlarkLabs

Contexte

Après le succès de la plateforme web Klark, les équipes terrain de Klark Industries avaient besoin d'accéder à leurs données business depuis le terrain — en usine, en déplacement, sur chantier. Le dashboard web n'était pas adapté aux écrans mobiles et certains sites industriels avaient une connectivité limitée.

La mission : développer une application mobile native iOS & Android qui offre un accès rapide aux KPIs, les notifications push en temps réel et un mode hors-ligne complet pour les environnements à connectivité limitée.

Défis techniques

Architecture offline-first

Les sites industriels ont souvent une connectivité instable. L'application devait fonctionner en mode hors-ligne et synchroniser les données dès le retour de la connexion.

// hooks/useOfflineSync.ts
import { useEffect, useCallback } from "react";
import NetInfo from "@react-native-community/netinfo";
import { syncQueue } from "../lib/sync-queue";
 
export function useOfflineSync() {
  const syncPendingOperations = useCallback(async () => {
    const pending = await syncQueue.getPending();
    if (pending.length === 0) return;
 
    for (const op of pending) {
      await api.post(`/sync/${op.collection}`, op.data);
      await syncQueue.markCompleted(op.id);
    }
  }, []);
 
  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      if (state.isConnected && state.isInternetReachable) {
        syncPendingOperations();
      }
    });
    return unsubscribe;
  }, [syncPendingOperations]);
}

Dashboard mobile avec graphiques interactifs

Adapter les dashboards complexes de la version web à des écrans mobiles tout en gardant l'interactivité. Nous avons utilisé React Native Skia pour des graphiques performants rendus sur le GPU.

// components/MetricCard.tsx
import { Canvas, RoundedRect, LinearGradient } from "@shopify/react-native-skia";
import Animated, { useSharedValue, withSpring } from "react-native-reanimated";
 
export function MetricCard({ metric }: { metric: Metric }) {
  const scale = useSharedValue(1);
 
  return (
    <Animated.View style={useAnimatedStyle(() => ({
      transform: [{ scale: scale.value }],
    }))}>
      <Pressable
        onPressIn={() => { scale.value = withSpring(0.97); }}
        onPressOut={() => { scale.value = withSpring(1); }}
      >
        <View className="bg-zinc-900 rounded-2xl p-4">
          <Text className="text-zinc-400 text-sm">{metric.label}</Text>
          <Text className="text-white text-2xl font-bold">{metric.value}</Text>
          <SparklineChart data={metric.history} />
        </View>
      </Pressable>
    </Animated.View>
  );
}

Notifications push intelligentes

Les alertes sont personnalisées selon le rôle de l'utilisateur et les seuils configurés par organisation. Un manager reçoit une alerte si le CA journalier chute de plus de 15%, un opérateur est notifié en cas d'anomalie sur sa ligne de production.

// functions/src/notifications/alert-engine.ts
export async function evaluateAlerts(orgId: string, metrics: MetricSnapshot) {
  const rules = await getAlertRules(orgId);
 
  for (const rule of rules) {
    const currentValue = metrics[rule.metricKey];
    const threshold = rule.threshold;
 
    if (rule.condition === "below" && currentValue < threshold) {
      await sendPushToRole(orgId, rule.targetRole, {
        title: rule.alertTitle,
        body: `${rule.metricLabel}: ${currentValue} (seuil: ${threshold})`,
      });
    }
  }
}

Solution déployée

L'application est construite avec Expo (managed workflow) pour des mises à jour OTA rapides. Elle communique avec l'API Klark existante via tRPC, avec une couche de cache locale SQLite pour le mode offline. Les notifications push passent par Firebase Cloud Messaging avec un routage intelligent par rôle et organisation.

L'authentification SSO est partagée avec la plateforme web via un token JWT commun, permettant une expérience fluide entre les deux interfaces.

Résultats

Lancée en janvier 2026, l'application a été adoptée par 5 000 utilisateurs actifs en moins de 2 mois. La note moyenne est de 4.9/5 sur les stores. Le temps d'accès aux KPIs est passé de plusieurs minutes (ouverture laptop + connexion VPN) à moins de 3 secondes. Les équipes terrain rapportent un gain de productivité significatif grâce aux alertes push contextuelles.