• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 02/03/2021

Préparez-vous aux mini-projets de développement

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Alors cette fois, on rentre dans la cour des grands, et on va vous demander de réaliser un vrai projet. Généralement en dernière phase des entretiens techniques, c’est le test qui peut être à la fois le plus stressant mais aussi le plus intéressant, tant techniquement qu’humainement.

Il est effectivement stressant et difficile car c’est votre travail qui est jugé et donc, dans un sens, votre esprit critique, votre logique ainsi que votre raisonnement.

Cela dit, ne paniquez pas ! Les développeurs voudront simplement, pour la plupart, apprendre à vous connaître et savoir comment vous réfléchissez. :)

Parfois, l'entreprise vous fournira une base déjà existante et vous devrez intégrer la fonctionnalité dessus. Parfois, ce sera à vous de monter toute l'architecture, en choisissant, par exemple, les librairies, l'environnement de développement, etc.

Si le terme vous semble encore un peu abstrait et que vous avez du mal à distinguer ce qui pourrait vous être demandé, voici quelques exemples :

  • intégrer une page telle qu'une landing page ;

  • implémenter un moteur de recherche ;

  • aller chercher des données auprès d'une API pour les afficher.

Découvrez l’utilité des mini-projets pour un recruteur

Mais pourquoi dois-je réaliser ce test ? Je pensais que la discussion technique ou les tests d’algorithmique étaient suffisants pour donner un avis sur mon niveau. :euh:

Eh bien, c'est en partie vrai. Comme je vous le disais dans les chapitres précédents, vous aurez rarement tous les tests dont je vous parle ici lors du processus de recrutement (même si pour mon recrutement chez Sens Critique, je les ai tous eus ;) ).

Autre point, c'est le test le plus important et aussi le plus plus intéressant. En tant que candidat, vous allez avoir un feedback et des retours sur la façon dont vous développez et vous améliorez. Vous allez d’ailleurs souvent apprendre de nouvelles choses (une résolution différente d’un problème, une nouvelle librairie, etc.). Pour l’entreprise, c’est le moment de vous évaluer sur votre capacité à développer.

Faisons une petite pause et prenons un instant un peu de hauteur par rapport à ce que je viens de vous dire sur les tests techniques ;

  • d’un côté, la discussion technique permet au recruteur de connaître un peu plus le candidat, et de parler avec lui de concepts généraux ;

  • ensuite, les tests d’algorithmique permettent de voir et de jauger son raisonnement logique et sa capacité à appréhender un problème, sur un cas bien précis ;

  • enfin, le mini-projet permet de vous faire travailler sur un projet concret. Il va donc montrer au recruteur comment vous travaillez et comment vous réfléchissez. Il va aussi très souvent amener le recruteur à vous poser des questions (Pourquoi as-tu implémenté cette solution ? Est-elle meilleure qu'une autre ? Etc.).

En somme, ce test donne un aperçu à vous, candidat, ainsi qu’au recruteur, de la manière dont peut se passer la collaboration au jour le jour, une fois dans l’entreprise.

Et comment se déroule ce type de test ?

Généralement, ce test se déroule en deux parties.

  1. La première partie est celle où vous allez travailler sur le test. Vous pouvez le réaliser aussi bien dans les locaux de l'entreprise que chez vous, dans votre chambre ou votre bureau.

  2. La deuxième partie, quant à elle, se fera plutôt au sein de l'entreprise. Vous aurez une discussion avec un ou deux développeurs de l'entreprise. Cette partie vous permettra de défendre vos idées, et de parler de notions liées à ce que vous avez mis en place.

Projetez-vous dans l’exercice

Maintenant que je vous ai présenté l’utilité de ce test et ses conditions de réalisation, parlons ensemble des projets potentiels que vous pourriez avoir, et pourquoi.

En fonction de votre spécialité, intégrateur web, développeur front-end, back-end, les compétences évaluées ne sont pas forcément les mêmes. Ce qui est finalement assez logique.

En effet, un développeur back-end implémente ce qu’on appelle la “logique métier”, autrement dit les règles qui régissent le bon fonctionnement de l’application.

Un développeur back-end peut donc se voir poser des questions de ce type en entretien : Comment optimises-tu tes requêtes en BDD ? Comment crées-tu et maintiens-tu une API REST ? Etc.

Le développeur front-end aura, quant à lui, des questions portées sur l’intégration CSS ainsi que sur la gestion de la partie dynamique du site (récupération des données via des requêtes AJAX et utilisation d’API, gestion et sécurisation des sessions, etc.)

Si c’est encore trop abstrait pour vous, voici une liste de mini-projets potentiels par spécialité et avec quelques explications complémentaires.

Intégrateur web

  • Intégrer un dashboard.

  • Réaliser une intégration d’une page, page de profil par exemple, en utilisant des préprocesseurs CSS type Sass.

  • Réaliser un WordPress ou un Prestashop.

  • Intégrer un formulaire de contact ou de newsletter avec des selecteurs CSS avancés.

Développeur front-end

  • Intégrer une maquette, type page de profil, avec un framework front tel que ReactJS/VueJS.

  • Réaliser un jeu, de morpion par exemple, en utilisant des design patterns (type module pattern).

  • Réaliser une PWA.

  • Récupérer des données auprès d’une API (de météo, par exemple), et afficher les données de cette dernière.

  • Faire une galerie interactive d’images.

  • Mettre en place un player vidéo interactif.

Développeur back-end

  • Faire une API Rest.

  • Réaliser un blog ou un gestionnaire quelconque (pour une librairie, par exemple) et mettre en place le CRUD.

  • Réaliser un bot type Scraper.

Développeur mobile

  • Faire un jeu.

  • Utiliser une API pour afficher des données (ce qui vous fera travailler les appels réseaux). 

  • Réaliser un logiciel type gestion de parcs d’attraction (avec différents droits utilisateurs et zones d’accès possible).

Comme vous pouvez le constater, il existe de très nombreux sujets possibles, et je ne pourrai pas forcément tous vous les citer, d'autant plus que la plupart se basent sur mon expérience professionnelle, tant comme candidat que comme recruteur. De plus, les vidéos complémentaires en bas de page vous permettront d’aller plus loin dans la préparation de ce test.

Adoptez la bonne attitude pendant le développement

Durant la phase de développement du mini-projet, vous allez devoir mettre en avant toutes vos connaissances et compétences acquises au sein de votre formation.

Voici quelques conseils qui vont vous permettre de réaliser cette étape sereinement.

Indentez proprement votre code et suivez les bonnes pratiques de développement

Quand on réalise ce genre de test, le stress aidant, on peut parfois être tenté d’aller un peu vite et d’écrire du code en mode un peu “crade”.

render() {
return (
<View style={styles.onboarding}>
<Swiper
activeDotColor="#FFF"
dotStyle={{
backgroundColor'#17B96A'
}}
loop={false}
style={styles.wrapper}
>
<View style={styles.slide}>
<Image source={logo} style={styles.screen1Logo} />
<Image source={screen1} style={styles.screen1Text} />
</View>
<View style={styles.slide}>
<Image source={screen2} style={styles.onBoardingImg} />
</View>
<View style={styles.slide}>
<Image source={screen3} style={styles.onBoardingImg} />
</View>
</Swiper>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => {}}
style={styles.button}
>
<Text style={styles.buttonText}>
C'est parti
</Text>
</TouchableOpacity>
</View>
</View>
)
}

Voici clairement le genre de code à éviter. Il n’est pas convenablement indenté, il n’y a pas de commentaires. En bref, il est très peu lisible.

D’ailleurs, je vous conseille d’utiliser un linter et de suivre des conventions établies pour votre langage. Cela vous permettra d’avoir un code conforme au standard :).

Qu’est-ce qu’un linter ?

C’est un outil qui vous permet d’améliorer la qualité de votre code source. En enlevant les console.log de votre code par exemple. Voici un article de blog d'un développeur français, qui explique bien l’utilité d’un linter.

Concernant les conventions, elles peuvent s’appliquer en complément de votre linter. Elles vont permettre d’enrichir les bonnes pratiques lors de votre développement.

Voici quelques exemples de conventions :

Soignez vos nommages et vos commentaires

En plus des conventions, essayez de bien soigner vos nommages tant aux niveaux de vos variables, que de vos fonctions.

Qu’est-ce que le nommage ?

Quand vous créez une fonction ou une variable, ou même une classe, vous lui donnez un nom, non ? Idéalement, vous allez essayer de lui donner un nom représentatif, qui donne un indice sur ce que fait la fonction.

Le nommage, c’est ce qui permet de bien comprendre ce que fait une fonction ou une variable, sans que vous ayez à plonger le nez dans le code. Un bon nommage vous permet de ne pas trop commenter votre code.

Si vous souhaitez aller plus loin, voici quelques articles :

Comme vous pouvez le constater, le nommage est quelque chose de très important. Cela permet de comprendre facilement ce que fait une fonction, ou alors quel est le type d’une variable utilisée.

Concernant les commentaires, essayez de trouver un équilibre. Vous ne pouvez pas commenter chacune de vos lignes, mais vous ne devez pas, non plus, ne rien commenter.

Là, encore, vous pouvez vous rapprocher de conventions telles que la JSDoc pour le JavaScript - site officiel de la JS Doc. Cette convention vous permettra d’avoir des commentaires utiles et compréhensibles par le plus grand nombre.  :)

Ne faites pas de copier/coller

Dernier point, comme je vous le disais avec les tests d’algorithmique, ne réalisez pas de copier/coller lorsque vous développez votre mini-projet.

En effet, une fois le mini-projet terminé, vous allez souvent devoir en discuter avec un ou deux des développeurs de l’entreprise. Vous devez donc être capable d’expliquer ce que vous avez fait.

Mettez en avant vos compétences et argumentez sur vos choix techniques

Pour la phase de discussion/argumentation, les choses ici sont un peu différentes. Il va surtout vous être demandé d'expliquer ce que vous avez fait et pourquoi. Autrement dit, c'est le moment de défendre votre travail !

  • Sachez expliquer au mieux pourquoi vous avez pris telle ou telle décision. Vous n'aurez pas forcément tout le temps la réponse, mais ce n’est pas bien grave. Vous n'avez pas à tout savoir sur tout. C'est ce dont je vous parlais dans une précédente partie, sachez dire "je ne sais pas". C'est souvent une bonne ouverture au dialogue.

  • Ne soyez pas sensible à la critique ! J'aurais aussi pu dire "soyez ouvert aux améliorations". Il n'y a rien de pire, d'après moi, qu'un développeur n'acceptant pas la critique ! Songez-y, quand on critique votre travail, on vous aide à devenir un meilleur développeur !

  • Soyez humble !

  • Soyez naturel. Après tout, vous êtes là pour montrer que vous aimez développer et résoudre des problèmes. :)

Entraînez-vous !

Prêt à coder ? Tant mieux !

Pour aller plus loin, j'ai préparé deux potentiels mini-projets sur lesquels travailler. Le premier, axé développeur front-end, et le second, axé développeur back-end.

Je vous invite à regarder celui qui correspond le mieux à votre profil, ou bien les deux si vous êtes curieux :).

Chacune de ces deux sous-parties comprendra une présentation et une analyse du mini-projet. Si tous les concepts abordés ne vous parlent pas, ne paniquez pas, c'est normal !

Le mini-projet frontend

Ce premier screencast portera sur le mini-projet de développeur front-end.  Je vais vous montrer un exemple de test technique qui pourrait vous être demandé dans le cadre d'un processus de recrutement.

Pour vous donner un contexte, ce test demande au candidat de refaire une partie de la page recette d’une entreprise. L’entretien se déroulera en deux parties : d’abord, la réalisation du mini-projet puis, la justification des choix techniques.

Le screencast suivant est dédié à la solution du mini projet front-end. Je commenterai dans un premier temps de la solution que j’ai réalisée et dans un deuxième temps, je vais donner des exemples de questions que l'équipe qui recrute aurait pu poser.

Le mini-projet backend

Cette fois-ci, je vais vous montrer un exemple de mini projet côté back-end.  Dans la première vidéo ci-dessous, je vais vous montrer ce qui vous a été demandé à l'étudiant.

Ce dernier screencast est dédié à la solution de ce mini projet back end. Il inclut une démonstration commentée de solution, et, comme pour le projet frontend, des questions/réponses que l'étudiant pourrait avoir en présentant sa solution.

En bref

  • Le mini-projet, c’est souvent la conclusion des tests techniques. Vous allez travailler sur un exemple concret et réel qui pourrait d’ailleurs être une feature.

  • Ce test permet au recruteur d’évaluer votre niveau et vos compétences. Il peut être réalisé chez vous ou en entreprise.

  • Il est composé de deux parties, une partie développement et une partie présentation/argumentation.

  • Soyez le plus rigoureux possible durant la phase de développement, et soignez votre code.

  • Pour la partie présentation/argumentation, défendez vos choix tout en acceptant la critique.

Exemple de certificat de réussite
Exemple de certificat de réussite