Accueil À propos Portfolio Stages Veille Contact

Axel Rayer

Web Developper

Stages de deuxième années de BTS SIO.




Présentation de l'organisme :

Axone promotion est est une société par action simplifié crée en 2012 . Implantée à Serris près de Disney et est spécialisée dans le secteur d'activité de la promotion immobilière d'autre bâtiments. Elle compte aujourd'hui la réalisation d'une dizaine de programmes en îles de France. Axone s’est différencié en faisant de l’innovation sa marque de fabrique. Une offre domotique de série et des performances thermiques supérieures à la norme en sont l’illustration. C'est une entreprise à taille humaines comportant des effectif entre 20 et 50 employés répartit entre plusieurs services. L'entreprise étant en plein developpement, elle commence à internaliser beaucoup de services comme la communication, les rescources humaines et même le developpement web et logicielle.





Site de l'entreprise

Lors de ma deuxième années de BTS SIO, j'ai dû effectué un stage de 8 semaines en milleu d'années (Février/Mars) j'ai fait le choix de faire ce stage dans une entreprise de promoteur immobilier à taille humaine au sein d'un service création chargé de créer les différentes solutions applicatives de l'entreprise et de gérer la communication de celle ci. J'ai donc participer au developpement de plusieurs solution applicative dont, une application Web pour la gestion des choix acquéreur, un outils servant au commerciaux pour enregistrer les choix des nouveaux acquéreur d'appartement quant à l'aménagement des sols, des murs, des différents meubles de leur bien. Et tout cela en ligne. Ainsi qu'au développement du nouveau site internet de l'entreprise, en cette fin de stage, je suis chargé de synthétiser ici les différente missions dont j'ai été chargés. Voici comment se présentera mon compte rendu.

  • Conception et production d'une application Web de gestion de choix acquéreur
  • Elaboration d'une notice utilisateur relatifs à cette application
  • Intégration de maquettage web pour le nouveau site internet

  • Première situation professionnelle : Conception et production d'une application web

    A1.4.1 : Participation à un projet
    A1.1.1 : Analyse du cahier des charges d'un service à produire
    A4.1.2 : Conception ou adaptation de l'interface utilisateur d'une solution applicative
    A4.1.3 : Conception ou adaptation d'une base de données
    A3.3.3 : Gestion des identités et des habilitations

    Lors de ma première réunion avec l'équipe, la directrice du service création m'a données un cahier des charges contenant différentes exigences :

  • L'application devait contenir un sytème d'autocomplétion pour la selection de l'acquéreur
  • L'application devait correspondre à la charte graphique de l'entreprise.
  • Le contenu du formulaire de choix acquéreur devait dépendre du programme de celui ci .
  • L'application devait permettre une impression d'un PDF contenant les choix des acquéreurs (Libellé, visuel ect).
  • L'application devait fonctionner grâce à une base de données sur mesure
  • L'application devait permettre au administrateur d'ajouter ou du supprimer des programme directement de l'application
  • L'application n'étant qu'un projet, j'ai du réfléchir au différentes interfaces de cet outil tout en prenant en compte la charte graphique de l'entreprise et en respectant les régles d'ergonomie Web. J'ai eu une totale liberté quant au outil de developpement que j'allait utilisé, ce qui ma permis d'adapter mon developpement en fonction des différentes technologies que j'allait utiliser.

    J'ai donc, après mes différentes recherches, décidé de developper mon application avec CodeIgniter, car grâce à sa simplicité d'intégration, il m'allait être facile d'y intégrer des bibliothèque Javascript et/ou php pour les différentes fonctionnalité.



    -Interface utilisateur :

    Pour l'interface, je me suis inspiré d'un document Google Sheet crée par la directrice de création servant de base au projet :



    J'ai décidé de ne pas utiliser de Framework css, j'ai donc tout coder de ma main. J'ai récupérer les codes couleurs et la disposition des différents élément pour récréer au mieux cette interface, voici quelque exemples de pages créer (formulaire, choix etc) :











    L'application n'étant utilisée qu'en format tablette, la directrice de création m'a demandé de ne pas perdre de temps sur le responsive.


    -Base de données, habilitations et dépendance acquéreur/Programme :

    Dès le debut de mon développement, il à fallu crée une base de données de toute pièce, pour pouvoir faire dépendre les gamme des programme et le formulaire de choix des acquéreur, j'ai du crée différente table contenant toute ces informations, de même que pour gérer les habilitation administrateur, pour des raison de confidentialité, je ne peux mettre l'architecture de la base de données ici mais je peux vous résumer les différentes tables:

  • Utilisateur
  • Admin
  • Différentes tables pour chaque aménagement (Sol/Mur/Meuble) .
  • Programme (Batiments).
  • Choix (Contenant les différent choix des acquéreurs)
  • Gammes (Permettant de relier les gammes des programmes au gammes des produits du catalogue pour en faire dépendre le formulaire de choix)

  • Les dépendances se présente comme cela :
  • Chaque produit du catalogue (Paquet/Carrelage/Meuble) --> Possèdent une gamme (Basic, Trend, premium / Stratifié, contre collé, massif).
  • Chaque acquéreur dépendent d'un programme --> Qui depend lui même d'une gamme (Selon le prix moyen de celui ci).
  • Lors du choix acquéreur, les possibilité du formulaire sont dépendante de la gamme du programme de celui ci, pour résumer, les champs select ne proposeront que les produits ayant la même gamme que le programme de l'acquéreur.





  • Les informations demandées sont récupérer de cette façon :
    Le controleur traite les données et les enregistre dans des variables, il les envoie au modèle qui traite une requete en renvoyant les données au controleur qui enfin les envoie à la vue pour les afficher de cette façon :







    L'administrateur possède des habilitations différentes, il peut par exemple:
  • Ajouter un nouveau programme
  • Ajouter un nouvel utilisateur
  • Ces différentes fonctionnalités sont disponible dans le menu de l'administrateur et ne le sont pas dans celui de l'utilisateur :



    -Bibliothèque tierce et fonctionnalités :

    Pour certaines fonctionnalités de l'application j'ai du utilisé différentes bibliothèque tierce permettant de nombreuse possibilité
    Les différentes fonctionnalités demandées étaient :

  • Un système d'autocomplétion pour la selection de l'acquéreur
  • Une génération d'un PDF récapitulatif
  • Tout d'abord, j'ai utilisé la plus grande bibliothèque Javascript c'est à dire Jquery, permettant le fonctionnement de beaucoup d'autre bibliothèque JS et simplifiant le developpement des fonction Javascript.
    Pour le système d'autocomplétion j'ai décidé après différentes recherches d'utilisé la bibliothèque Chosen offrant de nombreuse possibilité quant à la customisation des champs select et entre autre, de l'autocomplétion :







    Pour la génération de PDF j'ai utilisé la bibliothèque PHP : TCPDF possédant une intégration à CodeIgniter très simple et ergonomique:











    L'intégration des visuels et libellé des matériaux dans la base de données étant prévu pour la fin du developpement, il n'y à pour le moment que des visuel et libellé provisoirs servant de test, de plus la disposition finales des différentes section du récapitulatif seront surement modifées pour des questions d'ergonomie :







    -Déploiement de l'application :

    De part les délais imposés pour l'application et les différentes mission d'integration plus urgente dont j'ai été chargé, le développement de l'application à été mit en pause un peu après le milieu de mon stage, je serai chargé de la fin du développement ainsi que du déploiement l'années prochaine lors de l'année d'alternance qui m'a été proposé à la fin de mon stage. A l'heure actuelle, seule certaines certitudes son déja établient quant au déploiement de l'application, tout d'abord, l'application ne sera utilisé pour le moment que par les commerciaux, donc en interne, mais le showroom étant à l'exterieur des locaux, il faudra donc un hébergement et un DNS, pour le DNS, il nous faudra un DNS simple à retenir pour les commerciaux mais assez privé pour ne pas être utilisé par d'autre personne (Malgrès les sécurtité d'authentification.) Cette application sera donc totalement fonctionnel courant de l'années 2019 et sera accompagné de nombreux applicatifs permettant de digitaliser les différents services de l'entreprise.

    -Rédaction d'une documentation d'utilisation :

    Pendant le développement de l'application, l'équipe et moi avons décidé de fournir avec l'outil une documentation utilisateur pour faciliter l'intégration de l'application dans l'entreprise, les commerciaux travaillant sur papier depuis plusieurs années, il leur fallait un document contenant toute informations nécessaires à l'aclimatation à leur nouvel outi de travail. C'est pour cela que j'ai été chargé de rédiger une documentation utilisateur fonctionnant comme une notice mémo. Il m'a fallut organiser ce document de façon simple et ergonomique pour encourager son utilisation.



    Seconde situation professionnelle : Intégration de maquette Web et préparation à la future dynamisation

    A1.4.1 : Participation à un projet

    L'entreprise dans laquelle j'ai fait mon stage ayant mit à jour sa charte graphique lors de mon stage, la directrice de création à décider de mettre en ligne un nouveau site internet avec la nouvelle charte graphique (Nouveau logo, nouvelle couleur, nouveau design). Pour ma part j'ai été chargé de coder en HTML/CSS/JS les maquettes que la designeuse avait crée pour le nouveau site internet. Les maquettes était crée graçe a PhotoShop et m'ont été partager grâce au logiciel "Zeplin" un logiciel d'intégration Web permettant au designeur fournir des maquette côter au integrateur.
    Voici une exemple de maquette qu'il m'a été fournit :





    Pour reproduire ce design, j'ai cette fois décidé d'utiliser le Framework Css "Bootstrap" me permettant de simplifier mon css grâce son système de grilles, par ailleur Bootstrap permet aussi d'optimiser le codage responsive et du SEO (Compatibilité navigateur).
    Voici la maquette précédente intégrer en HTML:



    Après cette intégration html/css/js, j'ai été charger de préparer ce site au une evolutions dynamique, j'ai donc intégrer le site statique à CodeIgniter afin de permettre une future dynamisation des différentes pages, permettant une administrations simple. J'ai aussi préparé une documation technique servant pour le deploiement contenant toute les informations nécessaires pour configurer l'architecture. Le site terminer sera disponible à cette adresse.


    Conclusion

    Ce stage à été une exprérience professionnelle très enrichissante qui m'a permet de maitriser de nouveau outils et technologies en familiarisant avec le travail en équipe au sein d'un service dédié à la création. Ces deux mois resteront très important dans mon parcours car en plus d'avoir affuté mes comptétence, ce stage s'est soldé sur une très bonne nouvelle étant donné que la directrice de création m'a proposé un contrat d'alternance pour continuer mes études au sein de leur entreprise.