MarketPlus

De VK Wiki
Aller à : navigation, rechercher

Présentation

Market+ est un outil de type CRM[1] (Customer Relationship Management / Outil de gestion de la relation client) personnalisé selon les demandes adressée à Obvious par ses partenaires. Il s'agit d'une présentation sous forme de tableau et d'organigramme de relations clients.

Description technique

Dans sa version originale, l'outil est servi par deux pages en PHP, et fonctionne principalement à l'aide de bibliothèques javascript.

Données en entrée

Fichiers generator.html et generateJSON.js

Cet outil permet de mettre en forme les objets JSON qui seront utilisés plus tard par l'outil Market+. Pour être convertie par cet outil, chaque entité doit comporter deux fichiers javascript ou Json contenant les informations sur les comptes et sur les KDM respectivement. Ces données sont sous forme d'objet JSON "plat", c'est à dire qu'ils ne comportent qu'un seul niveau hiérarchique. Il s'agit de conversion directe entre des fichiers CSV ou Excel en objets JSON. Certains outils permettent de faire ce genre de conversions http://www.convertcsv.com/csv-to-json.htm

Les données de comptes doivent être enregistrées dans la variable data et les données KDM dans la variable kdm, peu importe si elles sont dans des fichiers distincts, par exemple json.js et kdm.js ou bien directement intégrées sous une balise <script> dans le fichier generator.html. Il est important de se remémorer que le code contenu dans generateJSON.js a besoin de ces deux variables.

data = [
 {données comptes},
];
kdm = [
 {données kdm},
];

Procédure pour générer les données en entrée

  1. Convertir les deux fichiers CSV, comptes et KDM au format JSON, par exemple avec http://www.convertcsv.com/csv-to-json.htm
  2. Placer les fichiers JSON nouvellement créés dans le répertoire /assets/data
  3. Modifier le code source de generator.html afin qu'il prenne en compte les deux nouveaux fichiers (retirer les liens vers d'autres fichiers inscrivant des données dans les variables data et kdm.
  4. Ouvrir le fichier generate.html dans un navigateur. À l'ouverture de ce fichier, le code javascript de conversion se lancera automatiquement.

Extrait du fichier generator.html

<script type="text/javascript" src=</span>"assets/data/json.js"></script>
<script type="text/javascript" src=</span>"assets/data/kdm.js"></script>
<script src=</span>"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type=
"text/javascript" src=</span>"assets/js/generateJSON.js"></script>


- Le fichier assets/data/json.js comporte la variable data et le fichier assets/data/kdm.js comporte la variable kdm
- le fichier underscore-min.js est une bibliothèque utilisée par le traitement
- assets/js/generateJSON.js contient le traitement lancé automatiquement.

Routage

Fichiers index.php et company.php

index.php

Le fichier index.php est le point d'entrée de l'application. C'est la page appelée par défaut par les serveurs web, à moins d'une configuration différente (fichier .htaccess sur Apache, ou ligne fastcgi_param SCRIPT_FILENAME sur Nginx).


Le rôle de cette page est de présenter un menu déroulant avec les compagnies disponibles sur l'outil Market+. Pour ajouter une nouvelle compagnie, il faut ajouter une balise <span class="custom__option"> dans la balise <div class="custom__select_container">.

<div class="custom__select_container">
  <span class="custom__option" data-value="aus">Australian Government</span>
  <span class="custom__option" data-value="lg">LG Corporation</span>
</div>


Les valeurs contenues dans les champs data-value seront utilisées comme paramètre GET dans le fichier company.php


company.php

C'est la page qui affiche le tableau du CRM pour la compagnie sélectionnée. Normalement, rien ne devrait être changé sur cette page ; elle contient des connexions vers les principales bibliothèques générant le tableau, l'organigramme, etc.

Il y a une ligne en particulier qui est intéressante, il s'agit de la ligne
<script type="text/javascript" src="assets/data/<?= $_GET['c'] ?>.js"></script>


En effet, elle indique où aller chercher le fichier de données. On constate que le fichier de données et le paramètre GET défini dans le fichier index.php sont intimement lié, puisque le nom du fichier correspond à la valeur du paramètre GET avec l'adjonction d'une extension .js.

Ainsi, pour une compagnie dont le code est lg, le fichier de données utilisé est le fichier assets/data/lg.js. Il est donc très important que le fichier de données JSON généré soit nommé de la même manière.

Affichage du tableau

Toute la gestion de l'affichage des cartes KDM et du tableau se fait dans le fichier app.js.

Ajouter des colonnes dans le tableau

Le tableau principal est généré à l'aide de la bibliothèque Datatables[2].

Repérer la ligne var table = $('#myTable').DataTable( { (aux alentours de la ligne 185), car c'est là que débute la génération de la table. Pour ajouter des champs simples, c'est à dire récupérés tels-quels de la base de données, il suffit d'ajouter au tableau "columns" une ligne { "data" : "name", "title" : "Name" }, où l'élément data correspond au nom du champ dans la base de données à afficher, et l'élément title correspond au titre de la colonne du tableau.


Parfois, il est nécessaire de mettre en forme la donnée avant de l'afficher dans le tableau. Pour ce faire, il faut ajouter un élément "render" à l'objet colonne à ajouter. Cet élément est une fonction avec des paramètres automatiquement remplis par la bibliothèque.

le paramètre data est la donnée qui nous intéresse. Attention, ce paramètre est sensible à la casse !
le paramètre row permet de récupérer des données du même enregistrement, par exemple pour calculer un ratio entre deux colonnes d'un enregistrement. Exemple : return Math.round( ( row.price - row.cost ) / row.price * 100 )+'%';

Ainsi, pour ajouter une colonne qui affiche autant d'étoiles que la valeur "score" indique, il faudrait ajouter au tableau l'objet suivant :

	  { "data" : "score" , "title" : "Score", "render" : 
		function (data, type, row) {
			return '<span class="glyphicon glyphicon-star"></span>'.repeat(data);
		}
	  },


Même chose pour afficher un nombre d'étoiles sur un nombre maximum possible (par exemple 3 étoiles sur 5)

	  { "data" : "score" , "title" : "Score", "render" : 
		function (data, type, row) {
			return '<span class="glyphicon glyphicon-star"></span>'.repeat(data) + '<span class="glyphicon glyphicon-star"></span>'.repeat(5-data);
		}
	  },


Il est possible de modifier des colonnes une fois qu'elles ont été créées à l'aide de l'élément "createdRow"[3]


Pour que le tableau s'affiche, il faut s'assurer que toutes les colonnes demandées existent en tant que champs/éléments dans le fichier de base de données JSON (lg.js, aus.js ou tout autre fichier équivalent créé)


Modifier les cartes Entreprise, BU et KDM

L'affichage des cartes est traité par la bibliothèque Javascript Vue. Chaque type de carte a un élément template dans lequel est chargé un modèle (canevas) sous forme de code HTML pur. Pour ajouter des champs, il suffit de modifier le code HTML, sachant que pour intégrer une valeur de la base, il faut la placer entre crochets et simple-cotes : ['MaValeur']. Comme pour le tableau, ce nom est sensible à la casse, et doit exister dans la base / objet dataSet.



  1. https://fr.wikipedia.org/wiki/Gestion_de_la_relation_client
  2. https://datatables.net/manual/data/renderers
  3. https://datatables.net/reference/option/createdRow