Vous êtes sur la page 1sur 28

 

 
RAPPORT DE STAGE 
Projet : Perles à tout va  
 

Matthias BENOIT 

 
 

 
 
 

Remerciements 
Dans  un  premier  temps,  je  remercie  mes  employeurs de m’avoir laissé la possibilité 
de m’épanouir au sein de l’équipe d’AMT Solutions.  

Je  remercie  ​Martin  DOLLY  ​et  ​Thomas  FOOS  ​pour  leur  soutien  durant  mon 
apprentissage et durant lequel ils m’ont apporté leurs connaissances.  

Je  remercie  ​Audran  GAGNEVIN  pour  cet  apport  de  connaissance  dans  le  domaine 
du commercial et du relationnel. Un très grand merci à eux. 

Je  remercie  ​Jocelyn  FAIHY​,  un  collègue  avec  qui  j’ai  pris  beaucoup  de  plaisir  de 
travailler avec lui. 

Je  remercie  également  ​Mennad  SEKOUR​,  ancien  alternant  avec  qui  j’ai  travaillé  sur 
de nombreux projets avant son départ. 

 

 
 

Glossaire 
 

PATV  Perles à tout va 

CEO  Chief Executive Officer / Directeur Général 

CTO  Chief Technical Officer / Directeur des nouvelles technologies 

COO  Chief Operating Officer / Directeur de l’exploitation 

CMS  Content Management System / Système de gestion de contenu 

R&D  Recherche et développement 

HTML  HyperText Markup Language 

CSS  Cascading Style Sheets 

PHP  Hypertext Preprocessor 

 
 

 

 
 

Table des matières 


Remerciements 2 

Glossaire 3 

Table des matières 4 

Introduction 5 

Présentation d’AMT Solutions 6 


Historique 6 
Les technologies utilisées 7 
Mon rôle 10 
Mes missions 11 

Projet 12 
Contexte 12 
Besoin 13 
Contraintes 14 
Risques identifiés 14 
Système existants 15 
Déterminer critères de “succès de projet” 16 

Analyses & Choix 16 


Les fonctionnalitées 16 
Woocommerce 16 
Formulaire de contact 17 
Blog 17 
Newsletter 18 
Wishlist (Favoris) 18 
La technologie mise en place 19 
CMS 19 
Language 19 

Conclusion 21 
Bilan Professionnel 21 
Bilan Personnel 21 

Annexes 23 

 

 
 

Introduction 
 

Le  développement  informatique  est  une  activité  qui  prend  de  plus  en  plus 
d’importance  au  sein  des  entreprises. Un très bon moyen aujourd’hui pour elles de se faire 
connaître,  est  d’avoir  un  site  internet  ou  encore  une  application  utilisable  sur  smartphone 
ou  PC.  Il  faut  donc  des  personnes  qualifiées  aussi  bien  pour  la  création  de  ces  sites  que 
pour la gestion des données qui vont y transiter.  

Durant  cette  année  de  formation  en  entreprise,  mon  travail  a  été  de  répondre  à ce 
besoin.  Pour  cela,  j’ai  rejoint  l’équipe  d’​AMT  Solutions​.  AMT  Solutions  est  une  agence 
travaillant  sur  la conception et la réalisation de site web pour particuliers et professionnels. 
Ma  position  au  sein de cette structure était celle d’un développeur web Junior. Tout au long 
de  ma  formation,  j’ai  travaillé  sur  de  nombreux  sites  internet  mais  tout  particulièrement 
sur P
​ erles à Tout Va​ (​PATV​). 

Dans  un  premier  temps,  je  présenterai  l’agence  ​AMT  Solutions​,  ses  membres,  le 
matériel  informatique  utilisé  et  la  façon  de  procéder  au  sein  de  cette  équipe.  Et  dans  un 
deuxième  temps,  je  vous  détaillerai  ce  pour  quoi  j’ai  été  embauché  et  du  déroulement  de 
cette année d’alternance.  

 

 
 

1. Présentation d’AMT Solutions 

a. Historique 
 

AMT  ​Solutions  est  une  agence  Web  créée  le  22-07-2013  situé  à  Lyon,  plus  exactement  au 
11  rue  Sainte  Catherine.  Ne  comprenant  que  5  membres,  moi  y  compris,  cette  agence 
n’aurait pas pu voir le jour sans ses trois cofondateur qui sont : 

- A​udran GAGNEVIN, CEO (Chief Executive Officer ou Directeur Général) 


- M​artin  DOLLY,  CTO  (Chief  Technical  Officer  ou  Directeur  des  Nouvelles 
Technologies)  
- T​homas FOOS, COO (Chief Operating Officer ou Directeur de l’exploitation). 

Comme l’aime dire Mr.GAGNEVIN : 

“ Pour la petite histoire, AMT est le diminutif d’Audran, Martin et Thomas “  

 

 
 

b. Les technologies utilisées 


 

Tout  au  long  de  mon  apprentissage,  j’ai  dû  me  familiariser  avec  des  technologies 
que je ne connaissais pas avant d’intégrer l’équipe d’AMT Solutions.  

L’un  des  plus  gros  changements  que  j’ai  dû  faire  a  été  de  changer  de  système 
d’exploitation.  Lors  de  mon  arrivée,  ils  avaient  mis  en  place  sur  mon  poste  de  travail  le 
système d’exploitation F
​ EDORA​, de la distribution GNU/Linux.  

En  plus  de  ce  système  d’exploitation,  nous  utilisons  ​Virtualbox  avec  ​Vagrant  afin 
de  virtualiser  des  environnements  de  développement.  Lors  d’un  nouveau  projet,  nous 
créons  une ​vagrant liée au projet qui sera accessible par tous les développeur et simple de 
mise  en  place.  Avec  ​Vagrant​,  en  5  minutes, un nouveau développeur peut travailler sur un 
projet  déjà  existant.  Il lui suffit de récupérer le projet sur notre serveur ​Git​, de rentrer dans 
le  dossier  projet  et  en  ligne  de  commande  depuis  un  terminal  de  taper  la  commande 
suivante : 

“vagrant up --provider virtualbox” 

 

 
 

Cette  commande  permet  de  lancer  la  création  du  nouvel  environnement  sans  devoir 
passer par toutes les étapes de configurations. 

Nous  possédons  également  un  serveur  ​Git  afin de versionner nos projets. ​Git étant 


un  logiciel  libre,  il  a  été  simple  de  le  mettre  en  place  sur  nos  serveurs.  Chaque  projet 
possède  son  ​Repository​,  et  en  fonction  du  type  de  projet,  les  ​Repository  peuvent  avoir 
plusieurs b
​ ranches​ telles que “​Dev​” ou encore “​Preprod​”. 

 

 
 

Nous  utilisons  également  le  logiciel  ​Harvest  ​qui  est  un  time  tracker,  un  logiciel  de 
gestion  des  temps.  Il nous permet de définir le temps global d’un projet (ex: 35 h) et de voir 
combien  de  temps  il  nous  reste  sur  celui-ci.  Que  ce  soit  le  développement  d’un  site  ou 
encore de maintenance, nous entrons toutes nos valeurs temps dans ce logiciel. 

Pour  le  système  de  tickets,  nous  utilisons  le  logiciel  ​Redmine​.  Il  s’agit  d’une 
application  libre  de  droits  qui  est  installé  sur  les  serveurs  de  l’entreprise  développée  en 
Ruby.  Nous  donnons  un  accès  à  nos  clients  afin  que  ceux-ci  en  fonction  du  type  de  projet 
puissent  renseigner  des  bugs  ou  des  évolutions  à  mettre  en  place  sur  le  site.  Lorsqu’un 
client  rentre  un  nouveau  ticket  nous  sommes  tout  de  suite  informés  par  un  mail  qui 
reprend les informations de celui-ci.  

 

 
 

Pour  ce  qui  s’agit  de  l’​IDE  (Environnement  de  développement),  j’utilise  le  logiciel  de 
la  licence  ​JetBrains  ​PHPStorm  avec  un  compte  étudiant  grâce  à  l’école  ​Sciences-U  ou 
sinon j’utilise l’éditeur libre qu’est ​ATOM​. 

c. Mon rôle 
 

Au  sein  du  groupe  d’AMT Solutions, mon rôle principal est le développement du site 


web.  En  fonction  des demandes, j’étais dans l’obligation de faire de la correction de bug, de 
la  correction  graphique,  et  de  l’évolution. En plus du côté développement, je dois gérer des 
appels  téléphoniques  des  clients  afin  de  faire  du  SAV  (Service  Après  Vente),  je  dois  leur 
fournir un soutien technique lors de problèmes ou lorsqu’ils ont des questions. 

 
10 
 
 

d. Mes missions 
 

Tout long de cette année, mes employeurs mon donné trois objectifs à atteindre à la 
fin de mon contrat.  

- Le  premier,  est  de  gérer  le  développement  et  la  livraison  de  2  à  3  sites  dans  les 
délais  prévus.  Cet  objectif  ,pour  l’heure,  est  atteint  puisque  cette  année  j’ai  eu  la 
possibilité  de  travailler  pour  2  clients dont le domaine est très différent de l’un et de 
l’autre  :  le  premier  est  ​Perles  à  tout  va​,  pour  de  la  vente  de  perles,  et  pour  ​Ixon​, 
leader dans la vente d’équipement moto. 
- En  parallèle  au  développement  de  ces  2  sites,  je  devais  m’occuper de demandes de 
clients  qui  ont  signé  avec  AMT  Solutions  des  “crédit-temps”.  Il  s’agit  de  demande 
valorisée  en  temps.  Il  s’agissait  pour  la  plupart  du  temps  d’évolutions  ou  de 
modifications  minime,  sans  que  cela  ne touche au fonctionnement du site global ou 
de refont visuel. 
- Ajouter  à  tout  cela,  nous  avons  également  un  système  de  maintenance.  Le  client 
avait  la  possibilité  de  choisir  une  maintenance  corrective  durant  laquelle  je  devais 
m’assurer  du  bon  fonctionnement  du  site  web. Je devais être informé en temps réel 
si  l’un  des  sites  dont  j’avais  la  garde  était  hors-service  afin  de  remédier  à  cela.  De 
plus  si  le  client  voyait  sur  le  long  terme  des  anomalies,  je  me  devais  de  les  corriger 
et en fonction du niveau d’urgence, le plus rapidement possible.  
Le  client  peut  également  choisir  une  maintenance  évolutive.  Durant  cette 
maintenance  le  client  peut  à  tout  moment  de  la  journée  me  communiquer  une 
demande  de  changement  que  se  soit  fonctionnel  ou  graphique.  La  demande  ne 
devait  pas  dépasser  un  certain  seuil  de  temps  de  travail ce à quoi, nous proposions 
au client un crédit-temps à la place. 

 
11 
 
 

2. Projet 
 

Pour  la  partie  projet,  je  vais détailler en particulier un projet qui me tient à coeur et qui m’a 


apporté énormément de connaissance, il s’agit du site web P
​ erles à tout va​ (​PATV​). 

a. Contexte 
 

Perles  A  Tout  Va  est  une  société  lyonnaise  créée  en  2003,  spécialisée  dans la vente de 
perles  en  gros,  de  fournitures  bijoux  et  de  sequins  émaillés.  Capitalisant  sur  une offre produit 
très  large,  ​Perles  A  Tout  Va  (​PATV​)  est  une  entreprise  locale  portée  par  des  spécialistes  et 
amatrices  de  bijoux  DIY  (Do  It  Yourself).  En  plus  d’une  large  gamme  de  produits  proposés  à  la 
vente,  ​PATV  met  à  disposition  de  ses  clients  de  nombreux  tutoriels  pour  créer  soi-même  ses 
bijoux.  

Avant  notre  intervention,  Le  site  ​Perles  A  Tout  Va  était  motorisé  par  la  ​Box 
E-Commerce  du Groupe ​La Poste​. La gérante de l’entreprise souhaitait passer sur une solution 

 
12 
 
 
plus  flexible  et  surtout  open-source.  Ainsi,  nous  lui  avons  proposé  de  migrer  sur  la  solution 
WordPress  +  ​Woocommerce  dont  la  légèreté  et  la  flexibilité  sont  des  atouts  maîtres  dans  les 
futures  évolutions  du  site.  De  plus,  cette  solution  propose  une  meilleure  vision quand au cycle 
de développement et de mises à jour techniques sur la durée. 

b. Besoin 
 

Les  besoins,  nombreux  qu’ils  furent,  ont  été  énoncé  dans  un  cahier  des  charges  et 
revu  lors  d’une  réunion  avant  le  début  des  développements afin d’organiser et de planifier 
les travaux à faire afin de terminer le projet dans les temps. 

Dans  un  premier  temps,  les  besoins  majeurs  du  client  étaient  la  refonte  graphique 
de l’existant. Pour cela, PATV a recruté un graphiste afin que celui-ci travail sur le design.  

Il  nous  faisait  part  au  fur  et  à  mesure  qu’il  terminait  le  graphisme  de  certaines  pages  des 
PSD  (format  Photoshop  Document).  A  partir  de  ces  fichiers,  nous  faisions  ce  que  nous 
appelons  du ​Pixel Perfect​, c’est-à-dire que nous faisions en sorte que lorsqu’une page côté 
développement  était  terminée,  celle-ci  devait  être  à  l’identique  de  celle  envoyé  par  le 
graphiste.  

De  plus  le  site  devait  toujours  répondre  au  critère  qu’est  l’e-commerce,  c’est-à-dire 
que  celui-ci  devait  procéder  d’un  catalogue  de  produit,  d’un  panier  et  d’un  système  de 
paiement fonctionnel. 

PATV  voulait  également  un système d’import et d’export que ce soit pour les clients, 


les produits ou encore les articles afin de récupérer ces données sur les sites existants. 

 
13 
 
 

c. Contraintes 
 

Avant  le  développement  du  projet,  certaines  contraintes  ont  été  mise  en place telle 
que : 

-   le  temps,  le  nouveau  site  devait  être  terminé  pour  le  début  de  l’année  2019  sans 
que cela ne perturbe les ventes en lignes. 
- la  contrainte  technique  qu’est  l’utilisation  du  ​CMS  ​Wordpress  pour  gestions  des 
contenus  et  des  articles  par  son  back-office  qui  est  facile  d’utilisation  et  de 
compréhension.  
- la  contrainte  graphique  avec  la  participation  d’un  graphiste  extérieur  qui  devait 
nous fournir le design que nous devions mettre en place. 

d. Risques identifiés 
 

Avant  le  développement de cette nouvelle plateforme de vente, nous avons identifié 


quelque potentiels risques que nous pouvions rencontrer tout au long du projet : 

- L’utilisation  d’un  nouvel  outil  qu’est  ​Woocommerce​,  un  plugin  de  ​Wordpress  pour 
la  mise  en  place  d’un  e-commerce.  ​PATV  est  le  premier  site  e-commerce  que  je 
faisais,  il  me  manquait  quelque  acquis.  Pour  cela  j’ai  dû  faire  de  la  ​R&D  ​(Recherche 
et développement) afin de combler mes lacunes en plus de l’aide de mes collègues. 
- Le  système  de  paiement  non fonctionnel dû à des problèmes de développement ou 
encore à un problème lié à la banque qui possédait le compte. 

 
14 
 
 
- L’import  des  clients  ainsi  que  les  précédentes  commandes  du  site  existant  au 
nouveau  site.  Ayant  une  grande  quantité  de  client,  ​PATV  souhaitait  à  tout  prix 
récupérer sa liste de clients avec les informations liées à ceux-ci. 
- L’import et l’export de produits qui permettrait une meilleure gestions des produits. 
- L’import  des  articles.  ​Perles  A  Tout  Va  utilisait  l’outil  ​Blog  de  ​Google  et  désirait  de 
l’ajouter au Wordpress pour avoir une seule plateforme à gérer. 
- Un serveur peu performant pour héberger le nouveau site web. 
- La  performance  du  site  web  trop  basse  ce  qui peut entraîner un affichage trop long 
et donc le départ de certains utilisateurs.  
- Un  potentiel  retard  sur la mise en prod qui peut être du à plusieurs facteurs comme 
retard  dans  la  délivrance  des  visuels,  l’import  des  produits  non fonctionnels et bien 
d’autres. 
- Une  potentielle  perte  de  client  dû  au  changement  graphique  du  site.  De  nombreux 
habitués  à  des  sites  peuvent,  en  cas  de  changement  majeur  d’un  site  web,  ne  plus 
apprécier celui-ci et partir ou arrêter d’utiliser le site. 

e. Système existants 
 

Perles  A  Tout  Va  possédait  déjà  un  site  e-commerce  ​motorisé  par  la  ​Box 
E-Commerce  du  Groupe  ​La  Poste.  ​Celui-ci  très  fonctionnel  mais  ne  permettait  pas  de 
développer  un  visuel  plus  récent,  plus  jeune  que  l’existant.  Très  restreint 
fonctionnellement,  il  permettait  uniquement  la  vente  de  produits  sans  pouvoir  laisser  la 
possibilité  de  créer  d’autre  page  de  contenu  ou  encore  de  blog  comme souhaité par ​PATV 
et  c’est  pour  cela  qu’il  ​utilisait  l’outil  ​Blog  de  ​Google  qui,  lui,  ne  permettait  que  la  création 
d’article, d'actualités. 

Tous  deux  très  puissant  et  fonctionnel,  ils  ne  permettaient  pas  de  fournir  un  large 
panel  de  fonctionnalité  pour  ​PATV​,  c’est  pour  cela  que  ​Perles  A  Tout  Va  changea  pour 
Wordpress​. 

 
15 
 
 

f. Déterminer critères de “succès de projet” 


 

Les critères de succès du projet sont : 

- Un site e-commerce fonctionnel 


- Un design respecté et validé par le client 
- Un site performant qui ne ralenti pas lorsque l’on navigue dessus 
- Un site qui fait autant de vente que le précédent 

3. Analyses & Choix 

a. Les fonctionnalitées 
 

Toutes  ces  fonctionnalités  sont  soit  ajoutées  par  un  plugin  soit  développé  par  mes 
soins,  mais  pour  ce  qui  s’agit  du  design,  il  s’agit  de  mon  code.  Pour  certains  plugins,  il  est 
nécessaire  de  surcharger  le  style  afin  d’obtenir  notre  propre  design  afin  d’avoir  une 
concordance avec le reste du site. 

i. Woocommerce 

Woocommerce  est  un  plugin  de  ​Wordpress  permettant  la  création d’​e-commerce 


avec  les  fonctionnalités  de  base  de  ​Wordpress​.  Il  s’agit  du  plugin  qui  apporte  le  plus  de 
fonctionnalités  au  site  comme  pour  le  système  de  compte  utilisateur  où  celui-ci  peut 

 
16 
 
 
accéder s’il est connecté au site afin de voir ces précèdant achat s’il en a déjà fait.  
Ce  plugin  permet  à  ​PATV  de  créer  des produits en ajoutant des images, du contenu 
pour  la  description  ainsi  que  le  prix  de  celui-ci  et  les  affiches  dans  une  page  listing.  C’est 
également ce plugin qui va gérer les filtres ou encore les systèmes de paiement. 

ii. Formulaire de contact 

Un  formulaire  de  contact  est  une  base  dans  les sites internet car ils permettent aux 


visiteurs  de  poser  une  question  à  la  personne  qui  s’occupe  du  site  ou  encore  de  prévenir 
d’un bug si celui-ci en rencontre un. 

iii. Blog 

Le blog, il s’agit de la partie ou P


​ ATV​ ajoute soit des tutoriels pour la fabrication de 
bijoux en fonction des certaines pièces ou pour annoncer de nouvelles actualités. Ici nous 
utilisons la fonctionnalité blog de Wordpress qui est complète. 

 
17 
 
 

iv. Newsletter 

La  newsletter  est  l’un  des  systèmes  qui  permet  de  rappeler  à  un  utilisateur  que  le 
site  vit  toujours  et  qu’il  y  a  de  nouveau  contenu.  ​Perles A Tout Va utilise la newsletter afin 
d’annoncer  les  nouveaux  articles  de  leur  blog  ou  encore  pour  annoncer  les  nouveaux 
produits. 

v. Wishlist (Favoris) 

La  Wishlist  (liste  des  favoris) est une fonctionnalité très utilisée par les e-commerces 


car elle récupère et listes tous les produits que l’on désire ou que l’on aime mais que l’on ne 
peut  ou  que  l’on  ne  veut  pas  acheter  sur  le  moment.  Au  lieu  de  perdre  se  produit  on 
l’ajoute  à  nos  favoris  afin  de  le  retrouver  plus  tard.  Si  on  est  connecté,  cette  liste  est 
enregistrée  en  base  de  données  afin  que  la  liste  ne  soit  jamais  supprimer  dans  le  temps. 
Sinon,  si  on  n’a  pas  de  compte,  il  s’agit d’un système de cookies qui permet d’enregistrer la 
liste  dans  le  navigateur  d’une  personne. A la différence de lorsque l’on est connecté celui-ci 
est supprimé au bout d’un certain temps (ici 6 mois) 

 
18 
 
 

b. La technologie mise en place 


 

i. CMS 

Pour  le  développement  du  site,  nous  avons  dû  mettre  en  place  le ​CMS ​Wordpress​. 
Au  début  du  projet,  nous  avons  installé  la  version  4.7.11,  actuellement  nous  sommes  à  la 
version 5.2.2. 

ii. Language 

Pour  le  langage,  nous  utilisons  PHP  7.2  puisque  Wordpress  est  développé  avec 
celui-ci.  Nous  avons  préféré  PHP  7.2  à  PHP  5.3  car  pour  l’optimisation  et  la  rapidité  les 
versions supérieurs à la 7 sont le plus apprécié. 
 

 
19 
 
 

Pour le contenu et le design, nous utilisons HTML 5 et CSS 3. Pour l’animation nous 
utilisons JavaScript 1.8.5. 

 
 

 
20 
 
 

Conclusion 
 

1. Bilan Professionnel 
 

Grâce  à  AMT  Solutions, j’ai pu découvrir comment une petite entreprise évolue dans 


un secteur où la demande afflue. J’ai pu mettre en application mes connaissances obtenues 
en cours et ainsi mieux m’intégrer au sein de l’équipe.   

J’ai  pu  découvrir  que  le  métier  de  développeur  Web  n’étant  pas  uniquement  de 
taper  du code, mais également d’avoir du relationnel, avoir de la créativité pour donner des 
idées  aux  clients,  ou  encore  avoir  un  point  de vue externe pour mieux conseiller les clients 
dans sa démarche. Et cela j’ai pu le découvrir grâce à AMT Solutions. 

Je  compte  continuer  à  évoluer  afin  de pouvoir me rendre encore plus indispensable 


et pouvoir obtenir des projets qui soient tout autant intéressants. 

2. Bilan Personnel 
 

Cette  alternance  a  permis  de  m’affirmer  et  d’avoir  plus  confiance  en  moi.  Ce  déclic 
c’est  plus  ressenti  quand  AMT  Solutions  m’a  confié  mon  premier  projet  à  réaliser  de  A à Z. 
Lorsque  celui-ci  fut  en  ligne  et  fonctionnel,  ce  fut  un  accomplissement  personnel  que  je 
voulais réaliser depuis que j’ai débuté chez eux et bien avant. 

 
21 
 
 

En  3  ans,  j’ai  pu  évoluer  au  point  de  mettre  lancer  en  tant  qu'auto-entrepreneur 
dans le domaine du développement web avec l’accord de mes employeurs. 

Ces  années  chez  AMT  Solutions  m’ont  permis  d’acquérir  des  compétences  et  une 
expérience  qui  me  semblait  nécessaire  et  importante  pour  la  suite  de  ma  formation 
scolaire et professionnelle. 

Je  remercie  mes  employeurs,  mes  collègues  d’AMT  Solutions  de  m’avoir  transmis 
leurs connaissances, leurs savoirs et j’espère que cela continuera. 

 
22 
 
 

Annexes 
Architecture du projet : 

 
23 
 
 

Configuration de Vagrant pour ce projet : 

 
 

Redmine, outil pour les tickets clients : 

 
24 
 
 

 
 

Exemple de code :  

 
25 
 
 

 
 

Visuel de l’ancien site : 

 
26 
 
 

Le nouveau rendu : 

 
27 
 
 

 
28