Composants de l'UI d'un shinydashboard

L'analogie du restaurant a été revisitée dans la vidéo. Vous y avez vu qu'un shinydashboard est en fait un type de shinyApp dont la sortie est un tableau de bord. Il se décompose donc en une partie UI et une partie serveur. De plus, l'UI d'un shinydashboard peut elle-même être décomposée en plus petits composants.

Comprendre ces composants vous aidera à assembler votre premier shinydashboard.

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

Cette activité fait partie du cours

Créer des tableaux de bord avec shinydashboard

Exercice interactif pratique

Passez de la théorie à l’action grâce à l’un de nos exercices interactifs

Commencer l’exercice

Cette activité fait partie du cours

Créer des tableaux de bord avec shinydashboard

SkillTag.level.beginnerSkillTag.label

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 ce qui la compose. À la fin du chapitre, vous serez en mesure d'exécuter votre propre shinyApp.

Exercise 1: Premiers pas avec les applications Shiny Exercise 2: Composantes d'une shinyApp Exercise 3: Une shinyApp vide Exercise 4: Types d'entrée Exercise 5: Pratique 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: Listes déroulantes Exercise 11: Votre première shinyApp

Au chapitre précédent, vous avez appris ce qu'est une shiny app. Dans ce chapitre, vous verrez qu'un shinydashboard est en fait une autre shiny app, mais avec davantage de paramètres ajustables. Les mêmes sorties et entrées décrites au chapitre précédent peuvent être utilisées ici exactement de la même façon. Vous apprendrez ensuite à réaliser un filaire simple (wireframe) pour un tableau de bord, afin de décider où placer les sorties et les entrées dans l'interface.

Exercise 1: Composantes d'un shinydashboard Exercise 2: Composants de l'UI d'un shinydashboard

Exercice en cours

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 barre latérale Exercise 6: Configurer un en-tête Exercise 7: Configurer une barre latérale Exercise 8: Le corps Exercise 9: Esquisses (wireframing) avec des boîtes Exercise 10: Ébauche (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'interface (UI)Exercise 15: Créez votre premier tableau de bord

Dans ce chapitre, vous apprendrez à rehausser votre shinydashboard en y insérant des éléments interactifs. Il s'agira notamment de graphiques, de cartes géospatiales et de tableaux avec lesquels les utilisateurs et utilisatrices 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: Graphiques 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 quelques fonctions utilitaires Exercise 13: Votre premier shinydashboard avec des éléments interactifs

Maintenant que vous connaissez bien shinydashboard, ajoutons des éléments de design. Nous pourrons changer les couleurs d'arrière-plan, modifier les dimensions des boîtes, et plus encore. Nous aborderons aussi quelques principes de base d'une bonne UI/UX. Enfin, nous montrerons comment utiliser les statuts et le formatage CSS.

Exercise 1: Bonnes pratiques de UI/UX Exercise 2: Comprendre les principes d'UI/UX Exercise 3: Ébauche (wireframing) avec des principes de UI/UX Exercise 4: Statuts, couleurs et habillages Exercise 5: Définir des statuts Exercise 6: Définir les couleurs Exercise 7: Changer l'apparence (skin) de shinydashboard Exercise 8: Personnalisation avec le formatage CSS Exercise 9: Bonnes pratiques UI/UX et mise en train Exercise 10: Statuts et finalisation de l'interface Exercise 11: Personnalisez votre shinydashboard avec du CSS Exercise 12: Conclusion