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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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

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 !

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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/266-300x249.png" alt="Partenaire Sylius" class="wp-image-1280" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/266-300x249.png 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/266-768x638.png 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/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 !

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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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

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://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/226.jpg" alt="API 3K" class="wp-image-1268" width="600" height="280" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/226.jpg 1000w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/226-300x140.jpg 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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 !

<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://les-tilleuls-wordpress.preprod-tilleuls.ovh/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

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

Installation

Le support natif pour les relations to-many

D&eacute;tection de types Schema.org suppl&eacute;mentaires (noms, url &amp; e-mail)

Le support pour les ressources en lecture seule

Une personnalisation&nbsp;simplifi&eacute;e et plus pouss&eacute;e

Support d&rsquo;autres formats tels que GraphQL

<a href="https://dunglas.fr/2017/11/api-platform-admin-0-2-a-dynamic-admin-for-your-apis-react-progressive-web-app/" target="_blank" rel="noopener">Retrouvez la version originale (EN) de cet article ici.</a>



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/202.png" alt="api-platform-admin" title="api-platform-admin"/></figure>



La version 0.3&nbsp;du <a href="https://api-platform.com/docs/admin/">composant admin</a> d’<a href="https://api-platform.com/">API Platform</a> vient juste de sortir !



Cet outil permet de créer une interface d’administration complète, intuitive et dynamique (CRUD, paginations, relations) pour n’importe quelle API supportant le vocabulaire hypermedia <a href="http://www.hydra-cg.com/">Hydra</a>, et cela sans une seule ligne de code (d’autres formats seront bientôt supportés, vous le saurez en lisant la fin de cet article ;)) !



API Platform Admin est construit avec <a href="https://reactjs.org/">React</a> à partir de la bibliothèque <a href="https://github.com/marmelab/admin-on-rest">Admin on Rest</a> sous la forme d’une <a href="https://developers.google.com/web/progressive-web-apps/">Progressive Web App</a>. Découvrons ensemble les nouvelles fonctionnalités apportées par cette version !



<h2>Installation</h2>



En partant du principe que vous avez une API exposant une documentation Hydra, vous n’avez qu’à initialiser le composant React suivant pour obtenir votre admin :



<pre class="wp-block-preformatted">import React from 'react';
import { HydraAdmin } from '@api-platform/admin';export default () =&gt; &lt;HydraAdmin entrypoint="https://api.example.com"/&gt;;</pre>



Prenons un exemple. Créez une nouvelle application avec le package <a href="https://github.com/facebookincubator/create-react-app">create-react-app</a> de Facebook, remplacez le contenu de src/App.js avec l’extrait plus haut et exécutez yarn add @api-platform/admin. C’est tout ! Si vous obtenez une erreur liée aux multiples versions de React chargées, retirez les packages react et react-dom de votre package.json et exécutez à nouveau yarn install.



Si vous n’avez pas encore une API au format Hydra / JSON-LD, voici le code de celle que nous utiliserons dans les exemples suivants. Elle a été créée en suivant <a href="https://api-platform.com/docs/distribution/">la distribution officielle d’API Platform</a> :



<pre class="wp-block-preformatted">&lt;?phpnamespace AppEntity;use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiResource;
use DoctrineCommonCollectionsArrayCollection;
use DoctrineORMMapping as ORM;/**
&nbsp;* @ORMEntity
&nbsp;* @ApiResource
&nbsp;*/
class Person
{
&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* @ORMId
&nbsp; &nbsp; &nbsp;* @ORMGeneratedValue
&nbsp; &nbsp; &nbsp;* @ORMColumn(type="integer")
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; private $id;&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* @ORMColumn
&nbsp; &nbsp; &nbsp;* @ApiProperty(iri="http://schema.org/name")
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; public $name;&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* @var Greeting[]
&nbsp; &nbsp; &nbsp;*
&nbsp; &nbsp; &nbsp;* @ORMOneToMany(targetEntity="Greeting", mappedBy="person", cascade={"persist"})
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; public $greetings;&nbsp; &nbsp; public function __construct()
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $this-&gt;greetings = new ArrayCollection();
&nbsp; &nbsp; }&nbsp; &nbsp; public function getId()
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; return $this-&gt;id;
&nbsp; &nbsp; }&nbsp; &nbsp; public function addGreeting(Greeting $greeting)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $greeting-&gt;person = $this;
&nbsp; &nbsp; &nbsp; &nbsp; $this-&gt;greetings-&gt;add($greeting);
&nbsp; &nbsp; }&nbsp; &nbsp; public function removeGreeting(Greeting $greeting)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $greeting-&gt;person = null;
&nbsp; &nbsp; &nbsp; &nbsp; $this-&gt;greetings-&gt;removeElement($greeting);
&nbsp; &nbsp; }
}
</pre>



<pre class="wp-block-preformatted">&lt;?phpnamespace AppEntity;use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiResource;
use DoctrineORMMapping as ORM;
use SymfonyComponentValidatorConstraints as Assert;/**
&nbsp;* @ApiResource
&nbsp;* @ORMEntity
&nbsp;*/
class Greeting
{
&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* @ORMId
&nbsp; &nbsp; &nbsp;* @ORMGeneratedValue
&nbsp; &nbsp; &nbsp;* @ORMColumn(type="integer")
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; private $id;&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* @ORMColumn
&nbsp; &nbsp; &nbsp;* @AssertNotBlank
&nbsp; &nbsp; &nbsp;* @ApiProperty(iri="http://schema.org/name")
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; public $name = '';&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* @ORMManyToOne(targetEntity="Person", inversedBy="greetings")
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; public $person;&nbsp; &nbsp; public function getId(): ?int
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; return $this-&gt;id;
&nbsp; &nbsp; }
}</pre>



Et oui, vous n’avez besoin que de ces deux petites classes en PHP pour obtenir une API hypermedia. Découvrez davantage d’informations au sujet du composant API <a href="https://api-platform.com/docs/distribution/">en lisant ce guide de démarrage</a>. N’importe quelle API avec une documentation Hydra fera le job indépendamment du langage de programmation côté serveur.



<h2>Le support natif pour les relations to-many </h2>



L&rsquo;admin d’API Platform supporte les relations to-one depuis sa première sortie. Cependant, il était nécessaire de personnaliser&nbsp;le composant utilisé pour les relations to-many. Ce n’est plus le cas désormais : <a href="https://github.com/api-platform/api-doc-parser">notre parseur&nbsp;de documentation d’API</a> prend désormais en charge les cardinalités et peut les extraire si la documentation de l’API inclut <a href="https://www.w3.org/TR/2012/REC-owl2-syntax-20121211/#Maximum_Cardinality">les propriétés de cardinalité maximum d’OWL</a>. Si aucune cardinalité n&rsquo;est fournie, l’admin utilisera un widget to-many par défaut. &nbsp;



Voici à quoi ressemble l’écran d’édition de la ressource Person grâce à cette nouvelle fonctionnalité :&nbsp;



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/203.png" alt="api-platform-to-many" title="api-platform-to-many"/></figure>



L&rsquo;admin est capable de comprendre que la ressource Person est liée aux Greetings et du coup utiliser le composant Admin On Rest approprié.



<h2>Détection de types Schema.org supplémentaires (noms, url &amp; e-mail)</h2>



L&rsquo;admin d’API Platform est capable d’utiliser le widget adéquat en fonction du type de propriété d’une ressource. Cela supporte :



<ul><li>Les nombres (<a href="http://www.w3.org/2001/XMLSchema#float">http://www.w3.org/2001/XMLSchema#float</a> et&nbsp;<a href="http://www.w3.org/2001/XMLSchema#integer">http://www.w3.org/2001/XMLSchema#integer</a>)</li><li>Les dates (<a href="http://www.w3.org/2001/XMLSchema#date">http://www.w3.org/2001/XMLSchema#date</a> et <a href="http://www.w3.org/2001/XMLSchema#dateTime">http://www.w3.org/2001/XMLSchema#dateTime</a>)</li><li>Les booléens (<a href="http://www.w3.org/2001/XMLSchema#boolean">http://www.w3.org/2001/XMLSchema#boolean</a>)</li><li>Et bien sûr les champs de texte.</li></ul>



Dans cette nouvelle version, l’admin d’API Platform supporte également certains types du célèbre vocabulaire de <a href="http://schema.org/">Schema.org</a> :



<ul><li>Comme vous avez pu le voir lors des écrans précédents, si une propriété est de type &nbsp;<a href="http://schema.org/name">http://schema.org/name</a>, cette propriété sera utilisée à la place de l’ID en affichant cette relation</li><li>Si une propriété est de type <a href="http://schema.org/url">http://schema.org/url</a>, l’URL sera cliquable depuis l’admin. </li><li>Si une propriété est de type <a href="http://schema.org/email" target="_blank" rel="noopener">http://schema.org/email</a>, l’entrée HTML sera de type&nbsp;email et une validation de base aura lieu (cela fonctionne déjà depuis la version 0.1)</li></ul>



<h2>Le support pour les ressources en lecture seule </h2>



La version 0.1 ne permettait pas de gérer les ressources en lecture seule (pas d’opérations POST ou PUT). Nous avons amélioré notre parser de documentation afin de supporter les propriétés owl:equivalentClass. Dorénavant, si la documentation de l’API fournit ces propriétés, l’admin sera construite même si la ressource est en lecture seule (évidemment, dans ce cas-là, vous ne serez qu’en mesure de consulter les ressources mais pas les éditer).



<h2>Une personnalisation&nbsp;simplifiée et plus poussée</h2>



<a href="https://twitter.com/mauchede">Morgan Auchedé</a> a effectué un gros travail pour rendre l’admin entièrement et facilement personnalisable.



Vous pouvez désormais surcharger n’importe quel composant React généré par un composant personnalisé, ou par un composant d’Admin On Rest, ou de <a href="https://www.muicss.com/docs/v1/react/introduction">MUI React</a>. Vous pouvez remplacer, ajouter ou retirer une entrée ou un champ spécifique. Mais vous pouvez aussi remplacer une liste entière, une vue, une création ou un formulaire d’édition, ou un bouton de suppression. Voici un exemple&nbsp;fourni par Morgan :



<pre class="wp-block-preformatted">import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
import { Datagrid, EditButton, ImageField, List, ShowButton, TextField } from 'admin-on-rest';
import React from 'react';
import SingleImageInput from '../components/inputs/single-image-input';export default entrypoint =&gt; parseHydraDocumentation(entrypoint)
 .then(
 ({ api }) =&gt; {
 // Customize "Gallery" resource
 const gallery = api.resources.find(({ name }) =&gt; 'galleries' === name);
 gallery.list = (props) =&gt; (
 
 
 
 {props.options.fieldFactory(props.options.resource.fields.find(({ name }) =&gt; name === 'name'))}
 {props.options.fieldFactory(props.options.resource.fields.find(({ name }) =&gt; name === 'mainImage'))}
 {props.hasShow &amp;&amp; }
 {props.hasEdit &amp;&amp; }
 
 
 ); // Customize "images" field
 const images = gallery.fields.find(({ name }) =&gt; 'images' === name);
 images.field = props =&gt; (
 
 );
 images.input = props =&gt; (
 
 
 
 );
 images.input.defaultProps = {
 addField: true,
 addLabel: true,
 }; // Customize "mainImage" field
 const mainImage = gallery.fields.find(({ name }) =&gt; 'mainImage' === name);
 mainImage.field = props =&gt; (
 
 );
 mainImage.input = props =&gt; (
 
 
 
 );
 mainImage.input.defaultProps = {
 addField: true,
 addLabel: true,
 };
 mainImage.input.defaultProps = {
 addField: true,
 addLabel: true,
 }; return { api };
 },
 );</pre>



<h2>Support d’autres formats tels que GraphQL </h2>



Le parser a été créé de sorte que l&rsquo;on puisse&nbsp;analyser d’autres formats tels que le schéma <a href="http://graphql.org/learn/schema/">GraphQL</a> ou <a href="https://swagger.io/">Swagger/Open API</a>. La bibliothèque api-doc-parser offre une représentation intermédiaire qui est peuplée par le parser du format correspondant. Cette représentation est utilisée par le parser ainsi que par notre générateur de <a href="https://github.com/api-platform/client-generator">&nbsp;Progressive Web App</a> <a href="https://github.com/api-platform/client-generator">React &amp; Vue.js</a>.



Cela signifie que lorsque des parser pour d’autres formats qu’Hydra seront disponibles (PR bienvenues !), les deux outils supporteront également ces formats.



Comme vous l’avez sûrement vu, la partie serveur d’API Platform supporte désormais GraphQL. <a href="https://twitter.com/dunglas/status/916202649380425728" target="_blank" rel="noopener">Je vous laisse deviner quel format nous implémenterons dans la prochaine version de api-doc-parser</a> !

API Platform Admin 0.2 : créez une admin en 1 minute pour votre API (React Progressive Web App inside)

Edit du 10 juillet 2017 : plus de 200 votes ont été comptabilisés en une semaine, la mascotte d&rsquo;API Platform s&rsquo;appelle Webby !

<a href="https://api-platform.com/">Le framework API Platform</a> fêtera très prochainement ses deux ans et malgré de nombreuses sollicitations et idées, le prénom de la mascotte n&rsquo;a jamais été clairement défini. Suite à plusieurs suggestions reçues sur nos réseaux sociaux ou sur notre formulaire de contact, nous avons lancé depuis hier un sondage sur <a href="https://twitter.com/ApiPlatform">Twitter</a> pour que vous nous aidiez à choisir le prénom de cette araignée.

Pour voter, il suffit de choisir parmi les 4 propositions ci-dessous !

<blockquote class="twitter-tweet" data-lang="fr">Our cute mascot is very popular now, but she&rsquo;s still unnamed. It&rsquo;s time to fix that! Which name do you prefer? <a href="https://twitter.com/hashtag/API?src=hash">#API</a> <a href="https://twitter.com/hashtag/Symfony?src=hash">#Symfony</a> <a href="https://twitter.com/hashtag/LinkedData?src=hash">#LinkedData</a>— API Platform (@ApiPlatform) <a href="https://twitter.com/ApiPlatform/status/881782079066976256">3 juillet 2017</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


Les votes s&rsquo;arrêtent dimanche soir et les premiers résultats sont très serrés : aidez-nous à changer la donne et <a href="https://twitter.com/coopTilleuls">suivez-nous sur Twitter</a> si ce n&rsquo;est pas encore le cas&nbsp;! Le prénom de cette mascotte sera annoncé lundi 10 juillet.&nbsp;

[API Platform] Votez pour le futur prénom de la mascotte !

Save the date! Nous vous invitons à un nouvel apéro PHP le jeudi 6 juillet prochain au <a href="https://www.facebook.com/DeliriumAmiens/">Delirium Café</a> à partir de 19h pour deux talks inédits et de qualité !



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/170.png" alt="Apéro PHP Amiens" width="158" height="175" title="Apéro PHP Amiens"/></figure></div>



Pour cette quatrième édition, nous aurons le plaisir d&rsquo;accueillir <a href="https://twitter.com/gawel1">Gaël Crispyn</a>, développeur chez <a href="https://www.ugloo.com/">Ugloo</a>, qui nous parlera de l&rsquo;utilisation de <a href="https://phpunit.de/">PHPUnit</a> pour l&rsquo;assurance d&rsquo;un code de qualité. Quand à <a href="https://twitter.com/s0yuka">Antoine Bluchet</a>, ingénieur en développement, nous fera un retour d&rsquo;expérience de reprise de données legacy avec <a href="https://api-platform.com/">API Platform</a> et <a href="https://nodejs.org/en/">Node.Js</a>.



Cet événement est gratuit et limité à 25 personnes. <a href="https://www.meetup.com/fr-FR/afup-lille-php/events/240958611/">Dépêchez-vous de vous inscrire sur cet événement Meetup pour garantir votre place</a> : votre inscription vous donnera accès à deux verres offerts par la maison.



Vous avez une question liée à cet événement ? <a href="https://twitter.com/afup_lille">Envoyez-nous un tweet</a>, nous serons ravis de répondre à vos questions. À très vite pour une soirée 100% PHP !

[Amiens] Apéro PHP le 06/07 !

Save the date ! Après le succès de <a href="https://les-tilleuls.coop/fr/blog/article/initiation-api-platform">notre première session</a>, nous organisons à nouveau une micro-formation ! Rendez-vous le 27 juin prochain de 12h30 à 13h30 dans nos bureaux de Lille pour une formation à ReactJS ! Ce rendez-vous est gratuit&nbsp;et ouvert&nbsp;à tous les niveaux.



Cette séance sera animée par <a href="https://twitter.com/gregcop1">Grégory Copin</a> et sera axée sur les High-Order Component (HOC). Le pattern HOC est centré sur la composition plutôt que l&rsquo;héritage de composants et permet de déplacer l&rsquo;intégralité de la logique en dehors du rendu en gardant un code léger, évolutif et facilement maintenable. Mettre le doigt dans les HOC, c&rsquo;est s&rsquo;assurer de vouloir changer tout le code React écrit jusqu&rsquo;alors. Nous verrons, durant cette séance, quels sont les cas d&rsquo;applications, les solutions existantes mais aussi comment en écrire vous-même. En bref, nous verrons les dix raisons de passer aux HOC&#8230; la quatrième va vous surprendre !



<div class="wp-block-image"><figure class="aligncenter"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/166.png" alt="Micro-formation React" title="Session React"/></figure></div>



Pour participer à cette formation, <a href="https://goo.gl/forms/LNK1n8Yzbv0sC6iX2">inscrivez-vous sur ce Google Forms</a>. Ne tardez pas, cette formation est limitée à 12 personnes !



Pour rappel, nos bureaux de Lille se trouvent à Euratechnologies au 2&nbsp;rue Hegel (Bâtiment Canal face à la Deûle) &#8211; 59160 Lomme (Métro Bois Blancs).&nbsp;Si vous avez la moindre question, envoyez-nous un mail à press@les-tilleuls.coop. À très bientôt !

[Micro-formation] ReactJS et les Higher-Order Components le 27 juin 2017

Save the date ! Le mercredi 3 mai, nous organisons une micro-formation API Platform dans nos bureaux de Lille, de 12h30 à 13h30. Cette micro-formation est gratuite et ouverte à tous.



Animée par <a href="https://twitter.com/dunglas">Kévin Dunglas</a>, cette micro-formation vous permettra de (re)découvrir <a href="https://api-platform.com">le framework PHP et basé sur Symfony, API Platform</a>. Cet outil est destiné à la création d’API Web modernes, puissantes et sécurisées et est adapté à la construction de systèmes d’informations API-centric basés sur l’hypermedia et&nbsp;les Linked Data. API Platform s&rsquo;applique également à la réalisation de Single Pages Applications (en utilisant les librairies React ou Angular) et d’applications mobiles.



<div class="wp-block-image"><figure class="aligncenter"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/161.png" alt="API Platform" title="API Platform"/></figure></div>



Pour participer à cette micro-formation, rien de plus simple : <a href="https://goo.gl/forms/YB9Qbi3VSVvz9AIn2">inscrivez-vous sur ce Google Forms</a>. Attention,&nbsp;le nombre de place est limité à 12 personnes.



Nos bureaux de Lille se trouvent dans le parc d&rsquo;activités d&rsquo;Euratechnologies au 2&nbsp;rue Hegel (Bâtiment Canal face à la Deûle), 59160 Lomme (Métro Bois Blancs). Si vous avez la moindre question, envoyez-nous un mail à press@les-tilleuls.coop. On a hâte de vous voir !&nbsp;