Acerca de
Contexte
"eDovel" est une Agence de communication web spécialisée dans la création de site internet mais également dans l'impression de support de communications tous formats. Elle propose aussi des prestations sur mesure dans le multimédia (Photo / vidéo, stratégie digitale).
​Afin de faciliter la prise de commande en ligne, eDovel souhaite mettre en place un système de devis personnalisé. Elle fait appel à nous stagiaires pour créer un formulaire capable de chiffrer le besoin du client.
Cahier des charges
Le besoins sont définis lors d'un premier entretien. Notre responsable de Stage nous communique un fichier excel renfermant toutes les exigences de l'entreprise pour le projet. Voici les grandes lignes :
-
Un formulaire de 6 étapes.
-
Le prix de la prestation doit évoluer selon les choix du client.
-
Les éléments doivent être clairs et l'aspect moderne.
-
Le formulaire est dynamique (Rapide, apparition options selon les choix).
-
Le support peut être effectué sur le CMS Wordpress ou sur Symfony.
Démarrage
Nous avons la totalité des 6 semaines pour réaliser ce projet. Celui-ci va se dérouler majoritairement en distanciel. Nous allons nous rendre sur place une fois par semaine pour définir les objectifs hebdomadaires et faire un point sur l'avancée du projet.
Analyse
La première semaine se déroule en distanciel. Nous devons pour ce faire analyser concrètement le besoin pour proposer un produit adapté. Il s'agit donc de :
-
Proposer des maquettes (WireFrame).
-
Choisir les outils de production.
Maquettes
La première étape de production va consister à fournir au client un aperçu du produit fini tel que nous le concevons d'après les éléments dont nous disposons.
-
En collaboration avec Maxime Ledru pour ce stage , nous décidons de proposer deux maquettes complètement différentes afin de laisser un choix pour EDOVEL.
Objectifs
-
Lors de ce stage, mon rôle va consister à produire un formulaire dynamique et moderne.
​
-
Intégrer le CSS et proposer un format "responsive".
​
-
Coopérer dans la réalisation de sprints. Et progresser en autonomie.
​
OUTILS
Framagit - GitLab
Le premier outil que nous mettons en place pour gérer la répartition des tâches et surtout le versionnage de notre code est FramaGIT.
Le milestone (board) sur framagit nous a permis de gérer l'état des tâches (à faire, en cour ou fini)
Les deux branches principales master et dev. Historique des merges.
Le développement
IDE - PHPStorm
Nous avons utilisé l'IDE PHP STORM de la licence JetBrains pour éditer notre code et ainsi concevoir le site.
Framework vueJs
Nous avons choisi de développer le formulaire sous vue.Js . Vue.js, est un framework JavaScript open-source utilisé pour construire des interfaces utilisateur et des applications web monopages.
Problèmes rencontrés
Dans un premier temps nous avons voulu créer un projet Symfony , et y intégrer les outils ci-dessus. Cependant nous avons constaté au bout de 2 semaines que Symfony ne nous étais d'aucune utilité et que le moteur de template twig utilisé pour la vue, empêchait vue.js de fonctionner correctement.
​
Afin de fluidifier la page web et de clarifier le code, nous avons migré notre travail sur un projet plus léger contenant le strict nécessaire.
ORGANISATION
Voici les informations dont nous disposons au lancement du stage :
​
-
Antoine Colin notre maître de stage nous fournit le fichier excel évoqué en introduction contenant toutes les informations que doit contenir le formulaire. (Etapes, options, prix..). Il me contacte par téléphone pour étudier le document.
Aperçu des deux premières étapes illustrées dans ce dernier
Autonomie
Le projet se déroule en autonomie. Nous devons donc en plus des détails de production établir notre propre suivi :
​
-
Retranscription des tâches à l'écrit.
-
Classement selon les priorités en matière de temps et de moyens.
-
Composition de sprints par semaine avec Maxime.
​
Les sprints que nous choisissons d'établir sont hebdomadaires car les souhaits de l'entreprise peuvent varier d'une semaine à l'autre.
Notre maître de stage n'étant pas formé sur les langages et outils que nous exploitons, il n'est pas à même de nous accompagner sur la production. Cependant Antoine nous précise régulièrement au travers de capture légendées ou bien à l'oral les modifications à apporter.
Il est intéressant de considérer l'entreprise EDOVEL comme un client, qui possède un projet. C'est à nous d'apporter les moyens techniques pour le rendre réalisable, de prendre en compte la faisabilité des demandes en matière de temps et de compétences.
Quelques Tâches..
Envoi par mail
Lors de la validation du formulaire, l'utilisateur est redirigé sur une page de récapitulatif puis peut envoyer les informations au prestataire. Cette action se traduit donc par l'envoi du formulaire par mail.
Pour intégrer cette fonctionnalité dans notre code nous avons utilisé MailJet qui est un service d’envoi d’emails français
Mail Jet
Intégration
Le service mail Jet propose l'email Api qui fonctionne sous différents langages.
​
Nous avons choisi le framework Node.Js, car il se base sur le langage javascript que nous utilisons déjà sous vue.Js .
Difficultés rencontrées
Node js étant un ensemble de modules côté serveur, ces derniers ne sont pas reconnus sur les navigateurs. Nous avons donc rencontrés de réelles difficultés pour intégrer la fonctionnalité mailjet, sans succès.
Mise en ligne
Le projet lors de sa conception est testé en local sur le serveur web intégré à PHP Storm. À terme, le produi doit être livré, et dans ce cas concret, mis en ligne sur le site web de l'entreprise.
Filezilla
Pour exporter l'intégralité de notre code en ligne, un serveur File Transfert Protocol (FTP) est mis à notre disposition. Nous utilisons le client FTP FileZilla pour transférer le projet.
​
La mise en ligne sur le site web est effectuée par leur soins. Le site étant réalisé sous Wordpress.
RGPD
Le formulaire collecte de nombreuses informations personnelles de l'utilisateur. Il est donc obligatoire qu'il valide les rgpd et conditions générales de vente pour finaliser le formulaire.
​
Nous nous sommes donc appuyé sur les conditions générales d'utilisation existant sur leur site web pour l'intégrer à notre projet.
Maintenance
Une fois le produit livré et mis en ligne, il faut s'assurer que le projet sera maintenable par EDOVEL. Il est donc nécessaire de former nos maitres de stage sur le fonctionnement et la maintenance de l'application.
​
-
Au cour de la dernière semaine nous leur expliquons comment faire pour ajouter et/ou retirer des options.
-
Éditer le formulaire à travers le code.
​
-
Nous adaptons également le code pour qu'il soit accessible aux non - développeurs.
​
Lors de la semaine suivant le stage nous intervenons sur une maintenance avant mise en service sur certaines anomalies.
Capture d'un mail envoyé après le stage, problème réglé par nos soins.
Le projet est aujourd'hui en service et disponible ici !
Autres outils
Quelques outils qui nous ont été utiles au cours de ce stage :
Stack Overflow
(Doc support)
W3Schools
(Doc Css)
VueJs.org
(Doc support)
GMail
(Communication distanciel avec Edovel)
Discord
(Communication avec Maxime en distanciel)
Compétences
Pour ce projet nous avons mis en pratique les compétences suivantes du Bloc 1 :
​
-
Gérer le patrimoine informatique [C.n-1]
-
Répondre aux incidents et aux demandes d'assistance et d'évolution [C.n-2]
-
Développer la présence en ligne de l'organisation [C.n-3]
-
Travailler en mode projet [C.n-4]
- Mettre à disposition des utilisateurs un service informatique [C.n-5]
​