Planboard pour la logistique du fret

Le client: TransportMaster
Secteur: Transports agricoles / transport
Le type: Application Web spécifique
La pile: JavaScript à la vanille, HTML5, CSS3

Une application de planification logistique personnalisée pour une entreprise de transport agricole néerlandaise, permettant aux planificateurs de planifier les itinéraires des conducteurs, de gérer les commandes de fret et de pousser les instructions directement vers les ordinateurs de flotte à bord le tout à partir d'une seule interface basée sur un navigateur.

Le défi

L'entreprise est spécialisée dans les aliments pour animaux et le transport de marchandises en vrac. Leurs planificateurs ont géré le calendrier hebdomadaire du conducteur qui conduit où, quoi, quel jour en utilisant un mélange de feuilles de calcul et de notes manuscrites. Les commandes étaient suivies séparément du calendrier, et les changements devaient être communiqués aux conducteurs manuellement.

L'objectif était de tout regrouper en un tableau de planification conçu spécifiquement: une vue d'ensemble en direct de la semaine entière où les commandes peuvent être attribuées au bon conducteur et au bon jour, et les instructions du conducteur peuvent être envoyées directement aux ordinateurs de la flotte de cabine en un seul clic.

Conception

L'interface est structurée autour d'une grille hebdomadaire: les conducteurs sur l'axe vertical, du lundi au samedi sur l'axe horizontal.

Un système d'état couleur-codé cohérent donne une rétroaction visuelle instantanée sur chaque carte de commande:

• GL Gelade (chargé) jaune
• OL Non chargée (déchargé) rouge
• L'ancien Doubleset bleu
• Nouveau ordre gris
• FONT Préparé vert

Le système de conception est entièrement construit avec des propriétés personnalisées CSS un ensemble structuré de jetons de conception couvrant l'espacement, la couleur, la typographie, l'ombre et le timing d'animation. Deux modes de densité d'affichage (compact et étendu) permettent aux planificateurs de basculer entre une vue d'ensemble de haut niveau et une mise en page de carte plus détaillée en fonction de la taille de l'écran et de la tâche à accomplir.

Caractéristiques

• Calendrier de glisser-déposer Les commandes sont glissées de la barre latérale directement dans n'importe quelle cellule de chauffeur/jour sur le tableau.
• Navigation hebdomadaire en direct Les planificateurs avancent et reculent au fil des semaines.
• Panneau de commande En cliquant sur n'importe quelle commande, un panneau slide-in s'ouvre avec les détails des clients, les adresses, le poids, les prix, la gestion des palettes et les notes du conducteur.
• Intégration de la flotte Web Les instructions du conducteur peuvent être prévisualisées et envoyées directement aux ordinateurs de flotte à bord via l'API Webfleet un clic par commande.
• Gestion des commandes Créer, modifier et supprimer la fonctionnalité complète pour les commandes de fret.
• Gestion du conducteur Ajouter, modifier et supprimer les pilotes. Chaque pilote est attribué une couleur unique pour une identification facile sur le tableau.
• Recherche et filtrage La barre latérale prend en charge la recherche en temps réel par nom de client, numéro de commande ou article, avec des filtres pour restreindre la liste par groupe de statut.
• Notifications de brassage Les messages de rétroaction non bloquants confirment chaque action (enregistrement, envoi, suppression) sans interrompre le flux de travail de planification.

Développement

L'application est écrite en JavaScript en vanille pure en utilisant des modules ES6 natifs pas d'outils de construction, pas de bundlers, pas de bibliothèques tierces. C'était un choix délibéré: le résultat est une base de code légère et maîtrisable avec zéro risque de dépendance et aucun tapis roulant de mise à niveau.

L'architecture sépare les préoccupations en modules centrés, chacun avec une seule responsabilité:

• Module d'État Source unique de vérité pour toutes les données de l'application. Toutes les mutations circulent à travers un seul endroit, avec localStorage automatique persistance à travers les sessions.
• Autobus de l'événement Un système de publication/abonnement léger qui permet aux modules de communiquer sans importation directe les uns des autres, en gardant chaque fichier testable de manière indépendante.
• Couche d'API Une mince couche d'abstraction enveloppe toutes les opérations de données sous forme de promesses.
• Modules d'affichage Les modules séparés gèrent la grille du tableau, la barre latérale, les modules, les cartes, la vue glisser-déposer, la vue des commandes et la vue des pilotes un problème par fichier.
• Les jetons de conception Toutes les valeurs visuelles (couleur, espacement, rayon, ombre, transition) sont définies comme des propriétés personnalisées CSS dans un seul fichier de variables, ce qui maintient l'interface utilisateur cohérente et facile à mettre à jour.

Le projet a été reconstruit à partir de zéro en remplaçant un prototype monolithique de fichier unique de 2 800 lignes dans une architecture structurée et multi-fichiers qui est facile à étendre et à transmettre.

Technologie

HTML5, CSS3 Propriétés personnalisées, CSS Grid, Flexbox, Vanilla JavaScript ES6, Modules ES natifs, Web Drag & Drop API, localStorage, Promesses / asyncwait, Pub / Sub bus d'événements, Webfleet API.

Aucun framework, aucun bundler, aucune bibliothèque externe, toute l'application fonctionne directement dans le navigateur, ce qui facilite l'hébergement, le déploiement et la maintenance.

Le résultat

Les planificateurs disposent désormais d'un outil qui couvre l'ensemble du flux de travail quotidien: la saisie de nouvelles commandes, leur attribution aux pilotes, l'examen de la semaine en un coup d'œil et l'envoi d'instructions de route à la cabine sans changer d'application ou de système.

Parce que la base de code est modulaire et que la couche API est entièrement abstraite, connecter l'application à une base de données backend ou l'élargir avec de nouvelles fonctionnalités est une prochaine étape simple qui ne nécessite pas de réécrire la logique existante.