Rapport de stage · Web view2019. 4. 24. · L’objectif de ce stage est de créer une page web...

Rapport de stage

Sujet :

Créer une page web avec des API web Microsoft.

Alix Collet 1SIOB, 2017/2018

TABLE DES MATIERETable des matières.................................................................................................................................2

TABBLE DES ILLUSTRATIONS...................................................................................................................2

1 INTRODUCTION...................................................................................................................................3

2 DEVELOPPEMENT................................................................................................................................3

A) PRESENTATION DE L’ORAGNISME..............................................................................................3

1) Orange Business Service (OBS)...............................................................................................3

2) Orange Applications for Business (OAB).................................................................................3

B) CONTEXTE...................................................................................................................................4

C) SYNTHESE DES MISSIONS...........................................................................................................4

1ère semaine....................................................................................................................................4

2ème semaine...................................................................................................................................4

3ème semaine...................................................................................................................................5

4ème semaine...................................................................................................................................6

D) SCHEMAS....................................................................................................................................7

E) RESSOURCES ET OUTILS MIS EN ŒUVRE....................................................................................7

F) COMPETENCES ACQUISES..........................................................................................................8

G) VEILLE TECHNOLOGIQUE............................................................................................................8

H) PRESENTATION DE LA GESTION DES CONFIGURATIONS.............................................................8

3 BILAN TECHNIQUE..............................................................................................................................9

1ère semaine....................................................................................................................................9

2ème semaine...................................................................................................................................9

3ème semaine...................................................................................................................................9

4ème semaine...................................................................................................................................9

4 CONCLUSION.......................................................................................................................................9

5 RESUME EN ANGLAIS........................................................................................................................10

TABBLE DES ILLUSTRATIONSFigure 1 Aperçu après une semaine de stage.........................................................................................4Figure 2: Aperçu de la page après deux semaines de stage...................................................................5Figure 3: Aperçu après avoir appuyé sur entrer. La sourie est positionné sur une punaise pour rendre visible l’infobox......................................................................................................................................6Figure 4: Aperçu avant d’appuyé sur entrer...........................................................................................6Figure 5: Aperçu après avoir appuyé sur entrer.....................................................................................6Figure 6: Aperçu après avoir appuyé sur une punaise............................................................................7

sur 10


1 INTRODUCTION

Ce rapport s’inscrit dans les perspectives d’obtention d’un BTS SIO (Service Informatique aux organisations). Il a été rédigé lors d’un stage d’un mois (du 28 mai au 27 juin 2018) effectué chez Orange Application for business, l’entreprise de services du numérique d’Orange Business Services. L’objectif de ce stage est de créer une page web avec une carte Bing Maps incrustée et des fonctionnalités.

Durant ce stage j’ai été encadrée par l’équipe de mon bureau (7 personnes) et le manageur de l’équipe. Ils m’ont aidé à comprendre et cerner le sujet ainsi qu’à élaborer les étapes du projet. Une fois les étapes déterminées ils m’ont donné des pistes pour m’aider à réaliser les étapes du projet et orienter mes recherches.

2 DEVELOPPEMENT

A) PRESENTATION DE L’ORAGNISME

1) Orange Business Service (OBS)

Orange Business Service (OBS) est une identité commerciale du groupe Orange qui a été constituée le 1er juin 2006 afin d’offrir à travers une marque unique des services de télécommunication (données, téléphonie) et informatique pour les entreprises, en France et dans le monde.

OBS est présent dans 166 pays et il possède un effectif de 21697 collaborateurs dédiés aux activités entreprises dont la moitié à l’international.

OBS est elle-même composée de plusieurs filiales ou entités dont orange Application For Business.

2) Orange Applications for Business (OAB)

Orange Applications for Business (OAB) est l'entreprise de services du numérique d'Orange Business Services (OBS) spécialisée dans trois domaines :

- L’expérience client - Le big data et l’analytique - Les objets connectés

OAB a un effectif de plus de 2400 collaborateurs. Dans une phase d’élargissement de ses activités OAB fait plus de 200 recrutements par an sur des profils spécifiques : développeurs

sur 10


d’applications, ergonomes, data scientistes, etc. En 2016 OAB a réalisé 420 millions de chiffre d’affaires et connait une croissance deux fois supérieure au marché français.

B) CONTEXTE

L’accueil s’est fait dans une agence à Nantes (9 Boulevard Nicephore Niepce 44000 Nantes) comptant un effectif d’une centaine de personnes et j’ai rejoint le centre de compétence CREWS sur technologie Microsoft. Cette équipe composée d’une quinzaine de personnes est chargée de personnaliser les produits Microsoft pour qu’ils s’adaptent parfaitement aux différents clients. Ils sont aussi chargés du déploiement chez les clients.

Dans cette équipe j’ai été chargée de créer un POC (Proof Of Concept). Cette démonstration de faisabilité s’applique à un cas d’usage sur le CMR de Microsoft dynamics365. Le scénario est le suivant : un commercial sort d’un rendez-vous ou, l’un de ses rendez-vous a été annulé. Pour ne pas perdre du temps il veut savoir s’il y a un client à prospecter dans un rayon de 5, 10 ou 15km. C’est là que la page web intervient. Le commercial rentre sont adresse actuelle et un rayon de recherche. Grâce aux données du CRM et aux informations rentrées par l’utilisateur, les adresses des clients apparaissent sur la carte sous forme de punaise ainsi que des informations complémentaires sur les différents clients. Un itinéraire peut aussi être choisi.

C) SYNTHESE DES MISSIONS

1 ère semaine

Ce projet s’est déroulé en plusieurs étapes. Pour la première semaine tout d’abord j’ai effectué une veille technologique entre Bing Maps et Google Maps, ensuite après avoir fait une recherche sur les API web, grâce à l’une d’elle, j’ai affiché une carte sur une page web puis une punaise grâce à un géocode. Après ces phases, pour symboliser le CRM j’ai utilisé un tableau d’adresses et j’ai créé une fonction avec une boucle pour transformer une dizaine d’adresses standards en géocode et afficher leurs punaises toujours à l’aide des API Bing Maps.

Figure 1 : Aperçu après une semaine de stage.

sur 10


2 ème semaine

Pendant la deuxième semaine j’ai voulu calculer la distance à vol d’oiseau entre les punaises et une adresse rentrée en variable. Mais j’ai rencontré un problème : l’API de Microsoft utilise des requêtes asynchrones, le géocode n’était donc pas encore calculé quand j’essayais d’estimer la distance. J’ai donc fait des recherches sur les tableaux et décidé de rentrer les géocodes dans un tableau d’objet avec un ID. Ensuite il m’a suffi de créer un compteur et un SI qui calculerait la distance à vol d’oiseau seulement après avoir rempli le tableau de géocode. Cette distance a ensuite été rentrée dans un deuxième tableau avec le même ID que l’adresse de la punaise choisie.

Ensuite dans un deuxième temps j’ai voulu saisir l’adresse de départ et le rayon de recherche (là où se trouve le commercial) sur la page web et les récupérer dans le code après avoir appuyé sur entrer. Pour cela je me suis documentée sur JQuery qui m’a permis de réaliser cette étape.

Figure 2: Aperçu de la page après deux semaines de stage.

3 ème semaine

La troisième semaine a été entamée par l’étape de la sélection des différentes punaises à afficher ainsi que faire apparaitre sur le côté de la carte les informations importantes de chaque client sélectionné. En effet d’après le scénario expliqué plus haut, nous voulons afficher la localisation des clients situés à seulement 5, 10 ou 15Km de distance. Pour cela j’ai créé un SI qui affiche les points seulement dans le rayon sélectionné (une variable saisie en dur dans le programme pour le moment) sur la page web. Dans ce SI j’ai aussi affiché un compteur pour mettre un chiffre sur la punaise. Ce compteur va aussi être utile pour l’affichage sur le coté des informations du client. Il permet à l’utilisateur d’associer le point sur la carte à une adresse.

Pour la deuxième étape, j’ai fait en sorte que la carte, les punaises et toutes les autres fonctions ne s’affichent qu’une fois l’adresse, le rayon saisis et le bouton entrer pressé. Ensuite j’ai fait en sorte qu’il y ait une réinitialisation de toutes les variables (tableau, adresse…) pour que l‘utilisateur n’ait

sur 10


pas besoin de recharger la page s’il veut changer l’adresse de départ ou le rayon de recherche. Pour cette phase j’ai dû me documenter sur le DOM et JQuery.

Enfin dans la dernière étape de la semaine j’ai rendu visible une Infobox lorsque la souris touche une punaise et caché l’info box lorsque ce n’est pas le cas.

Figure 3: Aperçu après avoir appuyé sur entrer. La sourie est positionné sur une punaise pour rendre visible l’infobox.

4 ème semaine

Pendant la quatrième semaine j’ai affiché un itinéraire sur la carte en cas de click sur une punaise Grace à une API fournie par Bing Maps.

Ensuite J’ai essayé de mettre en forme la page web. Jusqu’à maintenant j’utilisais les attributs style dans les balises ne sachant pas si j’aurais le temps de faire la mise en forme contenu de toutes les étapes précédentes. J’ai donc créé un fichier CSS que j’ai associé à m’a page HTML. J’ai ensuite refait la mise en page.

Figure 4: Aperçu avant d’appuyé sur entrer.

sur 10


Figure 5: Aperçu après avoir appuyé sur entrer.

Figure 6: Aperçu après avoir appuyé sur une punaise.

D) SCHEMAS

sur 10


E) RESSOURCES ET OUTILS MIS EN ŒUVRE

Dans le cadre de ce projet j’ai utilisé un éditeur de texte : Notepad++ et un navigateur : Firefox. Pour mes recherches j’ai utilisé les docs de Bing Maps et Open Classroom.

F) COMPETENCES ACQUISES

Tout au long de ce projet j’ai été amenée en auto formation sur internet et avec les conseils de mes encadrants à acquérir certaines compétences.

Tout d’abord j’ai dû comprendre le fonctionnement des API web pour m’en servir dans mon projet.

Ensuite j’ai approfondi le JavaScript. En effet tout le script de la page ainsi que les API web de Bing Maps utilise ce langage. J’ai notamment appris à faire des tableaux d’objet. J’ai aussi travaillé sur JQuery qui est une bibliothèque de JavaScript. De plus pour bien me servir de JQuery j’ai dû comprendre ce qu’était le DOM d’une page web. Pour faire simple, le DOM est une représentation d’un document HTML ou XML, dans lequel leurs objets sont représentés sous la forme d’un arbre.

Ensuite j’ai approfondi tout le langage HTML et CSS. En effet le script de ma page en java script interagit avec la forme ou la représentation de ma page.

Enfin j’ai été amenée à comprendre le système de requête asynchrone qui était utilisé par les API web.

G) VEILLE TECHNOLOGIQUE

J’ai été amenée à faire une veille technologique sur les deux leaders du marché en matière de cartographie numérique : Google Maps (google) et Bing Maps (Microsoft). Sachant que la page que nous voulons créer doit étendre le panel de fonctionnalités d’un CRM de Microsoft, l’utilisation Bing Maps semblait évidente mais nous avons quand même voulu faire un comparatif. Après avoir utilisé les deux systèmes je me suis vite rendu compte que Google Maps était beaucoup plus ergonomique et « jolie ». La lisibilité de la carte est meilleure : en fonction du zoom le nombre de noms de ville varie de manière plus sensible et les couleurs ainsi que le design choisis sont plus agréables. Ensuite Du point de vue fonctionnalité, les deux applications varient très peu. En effet elles affichent toutes les deux des itinéraires et des recherches d’adresses de différentes manières. Cependant il existe quelques différences : Bing Maps ne prend pas en compte le trafic routier en temps réel et la fonctionnalité de visualisation des rues en 3D couvre moins de territoires malgré une meilleure résolution d’image. Enfin nous avons comparé les API web. C’est ce qui a déterminé le choix final. Les API de Google Maps sont très simples et moins maniables, elles sont faites pour être facile d’utilisation alors que les API Microsoft sont plus compliqués mais offrent plus de possibilités.

sur 10


J’ai aussi fait une étude pour le coût d’utilisation des API de Google ou Microsoft. Pour Microsoft les prix ne sont malheureusement pas communiqués, Il faut les contacter donc je n’ai pas pu aller plus loin. Pour google les 28 000 premiers affichages seront gratuits, au-delà les 1000 requêtes seront facturées 7 dollars soit 6 ,07 euros.

H) PRESENTATION DE LA GESTION DES CONFIGURATIONS

Pour ce projet je n’ai pas utilisé de matériel ou logiciel spécifique. J’ai juste fait des sauvegardes chaque étape franchie et chaque soir j’ai fait une sauvegarde sur un disque dur externe.

3 BILAN TECHNIQUE

1 ère semaine

Lors de la première semaine j’ai eu comme mission de faire une veille technologique entre Google Maps et Bing Maps, et de comprendre le fonctionnement d’une API web ce qui a été fait. J’ai aussi eu le temps de faire le programme de la deuxième semaine, à savoir afficher une carte avec une punaise dessus dans une page web.

2 ème semaine

Ensuite lors de la deuxième semaine j’ai eu comme mission d’afficher plusieurs points sur une carte et de créer un filtre pour afficher seulement dix points en fonction de la distance ainsi qu’un formulaire de saisis. Pour cette phase j’ai bien réussi à mettre en place le formulaire et calculer les distances mais je n’ai pas eu le temps de mettre en place le filtre car j’ai rencontré des difficultés avec le système de requête asynchrone.

3 ème semaine

Lors de la troisième semaine je devais mettre en place le filtre des points, afficher les informations des punaises sur le côté de la carte ainsi que charger la carte et les informations après avoir appuyé sur le bouton entrer. Toutes ces étapes ont été remplies.

4 ème semaine

Enfin pour la quatrième semaine j’ai eu comme objectif de faire la mise en forme de la page web en CSS. J’ai aussi eu le temps en plus de mes objectifs de départ, de faire une fonctionnalité d’Itinéraire.

sur 10


4 CONCLUSION

Grâce à ce stage j’ai pu acquérir beaucoup d’autonomie et de confiance en moi. En effet mes encadrants ne voulaient pas me donner tout de suite les solutions aux problèmes. Ils me donnaient des orientations de recherche et je devais ensuite moi-même résoudre le problème. De plus j’ai beaucoup progressé dans plusieurs langages (exemple : HTML et JavaScript). J’ai aussi découvert le monde de l’entreprise : l’intégration au sein d’une équipe, le fonctionnement hiérarchique…

5 RESUME EN ANGLAIS

First of all I was welcomed in an agency in Nantes (9 Boulevard Nicephore Niepce 44000 Nantes) with a staff of a hundred people and I joined the CREWS competence center on Microsoft technology. This twelve-person team is responsible for customizing Microsoft’s products to fit the customer perfectly. They are also responsible for installing it at the client’s home.

In this team I was responsible of creating a POC (Proof Of Concept). This proof of concept applies to a use case on the CMR of Microsoft Dynamics365. The scenario is as follows: a salesman leaves an appointment or, one of his appointments has been canceled. To avoid wasting time, he wants to know if there is a customer to prospect in a radius of 5, 10 or 15km. This is where the web page comes in. The commercial returns are current address and search radius. Thanks to the CRM data (to facilitate the project, the CRM data has been replaced by a table) and to the information entered by the user, the addresses of the client appear on the map in the form of pushpin as well as additional information on the various customers. A route can also be chosen.

Then during this project, I learned some technical skills. I improved in HTML and CSS to make the structure of my page. Then to make it dynamic I had to work on the JavaScript language and the JQuery library. Finally I learned how the web API works.

To conclude, thanks to this internship, I gained a lot of autonomy and self confidence. Indeed, my supervisors did not want to give me the solutions to the problems immediatly. They gave me research directions and then I had to solve the problem myself. In addition I have progressed a lot in several languages (example: HTML and JavaScript). I also discovered the world of business: how to socialize, understand the hierarchy ...

sur 10

Rapport de stage · Web view2019. 4. 24. · L’objectif de ce stage est de créer une page web...

Documents

Transcript of Rapport de stage · Web view2019. 4. 24. · L’objectif de ce stage est de créer une page web...