PREMIUM & PROFESSIONAL PRESENTANTION

Développeur et testeur d’applications web

Soutenance de stage

Sommaire

Principe de Symfony et Réalisation du TP Sportrack

Présentation de l'entreprise

Développement de tests avec Playwright

Conclusion

Méthode de travail et environnement technique

Structure des tests

Présentation du projet AD4YOU

Le cahier des charges

Fonctionnalité ajout clients CSV

Réalisation des tests

Présentation de l'entreprise

01

LE groupe SIPA ouest france

• Leader de la presse régionale
• 2ème média national
• Contient des radios, des télévisions locales et de nombreux hebdomadaires

Méthode de travail et environnement technique

Présentation de l'entreprise

Cahier des charges

ADDITI MeDIA

Additi Média est réparti en 8 activités spécialisées par marché :

• Alimentation
• Auto
• Commerce et Loisirs
• Emploi

• Habitat
• Immobilier
• Funéraire
• Services et Collectivités

Méthode de travail et environnement technique

Présentation de l'entreprise

Cahier des charges

Méthode de travail et environnement technique

02

Méthode de travail

Agile

Planification du sprint

rétro

daily

Backlog

Réunion quotidienne de 15 minutes dont le but est de faire un point sur la progression journalière du sprint

Cette réunion permet à l’équipe d’établir les éléments qu’elle traitera au cours de ce Sprint et comment elle procédera

L’adaptation aux changements qui peuvent survenir et l’amélioration continue du processus de réalisation

Permet de définir en détail le niveau de difficultés des tickets jira sous forme de point

Méthode de travail et environnement technique

Présentation de l'entreprise

Cahier des charges

Environnement technique

GITLAB

DOCKER

Plateforme permettant d'héberger le code et de gérer les versions de celui-ci

Plateforme de virtualisation de conteneurs qui permet d'isoler les applications dans des conteneurs légers

PHP storm

Symfony

IDE (Integrated Development Environment) pour le développement de sites web avec PHP, HTML, CSS et JavaScript.

Framework php qui permet le développement d’applications web plus faciles et plus rapides.

Méthode de travail et environnement technique

Présentation de l'entreprise

Cahier des charges

Environnement technique

MYsql

Système de gestion de base de données relationnelles open source. Il permet de stocker, organiser et accéder à des données.

Méthode de travail et environnement technique

Présentation de l'entreprise

Cahier des charges

Cahier des charges

03

cahier des charges

• Effectuer le TP SporTrack en utilisant le Framework Symfony.
• Réaliser des tâches simples d’ajouts de fonctionnalités sur l’application AD4YOU

Méthode de travail et environnement technique

Présentation de l'entreprise

Cahier des charges

Principe de Symfony et Réalisation du TP Sportrack

01

LES ROUTES

Renvoie vers le moteur de recherche de google

Système qui permet de se rendre sur une page grâce à une URL.

Renvoie vers Google maps

Exemple de route

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

LES Entités

Une entité représente une classe PHP qui correspond à une table dans la base de données.

Exemple de relation entre une entité et sa table

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

LES Entités

Commande de création d’entité Symfony

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

SPORTrACK

TP développement Web R3.01

ajout de fichiers JSON

ajout utilisateur

déconnexion

connexion

permettre la connexion d'un utilisateur avec vérification des champs dans la base de données

ajouter des fichiers au format JSON d'activités sportives consultable sur le site web

permettre l'ajout d'un utilisateur

Se déconnecter de l'application.

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

ajout utilisateur

Création de l'utilisateur avec les informations du formulaire

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

ajout utilisateur

Hachage du mot de passe

Ajout dans la base de données

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Connexion

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Connexion

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Présentation du projet AD4YOU

02

AD4YOU

• Date de création : 2019
• Utilisateurs : Les commerciaux d’Additi média auprès de la clientèle.
• Fonctionalités : Permet une proposition de communication digitale ciblée, ainsi que l'envoie d'un rapport de campagne.

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

AD4YOU

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Structure de l'applciation

• L’application respecte le principe de bonnes pratiques en Symfony.
• Chaque dossier possède un rôle bien spécial au bon fonctionnement d’une application web
• Respect le modèle MVC

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

03

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

processus de développement

ajouter les données dans la BDD

extraire les données du fichier CSV

afficher la validation de l'importation

04

03

01

02

traiter les données reçues

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Table Client

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Résultat

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Conclusion première partie du cahier des charges

Réalisation du ticket Jira sur l'implémentation d'un client via un jeu de données en CSV :

• Traitement des données
• Implémentation dans la base de données
• Vérification des champs

Réalisation du TP SporTrack avec le framework Symfony :

• Création de routes
• Création d'entité
• Tâche réalisée en 3 jours au lieu de 2 semaines

Développement de tests avec Playwright

01

Cahier des charges

• Déployer des scénarios de tests end-to-end automatisés à l'aide de l'outil Playwright.
• Permet de garantir le bon fonctionnement de l'application et d'identifier rapidement les éventuels problèmes.

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Playwright

• Projet open-source maintenu et sponsorisé par Microsoft
• Permet de piloter les principaux navigateurs web : Chrome, Firefox, etc…
• Permet de faciliter les tests end-to-end fiables pour le web moderne.

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Structure des tests

02

processus de développement de test

retranscrit le scénario en code

écrit un test de cas d'utilisation

03

01

02

lance le test automatisé

Développeur

Product Owner

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Type de fichier

TestCampagne.features

• Permet au PO (Product Owner) de créer des scénarios
• Structure du fichier assez simple à comprendre même pour quelqu'un qui ne code pas

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Type de fichier

TestCampagne.ts

• Permet au développeur de retranscrire le scénario en code
• Appelle les fonctions du fichier TestCampagePage.ts

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Type de fichier

TestCampagnePage.ts

• Permet au développeur d'écrire le code de test en fonction du scénario du PO
• Permet la factorisation du code afin d'améliorer la compréhension

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

LOCATOR

• Composante majeur de l'utilisation de Playwright
• Permet d’obtenir les composants d’une page web
• Bouton, textArea, lien, tableau, etc...

Exemple de locator qui prend le bouton se connecter

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Assertion

• Permet de vérifier le contenu de la page web
• Stoppe le scénario de test quand une erreur est lancée.
• Permet de verifier l'affichage, le contenu, etc...

Vérification sur la page de connexion que le bouton est bien affiché

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Réalisation des tests

03

Test du chemin critique

05

04

03

01

02

contrat

rubrique

Campagne

Offre

listeformat

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Campagne

• Vérification des données
• Vérification des boutons
• Vérification du système de recherche
• Vérification de la suppression, modification et création d'une campagne

Page Liste des campagnes

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

CalculatriceFacebook

• Permet de trouver le pack idéal de campagne selon plusieurs critères (âge, genre,persona)
• Permet de choisir le secteur en fonction de plusieurs critères (code postaux, autour d'une adresse)

Page Calculatrice Facebook

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Exemple bug

Scénario d'utilisation de la calculatrice Facebook

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Résultat

Message d'erreur dans le terminal de commande

Développement de tests avec Playwright

Structure des tests

Réalisation des tests

Conclusion deuxième partie du cahier des charges

Réalisation de tests end-to-end en Playwright :

• Test du chemin critique
• Test de la calculatrice Facebook
• Test du catalogue
• Rapports d'erreurs constants fournis à mon maître de stage
• Documentation syntèse de l'utilisation de Playwright

Conclusion

01

Conclusion

• 1er expérience dans le monde du travail/équipe de développement
• Expérimentation de la méthode agile
• Apprentissage du framework Symfony
• Développement de tests end-to-end
• Ajout de fonctionnalités sur l'application web
• Fix de bug

Merci!