Créez votre premier plugin Piwik

Prérequis pour la création d’un plugin sur Piwik

Avant de débuter la création d’un plugin sur Piwik, il faut que vous ayez un environnement de développement fonctionnel.

1. Configurer un environnement de développement sous Windows.
2. Configurer un environnement de développement sous Ubuntu.
3. Avoir une installation de Piwik fonctionnelle sur un serveur local.
4. Avoir un éditeur de code.

Étape 1 : déclarez votre plugin

La première étape consiste à déclarer votre plugin auprès de votre installation.
Pour cela, il faut respecter les conventions imposées par Piwik.

Tout d’abord, ouvrez votre invite de commande (Win + R, puis écrivez « cmd »).

Dans votre invite de commande, exécutez la ligne suivante :

cd C:\mon\chemin\vers\Piwik

Pour continuer, il nous faut un module appelé Composer. Si vous ne l’avez pas sur votre machine, téléchargez-le en entrant ces lignes dans votre invite de commande :

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Une fois le module installé, il faut entrer en mode développement en exécutant la commande suivante :

php console development:enable

Maintenant, il faut générer un dossier qui contiendra tous les fichiers de base nécessaires à la création d’un plugin.

Cette commande requiert des paramètres : entrez donc la ligne suivante, puis suivez la liste d’instructions décrite juste en dessous :

php console generate:plugin --name="MonPlugin"

• Entrez votre description
• Entrez votre numéro de version

Une fois ces commandes effectuées, vous constatez qu’un dossier « MonPlugin » a été créé dans le répertoire des plugins de Piwik (situé dans piwik/plugins/MonPlugin).

Maintenant, il faut que vous activiez votre nouveau plugin dans Piwik :

php console plugin:activate MonPlugin

Étape 2 : ajouter un widget à votre plugin

Pour ajouter un widget à votre plugin, il faut le générer grâce à la commande suivante, puis suivre les instructions ci-dessous :

php console generate:widget

• Entrez le nom de votre plugin précédemment créé (MonPlugin)
• Entrez le nom du widget que vous voulez créer (MonWidget)
• Entrez la catégorie du widget (ici le nom de votre plugin : MonPlugin)

Maintenant, ajoutez votre widget à votre tableau de bord :
rendez-vous dans votre tableau de bord, puis cherchez la catégorie portant le nom de votre plugin et ajoutez votre widget (celui-ci est vide et ne comporte aucune information).

Pour éditer le widget, rendez-vous dans votre répertoire :
Piwik/Plugins/MonPlugin/Widgets/GetMonWidget
C’est ici que votre widget doit être édité.

À la fin de ce fichier, vous retrouverez la fonction suivante :

Ajoutez-y le code suivant avant la ligne commençant par « return » :

 $result = \Piwik\API\Request::processRequest('VisitsSummary.getVisits');

Ensuite, remplacez le texte « My Widget Text » de la ligne suivante par :

'. $result .'

Ce qui devrait vous donner comme rendu :

Enregistrez le tout, puis retournez sur votre tableau de bord et actualisez la page.

Votre widget affiche désormais le nombre de visites total de votre site.

Étape 3 : ajoutez du style CSS à votre widget

Votre plugin fonctionne enfin, mais pour le rendre plus joli, vous pouvez ajouter un peu de code CSS : c’est ce que nous allons voir dans cette partie.

Tout d’abord, retournez dans le répertoire de votre plugin. Le dossier MonPlugin contient un fichier du même nom avec une extension .php ; ouvrez-le.

Dans ce fichier (normalement presque vide), vous retrouverez les lignes suivantes :

Ajoutez le code ci-dessous afin de compléter le fichier.

namespace Piwik\Plugins\MonPlugin;

class MonPlugin extends \Piwik\Plugin
{

    public function registerEvents()
    {
        return array(
            'AssetManager.getStylesheetFiles' => 'getStylesheetFiles',
        );
    }

    public function getStylesheetFiles(&$files)
    {
        $files[] = "plugins/MonPlugin/css/style.css";
    }

}

Votre fichier doit maintenant ressembler à celui-ci :

Maintenant, créez un dossier « css » dans le dossier de votre plugin, dans lequel vous créerez un fichier que vous nommerez « style.css ».

Tout le code CSS qui sera écrit dans ce fichier sera interprété par Piwik pour modifier l’affichage de votre widget.

Félicitations, vous venez de créer votre tout premier plugin Piwik !