Contexte

Je ne rentrerai pas dans tous les détails ici. Voici uniquement les informations de base permettant de comprendre les objectifs et les contraintes du projet.

mon logo GSB

Le projet GSB concerne une application destinée aux employés d'une entreprise pharmaceutique. La solution s'adresse à 3 types d'utilisateurs :

  • les "visiteurs", c'est-à-dire les représentants pharmaceutiques, qui sont les utilisateurs de premier niveau,
  • les délégués de zone, qui supervisent plusieurs visiteurs, et qui sont également des visiteurs eux-mêmes,
  • les responsables de secteur, au-dessus des délégués de zone, qui supervisent à la fois les visiteurs et les délégués de leur secteur.
  • Il y a donc 3 niveaux d'accès, offrant plus ou moins de modules selon le niveau hiérarchique. Les visiteurs doivent pouvoir gérer leurs comptes-rendus, leurs frais, leur agenda. Les délégués, en plus d'avoir les mêmes possiblités, doivent aussi pouvoir gérer les saisies des visiteurs de leur zone (valider, modifier, refuser). Les responsables de secteur ont les mêmes modules que les délégués, plus la gestion des utilisateurs (visiteurs et délégués), des praticiens (clients ou contacts), et des produits proposés.

    La solution consiste en un site web et une application mobile, ayant la même charte graphique et fonctionnement global, mais optimisés selon le support. A noter que la version mobile ne concerne que les modules destinés aux visiteurs (en déplacement).

    Organisation et technologies

    Pour le développement de la solution (site et application), nous avons décidé d'utiliser le framework AngularJS, associé aux langages HTML, CSS, SQL, et PHP. Ce choix permettait essentiellement la synchronisation automatique entre les modèles et les vues (patron MVC).


    Chaque membre de l'équipe a pris en charge plusieurs modules à développer, aussi bien sur la version web que mobile. J'ai personnellement développé :

  • les modules de gestion des Frais (saisie, modification, consultation pour les visiteurs,mais aussi consultation, validation, modification ou refus pour les délégués et les responsables),
  • le module de gestion des Produits (création, modification, consultation, suppression),
  • la fonction d'envoi de mail en cas de modification du mot de passe utilisateur (mot de passe oublié).

  • Ci-dessous, quelques aperçus d'écran de l'application, avec les explications de fonctionnement. Je ne peux pas tout développer ici, mais ces exemples sont une très bonne indication du fonctionnement global de la solution.

    Quelques aperçus

    Avec les explications !

    Accueil (version mobile)

    Lorsque le visiteur se connecte à l'application, il voit tout de suite les notifications concernant son activité.

    Accueil (version mobile, menu déroulé)

    En cliquant sur l'icône "engrenage" en haut à droite de l'écran, l'utilisateur peut accéder aux modules de l'application.

    Module Ajout de Frais

    L'utilisateur peut créer une ligne de frais en saisissant la date, le lieu, le type de frais (3 choix possibles : nuitée, repas, trajet), le nombre (de nuitées par exemple). Le montant et le total ne sont pas saisissables : le premier dépend du type de frais choisi (forfait), et le total est calculé automatiquement.

    Une fois validée par l'utilisateur, la ligne de frais apparaît dans son tableau récapitulatif (sous-module "Voir mes frais").

    Module Edition de Frais (administrateur)

    Dans le sous-module "A valider", le délégué de zone (ou le responsable de secteur) peut consulter toutes les lignes de frais saisies par les visiteurs de leur zone (ou secteur), sous forme de tableau. En cliquant sur une ligne de frais, il est redirigé vers la page illustrée ci-dessus. Il peut modifier les données, refuser la ligne de frais, ou la valider.

    Dans ce dernier cas, la ligne de frais passe dans le sous-module "Archives" du délégué ou du responsable. Du côté visiteur, la ligne de frais est indiquée comme validée.

    Module Edition de Produit (administrateur)

    Les responsables de secteur peuvent ajouter, modifier, et supprimer les produits proposés par les visiteurs. Ci-dessus un aperçu du sous-module de modification d'un produit.

    A noter que lorsque l'utilisateur valide les modifications, un message de confirmation apparaît en haut de la page. Ce principe s'applique à l'ensemble des modules, que ce soit en cas de modifcation ou de suppression.

    Page de connexion

    Au lancement de l'application, l'utilisateur, quelque soit son niveau hiérarchique, passe par cette page de connexion.

    Au cas où il ait perdu ou oublié son mot de passe, il peut le modifier. Il est alors redirigé vers une nouvelle page (voir le processus ci-dessous).

    Mot de passe oublié

    Si l’adresse mail n’est pas reconnue dans la base de données, l’utilisateur est renvoyé vers la page de connexion. Si l’adresse mail est reconnue, un message est alors automatiquement envoyé à cette adresse, avec un lien menant vers la page de modification du mot de passe.

    En paramètres du lien, il y a un jeton aléatoire, qui contient l’identifiant de l’utilisateur. Ainsi, la mise à jour du mot de passe se fera sur cet identifiant.

    Mot de passe oublié

    Sur la page de modification du mot de passe, l’utilisateur doit saisir deux fois son nouveau mot de passe, afin d’éviter les erreurs dues aux fautes de frappe.

    Au clic sur le bouton « Envoyer », en bas du formulaire, le mot de passe de l’utilisateur est immédiatement mis à jour en base de données. Et l’utilisateur est redirigé vers la page de connexion, où il doit entrer son adresse mail ainsi que son nouveau mot de passe.

    Pour la petite anecdote...

    Vous avez sans doute remarqué que le logo GSB présent sur les captures d'écran des modules n'était pas le même que celui qui trône en haut de cette page ?

    En effet, celui du haut est ma création, non fournie par le contexte GSB. Très objectivement, je la trouve plus jolie que la version "officielle" wink

    Contactez-moi !

    N'hésitez pas à me faire part de vos questions ou suggestions à propos de ce site ou de mes travaux.


    Vous pouvez me trouver sur ...