Nous allons présenter le sujet de mon stage à Lunatech Labs Rotterdam appelé Annia. Nous commencerons par décrire les choix techniques. Par la suite, nous expliquerons plus en détail comment nous avons résolu les objectifs initiaux.

Introduction

Durant mon stage à Lunatech Rotterdam, on m’a confié le développement d’un projet interne nommé Annia. Ce projet a deux objectifs principaux. Tout d’abord, remplacer une application interne existante afin de proposer un annuaire interne accessible à tous les collaborateurs de Lunatech directement dans Annia (fig. 1). De plus, Annia permet de voir rapidement le temps de trajet quotidien entre un employé et un nouveau client afin de l’optimiser. Dans la prochaine partie, nous allons décrire comment Annia résout ces différentes problématiques.

figure 1: Annuaire

Technologies utilisées dans Annia

Annia comporte deux parties distinctes. Tout d’abord, une partie serveur qui met à disposition une REST API construite avec Kotlin puis une application web réalisée à l’aide de React.js.

Pour la partie serveur, nous avons choisi Kotlin. La première chose à savoir est que Lunatech est spécialisée dans les langages destinés à la JVM et plus précisément Java et Scala. Cependant, Lunatech, en tant qu’entreprise du numérique, souhaite rester à la pointe dans son domaine. Par conséquent, Annia était l’occasion idéale pour tester Kotlin dans un projet complet afin de voir ses forces et faiblesses. Après avoir fait le choix du langage, nous avons dû choisir un framework afin de l’implémenter côté serveur. Notre choix s’est restreint entre SpringMicronaut et Ktor (fig. 2). Micronaut a été éliminé d’office dû à sa faible communauté et à sa documentation. Ktor et Spring semblaient tous les deux convaincants pour notre cas. Cependant, notre choix s’est porté sur Ktor car il est intégralement réalisé en Kotlin. De plus, Ktor est supporté par JetBrains et s’annonce très prometteur dans les années à venir ! Pour finir, Ktor possède une communauté grandissante comme nous avons pu le voir sur le Slack Ktor public.

Figure 2 : Comparaison entre Spring, Micronaut et Ktor

Concernant l’application web, nous avons réduit les choix entre Vue.jsAngular et React.js. Angular a été écarté car j’avais déjà réalisé un projet avec. Etant dans un état d’esprit d’apprentissage continu, je souhaitais essayer quelque chose de nouveau. Par la suite, nous avons choisi React.js. En effet, plusieurs personnes m’ont recommandé d’essayer un projet avec l’aide de React.js et je n’ai pas été déçu ! Nous allons maintenant voir les choix concernant l’organisation générale d’Annia.

Organisation générale d’Annia

Figure 3 : Organisation générale d’Annia

Le diagramme ci-dessus, présente l’organisation globale d’Annia. Notre REST API va recueillir des informations sur les employés à l’aide de l’API de Zoho People. De plus, nous allons récupérer les temps de trajet grâce à l’API de Google Maps. Après avoir récupéré les différentes informations nécessaires, nous les transformons afin de proposer une API utilisable par de multiples applications. Annia possède trois groupes de routes afin d’interagir avec les différentes APIs. Tout d’abord, une route permettant de s’authentifier grâce à Google Authentification (seul les employés de Lunatech sont autorisés). Un autre ensemble de routes permet de communiquer avec Zoho People. La seule condition préalable est d’être connecté afin d’avoir accès aux routes reliant Zoho. Vous pouvez, entre autres, récupérer tous les employés, seulement un ou encore modifier vos informations directement sur Zoho People. Le dernier jeu de routes permet d’interagir avec Google Maps. Pour ces routes, aucune authentification n’est nécessaire. Vous pouvez récupérer le temps de transport entre deux adresses selon différents modes de transport (à pied, en vélo, en transport en commun ou en voiture). Il est aussi possible d’auto compléter une adresse ou encore de transformer une adresse par son couple (latitude, longitude). Comme vous pouvez le voir sur la figure 4, une documentation swagger est mise à disposition afin d’expliquer plus simplement toutes les opérations disponibles.

Figure 4 : Documentation Swagger d’Annia

La partie serveur n’a pas été très compliquée car nous n’avions pas de base de données à gérer. En effet, toutes les informations concernant les employés sont stockées dans Zoho People. Dans la prochaine partie, nous allons décrire nos premiers pas avec Kotlin et Ktor

Ktor et Kotlin en pratique

Nos débuts avec Ktor ont été laborieux. En effet, nous avons rencontré plusieurs bugs embêtants ainsi qu’un manque de documentation sur certains points. Cependant, après quelques jours de pratique, on ressent la puissance de ce jeune framework. Il comporte de nombreuses fonctionnalités vous facilitant la vie lors du développement de votre back-end. De plus, la communauté est toujours disponible pour vous aider à travers leur Slack public.

De plus, Kotlin est un langage vraiment agréable. Par exemple, pour résoudre le problème des Null Pointer Exception, Kotlin apporte une solution pratique, contrairement à Java où ce problème est omniprésent pour tous les développeurs. Penchons nous sur la figure 5. Nous commençons par définir deux variables. Name1 de type String. Cette variable ne pourra pas être nulle contrairement à name2 qui est un String?. Dans le premier print, nous sommes sûrs que name1 ne sera pas null. Par conséquent, nous pouvons y faire appelle directement sans vérification. Dans le second print, name2 peut être null. Nous avons donc recours à l’Elvis operator, ?:,  pour vérifier si la variable est null. Cet opérateur prendra la right-value si quelque chose est null dans la left-value. Dans le cas contraire, il retournera la left-value. De plus, dans le second print, le ? entre name2 et length nous permet d’éviter les Null Pointer Exception. Le code équivalent en Java serais `if (name2 != null) name2.length else “null has no length”`. Dans la dernière ligne de la figure 5, l’affectation ne sera pas possible et l’IDE nous indiquera une erreur. Nous devons utiliser le null safety operator ? dans ce cas afin de ne pas avoir de Null Pointer Exception.

Python


Figure 5 : Exemple de la gestion du Null

Nous n’allons pas décrire toutes les fonctionnalités apportées par Kotlin. Nous vous invitons à vous rendre à ce lien pour plus d’information !

Ktor possède lui aussi de nombreuses fonctionnalités très utiles au quotidien. Si vous êtes intéressé par ce framework prometteur, nous vous renvoyons vers la page officielle. Prenons l’exemple de la figure 6, avec la feature ContentNegociation, nous pouvons convertir automatiquement une réponse dans notre data class en fonction du header Content-Type et Accept. Si vous appelez une API afin de récupérer l’ensemble de vos employés par exemple, cette feature va regarder si le header Content-Type est égal à `application/json`. Si c’est le cas, Ktor sera en mesure de convertir la réponse directement en un tableau avec toutes vos data class représentant les différents employés. Dans la figure 6, la variable myDataClass va être directement convertis en une instance de MyDataClass. Dans la dernière ligne de code, le même mécanisme est mis en place pour répondre. C’est-à-dire, que votre DataClass sera convertie en json sans aucune action de votre part. Vraiment pratique pour gérer les requêtes et les réponses de votre API !

Python


Figure 6 : Exemple ContentNegotiation feature Ktor

Une autre feature très importante pour un back-end est la gestion des routes. Dans la figure 7, nous avons une route `/employees` qui permet de récupérer tous les employés sans aucune authentification. Nous avons aussi une route `/employees/admin/update/{id}` qui permet avec un handler qui va vérifier les droits administrateur avant de laisser l’accès total à la route. Le routage est vraiment simple et logique avec Ktor. Il existe de nombreuses feature afin de gérer tous les cas de figure. Par exemple, admettons que dans une autre version, nous souhaitons rendre le paramètre id facultatif. Il nous suffit de mettre ? comme {id?} et c’est tout ! Nous n’allons pas présenter toutes les fonctionnalités de Ktor mais c’est un framework vraiment puissant et la courbe d’apprentissage n’est pas insurmontable !

Python


 

Figure 7 : Exemple routage avec Ktor

Nous pourrions parler de Kotlin et Ktor durant des heures mais nous allons arrêter ici. Si vous souhaitez avoir plus d’informations, vous pouvez voir le site officiel de Kotlin et de Ktor. De plus, si vous souhaitez plus de renseignements sur les différentes routes disponibles avec Annia, nous vous renvoyons ici. Dans la prochaine partie, nous allons décrire l’application web.

Application web avec React.js

Vous pouvez accéder à cette application ici mais vous devez être un employé Lunatech afin d’y avoir entièrement accès. Pour cette partie, nous avons choisi React.js. React.js possède sa propre logique pour gérer le front-end à l’aide du principe de composant. Tout d’abord, React.js n’est pas un framework mais plutôt une bibliothèque contrairement à Angular. Vous êtes donc moins contraints avec React.js. Mais vous avez aussi un vaste champ de solution pour résoudre le même problème et non un fil conducteur à suivre pour tel ou tel cas. Aucun cas n’est meilleur et le choix dépend principalement de vous et du projet. Personnellement, je préfère l’approche bibliothèque car nous pouvons installer exactement ce dont nous avons besoin sans s’encombrer de fonctionnalités superflues. Concernant le framework CSS, nous avons choisi Material-UI qui mets à disposition des composants React prêt à l’emploi.

L’application web est présente dans la figure 10. Dans l’ordre, nous avons : la page d’authentification, la page annuaire, la page pour éditer un profil, la page pour voir un profil en lecture seule, la page pour renseigner une adresse et enfin la page affichant les différents temps de transport. Le workflow est le suivant. Tout d’abord, vous devez vous authentifier avec un compte google Lunatech valide. Par la suite, vous pouvez voir la liste des employés. En fonction de vos privilèges, vous verrez plus ou moins d’informations. Vous pouvez appeler un employé en appuyant sur son numéro de téléphone. De plus, vous pouvez cliquer sur chaque carte. La page suivant dépendra de votre rôle. La différence entre les deux rôles est représentée sur les figures 8 et 9.

Figure 8 : Diagramme de séquence Administrateur

Figure 9 : Diagramme de séquence Autre

La différence entre les deux rôles va se faire seulement dans les échanges avec Zoho. Un administrateur va pouvoir voir le numéro ainsi que l’adresse de tous les employés. Il pourra aussi éditer le profil de tout le monde. A l’opposé, un utilisateur classique ne pourra voir que son numéro et celui des employés qui ont acceptés de le partager. De plus, il aura la possibilité de voir seulement son adresse. Pour finir, il pourra modifier son profil et non celui des autres employés. Donc en fonction de votre rôle, la page suivante sera en lecture seule ou non. Sur cette nouvelle page, vous pourrez cliquer sur `Calculate transit time` puis remplir l’adresse du client qui sera auto complétée. Enfin, vous arriverez sur la page avec les différents temps de trajet en fonction du moyen de transport. Vous pouvez cliquer sur les différents icônes afin de voir le trajet sur la carte. De plus, Annia est totalement responsive donc son utilisation ne pose aucun problème sur mobile.

Conclusion

En conclusion, ce projet a été une expérience très enrichissante. Cela m’a permis de découvrir de nouveaux concepts et langages. Je souhaite remercier Vincent Grente pour son aide durant chaque étape d’Annia et plus généralement Lunatech pour toutes les personnes formidables que j’ai pu rencontrer !

Figure 10 : Screenshots Annia

Ressources:

  1. Official website Kotlin : https://kotlinlang.org/docs/tutorials/
  2. Discover Kotlin : https://www.udacity.com/course/kotlin-bootcamp-for-programmers–ud9011
  3. Plugin intellij Kotlin : https://kotlinlang.org/docs/tutorials/edu-tools-learner.html
  4. Official website Ktor : https://ktor.io/
  5. Official website React.js : https://reactjs.org/
  6. Tutorial (french) React.js : https://openclassrooms.com/fr/courses/4664381-realisez-une-application-web-avec-react-js
  7. Tutorial React.js : https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

VINCENT BRULÉ