Créer une application web interactive avec R peut sembler intimidant. Vous pensez peut-être qu'il faut connaître le HTML, le CSS, le JavaScript, les bases de données, etc. La bonne nouvelle? Shiny gère tout cela pour vous. Vous écrivez du R, Shiny fait la magie.

Dans ce guide, nous allons disséquer le code du dashboard M&E. Vous verrez comment les données sont chargées, comment l'interface est construite, comment elle réagit aux actions de l'utilisateur, et comment tout cela s'imbrique parfaitement. À la fin, vous comprendrez non seulement ce que chaque ligne fait, mais pourquoi elle est écrite de cette façon.

Les Packages: Les Briques de Base

Avant même de commencer à écrire le code du dashboard, il faut charger plusieurs "packages" - des boîtes à outils créées par d'autres programmeurs. Imaginez que vous constisez une maison. Plutôt que de fabriquer chaque clou, chaque planche et chaque brique à partir de rien, vous achetez des matériaux pré-faits. Les packages fonctionnent exactement ainsi.

En haut du fichier R, vous verrez plusieurs lignes qui commencent par library(). Chacune charge un outil spécifique dont nous avons besoin:

library(shiny)
library(shinythemes)
library(ggplot2)
library(plotly)
library(dplyr)
library(readxl)
library(DT)
library(scales)

library(shiny) est le plus important. C'est le framework qui transforme du code R en une application web interactive. Sans Shiny, votre code R s'exécute une seule fois et affiche un résultat. Avec Shiny, les utilisateurs peuvent cliquer, taper, choisir dans des listes déroulantes, et l'application répond en temps réel. C'est ce qui rend votre dashboard "vivant".

library(shinythemes) nous donne accès à des designs pré-faits. Plutôt que de coder chaque couleur et chaque style nous-mêmes, nous utilisons un thème existant. Dans notre cas, nous choisissons "flatly", qui donne au dashboard cet aspect professionnel et moderne avec ses teintes gris-bleu.

library(ggplot2) crée des graphiques. C'est la librairie la plus populaire pour faire des visualisations magnifiques en R. Elle utilise une philosophie appelée "grammaire des graphiques" qui rend la création de graphiques intuitive et logique.

library(plotly) rend les graphiques interactifs. Au lieu de simples images statiques, les graphiques de Plotly permettent aux utilisateurs de zoomer, de passer la souris pour voir les valeurs exactes, et même de télécharger le graphique en PNG. C'est beaucoup plus utile pour l'exploration des données.

library(dplyr) est notre "couteau suisse" pour manipuler les données. Avec dplyr, nous pouvons filtrer les données (garder seulement certaines lignes), les grouper (regrouper par projet, par pays, etc.), les résumer (calculer des totaux, des moyennes), et les transformer de mille façons. Cela rend le travail avec les données extraordinairement simple et lisible.

library(readxl) nous permet de lire des fichiers Excel. C'est crucial car nos données se trouvent dans un fichier .xlsx. Sans readxl, nous ne pourrions pas accéder à nos données Excel directement depuis R.

library(DT) crée les tableaux interactifs que vous voyez dans le dashboard. Ces tableaux ne sont pas juste des listes de nombres - ils permettent la recherche, le tri, la pagination. Les utilisateurs peuvent chercher "Sénégal" dans un tableau de 500 lignes et voir instantanément les résultats filtrés.

library(scales) formate les nombres. Rien de plus ennuyeux qu'un nombre comme 1250000. Avec scales, nous le transformons en "1 250 000", ce qui est beaucoup plus lisible. Nous pouvons aussi formater les pourcentages, les devises, etc.

Charger les Données: Lire le Fichier Excel

Maintenant que nous avons tous nos outils, il faut charger les données. Les données du dashboard se trouvent dans un fichier Excel appelé "donnees_projets_me_complete.xlsx". Ce fichier contient 6 onglets différents: Projets, Bénéficiaires, Indicateurs, Finances, Couverture, et Genre.

Pour garder le code organisé et réutilisable, nous créons une fonction spéciale appelée charger_donnees(). Une fonction, c'est un bloc de code que nous pouvons utiliser plusieurs fois sans avoir à le réécrire. Dans notre cas, nous l'utilisons au démarrage pour charger les données, et aussi quand l'utilisateur clique le bouton "Rafraîchir" pour recharger les données les plus récentes.

charger_donnees <- function() {
  list(
    projets = read_excel(FICHIER_DONNEES, sheet = "Projets"),
    beneficiaires = read_excel(FICHIER_DONNEES, sheet = "Bénéficiaires"),
    indicateurs = read_excel(FICHIER_DONNEES, sheet = "Indicateurs"),
    finances = read_excel(FICHIER_DONNEES, sheet = "Finances"),
    couverture = read_excel(FICHIER_DONNEES, sheet = "Couverture"),
    genre = read_excel(FICHIER_DONNEES, sheet = "Genre")
  )
}

Voyons ce qui se passe ici, ligne par ligne. charger_donnees <- function() { crée une nouvelle fonction. Le <- signifie "assigner" - nous assignons le nom "charger_donnees" à cette fonction. Les parenthèses vides () indiquent que cette fonction n'a besoin d'aucun argument (pas de paramètres à passer).

list(...) crée une liste - une collection d'éléments. Dans notre cas, une liste de 6 dataframes (tableaux de données). Chaque élément de la liste a un nom: projets, beneficiaires, indicateurs, etc.

read_excel(FICHIER_DONNEES, sheet = "Projets") lit le fichier Excel. FICHIER_DONNEES est le chemin du fichier (que nous avons défini au début du code comme "donnees_projets_me_complete.xlsx"). sheet = "Projets" dit à la fonction de lire spécifiquement l'onglet "Projets".

Nous répétons cette opération six fois, une pour chaque onglet. À la fin, la fonction retourne une liste contenant tous nos données. Plus tard dans le code, nous pouvons accéder à ces données ainsi: donnees()$projets pour les projets, donnees()$beneficiaires pour les bénéficiaires, etc.

L'Interface Utilisateur: La Partie Visible

Maintenant, créons ce que l'utilisateur voit. C'est ce qu'on appelle l'Interface Utilisateur, ou "UI". L'UI est tout ce qui apparaît à l'écran: les boutons, les filtres déroulants, les graphiques, les tableaux, les couleurs, les polices, tout.

En Shiny, on crée l'UI entièrement en R. Pas besoin d'écrire du HTML ou du CSS directement. Shiny le génère pour vous. Nous commençons avec ui <- fluidPage(...). Une "fluidPage" est une page qui s'adapte à la taille de l'écran - elle est fluide, d'où son nom. Sur un grand écran, elle s'élargit. Sur un téléphone, elle se rétrécit.

À l'intérieur de la fluidPage, nous spécifions theme = shinytheme("flatly"). Cela applique le thème "flatly" - un design pré-fait avec des couleurs agréables et une mise en page professionnelle.

Ensuite, nous créons une navbarPage (page avec barre de navigation). C'est la barre en haut du dashboard qui contient le titre et tous les onglets. Chaque onglet est créé avec tabPanel(...). Un tabPanel contient tout ce qui doit être visible quand cet onglet est actif.

L'Onglet Accueil: Les KPIs et Graphiques

Regardons un exemple concret: l'onglet Accueil. Cet onglet affiche quatre grands chiffres appelés KPIs (Key Performance Indicators - Indicateurs de Performance Clés). Ces chiffres sont: le nombre total de bénéficiaires, le nombre de femmes touchées, le nombre d'enfants touchés, et le nombre de projets actifs.

Pour créer ces grands chiffres, nous utilisons des boîtes stylisées avec CSS. Chaque boîte contient deux éléments: un petit label (par exemple "Total Bénéficiaires") et un grand nombre. Le nombre, cependant, n'est pas écrit en dur. C'est un textOutput avec un ID spécial, par exemple textOutput("kpi_beneficiaires"). Cet ID est un lien vers le serveur. Le serveur calculera le nombre réel et l'enverra ici pour l'afficher.

Sous les KPIs, nous avons deux graphiques. Le premier est un pie chart montrant la distribution des bénéficiaires (hommes, femmes, garçons, filles). Le deuxième est un graphique en ligne montrant la tendance des bénéficiaires au fil du temps. Ces graphiques sont également créés avec plotlyOutput(...) - c'est juste un espace réservé. Le serveur génère les graphiques réels et les envoie ici.

Regardez comment l'UI est structurée: nous ne disons jamais "affiche 1 250 000" ou "affiche ce graphique spécifique". Nous disons juste "il y a un espace pour un nombre ici" et "il y a un espace pour un graphique là". Le serveur remplit ces espaces avec les données réelles.

L'Onglet Bénéficiaires: Filtres et Deux Vues

L'onglet Bénéficiaires est plus complexe. Il a deux types de filtres (période et projet), et deux vues différentes des données (une vue résumée par projet, et une vue détaillée par période).

Les filtres sont créés avec selectInput. C'est une liste déroulante. Quand un utilisateur choisit "Année 1" dans la première liste, le serveur "écoute" ce changement et filtre les données en conséquence. Toutes les données affichées changent alors pour montrer seulement les bénéficiaires de l'Année 1.

Pour les deux vues, nous utilisons tabsetPanel - littéralement, des tabs (onglets) à l'intérieur d'un tab. L'utilisateur peut cliquer sur "Vue Agrégée" pour voir un résumé par projet (une ligne par projet), ou sur "Vue Détaillée" pour voir toutes les données brutes (une ligne pour chaque enregistrement). Cela donne aux utilisateurs deux perspectives différentes sur les mêmes données.

À la fin de chaque vue, il y a un bouton pour télécharger les données en CSV. Cela permet aux utilisateurs de prendre les données, les analyser dans Excel, les importer ailleurs, etc. Le serveur génère le fichier CSV et l'envoie au navigateur de l'utilisateur.

Le Serveur: Le Cerveau de l'Application

Jusqu'à présent, nous avons parlé de l'interface - ce que l'utilisateur voit. Mais c'est le serveur qui fait vraiment la magie. Le serveur est le cerveau. Il écoute ce que l'utilisateur fait, exécute la logique, traite les données, et envoie les résultats à l'interface.

Le serveur en Shiny est défini comme une fonction: server <- function(input, output, session) { ... }. Trois éléments clés:

• input - Ce que l'utilisateur a tapé, cliqué, ou sélectionné. Par exemple, si l'utilisateur sélectionne "Année 1" dans la liste déroulante, cela devient input$benef_filtre_periode = "Année 1".
• output - Ce qu'on envoie à l'interface pour l'afficher. Par exemple, output$kpi_beneficiaires <- 1250000 signifie "affiche ce nombre comme KPI bénéficiaires".
• session - Infos sur la session utilisateur (moins important pour maintenant).

Maintenant, voici le concept crucial qui rend Shiny magique: la réactivité. Quand vous changez input, tout ce qui dépend de input se recalcule automatiquement.

Les Valeurs Réactives: Données qui Changent

Dans le serveur, nous créons une variable spéciale appelée donnees <- reactiveVal(charger_donnees()). Cette variable est "réactive" - elle peut changer pendant que l'application s'exécute.

Au démarrage, reactiveVal appelle charger_donnees() et charge tous nos fichiers Excel. Plus tard, si l'utilisateur clique le bouton "Rafraîchir", nous appelons donnees(charger_donnees()) de nouveau. Cela relit le fichier Excel (peut-être que quelqu'un a ajouté de nouvelles données pendant ce temps) et stocke les nouvelles données dans donnees.

Mais voici ce qui est vraiment merveilleux: dès que donnees change, TOUT ce qui utilise donnees se recalcule. Les KPIs se mettent à jour. Les graphiques se redessinent. Les tableaux se remplissent avec les nouvelles données. Et tout cela se fait automatiquement, sans instruction spéciale. C'est ce qu'on appelle la "propagation réactive".

Nous créons aussi des valeurs réactives plus petites, comme benef_filtres <- reactive({...}). Cette fonction réactive dépend de donnees et de input$benef_filtre_periode. Quand l'un ou l'autre change, benef_filtres() se recalcule. C'est comme une formule Excel qui se met à jour quand vous changez un paramètre.

Calculer les KPIs: Transformer les Données

Voyons comment nous calculons les KPIs. Pour le total des bénéficiaires, nous prenons la colonne "Total" du dataframe des bénéficiaires et l'additionnons. Voici le code:

output$kpi_beneficiaires <- renderText({
  total <- sum(donnees()$beneficiaires$Total, na.rm = TRUE)
  format(total, big.mark = " ")
})

Décortiquons cela. renderText({...}) signifie "ce qui suit va produire du texte à afficher". donnees()$beneficiaires accède au dataframe des bénéficiaires. $Total accède à la colonne "Total" - un vecteur de nombres. sum(...) les additionne tous.

na.rm = TRUE signifie "remove NA values" - ignorer les cellules vides. Si une cellule ne contient pas de nombre, ne pas laisser cela ruiner notre calcul.

Ensuite, format(total, big.mark = " ") formate le nombre. Si le total est 1250000, big.mark = " " ajoute des espaces tous les trois chiffres, le transformant en "1 250 000". C'est plus facile à lire.

Finalement, output$kpi_beneficiaires <- ... assigne ce nombre à l'output appelé "kpi_beneficiaires". Cela correspond au textOutput("kpi_beneficiaires") dans l'UI. C'est le lien entre le serveur et l'interface.

Pour les autres KPIs, le concept est identique. Pour les femmes, nous additionnons seulement la colonne "Femmes Adultes". Pour les enfants, nous additionnons les colonnes "Garçons 0-17" et "Filles 0-17". Pour les projets actifs, nous comptons combien de projets ont le statut "Actif".

Les Graphiques Interactifs avec Plotly

Les graphiques du dashboard sont créés avec Plotly, qui les rend interactifs. Quand l'utilisateur passe la souris sur un élément du graphique, il voit la valeur exacte. Il peut zoomer, dézoomer, télécharger le graphique en PNG.

Pour créer un graphique, nous commençons par préparer les données. Par exemple, pour le pie chart montrant la distribution des bénéficiaires, nous devons résumer les données pour avoir un nombre pour les hommes, un pour les femmes, un pour les garçons, et un pour les filles.

output$graph_benef <- renderPlotly({
  data <- donnees()$beneficiaires %>%
    summarise(
      Hommes = sum(`Hommes Adultes`, na.rm = TRUE),
      Femmes = sum(`Femmes Adultes`, na.rm = TRUE),
      Garçons = sum(`Garçons 0-17`, na.rm = TRUE),
      Filles = sum(`Filles 0-17`, na.rm = TRUE)
    ) %>%
    gather(Groupe, Nombre)
  
  plot_ly(data, labels = ~Groupe, values = ~Nombre, type = "pie")
})

%>% est le "pipe" de dplyr. C'est un tuyau qui passe le résultat d'une opération à la suivante. donnees()$beneficiaires %>% summarise(...) signifie "prends les données des bénéficiaires, puis résume-les". summarise crée un résumé - une nouvelle table avec une ligne et quatre colonnes (une pour chaque groupe).

Ensuite, gather(Groupe, Nombre) transforme cette table de LARGE à LONG. Au lieu d'avoir une colonne pour Hommes, une pour Femmes, etc., nous avons une colonne "Groupe" avec les noms (Hommes, Femmes, Garçons, Filles) et une colonne "Nombre" avec les valeurs. C'est le format que Plotly préfère pour un pie chart.

Finalement, plot_ly(data, labels = ~Groupe, values = ~Nombre, type = "pie") crée le pie chart. Les labels viennent de la colonne Groupe, les valeurs viennent de la colonne Nombre. Le type est "pie". Et le graphique s'affiche dans le tableau de bord, interactive et beau.

Filtrer les Données: La Réactivité en Action

Maintenant, abordons comment les filtres fonctionnent. Quand un utilisateur sélectionne "Année 1" dans la liste déroulante, nous voulons que tous les tableaux affichent seulement les données d'Année 1. Comment faire cela sans créer une fonction différente pour chaque filtre possible?

La réponse est les valeurs réactives. Nous créons une fonction réactive appelée benef_filtres qui dépend de input$benef_filtre_periode et input$benef_filtre_projet.

benef_filtres <- reactive({
  data <- donnees()$beneficiaires
  
  if(input$benef_filtre_periode != "Toutes") {
    data <- data %>% filter(Période == input$benef_filtre_periode)
  }
  
  if(input$benef_filtre_projet != "Tous") {
    data <- data %>% filter(`ID Projet` == as.numeric(input$benef_filtre_projet))
  }
  
  data
})

Voici comment cela fonctionne. D'abord, data <- donnees()$beneficiaires commence avec tous les bénéficiaires. Ensuite, nous vérifions si l'utilisateur a sélectionné une période spécifique (pas "Toutes"). Si oui, nous utilisons filter() pour garder seulement les lignes où la période correspond à ce que l'utilisateur a sélectionné. Ensuite, nous vérifions si l'utilisateur a sélectionné un projet spécifique. Si oui, nous filtrons à nouveau.

Parce que benef_filtres est réactif et dépend de input$benef_filtre_periode et input$benef_filtre_projet, dès que l'utilisateur change l'un de ces filtres, benef_filtres() se recalcule. Et parce que les tableaux dépendent de benef_filtres(), les tableaux se mettent à jour automatiquement.

Les Tableaux: Vue Agrégée vs Vue Détaillée

Une des caractéristiques puissantes du dashboard est qu'il offre deux perspectives des mêmes données: une vue agrégée (résumée) et une vue détaillée (données brutes).

La vue agrégée groupe les données par projet. Chaque ligne représente un projet avec un total de bénéficiaires, un total de femmes, un total d'enfants, etc. C'est parfait pour une vue d'ensemble rapide - quel projet a servi le plus de bénéficiaires?

La vue détaillée montre toutes les données brutes. Chaque ligne est un enregistrement original. Pour les bénéficiaires, chaque ligne est une combinaison de projet et de période. Cela permet aux utilisateurs qui veulent explorer en profondeur de voir exactement quelles données on a.

Pour créer la vue agrégée, nous utilisons group_by pour grouper par projet, puis summarise pour calculer les totaux pour chaque groupe. Pour la vue détaillée, nous utilisons simplement benef_filtres() directement - aucune agrégation.

Ces deux vues sont affichées dans des tabs différents au moyen de tabsetPanel. L'utilisateur peut cliquer entre eux sans problème. Tous les deux respectent les filtres que l'utilisateur a sélectionnés.

Télécharger les Données: Exporter les Résultats

Une caractéristique importante du dashboard est que les utilisateurs peuvent télécharger les données en CSV. Cela leur permet de prendre les données filtrées, les analyser dans Excel, créer leurs propres graphiques, etc.

Pour implémenter cela, nous utilisons downloadHandler. Ce gestionnaire a deux parties: un nom de fichier et le contenu.

Le nom de fichier est une fonction qui retourne un nouveau nom à chaque fois. Nous utilisons Sys.Date() pour obtenir la date d'aujourd'hui et l'inclure dans le nom. Ainsi, si quelqu'un télécharge aujourd'hui, le fichier s'appelle "beneficiaires_agregee_2026-07-07.csv". Demain, ce sera "beneficiaires_agregee_2026-07-08.csv". Cela rend facile l'identification de quand les données ont été téléchargées.

Le contenu est simplement les données agrégées (ou détaillées, selon laquelle l'utilisateur a sélectionnée), écrites dans un fichier CSV avec write.csv(). L'utilisateur clique le bouton "Télécharger", et le fichier se télécharge sur son ordinateur.

Comment Tout Marche Ensemble: Le Flux Complet

Maintenant que nous avons compris les pièces individuelles, voyons comment elles s'assemblent. Imaginez une utilisatrice qui ouvre le dashboard:

1. Elle ouvre l'URL. Son navigateur envoie une requête au serveur Shiny. Le serveur charge le code R, exécute la fonction charger_donnees(), et remplit la variable réactive donnees avec tous les fichiers Excel.
2. Elle voit l'interface. Le serveur envoie l'UI au navigateur. Elle voit la barre de navigation en haut avec tous les onglets, l'onglet Accueil avec les quatre KPIs et deux graphiques, les filtres, tout.
3. Elle clique sur l'onglet "Bénéficiaires". L'interface change pour montrer cet onglet. Aucune requête au serveur - c'est juste un changement dans le navigateur.
4. Elle sélectionne "Année 1" dans le filtre période. input$benef_filtre_periode change. Shiny détecte ce changement.
5. Réactivité!. benef_filtres() détecte que input$benef_filtre_periode a changé. Elle se recalcule. Elle garde seulement les données d'Année 1. Elle retourne un dataframe filtré.
6. Les tableaux se mettent à jour. Parce que les tableaux dépendent de benef_filtres(), ils détectent ce changement. Ils se recalculent pour montrer seulement les données d'Année 1. Le navigateur rafraîchit les tableaux automatiquement.
7. Elle voit les résultats filtrés. En une fraction de seconde, les tableaux affichent seulement les données d'Année 1. C'est rapide, seamless, magnifique.
8. Elle clique le bouton "Télécharger Vue Détaillée". downloadHandler s'exécute. Il crée un fichier CSV avec les données filtrées et l'envoie à son navigateur. Elle voit une boîte de téléchargement.
9. Elle sélectionne maintenant "Projet 5" dans le filtre projet. input$benef_filtre_projet change. Réactivité à nouveau! benef_filtres() se recalcule pour garder seulement Année 1 ET Projet 5. Les tableaux se mettent à jour. Elle voit seulement les données qui correspondent aux deux critères.

Tout ce processus - la détection des changements, la recalculation des valeurs réactives, la mise à jour des tableaux - se fait automatiquement, sans qu'elle ait à faire quoi que ce soit. Elle dit à Shiny ce qu'elle veut voir (en utilisant les filtres), et Shiny figure comment le lui montrer (en utilisant la réactivité).

Conclusion: Vous Comprenez Maintenant

Bravo! Vous avez maintenant une compréhension solide de comment fonctionne un dashboard R Shiny. Vous savez comment les données sont chargées, comment l'interface est structurée, comment le serveur réagit aux actions de l'utilisateur, et comment la réactivité rend tout cela magique.

Le concept clé à retenir est la réactivité. Quand quelque chose change (les données, une sélection de l'utilisateur), tout ce qui dépend de ce quelque chose se met à jour automatiquement. Cela crée une expérience fluide où l'utilisateur n'a pas à faire de clics supplémentaires ou à attendre des chargements de page.

Maintenant que vous comprenez les concepts, vous pouvez:

• Modifier le code pour ajouter vos propres onglets
• Créer vos propres graphiques
• Ajouter des filtres supplémentaires
• Adapter le code pour vos propres données
• Déployer le dashboard pour que d'autres puissent l'utiliser