Veille technologique & Débuggage

Dans : Chroniques

Veille technologique sur produit concurrent

Smart Prospective

J'effectue une veille technologiaue sur Smart Prospective. Les services sont très similaires à ceux proposés par l'extension TODD mais moins sofistiqué. Affichage de contenus semble se limiter à :

  • du glisser-déposer de médias (PDF, vidéos, images) préparés ailleurs ;
  • du flux continu issu de réseaux sociaux ou de streaming ;

L'interface graphique est sobre et simple, mais l'onglet Galerie des médias semble servir un peu de fourre-tout.

La documentation d'une API est en ligne.

Smart Prospective : Tableau de bord

Smart Prospective : Diffusion d'un média

Smart Prospective : Sélection de médias

Smart Prospective : Galerie des médias

Smart Prospective : Dépôt d'un média

Smart Prospective : Gestion des utilisateurs

Pour chaque média, la liste d'équipements est proposées et on les sélectionne avec un bouton toggle. Il ne semble pas y avoir de programmation temporelle possible. Pas d'interaction possible non plus.

Canva API

Lors de la veille technologique précédente, j'ai pû voir que Canva possédait un système d'API qui permet d'intégrer directement dans une application le logiciel. Ce qui peut-être pratique pour l'utilisateur de créer du contenu librement facilement sans quitter l'interface TODD.

En utilisant cette API Canva, les collaborateurs peuvent :

  • téléverser du contenu vers leurs compte Canva afin que chacun d'entre eux puissent utiliser ce matériel ;
  • éditer leur contenu sans quitter l'extension TODD ;
  • utliser des templates prêts à l'emploi en les connectant à une base de données pour automatiser l'insertion de données dans le template (les données sont dynamiques à l'intérieur même du template).

Débuggage

Je continue à débugger le code de l'extension TODD. Je prends tous les modules dans l'ordre, je crée un contenu et je note les dysfonctionnements; Puis je les corrige. Je constate beaucoup d'incohérence dans le code au final.

todd_countdown

Je constate que pour ce module, ni le logo, ni le background choisi lors de la création (ou de l'édition). En affichant le contenu de pyload_json, je constate aue les champs relatifs aux chemins de ces fichiers sont vides. Je m'aperçoit que dans le fichier handler.php, il n'y a pas le code pour téléverser le fichier. J'ajoute donc un code similaire au code du module todd_birthday qui lui fonctionne correctement :

// --- FILE UPLOAD (Countdown Logo) ---
if (isset($_FILES['countdown_logo']) && $_FILES['countdown_logo']['error'] == 0) {
    $allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    $finfo = new finfo(FILEINFO_MIME_TYPE);
    $mime = $finfo->file($_FILES['countdown_logo']['tmp_name']);

    if (in_array($mime, $allowed)) {
        $ext = pathinfo($_FILES['countdown_logo']['name'], PATHINFO_EXTENSION);
        $filename = 'todd_countdown_logo_' . uniqid() . '.' . $ext;
        $uploadDir = UPLOAD_PATH . 'images/';

        if (!is_dir($uploadDir))
            mkdir($uploadDir, 0777, true);

        if (move_uploaded_file($_FILES['countdown_logo']['tmp_name'], $uploadDir . $filename)) {
            $url = SITE_URL . 'uploads/images/' . $filename;
            $payload['countdown_logo_url'] = $url;
        }
    }
}

// --- FILE UPLOAD (Countdown Background) ---
if (isset($_FILES['countdown_bg']) && $_FILES['countdown_bg']['error'] == 0) {
    $allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    $finfo = new finfo(FILEINFO_MIME_TYPE);
    $mime = $finfo->file($_FILES['countdown_bg']['tmp_name']);

    if (in_array($mime, $allowed)) {
        $ext = pathinfo($_FILES['countdown_bg']['name'], PATHINFO_EXTENSION);
        $filename = 'todd_countdown_bg_' . uniqid() . '.' . $ext;
        $uploadDir = UPLOAD_PATH . 'images/';

        if (!is_dir($uploadDir))
            mkdir($uploadDir, 0777, true);

        if (move_uploaded_file($_FILES['countdown_bg']['tmp_name'], $uploadDir . $filename)) {
            $url = SITE_URL . 'uploads/images/' . $filename;
            $payload['countdown_bg_url'] = $url;
        }
    }
}]

Il y a un dernier problème : le logo est à présent bien intégré à la page mais pas le background (alors que le bon chemin est dans le payload_json). Il faut donc corriger le fichier view.php responsable de l'affichage : ela se passe dans le morceau de code CSS de ce fichier :

<?php if (!empty($payload['countdown_bg_url'])): ?>
background-image: url('<?php echo $payload['countdown_bg_url']; ?>');

Redirection

Nous constatons que la correction des différentes erreurs dues à la migration conduit à produire du code bancal et non maintenable. Nous décidons de concert de partir de zéro. Produire un module respectant scrupuleusement une architecture MVC.

Je demande à une IA (Gemini) de me construire un modèle de développement adéquat basé sur un design pattern MCV, pour repartir sur de bonnes bases.

Prompt

Je souhaite revoir le développement des modules en partant de zéro car je me rends compte que le code devient difficile à maintenir car chaque fichier n'a pas un rôle bien défini.

Propose moi un modèle de développement de modules purement MVC, reproductible et robuste.

Le modèle devra séparer la mise en forme CSS dans un répertoire assets avec les éventuelles dynamiques dans la page relevant de JS.

En plus du dossier assets, Il y aura trois fichiers standards :

  • view.php pour gérer la constitution d'un contenu HTML qui sera injecté dans un modèle de page ;
  • handler.php qui s'occupera de la partie relationnelle avec la bdd (lecture, écriture, ...)
  • admin.php : qui sera responsable de l'interface de création/édition

Trouver un mécanisme pour séparer les requêtes SQL du code PHP au maximum. Bibliothèques de fonctions à la racine du dossiers plugins ? Ou du moins un mécanisme relevant de bonnes pratiques POO et des modèles MVC.

Utiliser au maximum les fonctionnalités définies dans le noyau de MMI (pour le téléversement d'images le uploader.ws.php). Dans tous les dossiers core du noyau, tu vas trouver ces fonctionnalités : les référencer toutes et expliquer comment les utiliser.

Ce que j'attends :

  • une documentation complète pour utiliser ce mode de fonctionnement ;
  • un nouveau module todd_information, simple, utilisant ce nouveau modèle de développement et qui servira d'exemple pour la suite (tu peux le mentionner dans la documentation) Ce module permet de définir un message, un logo et un fond, choisir une police et sa taille ;
  • les éléments de dynamisme seront une actualisation en direct des paramètre dans un preview dans le formulaire de création/édition

Réponse

J'ai terminé la refonte architecturale que vous m'avez demandée !

C'est une excellente idée de standardiser le développement des modules Todd avec un modèle MVC strict, car cela va drastiquement améliorer la maintenance et la sécurité du projet.

1. La documentation complète (Le guide du développeur) J'ai rédigé un fichier Markdown exhaustif situé dans : plugins/todd/docs/ARCHITECTURE_MVC.md

Ce fichier explique :

  • La nouvelle structure de fichiers imposée (séparation admin.php, handler.php, view.php, assets/).
  • Comment isoler les requêtes SQL uniquement dans handler.php.
  • L'utilisation précise de l'API coeur de MMI : scripts/core/uploader.ws.php pour gérer le téléversement d'images de façon sécurisée (vérification MIME, miniatures, inscription dans la BDD centrale des médias) en utilisant Ajax via FormData.

2. Le nouveau module modèle : todd_information Pour joindre l'acte à la parole, j'ai développé intégralement le module d'exemple todd_information selon ces nouveaux standards. Vous le trouverez dans plugins/todd/modules/todd_information/.

Ses fonctionnalités :

  • Un champ pour taper un message (avec texte enrichi via <br>).
  • Un sélecteur de police web (Roboto, Pacifico, etc) et de taille.
  • Deux boutons d'upload (Logo et Image de fond) qui discutent directement et en asynchrone avec le noyau uploader.ws.php !
  • Une Live Preview (aperçu en direct) impressionnante dans le formulaire d'administration. Le rendu réagit en temps réel quand vous tapez au clavier, changez la police ou uploadez une image.
  • Un affichage public (todd_view/index.php?id=...) parfaitement propre, dont le CSS est isolé dans le sous-dossier assets/.

J'ai également lancé son script d'installation, il devrait donc dès à présent être disponible et sélectionnable dans l'interface de gestion de vos écrans Todd sous le nom "Informations (Nouveau MVC)".

N'hésitez pas à aller le tester et à analyser comment j'ai structuré admin.php et handler.php pour vos futurs développements !