 Bonjour tout le monde, aujourd'hui, WorldCam 2018, on va parler de la puissance de WordPress en backend pour une application React. Donc le titre est déjà assez explicite, mais on va en parler davantage. Juste avant, je veux vraiment que ça soit clair avec tout le monde. Ce n'est pas du code que je vais vous présenter qui va être prêt à la production. Donc le but de ça, c'est vraiment juste d'amener l'idée que React peut facilement s'intégrer avec WordPress, que c'est quelque chose qui est relativement courant. Donc juste de ne pas mettre en production. Je vais vous monter tant tôt à l'heure dans le plugin, c'est même écrit en gros, quand tu te donnes l'autre, pas pour la production. Je vais juste le répéter parce que ça peut vraiment vous engender des problèmes. C'est fait pour s'simuler dans le fond le développement. Fait qu'on va agir un peu plus tard. Un coup qu'on a compris ça, un coup que l'installation est faite, vous allez voir que WordPress, React, SKS de limite, vraiment, c'est deux technologies super puissantes qu'on va découvrir ensemble aujourd'hui. Bon, tout d'abord, le talk d'aujourd'hui ne sera pas bien bien compliqué. Il ne sera pas trop long. Les technologies que je vais utiliser, je vais vous présenter ça. Je ne sais pas si ici il y a beaucoup de développeurs dans la salle ou si vous êtes plus des blogueurs. Donc je vais présenter brièvement les technologies parce que si vous ne comprenez pas c'est quoi, vous n'allez probablement pas suivre le reste. Ensuite, dans le vif du sujet, React et WordPress, ensemble, qu'est-ce ça donne? Je l'ai préparé des petits bouts de code. J'ai séparé ça en phase que j'ai mis sur guide, que vous allez pouvoir aller chercher directement si ça vous intéresse. Afin qu'on fasse une petite conclusion ensemble, à savoir si il récap de ce qu'on a vu, est-ce que ça peut emmener à d'autres idées, ce qu'on peut pousser ça plus loin. Donc je travaille pour Intek Plus. C'est moi le fondateur de cette compagnie-là. J'ai aussi une super belle équipe. On est assez jeune, jeune PME, autant dans le sens de nos ressources, autant que dans le sens que de l'accompagner. Ça fait environ trois ans qu'on est officiellement launché. Jeun équipe, donc entre la vingtaine et la trentaine, on est une belle famille, je pense. On est très soudés ensemble. C'est d'ailleurs ça qu'on essaie de reproduire avec la clientèle. Nous autres, une approche humaine franche avec des gens compétents et accessibles. Je n'ai pas plus parlé de l'accompagner ça. Le but, ce n'est pas de me vendre. C'est juste que le projet est issu d'une idée qui est partie de moi. Ensuite, j'ai eu Alex Monfrontaine qui est venu à Skinning. J'ai parlé avec Etienne. On a racheté les petites couches là-dessus. C'est vraiment une équipe ensemble qui a monté ce petit truc-là, ce petit projet-là. Notre spécialité, une autre, piscation mobile, piscation web, évidemment, c'est WordPress. Donc si on met tout ça ensemble, ça fait du WordPress avec du React. Bon, rentrons un peu plus dans le vif du filet. Aujourd'hui, les technologies utilisées, on va avoir Gulp, NPN. J'ai fait un petit thème costume qui s'adapte un petit peu mieux à la réalité de React avec WordPress. Et finalement, on va parler bien évidemment de React. Je sais pas, est-ce que vous êtes familiers avec les deux premiers? Gulp, NPN. À main levée, Gulp. Vous avez eu un talk là-dessus aujourd'hui. NPN. NPN, pardon. Ah, pas si mal. Ok, on ne passera pas trop de temps là-dessus. Donc Gulp. Gulp en résumé, c'est un automatisateur de tâches. Donc quand on crée du CSS ou qu'on utilise du SASS pour des projets, ce que ça va faire, c'est que ça va le processer pour nous dans le cas d'un SASS. Dans le cas du CSS, ça va seulement le manifaire. On peut aussi ajouter plein, plein, plein, plein de petits trucs. Donc la optimisation, compression, d'image, on peut utiliser un serveur local. En fait, ça va créer un serveur local qui va être accessible aussi via, par exemple, votre téléphone qui se trouve dans le même réseau. Plein de petits gadgets, le phone comme ça. Bien entendu, vous n'êtes pas obligés de tout les pluggés, ces gadgets-là. C'est vous qui décidez comment ça fonctionne. Souvenez, on peut visualiser un peu celui du projet, il y a de l'heure de quoi. Je peux se voiler bien. Donc ici, ce qu'on peut voir, c'est que Gulp.task a eu un homme le nom de la tâche. Donc ça va exécuter ce bout de code-là, qui est évidemment par rapport au style, comme le nom l'indique. Fait que je vais piper toutes sortes de plugins que je vais avoir préalablement requis. Fait que ça va exécuter plusieurs tâches, comme par exemple ici, ça va aller chercher toutes mes fichiers SASS, ça va les transformer en CSS, ça va limer les files et les complier en un seul fichier qui va être optimisé. Tout ça ici, c'est une liste de tâches. Donc j'ai des styles juste pour Internet Explorer, donc ça va être ici, ça va être processé. J'ai du style seulement pour l'admin WordPress, il va le processer ici, même à faire pour les vendors Gs ainsi de suite. Donc je vais tout aller processer dans une liste, dans une série de tâches, les images, les CSS, je vais le scriver de la façon que je veux. Ok? Fait que c'est vraiment le but, c'est d'automatiser. La plupart du temps quand vous prenez des projets, Gulp va être déjà inclus, il va déjà avoir tout ce process celui-là. Vous avez juste à faire Gulp, Start ou Gulp, c'est bingo, il va le faire régler. NPM. Ce qu'il y en a qui savent, c'est quoi? Ce qu'il y en a qui sauraient mettre en mot, c'est quoi NPM? Exact. C'est très fort. On peut en savoir plus qu'est-ce que ça fait? Exact. C'est bien défini. Ce que j'aime faire, c'est faire des petits liens, Node Package Manager, comme je me trouvais, c'est Etienne, ton nom. Etienne a dit Node Package Manager, donc un package chez quoi? C'est toutes les fichiers d'un module. Un module, c'est quoi? Ça peut être une librairie Java script, par exemple. Donc NPM va les gérer. Donc en faisant NPM install bootstrap, ce que ça fait, c'est que ça va aller require pour vous la librairie bootstrap. Dans mon cas ici, je ne l'utilise pas pour gérer mes dépendances de librairie comme ça. Je l'utilise simplement pour installer Gulp. Donc dans mon NPM, j'ai des dépendances, don Gulp et toutes ces petits frères. Donc quand tu fais NPM install, il va tout aller installer Gulp et toutes ces dépendances automatiquement. Je n'aurai pas besoin d'aller installer à la main dans mon système. Ces dépendances-là sont gérées via le package.json. Ou sinon, on peut les installer à la main. Ou sinon, on call dans la force de package.json en faisant le NPM install, qui va aller automatiquement chercher les informations qu'il y a de besoin. On peut aller voir vite vite de quoi a l'heure mon package.json dans le projet. Donc si je peux s'ouvrir tout ici, c'est des dépendances. Donc ce que je vous disais tout à l'heure, c'est principalement du Gulp dans mon cas ici. C'est tout ce que mon Gulp a besoin de fonctionner. Ça aurait été un peu difficile de tout aller inclure ça, sans avoir des dépendances comme ça. Il aurait tous fallu aller chercher un A1, tant que le NPM se charge de les mettre dans le projet pour vous. Le custom team que j'ai fait, en fait je l'ai fait très rapidement aussi. On a commencé à utiliser. Donc il n'est pas parfait, mais je pense que c'est quand même bien. Ce que ça fait en gros, j'ai essayé de faire un simili Mvc pour WordPress. Ce que je vous disais par simili Mvc, c'est que bien entendu dans WordPress, les modèles, ça se trouve avec les custom post-types. Un modèle, c'est les modèles de données. Par exemple, un post, ça en en est un, parce qu'un post, ça le coisse, ça a un titre, ça a du contenu, ça peut potentiellement avoir une image, des catégories de ça. Donc dans mon dossier CPT pour custom post-type, si je viens ajouter un fichier et que je viens serrer le script nécessaire pour acheter un custom post-type, vous n'aurez pas besoin de l'appeler dans fonction.php parce que tout ce qui se met dans custom post-type est automatiquement inclus dans ton WordPress. Même chose ici pour le fichier, le dossier customizations, à toutes les customizations que tu veux faire, tu vas créer un fichier PHP expressément pour ça, puis valer l'appeler automatiquement. Donc ça l'évite un peu de code, ça l'évite un peu aussi d'avoir des requirements un peu partout. Même affaire pour les contrôleurs. Normalement, j'essaie de créer un contrôleur par custom post-type. C'est là qu'on va aller changer les get-fetch-posts, qu'on a de besoin. Sinon, les vues, on reprend un peu le style React, layout containers component, mais la version PHP, c'est-à-dire que dans mon cas ici pour la présentation, React, je ne vais pas l'utiliser en front-end directement. Je vais l'utiliser dans l'administration. Il y aurait potentiellement des fichiers html dans mon PHP à générer, includez-vous, pardon. Parce que l'arboration, c'est fait. React, on va l'installer un peu plus tard, je vais vous en parler. Juste faire la différence entre le front-end, souvent quand on parle avec WordPress, on dit front-end pour parler vraiment du site vitrine. Le dashboard de WordPress en soi est du front-end. C'est une représentation du backend, je suis d'accord, mais la partie dashboard qu'on peut cliquer, ça reste du front-end. Donc oui, dans ce cas-ci, on utilise React en front-end dashboard. Pourquoi j'ai choisi React, premièrement pour sa performance? Est-ce que si vous avez entendu parler de React le moins drame, on parle du virtual DOM. Donc, comment React fonctionne, c'est que non seulement il va avoir le DOM généré à l'écran avec vous, mais il va avoir un DOM virtuel quand on va venir insérer des data différents par les States, il va comparer la différence du DOM virtuel et du DOM réel, puis il va simplement opdéter ce qui est, ce qui a été opdéter dans la façon la plus efficient possible. C'est ce qu'il dit, c'est la façon la plus efficient possible. Bien entendu, c'est un peu trop beau pour être vrai, mais vous pouvez facilement avoir quelque chose de très performant puis gérer le render comme bon vous semble, parce que ce qui devient intéressant dans le fond, surtout pour la génération de liste en fait, des longues listes, par exemple comme un WordPress Table, WP Table, qui se trouve être une liste de costume post-type. Tout le monde sait que j'ai eu WooCommerce installé avec la liste des commandes ou des produits quand ça va avoir 500 systèmes dans cette liste-là. Ça commence à être intense. Ce qui est le fun, c'est que c'est la spécialité du React du rendering comme ça de liste. Donc, on comprend un peu ce que je veux m'en aller avec ça, j'imagine. Aussi React, ça veut aussi dire React Natif. Donc, je suis pas en train de vous dire que parce que vous développez ça en React, vous allez automatiquement avoir un app natif. Ouais, c'est ça. Ben écoutez, merci d'être venu. Ça va être tout pour aujourd'hui. Oui, ça fonctionne. Je peux continuer à vous joser en attendant quand même. Oui, il faut que React Natif, ça veut pas dire que vous faites votre app en React, que ça va être automatiquement transformé en React Natif, puis tout va marcher super bien. La seule affaire que ça vous dit, c'est que bien entendu, c'est la même logique, c'est le même langage, puis utilise la même backend. Donc, si on fait un plus-un, normalement, ton app natif devrait être fait de 50% à 75% si tu utilises React Natif avec React, effectivement. Mais ça veut pas dire que ça l'est fait à 100%. Mais ça te tire quand même de sa puissance parce que tout le côté logique du Javascript va être récupérable aussi dans le React Natif. C'est quand même un gros avantage pour les clients que vous savez qui veulent s'en aller vers ça, d'utiliser du React. Vous allez pouvoir, soit faire un plus gros merge de profils, soit pouvoir faire économiser le client ou tourner une balance entre les deux. Et la dernière, mais je pense que c'est la plus importante, c'est pourquoi j'ai choisi React over beaucoup d'autres frameworks ou les bréries. C'est que ça s'intègre super bien à n'importe quel projet existant. Donc, si vous voyez que le client n'a pas beaucoup de budget, il veut utiliser seulement WooCommerce, tel quel, je ne sais pas, des Costume Post Type X, tel quel, il n'y a pas de problème. Si jamais dans une année ou deux, vous voyez que ça a doublé peut-être. Il n'y a aucun sens. Vous pourriez créer un plugin ou justement, juste intégrer React avec le code. Ça gêne automatiquement. Pas besoin de refaire l'asset au compét. Posez un de repenser le thème au complet. On intègre ça. Merci. Bonsoir, c'est fini. Il paye juste la différence des heures qui a été faite. C'est ça que je trouve super. Sinon WordPress, j'en parlerai pas longtemps. Je pense qu'on connaissait ici WordPress. C'est super puissant. C'est extrêmement flexible. C'est sécuritaire. Je sais que ce n'est pas tout le monde qui est encore avec ça, mais normalement, c'est les plugins que vous utilisez avec WordPress qui ne sont pas sécuritaires et non pas WordPress en souhait. C'est User Friendly. Très connus et très reconnus. Essayez de ne pas faire du WordPress en étant une agence de web. Vous n'allez juste pas travailler. Toutes les clients viennent avec ce mot-là. Création simple et rapide des modèles avec les Costume Pulse Type. Ça revient un peu ce que je disais tantôt. Par exemple, on veut créer une liste des employés. Ça va être super facile de se créer un Costume Pulse type employé avec le nom, numéro, téléphone, courriel, patates-potato. C'est super facile. Ça va se fêter assez bien via le pays. Donc les problèmes que j'ai rencontrés avec WordPress, un peu ce que je disais tantôt, le WP Table, qui est passé User Friendly. Si t'ajoutes trop de colonne ou que trop de rangée, ça devient assez désagréable. L'enterre du chargement des pages administratives, si vous êtes sur un superbon serveur, ça va bien. Si vous êtes sur un serveur un peu plus cheap, ça peut devenir l'eau assez vite. Le stem de filtre aussi souvent est peu implémenté avec WordPress. Ce qui fait qu'avec React, ça peut être le fun aussi d'améliorer les fils du même coup. La solution, je l'ai mis sur un petit Github ici, si vous les suivez en même temps. Github, slash Intek Plus, Worldcam 2018. Comme je disais, tout à l'heure, je vais séparer la démo en phase. Vous allez pouvoir le suivre avec les branches de toutes les phases, donc 1, 2, 3, 4. Donc la phase 1. On va commencer par installer React dans le thème. On voit une queue, les fichiers nécessaires pour que ça fonctionne. Pas très compliqué, mais n'empêche qu'il faut le faire. Donc sur la branche Master, vous avez simplement le thème vierge que j'ai fait. Si vous faites un petit check-out sur la phase 1, tout le monde est à l'aise avec Github. C'est correct, c'est... Ouais, j'avais au biais ce bout-là. Ok, c'est cool, je vais vous montrer du code puis comment la table React agit ça. Salut, t'es not over? Donc on check-out la branche phase. Les étapes c'est quoi? Oui, installation de thème React, installation de React dans le thème, pardon, un queue les fichiers nécessaires. J'ai décidé de appeler mon petit snippet admin custom parce que le but du stock, ça va être ce dont j'ai parlé tout à l'heure, l'EWP Table que je trouve un peu trop lent, un peu pas assez user-friendly. Donc je vais remplacer ça par une React Table pour ceux qui sont habitués avec l'incomponent. Donc directement dans le thème, on crée admin custom en faisant yarn... React, je l'ai noté, pardon, yarn create app, pardon, avec le nom de l'app. Ça va générer un dossier avec le nom que vous allez donner. Fait qu'on peut voir, il a assédé directement à partir du thème. Bien entendu, avant de faire npn... Start, faut faire npn install, le gestionnaire de dépendance que j'avais expliqué tout à l'heure, assurez-vous d'avoir toutes les dépendances. Un coup de tout ça, c'est l'Od, on fait npn start. J'ai triché un peu, je les ai toutes faites dans chaque branche parce que j'ai fait npn install une fois hier, à matin, ça finit. Ça fait que là, j'ai pu continuer le projet, mais je ne voulais pas faire ça dans chaque branche parce que sinon, ce serait encore le lendemain matin. Donc ici, peut-être attention, React nous dit qu'il y a déjà quelque chose sur le port 3000 qui est le port part des fois, ce que vous voulez utiliser un autre port. Si vous faites non, puis vous utilisez deux serveurs sur le même port, je laisse imaginer ce que ça donne. Donc on fait oui. On vérifie que c'est quoi le port, donc dans ce cas-ci, c'est 3002. React est parti dans une finette à port. Pour nous, ce n'est pas très utile. Qu'est-ce qu'on veut faire? On veut l'inclure dans notre projet WordPress. Donc ici, si je me logue, j'étais un peu surpris. Je ne suis pas censé avoir ça ici. Donc React est parti. On est prêt à l'inclure dans notre projet. Ce que j'ai dit tout à l'heure, c'est que quand je faisais des customisations, j'ai metté dans le dossier customisation. Je me suis créé un fichier qui s'appelle React.php. Je vais juste prendre note que le nom du fichier, on s'en fout un peu. C'est vraiment juste pour le dev, parce que de toute façon, tout ce qui va être dans ce dossier-là, dans mon thème, à moi, va être inclus automatiquement. Donc ici, on a le petit script. Qu'est-ce qu'on regarde? Est-ce que je suis en production ou est-ce que je suis en dev? C'est super important parce que ce ne sera pas le même fichier qui va être en queue. Ici, dans notre cas, on est en dev, donc on est sur le 127.0.1. Il y a un petit négation. On va se retrouver dans le else, qui va aller chercher directement localos, le port 3002, static.js, bundle.js, qui est là, un.js que React va générer automatiquement pour fonctionner. Donc avec ça, on est prêts à implémenter React dans l'administration de WordPress. Est-ce que c'est des questions par rapport à cette phase-là? Je vais assis, parce que je sais qu'on a parlé comme beaucoup de NPM, de Git, dans les talks avant. Est-ce qu'il y avait des questions? C'est pas mal compris. On va le voir plus dans la prochaine phase. Dans le fond, c'est de remplacer les WEP tables. Peut-être que c'est peut-être pas commun, comme façon de la payer, mais ça ici, c'est une WEP table. Oui, c'est ça, WEP table. Ça va être remplacé par React pour pouvoir vraiment customiser la table comme tu veux, donc d'aller filtrer l'Ordre Ontario, de vraiment pouvoir aussi mettre le thumbnail directement dans la row. Tu pourrais vouloir refaitcher de tes champs ACF, par exemple, puis les afficher comme toi tu veux, les formater comme tu veux, mettre un lier vers un autre titre, mettre un statut d'une commande Stripe. Tu peux le plug-in que n'importe quel API. Tu sais, tu veux voir comment, à quel endroit ton paquet, j'ai rendu avec l'API de DHL ou de purolator ou n'importe quoi, mais ça il y a des trucs que tu vas pouvoir aller fêter en temps réel dans ce table-là. C'est vraiment, tu poses vraiment ton produit, un step au-dessus, tu sais, c'est un peu seul but. Qu'il y avait d'autres questions pour la phase 1? Ça répondait, oui, on passe à phase 2. Phase 2, donc on va créer un costume pour style, on va implémenter, en fait on va plug-in la React Table directement que je parle depuis tout à l'heure, on va finir par l'avoir et n'oubliez pas de mettre à jour les perme alliés quand vous faites un nouveau costume pour style, vous allez le faire chez, sinon vous allez juste cliquer sur refresh 100 fois en ne comprendant pas pourquoi ça ne fonctionne pas. Donc dans la phase 2, on va aller check out phase 2. Je reviens à mes dossiers. Donc maintenant dans costume pour style, j'ai un costume pour style qui s'appelle item. Comme je disais tout à l'heure pour vous donner de l'inclure, tout ce qui se trouve dans CPT va être inclus automatiquement. J'en profite du même coup pour présenter un outil qui s'appelle Generate WordPress. Je ne sais pas si vous connaissez ça. Je sais qu'il y a des plugins qui sont assez répandus pour générer des costumes pour style comme costume pour style UI je pense. Je l'utilise personnellement presque jamais. En fait, cet outil-là est assez cool parce que ça te permet de générer toutes sortes de trucs, dont des costumes pour style, en ligne, via un petit formulaire. Donc ici, on donne la fonction, on remplit vraiment toutes les chers par un, comment tu vas appeler ton costume pour style, qu'un autre tu veux de nos plurielles, peut-être, ça te guide un peu par rapport à ce qu'il faut faire. Puis après ça, on fait le shop d'été le code, il nous génère automatiquement, on fait un petit copier collé, le costume pour style est créé. Ça l'évite un plugin, ce qui peut être quand même bien. Je ne sais pas si vous êtes fan d'avoir 800 plugins dans votre installation WorldPlus. Personnellement, j'essaie de l'éviter. Donc, ce code-là, dans le fond, qui est généré, vient de tester ça directement. Je vais faire regarder ici, un petit bugfish. Donc, ça l'est bien généré le post-type item. Je ne suis pas sur le bon projet. J'ai fait beaucoup de tests, beaucoup de versions. Donc, ça l'a généré le post-type item, ici, comme on peut voir. C'est pas mal d'utiliser le plugin, je trouve ça légèrement plus efficace. Sinon, pour ce qui est de l'implémentation de la table, j'ai décidé d'utiliser Reactable, qui est une librairie vraiment populaire, super bien documentée sur la net. Vous pouvez aller jeter des coups d'oeil. J'ai pas réinventé la roue par rapport à ça. J'ai vraiment utilisé ce qu'il y avait en ligne, ce que je savais qui était bien, comme je vous disais, bien documenté, puis il y avait beaucoup de contribution. J'ai choisi le seul qu'on ne voyait pas la table dedans. Donc, la table qui va ressembler à ça. Bon, ensuite, n'oubliez pas de mettre à jour les parmalliers. Petit bout aussi important, ce que je disais tout à l'heure, le plugin d'authentification. J'ai l'inclut au dossier, pourquoi? Quand on va aller fait chez, il y a WP Jason, qui est l'appui REST de WordPress. Pour certains appels, il faut s'authentifier, pas pour toutes. Par exemple, pour faire un fet charge sur les posts, pas aux uns de s'authentifier, mais pour faire un fet charge sur les posts avec le statut qui est public ou draft, il faut être authentifié. Ce plugin-là, dans le fond, tout ce qui sert, c'est qu'il rend accessible via un basic authentication WordPress, qui est à peu près la pire façon d'authentifier, mais pour le dev, ça fait en masse la job. Qu'est-ce qu'on fait? C'est pas compliqué. On met un Notarization avec le username et le password, encrypté en base 64 dans le projet. Je vais vous le montrer après ça sur le JavaScript, inquiétez-vous pas. Puis, on va être authentifié directement, les calls vont passer. Donc, pour revenir à nous moutons, dans notre projet RUAC, si on a regardé ça, on est déjà à 10 minutes. Dans le projet RUAC, si on regarde ça, premièrement, j'ai importé Axios, qui est un outil pour faire les fèches, les guides et les posts. J'ai seté la base URL à la mauvaise URL. Je vais changer ça tout de suite après. Le username admin, password admin, très populaire quand qu'on dève, venez pas mettre en prod, s'il vous plaît. Ensuite, le basic, on appelle la fonction ici BTOA, qui va transformer le string en base 64. On va le mettre ensuite dans le default header d'Axios sous le nom d'autorisation avec un basic espace, le base 64. C'est une convention, le basic espace. Vous allez voir que ça va changer pour chaque type d'autorisation. Fait que, juste pour oublier d'être changé, ne l'utilisez pas à Bearer ou autre chose, ça ne passera pas. J'en profite pour mettre le bon lien ici. Justement pour parler de l'OPI, étant donné qu'on a un serveur WordPress qui est en ligne, avec une version récente, on va avoir accès au REST API automatiquement. Ça ne va pas très bien être à peine, je m'en excuse. Donc, si j'écris localhost avec WPGson, WP, la version du REST avec le custom post-type, il va automatiquement m'agénérer le JSON avec tous les custom post-type et plusieurs champs qu'on n'aura pas toutes besoins aujourd'hui, mais qui pourraient être utiles. Si vous avez vu le talk d'Etienne qui parle de GraphQL, je ne vais pas traiter ces données-là pour lui aujourd'hui. Par contre, il y a moyen de faire des routes custom un peu pour venir avec la même pensée qui faisait, c'est que si tu n'as pas besoin de toutes ces données-là, tu ne devrais pas les envoyer pour rien. Ça fait juste prendre la bande passante pour rien, ça fait du data à traiter pour rien. On peut faire des routes custom avec WPGson. Je vous encourage à le faire si jamais vous faites un projet production. Oui, ça va être généré ici. Je vais repartir mon gueule parce que sinon mes exemples ne marcheront pas vu que je ne pointe pas sur le bon serveur. En attendant, on va continuer. Bon, mon backend n'a plus de sens avec ce que je tente de faire en avant. Donc, si vous avez remarqué ici, j'ai le costume post-type item, j'ai un autre page item ici. Bien entendu, elle, elle s'est pas générée automatiquement et la différence remarquée bien, c'est dans le lien. Ici, c'est le page qui est égal à item. Ici, c'est le costume post-type qui est égal à un item. Normalement, dans les champs de création de ton costume post-type, tu peux lui dire si tu veux qu'il soit appara ou non. Pour la démo, je le mets appara. Si vous implémentez des tables UI que je vous conseille de ne pas laisser deux pages qui s'appellent item, ça ne serait pas très user friendly. Alors, ça, dans le fond, c'est celui qui est généré automatiquement par Wordpress et celui-là, c'est celle que je génère moi-même via mon code. Pour générer ça, ce n'est pas très, très compliqué. Surtout dans mes customisations. J'ai appelé quelque chose qui s'appelle custom pages. Il y a un S parce qu'en tant de yeux, il y en a un plusieurs. Je vais juste faire un menu page avec le nom du costume post-type qui s'appelle item. Je vais dire quels font que ça appuie pour faire le render. Et c'est le div ID égal à route que pas mal toutes les projets RUAC ont. C'est-à-dire que RUAC va aller chercher le div avec l'ID route pour processer son javascript. Donc, ma fonction javascript fait simplement afficher la RUAC table qu'on a vu tout à l'heure. On va aller à la phase 3 tout de suite parce que là, le temps, il manque. Phase 3. Je passe rapidement, je m'excuse, le temps passe vite. Le but, c'est de créer plusieurs costumes post-type, de générer automatiquement les pages. Donc, ne pas aller ajouter les pages à la main dans le code. Ce que j'ai fait ici, c'est que dès que tu inclus un nouveau costume post-type, le WordPress va les générer une nouvelle page avec RUAC. Automatiquement que tu aies avec la RUAC table, automatiquement dessus aussi. Puis bien sûr, on veut afficher les bonnes données. C'est-à-dire que quand tu es dans la page item, tu veux que ça soit item, puis quand tu es dans la page object, tu veux pas avoir des items, tu veux seulement avoir les costumes post-type object. Rapidement, encore une fois, costume post-type, j'ai ajouté un costume post-type qui s'appelle object, j'ai toujours mon ancien qui s'appelle item. Ensuite de ça, j'ai modifié ma fonction, ma fonction, ma fonction, costume pages, que je connais tout à l'heure, qu'on en allait avoir plusieurs. Donc, ce que je fais, c'est simple, je vais aller demander au WordPress, c'est quoi toutes mes costumes post-type, je vais louper à l'intérieur, je vais faire un almenu page pour chaque costume post-type, j'ai donné le nom du costume post-type, et ensuite, ils ont tous la fonction render qui met le div ID à route pour que RUAC soit capable d'aller chercher un div puis de faire pareil de ces dates. Si je reviens sur mon backend, je fais un petit refresh, donc maintenant que j'ai inclus item et object, vous voyez que ça a été créé automatiquement, je pourrais en ajouter un autre, il serait généré automatiquement avec la RUAC table. Donc présentement, on va aller faire un petit test. Tu vas faire fatiguer que c'est quand tu fais un dévou, parce c'est toujours quand tu fais un test, que ça marchait chez vous, que ça marche plus en don d'avant. Je suis sur le bon URL, ça c'est correct. Je me back à cette heure-là. Je vais juste leur partir parce que j'ai changé l'URL tout à l'heure. Oui, ça dans le fond, c'est mon RUAC qui roule sur 3002. C'est ici, 3000, c'est mon gulp avec mes dossiers WordPress. Je vais aller essayer, mais étant donné que c'est un projet existant, j'ai des petites doutes, mais t'es en mieux si t'as raison, j'aimerais bien ça. Ah, c'est mon authentification qui ne fonctionne pas, j'ai été actué de plugin. Je ne vais pas débug ça, ben ben longtemps, de toute façon ça va être plate, je vais juste enlever, enlever, enlever le link qui bug. Bon, je m'excuse, je ne sais pas pourquoi ça fait ça. La démo va être un petit peu moins cool, parce que là mes filters marcheront plus, mais bref, donc le consume pour sale que je suis allé créer, il est apparu dans ma RUAC, t'es bon. C'est un peu ça qu'on essaie de faire ici. C'est de vraiment automatiser ça pour que vous puissiez le plugin directement dans un projet existant chez un client, puis que vous ayez pas vraiment à refaire le taux du code, puis à tout à repenser votre structure. On ajoute quelques fichiers, quelques lignes bien faits, ça s'exporte en plugin, ça devrait être un plugin même, je pense que Guillaume serait d'accord, mais je l'ai pas fait volontairement justement, parce que le but de ça, c'est pas de créer une solution toute faite, le but c'est juste d'aller un peu d'ici votre imagination pour que vous dîtes, ah ouais, je pourrais le mettre à tel plage, je pourrais le mettre à tel plage, je pourrais le mettre à tel plage. Je sais que si je suis fournu un package déjà tout built-in, tout le monde va juste le plugin, puis ils vont pas aller chercher plus loin. C'est un peu ça le but, je pense qu'il me doit vôtre à ce moment-là. Je vais aller un petit peu, Magan, on va aller dans la phase tout de suite, je ne sais pas, je suis regardant en même temps, c'était cool. Donc oui, je saute beaucoup des tables, je m'excuse, donc on a acheté du CSS, mon ami à l'air s'est fait, donc c'est la même Reactable, il s'est amusé à ce qu'il naît ça, il a fait quoi, vraiment user funny, quelque chose de vraiment beau. C'est toujours notre même poste que tout à l'heure, on a mis. À la différence maintenant, c'est que j'ai ajouté une petite fonction qu'on peut la supprimer, donc en temps réel, on pourrait aussi en ajouter avec le petit formulaire. Je dis là, les filters vont probablement être brisés, mais directement, on pourrait aller écrire l'ID dans le filter, donc il n'y a pas d'ID 20, donc on peut pas le voir, il y a des 13 restes là. Ce qu'il font aussi, c'est qu'on pourrait chercher, par exemple, donne-moi un poste avec le titre, qui est Coca-Cola, mais qui est aussi un thumbnail. Ici, il n'y en a pas, donc ça pourrait être de le trouver. Fait que tu peux vraiment jouer avec tes filters comme ça, puis dans l'optique, par exemple, de WooCommerce avec tous leurs orders, chose, ça peut être assez pertinent d'avoir un drangé pour l'ID comme ça, d'arranger pour les titres, peut-être arranger du vendeur, peut-être arranger de l'acheteur, c'est que là, tu peux vraiment dire, ok, le nom du vendeur commence par tel affaire, puis il me semble que le nom de l'acheteur commence par tel affaire, ou je me souviens que l'ID était en tel et tel numéro, à peu près tel date, c'est que tu peux vraiment filtrer comme tu veux, puis plusieurs choses à la fois, pas juste dire, je veux mes ID en ordre d'ascendance, tu peux vraiment aller jouer avec ça, puis comme je vous le disais tout à l'heure, le ska est de la limite. Donc la joue, on peut se faire directement partie d'ici, normalement quand on fait des mots, comme je vous le disais, ça ne marche pas. Effectivement, mon leg ne marche pas. Ah, oui, c'est mon identification. Vu que mon identification va planter tout à l'heure, c'est pourquoi je ne t'ai pas regardé à aller chercher les Duafts. Je ne t'ai pas regardé d'en créer non plus, donc il faut être authentifié, évidemment, pour créer des consumption post-hype, il faut être authentifié pour aller chercher les Duafts, pour les supprimer. Ça va être un truc que je vais avoir des bonnes, mais c'est très fonctionnel. C'est suffit qu'on trouve le bon, qu'après ça, vous mettez ce code-là sur votre projet, puis tous les consumption post-hype automatiquement vont avoir leur propre état, puis vont être setés selon vous ce que vous voulez. Ça va faire assez cool, ici, avec Ruiac. On gère les routes ici directement. Donc c'est ici que on réussit à aller matcher en fait sur quel post-hype on est présentement. Donc ici, ce que je vais faire, c'est que je vais... Toutes les routes qui commencent par ça, je veux aller chercher mon component de consumption post-hype, puis dans mon component de consumption post-hype... J'ai beaucoup de codes ici, mais pour très peu, finalement. Ça va render, c'est parti-là ici, ce que dans le return, ou ce que je vais avoir à Ruiac Table, ou ce que je vais avoir mon create consumption post-hype, qui était mon form au début. Puis c'est ici que je vais venir gérer les types, en fait, selon... Puis dans cette partie de code-là, tu pourrais dire, le consumption post-hype est tant que je veux que ce soit de telle façon, mais tous les autres, je veux que tu affiches ma table d'une façon XY. Donc tu vas venir pouvoir gérer selon tes consumption post-hype, puis mettre un default, si jamais tu as un default à avoir. Par exemple, c'est sûr que je vous conseille de mettre des trucs assez répandus. Par exemple, ID, title, thumbnails. C'est des trucs que vous savez que probablement toutes vos consumption post-hype vont avoir, ça ne plantera pas. Si vous mettez un default avec des fields custom pour chaque post-hype, c'est évident que ça va planter, parce que si chacun vos consumption post-hype n'ont pas, Ruiac va dire, j'essaie d'accéder à un donné qui ne m'est pas fourni, ça va planter. Votre default, on met ID, title, pay, quitté, date, pas mal ça. Et après ça, venir construire en conséquence de vos besoins. Fait que c'est pas mal ça pour ce qui est de la Ruiac très beau. Je pense que j'ai le temps de montrer un peu du Ruiac. OK. Agresse un minute totale. OK. On va faire les questions si vous voulez. De toute façon, le code est en ligne sur le lien que j'ai montré tout à l'heure. Je peux le remettre pour que vous voyez. Vous allez pouvoir faire le taux du code. N'hésitez pas aussi à nous poser des questions. Moi, mon équipe, on est assez ouvert. Et comme à peu près toutes les présentateurs ont recrut nous autres ici si vous êtes intéressés de faire du Ruiac. Monsieur? Oui. Donc la question c'est, étant un intérateur, j'ai dit que c'était plus rapide que le WVP Table. À quel point Ruiac va pouvoir... À quel point Ruiac va bien réagir avec Tableau Ruiac finalement, c'est ça? Ce qui est le fun avec Tableau Ruiac, c'est que quand on arrive avec vraiment beaucoup de rôles, qu'on parle de 7000, 10000, 20000, 500000. 500000 en gérer front-end, 500000, ça a aucun sens. Au revoir la machine que tu veux, ça a pas de sens. Ce qui est cool, c'est que tu peux demander au serveur de te l'order, par exemple, ou de te filtrer, puis de te le renvoyer. Puis, c'est un méthode-là et bulletin dans Ruiac Table. Donc la documentation est là et c'est super efficace. C'est sûr pour 500 posts et moins le front-end de garde-de-le-gérant en général. Bien là, c'est sûr et la structure, c'est difficile de comparer. Il faudrait vraiment qu'on benchmark ça. Tu sais, comme je vous dis, Ruiac, c'est bon dans l'update du DOM. C'est vraiment ça sa grosse société. Donc, c'est pourquoi les listes... C'est pourquoi les listes sont bon. Après ça, c'est sûr, ça dépend comment vous vous l'implémentez aussi. Tu sais, comme on m'a Ruiac Table aussi, à l'audit de toutes les thumbnails en même temps que le reste. Si tu fais de les signes un peu avec ça, j'imagine que tu peux aller chercher pas mal de performances. Je pense vraiment que ça vaut la peine d'un coup d'œil. Après ça, je ne peux pas savoir en comparaison avec les listes. Je ne sais pas vos questions. Est-ce qu'il y en avait d'autres? Oui. Dans l'objectif en bas-là, pas de parler tout, mais le dernier objectif, j'ai l'impression que c'est ma telle user role pour que je t'invite de gérer ce test. Est-ce qu'il y a une manière de ménager ça avec la gestion des listes? Tu peux aller fêcher les users. Donc nécessairement, tu serais capable d'aller voir c'est quoi ton user role. Après ça, tu impléments ta table selon le user role que tu as. Oui, c'est possible. Effectivement. C'est vraiment simple que ça. Ce qui est le fun, c'est que tes fonctions Wordpress de base restent valides quand même. Par exemple, tu ne voudrais pas qu'il y ait accès à cet appagement particulier pour ne pas éditer cet appagement parce que les costumes post-type. Mais juste avant d'include ton div avec ID Root, si tu regardes si il y a bon le user role, il n'apparaîtra jamais l'ID Root. Donc, JS n'aurait jamais regardé le pognet. Donc, ça ne s'est jamais affiché. C'est ça qui est bien avec ça. Oui, tu peux l'enlever sur ta page-là, effectivement. Mais sinon... En fait, quand j'ai pensé au talk, je voulais plugger directement Wordpress. Parce que, à mon avis, c'est ce que j'entends le plus... En fait, c'est les autres qui ont le plus de problèmes avec la table, parce que, au commun, c'est beaucoup de data dans un petit table et beaucoup du roh. Mais en gros, ici, je vais fâcher toutes mes costumes post-type et que je vais ajouter... C'est toi qui choisis. Tu peux modifier ta fonction comme tu veux et tu présentes, ajoutes toutes les costumes post-type et, en plus, ajoutes-moi une page order. Puis que là, tu viendras gérer directement comme les autres. Finalement, ce qu'on fait avec les autres, c'est que je vais regarder dans ma page et mon part, ça va être order. Fait que je vais aller le router différemment dans mon React. Fait qu'ici... Je vais les fermer un petit moment. Ici, où est-ce qu'elle m'arroute? Présentement, c'est comme on default. Mais je pourrais mettre une route en haut pour aller le router seulement ma page order puis l'afficher seulement de la façon que je veux. Fait que oui, c'est faisable. Puis, en fait, c'est vraiment mon idée part de là. C'est des grosses tables durs à filtrer, beaucoup de rôles. C'est là que React vient de tirer sa puissance facilement. Qu'est-ce qu'il y a, monsieur? C'est un bout, là, ici. C'est ici. Dans le fond, c'est le basic authentication. Je vais passer le username et le password même pas en crypté, je suis en B64. Je n'ai pas récupéré des codes de ça. Je mets ça directement dans le header. Ce n'est pas la meilleure pratique pour le monde. Il y a des façons de faire Pultin dans Wordpress c'est même dans la doc du rest API de le faire soit avec un token ou de faire d'autres sortes d'authentification plus intelligente, plus curteur. Mais ça en preuve, ça fonctionne, c'est juste pas intelligente. C'est comme si tu me dis pour pas oublier mes crédits, je vais le lire dans le footer. Ça fonctionne, mais c'est pas intelligente. Fait qu'elle essaie de pas faire genre le truc-là parce que c'est pas secure parce qu'on essaie de déviter ça. C'est terminé? C'est pas important de faire Maxime? Non? Ok. Je vous remercie. Je vous remercie beaucoup. C'est pas l'article.