Présentation de l’entreprise Sokeo
Structure d’accueil
Sokeo est une société par actions simplifiée (SAS) créée en mars 2017. Elle est située au 8 Boulevard Sainte-Thérèse, 13005 Marseille. L’entreprise développe des solutions numériques sur mesure à destination des professionnels et institutions.
Contexte
Sokeo évolue dans le domaine du développement web et logiciel, avec une expertise dans la création de sites internet, d’applications mobiles et de logiciels spécifiques. L’entreprise se distingue par son approche personnalisée et centrée sur les besoins des clients.
Services proposés
- 🛠️ Développement d’applications web sur mesure
- 🌐 Création de sites internet
- 📱 Applications mobiles personnalisées
- 📊 CRM sur mesure
- 💻 Développement de logiciels spécifiques
- 🔧 Maintenance, accompagnement et suivi
Équipe
L’entreprise compte une dizaine de collaborateurs. Elle a été fondée par Julien Colomb (Président) et Xavier Amiel-Fourtas (Directeur Général), rejoints en 2023 par Patrice Marrale.
Informations complémentaires
Sokeo travaille avec des clients dans toute la France, y compris les DOM-TOM. En 2022, l'effectif était compris entre 6 et 9 salariés Site officiel : www.sokeo.fr.
Projet de Stage
Durant cette expérience, j'interviendrai sur le projet "Compagnie des autocars”. Ce projet est une application web développée avec le framework React en front et CakePHP pour le back, destinée à la gestion de trajets en autocar. Elle fait office d’interface intermédiaire entre les clients à la recherche de trajets et les transporteurs proposant ces services. L’application permet la création et le suivi de dossiers de réservation, incluant notamment la génération de devis, la facturation, ainsi qu’un suivi détaillé des trajets effectués.
Aperçu du site - Compagnie des autocars
Sur le site, un formulaire est proposé pour établir un devis en fonction du voyage envisagé. Il présente plusieurs types de bus disponibles :
- Location Minibus avec chauffeur
- Location bus 30-50-60-70 places avec chauffeur
- Bus double étage
- Bus voyage scolaire
- Autocar Grand Tourisme
- Bus PMR
- Bus séminaire entreprise
- Navette aéroport
- Transport scolaire
- Bus Etudiants
- Bus - évènements sportif
- Bus - Association
- Bus - pèlrinage
- Bus avec chauffeur - Mariage
- Voyage en bus
Mes tâches principales au sein du projet
Lors de ces trois premières semaines, j’ai commencé par me former au framework React, qui est au cœur du projet sur lequel je vais travailler. Pour cela, j’ai suivi une formation en ligne sur Codecademy pendant environ une semaine et demie, afin de bien comprendre les bases du framework de me familiariser avec sa logique et son fonctionnement.
Une fois la formation terminée, j’ai mis en place mon environnement de développement. J’ai d’abord installé WSL sur Windows, mais suite à un problème technique, je suis passée sur un environnement Linux. J’ai ensuite installé Docker, Git et Portainer via le terminal. J’ai également généré une clé SSH pour l’utilisateur root, puis j’ai cloné le dépôt du socle Docker gâce à la ligne de commande.
Pour faciliter la gestion des conteneurs sous Linux, j’ai ajouté Portainer, une interface graphique pour Docker. Après avoir importé la nouvelle base de données , j’ai pu lancer le projet dans un conteneur, accessible depuis le navigateur via un port spécifique. Une fois l’environnement prêt, j’ai commencé à explorer le code, principalement via VSCode et le navigateur. Je me suis concentrée sur la structure du projet côté front-end, en particulier sur le fichier folderList pour commencer, afin de mieux comprendre comment les composants étaient organisés et comment ils interagissaient entre eux.
Mes premières tâches techniques
Tâches simples
- Tâche 1 : Modifier l’ordre d’affichage de certaines colonnes dans la page des dossiers.
- Tâche 2 : Repérer le composant qui affichait la durée des trajets et remplacer le "m" par "min".
Tâche intermédiaire
Rendre le header responsive. Sur mobile, deux composants devaient être masqués, et seule
la barre de recherche devait rester visible. J’ai utilisé le composant
isMobile combiné à des conditions et à quelques ajustements CSS
pour y parvenir.
Amélioration de la page de recherche
J’ai ensuite travaillé sur une tâche plus complexe : améliorer l’affichage des résultats de recherche.
Principales actions réalisées :
- Réorganiser les résultats en quatre colonnes les unes en dessous des autres : clients, devis, factures et dossiers.
- Ajouter un compteur de résultats pour chaque catégorie en version mobile et desktop.
- Intégrer une icône œil (ouvert/fermé) pour contrôler l’affichage des sections.
- Masquer le contenu par défaut en version mobile.
Optimisation de l’affichage mobile
Pour la version mobile de cette page, j’ai structuré le travail en plusieurs étapes :
- Afficher les blocs les uns en dessous des autres.
- Ajouter une icône œil ouvert/fermé pour afficher ou masquer chaque bloc.
- Afficher le nombre de résultats pour chaque bloc.
- Cacher par défaut le contenu sur mobile pour gagner en lisibilité.
Une fois ce travail terminé, j’ai attaqué une nouvelle partie du responsive : le composant folder. Celui-ci posait problème car il contenait des Cards qui débordaient de l’écran sur mobile, ainsi qu’une frise horizontale représentant les 11 étapes du traitement d’un dossier.
J’ai réfléchi à une solution adaptée pour que ces éléments soient lisibles et utilisables sur un petit écran.
Intégration de Material UI (MUI)
Pour cette partie, je me suis appuyée sur la documentation de Material UI, notamment sur le composant Stepper et d’autres, afin de trouver une version de la frise plus adaptée au mobile :
- Sélection et personnalisation d’un modèle mobile.
- Intégration du composant dans le code du projet.
- Ajustements d’affichage pour garantir la cohérence visuelle au niveau de certains éléments des cards qui n’étaient pas adaptés au mobile.
- Corrections sur certaines modales et détails d’interface utilisateur pour finaliser le tout.
- Modification du CSS pour ajuster la taille des cards et les mettre à la bonne taille sur mobile.
Durant la réalisation de ces tâches, j’ai été sur une branche à part du projet sur Git. Une fois les tâches terminées et vérifiées par mon tuteur, je poussais mes modifications sur la branche master en faisant un commit. Il est important de noter que l'ensemble de l'équipe collabore sur ce projet, et moi-même, j'apporte également des modifications. C'est pourquoi l'utilisation de Git et la réalisation de commits sont essentielles, une fois que les modifications ont été validées par Patrice, responsable de la gestion du projet.
Planification prévisionnelle de mes actions
Dans les prochaines semaines, je vais me concentrer sur une dernière tâche complexe côté front-end, qui sera divisée en plusieurs sous-tâches. L’objectif principal sera de synchroniser deux champs — les emails supplémentaires et les numéros de téléphone supplémentaires — entre un formulaire React et un formulaire PHP (CakePHP) côté fournisseurs.
L’idée est que, lorsqu’un utilisateur modifie ces champs dans l’un des formulaires, les données soient automatiquement mises à jour dans l’autre. Cette synchronisation vise à garantir une meilleure cohérence entre les deux interfaces.
Je travaillerai aussi sur l’amélioration de l’affichage de ces champs dans le formulaire CakePHP. Actuellement séparés par des points-virgules, je proposerai une version plus lisible : chaque entrée sur une ligne ou présentée sous forme de bulle avec une croix de suppression.
Une fois cette tâche terminée, je commencerai à intervenir progressivement sur le back-end CakePHP, en allant au-delà de la modification du code existant : création de composants, intégration de nouvelles données, interactions avec la base de données, etc. Je continuerai également à contribuer au front-end selon les besoins.
Toutes ces tâches m'ont vraiment permis de me familiariser avec React, de comprendre sa logique, et de m'immerger dans la structure du projet. J’ai découvert de nouvelles fonctionnalités, des raccourcis et bonnes pratiques, ce qui m’a aidée à progresser en front-end comme en logique de développement.
Je commence également à bien percevoir l’intérêt de Git dans un projet collaboratif, notamment pour le suivi des versions et le travail en équipe. Son utilisation via VSCode m’a permis de prendre de bonnes habitudes dès le départ.
Diagramme de Gantt de mes actions
Analyse du besoin à l’origine du projet : analyse de l’existant, besoin d’évolution, objectifs à atteindre
Analyse du besoin à l’origine du projet
- Contexte : Application initialement conçue pour desktop, répondant aux besoins spécifiques de la cliente.
- Évolution nécessaire : Adaptation du projet à un design responsive pour permettre une gestion mobile de l’application.
- Historique : Le projet a été lancé il y a deux ans, après deux mois de développement. Il est en constante évolution depuis sa mise en production.
- Objectif initial : L'application visait à être utilisée sur des ordinateurs de bureau et portables, sans prévoir de version mobile.
Besoin d’évolution
- Évolution continue : Le projet évolue constamment pour améliorer son fonctionnement et son ergonomie, avec l’objectif d’optimiser la productivité, même sur mobile.
- Accessibilité mobile : L’application doit devenir accessible sur téléphone pour permettre à la cliente d’intervenir à tout moment (ex : débloquer un client, gérer un devis important).
- Formulaires pour les transporteurs : Permettre aux transporteurs de saisir leurs informations via des formulaires accessibles en ligne, améliorant la fluidité du processus et réduisant les échanges par mail.
- Gestion des demandes de trajets : Intégrer un système de gestion des demandes directement dans l’application, centralisant les informations et automatisant les notifications pour simplifier la gestion des devis.
Objectif à atteindre
- Centralisation et automatisation : L'objectif principal est de centraliser et d’automatiser les besoins de la cliente pour gagner du temps et alléger sa charge de travail.
- Amélioration de l’ergonomie : L’ergonomie de l’application sera améliorée pour une meilleure expérience utilisateur, facilitant ainsi les tâches quotidiennes.
- Solution plus efficace : SOKEO vise à offrir une solution plus efficace et productive, réduisant les tâches manuelles et optimisant le processus global.
Veille et recommandations pour le projet pour donner suite à la veille réalisée
Dans le cadre de mon intégration à l'agence SOKEO, j'ai réalisé une veille technologique sur les outils et frameworks utilisés pour le développement du projet "Compagnie des Autocars".
Formation et veille sur React
- React : Bibliothèque JavaScript développée par Facebook pour créer des interfaces utilisateur interactives et performantes.
- Objectif : Comprendre le fonctionnement de React et développer des compétences sur ce framework.
- Apprentissage : Formation sur CodeAcademy pour approfondir les connaissances sur React et la syntaxe particulière avec HTML, CSS, et JavaScript.
Formation et veille sur CakePHP
- CakePHP : Framework open-source PHP suivant le modèle MVC, facilitant le développement rapide d'applications web.
- Objectif : Comprendre les outils intégrés pour le développement rapide d'applications (authentification, base de données).
Veille sur MUI (Material UI)
- MUI : Bibliothèque de composants React basée sur le design system Material Design de Google.
- Objectif : Étudier l'intégration de MUI avec React pour améliorer l'expérience utilisateur et la responsivité des interfaces.
- Composants : Étude de composants comme Button, TextField, et Grid, leur personnalisation et combinaison pour créer des interfaces modernes.
Recommandations pour le projet
- Amélioration de la structure React : Optimiser les composants pour améliorer le responsive et l'affichage mobile.
- Versioning et collaboration : Utilisation d'outils comme Git pour faciliter le travail d’équipe et la gestion des versions du projet.
Grâce à ces apprentissages, j'ai pu contribuer activement au projet "Compagnie des Autocars" et améliorer ma compréhension technique du projet. Cela m'a aussi permis de gagner en efficacité et d'être plus investie dans le projet.