Menu documentation

Utilisation des fonctions pad

Dernière mise à jour le - Available in English

Pour commencer

Pads prend en charge un grand nombre de langages de programmation et de frameworks. Chaque langage possède un IDE, un volet d'exécution du code et un REPL (lorsqu'il est disponible). 

✅ Vous pouvez avoir plusieurs environnements linguistiques par pad. Vous pouvez également ajouter un nouvel environnement linguistique à tout moment de l'entretien. 

Pour ajouter un nouvel environnement linguistique au pad, cliquez sur le bouton Langues à gauche de l'écran. Vous verrez une liste de langues et de cadres parmi lesquels vous pourrez choisir.

L'environnement de sélection de la langue s'affiche

Une fois que vous avez sélectionné le langage ou le cadre souhaité, un nouvel onglet s'ouvre avec l'exemple de code ou d'application pour ce langage particulier :

L'exemple de code "hello world" se trouve dans la fenêtre d'entrée de gauche et la sortie du programme se trouve dans la fenêtre pad de droite.

Vous ou votre candidat pouvez maintenant commencer à coder !

Lorsque quelqu'un modifie le code, vous pouvez voir son curseur ainsi qu'une étiquette portant son nom.

Fiches multiples pads

CoderPad propose trois types d'environnements linguistiques - un seul fichier comme le OCaml pad que vous voyez ci-dessus, et deux types de fichiers multiples pads :

  • Projets multi-fichiersqui sont des langages backend non cadres et comprennent C#, Java, Ruby, Go, Python et TypeScript.
  • Frameworks multi-fichiersqui comprennent des frameworks frontend et backend comme React, Angular, Node et Spring.

Comme pour les questions à fichier unique, nous vous recommandons de suivre les conseils suivants pour tirer le meilleur parti de votre pads à fichiers multiples :

  • Si vous utilisez un pad vierge ou un bac à sable, vous pouvez utiliser l'option Enregistrer le code comme brouillon (cliquez avec le bouton droit de la souris sur l'icône de la langue pour afficher cette option) pour transformer le pad en un projet de question.
  • Vous pouvez utiliser des environnements multi-fichiers pour les entretiens à domicile et en direct pads.
  • Sachez que si vous configurez un code de démarrage dans un environnement linguistique, il ne sera pas automatiquement copié dans un nouvel environnement linguistique si un candidat passe à une autre langue.

Mise en place du tampon

Pour configurer rapidement votre pad multi-fichiers ou votre framework, vous pouvez glisser-déposer des fichiers, des dossiers ou des projets complets dans l'arborescence des fichiers. Vous pouvez également ajouter un nouveau dossier ou fichier à l'arborescence en cliquant sur l'icône du dossier ou du fichier, respectivement.

Si vous souhaitez sauvegarder votre pad pour l'utiliser ultérieurement, vous pouvez cliquer sur Save code as a draft question dans les options du pad pour transformer le pad en une question réutilisable à laquelle vous pouvez accéder dans la Questions bank.

Un élément de menu d'onglet est ouvert avec l'élément "créer une question à partir d'un onglet" en surbrillance.

Arbre de fichiers et éditeur de code

Tous les pads multi-fichiers offrent une arborescence de fichiers et un éditeur de code basé sur Monaco. Lorsque vous cliquez sur un fichier dans l'arborescence (1), le fichier s'affiche dans l'éditeur de code (2) pour que vous puissiez le modifier si nécessaire.

La partie gauche d'un pad est représentée par un #1 à côté du nom du fichier readme.md dans l'arborescence, et un #2 dans l'éditeur de code montrant le contenu du fichier.

La coquille

Vous pouvez utiliser le shell pour installer des paquets à partir du terminal en utilisant des gestionnaires de paquets externes comme npm ou pip3. Toutes les bibliothèques que vous avez installées dans le cadre d'une question (en utilisant l'assistant de question ou la fonction Save code as draft question) seront sauvegardées dans la question pour être utilisées par votre candidat.

Langue multi-fichiersCadre multi-fichiers
Cette image a un attribut alt vide ; son nom de fichier est image-62.png

⚠️ La lecture n'est actuellement pas disponible pour le shell. Si vous utilisez un environnement linguistique multi-fichiers, nous recommandons au candidat d'utiliser le plus possible le bouton Exécuter pour imprimer le code dans la fenêtre Sortie de programme, qui est enregistrée avec la lecture.

Projets multi-fichiers

Outre l'arborescence des fichiers, le langage multi-fichier pads présente les caractéristiques suivantes :

  1. Un éditeur de code basé à Monaco
  2. A Exécution principale/Exécuter les tests qui vous permet de basculer entre l'exécution du code et l'exécution des cas de test associés au code.
  3. A Sortie du programme où vous pouvez voir les résultats de la Exécution principale et Exécuter les tests, a Notes de l'enquêteur privé et un onglet AI Assist tabulation.
  4. Un shell interactif.

Vous pouvez ajouter différentes commandes d'exécution ou exécuter plus d'un fichier à la fois en mettant à jour le fichier .cpad.

Si vous avez ajouté une base de données à votre question, nous vous recommandons de configurer le code ORM dans le cadre de la question plutôt que de demander au candidat de le faire - cela permet de gagner du temps et permet au candidat de se concentrer sur la logique commerciale la plus importante. Vous pouvez utiliser l'onglet AI Assist pour demander à ChatGPT de générer le code ORM pour vous.

Frameworks multi-fichiers

Lorsque vous sélectionnez un cadre multi-fichier pour coder, vous remarquerez une fenêtre multi-volets similaire à celle que vous trouverez dans les IDE les plus courants.

  1. Le premier volet affiche le contenu du fichier actif sélectionné dans l'arborescence des fichiers.
  2. Le deuxième volet affiche la sortie de votre application.
  3. Le troisième volet propose un shell interactif, une sortie de journal du serveur et une console.
  4. Une URL est fournie si vous souhaitez ouvrir l'application rendue dans une fenêtre séparée.

Avec les frameworks multi-fichiers, vous aurez non seulement accès à l'éditeur de code standard, mais vous verrez également des fonctionnalités supplémentaires qui rendent l'entretien avec les ingénieurs front-end et back-end plus réaliste.

Vous pouvez trouver plus d'informations sur chaque cadre et ses paramètres en consultant le fichier README.md situé dans le répertoire des fichiers.

Fenêtre de sortie

Outre l'affichage du code rendu dans la fenêtre de sortie (4), vous pouvez également accéder à vos notes d'entretien privées ou à API Requests client (1). Vous pouvez également copier l'URL (2) de la barre d'URL pour la coller dans un nouvel onglet/fenêtre, ou utiliser le bouton pop-out (3) pour faire de même.

L'écran de sortie avec un 1 à côté de l'onglet client api, un 2 à côté de l'url, un 3 à côté de l'icône popout, et un 4 dans l'interface utilisateur de sortie rendue.

✅ Le client API est uniquement disponible avec les frameworks backend.

Journaux du serveur, journaux de la console, shell et historique des demandes d'API

La partie inférieure du côté droit de la pad se compose des éléments suivants :

1. Journaux du serveur. Vous pouvez redémarrer le serveur en cliquant sur le bouton Restart en haut à droite de la fenêtre.

Les journaux du serveur.

2. Un shell de commande.

3. Journaux de la console. Vous pouvez sélectionner le type dans le menu déroulant en haut à droite de la fenêtre.

La fenêtre de la console est affichée avec le type de journal -- all, log, error, warn, info et debug -- dans un menu déroulant en haut à droite de la fenêtre.

4. Historique des demandes pour le client API.

Fenêtre d'historique des requêtes API avec 5 requêtes GET et leurs chemins d'accès affichés.

Pour trouver plus d'informations sur l'utilisation des frameworks multi-fichiers, consultez le Guide de l'ingénieur sur les frameworks multi-fichiers.

Suivre les utilisateurs

Vous verrez un point à côté de tout fichier en cours d'édition ; vous pouvez changer les personnes que vous suivez dans le pad en cliquant sur leur nom en bas à gauche de l'écran.

Changer de langue

Nous proposons deux façons de passer d'une langue à l'autre :

  1. Changer de langue à l'intérieur d'une question - utiliser cette option pour répondre à une question dans une autre langue.
  2. Passer à un nouvel onglet linguistique - utilisez cette option pour commencer à coder dans un nouvel onglet vierge.

Dans les deux cas, vous pouvez passer d'une langue à l'autre à tout moment de l'entretien. Sélectionnez la langue ou l'onglet précédent pour afficher le code que vous y avez écrit.

1. Changer de langue au sein d'une question

Si vous avez chargé une question dans le pad et que votre candidat souhaite coder dans une autre langue, il peut utiliser le menu déroulant.

Passez la souris sur l'onglet de la question et le menu d'options s'affichera, y compris la liste déroulante Langues. Vous pouvez utiliser la barre de recherche pour taper une langue ou la sélectionner dans la liste ci-dessous.

Une icône de souris survole un onglet de question et le menu déroulant s'affiche, y compris l'élément de menu langue avec une liste de langues en dessous.

Les instructions relatives aux questions seront toujours disponibles sur le côté droit du pad.

Lorsque vous changez de langue dans une question, le code de la langue précédente sera automatiquement affiché dans l'éditeur de la nouvelle langue sous forme de commentaire. Cela vous permet, ainsi qu'à votre candidat, de ne pas perdre votre travail lorsque vous passez d'une langue à l'autre.

2. Changer de langue pour ouvrir un nouvel environnement pad

Cette option permet d'ouvrir un nouvel onglet de langue sans l'associer à une question. Il suffit de cliquer sur l'option Langues dans le menu de gauche et de sélectionner la nouvelle langue que vous souhaitez utiliser.

❗Lorsque vous passez d'un onglet d'environnement à un autre, tous les autres participants du pad passent également au même environnement en même temps que vous. Prévenez les autres participants du pad lorsque vous êtes sur le point de changer d'environnement. 

✅ Tout code que vous écrivez dans un environnement linguistique sera enregistré dans cet onglet, de sorte que vous n'aurez jamais à vous soucier de perdre votre code.

Enregistrement automatique ou manuel des fichiers

Dans les cadres de langue multi-fichiers (front-end et back-end), vous verrez une bascule pour désactiver la fonctionnalité actuelle de rechargement à chaud/enregistrement automatique. Ce paramètre est au niveau de pad, donc changer le paramètre le changera aussi pour tous les autres participants pad.

Le paramètre par défaut correspond au comportement actuel de sauvegarde automatique. Si vous basculez en "sauvegarde manuelle", vous devrez cliquer sur le bouton Save (ou le raccourci clavier + S/ CTRL + S) pour enregistrer les modifications du fichier et les voir apparaître dans le volet de droite.

L'enregistrement automatique des fichiers est désactivé et le bouton "Exécuter" a été transformé en bouton "Enregistrer".

Ajouter une question

Pour ajouter une question au pad, cliquez sur le bouton Questions à gauche de l'écran. Cliquez ensuite sur l'onglet Sélectionner une question. Vous verrez des onglets pour les questions de votre Organisation, Mon contenu, et Exemples de questions, reflétant la banque de questions. Vous pouvez rechercher ou filtrer les questions par langue.

Une fois que vous avez ajouté une question, vous pouvez changer la langue de cet onglet en cliquant sur l'onglet et en choisissant "Langue". Cela peut s'avérer pratique si un candidat souhaite utiliser une langue dans laquelle la question n'a pas été rédigée à l'origine. Le fait de changer de langue sur l'onglet garantit que toutes les ressources attachées, telles que les bases de données ou les fichiers, restent accessibles à partir de l'onglet de la question.

Le menu de changement de langue est présenté en affichant une liste de langues.

Pour plus de détails et de conseils sur le passage d'une langue à l'autre dans une question, consultez la section Switching Languages ci-dessus.

Informations linguistiques

✅ Seules les langues sélectionnées disposeront d'un onglet Info. Pour les frameworks multi-fichiers comme Node et React, vous pouvez consulter les informations relatives au framework dans le fichier README.MD inclus dans l'arborescence des fichiers du projet.

Vous pouvez obtenir plus d'informations sur l'environnement linguistique en survolant le nom de la langue dans le menu Environnements et en sélectionnant Info.

Le menu des options linguistiques est affiché avec la sélection de la langue, les informations sur la langue, l'onglet de suppression, l'onglet de réinitialisation et les adaptateurs de base de données.
La page d'information sur kotlin est affichée dans le pad.

Adaptateurs de bases de données

Les environnements d'Interview fournissent des adaptateurs de base de données et des ORM spécifiques à un langage commun, à utiliser dans les évaluations. 

⚠️Notez que la plupart des langages ne prennent pas en charge les adaptateurs de base de données.

Pour sélectionner un package pour votre langue, survolez d'abord la langue à laquelle vous souhaitez ajouter un adaptateur. Cliquez ensuite sur le menu déroulant Adaptateurs de base de données pour voir les adaptateurs pour cette langue particulière.

La liste déroulante des options d'environnement avec un 1 à côté des ellipses verticales, un 2 à côté des adaptateurs de base de données, et un 3 à côté des options d'adaptateur.

❗ Cela effacera/remplacera tout code que vous avez précédemment écrit dans cet onglet.

Mode dessin

Le mode dessin est désormais accessible à partir de la navigation par onglets :

Un pad affichant la fenêtre du mode dessin.