D&eacute;couvrez nos contributions issues du hackathon


Ce week-end, nous étions invités par la Commission Européenne à participer à un hackathon de 48 heures&nbsp;axé sur&nbsp;la sécurité, aux côtés de contributeurs et core-members de <a href="https://symfony.com/" target="_blank" rel="noopener">Symfony</a> et <a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a>. Les frameworks&nbsp;<a href="https://twitter.com/symfony" target="_blank" rel="noopener">Symfony</a> et <a href="https://les-tilleuls.coop/fr/blog/article/api-platform-2-4-beta-mongodb-elasticsearch-mercure-symfony-messenger-et-bien-plus" target="_blank" rel="noopener">API&nbsp;Platform</a> se&nbsp;sont imposés depuis quelques années dans l&rsquo;écosystème PHP.&nbsp;La Commission Européenne l&rsquo;a bien compris et souhaite désormais&nbsp;les intégrer dans ses projets. C&rsquo;est dans cette optique que la Direction Générale Informatique de la Commission Européenne (DG&nbsp;DIGIT) a&nbsp;ouvert un programme de bug bounty&nbsp;ainsi qu&rsquo;un&nbsp;hackathon, le tout supporté par le <a href="https://joinup.ec.europa.eu/collection/eu-fossa-2" target="_blank" rel="noopener">EU-FOSSA 2</a>.



Ce hackathon était sur invitation et a&nbsp;regroupé une cinquantaine de développeurs·ses&nbsp;dont les missions principales étaient de discuter de la diversité au sein de l&rsquo;écosystème, corriger les problèmes de sécurité, réduire le nombre de tickets de support ouverts ainsi que le nombre de contributions en attente.



<figure class="wp-block-image"><a href="https://www.flickr.com/photos/bemyapp/albums/72157679752994498/page2" target="_blank" rel="noopener"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/299.jpg" alt="team hackathon" title="team hackathon"/></a></figure>







Lors de ces deux jours, 5&nbsp;points de sécurité ont été patchés. 20&nbsp;pull requests ont été mergées sur le projet <a href="https://github.com/api-platform/api-platform" target="_blank" rel="noopener">API Platform</a>, 10&nbsp;nouvelles PR ont été ouvertes, 87 issues ont été fermées et 4 nouvelles ont été ouvertes. Du côté de Symfony, près de 100 PR ont été mergées, 25 ouvertes, 84 issues ont été fermées et 11 ont été ouvertes. Un énorme travail a&nbsp;été effectué lors de ce week-end ! Si nous devions comparer ça à&nbsp;des journées de travail « classiques »,&nbsp;nous avons abattu en 2 jours l&rsquo;équivalent de&nbsp;2 mois de travail.



<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/297.png" alt="null" title="API p"/></figure>







<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/298.png" alt="null" title="Symfony Hackathon"/></figure>







Une chose a été relevée par les organisateurs lors de ces deux jours :&nbsp;ils avaient rarement vu une équipe&nbsp;aussi investie dans leur travail&nbsp;et dans un projet. J&rsquo;ai le souvenir d&rsquo;un moment de flottement alors que nous venions de passer 2 jours à travailler de manière intense :&nbsp;nous attendions une personne pour démarrer une présentation, et personne ne souhaitait attendre 15 minutes à ne rien faire. Chacun a&nbsp;souhaité retourner sur ce qu&rsquo;il était en train de faire. Si ça n&rsquo;est pas le reflet d&rsquo;une équipe de gens passionnés et investis dans l&rsquo;Open Source, je ne sais pas ce que c&rsquo;est.



<h3>Découvrez nos contributions issues du hackathon</h3>



<ul><li style="text-align: justify;">Depuis maintenant 2 ans, API Platform propose l&rsquo;implémentation de subresources, permettant d&rsquo;imbriquer des relations depuis une ApiResource. Bien qu&rsquo;intéressante et très utilisée aujourd&rsquo;hui, cette fonctionnalité est souvent complexe à prendre en main et&nbsp;limitée. Avec l&rsquo;aide de <a href="https://github.com/vincentchalamon" target="_blank" rel="noopener">Vincent Chalamon</a>, <a href="https://twitter.com/s0yuka" target="_blank" rel="noopener">Antoine Bluchet</a> et&nbsp;<a href="https://github.com/torreytsui" target="_blank" rel="noopener">Torrey Tsui</a>, nous avons effectué&nbsp;des recherches sur l&rsquo;amélioration des <a href="https://github.com/api-platform/core/issues/2706" target="_blank" rel="noopener">subresources</a>, la&nbsp;simplification de son implémentation&nbsp;et la gestion étendue des collections.</li><li style="text-align: justify;">Grâce à <a href="https://github.com/jewome62" target="_blank" rel="noopener">Jérôme Desjardins</a>, il est désormais possible d&rsquo;hydrater des objets existants (<a href="https://github.com/symfony/symfony/pull/30607" target="_blank" rel="noopener">object_to_populate</a>) récursivement avec le <a href="https://symfony.com/doc/current/components/serializer.html" target="_blank" rel="noopener">composant Serializer de Symfony</a>, de normaliser un&nbsp;objet de type <a href="https://github.com/symfony/symfony/pull/30915" target="_blank" rel="noopener">DateTimeZone</a> et également d&rsquo;<a href="https://github.com/symfony/symfony/pull/30956" target="_blank" rel="noopener">instancier un objet dynamique&nbsp;à partir d&rsquo;un tableau de valeur</a>.</li><li style="text-align: justify;"><a href="https://github.com/alanpoulain" target="_blank" rel="noopener">Alan Poulain</a>&nbsp;a pu travailler sur plusieurs sujets comme GraphQL, MongoDB&nbsp;et le système d&rsquo;évènements d&rsquo;API Platform. Du côté&nbsp;de GraphQL, certains aspects de la certification n&rsquo;étaient&nbsp;pas respectés dans leur entièreté. Les <a href="http://github.com/api-platform/core/pull/2705" target="_blank" rel="noopener">input via Messenger</a> n&rsquo;étaient pas testés avec MongoDB et <a href="https://github.com/api-platform/core/pull/2707" target="_blank" rel="noopener">la documentation a été améliorée</a>. Au niveau des événements, API Platform s&rsquo;appuie sur ceux de Symfony, ce qui peut être&nbsp;problématique puisqu&rsquo;il se veut être un framework agnostique. Afin de faciliter le portage vers d&rsquo;autres frameworks tels que Laravel, <a href="https://github.com/api-platform/core/pull/2506" target="_blank" rel="noopener">Alan a travaillé sur le déport vers des événements internes</a> à API Platform. Ce déport se veut progressif, pour déprécier dans un premier temps la dépendance avec Symfony avant de complètement couper les ponts pour la version 3 d&rsquo;API Platform.</li><li><a href="https://twitter.com/Deuchnord" target="_blank" rel="noopener">Jérôme Tanghe</a>,&nbsp;de son côté,&nbsp;s&rsquo;est penché sur le générateur de client afin de lui <a href="https://github.com/api-platform/client-generator/pull/114">apporter de l&rsquo;amour</a>. Un peu de nettoyage sur la documentation et le support de <a href="https://github.com/dunglas/mercure" target="_blank" rel="noopener">Mercure</a> au sein de <a href="https://vuejs.org/" target="_blank" rel="noopener">VueJS</a>&nbsp;lors de la génération ont été ses principales préoccupations lors de ce week-end.</li><li style="text-align: justify;"><a href="https://github.com/jfthuillier" target="_blank" rel="noopener">Jean-François Thuillier</a> a complété la documentation de l&rsquo;admin afin d&rsquo;expliquer comment <a href="https://github.com/api-platform/docs/pull/765" target="_blank" rel="noopener">surcharger certaines fonctions</a>. Il a également pu travailler sur un POC afin d&rsquo;utiliser les « Guessers » de React Admin avec API Platform.</li><li style="text-align: justify;"><a href="https://github.com/antograssiot" target="_blank" rel="noopener">Anthony Grassiot</a> a pu travailler sur la sécurité en&nbsp;<a href="https://github.com/api-platform/core/pull/2710" target="_blank" rel="noopener">verrouillant&nbsp;l&rsquo;accès à une ressource avant qu&rsquo;elle soit manipulée</a>. Il a également amélioré la <a href="https://github.com/api-platform/core/pull/1974" target="_blank" rel="noopener">détermination pour une propriété d&rsquo;être accessible en lecture et en écriture</a>, il a aussi&nbsp;ajouté des tests et avancé&nbsp;sur un sujet complexe qu&rsquo;est le choix d&rsquo;une <a href="https://github.com/api-platform/core/pull/2708" target="_blank" rel="noopener">stratégie de génération des urls</a>.</li><li style="text-align: justify;"><a href="https://twitter.com/toflar" target="_blank" rel="noopener">Yanick Witschi</a>&nbsp;a <a href="https://github.com/api-platform/core/pull/2703" target="_blank" rel="noopener">supprimé de grosses dépendances à l&rsquo;ODM</a>&nbsp;de Doctrine pour les tests, ajouté le support d&rsquo;un <a href="https://github.com/api-platform/core/pull/2698" target="_blank" rel="noopener">paramètre de pagination pour les subresources</a>, et s&rsquo;est penché sur la création d&rsquo;un <a href="https://github.com/api-platform/core/pull/1645" target="_blank" rel="noopener">endpoint pour faire des opérations groupées</a>.</li><li style="text-align: justify;"><a href="https://twitter.com/Nekdev" target="_blank" rel="noopener">Maxime Veber</a> a pu corriger <a href="https://github.com/api-platform/core/pull/2713" target="_blank" rel="noopener">les messages d&rsquo;erreur</a> lors de la récupération de l&rsquo;identifiant d&rsquo;une ressource qui était trop vague, et travaillé sur la <a href="https://github.com/api-platform/core/pull/2713" target="_blank" rel="noopener">résolution de ressource par héritage</a>.</li><li style="text-align: justify;"><a href="http://twitter.com/pborreli" target="_blank" rel="noopener">Pascal Borreli</a>&nbsp;a amélioré&nbsp;les <a href="https://github.com/api-platform/api-platform/pull/1094">charts helms pour le déploiement Kubernetes</a>, corrigé un point de sécurité sur Symfony et a&nbsp;ajouté&nbsp;<a href="http://github.com/symfony/symfony/pull/30984">une option sur les adapter de cache</a> pour mettre en mémoire les mêmes appels lors d&rsquo;une même requête.&nbsp;</li><li style="text-align: justify;"><a href="https://twitter.com/cDaed" target="_blank" rel="noopener">Hamza Amrouche</a>&nbsp;a amélioré la gestion des identifiants et pour ma part, <a href="https://github.com/api-platform/core/pull/2697" target="_blank" rel="noopener">j&rsquo;ai corrigé le fait qu&rsquo;API Platform tente de purger le cache</a> même lorsqu&rsquo;une ressource ne possède pas d&rsquo;opération GET&nbsp;(ce qui provoquait une erreur).</li><li style="text-align: justify;">J&rsquo;ai également pu travailler sur la documentation avec Vincent Chalamon afin de pouvoir&nbsp;<a href="https://github.com/api-platform/website/pull/103" target="_blank" rel="noopener">changer la version de l&rsquo;API</a>&nbsp;depuis l&rsquo;interface ou le format&nbsp;de configuration.&nbsp;</li><li style="text-align: justify;">En plus de fermer le plus d&rsquo;issues possibles,&nbsp;<a href="https://github.com/soyuka" target="_blank" rel="noopener">Antoine Bluchet</a>&nbsp;a accompagné différents contributeurs durant ces deux jours. Il était le contrôleur&nbsp;aérien d&rsquo;API Platform lors de ce week-end.</li></ul>



Retrouvez&nbsp;l&rsquo;intégralité des contributions tous dépôts confondus à l&rsquo;adresse :&nbsp;<a href="https://eufossa.github.io/symfony-hackathon-2019/" target="_blank" rel="noopener">https://eufossa.github.io/symfony-hackathon-2019/</a>.



<h3>Une expérience incomparable</h3>



Ce hackathon fut une véritable aventure humaine. La majorité de l&rsquo;équipe présente venait des quatres coins de l&rsquo;Europe, même des développeurs venus de Russie, du Maroc ou de Cuba&nbsp;étaient là.&nbsp;Nous avons pu rencontrer, pour de vrai, des personnes avec qui nous échangions principalement sur&nbsp;Github ou Twitter. Côté organisation, c&rsquo;était parfait. Tout était pris en charge par la Commission Européenne via la société BeMyApp :&nbsp;le transport, l&rsquo;hébergement, la restauration et&nbsp;le lieu (exceptionnel) du hackathon. Au&nbsp;nom de tous les Tilleuls présents lors de ce week-end, je tiens à remercier toutes les personnes ayant participé à l&rsquo;organisation de cet événement, notamment&nbsp;<a href="http://linkedin.com/in/jfhovinne" target="_blank" rel="noopener">Jean-François Hovinne</a>,&nbsp;à l&rsquo;initiative de cet événement. Merci également à BeMyApp qui était à nos petits soins lors de ces deux jours.



<blockquote class="twitter-tweet" data-lang="fr">The first hackathon of EU-FOSSA 2 project&rsquo;s series of <a href="https://twitter.com/hashtag/FOSSHackathons?src=hash&amp;ref_src=twsrc%5Etfw">#FOSSHackathons</a> is soon over! Thank you <a href="https://twitter.com/symfony?ref_src=twsrc%5Etfw">@symfony</a> <a href="https://twitter.com/EU_DIGIT?ref_src=twsrc%5Etfw">@EU_DIGIT</a> <a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a> <a href="https://twitter.com/coopTilleuls?ref_src=twsrc%5Etfw">@coopTilleuls</a>. Amazing energy and achievements! We&rsquo;ll post a Medium post covering the event next week, stay tuned <a href="https://t.co/R0sZsItp0B">pic.twitter.com/R0sZsItp0B</a>— BeMyApp Belgium (@bemyappBE) <a href="https://twitter.com/bemyappBE/status/1114901233930731525?ref_src=twsrc%5Etfw">7 avril 2019</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



Nous sommes revenus épuisés mais heureux d&rsquo;avoir apporté, encore plus que d&rsquo;habitude, notre pierre à l&rsquo;édifice des projets Open Source&nbsp;aussi prodigieux que Symfony et API Platform. Les logiciels libres sont&nbsp;souvent mal compris puisque&nbsp;régulièrement associés à la notion de gratuité, or&nbsp;beaucoup de gens s&rsquo;y investissent pleinement. Si des personnes sont prêtes à consacrer de leur temps libre à l&rsquo;amélioration de tels outils, les entreprises devraient sans doute y investir beaucoup plus. Toutes sortes de contributions sont possibles : libérer du temps à vos employés, mettre à disposition vos locaux, sponsoriser des événements ou des développements&nbsp;(comme le support d&rsquo;ElasticSearch dans API Platform)&#8230; Amis employeurs, laissez libre cours à votre créativité.&nbsp;Vos développeurs et les outils que vous utilisez au quotidien ont besoin de votre soutien.&nbsp;



Notre équipe serait&nbsp;ravie&nbsp;d&rsquo;organiser un&nbsp;hackathon similaire&nbsp;à Lille, <a href="https://les-tilleuls.coop/fr/blog/article/retour-sur-la-semaine-sylius-lille" target="_blank" rel="noopener">comme nous avions fait en octobre dernier</a>. N&rsquo;hésitez pas à nous contacter !&nbsp;

Retour sur le Hackathon EU-Fossa Symfony / API Platform

Ce week-end, nous étions invités par la Commission Européenne à participer à un hackathon de 48 heures&nbsp;axé sur&nbsp;la sécurité, aux côtés de contributeurs et core-members de Symfony et API Platform. Les frameworks&nbsp;Symfony et API&nbsp;Platform se&nbsp;sont imposés depuis quelques années dans l&rsquo;écosystème PHP.&nbsp;La Commission Européenne l&rsquo;a bien compris et souhaite désormais&nbsp;les intégrer dans ses projets. C&rsquo;est [&hellip;]

Retour sur le Hackathon EU-Fossa Symfony / API Platform | Les-Tilleuls.coop

Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/300.jpg

Accueil

https://secure.gravatar.com/avatar/b473bd9d058c922e08d57f39a4a861db?s=96&d=mm&r=g

Grégoire Hébert

// pages/index.js
import React from 'react';
import withESI from 'react-esi';
import MyFragment from 'components/MyFragment';

const MyFragmentESI = withESI(MyFragment, 'MyFragment');
// Le second paramètre est un ID unique identifiant ce fragment.
// Si vous utilisez différentes instances du même composant, utilisez un ID différent par instance.
const Index = () => (
        &lt;div>
            &lt;h1>React ESI demo app&lt;/h1>
            &lt;MyFragmentESI greeting="Hello!"/>
        &lt;/div>
    )
;

// components/MyFragment.js
import React from 'react';

export default class MyFragment extends React.Component {
    render() {
        return (
            &lt;section>
                &lt;h1>A fragment that can have its own TTL&lt;/h1>
                &lt;div>{this.props.greeting /* accédez aux props comme d’habitude */}&lt;/div>
                &lt;div>{this.props.dataFromAnAPI}&lt;/div>
            &lt;/section>
        );
    }

    static async getInitialProps({props, req, res}) {
        return new Promise(resolve => {
            if (res) {
                // Réglage d’un TTL pour le fragment
                res.set('Cache-Control', 's-maxage=60, max-age=30');
            }      // Simulation d’un délai (appel à un service distant tel qu’une API web)
            setTimeout(
                () =>
                    resolve({
                        ...props, // Ce sont les props venant de index.js, qui ont été transmises via l’URL interne
                        dataFromAnAPI: 'Hello there'
                    }),
                2000
            );
        });
    }
}

// server.js
import express from 'express';
import {path, serveFragment} from 'react-esi/lib/server';

const server = express();
server.use((req, res, next) => {
    // Envoie l’en-tête Surrogate-Control pour annoncer aux proxys le support des ESI (optionnel avec Varnish, suivant votre config)
    res.set('Surrogate-Control', 'content="ESI/1.0"');
    next();
});
server.get(path, (req, res) =>
    // "path" a comme valeur par défaut /_fragment, vous pouvez la changer en réglant la variable d'environnement REACT_ESI_PATH
    serveFragment(
        req,
        res,
        // "fragmentID" est le second paramètre passé au HOC "WithESI", le composant racine utilisé pour ce fragment doit être retourné
        fragmentID => require(`./components/${fragmentID}`).default)
);// ...
// Les autres routes  Express sont ici
server.listen(80);

// server.js
import express from 'express';
import next from 'next';
import {path, serveFragment} from 'react-esi/lib/server';

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler()
app.prepare().then(() => {
    const server = express();
    server.use((req, res, next) => {
        // Envoie l’en-tête Surrogate-Control pour annoncer aux proxys le support des ESI (optionnel avec Varnish)
        res.set('Surrogate-Control', 'content="ESI/1.0"');
        next();
    });
    server.get(path, (req, res) =>
        serveFragment(req, res, fragmentID => require(`./components/${fragmentID}`).default)
    );
    server.get('*', handle); // Routes Next.js  
    server.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://localhost:${port}`);
    });
});

Passage d'attributs &agrave; l'&eacute;l&eacute;ment &lt;esi:include&gt;


{
  esi: {
    attrs: {
      alt: "Texte alternatif",
      onerror: "continue"
    }
  }
}

<a href="https://github.com/dunglas/react-esi" target="_blank" rel="noopener">Retrouvez la version originale de cet article ici</a>.



React ESI est une bibliothèque de cache extrêmement puissante pour les applications <a href="https://reactjs.org/">React</a> et <a href="https://nextjs.org/">Next.js</a>, capable de créer des applications dynamiques aussi rapides que des sites statiques.



React ESI offre un moyen simple d&rsquo;améliorer les performances de votre application en stockant des fragments de pages rendues côté serveur dans des serveurs de cache périphériques (edge cache servers) tels que ceux proposés par Fastly ou Akamai (le logiciel Varnish est également supporté). Cela signifie qu&rsquo;après le premier rendu, des fragments de vos pages seront servis en quelques millisecondes par des serveurs proches de vos utilisateurs finaux ! React ESI est un moyen très efficace d&rsquo;améliorer les performances et le référencement de vos sites web, ainsi que pour réduire considérablement vos coûts d&rsquo;hébergement et la consommation d&rsquo;énergie de ces applications.



Vu qu&rsquo;il repose sur <a href="https://www.w3.org/TR/esi-lang">la spécification W3C ESI</a> (Edge Side Includes), React ESI prend en charge de manière native la plupart des fournisseurs de cache cloud comme <a href="https://blog.cloudflare.com/edge-side-includes-with-cloudflare-workers/">Cloudflare Workers</a>, <a href="https://www.akamai.com/fr/fr/support/esi.jsp">Akamai</a> et <a href="https://docs.fastly.com/guides/performance-tuning/using-edge-side-includes">Fastly</a>. Bien entendu, React ESI supporte également le serveur de cache open source <a href="https://varnish-cache.org/intro/index.html#intro">Varnish</a>, que vous pouvez utiliser gratuitement dans votre propre infrastructure (voici un <a href="https://github.com/zeit/next.js/blob/canary/examples/with-react-esi/docker/varnish/default.vcl">exemple de configuration</a>).



React ESI permet de spécifier un TTL (Time To Live) différent par composant React, puis de générer le code HTML lui correspondant de manière asynchrone à l&rsquo;aide d&rsquo;une URL sécurisée (signée). Le serveur de cache récupère ce fragment de HTML depuis l’application Node puis le stocke. Il assemble finalement ensuite la page finale et l&rsquo;envoie au navigateur. React ESI permet également aux composants d’être rendus par le navigateur côté client, sans nécessiter de configuration spécifique.



<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/294.png" alt="react esi" title="react esi"/></figure>



Exemple : découvrez comment utiliser React ESI avec <a href="https://github.com/zeit/next.js/blob/canary/examples/with-react-esi/">Next.js et Varnish</a>



<h3>Installation </h3>



Utilisez votre gestionnaire de paquets JS préféré pour installer la bibliothèque.



Avec Yarn :





Ou avec NPM :





<h3>Usage</h3>



React ESI fournit un <a href="https://reactjs.org/docs/higher-order-components.html">Higher Order Component</a> qui :



<ul><li style="text-align: justify;">Remplace le composant encapsulé par une balise ESI côté serveur (ne vous inquiétez pas, React ESI fournit également l&rsquo;outillage nécessaire pour générer le fragment correspondant) ;</li><li style="text-align: justify;">Refait le rendu du composant encapsulé côté client et l’alimente avec les props calculées côté serveur (si nécessaire).</li></ul>



React ESI appelle automatiquement une méthode static async nommée getInitialProps() pour renseigner les props initiales du composant. Côté serveur, cette méthode peut accéder à la requête et à la réponse HTTP pour, par exemple, définir l&rsquo;en-tête Cache-Control ou des <a href="https://api-platform.com/docs/core/performance/#enabling-the-built-in-http-cache-invalidation-system">cache tags</a>.



Ces props renvoyées par getInitialProps() seront également injectées dans le code HTML généré par le serveur (dans une balise &lt;script&gt;). Côté client, le composant réutilisera les props provenant du serveur (la méthode ne sera pas appelée une seconde fois). Si la méthode n&rsquo;a pas été appelée côté serveur, elle sera appelée côté client lors du premier montage du composant.



<h3>Le Higher Order Component</h3>





Les props initiales doivent être sérialisables avec JSON.stringify(). Attention à Map, Set et Symbol !



Nb : pour plus de commodité, getInitialProps() a la même signature que la fonction du même nom fournie par Next.js. Cependant, c&rsquo;est une implémentation totalement indépendante et autonome (vous n&rsquo;avez pas besoin de Next.js pour l&rsquo;utiliser).



<h3>Servir les fragments</h3>



React ESI fournit un contrôleur prêt à l’emploi compatible avec <a href="https://expressjs.com/">Express</a> :





Alternativement,&nbsp;voici un exemple complet utilisant un serveur <a href="https://github.com/zeit/next.js/tree/master/examples/custom-server-express">Next.js</a> :





<h3>Fonctionnalités</h3>



<ul><li style="text-align: justify;">Support de Varnish, Cloudflare Workers, Akamai, Fastly et tous les autres systèmes de cache prenant en charge ESI</li><li style="text-align: justify;">Écrit en Typescript </li><li style="text-align: justify;">API similaire à Next.js</li></ul>



<h3>Variables d’environnement</h3>



React ESI peut être configuré à l&rsquo;aide de variables d&rsquo;environnement :



<ul><li>REACT_ESI_SECRET : une clé secrète utilisée pour signer l&rsquo;URL du fragment (il est vivement recommandé de la définir pour éviter les problèmes lors du redémarrage du serveur ou de l&rsquo;utilisation de multiples serveurs)</li><li style="text-align: justify;">REACT_ESI_PATH : le chemin interne utilisé pour générer le fragment, qui ne doit pas être exposé publiquement (par défaut : /_fragment)</li></ul>



<h3>Passage d&rsquo;attributs à l&rsquo;élément &lt;esi:include&gt;</h3>



Pour transmettre des attributs à l&rsquo;élément &lt;esi:include&gt; généré par React ESI, passez une prop au HOC ayant la structure suivante :





<h3>Dépannage</h3>



<ul><li style="text-align: justify;">Le cache n’est jamais utilisé &nbsp;</li></ul>



Par défaut, la plupart des proxys (y compris Varnish) ne servent jamais de réponse à partir du cache si la demande contient un cookie. Si vous testez avec localhost ou un domaine local similaire, effacez tous les cookies préexistants pour cette origine. Si les cookies sont attendus (par exemple : Google Analytics ou des cookies publicitaires), vous devez configurer correctement votre proxy de cache pour les ignorer. Voici <a href="https://www.varnish-software.com/wiki/content/tutorials/varnish/sample_vclTemplate.html#cookie-manipulation">quelques exemples pour Varnish</a>.&nbsp;



<h3>Aller plus loin</h3>



React ESI fonctionne très bien avec les stratégies de cache avancées, notamment :



<ul><li style="text-align: justify;">l&rsquo;invalidation du cache (purge) avec les tags de cache (<a href="https://github.com/varnish/varnish-modules/blob/master/docs/vmod_xkey.rst">Varnish</a> / <a href="https://blog.cloudflare.com/introducing-a-powerful-way-to-purge-cache-on-cloudflare-purge-by-cache-tag/">Cloudflare</a>)</li><li style="text-align: justify;">le préchauffage du cache lorsque les données changent dans la couche de persistance (<a href="https://blog.theodo.fr/2015/11/auto-warm-up-varnish4-cache/">Varnish</a>)</li></ul>



Essayez-les !



<h3>Vue.JS/Nuxt</h3>



Nous aimons tout autant Vue et Nuxt que React et Next. Nous portons donc actuellement React ESI vers cette plate-forme. <a href="https://les-tilleuls.coop/fr/contact" target="_blank" rel="noopener">Contactez-nous</a> si vous voulez aider !



<h3>Passez le mot !</h3>



Vous aimez React ESI&nbsp;? Rejoignez les 200 personnes lui ayant déjà mis une&nbsp;<a href="https://github.com/dunglas/react-esi" target="_blank" rel="noopener">étoile sur Github</a> et n’hésitez pas à&nbsp;contribuer ! Notre coopérative sera également ravie de vous accompagner dans la mise en place de React ESI dans votre projet&nbsp;🙂

Rendez vos applications React et Next.js plus rapides que la lumière grâce à React ESI

Retrouvez la version originale de cet article ici. React ESI est une bibliothèque de cache extrêmement puissante pour les applications React et Next.js, capable de créer des applications dynamiques aussi rapides que des sites statiques. React ESI offre un moyen simple d&rsquo;améliorer les performances de votre application en stockant des fragments de pages rendues côté [&hellip;]

Rendez vos applications React et Next.js plus rapides que la lumière grâce à React ESI | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/295.jpg

https://secure.gravatar.com/avatar/54fb8ea2a1a36c3b9ef44f25bf976b48?s=96&d=mm&r=g

Cécile Hamerel

OpenAPI v3 et ReDoc

Prise en charge am&eacute;lior&eacute;e du DTO

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;
use AppDtoBookInput;
use AppDtoBookOutput;

/**
 * @ApiResource(
 *   inputClass=BookInput::class,
 *   outputClass=BookOutput::class
 * )
 */
final class Book
{
    // ...
}

Cache HTTP headers

&lt;?php

use ApiPlatformCoreAnnotationApiResource;

/**
 * @ApiResource(cacheHeaders={"max_age"=60, "shared_max_age"=120})
 */
class Book
{
    // ...
}

Support de MongoDB

Sunset HTTP header

&lt;?php

namespace AppEntity;
/**
 * @ApiResource(itemOperations={
 *     "get"={
 *         "deprecation_reason"="Retrieve a Book instead",
 *         "sunset"="01/01/2020"
 *     }
 * })
 */
class Parchment
{
    // ...
}

G&eacute;n&eacute;rateur de client am&eacute;lior&eacute;

Aidez-nous &agrave; promouvoir API Platform !

&lt;?php

namespace AppDocument;

use ApiPlatformCoreAnnotationApiResource;
use DoctrineODMMongoDBMappingAnnotations as ODM;

/**
 * @ApiResource
 * @ODMDocument
 */
class Book
{
    /**
     * @ODMId(strategy="INCREMENT", type="integer")
     */
    public $id;

    /**
     * @ODMField(type="string")
     */
    public $title;
}

Support de Elasticsearch

&lt;?php

namespace AppModel;
 
use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
use ApiPlatformCoreBridgeElasticsearchDataProviderFilterMatchFilter;
 
/**
 * @ApiResource
 */
class Tweet
{
    /**
     * @ApiProperty(identifier=true)
     *
     * @var string
     */
    public $id;
 
    /**
     * @var User
     */
    public $author;
 
    /**
     * @var DateTimeInterface
     */
    public $date;
 
    /**
     * @ApiFilter(MatchFilter::class)
     *
     * @var string
     */
    public $message;
}

Mise &agrave; jour en temps r&eacute;el du client avec Mercure

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;

/**
 * @ApiResource(mercure=true)
 */
class Book
{
    // ...
}

CQRS et traitement des messages asynchrones avec Symfony Messenger

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;
use SymfonyComponentValidatorConstraints as Assert;

/**
 * @ApiResource(
 *     messenger=true,
 *     collectionOperations={
 *         "post"={"status"=202}
 *     },
 *     itemOperations={},
 *     outputClass=false
 * )
 */
class ResetPasswordRequest
{
    /**
     * @var string
     *
     * @AssertNotBlank
     */
    public $username;
}

&lt;?php

namespace AppHandler;

use AppEntityResetPasswordRequest;
use SymfonyComponentMessengerHandlerMessageHandlerInterface;

class ResetPasswordRequestHandler implements MessageHandlerInterface
{
    public function __invoke(ResetPasswordRequest $forgotPassword)
    {
        // do something with the resource
    }
}

Serveur Push

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiResource;

/**
 * @ApiResource
 */
class Book
{
    /**
     * @ApiProperty(push=true)
     *
     * @var Author
     */
    public $author;
}

D&eacute;tection de filtres dans API Platform Admin

import React from 'react';
import {HydraAdmin} from '@api-platform/admin';

export default () => &lt;HydraAdmin entrypoint="https://api.example.com"/>;

API Platform 2.4 beta : MongoDB, Elasticsearch, Mercure, Symfony Messenger et bien plus !

Retrouvez la version originale de cet article ici Notre coopérative est fière de vous annoncer la sortie de la beta d’API Platform 2.4, enrichie d&rsquo;un large éventail de nouvelles fonctionnalités ! Pour rappel, API Platform est un framework “full-stack” permettant de développer en un tour de main des projets basés sur des API. API Platform [&hellip;]

API Platform 2.4 beta : MongoDB, Elasticsearch, Mercure, Symfony Messenger et bien plus ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/291.jpg

Hello tout le monde ! Je suis <a href="https://twitter.com/Pandora_angora" target="_blank" rel="noopener">Caroline</a>, développeuse back-end fraîchement arrivée chez Les-Tilleuls.coop ! Aujourd&rsquo;hui, c&rsquo;était ma première assemblée générale (AG) et la première de l&rsquo;année 2019. Voici mon retour sur cette journée un peu particulière.



<h3>Que faisons-nous lors d&rsquo;une AG ?</h3>



Les-Tilleuls.coop étant une SCOP (<a href="https://les-tilleuls.coop/fr/blog/article/5-idees-recues-sur-notre-cooperative" target="_blank" rel="noopener">rendez-vous ici pour en savoir plus</a>), nous prenons les décisions ensemble&nbsp;de manière démocratique.&nbsp;Chaque salarié&nbsp;peut faire des propositions ou&nbsp;donner son avis sur différents domaines. Une fois par mois, tous les coopérateurs se réunissent au bureau de Lille pour prendre des décisions diverses liées&nbsp;aux&nbsp;nouveautés juridiques, le budget ou le recrutement. Chaque coopérateur possède&nbsp;un vote représentant&nbsp;une voix, c&rsquo;est pas la dictature ici.



Le bureau est plus animé que d&rsquo;habitude.&nbsp;On passe d&rsquo;une douzaine de personnes à une trentaine en quelques minutes. On prend un petit-déjeuner ensemble, on discute puis on se fait un Tetris avec les fauteuils afin que tout le monde&nbsp;puisse rentrer dans la salle de réunion (<a href="https://twitter.com/coopTilleuls/status/1009052552145620992" target="_blank" rel="noopener">vivement nos nouveaux locaux</a>&nbsp;!).



<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/286.jpg" alt="AG" title="AG"/></figure>







Tetris avec les fauteuils.



&nbsp;



L&rsquo;ordre du jour est établi quelques jours auparavant et envoyé à chaque coopérateur qui&nbsp;peut y contribuer directement. Si on a une proposition d&rsquo;outil, une idée, on ne doit pas hésiter à l&rsquo;ajouter et à la présenter à tous lors de l&rsquo;AG. On discute ainsi des différents points, donne son avis et puis on vote à main levée (pour, contre, abstention). &nbsp;



Olivier&nbsp;(notre directeur financier) débute cette première AG de l&rsquo;année par le bilan du chiffre d&rsquo;affaires de l&rsquo;année 2018. Ce fut l&rsquo;occasion de parler de la relation client, les points forts et faibles, d&rsquo;avoir des conseils sur les procédés à améliorer.



Un aspect important dans la vie de notre coopérative&nbsp;concerne le recrutement. Nous discutons des profils des candidats par mail ou sur Slack, nous votons leur embauche ensemble lors de l&rsquo;AG. Pendant une AG,&nbsp;nous pouvons aussi suggérer un candidat puis votons pour décider si nous creusons la piste ou non, et quelle offre nous pouvons lui proposer. Nous faisons aussi le point sur les recrutements en cours et la stratégie marketing à adopter pour les recrutements futurs (<a href="http://les-tilleuls.coop/fr/jobs" target="_blank" rel="noopener">nous recrutons</a>, viendez ! &lt;3 ).



On présente ensuite les différents prospects, les&nbsp;demandes actuelles du client, quels sont ses besoins et on planifie quel coopérateur sera disponible et le plus adapté pour chaque&nbsp;mission. On vote ensuite toutes les autres propositions concernant la vie de la scop, comme le budget pour un événement ou la mise en place d&rsquo;une nouvelle réforme.



Il est 12h30, nous&nbsp;terminons&nbsp;l&rsquo;AG sur la présentation des différents ateliers prévus l&rsquo;après-midi. Nous en profitons pour&nbsp;travailler ensemble sur des projets internes, sur des contributions&nbsp;Open Source ou à&nbsp;nous&nbsp;entraîner pour des&nbsp;conférences.&nbsp;



En fin de journée, un compte rendu de l&rsquo;AG est envoyé à tous et nous fixons&nbsp;une date pour la prochaine AG mensuelle. On célèbre la fin de l&rsquo;AG avec un bon repas dans une brasserie sympa. Un moment convivial à partager&nbsp;avec les coopérateurs des différents bureaux 🙂



<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/287.jpg" alt="TEAM 3B" title="TEAM 3B"/></figure>







Nous mangeons de manière très équilibrée pour survivre au froid.



<h3>Les ateliers</h3>



Plusieurs groupes se sont formés l&rsquo;après-midi&nbsp;pour travailler sur les différents projets internes, des projets Open Source, des préparations de formation ou de meetup à venir. Cet après-midi j&rsquo;ai suivi une formation en visio-conférence sur <a href="https://blackfire.io/" target="_blank" rel="noopener">Blackfire</a> dispensée par&nbsp;Christophe Dujarric.



<blockquote class="twitter-tweet" data-lang="fr">Cet après-midi, c’est formation <a href="https://twitter.com/blackfireio?ref_src=twsrc%5Etfw">@blackfireio</a> avec <a href="https://twitter.com/Chris_Dujarric?ref_src=twsrc%5Etfw">@Chris_Dujarric</a> en attendant le meetup <a href="https://twitter.com/afup_hdf?ref_src=twsrc%5Etfw">@afup_hdf</a> de demain <a href="https://twitter.com/hashtag/Masterclass?src=hash&amp;ref_src=twsrc%5Etfw">#Masterclass</a> <a href="https://t.co/N32J6bTQHp">pic.twitter.com/N32J6bTQHp</a>— Les-Tilleuls.coop (@coopTilleuls) <a href="https://twitter.com/coopTilleuls/status/1087362605465985027?ref_src=twsrc%5Etfw">21 janvier 2019</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



J&rsquo;ai ensuite terminé ma journée sur l&rsquo;atelier rédaction pour le blog. Encore une journée bien remplie au sein de la coopérative. A bientôt !

Une journée chez Les-Tilleuls.coop

Hello tout le monde ! Je suis Caroline, développeuse back-end fraîchement arrivée chez Les-Tilleuls.coop ! Aujourd&rsquo;hui, c&rsquo;était ma première assemblée générale (AG) et la première de l&rsquo;année 2019. Voici mon retour sur cette journée un peu particulière. Que faisons-nous lors d&rsquo;une AG ? Les-Tilleuls.coop étant une SCOP (rendez-vous ici pour en savoir plus), nous prenons [&hellip;]

Une journée chez Les-Tilleuls.coop | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/285.jpg

Impl&eacute;mentation de r&eacute;f&eacute;rence du hub


// The subscriber subscribes to updates for the https://example.com/foo topic
// and to any topic matching https://example.com/books/{name}
const url = new URL('https://hub.example.com/subscribe');
url.searchParams.append('topic', 'https://example.com/books/{id}');
url.searchParams.append('topic', 'https://example.com/users/dunglas');
const eventSource = new EventSource(url);// The callback will be called every time an update is published
eventSource.onmessage = e => console.log(e); // do something with the payload


fetch('https://example.com/books/1') // Has this header `Link: ; rel="mercure"`
    .then(response => {
        // Extract the hub URL from the Link header
        const hubUrl = response.headers.get('Link').match(/&lt;(.*)>.*rel="mercure".*/)[1];
        // Subscribe to updates using the first snippet, do something with response's body...
    });

// Handle a POST, PUT, PATCH or DELETE request or finish an async job...
// and notify the hub
const https = require('https');
const querystring = require('querystring');
const postData = querystring.stringify({
    'topic': 'https://example.com/books/1',
    'data': JSON.stringify({foo: 'updated value'}),
});
const req = https.request({
    hostname: 'hub.example.com',
    port: '443',
    path: '/publish',
    method: 'POST',
    headers: {
        Authorization: 'Bearer ', // the JWT key must be shared between the hub and the server
        'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Length': Buffer.byteLength(postData),
    }
}, /* optional response handler */);
req.write(postData);
req.end();// You'll probably prefer use the request library or the node-fetch polyfill in real projects,
// but any HTTP client, written in any language, will be just fine

Emplois asynchrones

Montage collaboratif

Binaire pr&eacute;-compil&eacute;

Image Docker&nbsp;


docker run 
    -e PUBLISHER_JWT_KEY=myPublisherKey -e SUBSCRIBER_JWT_KEY=mySubcriberKey -e DEMO=1 -e ALLOW_ANONYMOUS=1 
    -p 80:80 
    dunglas/mercure


docker run 
    -e JWT_KEY=myKey -e ACME_HOSTS=example.com 
    -p 80:80 -p 443:443 
    dunglas/mercure

<a href="https://github.com/dunglas/mercure" target="_blank" rel="noopener">Retrouvez la version EN de cet article ici</a>.



Mercure est un protocole permettant de transmettre en temps réel des mises à jour de données vers les navigateurs web (ou autres clients HTTP) de manière fiable, rapide et économe en énergie. Mercure est particulièrement utile pour publier des mises à jour en temps réel des ressources exposées via des API Web (ex : pour être consommées par des applications web et mobiles réactives). Le protocole a été publié en tant qu’<a href="https://datatracker.ietf.org/doc/draft-dunglas-mercure/" target="_blank" rel="noopener">Internet Draft</a>, et est maintenu <a href="https://github.com/dunglas/mercure/blob/master/spec/mercure.md" target="_blank" rel="noopener">dans ce dépôt GitHub</a>.



Une implémentation de référence du hub Mercure (le serveur) est également disponible <a href="https://github.com/dunglas/mercure" target="_blank" rel="noopener">sur ce dépôt</a>. Cette implémentation écrite en <a href="https://golang.org/" target="_blank" rel="noopener">Go</a> est publiée sous licence libre (AGPL). Une bibliothèque Go (qui peut être utilisée dans n&rsquo;importe quelle application écrite en ce langage, qui n’a alors plus besoin de Hub) ainsi qu’une <a href="https://docs.docker.com/engine/reference/commandline/images/" target="_blank" rel="noopener">image officielle Docker</a> sont également fournies.



<a href="https://demo.mercure.rocks/" target="_blank" rel="noopener">Jetez un oeil à la démo !</a>



En&nbsp;complément à la version Open Source, une version haute disponibilité (hébergée ou on premise) de Mercure est <a href="mailto:dunglas+mercure@gmail.com?subject=I%27m%20interested%20in%20Mercure%27s%20private%20beta">disponible en bêta privée</a>.



<h2>Mercure en quelques mots&nbsp;</h2>



<ul><li style="text-align: justify;">Support natif de navigateurs, pas de bibliothèque ni de SDK requis (basé&nbsp;sur <a href="https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2/" target="_blank" rel="noopener">les “Server-Sent Events</a>”).</li><li style="text-align: justify;">Compatible avec tous les serveurs existants, même ceux qui ne supportent pas les connexions persistantes (architecture serverless, PHP, FastCGI…).</li><li style="text-align: justify;">Support natif de la reconnexion et de la récupération des événements perdus.</li><li>Mécanisme d&rsquo;autorisation basé sur <a href="https://jwt.io/" target="_blank" rel="noopener">JWT</a> (envoi sécurisé d&rsquo;une mise à jour à certains “abonnés” sélectionnés).</li><li>Exploite le <a href="https://developers.google.com/web/fundamentals/performance/http2/#request_and_response_multiplexing" target="_blank" rel="noopener">multiplexage HTTP/2</a>.</li><li>Conçu&nbsp;<a href="https://en.wikipedia.org/wiki/HATEOAS" target="_blank" rel="noopener">pour les API hypermédia</a>, supporte également <a href="https://graphql.org/" target="_blank" rel="noopener">GraphQL</a>.</li><li>Auto-découvrable grâce au <a href="https://tools.ietf.org/html/rfc5988" target="_blank" rel="noopener">web linking</a>.</li><li>Supporte le chiffrement.</li><li>Fonctionne même avec les vieux navigateurs en utilisant un polyfill (IE7+).</li><li>Support du <a href="https://html.spec.whatwg.org/multipage/server-sent-events.html#eventsource-push" target="_blank" rel="noopener">push sans connexion</a> dans des environnements contrôlés (délégation aux protocoles spécifiques des opérateurs mobiles).&nbsp;</li></ul>



<h2>Implémentation de référence du hub</h2>



<ul><li style="text-align: justify;">Rapide, écrit en <a href="https://golang.org/" target="_blank" rel="noopener">Go</a></li><li style="text-align: justify;">Fonctionne partout : binaires statiques et images Docker disponibles</li><li style="text-align: justify;">Support automatique des protocoles HTTP/2 et HTTPS (via Let&rsquo;s Encrypt)</li><li style="text-align: justify;">Cloud Natif, suit la méthodologie <a href="https://12factor.net/" target="_blank" rel="noopener">Twelve-Factor App</a></li><li style="text-align: justify;">Open source (Affero General Public License)&nbsp;</li></ul>



<h2>Exemples</h2>



Exemple d’un client (subscriber), en JavaScript : &nbsp;





L&rsquo;URL du hub peut être découverte (optionnel) :





Pour publier une mise à jour, un serveur d&rsquo;application ou un navigateur web (publisher) a juste à envoyer une requête HTTP POST vers le hub. Voici un exemple utilisant Node.js / <a href="https://serverless.com/">Serverless</a> :





Des exemples dans d’autres langages sont disponibles dans <a href="https://github.com/dunglas/mercure/tree/master/examples" target="_blank" rel="noopener">le répertoire examples</a> du dépôt.



<h2>Cas d’usages</h2>



<h3>Disponibilité en direct</h3>



<ul><li style="text-align: justify;">Une Progressive Web App récupère l&rsquo;état de disponibilité d&rsquo;un produit à partir d&rsquo;une API REST et l&rsquo;affiche : un seul est toujours disponible.</li><li style="text-align: justify;">3 minutes plus tard, le dernier produit est acheté par un autre client.</li><li style="text-align: justify;">La PWA montre instantanément que le produit n’est plus disponible</li></ul>



<h3>Emplois asynchrones </h3>



<ul><li style="text-align: justify;">Une PWA dit au serveur de calculer un rapport. Cette tâche est coûteuse et mettra du temps à se terminer.</li><li style="text-align: justify;">Le serveur délègue le calcul du rapport à un opérateur asynchrone (à l’aide des message queues) et ferme la connexion avec la PWA.</li><li style="text-align: justify;">Le worker envoie le rapport à la PWA lorsque le rapport est calculé</li></ul>



<h3>Montage collaboratif</h3>



<ul><li style="text-align: justify;">Une webapp permet à plusieurs utilisateurs de modifier le même document simultanément.</li><li style="text-align: justify;">Les modifications apportées sont immédiatement diffusées à tous les utilisateurs connectés.&nbsp;</li></ul>



Mercure couvre tout ça !



<h2>Spécification du protocole</h2>



La spécification complète du protocole se trouve dans <a href="https://github.com/dunglas/mercure/blob/master/spec/mercure.md" target="_blank" rel="noopener">spec/mercure.md</a>. Elle est également disponible en tant <a href="https://www.ietf.org/id-info/" target="_blank" rel="noopener">qu’Internet Draft</a> et est conçue pour être publiée en tant que RFC. 



<h2>Implémentation du hub</h2>



<h3>Usage</h3>



<h3>Binaire pré-compilé </h3>



Téléchargez un binaire <a href="https://github.com/dunglas/mercure/releases" target="_blank" rel="noopener">à partir de notre page GitHub</a> exécutez ceci :



<pre class="wp-block-preformatted">JWT_KEY=myJWTKey ADDR=:3000 DEMO=1 ALLOW_ANONYMOUS=1 PUBLISH_ALLOWED_ORIGINS=http://localhost:3000 ./mercure</pre>



Le serveur&nbsp;est désormais disponible sur <a href="http://localhost:3000">http://localhost:3000</a> avec le mode démo activé. ALLOW_ANONYMOUS étant défini sur 1, les abonnés anonymes sont autorisés.&nbsp;Pour l’exécuter en mode production, et générer automatiquement un certificat Let&rsquo;s Encrypt, lancez la commande suivante en root :



<pre class="wp-block-preformatted">PUBLISHER_JWT_KEY=myPublisherKey SUBSCRIBER_JWT_KEY=mySubcriberKey ACME_HOSTS=example.com ./mercure</pre>



La valeur&nbsp;de la variable d&rsquo;environnement ACME_HOSTS doit être mise à jour pour correspondre à votre/vos nom(s) de domaine. Un certificat Let&rsquo;s Encrypt sera généré automatiquement. Si vous omettez cette variable, le serveur sera exposé sur une connexion HTTP (non sécurisée).



Lorsque le serveur est opérationnel, les endpoints suivants sont disponibles :



<ul><li style="text-align: justify;">POST https://example.com/hub: pour publier des mises à jour.</li><li>GET https://example.com/hub: pour s’abonner à des mises à jour.</li></ul>



Consultez <a href="https://github.com/dunglas/mercure/blob/master/spec/mercure.md" target="_blank" rel="noopener">le protocole</a> pour connaître tous les détails. Pour compiler la version de développement et activer la page de démonstration, consultez le fichier <a href="https://github.com/dunglas/mercure/blob/master/CONTRIBUTING.md#hub" target="_blank" rel="noopener">CONTRIBUTING.md</a>. 



<h3>Image Docker&nbsp;</h3>



Une image Docker est disponible sur le Docker Hub. La commande suivante est tout ce qu’il vous faudra pour obtenir un serveur fonctionnel, mode démo activé :





Le serveur, en mode démo, est disponible à : <a href="http://localhost:80">http://localhost</a>. Les “abonnés” anonymes sont autorisés.



En production, exécutez ceci :





Assurez-vous de mettre à jour la valeur de ACME_HOSTS pour qu’elle corresponde à votre/vos nom(s) de domaine.



<h3>Variables d&rsquo;environnement</h3>



<ul><li>ACME_CERT_DIR : le répertoire où stocker les certificats Let&rsquo;s Encrypt</li><li>ACME_HOSTS : une liste d&rsquo;hôtes séparés par des virgules pour lesquels les certificats Let&rsquo;s Encrypt doivent être générés</li><li>ADDR : l’adresse à utiliser (exemple : 127.0.0.1:3000, valeur par défaut :80&nbsp;ou&nbsp;:http ou :https en fonction de si HTTPS est activé ou non)</li><li>ALLOW_ANONYMOUS : mis à 1 pour permettre aux abonnés sans JWT de se connecter</li><li>DB_PATH&nbsp;: le chemin vers la base de données <a href="https://github.com/etcd-io/bbolt" target="_blank" rel="noopener">bbolt</a> (par défaut : updates.db, dans le répertoire courant)</li><li>CERT_FILE : un fichier de certificat (pour utiliser un certificat personnalisé)</li><li>CERT_KEY : une clé de certificat (pour utiliser un certificat personnalisé)</li><li>CORS_ALLOWED_ORIGINS : une liste d’hôtes CORS autorisés, séparés par des virgules</li><li>PUBLISH_ALLOWED_ORIGINS : une liste d’hôtes autorisés à publier des mises à jours (nécessaire uniquement en mode autorisation par cookie, afin de prévenir les attaques de type CSRF)</li><li>DEBUG : définir à 1 pour activer le mode débogage</li><li>DEMO : définir à 1 pour activer le mode démo (activé automatiquement lorsque DEBUG=1)</li><li>LOG_FORMAT : le format des logs à utiliser : JSON, FLUENTD ou TEXT (par défaut)</li><li>PUBLISHER_JWT_KEY : doit contenir la clef secrète pour valider le JWT des publishers</li><li>SUBSCRIBER_JWT_KEY : doit contenir la clef secrète pour valider le JWT des subscribers</li><li>JWT_KEY : raccourci pour régler les variables SUBSCRIBER_JWT_KEY et PUBLISHER_JWT_KEY à la même valeur</li></ul>



Si ACME_HOSTS ou CERT_FILE et CERT_KEY sont fournis, un serveur HTTPS supportant une connexion HTTP/2 sera démarrée. Si ce n’est pas le cas, un serveur HTTP sera démarré (non sécurisé).&nbsp;



<h2>FAQ</h2>



Comment utiliser Mercure avec GraphQL ?



Parce qu’ils sont conçus pour être indépendants du transport utilisé, Mercure est parfaitement adapté aux <a href="https://facebook.github.io/graphql/draft/#sec-Subscription" target="_blank" rel="noopener">abonnements GraphQL</a> (subscriptions). En réponse à la requête d&rsquo;abonnement, le serveur GraphQL peut renvoyer l’URL du sujet Mercure (topic) correspondante. Le client peut ensuite s&rsquo;abonner au flux d&rsquo;événements Mercure correspondant à cet abonnement en créant un nouveau EventSource en lui passant en paramètre une URL comme celle-ci : https://example.com/hub?topic=https://example.com/subscriptions/&lt;subscription-id&gt;



Les mises à jour relatives à cet abonnement peuvent ensuite être envoyées du serveur GraphQL aux clients, via le hub Mercure (dans la propriété data de l&rsquo;événement envoyé par le serveur).



Pour se désabonner, le client a&nbsp;juste à appeler EventSource.close()



Mercure peut être facilement intégré au framework Apollo GraphQL en créant <a href="https://github.com/apollographql/graphql-subscriptions" target="_blank" rel="noopener">un transport dédié</a>. 



Quelle est la différence entre Mercure et Websocket ? &nbsp;



<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">Websocket</a> est un protocole de bas niveau, tandis que Mercure est un protocole de haut niveau. Mercure fournit des fonctionnalités intégrées très pratiques telles que l’autorisation, la reconnexion automatique ou la réconciliation des états, tandis qu&rsquo;avec WebSocket, vous devez les implémenter vous-même.&nbsp;Contrairement à Mercure (qui est construit sur des server-Sent Events), <a href="https://www.infoq.com/articles/websocket-and-http2-coexist" target="_blank" rel="noopener">Websocket n’est pas conçu pour tirer parti de HTTP/2</a>. 



Les connexions HTTP/2 étant multiplexées et bidirectionnelles par défaut (ce qui n&rsquo;était pas le cas de HTTP/1), lorsque vous utilisez Mercure via une connexion h2 (recommandé), votre application peut à la fois recevoir des données (via des Server-Sent Events) et envoyer des données au serveur (avec des requêtes POST) en ré-utilisant la même connexion, donc sans surcoût.



Dans la plupart des cas, Mercure peut être considéré comme solution de remplacement de WebSocket, moderne et plus simple à utiliser.



Quelle est la différence entre Mercure et WebSub ?



<a href="https://www.w3.org/TR/websub/" target="_blank" rel="noopener">WebSub</a> est un protocole serveur à serveur tandis que Mercure est un protocole qui supporte également les connexions serveur à client et client à client. Mercure a été fortement inspiré par WebSub, et nous avons tenté de le rendre aussi proche que possible de ce protocole.



Mercure utilise les server-sent-clients pour distribuer les mises à jour, tandis que WebSub utilise les requêtes POST. De plus, Mercure dispose d&rsquo;un mécanisme d&rsquo;autorisation avancé et permet de souscrire à plusieurs sujets avec une seule connexion utilisant des URL templates.



Quelle est la différence entre Mercure et Web Push ?



<a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">L&rsquo;API Push</a> est <a href="https://developers.google.com/web/fundamentals/push-notifications/">principalement conçue</a> pour envoyer des <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">notifications</a> aux appareils mobiles non connectés à l&rsquo;application. Dans la plupart des implémentations de WebPush, la taille des messages est très limitée. De plus, les messages sont envoyés via les API et les serveurs propriétaires des sociétés créant les navigateurs et les systèmes d&rsquo;exploitation mobiles.



Mercure, quant à lui, est conçu pour envoyer des mises à jour en direct aux périphériques actuellement connectés via un site web ou une app mobile. La taille des messages n’est pas limitée, et le message est directement transmis de vos serveurs vers les clients.&nbsp;En bref, utilisez l&rsquo;API Push pour envoyer des notifications aux utilisateurs hors connexion (qui seront affichées dans les centres de notification de Chrome, d’Android ou iOS) et utilisez Mercure pour recevoir des mises à jour en direct à l’application lorsque l&rsquo;utilisateur l’utilise.



Vous aimez Mercure ? Testez-le, <a href="https://github.com/dunglas/mercure/stargazers">donnez lui une étoile sur GitHub</a>, et n’hésitez pas à y contribuer ! De notre côté, nous avons proposé un&nbsp;client expérimental pour PHP <a href="https://github.com/symfony/symfony/pull/28877" target="_blank" rel="noopener">au projet Symfony</a>. Restez connectés pour en savoir plus !

Mercure, un protocole pour pousser des mises à jour vers des navigateurs et app mobiles en temps réel

Retrouvez la version EN de cet article ici. Mercure est un protocole permettant de transmettre en temps réel des mises à jour de données vers les navigateurs web (ou autres clients HTTP) de manière fiable, rapide et économe en énergie. Mercure est particulièrement utile pour publier des mises à jour en temps réel des ressources [&hellip;]

Mercure, un protocole pour pousser des mises à jour vers des navigateurs et app mobiles en temps réel | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/276.png

Formation interne chez Les-Tilleuls.coop


Workshop gratuit &agrave; Euratechnologies


Hacktoberfest Sylius x Symfony x API Platform&nbsp;


Il y a quelques jours, nous avons eu la chance d&rsquo;accueillir <a href="https://twitter.com/lukaszchrusciel" target="_blank" rel="noopener">Łukasz Chruściel</a>, membre de la core-team <a href="http://sylius.com" target="_blank" rel="noopener">Sylius</a>, dans le cadre d’une semaine unique où de multiples événements consacrés à ce framework e-commerce se sont succédés pendant 5 jours à Lille. Faisons le point sur cette semaine intense qui vient de s&rsquo;écouler !



<h3>Formation interne chez Les-Tilleuls.coop</h3>



Pendant deux jours, six de nos coopérateurs ont reçu&nbsp;<a href="https://sylius.com/training/" target="_blank" rel="noopener">une initiation à Sylius</a> dispensée par Łukasz. Cette formation leur a permis de découvrir les principes fondamentaux de ce framework basé sur <a href="https://symfony.com/" target="_blank" rel="noopener">Symfony</a>. À travers cette séance, ils ont eu un aperçu des divers modules de cet outil et ont pu apprendre à surcharger certaines de ses fonctionnalités en plongeant dans son architecture et son code. Cette expérience plus qu&rsquo;enrichissante leur a donné toutes les clefs pour qu&rsquo;ils puissent se servir de ce framework et adapter au mieux&nbsp;la solution au besoin&nbsp;! &nbsp;



<figure class="wp-block-image"><a href="https://twitter.com/coopTilleuls/status/1047517970258448385" target="_blank" rel="noopener"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/273.jpg" alt="training Sylius" title="training Sylius"/></a></figure>







<h3>Meetup de l&rsquo;AFUP Hauts de France</h3>



Le 2 octobre, plus de 80 personnes se sont rendues à l&rsquo;espace audiovisuel&nbsp;<a href="http://lhybride.org/" target="_blank" rel="noopener">L&rsquo;Hybride</a> afin d&rsquo;assister au meetup de rentrée de&nbsp;<a href="https://twitter.com/afup_hdf" target="_blank" rel="noopener">l&rsquo;AFUP Hauts de France</a>. Toutes les places de cet événement sont parties en moins de 30 minutes, encore un nouveau record ! Entre deux pauses houblonnées, et&nbsp;<a href="https://www.youtube.com/watch?v=Lud5H_kMtW4" target="_blank" rel="noopener">suite à l&rsquo;excellente présentation de Luc Vieillescazes</a>, Łukasz a présenté le plug-in <a href="https://github.com/Sylius/SyliusShopApiPlugin" target="_blank" rel="noopener">ShopApiPlugin</a> ainsi que le pattern Command devant une salle comble.



<blockquote class="twitter-tweet" data-lang="fr">AFUP Meet-up: <a href="https://twitter.com/lukaszchrusciel?ref_src=twsrc%5Etfw">@lukaszchrusciel</a> from <a href="https://twitter.com/Sylius?ref_src=twsrc%5Etfw">@Sylius</a> talking about the Command pattern &#8211; <a href="https://twitter.com/afup_hdf?ref_src=twsrc%5Etfw">@afup_hdf</a> <a href="https://twitter.com/coopTilleuls?ref_src=twsrc%5Etfw">@coopTilleuls</a> <a href="https://t.co/Zpr9xhYmfi">pic.twitter.com/Zpr9xhYmfi</a>— Beno!t ♫ (@bpolaszek) <a href="https://twitter.com/bpolaszek/status/1047194352148201472?ref_src=twsrc%5Etfw">2 octobre 2018</a></blockquote>



Vous n&rsquo;avez pas pu y assister ? Vous pouvez la visionner sur <a href="https://www.youtube.com/channel/UCkMGtNcB-VeqMlQ9p2JMIKg/videos" target="_blank" rel="noopener">la chaîne&nbsp;Youtube de l&rsquo;antenne</a> !



<iframe loading="lazy" src="https://www.youtube.com/embed/GuyqDKiLlCo?start=2" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>



<h3>R&amp;D avec la core team API Platform</h3>



Le jeudi 4 octobre était axé sur l&rsquo;implémentation du framework&nbsp;<a href="https://api-platform.com" target="_blank" rel="noopener">API Platform</a> avec <a href="http://twitter.com/sylius" target="_blank" rel="noopener">Sylius</a>. À cette occasion,&nbsp;<a href="https://twitter.com/tfidry" target="_blank" rel="noopener">Théo Fidry</a> et&nbsp;<a href="https://twitter.com/s0yuka" target="_blank" rel="noopener">Antoine Bluchet</a>, accompagnés de nos coopérateurs&nbsp;<a href="http://twitter.com/dunglas" target="_blank" rel="noopener">Kévin Dunglas</a>,&nbsp;<a href="https://twitter.com/_alanpoulain" target="_blank" rel="noopener">Alan Poulain</a> et&nbsp;<a href="https://twitter.com/teohhanhui" target="_blank" rel="noopener">Teoh Han Hui</a> se sont rendus à Lille afin de plancher sur ce sujet en compagnie de Łukasz. Sans trop en dévoiler, cette journée fut plus&nbsp;que fructueuse.&nbsp;Attendez-vous à en entendre parler dans quelques semaines #teasing !&nbsp;



<blockquote class="twitter-tweet" data-lang="fr">It looks like the <a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a> x <a href="https://twitter.com/Sylius?ref_src=twsrc%5Etfw">@Sylius</a> workshop has been VERY successful. Stay tuned! <a href="https://t.co/vB6D7eac8z">pic.twitter.com/vB6D7eac8z</a>— Kévin Dunglas (@dunglas) <a href="https://twitter.com/dunglas/status/1047906119849529345?ref_src=twsrc%5Etfw">4 octobre 2018</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



<h3>Workshop gratuit à Euratechnologies</h3>



Découvrir et étendre le framework <a href="https://sylius.com" target="_blank" rel="noopener">Sylius</a> en l&rsquo;espace d&rsquo;une journée ? Un jeu d&rsquo;enfant avec&nbsp;<a href="https://www.meetup.com/fr-FR/Semaine-Sylius-a-Lille/events/254613668/" target="_blank" rel="noopener">le workshop ouvert au public organisé à Euratechnologies</a> ! Une quinzaine de développeurs venus de différentes entreprises ont eu la chance de découvrir cette solution accompagnés par Łukasz qui maîtrisait son sujet. Au programme de cette dense journée : apprentissage du rajout d’une ressource, plongée dans l’admin et dans la machine à état. Les retours des participants sont plus <a href="https://twitter.com/michaelcolpin/status/1048259108380561409" target="_blank" rel="noopener">qu’unanimes</a>, ce fut une journée productive ! &nbsp;&nbsp;



<figure class="wp-block-image"><a href="https://twitter.com/coopTilleuls/status/1048235877540016128" target="_blank" rel="noopener"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/274.png" alt="Workshop" title="Workshop"/></a></figure>







<h3>Hacktoberfest Sylius x Symfony x API Platform&nbsp;</h3>



Cette semaine s’est achevée par un <a href="https://www.meetup.com/fr-FR/Semaine-Sylius-a-Lille/events/254752552/" target="_blank" rel="noopener">hackathon dans nos bureaux le samedi 6 octobre</a>. Plus d’une douzaine de courageux·ses, accueillis par des cookies et viennoiseries, ont creusé leurs méninges durant une journée entière accompagnés par des mainteneurs des frameworks Sylius, API Platform et Symfony.&nbsp;Nous avons hâte de savoir s’ils recevront prochainement leur t-shirt brandé aux couleurs du Hacktoberfest !



<iframe loading="lazy" style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fles.tilleuls.coop%2Fposts%2F2022336987827456&amp;width=500" scrolling="no" width="500" height="707" frameborder="0"></iframe>



Nous sommes fiers d&rsquo;avoir été les premiers à organiser un événement d&rsquo;une telle ampleur consacrée à Sylius en France et nous sommes convaincus que nous renouvellerons cette expérience en compagnie de cette chouette équipe en 2019 !&nbsp;Sylius est un projet open source communautaire disposant&nbsp;d’un réel potentiel pour répondre aux problématiques du e-commerce d’aujourd’hui.&nbsp;C’est sans grande hésitation que <a href="https://twitter.com/Sylius/status/1045202654748700672" target="_blank" rel="noopener">nous avons récemment rejoint leur équipe de partenaires</a> afin de faire briller encore plus cette solution. Un grand merci à toutes les personnes qui ont contribué à faire de cette semaine une grande réussite &lt;3 !

Retour sur la semaine Sylius à Lille

Il y a quelques jours, nous avons eu la chance d&rsquo;accueillir Łukasz Chruściel, membre de la core-team Sylius, dans le cadre d’une semaine unique où de multiples événements consacrés à ce framework e-commerce se sont succédés pendant 5 jours à Lille. Faisons le point sur cette semaine intense qui vient de s&rsquo;écouler ! Formation interne [&hellip;]

Retour sur la semaine Sylius à Lille | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/267.jpg

New property name (press  to stop adding fields):
> newsField type (enter ? to see all types) [string]:
>Field length [255]:
>Can this field be null in the database (nullable) (yes/no) [no]:
>updated: src/Entity/Comment.phpAdd another property? Enter the property name (or press  to stop adding fields):
> bodyField type (enter ? to see all types) [string]:
> textCan this field be null in the database (nullable) (yes/no) [no]:
>updated: src/Entity/Comment.php

/**
- * @ApiResource()
+ * @ApiResource(
+ *     collectionOperations={"post", "get"},
+ *     itemOperations={"get"}
+ * )

+ use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
+ use ApiPlatformCoreBridgeDoctrineOrmFilterSearchFilter;
+ use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
+ use ApiPlatformCoreBridgeDoctrineOrmFilterSearchFilter;

// src/Repository/NewsRepository.php

namespace AppRepository;

class NewsRepository
{
    private const NEWS = [
        'week-601' => [
            'slug' => 'week-601',
            'title' => 'A week of symfony #601 (2-8 July 2018)',
            'body' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
        ],
        'symfony-live-usa-2018' => [
            'slug' => 'symfony-live-usa-2018',
            'title' => 'Join us at SymfonyLive USA 2018!',
            'body' => 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.'
        ],
    ];

    public function findAll(): iterable
    {
        return array_values(self::NEWS);
    }

    public function findOneBySlug(string $slug): ?array
    {
        return self::NEWS[$slug] ?? null;
    }
}

/**
 * @ORMColumn(type="string", length=255)
+ * @AssertChoice(choices={"week-601", "symfony-live-usa-2018"})
 * @ApiFilter(SearchFilter::class)
 */
private $news;/**
 * @ORMColumn(type="text")
+ * @AssertNotBlank()
 */
private $body;

$ composer require encore 
# Si vous n’avez pas encore installé le gestionnaire de paquets Yarn, récupérez le sur https://yarnpkg.com/en/ 
$ yarn install 
$ yarn add --dev vue vue-loader@^14 vue-template-compiler

// webpack.config.js
Encore
    // ...
+   .addEntry('js/comments', './assets/comments/index.js')
+   .enableVueLoader()

&lt;!-- assets/comments/CommentSystem.vue -->
&lt;template>
    &lt;div>
        &lt;ol reversed v-if="comments.length">
            &lt;li v-for="comment in comments" :key="comment['@id']">{{ comment.body }}&lt;/li>
        &lt;/ol>
        &lt;p v-else>No comments yet&lt;/p>        &lt;form id="post-comment" @submit.prevent="onSubmit">
            &lt;textarea name="new-comment" v-model="newComment"
                      placeholder="Your opinion matters! Send us your comment.">&lt;/textarea>            
            &lt;input type="submit" :disabled="!newComment">
        &lt;/form>
    &lt;/div>
&lt;/template>
&lt;script>
    export default {
        props: {
            news: {type: String, required: true}
        },
        methods: {
            fetchComments() {
                fetch(`/api/comments?news=${encodeURIComponent(this.news)}`)
                    .then((response) => response.json())
                    .then((data) => this.comments = data['hydra:member'])
                ;
            },
            onSubmit() {
                fetch('/api/comments', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/ld+json',
                        'Content-Type': 'application/ld+json'
                    },
                    body: JSON.stringify({news: this.news, body: this.newComment})
                })
                    .then(({ok, statusText}) => {
                        if (!ok) {
                            alert(statusText);
                            return;
                        }                        this.newComment = '';
                        this.fetchComments();
                    })
                ;
            }
        },
        data() {
            return {
                comments: [],
                newComment: '',
            };
        },
        created() {
            this.fetchComments();
        }
    }
&lt;/script>

// assets/comments/index.js
import Vue from 'vue';
import CommentSystem from './CommentSystem';
new Vue({
    el: '#comments',
    components: {CommentSystem}
});

{% block body %}
&lt;h1>{{ item.title }}&lt;/h1>{{ item.body }}
+ &lt;div id="comments">
+     &lt;comment-system news="{{ item.slug }}">&lt;/comment-system>
+ &lt;/div>
{% endblock %}
+ {% block javascripts %}
+     &lt;script src="{{ asset('build/js/comments.js') }}">&lt;/script>
+ {% endblock %}

&lt;?php

namespace AppTests;

use SymfonyComponentPantherPantherTestCase;

class CommentsTest extends PantherTestCase
{
    public function testComments()
    {
        $client = static::createPantherClient();
        $crawler = $client->request('GET', '/news/symfony-live-usa-2018');
        $client->waitFor('#post-comment'); // Wait for the form to appear, it may take some time because it's done in JS
        $form = $crawler->filter('#post-comment')->form(['new-comment' => 'Symfony is so cool!']);
        $client->submit($form);
        $client->waitFor('#comments ol'); // Wait for the comments to appear        $this->assertSame(self::$baseUri.'/news/symfony-live-usa-2018', $client->getCurrentURL()); // Assert we're still on the same page
        $this->assertSame('Symfony is so cool!', $crawler->filter('#comments ol li:first-child')->text());
    }
}

Fonctionnalit&eacute;s suppl&eacute;mentaires (Captures d&rsquo;&eacute;cran, Injections JS)


$this->assertSame('Symfony is so cool!', 
$crawler->filter('#comments ol li:first-child')->text());
+ $client->takeScreenshot('screen.png');

Merci, l&rsquo;Open Source

&lt;?php
// src/Controller/NewsController.php

namespace AppController;

use AppRepositoryNewsRepository;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentRoutingAnnotationRoute;
use SymfonyBundleFrameworkBundleControllerController;

class NewsController extends Controller
{
    private $newsRepository;

    public function __construct(NewsRepository $newsRepository)
    {
        $this->newsRepository = $newsRepository;
    }

    /**
     * @Route("/", name="news_index")
     */
    public function index(): Response
    {
        return $this->render('news/index.html.twig', [
            'collection' => $this->newsRepository->findAll(),
        ]);
    }

    /**
     * @Route("/news/{slug}", name="news_item")
     */
    public function item(string $slug): Response
    {
        if (null === $news = $this->newsRepository->findOneBySlug($slug)) {
            throw $this->createNotFoundException();
        }
        return $this->render('news/item.html.twig', ['item' => $news]);
    }
}

{# templates/news/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}News{% endblock %}
{% block body %}
    {% for item in collection %}
        &lt;article id="{{ item.slug }}">
            &lt;h1>&lt;a href="{{ path('news_item', {slug: item.slug}) }}">{{ item.title }}&lt;/a>&lt;/h1>
            {{ item.body }}
        &lt;/article>
    {% endfor %}
{% endblock %}

{% extends 'base.html.twig' %}
{% block title %}{{ item.title }}{% endblock %}
{% block body %}
    &lt;h1>{{ item.title }}&lt;/h1>
    {{ item.body }}
{% endblock %}

&lt;?php
// tests/NewsControllerTest.php

namespace AppTests;

use SymfonyBundleFrameworkBundleTestWebTestCase;

class NewsControllerTest extends WebTestCase
{
    public function testNews()
    {
        $client = static::createClient();
        $crawler = $client->request('GET', '/');
        $this->assertCount(2, $crawler->filter('h1'));
        $this->assertSame(['week-601', 'symfony-live-usa-2018'], $crawler->filter('article')->extract('id'));
        $link = $crawler->selectLink('Join us at SymfonyLive USA 2018!')->link();
        $crawler = $client->click($link);
        $this->assertSame('Join us at SymfonyLive USA 2018!', $crawler->filter('h1')->text());
    }
}

La classe WebTestCase

Utiliser Panther pour ex&eacute;cuter un sc&eacute;nario dans un navigateur

// tests/NewsControllerTest.php

namespace AppTests;

-use SymfonyBundleFrameworkBundleTestWebTestCase;
+use SymfonyComponentPantherPantherTestCase;

-class NewsControllerTest extends WebTestCase
+class NewsControllerTest extends PantherTestCase
{
    public function testNews()
    {
-        $client = static::createClient(); // Still work, if needed
+        $client = static::createPantherClient();

# créez le projet
$ composer create-project symfony/skeleton news-website
$ cd news-website/# ajoutez quelques dépendances
$ composer require twig annotations
$ composer require --dev maker tests# lancez le serveur web PHP intégré
$ php -S 127.0.0.1:8000 -t public

Tester le code HTML g&eacute;n&eacute;r&eacute; par le client


$ ./bin/console make:entity --api-resource Comment

<a href="https://symfony.com/blog/introducing-symfony-panther-a-browser-testing-and-web-scrapping-library-for-php" target="_blank" rel="noopener">Retrouvez la publication d&rsquo;origine [EN] ici</a>.



Depuis sa toute première version, le framework <a href="https://symfony.com/doc/current/testing.html#functional-tests">Symfony 2 fournit une suite d’outils</a> permettant de créer des tests fonctionnels. Les composants BrowserKit et DomCrawler sont notamment utilisés pour simuler un navigateur web avec une API developer-friendly.&nbsp;



<h3>La classe WebTestCase</h3>



Rafraîchissons un peu notre mémoire en créant un petit site d’information, et en écrivant la suite de tests fonctionnels qui va bien :





Nous sommes prêts à coder !&nbsp;Commençons par ajouter une classe pour stocker et récupérer les publications de notre site :





Cette implémentation n’est pas très dynamique mais elle fera l’affaire pour le moment. Maintenant, nous avons besoin d’un contrôleur et du template Twig correspondant pour afficher les dernières informations de notre projet. Utilisons MakerBundle pour les générer :





Changeons un peu le code pour qu’il corresponde à ce que nous voulons :













Grâce à l&rsquo;aide de WebTestCase, ajouter des tests fonctionnels va être très simple ! Générez un squelette de test fonctionnel :



<code class="language-bash">$ ./bin/console make:functional-test NewsControllerTest</code>



Ajoutez des assertions pour vérifier que notre contrôleur fonctionne correctement :





Et maintenant, exécutez les tests :



<code class="language-bash">$ ./bin/phpunit</code>



Tout est parfait ! Symfony fournit une API très pratique pour naviguer sur le site web, vérifier que les liens fonctionnent et s’assurer que le contenu attendu est affiché. C’est facile à configurer et extrêmement rapide !



<h3>Utiliser Panther pour exécuter un scénario dans un navigateur</h3>



WebTestCase n’utilise pas un vrai navigateur web. Il en simule un avec des composants écrits en PHP. Il n’utilise pas non plus le protocole HTTP : il crée des instances d’objets Request de HttpFoundation, les passe au noyau de Symfony et permet d’effectuer des assertions sur l’instance Response de HttpFoundation retournée par l’application.



Maintenant, que faire si un problème empêche le chargement de la page web dans le navigateur ? Les raisons peuvent être nombreuses :



<ul><li>Un lien caché par une règle CSS erronée</li><li>Le comportement par défaut lors de l&rsquo;envoi d&rsquo;un formulaire <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault" target="_blank" rel="noopener">bloqué par un fichier JavaScript buggué</a></li><li>Ou pire, <a href="https://www.chromium.org/developers/design-documents/xss-auditor" target="_blank" rel="noopener">la détection d’une faille de sécurité dans votre code par le navigateur </a></li></ul>



Eh bien Panther vous permet d’exécuter ces scénarios dans de vrais navigateurs ! Il implémente aussi l’API publique des composants BrowserKit et DomCrawler, mais en interne, il utilise la bibliothèque<a href="https://github.com/facebook/php-webdriver" target="_blank" rel="noopener"> PHP WebDriver</a> de Facebook. 



Vous pouvez choisir d&rsquo;exécuter le même scénario de navigation via une implémentation en pur PHP (WebTestCase) ou dans n’importe quel navigateur web moderne, à travers le <a href="https://www.w3.org/TR/webdriver/" target="_blank" rel="noopener">protocole d’automatisation de navigateur WebDriver</a>, devenu une recommandation officielle du W3C en juin dernier. &nbsp;



Encore mieux, pour utiliser Panther, vous n’avez besoin que d’une installation locale de Chrome, et de rien d’autre : pas de serveur Selenium, ni de pilote obscur ou d’extension. Puisque Panther est désormais une dépendance du méta-paquet symfony/test-pack, vous avez déjà installé Panther sans le savoir quand vous avez tapé&nbsp;composer req &#8211;dev tests.&nbsp;Vous pouvez également installer Panther directement dans n’importe quel projet PHP en exécutant composer require symfony/panther.



Modifions quelques lignes de notre scénario de test existant :





Exécutez à nouveau les tests :



<code class="language-bash">$ ./bin/phpunit</code>



Tout fonctionne ! Cette fois-ci, nous sommes assurés que notre site d’information fonctionne correctement sur Google Chrome. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



Sans que vous l’ayez remarqué, Panther a :



<ul><li>Démarré votre projet avec le serveur web intégré sur localhost:9000 &nbsp;</li><li>Démarré la version de <a href="http://chromedriver.chromium.org/" target="_blank" rel="noopener">Chromedriver</a> livrée avec la bibliothèque pour piloter votre version locale de Chrome </li><li>Exécuté le scénario de navigation défini dans le test avec Chrome en mode headless</li></ul>



Si vous êtes du genre à ne croire que ce que vous voyez, saisissez la commande suivante :&nbsp;



<code class="language-bash">$ PANTHER_NO_HEADLESS=1 ./bin/phpunit</code>



<iframe loading="lazy" src="https://www.youtube.com/embed/U7TIVyHaxxY" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>



Comme vous aurez pu le constater dans l’enregistrement, des appels à &nbsp;sleep() ont été ajoutés afin de mettre en évidence le fonctionnement. Avoir accès à la fenêtre du navigateur (et aux outils de développement) est également très utile pour déboguer un scénario défaillant.



Comme les deux outils implémentent la même API, Panther peut également exécuter des scénarios d’extraction de contenus web écrits pour la populaire bibliothèque <a href="https://github.com/FriendsOfPHP/Goutte" target="_blank" rel="noopener">Goutte</a>. Dans des scénarios de tests, Panther vous permet de choisir si le scénario doit être exécuté à l&rsquo;aide du noyau Symfony (quand c’est disponible, static::createClient()), en utilisant Goutte (envoi de réelles requêtes HTTP mais pas de support JavaScript et CSS, static::createGoutteClient()) ou en utilisant de vrais navigateurs web (static::createPantherClient())



Même si Chrome est le choix par défaut, Panther peut contrôler tout navigateur prenant en charge le protocole WebDriver. Il supporte également les services de tests de navigateurs à distance tels que <a href="https://github.com/SeleniumHQ/selenium/wiki/Grid2" target="_blank" rel="noopener">Selenium Grid</a> (open source), <a href="https://saucelabs.com/" target="_blank" rel="noopener">SauceLabs</a> et <a href="https://www.browserstack.com/" target="_blank" rel="noopener">Browserstack</a>. 



Il&nbsp;existe également <a href="https://github.com/symfony/panther/pull/14" target="_blank" rel="noopener">une branche expérimentale</a> qui utilise <a href="https://github.com/mozilla/geckodriver" target="_blank" rel="noopener">Geckodriver</a> pour démarrer et piloter automatiquement une installation locale de Firefox au lieu de Chrome.



<h3>Tester le code HTML généré par le client</h3>



Notre site d’information semble opérationnel, nous venons de prouver qu’il fonctionne dans Chrome. Maintenant, nous voulons recueillir les réactions de la communauté à propos de nos publications. Ajoutons alors un système de commentaires sur notre site Web !



Pour ce faire, nous allons exploiter les fonctionnalités de Symfony 4 et de la plateforme web moderne : nous allons gérer les commentaires via une API Web et nous les afficherons en utilisant les Web Component et <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>. L&rsquo;utilisation de JavaScript pour cette fonctionnalité permet d&rsquo;améliorer les performances globales ainsi que l&rsquo;expérience utilisateur : chaque fois que nous publions un nouveau commentaire, celui-ci sera affiché dans la page existante sans nécessiter un rechargement complet.



Symfony fournit une intégration officielle avec le framework <a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a>, qui permet de créer des API Web modernes (hypermedia et / ou GraphQL) super facilement. Installez-le :&nbsp;





Ensuite, utilisez à nouveau le MakerBundle pour créer une classe d’entité Comment, et exposez-le via un point de terminaison API de lecture et d’écriture :





Cette commande est interactive, et permet de spécifier les champs à créer. Nous en avons uniquement besoin de deux : news (le slug des informations), et body (le contenu des commentaires).&nbsp;news est de type string (longueur maximale de 255 caractères) alors que body est de type text. Les deux ne sont pas nullables.



Voici la transcription complète des interactions avec la commande :





Mettez à jour le fichier .env pour définir la valeur de DATABASE_URL à l’adresse de votre RDBMS et exécutez la commande suivante pour créer la table correspondante à notre entité : &nbsp;





Si vous ouvrez http://localhost:8000/api, vous verrez que l’API fonctionne déjà et est documentée !



Apportons maintenant quelques modifications mineures à la classe Comment que nous venons de générer. Actuellement, l’API permet d’effectuer des opérations GET, POST, PUT et DELETE. C’est trop ouvert. Puisque nous n’avons aucun mécanisme d’authentification pour le moment, nous voulons seulement que nos utilisateurs soient en mesure de créer et lire des commentaires :





Nous voulons également être en mesure de récupérer les commentaires postés sur un article en particulier. Nous utiliserons un <a href="https://api-platform.com/docs/core/filters/#search-filter">filtre</a> permettant de faire cela :





Enfin, ajoutez des contraintes de validation pour être certain·e que les commentaires soumis sont corrects :





Rechargez http://localhost:8000/api, les changements seront automatiquement pris en compte.



La création d&rsquo;une <a href="https://symfony.com/doc/current/validation/custom_constraint.html">contrainte de validation personnalisée</a> au lieu de coder en dur la liste des slugs disponibles dans l&rsquo;assertion de choix est laissé comme exercice au lecteur.



C&rsquo;est tout pour la partie PHP ! Facile, non ? Maintenant, utilisons notre API avec Vue.js ! Nous utiliserons pour cela l’intégration Vue.js fournie par <a href="https://symfony.com/doc/current/frontend.html">Symfony Webpack Encore</a>.



Installez Encore et son intégration Vue.js :





Mettez à jour la configuration de Encore pour activer le loader Vue :





Nous sommes prêts à créer une chouette interface ! Commençons par un composant Vue rendant la liste des commentaires et un formulaire pour en poster un nouveau :





Ce n’était pas si compliqué ! Ensuite, créez le point d’entrée de notre app de commentaires :





Enfin, référencez le fichier JavaScript et initialisez le composant avec le slug courant dans le template item.html.twig.





Compilez le fichier JS transpilé et minifié (en mode développement, vous pouvez également utiliser le&nbsp;<a href="https://symfony.com/doc/current/frontend/encore/dev-server.html" target="_blank" rel="noopener">Hot Module Reloading</a>) :





Wow ! Grâce à Symfony 4, nous avons créé une API web et une webapp Vue.js en seulement quelques lignes de code. Ajoutons désormais quelques tests pour notre système de commentaires !



Attendez un peu… Les commentaires sont récupérés en utilisant Ajax, et rendus côté client en JavaScript. Les nouveaux commentaires sont aussi ajoutés de manière asynchrone en JS. Malheureusement, il ne sera pas possible d’utiliser WebTestCase ni Goutte pour tester notre nouvelle fonctionnalité : ils sont écrits en PHP, et ne supportent ni le JS ni Ajax 🙁



Ne vous inquiétez pas, Panther est capable de tester de telles applications. Rappelez-vous : il utilise un vrai navigateur web ! Testons notre système de commentaires :





Faites attention :&nbsp;en mode test, les variables d’environnement doivent être définies par phpunit.xml.dist. Assurez-vous de mettre à jour DATABASE_URL afin de référencer une base de données avec les tables requises. Quand la base de données est prête, exécutez les tests :





<iframe loading="lazy" src="https://www.youtube.com/embed/j3VJkvWZiy8" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>



Grâce à Panther, vous pouvez tirer parti de vos compétences en Symfony et de l’API BrowserKit pour tester des applications JavaScript modernes.&nbsp;



<h3>Fonctionnalités supplémentaires (Captures d’écran, Injections JS)</h3>



Panther tire parti du fait qu’il utilise de vrais navigateurs web pour fournir des fonctionnalités qui ne sont pas supportées par le composant Browserkit : il est capable de prendre des captures d’écrans, d’attendre l’apparition des éléments et d’exécuter du code JavaScript personnalisé dans le contexte d&rsquo;exécution de la page.



En complément de l’API BrowserKit, Panther implémente l’interface FacebookWebDriverWebDriver donnant accès à <a href="https://github.com/facebook/php-webdriver/wiki">toutes les fonctionnalités de PHP WebDriver</a>.



Essayons : mettez à jour le scénario de test précédent pour prendre une capture d&rsquo;écran de la page rendue.





Panther est également conçu pour fonctionner dans des systèmes d’intégration continue : il supporte Travis, AppVeyor et est compatible avec Docker !&nbsp;



Pour lire la documentation complète, ou laisser une étoile sur le projet, <a href="https://github.com/symfony/panther" target="_blank" rel="noopener">consultez le repo Github</a>. &nbsp;



<h3>Merci, l’Open Source </h3>



Panther est basé sur plusieurs bibliothèques FOSS, et a été inspiré par <a href="http://nightwatchjs.org/" target="_blank" rel="noopener">Nightwatch.js</a>, un outil de tests JS basé sur WebDriver que nous utilisons depuis plusieurs années. <a href="https://les-tilleuls.coop/fr/blog/article/case-study-nightwatchjs-et-les-tests-e2e" target="_blank" rel="noopener">Relisez notre étude de cas sur Nightwatch.Js</a>. 



Pour créer cette bibliothèque, nous avons utilisé plusieurs dépendances, et avons dû corrigé quelques bugs &nbsp;dont elles souffraient :



<ul><li><a href="https://github.com/facebook/php-webdriver/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+author%3Adunglas" target="_blank" rel="noopener">PHP Webdriver</a></li><li><a href="https://github.com/symfony/symfony/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+browserkit+author%3Adunglas" target="_blank" rel="noopener">BrowserKit</a></li><li><a href="https://github.com/symfony/symfony/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+domcrawler+author%3Adunglas" target="_blank" rel="noopener">DomCrawler</a></li><li><a href="https://github.com/FriendsOfPHP/Goutte/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+author%3Adunglas" target="_blank" rel="noopener">Goutte</a></li></ul>



L&rsquo;Open Source est un écosystème vertueux : vous bénéficiez de puissantes bibliothèques existantes pour créer des outils de haut niveau et en même temps vous pouvez les améliorer et les redistribuer.



Nous avons également fait remonter des briques de bas niveau qui ont été conçues lors du développement de Panther au projet &nbsp;PHP WebDriver :



<ul><li style="text-align: justify;"><a href="https://github.com/facebook/php-webdriver/pull/545" target="_blank" rel="noopener">un utilitaire permettant de gérer les cases à cocher et les boutons radio </a>(mergé)</li><li style="text-align: justify;"><a href="https://github.com/facebook/php-webdriver/pull/560" target="_blank" rel="noopener">la prise en charge de la version W3C du protocole WebDriver</a>, qui est l’unique protocole à ce jour supporté par Geckodriver, un outil permettant de piloter un Firefox headless sans Selenium (pas encore mergé)</li></ul>



Ces briques seront d’une grande aide pour l’ensemble de la communauté, y compris pour les alternatives à Panther construites également sur PHP Webdriver (Laravel Dusk, Codeception, &#8230;).



Nous tenons à remercier tous les contributeurs de ces projets, notamment <a href="https://github.com/OndraM" target="_blank" rel="noopener">Ondřej Machulda</a>, le mainteneur actuel de PHP Webdriver, qui a pris le temps de consulter et merger nos patches.



Un grand merci également à <a href="https://github.com/teodesian" target="_blank" rel="noopener">George S. Baugh</a>, qui a ajouté le support du protocole W3C Webdriver à son implémentation <a href="https://github.com/teodesian/Selenium-Remote-Driver" target="_blank" rel="noopener">Perl WebDriver.</a> Lorsque nous l’avons découvert, elle nous a grandement aidés à comprendre comment le nouveau protocole se démarquait du de la version Selenium.



Panther en est encore à ses balbutiements. Vous voulez contribuer au projet, ajouter une nouvelle fonctionnalité, signaler (ou corriger) un bug ? <a href="https://github.com/symfony/panther" target="_blank" rel="noopener">Rendez-vous à cette adresse</a> et n’oubliez pas de lui attribuer une étoile ! &nbsp;

Panther : testez vos apps Symfony avec un vrai navigateur web !

Retrouvez la publication d&rsquo;origine [EN] ici. Depuis sa toute première version, le framework Symfony 2 fournit une suite d’outils permettant de créer des tests fonctionnels. Les composants BrowserKit et DomCrawler sont notamment utilisés pour simuler un navigateur web avec une API developer-friendly.&nbsp; La classe WebTestCase Rafraîchissons un peu notre mémoire en créant un petit site [&hellip;]

Panther : testez vos apps Symfony avec un vrai navigateur web ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/248.jpg

Mardi 2 octobre : Meetup AFUP Hauts de France

Jeudi 4 octobre : Recherche et d&eacute;veloppement avec la core team API Platform

Vendredi 5 octobre : Workshop Sylius gratuit (en anglais) &agrave; Euratechnologies

Samedi 6 octobre : Hacktoberfest chez Les-Tilleuls.coop

Identifier la solution e-commerce la mieux adaptée à son projet peut s’avérer être un choix complexe face à la diversité des outils présents sur le marché. Depuis 2 ans désormais, un outil venu de Pologne s’impose progressivement : <a href="https://sylius.com/" target="_blank" rel="noopener">Sylius</a>.



Sylius est un framework e-commerce Open Source basé sur <a href="https://symfony.com/projects/sylius" target="_blank" rel="noopener">Symfony</a> (projet auquel nous sommes de gros contributeurs). Sous licence MIT, Sylius est simple à prendre en main et dispose d’un code et de tests de grande qualité. Il bénéficie également d’une excellente <a href="https://docs.sylius.com/en/latest/" target="_blank" rel="noopener">documentation</a> appuyée par une communauté active (près de 500 contributeurs sur <a href="https://github.com/Sylius/Sylius" target="_blank" rel="noopener">GitHub</a>, plus de <a href="https://sylius-slackin.herokuapp.com/" target="_blank" rel="noopener">1500 utilisateurs sur Slack</a> et plus de 17 000 commits). &nbsp;



Chez Les-Tilleuls.coop, nous utilisons Sylius sur de plus en plus de projets e-commerce, et participons désormais activement à son développement. À titre d’exemple, notre coopérateur <a href="https://twitter.com/teohhanhui" target="_blank" rel="noopener">Han Hui Teoh</a> a fortement contribué à <a href="https://github.com/Sylius/Sylius-Standard" target="_blank" rel="noopener">la création d’un environnement Docker sur le framework</a> (porté à partir de celui que nous avons créé pour notre framework <a href="https://api-platform.com">API Platform</a>) ou encore à <a href="https://github.com/Sylius/Sylius/pull/9494" target="_blank" rel="noopener">l’intégration du “bundler” JavaScript rollup.js</a> (retrouvez l’intégralité de ses contributions <a href="https://github.com/Sylius/Sylius/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+author%3Ateohhanhui" target="_blank" rel="noopener">ici</a> et <a href="https://github.com/Sylius/Sylius-Standard/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+author%3Ateohhanhui" target="_blank" rel="noopener">là</a>). De son côté, <a href="https://twitter.com/gheb_dev" target="_blank" rel="noopener">Grégoire Hébert</a>, est déjà intervenu lors d’une conférence de l’AFUP Hauts de France afin de présenter la migration d’un projet PrestaShop vers une boutique Sylius. 



Il y a quelques mois, nous avons échangé avec <a href="https://sylius.com/team/" target="_blank" rel="noopener">la core team de Sylius</a> afin de déterminer comment nous pourrions mettre nos forces en commun. Après plusieurs semaines de discussions et de préparation, nous sommes heureux de vous annoncer que Les-Tilleuls.coop devient partenaire professionnel de Sylius et que pour célébrer cet accomplissement, <a href="https://twitter.com/lukaszchrusciel" target="_blank" rel="noopener">Łukasz Chruściel</a> (core developer &amp; team leader du framework), vient nous rendre visite à Lille dans le cadre d’une série d’événements dédiés à cette solution e-commerce. A vos agendas, la première #<a href="https://twitter.com/hashtag/SyliusWeek?src=hash" target="_blank" rel="noopener">SyliusWeek</a> à Lille se déroulera du 2 au 6 octobre !



<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/267.jpg" alt="Sylius à Lille" title="Sylius à Lille"/></figure>







De plus, sur le plan technique, un rapprochement va s’effectuer entre la <a href="https://github.com/orgs/api-platform/people" target="_blank" rel="noopener">Core Team API Platform</a> et celle de Sylius afin d’étudier comment les deux outils pourraient tirer parti l’un de l’autre.&nbsp;



<div class="wp-block-image"><figure class="aligncenter size-medium"><img loading="lazy" width="300" height="249" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/266-300x249.png" alt="Partenaire Sylius" class="wp-image-1280" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/266-300x249.png 300w, https://api.les-tilleuls.coop/wp-content/uploads/2021/08/266-768x638.png 768w, https://api.les-tilleuls.coop/wp-content/uploads/2021/08/266.png 843w" sizes="(max-width: 300px) 100vw, 300px" /></figure></div>



Découvrez les manifestations prévues :



<h3>Mardi 2 octobre : Meetup AFUP Hauts de France</h3>



L&rsquo;antenne Hauts de France de l’AFUP lance <a href="https://www.meetup.com/fr-FR/afup-hauts-de-france-php/events/254678543/" target="_blank" rel="noopener">son meetup</a> de rentrée avec deux invités exceptionnels. <a href="https://twitter.com/lukaszchrusciel" target="_blank" rel="noopener">Łukasz Chruściel</a>, donnera une conférence axée sur le plug-in <a href="https://github.com/Sylius/SyliusShopApiPlugin" target="_blank" rel="noopener">ShopApiPlugin</a>. Il sera secondé par <a href="https://twitter.com/schtroumpf_luc" target="_blank" rel="noopener">Luc Vieillescazes</a>, développeur chez <a href="https://blackfire.io/" target="_blank" rel="noopener">Blackfire.io</a>, qui montrera à travers quelques exemples qu’écrire un parser n’est pas si compliqué que ça.



Toutes les places sont parties en 30 minutes !&nbsp;<a href="https://twitter.com/afup_hdf" target="_blank" rel="noopener">Consultez le compte Twitter de l’antenne</a> afin de ne rien louper de l’actualité PHP dans le Nord ! 



<h3>Jeudi 4 octobre : Recherche et développement avec la core team API Platform</h3>



Une partie de l’équipe qui maintient le framework API Platform va étudier les synergies possibles entre votre framework REST et GraphQL préféré et Sylius.



À l’occasion de cette semaine spéciale, nos coopérateurs <a href="https://twitter.com/_alanpoulain" target="_blank" rel="noopener">Alan Poulain</a>, <a href="https://dunglas.fr/" target="_blank" rel="noopener">Kévin Dunglas</a>, <a href="https://github.com/teohhanhui" target="_blank" rel="noopener">Han Hui Teoh</a>, accompagnés de <a href="https://twitter.com/tfidry" target="_blank" rel="noopener">Théo Fidry</a> et <a href="https://github.com/soyuka" target="_blank" rel="noopener">Antoine Bluchet</a>, respectivement venus de Barcelone et Nantes pour l’occasion, travailleront avec Łukasz Chruściel sur ce chantier. Nous ne manquerons pas de vous tenir informés du déroulement de cette journée via <a href="https://twitter.com/coopTilleuls" target="_blank" rel="noopener">notre compte Twitter</a>. Abonnez-vous y pour ne rien manquer ! 



<h3>Vendredi 5 octobre : Workshop Sylius gratuit (en anglais) à Euratechnologies</h3>



Les-Tilleuls.coop vous invite à participer à un workshop gratuit (en anglais) afin de découvrir et étendre Sylius. Animé par Łukasz Chruściel, cet événement&nbsp;se tiendra à <a href="https://www.euratechnologies.com/" target="_blank" rel="noopener">Euratechnologies</a> le vendredi 05 octobre de 9h à 17h, en salle 2.



Vous êtes un développeur curieux de cette solution ? Ce workshop est fait pour vous : Łukasz vous fera découvrir les fonctionnalités clés de ce framework. À l’issue de cette journée, vous serez en mesure de configurer avec aisance cet outil basé sur Symfony. L&rsquo;inscription est gratuite et les places étant limitées à 15 personnes, nous demandons aux personnes intéressées un engagement ferme et de nous prévenir au plus tôt d’un éventuel désistement. Une liste d’attente sera prévue si les places partent rapidement.



<a href="https://www.meetup.com/fr-FR/Semaine-Sylius-a-Lille/events/254613668/" target="_blank" rel="noopener">Rendez-vous sur meetup pour vous inscrire !</a>&nbsp;



<h3>Samedi 6 octobre : Hacktoberfest chez Les-Tilleuls.coop </h3>



Vous avez toujours rêvé de contribuer à des projets Open Source ? C’est l’occasion rêvée ! Dans le cadre du <a href="https://hacktoberfest.digitalocean.com/" target="_blank" rel="noopener">Hacktoberfest</a>, <a href="https://www.meetup.com/fr-FR/Semaine-Sylius-a-Lille/events/254752552/" target="_blank" rel="noopener">nous organisons un hackday le samedi 6 octobre de 9h à 16h</a> dans nos bureaux de Lomme. Le&nbsp;Hacktoberfest consiste à encourager les développeurs·ses du monde entier, quelque soit leur niveau, à contribuer à des projets Open Source et à soutenir la communauté du libre. Des événements variés sont alors organisés durant tout le mois d’octobre : meetups, soirées, hackathons… En 2017, près de 240 000 Pull Requests avaient été comptabilisées et les contributeurs en ayant au moins soumis 5 étaient récompensés par un t-shirt et autres goodies brandés aux couleurs de l’opération.



La journée sera animée par Kévin Dunglas (core team Symfony et créateur d’API Platform) et Łukasz Chruściel (team leader Sylius). Ils seront accompagnés&nbsp;plusieurs&nbsp;membres de la core team d’API Platform.&nbsp;Notre événement vous permettra d’être accompagné·e pour contribuer à Sylius, API Platform ou encore Symfony. Bien entendu, si vous souhaitez contribuer à tout autre projet, quelque soit le langage utilisé, nous nous ferons également un plaisir d’aider 🙂



Le matin du Hackathon, Kévin présentera en avant première Mercure, un nouveau protocole (et une implémentation en Go) permettant de pousser des mises à jour en temps réel vers les navigateurs et applications mobiles. Bien sur, l’outil s’intègre parfaitement avec API Platform, Sylius et Symfony.



<a href="https://www.meetup.com/fr-FR/Semaine-Sylius-a-Lille/events/254752552/" target="_blank" rel="noopener">Inscrivez-vous à ce hackday !</a>



Ce framework est à nos yeux aujourd’hui l’une des meilleures solutions e-commerce disponibles pour créer des boutiques en ligne. Nous sommes plus que ravis de nous associer à nos amis de chez Sylius, qui ont&nbsp;déjà su prouver à de multiples reprises la qualité et l’innovation que représente cette solution.



Vous vous posez des questions sur quelle solution e-commerce choisir pour votre projet ? Vous souhaitez être accompagné·e ou monter en compétences sur Sylius, Symfony ou bien entendu API Platform ? <a href="https://les-tilleuls.coop/fr/contact">Contactez-nous</a> !

Sylius à Lille : meetup, workshop et bien plus encore !

Identifier la solution e-commerce la mieux adaptée à son projet peut s’avérer être un choix complexe face à la diversité des outils présents sur le marché. Depuis 2 ans désormais, un outil venu de Pologne s’impose progressivement : Sylius. Sylius est un framework e-commerce Open Source basé sur Symfony (projet auquel nous sommes de gros [&hellip;]

Sylius à Lille : meetup, workshop et bien plus encore ! | Les-Tilleuls.coop

Installation

composer req symfony/panther:dev-master
composer req --dev symfony/panther:dev-master 

Utilisation de base

use SymfonyComponentPantherPantherTestCase;

class E2eTest extends PantherTestCase
{
    public function testMyApp()
    {
        $client = static::createPantherClient(); // Your app is automatically started using the built-in web server
        $crawler = $client->request('GET', '/mypage');
        $this->assertContains('My Title', $crawler->filter('title')->text()); // You can use any PHPUnit assertion
    }
}

Utilisation des tests

Un f&eacute;lin polymorphe

use SymfonyComponentPantherPantherTestCase;

class E2eTest extends PantherTestCase
{
    public function testMyApp()
    {
        $symfonyClient = static::createClient(); // A cute kitty: the Symfony's functional test too
        $goutteClient = static::createGoutteClient(); // An agile lynx: Goutte
        $pantherClient = static::createPantherClient(); // A majestic Panther

        // Both Goutte and Panther benefits from the built-in HTTP server

        // enjoy the same API for the 3 felines
        // $*client->request('GET', '...')
        $kernel = static::createKernel(); // You can also access to the app's kernel
        // ...
    }
}

Fonctionnalit&eacute;s

Documentation

Variables d&rsquo;environnement

Int&eacute;gration de Docker

FROM php:latest
RUN apt-get update &amp;&amp; apt-get install -y zlib1g-dev chromium &amp;&amp; docker-php-ext-install zip
ENV PANTHER_NO_SANDBOX 1

Int&eacute;gration&nbsp;de Travis

language: php
addons:
  chrome: stablephp:
  - 7.2script:
  - phpunit

Int&eacute;gration de AppVeyor

build: false
platform: x86
clone_folder:
  c:
    projectsmyprojectcache:
      - '%LOCALAPPDATA%Composerfiles'install:
      - ps: Set-Service wuauserv -StartupType Manual
      - cinst -y php composer googlechrome
      - refreshenv
      - cd c:toolsphp72
      - copy php.ini-production php.ini /Y
      - echo date.timezone="UTC" >> php.ini
      - echo extension_dir=ext >> php.ini
      - echo extension=php_openssl.dll >> php.ini
      - echo extension=php_mbstring.dll >> php.ini
      - echo extension=php_curl.dll >> php.ini
      - echo memory_limit=3G >> php.ini
      - cd %APPVEYOR_BUILD_FOLDER%
      - composer install --no-interaction --no-progresstest_script:
      - cd %APPVEYOR_BUILD_FOLDER%
      - php vendorphpunitphpunitphpunit

<a href="https://github.com/symfony/panther">Retrouvez la publication initiale de cet article (EN) ici.</a>



Présentée dernièrement lors d’un lightning talk au Symfony Live Paris 2018 et lors d’un <a href="https://twitter.com/afup_hdf/status/1004634838320795648" target="_blank" rel="noopener">meetup de l’AFUP Hauts de France</a>, <a href="https://github.com/symfony/panther">Panther</a> est une bibliothèque autonome permettant d’extraire des sites web et d’exécuter des tests fonctionnels de bout en bout (E2E) en utilisant de vrais navigateurs. &nbsp;



<figure class="wp-block-image"><a href="https://github.com/symfony/panther" target="_blank" rel="noopener"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/248.jpg" alt="Panther" title="Panther"/></a></figure>







Panther est extrêmement puissant. Cet outil tire parti du <a href="https://www.w3.org/TR/webdriver/">protocole WebDriver du W3C</a> pour gérer des navigateurs tels que Google Chrome ou Firefox. Simple d’utilisation, il implémente les composants <a href="https://symfony.com/doc/current/components/browser_kit.html">BrowserKit</a> et <a href="https://symfony.com/doc/current/components/dom_crawler.html">DomCrawler</a> de Symfony et contient toutes les fonctionnalités dont vous avez besoin pour tester vos applications. 



Son utilisation vous semblera familière si vous avez déjà créé <a href="https://symfony.com/doc/current/testing.html#functional-tests">un test fonctionnel pour une application Symfony</a> : l’API est exactement la même ! Il est important de garder à l’esprit que Panther étant une bibliothèque autonome, elle peut être utilisée dans tous les projets PHP. Panther trouve automatiquement votre installation locale de Chrome et la lance (merci <a href="https://sites.google.com/a/chromium.org/chromedriver/">ChromeDriver</a>). Vous n’avez rien d’autre à installer : pas besoin de serveur Selenium ni de pilote obscur. En mode test, Panther démarre automatiquement votre application à l’aide du <a href="http://php.net/manual/en/features.commandline.webserver.php">serveur web intégré de PHP</a>.



Vous pouvez vous concentrer sur la rédaction de vos tests ou scénarios, Panther s’occupe de tout le reste !&nbsp; Voyons ensemble comment l&rsquo;installer et l&rsquo;utiliser :&nbsp;



<h3>Installation</h3>



Pour installer Panther dans votre projet, utilisez <a href="https://getcomposer.org/" target="_blank" rel="noopener">Composer</a>. Vous pouvez utiliser l’option &#8211;dev si vous souhaitez vous servir uniquement de Panther pour les tests et non pour l’extraction de contenu :





<h3>Utilisation de base</h3>





<h3>Utilisation des tests</h3>



La classe PantherTestCase vous permet de rédiger aisément des tests E2E. Elle démarre automatiquement votre application en utilisant le serveur Web PHP intégré et vous permet de l’explorer à l’aide de Panther. Elle étend le TestCase de <a href="https://phpunit.de/">PHP Unit</a> et fournit tous les outils de tests auxquels vous êtes habitué·e.





Exécutez ce test de cette manière :





<h3>Un félin polymorphe</h3>



Si vous souhaitez tester une application Symfony, PantherTestCase étend automatiquement la classe WebTestCase. Cela signifie que vous pouvez facilement créer des tests fonctionnels, qui peuvent exécuter directement le noyau de votre application et accéder à tous vos services existants. Contrairement au client de Panther, le client de test ne supporte pas le JavaScript et la capture d’écran.&nbsp;En parallèle (et même pour les applications qui ne sont pas en Symfony), Panther peut également tirer parti de la bibliothèque <a href="https://github.com/FriendsOfPHP/Goutte" target="_blank" rel="noopener">Goutte</a>, qui est un intermédiaire entre les clients de test de Symfony et de Panther. Goutte envoie de vraies requêtes HTTP. Il est rapide et permet de naviguer sur n&rsquo;importe quelle page web, et pas seulement sur celles de l&rsquo;application testée. Il ne supporte pas JavaScript et d&rsquo;autres fonctionnalités avancées car il est entièrement écrit en PHP.



L&rsquo;intérêt de ces&nbsp;trois bibliothèques, c&rsquo;est qu&rsquo;elles implémentent exactement la même API.&nbsp;Vous pouvez donc&nbsp;passer de l&rsquo;une à l&rsquo;autre en appelant la méthode appropriée, et trouver le bon compromis pour chaque cas de test (Ai-je besoin de JavaScript ?&nbsp;Ai-je besoin d&rsquo;authentifier vers un serveur SSO externe ? Ai-je envie d’accéder au noyau de la requête en cours ?).





<h3>Fonctionnalités</h3>



Contrairement aux bibliothèques de test et d’extraction de contenu, Panther :



<ul><li style="text-align: justify;">Exécute le code JavaScript contenu dans les pages web</li><li style="text-align: justify;">Supporte tout ce que Chrome ou Firefox implémente.</li><li style="text-align: justify;">Permet la prise de captures d’écran</li><li style="text-align: justify;">Peut attendre apparition d’éléments chargés de manière asynchrone.</li><li style="text-align: justify;">Vous laisse exécuter votre propre code JS ou requêtes XPath dans le contexte de la page chargée.</li><li style="text-align: justify;">Prend en charge les installations de <a href="https://www.seleniumhq.org/" target="_blank" rel="noopener">serveur Selenium</a> personnalisées.</li><li style="text-align: justify;">Prend en charge les services de tests de navigateur à distance, y compris <a href="https://saucelabs.com/" target="_blank" rel="noopener">SauceLabs</a> et <a href="https://www.browserstack.com/" target="_blank" rel="noopener">BrowserStack</a>.</li></ul>



<h3>Documentation</h3>



Puisque Panther implémente l’API de plusieurs bibliothèques populaires, elle a déjà une vaste documentation :



<ul><li>Pour la classe Client, consultez <a href="https://symfony.com/doc/current/components/browser_kit.html">la documentation BrowserKit&rsquo;s</a></li><li>Pour la classe Crawler, consultez <a href="https://symfony.com/doc/current/components/dom_crawler.html">la documentation de DomCrawler</a></li><li>Pour Webdriver, lisez <a href="https://github.com/facebook/php-webdriver">la documentation PHP WebDriver de Facebook </a></li></ul>



<h3>Variables d’environnement</h3>



Les variables d’environnement suivantes peuvent être définies pour modifier certains comportements de Panther :



<ul><li>PANTHER_NO_HEADLESS : permet de désactiver le mode “sans interface graphique ” des navigateurs (cela désactivera la fenêtre de tests, ce qui peut être utile pour déboger)</li><li>PANTHER_NO_SANDBOX : permet de désactiver le sandboxing de Chrome (dangereux, mais permet d’utiliser Panther dans des conteneurs)</li><li>PANTHER_WEB_SERVER_DIR : permet de changer la racine du document du projet (placée dans public/ par défaut)</li><li>PANTHER_CHROME_DRIVER_BINARY : permet d’utiliser un autre binaire chromedriver, au lieu de compter sur ceux déjà fournis par Panther</li></ul>



<h3>Intégration de Docker</h3>



Voici une image Docker minimale qui peut exécuter Panther :





Faites-le&nbsp;avec la commande suivante : docker build . -t myproject



Exécutez la avec docker run -it -v « $PWD »:/srv/myproject -w /srv/myproject myproject bin/phpunit



<h3>Intégration&nbsp;de Travis</h3>



Panther fonctionnera tout de suite avec Travis si vous ajoutez l’addon Chrome :





<h3>Intégration de AppVeyor</h3>



Panther fonctionnera immédiatement avec AppVeyor tant que Google Chrome est installé. Voici un fichier appveyor.yml pour exécuter vos tests avec Panther :&nbsp;





<h3>Limitations</h3>



Les fonctionnalités suivantes ne sont pas encore supportées :



<ul><li>L’exploration de documents XML (seul le HTML est pris en charge)</li><li>Mise à jour de documents existants (les navigateurs sont principalement utilisés pour consommer des données, pas pour créer des pages web)</li><li>Définition de valeurs de formulaires à l’aide de la syntaxe de tableau PHP multidimensionnelle</li><li>Méthodes renvoyant vers une instance de DOMElement (parce que cette bibliothèque utilise WebDriverElement en interne)</li><li>Sélection de choix invalides dans select</li></ul>



Et vous, que pensez-vous de Panther ? N’hésitez pas à contribuer à ce projet en faisant quelques PR sur les améliorations restantes !

Panther : un testeur de navigateur et une bibliothèque d’extraction de contenu pour PHP et Symfony

Retrouvez la publication initiale de cet article (EN) ici. Présentée dernièrement lors d’un lightning talk au Symfony Live Paris 2018 et lors d’un meetup de l’AFUP Hauts de France, Panther est une bibliothèque autonome permettant d’extraire des sites web et d’exécuter des tests fonctionnels de bout en bout (E2E) en utilisant de vrais navigateurs. &nbsp; [&hellip;]

Panther : un testeur de navigateur et une bibliothèque d’extraction de contenu pour PHP et Symfony | Les-Tilleuls.coop

40% plus rapide que la version pr&eacute;c&eacute;dente !


Support des &eacute;volutions de l&rsquo;API (d&eacute;pr&eacute;ciation des champs et ressources)

Panneau de profilage d&eacute;di&eacute; et int&eacute;gration &agrave; la Web Debug Toolbar


Une mise en beaut&eacute; pour l&rsquo;Admin


<a href="https://dunglas.fr/2018/07/api-platform-2-3-major-perf-improvement-api-evolution-deprecation-better-dev-tools-and-much-more/" target="_blank" rel="noopener">Retrouvez la version originale de cet article ici.</a>



Il y a quelques jours, le framework <a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a> a atteint les 3000 étoiles sur <a href="https://github.com/api-platform/api-platform" target="_blank" rel="noopener">Github</a>, de quoi nous rendre fous de joie ! À cette occasion, et afin de célébrer ce nouvel accomplissement, nous avons sorti la version 2.3 qui contient d’importantes nouvelles fonctionnalités. Découvrons-les dès maintenant !



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img loading="lazy" src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/226.jpg" alt="API 3K" class="wp-image-1268" width="600" height="280" srcset="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/226.jpg 1000w, https://api.les-tilleuls.coop/wp-content/uploads/2021/08/226-300x140.jpg 300w, https://api.les-tilleuls.coop/wp-content/uploads/2021/08/226-768x359.jpg 768w" sizes="(max-width: 600px) 100vw, 600px" /></figure></div>



Pour rappel, API Platform est un framework Open Source destiné aux projets orientés API. Il permet, en l’espace de quelques minutes, <a href="https://api-platform.com/docs/distribution" target="_blank" rel="noreferrer noopener">de créer des API modernes hypermédias et GraphQL</a>. Il contient également des outils côté client tirant parti des capacités de ces API auto-découvrables : &nbsp;<a href="https://api-platform.com/docs/admin" target="_blank" rel="noreferrer noopener">l’interface admin</a> et <a href="https://api-platform.com/docs/client-generator" target="_blank" rel="noreferrer noopener">le générateur de PWA React et Vue.js</a>.



Enfin, API Platform a été conçu dès le départ comme une solution Cloud Native qui peut <a href="https://api-platform.com/docs/distribution#using-the-official-distribution-recommended" target="_blank" rel="noreferrer noopener">s&rsquo;exécuter localement avec Docker</a> mais aussi être <a href="https://api-platform.com/docs/deployment/kubernetes" target="_blank" rel="noreferrer noopener">déployée instantanément dans un cluster Kubernetes</a> (Heroku est également supporté). &nbsp;



<h3>40% plus rapide que la version précédente !</h3>



Nous améliorons continuellement les performances d’API Platform. Dans la <a rel="noreferrer noopener" href="https://dunglas.fr/2017/06/api-platform-2-1-feature-walkthrough-create-blazing-fast-hypermedia-apis-generate-js-apps/" target="_blank">version 2.1</a>, nous avions ajouté <a rel="noreferrer noopener" href="https://api-platform.com/docs/core/performance/#enabling-the-built-in-http-cache-invalidation-system" target="_blank">un mécanisme de cache basé sur l’invalidation</a>. Lorsque cette option est activée, les réponses HTTP ne sont générées qu’une seule fois, puis stockées et servies par un proxy de cache tel que Varnish. Quand une ressource est modifiée, toutes les réponses l’incluant ou la référençant sont automatiquement supprimées du cache. &nbsp;



Dans la version 2.3, Ben Davies a effectué un énorme travail de profiling et <a href="https://github.com/api-platform/core/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+is%3Aclosed+author%3Abendavies" target="_blank" rel="noopener">d’optimisation</a> sur le composant core. En parallèle, nous avons travaillé en étroite collaboration avec <a href="https://github.com/symfony/symfony/pull/27049" target="_blank" rel="noopener">l&rsquo;équipe de Symfony</a> pour fortement améliorer les performances du composant Serializer (l&rsquo;un des outils sur lesquels repose API Platform). Toutes ces optimisations mises ensemble, et quand les données ne sont pas déjà en cache, <a href="https://twitter.com/dunglas/status/1002199622880768000" target="_blank" rel="noopener">les applications basées sur API Platform sont 40% plus rapides avec la version 2.3 qu’avec la 2.2</a>&nbsp;!&nbsp;



Un grand merci à <a href="https://github.com/bendavies" target="_blank" rel="noopener">Ben</a> et <a href="https://twitter.com/nicolasgrekas" target="_blank" rel="noopener">Nicolas Grekas</a> de Blackfire.io pour cet énorme travail !&nbsp;



<h3>Support des évolutions de l’API (dépréciation des champs et ressources)</h3>



Une “bonne pratique” de plus en plus populaire est d’utiliser <a href="https://philsturgeon.uk/api/2018/05/02/api-evolution-for-rest-http-apis/" target="_blank" rel="noopener">la stratégie d’évolution</a> pour les API web.



Créer de nouvelles versions de l’API, ou de ses points de terminaison, nécessite de modifier tous les clients, même ceux qui ne sont pas impactés par ces modifications. En opposition, la stratégie de l’évolution (connue également sous le nom de versionless APIs) consiste à déprécier les champs, les types de ressources ou les opérations qui vont être supprimés dans l’avenir. La plupart des formats d’API modernes dont GraphQL, OpenAPI et Hydra sont capables de gérer cette stratégie.



Dans API Platform 2.3, nous avons mis en place un nouvel attribut pour marquer les classes de ressources, les opérations et les propriétés comme obsolètes. Tous les formats de documentation supportés par API Platform (et gérant les dépréciations) prennent en compte ce nouvel attribut !



Voici comment déprécier une ressource entière :&nbsp;



<pre class="wp-block-preformatted"><code class="language-php">&lt;?phpnamespace AppEntity;use ApiPlatformCoreAnnotationApiResource;/**
 * @ApiResource(deprecationReason="Create a Book instead")
 */
class Parchment
{
 // ...
}</code></pre>



Comme vous pouvez le constater, pour déprécier une ressource, vous avez juste à expliquer ce que le client doit faire pour être à niveau dans un attribut dédié. Vous pouvez également utiliser ce nouvel attribut deprecationReason sur n&rsquo;importe quelle <a href="https://api-platform.com/docs/core/operations/#operations" target="_blank" rel="noopener">opération</a>.



La dépréciation va automatiquement être prise en compte par les clients supportant le format précédemment mentionné.



Voici comment cela s’affiche pour OpenAPI dans le Swagger UI fourni avec le framework :



<img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/228.png" alt="swagger"> Et maintenant dans la version intégrée de GraphiQL (pour les APIs GraphQL) : <img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/227.png" alt="GraphiQL"> Il est également possible déprécier juste un champ :&nbsp;



<pre style="text-align: left;"><code class="language-php">&lt;?php namespace AppEntity;

use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiResource;/**
* @ApiResource
*/
class Review
{
 // ... /**
 * @ApiProperty(deprecationReason="Use the rating property instead")
 */
 public $letter;
} </code></pre>



Tous nos outils client ont été mis à jour pour ignorer les champs, les opérations et les ressources obsolètes. La bibliothèque <a href="https://github.com/api-platform/api-doc-parser">api-doc-parser</a> (qui supporte Hydra, et la dernière version d’OpenAPI) supporte également cette nouvelle fonctionnalité. &nbsp;



<h3>Panneau de profilage dédié et intégration à la Web Debug Toolbar</h3>



Symfony comporte de très bon outils de développement, dont le <a href="https://symfony.com/doc/current/profiler.html" target="_blank" rel="noreferrer noopener">Profiler</a>, qui est compatible avec API Platform.



Pour l’installer, exécutez composer req profiler. Grâce aux <a href="https://github.com/api-platform/core/pull/1707" target="_blank" rel="noreferrer noopener">contributions</a> de <a href="https://twitter.com/j_deniau" target="_blank" rel="noreferrer noopener">Julien Deniau</a> et&nbsp;<a href="https://twitter.com/antograssiot" target="_blank" rel="noreferrer noopener">Anthony Grassiot</a>, la barre d’outils de débogage affiche désormais une icône représentant notre mascotte Webby, qui redirige vers le nouveau panneau du profiler dédié à API Platform : &nbsp;



<figure class="wp-block-image"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/229.png" alt="profiler" title="profiler"/></figure>



<h3>Syntaxe raccourcie pour les attributs</h3>



La définition d’attributs à l’aide d’annotations peut rapidement devenir verbeuse. Comme alternatives aux annotations pour les configurations complexes, API Platform supporte les formats <a rel="noreferrer noopener" href="https://api-platform.com/docs/core/getting-started/#mapping-the-entities" target="_blank">XML et YAML</a>. Dans la version 2.3, <a rel="noreferrer noopener" href="https://twitter.com/meyer_baptiste" target="_blank">Baptiste Meyer</a> a ajouté <a rel="noreferrer noopener" href="https://github.com/api-platform/core/pull/1788" target="_blank">une syntaxe raccourcie et plus agréable</a> pour définir les attributs via les annotations @ApiResource et @ApiProperty :



<pre style="text-align: left;"><code class="language-php">// Avant
/**
 * @ApiResource(
 * attributes={
 * "validation_groups"={"bar"},
 * "normalization_context"={"groups": {"book:read"}}
 * }
 * )
 */
class Book
{
 // ...
}// Maintenant
/**
 * @ApiResource(
 * validationGroups={"bar"},
 * normalizationContext={"groups": {"book:read"}}
 * )
 */
class Book
{
 // ...
}</code></pre>



Évidemment, “l’ancienne” syntaxe est toujours valide, mais les nouveaux raccourcis permettent une meilleure découvrabilité ainsi que l’autocomplétion dans les IDE (si vous êtes un utilisateur de PHPStorm, installez le plugin <a href="https://plugins.jetbrains.com/plugin/7320-php-annotations" target="_blank" rel="noreferrer noopener">PHP Annotations</a> afin de bénéficier de cette nouvelle fonctionnalité).&nbsp;



<h3>Une mise en beauté pour l’Admin</h3>



Dans la version 2.3, beaucoup d’amour a été donné au composant <a href="https://api-platform.com/docs/admin" target="_blank" rel="noreferrer noopener">API Platform Admin</a>. Cette bibliothèque JavaScript, maintenue par <a href="https://twitter.com/mauchede" target="_blank" rel="noreferrer noopener">Morgan Auchedé</a>, construit une UI pour n’importe quelle API supportant les spécifications Hydra ou OpenAPI. &nbsp;



Elle utilise <a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">React</a>, et a été construite sur la bibliothèque Admin On Rest. Comme vous le savez sûrement, Admin On Rest a été abandonnée; et Marmelab, la société derrière l’outil, a publié un successeur nommé <a href="https://marmelab.com/blog/2018/05/18/react-admin-2-0.html" target="_blank" rel="noreferrer noopener">React Admin</a>. React Admin propose une interface repensée et résout quelques problèmes de conception.



<a href="https://github.com/api-platform/admin/pull/97" target="_blank" rel="noreferrer noopener">Nous avons patché API Platform Admin afin d’utiliser ce nouvel outil</a>, et nous avons également profité de cette occasion pour résoudre un problème historique de l’outil : son incapacité à gérer les <a href="https://api-platform.com/docs/core/serialization/#embedding-relations" target="_blank" rel="noreferrer noopener">relations imbriquées</a>. Ce n’est plus le cas ! Mieux : l’Admin est désormais assez intelligente pour réutiliser les données déjà téléchargées en tant que relations imbriquées plutôt que de déclencher de nouvelles requêtes HTTP. Cela améliore considérablement ses performances ! &nbsp;&nbsp;



Nous avons également ajouté la prise en charge de nouvelles fonctionnalités introduites par React Admin, dont la fonctionnalité de suppression en masse (<a href="https://github.com/api-platform/admin/pull/98" target="_blank" rel="noreferrer noopener">bulk delete</a>).&nbsp; https://www.youtube.com/embed/aTAt0dKOduk



<h3>Autres fonctionnalités</h3>



Évidemment, cette nouvelle version inclut un grand nombre de nouvelles fonctionnalités qui sont plus discrètes mais pourtant très utiles. En voici quelques unes :



<ul><li>Les&nbsp;paramètres des constructeurs des classes de ressources sont désormais accessibles en écriture &nbsp;</li><li>Les interfaces peuvent désormais être des types de ressources</li><li>Une exception est maintenant levée si un filtre requis n’est pas défini</li><li>Possibilité de spécifier le message d’erreur lorsque l’accès est refusé à l’aide de l’attribut access_control_message</li><li>Possibilité d’inclure des résultats null lorsque l’on utilise le filtre de date</li><li>Possibilité pour les Data Persisters de&nbsp;renvoyer une nouvelle instance au lieu de la muter</li><li>Ajout d’un nouvel attribut afin de pouvoir les formats par ressources ou opérations</li><li>Ajout d’une option &#8211;output vers la commande api:swagger:export</li><li>Suppression du support de PHP 7.0</li><li>Améliorations concernants Swagger UI et GraphiQL</li><li>GraphQL : ajout d’un champ totalCount dans les collections paginées GraphQL</li><li>JSONAPI : support de l’inclusion de ressources connexes</li></ul>



Notons également que notre coopérateur <a href="https://twitter.com/teohhanhui" target="_blank" rel="noreferrer noopener">Teoh Han Hui</a> a <a href="https://github.com/api-platform/api-platform/pull/666" target="_blank" rel="noreferrer noopener">modernisé la configuration Docker que nous fournissons</a> afin de tirer parti des nouvelles capacités de cette technologie de conteneurisation.



Encore une fois, nous tenons à remercier chaleureusement tous les développeurs qui ont contribué à ces nouvelles fonctionnalités, aux corrections de bugs et à la rédaction de la documentation. L&rsquo;atout principal d’API Platform, c’est sa communauté !



Vous souhaitez profiter de l’été pour former vos équipes au framework API Platform ? Consultez <a href="https://masterclass.les-tilleuls.coop/trainings/introduction-a-api-platform" target="_blank" rel="noreferrer noopener">notre formation disponible sur Masterclass</a> ! Nos développeurs et consultants peuvent également vous accompagner dans vos développements : contactez-nous !

API Platform 2.3 : boost des performances, optimisation des outils de développement et bien plus !

Retrouvez la version originale de cet article ici. Il y a quelques jours, le framework API Platform a atteint les 3000 étoiles sur Github, de quoi nous rendre fous de joie ! À cette occasion, et afin de célébrer ce nouvel accomplissement, nous avons sorti la version 2.3 qui contient d’importantes nouvelles fonctionnalités. Découvrons-les dès [&hellip;]

API Platform 2.3 : boost des performances, optimisation des outils de développement et bien plus ! | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/226.jpg

<blockquote class="twitter-tweet" data-lang="fr">.<a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a> has applied to <a href="https://twitter.com/RailsGirlsSoC?ref_src=twsrc%5Etfw">@RailsGirlsSoC</a>, and <a href="https://twitter.com/coopTilleuls?ref_src=twsrc%5Etfw">@coopTilleuls</a> can host 2 students in its office in Lille, France to work on the project. Please get in touch with us if you&rsquo;re interested: <a href="https://t.co/pJKXxwL132">https://t.co/pJKXxwL132</a> <a href="https://twitter.com/hashtag/Diversity?src=hash&amp;ref_src=twsrc%5Etfw">#Diversity</a> <a href="https://twitter.com/hashtag/tech?src=hash&amp;ref_src=twsrc%5Etfw">#tech</a> <a href="https://twitter.com/hashtag/API?src=hash&amp;ref_src=twsrc%5Etfw">#API</a>— Kévin Dunglas (@dunglas) <a href="https://twitter.com/dunglas/status/957900614415077378?ref_src=twsrc%5Etfw">29 janvier 2018</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



Chez Les-Tilleuls.coop, nous tentons autant que possible d’accompagner des associations ou des entités engagées dans la lutte contre les inégalités sociales, l’accès à la culture, la formation, ou encore le respect de l’environnement. &nbsp;



Notre coopérative s’implique aussi dans une meilleure diversité dans le numérique&nbsp;et c’est donc avec une certaine évidence que nous apportons notre soutien au programme “Summer of Code 2018” organisé par l’association <a href="http://railsgirls.com/" target="_blank" rel="noopener">Rails Girls</a>&nbsp;(RGSoC).



<figure class="wp-block-image"><a href="https://railsgirlssummerofcode.org/" target="_blank" rel="noopener"><img src="https://api.les-tilleuls.coop/wp-content/uploads/2021/08/214.png" alt="rgsoc" title="rgsoc"/></a></figure>







D&rsquo;origine finlandaise, Rails Girls est une association à but non lucratif destinée à accompagner les jeunes femmes dans l’approfondissement de leurs connaissances en programmation. En d’autres termes, cette organisation a pour objectifs de donner aux femmes l’accès à une première expérience en développement Open Source, appuyée par une communauté internationale promouvant la diversité dans un secteur où la parité n’est pas des plus égalitaires. Rails Girls implique des milliers de femmes à travers le monde et <a href="http://railsgirls.com/events.html" target="_blank" rel="noopener">compte autant d’événements organisés</a> depuis 2010. 



Les-Tilleuls.coop a décidé de <a href="https://railsgirlssummerofcode.org/campaign/" target="_blank" rel="noopener">sponsoriser à hauteur de 1000 dollars</a> le programme et se propose d’accompagner des étudiantes sur le <a href="https://teams.railsgirlssummerofcode.org/projects/215-api-platform" target="_blank" rel="noopener">développement du framework API Platform</a>, qui vient d’être récemment accepté parmi tous les sujets proposés. 



<h3>Comment fonctionne le RGSoC ?</h3>



Rejoindre le programme RGSoC est simple. Toute femme (ou personne s’identifiant comme telle) est invitée à postuler, peu importe son âge ou ses diplômes. Une première année d’expérience significative en programmation (connaissances de certains concepts ou pratiques) ainsi qu’une implication ou participation à des événements organisés par <a href="http://railsgirls.com/" target="_blank" rel="noopener">Rails Girls</a>, <a href="http://www.railsbridge.org/" target="_blank" rel="noopener">Railsbridge</a>, <a href="http://www.blackgirlscode.com/" target="_blank" rel="noopener">Black Girls Code</a> ou encore <a href="http://www.pyladies.com/" target="_blank" rel="noopener">PyLadies</a> sont demandées. 



Les participantes doivent obligatoirement former une équipe de deux personnes et une fois celle-ci fondée, postuler à un projet de mentorat de leur choix parmi <a href="https://teams.railsgirlssummerofcode.org/projects" target="_blank" rel="noopener">une liste prédéfinie</a>. Une fois le projet choisi et l’équipe sélectionnée, celle-ci y contribuera de juillet à septembre à temps plein, tout en étant rémunérée et accompagnée par les coaches du projet. &nbsp;&nbsp;



Nous sommes prêt·e·s à accueillir une équipe dans nos bureaux de Lille et Paris.&nbsp;Si vous voulez participer à ce projet, <a href="https://les-tilleuls.coop/fr/contact" target="_blank" rel="noopener">contactez-nous</a>, nous serions ravi·e·s de vous accompagner !



<h3>&nbsp;</h3>

Les-Tilleuls.coop sponsor et mentor du programme Rails Girls Summer of Code

.@ApiPlatform has applied to @RailsGirlsSoC, and @coopTilleuls can host 2 students in its office in Lille, France to work on the project. Please get in touch with us if you&rsquo;re interested: https://t.co/pJKXxwL132 #Diversity #tech #API — Kévin Dunglas (@dunglas) 29 janvier 2018 Chez Les-Tilleuls.coop, nous tentons autant que possible d’accompagner des associations ou des entités [&hellip;]

Les-Tilleuls.coop sponsor et mentor du programme Rails Girls Summer of Code | Les-Tilleuls.coop

https://api.les-tilleuls.coop/wp-content/uploads/2021/08/215.png

Support de GraphQL

La nouvelle distribution

Support de JSON API

D&eacute;clarer des filtres en utilisant les annotations

D&eacute;ploiement Kubernetes instantan&eacute;


helm upgrade --install ./api/helm/api 
    --set php.repository=gcr.io/test-api-platform/php 
    --set nginx.repository=gcr.io/test-api-platform/nginx 
    --set secret=MyAppSecretKey 
    --set postgresql.postgresPassword=MyPgPassword 
    --set postgresql.persistence.enabled=true 
    --set corsAllowUrl='^https?://[a-z]*.mywebsite.com

docker-compose exec php composer req webonyx/graphql-php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;
use DoctrineORMMapping as ORM;
use SymfonyComponentValidatorConstraints as Assert;

/**
 * An organization.
 *
 * @ApiResource
 * @ORMEntity
 */
class Organization
{
    /**
     * @ORMId
     * @ORMColumn(type="guid")
     * @AssertNotBlank
     */
    public $id;
    /**
     * @ORMColumn(type="text")
     * @AssertNotBlank
     */
    public $name;
}

# config/packages/api_platform.yaml
api_platform:
  # ...
  formats:
    # ...
    jsonapi: ['application/vnd.api+json']
  error_formats:
    # ...
    jsonapi: ['application/vnd.api+json']

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
use ApiPlatformCoreBridgeDoctrineOrmFilterSearchFilter;
use DoctrineORMMapping as ORM;
use SymfonyComponentValidatorConstraints as Assert;

/**
 * An organization.
 *
 * @ApiResource
 * @ORMEntity
 */
class Organization
{
    /**
     * @ORMId
     * @ORMColumn(type="guid")
     * @AssertNotBlank
     */
    public $id;

    /**
     * @ORMColumn(type="text")
     * @AssertNotBlank
     * @ApiFilter(SearchFilter::class)
     */
    public $name;
}

API Platform 2.2 : Flex, GraphQL, JSON API, Kubernetes et bien plus

Retrouvez la version EN de cet article ici. Nous sommes heureux de vous annoncer la sortie d’API Platform 2.2 beta 1 ! Cette nouvelle version arrive avec de nouvelles de fonctionnalités incluant : Le support de GraphQL et JSON API ; L&rsquo;intégration de Symfony 4 / Flex ; L&rsquo;intégration de API Platform Admin (construit avec [&hellip;]

Quoi de neuf chez Les-Tilleuls.coop ?