{"id":19279,"date":"2021-02-24T13:19:58","date_gmt":"2024-06-03T07:32:48","guid":{"rendered":"https:\/\/onthegosystems.com\/2024\/06\/comment-nous-avons-transforme-mon-prototype-en-lune-des-principales-fonctionnalites-de-notre-produit\/"},"modified":"2024-06-03T07:33:03","modified_gmt":"2024-06-03T07:33:03","slug":"comment-nous-avons-transforme-mon-prototype-en-lune-des-principales-fonctionnalites-de-notre-produit","status":"publish","type":"post","link":"https:\/\/onthegosystems.com\/fr\/2021\/02\/comment-nous-avons-transforme-mon-prototype-en-lune-des-principales-fonctionnalites-de-notre-produit\/","title":{"rendered":"Comment nous avons transform\u00e9 mon prototype en l’une des principales fonctionnalit\u00e9s de notre produit"},"content":{"rendered":"\n

Ivan \u010curdinjakovi\u0107<\/a> est d\u00e9veloppeur dans notre \u00e9quipe Toolset<\/a>. Dans cette interview, Ivan nous raconte comment il a eu l’id\u00e9e de r\u00e9soudre un probl\u00e8me de longue date, \u00e0 savoir travailler avec un m\u00e9lange de contenu statique et dynamique dans WordPress.<\/strong><\/p>\n\n

Pouvez-vous expliquer le probl\u00e8me que vous vouliez r\u00e9soudre \u00e0 quelqu’un qui ne conna\u00eet pas WordPress ?<\/h2>\n\n

Bien s\u00fbr ! Comme chacun le sait, WordPress permet de cr\u00e9er et de g\u00e9rer des sites. Il contient des informations par d\u00e9faut pour vos pages, telles que le titre de la page, l’image vedette, les cat\u00e9gories, etc. Toolset, notre ensemble de plugins pour WordPress, vous permet d’ajouter toutes sortes d’informations personnalis\u00e9es. <\/p>\n\n

Par exemple, vous devez indiquer le prix d’un bien immobilier ? Pas de probl\u00e8me, ajoutez-la \u00e0 l’aide de Toolset. Comme ces informations changent d’un poste \u00e0 l’autre, on dit qu’elles sont dynamiques.<\/p>\n\n

Mais ensuite, vous voulez afficher ces informations sur le front-end. Vous pouvez afficher ces donn\u00e9es dynamiques dans des listes personnalis\u00e9es d’articles<\/a>, dans des mod\u00e8les d’articles individuels<\/a>, etc. Toolset vous permet de le faire facilement en utilisant des blocs dans l’\u00e9diteur par d\u00e9faut de WordPress. Il vous suffit d’activer l’option d’affichage des informations dynamiques et de s\u00e9lectionner le champ concern\u00e9.<\/p>\n\n

Pour illustrer cette op\u00e9ration, voici une image qui montre comment vous pouvez afficher un titre dynamique dans votre liste personnalis\u00e9e d’articles cr\u00e9\u00e9e \u00e0 l’aide de Toolset.<\/p>\n\n

\"\"
Utilisation de Toolset Dynamic Sources pour afficher le titre d’un article dans une liste personnalis\u00e9e d’articles<\/figcaption><\/div><\/figure>\n\n

L’obstacle majeur que nous rencontrions \u00e9tait que nos blocs pouvaient avoir un contenu statique (texte saisi par l’utilisateur) ou un contenu dynamique. Il n’y avait tout simplement pas de possibilit\u00e9 technique de m\u00e9langer facilement du texte statique et des champs dynamiques. Il s’agit d’un besoin courant pour les utilisateurs. <\/p>\n\n

Par exemple, vous pourriez vouloir afficher la valeur du prix, qui est un nombre, m\u00e9lang\u00e9e \u00e0 du texte.<\/p>\n\n

\"\"
Un exemple de m\u00e9lange de contenu statique et de champs dynamiques<\/figcaption><\/div><\/figure>\n\n

Nous avions des solutions de contournement et des solutions provisoires, mais elles \u00e9taient lourdes pour les utilisateurs et les programmeurs.<\/p>\n\n

C’\u00e9tait donc une d\u00e9mangeaison que beaucoup d’entre nous voulaient assouvir d’une mani\u00e8re ou d’une autre. <\/p>\n\n

Comment avez-vous abord\u00e9 cette question ?<\/h2>\n\n

OK, cela devient un peu plus technique… :)<\/p>\n\n

Il y a quelques mois, je v\u00e9rifiais certains filtres relativement nouveaux que Gutenberg (alias l’\u00e9diteur de blocs de WordPress) a ajout\u00e9s \u00e0 leur \u00e9diteur RichText. Il s’agit d’un composant qui permet d’\u00e9crire du texte richement format\u00e9 \u00e0 l’int\u00e9rieur de blocs. Ce qui a attir\u00e9 mon attention, c’est que l’\u00e9quipe Gutenberg a ajout\u00e9 des formats plus complexes, comme Link, Inline Code et Inline Image, en plus des formats habituels, comme Bold, Italic et Underline. <\/p>\n\n

J’ai imm\u00e9diatement pens\u00e9 qu’il serait possible de cr\u00e9er un format de champ en ligne personnalis\u00e9. <\/p>\n\n

Mais apr\u00e8s avoir consult\u00e9 la documentation de l’API RichText, je me suis rendu compte que ce n’\u00e9tait pas tr\u00e8s clair. Il \u00e9tait assez limit\u00e9, et les fonctionnalit\u00e9s avanc\u00e9es qu’ils ont ajout\u00e9es \u00e9taient \u00e9troitement adapt\u00e9es aux besoins de leurs formats (WordPress core). Vous pouvez ajouter un format \u00e0 RichText, mais il n’y a aucun exemple d’une complexit\u00e9 proche de celle dont nous avions besoin pour nos champs en ligne.<\/p>\n\n

Quand vous \u00eates-vous rendu compte que vous pouviez y arriver ?<\/h2>\n\n

Au d\u00e9but, je n’arrivais pas \u00e0 savoir si c’\u00e9tait possible. Mais j’\u00e9tais curieux et je l’ai exp\u00e9riment\u00e9 pendant mon temps libre. Il y a eu des obstacles, mais \u00e0 un moment donn\u00e9, je suis arriv\u00e9 \u00e0 un prototype prometteur.<\/p>\n\n

C’\u00e9tait tr\u00e8s excitant pour moi, et je devais partager la nouvelle avec quelqu’un, alors je l’ai montr\u00e9e \u00e0 mon chef d’\u00e9quipe, Juan. Il a imm\u00e9diatement vu le potentiel et m’a dit de continuer \u00e0 travailler sur ce projet jusqu’\u00e0 ce qu’il devienne un prototype fonctionnel, puis nous en ferons la d\u00e9monstration \u00e0 d’autres.<\/p>\n\n

Peu de temps apr\u00e8s, je disposais d’un prototype fonctionnel dot\u00e9 de toutes les fonctionnalit\u00e9s de base, et j’en ai fait la premi\u00e8re d\u00e9monstration \u00e0 l’\u00e9quipe Toolset. Quelques jours plus tard, je l’ai montr\u00e9 \u00e0 l’ensemble de l’\u00e9quipe lors d’une r\u00e9union hebdomadaire sur les outils. J’\u00e9tais persuad\u00e9 que mes coll\u00e8gues programmeurs allaient \u00ab\u00a0comprendre\u00a0\u00bb, mais j’ai \u00e9t\u00e9 agr\u00e9ablement surpris de voir que tous les autres avaient imm\u00e9diatement per\u00e7u le potentiel. J’ai \u00e9galement \u00e9t\u00e9 \u00e9tonn\u00e9 de voir que nos plans pour la toute prochaine version de Toolset ont \u00e9t\u00e9 ajust\u00e9s avec souplesse pour tenir compte de ma perc\u00e9e.<\/p>\n\n

Comment l’avez-vous fait passer du stade de prototype \u00e0 celui de dispositif pleinement op\u00e9rationnel ?<\/h2>\n\n

Comme je l’ai mentionn\u00e9, notre direction (Amir et Juan) a vu le grand potentiel et l’objectif de notre prochaine version a imm\u00e9diatement \u00e9t\u00e9 de le faire fonctionner. Au cours de ce cycle de d\u00e9veloppement, on m’a accord\u00e9 tout le temps dont j’avais besoin pour travailler sur les champs en ligne. Et oui, il y a un long chemin entre un prototype et un produit fini.<\/p>\n\n

Pour vous faire une id\u00e9e du r\u00e9sultat, vous pouvez visionner cette courte vid\u00e9o :<\/p>\n\n