{"id":28339,"date":"2023-01-10T07:14:50","date_gmt":"2023-01-10T15:14:50","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=28339"},"modified":"2024-02-16T12:15:20","modified_gmt":"2024-02-16T20:15:20","slug":"multi-file-frameworks-for-engineers","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/fr\/resources\/docs\/interview\/quick-start-guides\/multi-file-frameworks-for-engineers\/","title":{"rendered":"Guide pour les d\u00e9veloppeurs sur les frameworks multi-fichiers"},"content":{"rendered":"<p>Il est d\u00e9sormais plus facile de mener des entretiens plus r\u00e9alistes sur la plateforme Interview - regarder les candidats faire des appels API, rendre des interfaces utilisateur, se connecter \u00e0 des bases de donn\u00e9es et cr\u00e9er une application fonctionnant parfaitement, le tout \u00e0 partir du navigateur - avec <a href=\"https:\/\/coderpad.io\/languages\/\" target=\"_blank\" rel=\"noreferrer noopener\">neuf cadres multi-fichiers populaires<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750712d5c.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750712d5c.png\" alt=\"Un multifichier pad avec l&#039;arbre des fichiers \u00e0 gauche, le contenu du fichier au milieu, et la sortie rendue et la console d&#039;enregistrement \u00e0 droite.\"\/><\/a><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table des mati\u00e8res<\/h2><nav aria-label=\"Table des mati\u00e8res\"><ul><li><a href=\"#what-you-need-to-know\">Ce que vous devez savoir<\/a><\/li><li><a href=\"#what-a-frameworks-pad-looks-like\">A quoi ressemble un cadre pad ?<\/a><\/li><li><a href=\"#how-to-get-started\">Comment commencer<\/a><\/li><li><a href=\"#additional-resources\">Ressources suppl\u00e9mentaires<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-you-need-to-know\">Ce que vous devez savoir<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Disponible en <strong><a href=\"https:\/\/coderpad.io\/languages\/react\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/vue\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vue<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/html-css-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">Exemple de question<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/svelte\/\" target=\"_blank\" rel=\"noreferrer noopener\">Svelte<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/node\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/python-3\/django\/\" target=\"_blank\" rel=\"noreferrer noopener\">Django<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/java\/spring\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spring<\/a>, <\/strong>frustrent <strong><a href=\"https:\/\/coderpad.io\/languages\/ruby\/rails\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ruby on Rails<\/a>.<\/strong><\/li>\n\n\n\n<li>Ajoutez des fichiers et des r\u00e9pertoires dans l'arborescence des fichiers sur le c\u00f4t\u00e9 gauche de la pad.<\/li>\n\n\n\n<li>S\u00e9lectionnez les fichiers pour afficher le contenu au milieu du pad.<\/li>\n\n\n\n<li>L'interface utilisateur de la webapp s'affiche sur la droite. Vous pouvez copier le lien en haut pour ouvrir cette vue dans son propre onglet de navigateur.<\/li>\n\n\n\n<li>Dans le coin inf\u00e9rieur droit, vous avez acc\u00e8s au serveur web, \u00e0 un shell interactif (o\u00f9 vous pouvez importer des paquets \u00e0 l'aide de la fonction <code>npm<\/code> ou <code>pip3<\/code>une console et, s'il s'agit d'un cadre de travail dorsal, une interface utilisateur. <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/coussinets-2\/api-client\/\" target=\"_blank\" rel=\"noreferrer noopener\">Client API<\/a>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-a-frameworks-pad-looks-like\">A quoi ressemble un cadre pad ?<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7508ba6d1.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7508ba6d1.png\" alt=\"Un pad s&#039;affiche. Le message suivant est affich\u00e9 : \"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"see-it-in-action\">Voyez-le en action :<\/h3>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"928\" style=\"aspect-ratio: 1916 \/ 928;\" width=\"1916\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/onboardingvid.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-get-started\">Comment commencer<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>\u2705 Vous pouvez essayer l'interface utilisateur du cadre multi-fichier d\u00e8s maintenant dans la section <a href=\"#sandbox\">le bac \u00e0 sable ci-dessous<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Vous avez trois options pour cr\u00e9er un pad multi-fichier :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-create-a-blank-pad-and-select-a-framework\">1. Cr\u00e9ez un pad vierge et s\u00e9lectionnez un cadre.<\/h3>\n\n\n\n<p>Dans votre tableau de bord d'entretien, acc\u00e9dez \u00e0 vos <em>Liste des tampons<\/em> et s\u00e9lectionnez <strong>Create Pad<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7509e1aab.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7509e1aab.png\" alt=\"Tableau de bord d&#039;entretien avec une fl\u00e8che pointant vers le bouton &quot;cr\u00e9er pad&quot; dans la liste pads.\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>S\u00e9lectionnez ensuite l'option <strong>Langues<\/strong> dans le menu naval de gauche et cliquez sur l'onglet <em>Frameworks front-end<\/em> ou <em>Cadres backend<\/em> localisez votre langue dans la liste ou utilisez la barre de recherche en haut de la page pour trouver la langue souhait\u00e9e.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-1024x574.png\" alt=\"Un pad est ouvert avec le menu des langues affich\u00e9.\" class=\"wp-image-37270\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-1024x574.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-300x168.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-768x431.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-18x10.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14.png 1257w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/coussinets-2\/creating-a-pad\/\">Pour plus d'informations sur la cr\u00e9ation de pads, cliquez ici.<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-create-a-pad-from-a-framework-question\">2. Cr\u00e9er un pad \u00e0 partir d'une question-cadre<\/h3>\n\n\n\n<p>Tout d'abord, cr\u00e9ez une question multi-fichier \u00e0 l'aide de l'assistant de question - <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/banque-de-questions\/creer-une-question\/#creating-multi-file-questions\">Vous trouverez des instructions d\u00e9taill\u00e9es ici<\/a>. La proc\u00e9dure est similaire \u00e0 la cr\u00e9ation d'une question ordinaire, sauf que vous ajoutez des fichiers, des contenus de fichiers et des dossiers dans le champ <em>Modifier le code de d\u00e9marrage<\/em> \u00e9cran.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-45.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-45-1024x500.png\" alt=\"\" class=\"wp-image-32340\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Une fois que vous avez termin\u00e9 votre question et que vous avez cliqu\u00e9 sur <strong>Sauvez<\/strong>vous aurez la possibilit\u00e9 de cr\u00e9er imm\u00e9diatement un pad \u00e0 partir de cette question.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-load-in-a-question\">3. Charger une question<\/h3>\n\n\n\n<p>Commencez par cr\u00e9er un pad vierge comme dans la premi\u00e8re option ci-dessus.&nbsp;<\/p>\n\n\n\n<p>Dans le menu de gauche, vous pouvez cliquer sur <strong>Questions<\/strong> pour faire appara\u00eetre votre liste de questions (1) ; de l\u00e0, vous pouvez s\u00e9lectionner une question-cadre que vous avez pr\u00e9c\u00e9demment cr\u00e9\u00e9e (2) et qui alimentera le pad. Vous pouvez \u00e9galement choisir une question dans la liste <strong>Exemples <\/strong>liste de questions (3).&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750cbe82d.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750cbe82d.png\" alt=\"Un pad est ouvert avec un 1 pointant sur l&#039;onglet &quot;questions&quot; dans la barre de navigation de gauche et un 2 pointant sur l&#039;onglet &quot;mon contenu&quot; et un 3 pointant sur l&#039;onglet &quot;exemples&quot; dans la fen\u00eatre de s\u00e9lection des questions.\"\/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/banque-de-questions\/creer-une-question\/\">Pour plus d'informations sur la cr\u00e9ation de questions, cliquez ici.<\/a><\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-resources\">Ressources suppl\u00e9mentaires<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/example-react-interview-questions\/\">Questions d'entretien sur React<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">Cr\u00e9er une exp\u00e9rience d'entretien frontale parfaite<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/languages\/\">Liste des langages et cadres de travail<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/coussinets-2\/environnement\/\">Caract\u00e9ristiques du coussin<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/banque-de-questions\/creer-une-question\/#creating-multi-file-questions\">Questions sur les fichiers multiples<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sandbox\">Sandbox<\/h3>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed\"\n\tstyle=\"padding-top: 85%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?pt=react\" width=\"640\" height=\"544\" loading=\"lazy\" aria-label=\"Essayez le bac \u00e0 sable CoderPad\"><\/iframe>\n<\/div>\n\n\n\n<p><\/p>","protected":false},"parent":22419,"menu_order":5,"template":"","class_list":["post-28339","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/28339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":64,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/28339\/revisions"}],"predecessor-version":[{"id":38640,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/28339\/revisions\/38640"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/22419"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/media?parent=28339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}