PREMIUM & PROFESSIONAL PRESENTANTION

Soutenance de stage

Développeur et testeur d’applications web

Fonctionnalité ajout clients CSV

Conclusion

Structure des tests

Réalisation des tests

Développement de tests avec Playwright

Principe de Symfony et Réalisation du TP Sportrack

Présentation du projet AD4YOU

Sommaire

Méthode de travail et environnement technique

Le cahier des charges

Présentation de l'entreprise

01

Présentation de l'entreprise

Cahier des charges

Méthode de travail et environnement technique

Présentation de l'entreprise

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

LE groupe SIPA ouest france

Cahier des charges

Méthode de travail et environnement technique

Présentation de l'entreprise

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

ADDITI MeDIA

02

Méthode de travail et environnement technique

Cahier des charges

Méthode de travail et environnement technique

Présentation de l'entreprise

rétro

Planification du sprint

Backlog

daily

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

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

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

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

Agile

Méthode de travail

Cahier des charges

Méthode de travail et environnement technique

Présentation de l'entreprise

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

Symfony

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

PHP storm

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

GITLAB

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

DOCKER

Environnement technique

Cahier des charges

Méthode de travail et environnement technique

Présentation de l'entreprise

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

MYsql

Environnement technique

03

Cahier des charges

Cahier des charges

Méthode de travail et environnement technique

Présentation de l'entreprise

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

cahier des charges

01

Principe de Symfony et Réalisation du TP Sportrack

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Exemple de route

Renvoie vers Google maps

Renvoie vers le moteur de recherche de google

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

LES ROUTES

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Exemple de relation entre une entité et sa table

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

LES Entités

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Commande de création d’entité Symfony

LES Entités

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

ajout de fichiers JSON

déconnexion

connexion

ajout utilisateur

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

Se déconnecter de l'application.

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

permettre l'ajout d'un utilisateur

TP développement Web R3.01

SPORTrACK

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

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

ajout utilisateur

Ajout dans la base de données

Hachage du mot de passe

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

ajout utilisateur

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Connexion

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Connexion

02

Présentation du projet AD4YOU

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

• 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.

AD4YOU

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

AD4YOU

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

• 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

Structure de l'applciation

03

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Fonctionnalité ajout clients CSV

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

afficher la validation de l'importation

ajouter les données dans la BDD

traiter les données reçues

04

03

02

01

extraire les données du fichier CSV

processus de développement

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Table Client

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Méthodologie

Boucle foreach qui pour chaque clients insère les données du fichier CSV

Méthode d'extraction des données

Présentation du projet AD4YOU

Fonctionnalité ajout clients CSV

Principe de Symfony et Réalisation du TP Sportrack

Résultat

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

Conclusion première partie du cahier des charges

01

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

Développement de tests avec Playwright

• 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.

Cahier des charges

Réalisation des tests

Structure des tests

Développement de tests avec 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.

Playwright

02

Structure des tests

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

Diagramme d'exemple simplifié

Structure des tests

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

Développeur

Product Owner

lance le test automatisé

retranscrit le scénario en code

03

02

01

écrit un test de cas d'utilisation

processus de développement de test

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

• 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

TestCampagne.features

Type de fichier

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

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

TestCampagne.ts

Type de fichier

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

• 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

TestCampagnePage.ts

Type de fichier

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

Exemple de locator qui prend le bouton se connecter

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

LOCATOR

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

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

• 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...

Assertion

03

Réalisation des tests

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

05

listeformat

04

03

02

01

contrat

rubrique

Offre

Campagne

Test du chemin critique

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

• 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

Campagne

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

• 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

CalculatriceFacebook

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

Scénario d'utilisation de la calculatrice Facebook

Exemple bug

Développement de tests avec Playwright

Réalisation des tests

Structure des tests

Message d'erreur dans le terminal de commande

Résultat

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 deuxième partie du cahier des charges

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

Conclusion

Merci!