Stage et CDD Wess-Soft

Stage de première année chez Wess-Soft

Wess-soft est une agence de développement mobile et web de 6 personnes tenue par deux co-gérants. Leur entreprise est située au 40 rue Laure Diebold à Lyon et loue un open-space dans un regroupement d’entreprises et de bureaux appelés Focus.

1 - Première approche

Tout d’abord, il m’a fallu mettre en place un environnement de travail : installation de wamp et laragon pour des travaux en local, installation de symfony & laravel. Ensuite, on m’a confié un travail de mise à niveau du site wordpress de l'agence : Wess-soft.fr Je me suis occupée de la création d’une page de présentation « Solution de réservation en ligne tout-en-un pour votre salon ». Ça m’a permis d’utiliser mes compétences acquises durant ma licence d’art design : travail sur le design/couleur, création et proposition d’une maquette avec un nouveau design sous Adobe XD.

Maquette réalisée sous Adobe XD. Rendu final sur wordpress.

2 - Modification module Prestashop

Aussi, j’ai travaillé sur un module Prestashop de prise de rendez-vous en ligne. Cela consistait à créer une nouvelle fonctionnalité au sein du calendrier côté administrateur : L’ajout de la possibilité d’enregistrer des rendez-vous libres dit "en attente", la création du bouton, puis la gestion de la relation entre celui-ci et un popup grâce un formulaire. Et évidemment le traitement du formulaire :

• Création de classes
• Enregistrement au sein de la base de données
• Installation de cette fonctionnalité à l’installation du module
• Désinstallation complète quand celui-ci est retiré du site Prestashop

Dans un second temps, j’ai travaillé sur l’ajout d’un bouton pour ajouter/retirer des clients dans la liste d’attente. Affichage d’un nouveau popup avec un DataList avec la possibilité de sélectionner un client, de modifier ses informations, de le supprimer de la liste. Aussi, il fallait que l'on puisse renseigner un nouveau client et l’ajouter dans la base de données.

Le visuel étant protégé par Wess-Soft, il m'est impossible de montrer le calendrier côté administrateur.

Ci-dessus un visuel du rendu des prises de rendez-vous en ligne pour des prestations (ici la date du rdv).

3 - ReDesign pour des clients de prestations sur Prestashop.

J'ai aussi durant mon stage retravaillé les Design de deux sites de prestations en ligne. J'ai pu approfondir mes connaissances en CSS, et apprendre en profondeur l'utilité des SVG.

Ci-dessus l'avant/après du design du site web.

4 - Création sous Symfony d'une application Pivot Table

Pour finir, j'ai pu créer sous Symfony une application permettant de proposer à la selection, toutes les tables de n'importe quelle base de données pour ensuite construire dynamiquement une pivot-table. Le design n'est pas soigné, l'intérêt étant la gestion des données dans ce projet. Aussi il a fallu gérer l'enregistrement de la pivot-table ainsi que sa configuration en bdd.

Ci-dessus un aperçu d'une pivot table générée avec deux tables préalablement sélectionnées dans deux Selects rétrocompatibles pour gérer les tables liées entre elles.

Stage de Seconde année chez Wess-Soft

Travaux Réalisés

• Maquettage sur Adobe XD
• Ws-Mesh-SEO : Développement d'un module Prestashop
• Création de pages web et formulaires sur Wordpress
• Optimisation d'un site web (GTM, Analytics, Lighthouse)
• Mise en place d'une CI (intégration continue sur Github)

1 - Maquette XD

À partir d’un cahier des charges et de screens, j’ai pu construire une maquette pour un projet d’intranet. L’objectif étant de proposer une version moderne et épurée de l’existant, il m’a fallu étudier ce qui se faisait et m’inspirer de certaines chartes graphiques. Des couleurs vives et des boutons développable avec Bootstrap étaient mes seules contraintes.

La maquette a été par la suite modifiée au fur et à mesure par le développeur en charge du projet suite aux retours clients.

2 - Ws-Mesh-SEO : Développement d'un module Prestashop

Le module WS-Mesh-SEO a pour utilité de proposer en en-tête des pages de catégories ou de liste de produit de la boutique un maillage en accordéon de liens vers d’autres catégories. L’intérêt d’un module est qu’il est personnalisable (et donc on peut proposer ce service à des clients qui veulent pouvoir l’utiliser sans avoir à avoir des notions de développement). Ici mon chef de stage m’a confié le développement en m’illustrant ses propos avec un maillage déjà préexistant qu’il a vu sur un autre site internet.

Notion de Hook

Un module s’incruste dans les pages (côté admin comme côté client) grâce à des Hooks. Ces hooks peuvent être existant (et donc facilement utilisable) ou inexistant et donc il faut les créer. Dans le cas de mon module, il n’existe pas encore de hook à l’emplacement voulu sur les pages Category. Il m’a fallu gérer aussi à l’installation du module la création de celui-ci, son enregistrement en bdd et son incrustation dans le fichier font de Category.

Je vous invite à aller voir le git du projet :

Qu’est-ce que ça donne visuellement ?

Visuellement on a côté admin un formulaire proposant deux configurations possible: personnelles où l’on associe à chaque titre les catégories possédant telle ou telle relation avec la catégorie courante, ou automatique où l’on choisit seulement le titre des 4 titres affichés qui correspondront au level depth des catégories en relation avec celle courante.

Le level-depth est la « profondeur » relationnel des catégories. Une catégorie qui rentre dans une autre catégorie est appelé catégorie enfante. L’autre est donc parente. Avec ce principe, nous pouvons nous permettre d’afficher aussi bien les enfants, les parents, les oncles, neveux, cousins… La catégorie courante peut posséder de nombreux liens de parentés avec les autres catégories du site. Libre au client d’afficher les liens qu’il souhaite en fonction de comment il veux appeler l’utilisateur à naviguer au sein de ses pages.

N'ayant pas encore fait un projet Prestashop en ligne, je ne peux vous montrer directement le fonctionnement du module. Néanmoins j’ai fais quelques vidéos d’utilisation du module côté admin et l’affichage côté client, voici les liens Youtube correspondant:

3 - Création de pages Wordpress et Optimisation SEO

J’ai été mandaté pour une évolution du site web de l’entreprise où j’ai effectué mon stage. On m’a demandé une nouvelle page formulaire de devis en ligne. Je n’avais pas plus d’indication (notamment niveau design) mais comme je m’étais déjà occupée du design du site l’année dernière, j’étais déjà familiarisé avec le site wordpress. J’ai utilisé un outil appelé Contact form 7. Comme ci-joint j’ai développé le formulaire avec la documentation de contact form 7 et en langage html. J’y ai ajouté du js et du css pour une navigation rapide et agréable. Une fois le formulaire développé je l’ai inclus dans une page Devis et j’ai ajouté des blocs d’informations pour un meilleur référencement en ligne.
Je vous invite aussi à aller jeter un coup d'oeil sur le site de Wess-soft ainsi qu'à la page de formulaire "faire un devis".

Pour ce qui est de l’envoi par mail des informations rentrées par l’utilisateur, Contact Form 7 propose une configuration très simple d’utilisation qui renvoie un mail dont le corps est personnalisable et dont les adresses mails sont aussi personnalisables. C’est totalement gratuit et libre d’accès sur Wordpress.

4 - Mise en place d'une CI

Je vous invite à aller voir ma veille technologique qui aborde ce sujet ou la CI sur un projet symfony vierge que j'ai mis en place sur GitHub Action :

• Veille Technologie
• GitHub Action