# Rapport du Projet de Fin d'Etude
*Nom du projet :* Jorigine
*Description :* Créer un plugin permettant d'intégrer les services de jorigine dans les sites partenaires
*Etudiants :*
- PRAT-CAPILLA Hugo
- MALECOT Ethan
- LANQUETIN Alexis
- BLANQUET Antoine
## Sujet et cahier des charges
J'origine est une startup qui aide les petits producteurs et artisans locaux à vendre en ligne. Grâce à l’application J’origine, les consommateurs trouvent facilement des producteurs locaux. Ils consultent des informations sur les produits et leurs méthodes de production avant de se rendre sur les lieux de vente.
En encourageant la consommation de produits locaux et en agissant pour le développement des petits producteurs et artisans, J'origine contribue à une consommation plus responsable.
Notre objectif est d'intégrer facilement la carte de leur site sur n'importe quels autres sites web. Cela doit se faire au travers d'un widget web. Le principal avantage pour les utilisateurs sera de pouvoir intégrer facilement la carte à leur site web, mais aussi de pouvoir décider des producteurs qu'ils souhaitent afficher.
## Technologies employées
Pour ce projet, nous avons principalement utilisé des technologies web. En effet, nous avons développé notre plugin uniquement en JavaScript. C'est en effet une solution simple, pratique, et légère à mettre en place. Le Javascript est énormément utilisé sur internet. Ainsi, notre plugin s'intègre très bien dans n'importe quel site.
De plus, nous n'avons pas utilisé de framework afin de développer un plugin le plus léger possible, puisque le JS natif est efficace, portable et léger.
Couplés avec HTML et CSS, nous avons un plugin fonctionnel.
#### Firebase
Nous avons utilisé Firebase pour stocker nos données, qui est un service offrant l'hébergement, la gestion de bases de données ainsi qu'un serveur de communication en temps réel. Au travers d'une interface en ligne créée par Google, nous avons accès une API permettant d'utiliser les différents services de Firebase (clood fonction, authentification, accès aux données...).
#### Firestore
La base de données que nous avons utilisée est Cloud Firestore, qui est une base NoSQL orientée document fournie par Google. Son intérêt et sa force est dans le fait qu'elle est serverless, et c'est firebase qui gère automatiquement la logique et les données.
#### Map
Une bonne partie de notre projet a été la compréhension et l'utilisation de cartes Google Map et OpenStreetMap. Nous avons abordé différentes notions, telles que les marqueurs, les pop-ups, la sécurité, la gestion des paiements ainsi que l'utilisation d'API Rest, tout en appréhendant les subtilitées entre les deux cartes. Pour utiliser OpenStreetMap, nous nous sommes servi de Leaflet, une librairie JavaScript OpenSource qui permet de construire des maps pour des sites web.
## Architecture techniques
Le repertoire "Plugins_web" se divise en 5 répertoires :
- le répertoire "Demo" contenant des fichiers HTML pour tester le plugin en local sur des pages simples.
- le répertoire "CmsPlugin" contient les fichiers php permettant de paramétrer une extension pour notre plugin sur les différents CMS. Ici, on a eu le temps de faire une extension que pour WordPress mais la structure est prête pour accueillir les extensions suivantes.
- le répertoire "Plugin" contenant tous les fichiers js pour le code du plugin.
- le répertoire "Mockup" contenant les fichiers de conception de l'interface qui pourrait servir au client du plugin de déterminer les points à afficher sur leur site.
- le répertoire "assets" contenant les icones et images utilisées sur le plugin.
## Réalisations techniques
### Documentation
#### Firestore : Documentation
Pour mieux étudier Firebase, Firestore et sa base de données, nous avons écrit, détaillés et documentés la base de données actuelle de Jorigine. Une fiche détaillée conservé sur Confluence détaille le rôle de chaque collections ainsi que des différents champs présents sur la collection.
#### Analyse de site webs existants
Nous avons épluché tous les sites web des clients actuels de Jorigine pour visualiser :
- les CMS utilisés par les producteurs et/ou agence de tourisme
- découvrir de potentielles cartes intégrées à leurs sites, et ainsi faire l'inventaire des services d'intégration de cartes déjà existant
Au total, nous avons analysé environ 50 sites pour une vingtaine de sites avec des cartes intégrés.
Avec cette recherche, on découvre que le CMS Wordpress est majoritairement utilisé.
Pour les cartes, on retrouve :
- beaucoup d'iframes de maps GoogleMap intégrés aux sites de producteurs
- le logiciel TouristicsMaps utilisant OpenStreetMap
- le logiciel Carto utilisant OpenStreetMap
- le logiciel Tourinsoft utilisant OpenStreetMap
#### Tutoriel d'intégration du plugin/widget
Voir la documentation technique pour avoir le document complet d'installation du plugin que nous avons mis au point pour les Offices de tourisme, départements ou régions qui souhaitent intégrer notre carte à leur site.
### Solution apportée
Nous avons developpé un plugin léger en JavaScript. Ce plugin est très simple à installer sur les sites client de Jorigine, et permet d'accéder aux ressources fournies par Jorigine, à savoir :
- La localisation des producteurs locaux
- Les informations détaillées sur chaque producteur
Le plugin s'insère très bien dans les sites en ajoutant les quelques lignes ci-dessous.
```html
<div
id="jorigine-map"
mapType="googleMap"
key="AIzaSyAgBmyIXRlEy3ka-5jhMcCePMC5jzHBixA"
pluginID="pluginJAgent"
></div>
<script type="module" src="https://storage.googleapis.com/j-origine-plugin/plugin-jorigine.js" async></script>
```
*Balise d'intégration. GoogleMap*
```html
<div
id="jorigine-map"
pluginID="pluginArnaud"
mapType="openStreetMap"
tileURL="https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"
tileCopyright='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
></div>
<script type="module" src="../dist/plugin-jorigine.js" async></script>
```
*Balise d'intégration. OpenStreetMap - Custom Tiles*
On observe que les paramètres sont passés en arguments via la div qui va contenir notre carte. Ainsi, notre plugin est très modulable. Aussi, cela a permis de réduire le temps de développement comparé à la création d'une interface complète. L'idée ici était de faire une preuve de concept, donc le client voulait que l'on s'attarde plus sur le côté fonctionnel et abouti de notre solution.
| Paramètre | Default Value | Carte |
| -------- | -------- | -------- |
| Width | 100% | GoogleMap et OpenStreeMap |
| Height | 100% | GoogleMap et OpenStreeMap |
| mapType | OpenStreeMap | GoogleMap et OpenStreeMap |
| key | Null | GoogleMap |
| tileURL |https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png | OpenStreetMap |
| tileCopyright | "© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors" | OpenStreetMap
Avec OpenStreetMap, il est permis au client d'utiliser des fonds de carte personnalisés, ce qui est un atout pour notre plugin qui peut s'insérer visuellement avec aisance sur les sites clients.
## Gestion de projet
### Méthode
Notre gestion de projet que ce soit pour notre planning, nos outils, ou nos méthodes de travail ont été imposées par notre porteur. Habitués des méthodologies agiles, nous avons donc réparti notre travail en tickets avec des epics et des stories, récapitulés dans un tableau Kanban. Nous avons utilisé Jira pour suivre notre avancement, Bitbucket pour gérer la gestion du code et Confluence pour documenter notre avancement et nos analyses techniques. Nous faisions une réunion avec l'équipe Jorigine tous les lundi, mercredi, et vendredi pour connaître l'avancement en temps réel du projet et s’assurer que nos visions du projet concordent.
### Planning prévisionnel et effectif
#### Prise en main et découverte - 02/22 - 07/02
Lors de la première semaine, nous avons pris en main les différents outils, notamment la suite Atlassian. Nous avons aussi appréhender l'architecture du projet et défini les objectifs en fonction des attentes des porteurs.
#### Apprentissage et Recherche - 07/02 - 11/02
Nous avons, après la première phase de découverte, fait des recherches et des analyses les solutions qui existaient pour intégrer des cartes dans des sites. Nous avons ainsi analysé différents sites concurrent avec l'outil <https://builtwith.com/>, qui nous a permis de comprendre les technologies disponibles et construire notre solution. Ceci nous a aussi permis de reflechir au visuel de notre plugin.
#### Developpement - 14/02 - 08/03
Une fois que nous avions une idée précise sur ce que nous devions faire, des technologies utilisées et des visuels, nous avons commencé à coder.
Cette phase a commencé par la création de petit prototype basé sur **leaflet** ou **google map**, et utilisant le sdk de firebase. Ces petits prototypes nous ont permis de prendre en main les technologies et de rapidement avoir des retours de Sylvain et David nous permettant de clarifier encore les spécifications du produit.
Dans un deuxième temps et en continuant à avoir des retours réguliers de David et Sylvain, nous avons commencé à travailler sur la création du produit final. Mettant en place une architecture nous permettant de proposer à la fois **leaflet** et **google map** au client du plugin. Nos réflexions nous ont en effet amené à faire en sorte que le plugin soit facilement personnalisable, en laissant notamment le choix du fond de map sous leaflet au client.
Durant cette phase, nous avons eu un grand nombre d'échanges par rapport à la conception au niveau du backend ainsi que l’aspect visuel. La version que nous avons produite est le produit d'une méthode dites d' "essai-erreur".
#### Documentation et correction de bug 14/03 - 17/03
Durant cette phase, nous avons corrigé des bugs, mais également développer l'extension WordPress. Nous avons aussi pu tester notre plugin sur un site fait avec WordPress.
Dans cette phase, nous avons également affiné le visuel afin de correspondre au mieux aux attentes de Sylvain.
Les principaux bugs de cette phase concernaient les pop-ups et le logo J'origine qui sortaient parfois de la carte.
On a également ajouté des messages d'erreurs apparaissant quand la personne ne remplit pas correctement les paramètres du plugin.
### Rôle des membres
#### Porteur du projet
* Sylvain Delangue
#### Developpeurs
* MALECOT Ethan
* LANQUETIN Alexis
* PRAT-CAPILA Hugo
* BLANQUET Antoine
#### Equipe technique
* David Flochay
* Benjamin Joly
*Equipe JOrigine lors de la première réunion*
## Outils
Nous avons utilisé les outils fournis par la suite Atlassian. Cette suite fournit un ensemble d'outils complets, efficaces et intuitif pour la gestion de projet, la collaboration, l'organisation...
Nous avons utilisé principalement 3 des outils de la suite Atlassian : Jira, Confluence et BitBucket.
#### Jira
Jira est un outil permettant de gérer un projet de manière efficiente et centralisée. Il fournit des tickets (issues), des dashboards et tout ce qui est nécessaire à la planification et au management d'un projet. Nous nous en sommes servies afin d'organiser et de définir nos axes de travail.
#### Confluence
Ce logiciel est un des leaders du marché dans son domaine. Il permet de créer du contenu (documentation) à la manière d'un wiki d'une façon extrêmement pratique et collaborative.
Nous y avons notamment écrit des rapports de réunions, des rapports de recherche durant la phase "Apprentissage et Recherche", ou encore des documents techniques sur ce que nous avons réalisé.
#### BitBucket
Afin de partager et versionner notre code, nous avons utilisé BitBucket, un outil fourni par la suite Atlasian, que nous avons utilisée. Bitbucket est, comme Github, un service web d'hébergement pour le logiciel de gestion de version Git.
#### Slack
Slack est une messagerie instantanée qui nous a été indispensable pour communiquer et échangé régulièrement avec l'équipe technique, en plus des 3 réunions hebdomadaires.
## Métriques logiciels
Pour cette application, nous avons écrit 1140 lignes de code en javascript ainsi que 115 lignes de php. Ce projet a duré 5 semaines, nous étions une équipe de 4 personnes et avons travaillé 35h par semaine, nous avons donc un temps de travail d’environ 175h chacun. Voici la répartition suivante des 30 issues réalisés au cours du projet :
- 9 réalisés par Alexis
- 5 réalisés par Antoine
- 5 réalisés par Ethan
- 11 réalisés par Hugo
*Ligne de code écrite pour le plugin*
## Conclusion (Retour d'expérience)
Parmi les différents projets sur lesquels nous avons eu l'occasion de travailler durant notre formation à Polytech Grenoble, le projet Jorigine a été le plus concret et donc celui qui nous a le plus intéressé et motivé.
Une partie enrichissante de ce projet était de réfléchir avec le client très régulièrement pour bien comprendre ses attentes et donc produire une solution qui lui correspond. Cela permettait également de faire évoluer sa réflexion sur l'idée qu'il se faisait du plugin. Les échanges avec le client étaient de vraies discussions et permettaient de faire évoluer nos idées et notre manière de voir le produit final.
Cependant, concernant notre travail dans ce projet, nous pensons que nous avons perdu du temps au début du projet en prenant trop de temps sur l'analyse des sites et la découverte de technologies. Cette perte de temps était aussi notamment due au fait que 2 projets se chevauchaient à savoir ce projet et l'ECOM. Malgré cela, nous avons réussi à finir le projet à temps avec une version fonctionnelle et satisfaisante.
Ce projet apportait également une expérience différente de ce que nous avons appris à l'école. Il n'était pas question ici de reproduire un n-ième site d'e-commerce ou interface.
La quantité de code à produire était moins grande, mais il y avait beaucoup d'axes de réflexions à avoir concernant les aspects de sécurité, de paiement et de poids du plugin auxquelles nous avons été moins confrontés pendant notre formation.
Ce projet était une expérience que nous avons appréciée et l'équipe s'est très bien entendue et a su bien collaborer.
## Bibliographie
https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
https://mapsplatform.google.com/
https://app.jorigine.fr/#/welcome
https://leaflet-extras.github.io/leaflet-providers/preview/
https://firebase.google.com/
https://codex.wordpress.org/
## Annexes
Jira:
Confluence:
Sign in with Wallet
Connect another wallet