--- title: "Utilisation de Intro.js avec un projet Symfony" excerpt: "A la recherche d'idées pour améliorer l'onboarding de vos utilisateurs, je vous propose de découvrir comment utiliser Intro.js avec un projet Symfony" publishDate: 2022-04-29T00:00:00.000Z tags: ["symfony", "intro-js", "onboarding"] canonical: "https://yoandev.co/utilisation-de-intro-js-avec-un-projet-symfony" --- ## Objectifs Dans cet article nous allons voir ensemble comment mettre en place un onboarding avec [Intro.js](https://introjs.com/) dans une application Symfony. Nous ferons en sorte que cet onboarding ne soit visible que lors de la première connexion de l'utilisateur. ## Initialisation d'un projet Symfony * On initie un nouveau projet Symfony ``` symfony new introjs --webapp cd introjs npm install --force npm run build docker-compose up -d symfony serve -d ``` * Création d'une entité ```User``` *On prends toute les propositions par défaut* ```bash symfony console make:user ``` * Création d'un controller```HomeController``` ```bash symfony console make:controller Home ``` * Création d'une page de registration ```bash symfony console make:registration Creating a registration form for App\Entity\User Do you want to add a @UniqueEntity validation annotation on your User class to make sure duplicate accounts aren't created? (yes/no) [yes]: > yes Do you want to send an email to verify the user's email address after registration? (yes/no) [yes]: > no Do you want to automatically authenticate the user after registration? (yes/no) [yes]: > no What route should the user be redirected to after registration?: [12] app_home > 12 ``` * Création d'une page de login ```bash symfony console make:auth What style of authentication do you want? [Empty authenticator]: [0] Empty authenticator [1] Login form authenticator > 1 The class name of the authenticator to create (e.g. AppCustomAuthenticator): > AppAuthenticator Choose a name for the controller class (e.g. SecurityController) [SecurityController]: > SecurityController Do you want to generate a '/logout' URL? (yes/no) [yes]: > yes ``` * On modifier le fichier ```src/Security/AppAuthenticator.php``` ```php public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $firewallName): ?Response { if ($targetPath = $this->getTargetPath($request->getSession(), $firewallName)) { return new RedirectResponse($targetPath); } return new RedirectResponse($this->urlGenerator->generate('app_home')); } ``` * On modifie le fichier ```config/packages/security.yaml``` ```yaml access_control: # - { path: ^/admin, roles: ROLE_ADMIN } - { path: ^/home, roles: ROLE_USER } ``` * On mets en place Boostrap 5 (via CDN) en modifiant le fichier ```templates/base.html.twig``` ```twig {% block title %}Welcome!{% endblock %} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} {% block body %}{% endblock %} ``` * On génére et applique les migrations ```bash symfony console make:migration symfony console d:m:m ``` * Et enfin on modifie ```templates/home/index.html.twig``` *On mets en place un modèle de mise en page bateau, histoire de ...* ```twig {% extends 'base.html.twig' %} {% block title %}Hello HomeController! {% endblock %} {% block body %}
Album

Album example

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

Main call to action Secondary action

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
{% endblock %} ``` ## Installation de Intro.js Passons enfin à la mise en place de la librairie. * On install la libraire Intro.js ``` npm install intro.js --save ``` * Créons un fichier ```assets/intro.js``` ```js import 'intro.js/introjs.css'; introJs().setOptions({ steps: [{ intro: "Hello world!" }, { element: document.querySelector('.test'), intro: "Ceci est un test", }] }).start(); ``` * Ajoutons notre fichier dans la configuration de Webpack Encore ```webpack.config.js``` ```js .addEntry('intro', './assets/intro.js') ``` * Et utilisons cela dans notre fichier ```templates/base.html.twig``` ```twig {% block title %}Welcome!{% endblock %} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {{ encore_entry_link_tags('intro') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {{ encore_entry_script_tags('intro') }} {% endblock %} {% block body %}{% endblock %} ``` * Puis modifions le fichier ```templates/home/index.html.twig``` pour tester le bon fonctionnement. ```twig

Album example

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

Main call to action Secondary action

``` ![](./images/2022-04-28-17-29-57.png) ## Créons notre Onboarding * Adaptons notre fichier ```assets/intro.js``` ```js import "intro.js/introjs.css"; introJs() .setOptions({ steps: [ { intro: "Bienvenue sur votre espace personnel, nous allons vous guider pour vous aider à prendre en main votre espace personnel.", }, { element: document.querySelector(".intro-step1"), intro: "Ceci est le nom de votre espace personnel.", }, { element: document.querySelector(".intro-step2"), intro: "Ceci est le bouton d'action principale de votre espace personnel.", }, { element: document.querySelector(".intro-step3"), intro: "Ceci est le bouton d'action secondaire de votre espace personnel.", }, { element: document.querySelector(".intro-step4"), intro: "Ceci est une carte de votre espace personnel.", }, { element: document.querySelector(".intro-step5"), intro: "Ceci est le bouton View", }, ], }) .start(); ``` * Adpatons notre fichier ```templates/home/index.html.twig``` ```twig {% extends 'base.html.twig' %} {% block title %}Hello HomeController! {% endblock %} {% block body %}
Album

Album example

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

Main call to action Secondary action

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
{% endblock %} ``` * Et vérifions le résultat : ![](./images/2022-04-28-17-43-46.png) ## Onboarding que lors de la première connexion * Gérons la première connexion en ajoutant un champ à notre entité User : ```bash symfony console make:entity User Your entity already exists! So let's add some new fields! New property name (press to stop adding fields): > isFisrtConnexion Field type (enter ? to see all types) [boolean]: > boolean Can this field be null in the database (nullable) (yes/no) [no]: > yes symfony console make:migration symfony console d:m:m ``` * Refactorons l'import du CSS et du JS d'intro.js en le supprimant de ```templates/base.html.twig``` et en l'ajoutant dans ```templates/home/index.html.twig``` : *De cette manière Intro.js ne sera chargé que lorsque cela sera nécessaire.* ```twig {% block body %} ... {% block javascripts %} {{ parent() }} {% if app.user.isFirstConnexion %} {{ encore_entry_script_tags('intro') }} {% endif %} {% endblock %} {% block stylesheets %} {{ parent() }} {{ encore_entry_link_tags('intro') }} {% endblock %} ... {% endblock %} ``` * Et enfin gérons le champ ```isFirstConnexion``` lors de l'ouverture de session en adaptant le fichier ```src/Security/AppAuthenticator.php``` ```php public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $firewallName): ?Response { $user = $token->getUser(); if (true === $user->getIsFirstConnexion()) { $user->setIsFirstConnexion(false); $this->em->persist($user); $this->em->flush(); } if (null === $user->getIsFirstConnexion()) { $user->setIsFirstConnexion(true); $this->em->persist($user); $this->em->flush(); } if ($targetPath = $this->getTargetPath($request->getSession(), $firewallName)) { return new RedirectResponse($targetPath); }; return new RedirectResponse($this->urlGenerator->generate('app_home')); } ``` ## Code source - [Github](https://github.com/yoanbernabeu/intro.js-avec-symfony)