Composants de l’UI d’un shinydashboard

L’analogie avec le restaurant a été reprise dans la vidéo. Vous y avez vu qu’un shinydashboard est en réalité un type de shinyApp avec un "dashboard" en sortie. Il se décompose donc en deux parties : l’UI et le serveur. En plus, l’UI d’un shinydashboard peut être subdivisée en composants plus petits.

Comprendre ces composants vous aidera à assembler votre premier shinydashboard.

Lesquelles de ces fonctions définissent l’UI d’un shinydashboard ?

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec shinydashboard</cours>

Exercice interactif pratique

Transformez la théorie en action avec l’un de nos exercices interactifs

Commencer l’exercice

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec shinydashboard</cours>

DébutantNiveau de compétence

4.7+

Commencer le cours gratuitement

Avant de créer un shinydashboard, vous devez d’abord comprendre ce qu’est une shinyApp. Dans ce chapitre, vous verrez ce qu’est une shinyApp et de quoi elle se compose. À la fin, vous serez capable d’afficher votre propre shinyApp.

Exercise 1: Premiers pas avec les applications Shiny Exercise 2: Les composants d’une shinyApp Exercise 3: Une shinyApp vide Exercise 4: Types d’entrée Exercise 5: S’entraîner avec sliderInput Exercise 6: Insérer plusieurs entrées Exercise 7: checkboxInput et checkboxGroupInput Exercise 8: Types de sortie Exercise 9: textOutput avec interactions Exercise 10: Menus déroulants Exercise 11: Votre première shinyApp

Au chapitre précédent, vous avez découvert les applications shiny. Dans ce chapitre, vous verrez qu’un shinydashboard est en fait une autre application shiny, mais avec davantage d’options de personnalisation. Les mêmes outputs et inputs présentés précédemment s’utilisent ici exactement de la même manière. Vous apprendrez ensuite à réaliser un wireframing simple pour un tableau de bord, afin de décider où positionner outputs et inputs dans l’interface.

Exercise 1: Composants d’un shinydashboard Exercise 2: Composants de l’UI d’un shinydashboard

Exercice actuel

Exercise 3: Votre premier tableau de bord (vide)Exercise 4: L’en-tête et la barre latérale Exercise 5: Fonctions du header et de la sidebar Exercise 6: Configurer un en-tête Exercise 7: Configurer une barre latérale Exercise 8: Le corps Exercise 9: Wireframing avec des boxes Exercise 10: Wireframing Exercise 11: Votre premier shinydashboard Exercise 12: Fonctions utilitaires Exercise 13: Paramètres de l’en-tête et de la barre latérale Exercise 14: Le body et finaliser l’UI Exercise 15: Créez votre premier tableau de bord

Dans ce chapitre, vous apprendrez à enrichir votre shinydashboard en y insérant des éléments interactifs. Cela inclut des graphiques, des cartes géospatiales et des tableaux avec lesquels les utilisateurs du tableau de bord peuvent interagir en temps réel.

Exercise 1: Graphiques interactifs avec plotly Exercise 2: Créer vos propres graphiques plotly Exercise 3: Comprendre les limites de plotly Exercise 4: Cartes géospatiales avec sf Exercise 5: Types d’objets sf Exercise 6: Graphiques sf avec plot()Exercise 7: Tracés sf avec ggplot Exercise 8: Cartes géospatiales avec leaflet Exercise 9: Couches d’une carte leaflet Exercise 10: Créer votre première carte leaflet Exercise 11: Éléments interactifs dans un shinydashboard Exercise 12: Créer des fonctions utilitaires Exercise 13: Votre premier shinydashboard avec des éléments interactifs

Maintenant que vous maîtrisez shinydashboard, ajoutons des éléments de design. Nous pourrons changer les couleurs d’arrière-plan, modifier les dimensions des box, etc. Nous aborderons aussi quelques principes essentiels d’une bonne UI/UX. Pour finir, nous verrons comment utiliser les statuts et le formatage CSS.

Exercise 1: Bonnes pratiques UI/UX Exercise 2: Comprendre les principes d’UI/UX Exercise 3: Wireframing avec principes UI/UX Exercise 4: Statuts, couleurs et thèmes Exercise 5: Définir des statuts Exercise 6: Définir des couleurs Exercise 7: Changer les skins de shinydashboard Exercise 8: Personnalisation avec le formatage CSS Exercise 9: Bonnes pratiques UI/UX et mise en jambe Exercise 10: Statuses et finalisation de l’interface Exercise 11: Personnalisez votre shinydashboard avec du CSS Exercise 12: Récapitulatif