Univers
Présentation de l'entreprise
- Numéro de SIRET : 523 637 098 00014.
- Dénomination sociale : Univers (Nantes) SAS
- Forme juridique : Société par actions simplifiée
Univers est une société qui va récupérer des données de centres d’énergie renouvelable tels que les sites photovoltaïques ou éoliens pour gérer des statistiques et des analyses dans leurs logiciels. Leurs plateformes permet aux entreprises de tous les secteurs de résoudre des problèmes énergétiques complexes grâce à des informations intelligentes et fondées sur des données. Avec 280 millions d'appareils connectés, 788 GW d'énergies renouvelables gérées et un réseau mondial de plus de 1 200 clients, elle est la seul partenaire technologique mondial à offrir une solution de gestion de l'énergie véritablement complète, de bout en bout, qui soutient les entreprises à chaque étape de leur transition énergétique.
Logiciels de l'entreprise
DIP-O
Logiciel qui permet l'onboarding des centrales des clients de façon optimisée.
Qantum
Ancien logiciel de gestion analytique des données. Il est moins avancé que Bazefield et s’occupe de clients avec des petits sites.
Bazefield
Logiciel de gestion analytique des données à destination des clients. Ce logiciel appartient au groupe norvégien d'Univers
Notion
Onboarding :
L’onboarding de centrales/infrastructures est le fait d’intégrer la moindre éolienne ou panneau solaire d’un site client. Sachant qu'un seul site peut contenir plusieurs centaines de panneaux solaires.
MaterialUI :
MatérialUI propose une suite complète d'outils d'interface utilisateur gratuits pour aider à développer plus rapidement de nouvelles fonctionnalités.
Logiciels et applications
GitLab
GitLab est un logiciel libre de forge basé sur git proposant les fonctionnalités de wiki, un système de suivi des bugs, l’intégration continue et la livraison continue (gestion de projet et centralisation)
Bitwarden
Bitwarden est un gestionnaire de mots de passe freemium et partiellement sous licence libre AGPL, qui permet de générer et de conserver des mots de passe de manière sécurisée
openVPN
C’est un logiciel libre et open source permettant de créer un réseau privé virtuel (accéder au réseau de l’entreprise depuis l’extérieur)
Teams
Suite Microsoft
Microsoft Teams est une application textuels et visuels de communication avec les équipes de développement
Outlook
Suite Microsoft
Microsoft Outlook est un gestionnaire d'informations personnelles et un client de courrier électronique propriétaire édité par Microsoft
Jira
Suite Atlassian
C’est un système de suivi des bugs, de gestion des incidents et de gestion de projets (sprint agile SCRUM)
Confluence
Suite Atlassian
Logiciel de wiki utilisé comme logiciel de travail collaboratif
Mission de stage
DIP-O est une application qui a directement été créé à Nantes, permettant de onboardé plus rapide et plus simplement les centrales des clients. Cependant, pour le moment, DIP-O est encore en cours de conception. Ma mission était de créer un thème pour que l’application puisse ressembler un maximum au style de Bazefield. Les langages de programmation que j’ai utiliser sont le TypeScript et React.
J’ai commencé par faire de la documentation pour lister les éléments qui devaient être stylisés (document PDF ici).
Ensuite, pour facilité le changement de mode, je devais ajouter un bouton pour faire le changement entre le thème dark et le thème light. J’ai donc analysé quel type de bouton je devais utiliser, via les composants proposés par MUI, pour cette fonctionnalité (document PDF ici).
Button de changement de mode
Dans ce code, grâce à MaterialUI, je peux utiliser Checkbox/ et modifier ses propriétés. Dans un premier temps, je lui donne une icône (soleil) quand la checkbox n’est pas cochée (mode light) et je lui ajoute la couleur brandPrimary qui est définie dans mon fichier de thème. Ensuite, je définis son icône (lune) quand la checkbox est cochée (mode dark), et de même je lui donne la couleur brandPrimary. Ensuite, je dis que quand la checkbox est cochée, le mode du thème doit être dark. Et finalement, grâce au onChange, je détecte si la checkbox change d’état et j’applique la fonction handleModeChange qui va géré tout le processus de changement de style sur l’application.
Voici le rendu final de la checkbox ajoutée.
Champs de recherche
Un autre composant devait être ajouté à l’application DIP-O, il s’agit d’un SearchInput dans le menu de navigation pour trier le menu. Pour cela, dans mon composant SideBar, j’ajoute à l’endroit voulu le SearchInput avec, en option, le onChange.
Ensuite, dans mon composant que j’ai créé au préalable. Comme base, j’ai pris un input pour en faire un champ de recherche. Je lui ai affecté un placeholder ainsi qu'un label pour l’affichage du texte en fond « Search ». En préfixe, une icône (loupe), une value qui prendra « searchText », qui est la valeur que va écrire l’utilisateur, et grâce au onChange, je détecte si le texte du input évolue et j’applique la fonction handleModeChange qui va gérer tout le processus de tri sur le menu.
Voici le résultat final de cet ajout :
Theme
Par la suite, j’ai pu crée un autre document montrant toutes les modifications qui seront apporté sur les éléments principaux tel que la navbar, sidebar et le contenu principal (document PDF ici)
Et enfin je suis passée a la création du nouveau style pour l’application DIP-O en prenant exemple de Bazefield. Pour cela j’ai crée des palettes de couleurs, celles-ci présente dans l’application Bazefield et j’ai crée des variables pour géré les couleurs que prendrais certains éléments en fonction du mode.
Et grâce à ces variables, palette de couleurs et MaterialUI, je peux styliser les éléments facilement. Par exemple, dans ce code, MuiCheckbox va me cibler toutes les checkbox de l’application. Dans ce cas précis, je rajoute la classe « CheckboxMode » qui est la classe que j’ai ajoutée dans mon composant pour la cibler. Je définis donc ensuite la couleur de l’icône quand elle est dans un certain état ou thème et je définis son style particulier, non défini par défaut par MUI (comme son padding, sa font-size, etc...), toujours dans l’optique de faire comme l’application Bazefield.
Je réitère le changement de style sur tous les éléments pour que l’application soit la plus ressemblante à Bazefield. Voici une comparaison de Bazefield et DIP-O dans les deux mode et un avant et un après de DIP-O
DIP-O avant le style :
Exemple theme Bazefield :
DIP-O après style :
