Cette série d'articles est indexée sur NgateSystems.com. Vous y trouverez également une fonction de recherche par mot-clé très utile.
Dernière révision : 24 novembre
Cet article est conçu pour vous donner un premier aperçu des réalités de la vie en tant que développeur d'applications Web. Il se termine par une simple application Web fonctionnelle, mais doit commencer par les tâches délicates "d'installation" que vous devez négocier pour arriver au point où vous pouvez l'exécuter.
Bien que ce soit une nuisance, respectez-le. Une fois que vous les aurez réglés, vous aurez la possibilité d'utiliser l'éditeur VSCode de Microsoft pour créer un petit morceau de HTML. Enfin, vous utiliserez une session de terminal VSCode pour lancer ceci dans le navigateur via le serveur local Sveltekit.
Est-ce que ça sonne bien ? Alors lisez la suite.
Les grands débutants peuvent trouver cette section délicate car elle implique l'utilisation de certaines procédures qui ne sont pas particulièrement conviviales. Mais cela ne prend pas longtemps et vous acquerrez certaines compétences de base que vous utiliserez de manière répétée à l'avenir. Voici ce que vous allez faire :
Votre première étape consiste à utiliser l'outil Explorateur de fichiers Windows pour créer un nouveau projet. Vous devrez choisir un nom pour cela. Je vous suggère d'utiliser des lettres minuscules et des traits d'union et de garder le nom court. Quelque chose comme svelte-dev pourrait être une bonne idée. Vous devez également éviter de localiser votre dossier dans le stockage versionné Dropbox ou OneDrive. Les projets d'applications Web ont tendance à devenir assez volumineux et sont susceptibles de submerger les systèmes de gestion de versions à usage général. Dans tous les cas, VSCode et Git fourniront tout le versioning dont vous avez besoin.
Suivez les instructions de la section Mise en route avec Visual Studio Code pour installer le logiciel sur votre appareil. Lancez-le à l'aide de son icône de bureau et notez l'entrée "Fichier" dans la barre de menu en haut de l'écran de VSCode. Cliquez dessus, sélectionnez « Ajouter un dossier à l'espace de travail », accédez à l'emplacement du dossier de votre projet et sélectionnez/ajoutez-le.
À ce stade, l'écran VSCode affichera trois colonnes d'informations sous sa barre de menu : une barre d'outils, un panneau "Explorateur" affichant les détails du contenu de "l'espace de travail" et une grande zone vide vous attendant pour modifier les fichiers de l'espace de travail.
Vous vous demandez peut-être pourquoi VSCode vous surcharge d'un concept "d'espace de travail" alors que vous n'avez qu'un seul projet. En effet, au fil du temps, vous accumulerez de nombreux projets et constaterez que vous souhaitez partager du code entre eux. Le « espace de travail » permet d'opérer sur un groupe de projets. Vous pouvez supprimer un projet de l'espace de travail en cliquant dessus avec le bouton droit et en sélectionnant « Supprimer le dossier de l'espace de travail ». Si vous fermez et redémarrez VSCode, vous constaterez qu'il a mémorisé le paramètre de contenu de votre espace de travail précédent et le rétablira.
Comme vous utiliserez beaucoup VSCode, vous pourriez envisager de "épingler" VSCode sur la barre d'outils de votre bureau. Notez qu'une fois que vous avez ajouté un projet à un espace de travail, VSCode le conservera entre les redémarrages jusqu'à ce que vous supprimiez explicitement le dossier avec une commande R-Click "Supprimer le dossier de l'espace de travail".
Vous pouvez ouvrir une nouvelle session de terminal sur votre projet en sélectionnant "Terminal -> Nouveau terminal" dans le menu VSCode puis en cliquant sur l'entrée de votre projet dans la liste qui apparaît. Si l'option "Terminal" n'est pas visible dans la barre de menu, vous la trouverez dans la zone de débordement "...".
Le "terminal" doit apparaître sous forme de sous-fenêtre en bas de la zone d'édition sur le côté droit de l'écran VSCode. Sa hauteur et sa largeur peuvent être redimensionnées en cliquant et en faisant glisser les bordures supérieure et gauche. Vous constaterez que vous pouvez également l'activer ou le désactiver en utilisant à nouveau l'astuce du raccourci ctrl. Actuellement, il attend désormais que vous saisissiez les commandes "terminal session" sur une ligne précédée de l'adresse complète de votre dossier projet.
Si votre expérience informatique à ce jour repose entièrement sur l'utilisation du « cliquer et pointer » sur les écrans Windows (Microsoft) et iOS (Mac), la forte dépendance dans cet article à l'utilisation de sessions « terminal » peut provenir comme un choc malvenu.
Le mot « terminal » ici vous ramène aux débuts de l'informatique, bien avant l'apparition des « interfaces utilisateur graphiques » que nous utilisons aujourd'hui. Les développeurs ont ensuite utilisé des appareils « terminaux » tels que des télétypes ou des unités d'affichage visuel « VDU » pour émettre des instructions du système d'exploitation en tapant des « commandes » plutôt qu'en cliquant sur des boutons. Ces interfaces « command shell » présentent toujours de grands avantages pour les programmeurs système, car elles sont faciles à configurer et très flexibles. Les sessions terminales continuent donc d’être largement utilisées dans le processus de développement. Naturellement, si vous avez été initié aux interfaces « pointer et cliquer », vous les considérerez comme un pas en arrière. Mais vous constaterez rapidement qu’ils fonctionnent bien et ajouteront, dans tous les cas, un autre élément de base utile à votre gamme croissante de compétences en développement.
On pourrait écrire un livre sur les commandes du terminal mais, pour l'instant, il suffit de connaître quelques faits de base. Tout d'abord, vous constaterez que vous ne pouvez pas utiliser la souris pour modifier une commande de terminal. Si vous repérez une erreur au milieu d'une commande, vous devez utiliser la touche "Retour arrière" pour supprimer le contenu suivant et le retaper. Mais cet inconvénient est compensé par le fait que la session de terminal Powershell par défaut utilisée dans VSCode conserve un historique des commandes que vous utilisez et vous permet de référencer une commande précédente en appuyant plusieurs fois sur la touche flèche vers le haut jusqu'à ce que celle souhaitée apparaisse. La touche flèche vers le bas inverse le processus.
Vous vous sentez peut-être déjà un peu fatigué, mais persévérez. Vous êtes presque au point où vous pouvez commencer à utiliser SvelteKit.
Le "problème" est que SvelteKit est distribué sur Internet sous forme de "package". L'installation du package SvelteKit nécessite un "gestionnaire de packages". Qu'est-ce qu'un package et qu'est-ce qu'un gestionnaire de packages ?
Un « package » est une collection soigneusement regroupée de fichiers de code soigneusement estampillés avec des numéros de version et accompagnés de détails sur ses dépendances sur d'autres packages. Les pratiques modernes de développement de logiciels utilisent des hiérarchies de packages pour partager des composants de code utiles.
Un "gestionnaire de packages" est un outil qui vous permet "d'installer" un package dans un projet en décompressant son contenu de code et en le copiant dans les dossiers du projet. Le gestionnaire de packages vérifie la compatibilité avec tous les autres packages éventuellement installés.
Le gestionnaire de packages que vous utiliserez ici s'appelle npm (Node Package Manager). La gestion des packages est exigeante, des gestionnaires alternatifs sont donc disponibles pour répondre à des situations pointues. Mais le gestionnaire de packages npm est le choix standard et est recommandé ici. Vous utiliserez npm à plusieurs reprises au cours du développement d'un projet, car vous constaterez le besoin d'inclure des composants supplémentaires.
En avançant un peu, une fois le gestionnaire de packages npm et son environnement d'exécution installés, vous pouvez l'utiliser pour installer un package "my-package" dans votre projet. Pour ce faire, lancez une commande telle que npm create my-package dans une session de terminal VSCode. Cela télécharge les fichiers de la bibliothèque « my-package » dans le dossier node-modules de votre projet.
Mais il y a un problème : npm nécessite un "environnement d'exécution Node.js". Donc, cela doit également être installé.
La bonne nouvelle est que, pour les utilisateurs Windows au moins, Node.js s'installe en téléchargeant et en ouvrant un fichier msi (Microsoft Installation) standard. Mieux encore, la procédure d'installation ainsi lancée vous permet également d'installer npm.
Cependant, exécuter la procédure est tout un défi pour un débutant. L'arrangement de téléchargement de base est documenté sur https://nodejs.org/en à l'adresse Run JavaScript Everywhere, mais il est très léger sur les instructions d'utilisation. Vous trouverez peut-être utile de consulter les instructions plus détaillées sur Comment installer Node.js et NPM sous Windows. Prenez votre temps avec ça. Si les choses tournent mal, il vous suffit de désinstaller Node.js et de recommencer. Le meilleur conseil que je puisse vous donner est d'utiliser les paramètres par défaut standard proposés par la procédure - les remplacements sont strictement réservés aux experts.
Enfin, vous êtes en mesure de faire des progrès ! Lorsque vous aurez terminé cette étape, vous serez récompensé par une simple page de démonstration SvelteKit exécutée dans votre navigateur.
npx sv create
*En passant, npx est un outil "package runner" intégré à npm - il est installé automatiquement avec npm
À partir de novembre 2024, cela lance une boîte de dialogue SvelteKit pour vous guider à travers une procédure de configuration de votre projet avec Svelte 5.
En passant, sachez que si les choses tournent mal avec cette procédure et que vous souhaitez recommencer, il vous suffit de supprimer tout le contenu de votre dossier de projet et de réessayer. Notez également que les installations npm affichent souvent des listes inquiétantes de messages d'avertissement lorsqu'elles vérifient d'éventuelles incompatibilités dans les fichiers qu'elles intègrent dans votre projet. Il est très peu probable que ceux-ci soient pertinents pour vous en tant que débutant, je vous suggère donc simplement de les ignorer.
La première question de Svelte est "Où devrions-nous créer votre projet ?". Puisque votre session de terminal est déjà ouverte dans votre dossier de projet, vous pouvez simplement appuyer sur la touche retour ici.
Maintenant, Svelte veut savoir quel style de projet elle devrait créer. J'aimerais que vous sélectionniez "minimal" ici. La procédure pour effectuer cela dans une session de terminal est légèrement délicate car vous ne pouvez pas utiliser la souris pour activer ou désactiver une case à cocher comme vous le feriez sur une page Web. Vous indiquez ici votre préférence en utilisant la touche flèche vers le bas pour vous positionner sur la ligne "minimale" puis en appuyant sur la touche retour
Maintenant, Svelte veut savoir si vous souhaitez utiliser les fonctionnalités de vérification de TypeScript. Cette extension Javascript avancée vous sera essentielle lorsque vous travaillez sur une application Web complexe de niveau production (elle contrôle votre utilisation des types de variables en Javascript et garantit la cohérence). Mais vous n'en avez pas besoin ici et votre courbe d'apprentissage devient déjà exponentielle, je vous suggère donc de sélectionner « Non » en appuyant deux fois sur la flèche vers le bas, puis en appuyant sur la touche retour.
Ensuite, Svelte se demande si vous souhaitez inclure des « options supplémentaires ». L'outil de vérification de la syntaxe ESLint affiché en haut de la liste présentée peut être utile. Cela peut parfois être une nuisance « bruyante », vous avertissant de problèmes qui ne vous intéressent pas particulièrement. Mais, dans l'ensemble, je vous suggère de l'accepter ici en appuyant sur la barre d'espace et la touche retour.
Enfin, Svelte vous demande quel gestionnaire de paquets vous souhaitez utiliser. Sélectionnez npm
Vous pouvez probablement ignorer en toute sécurité toute autre option qui pourrait être présentée.
Svelte est désormais prêt à construire votre projet. Vous lui donnez le feu vert, lorsque cela vous est demandé, en saisissant la commande suivante dans votre session de terminal :
npx sv create
L'affichage curieux que vous voyez maintenant sur votre écran peut être votre première vue de npm téléchargeant des fichiers de package dans un projet. Vous trouverez peut-être instructif de noter que le dossier svelte-dev dans la fenêtre de votre espace de travail s'est soudainement épanoui avec un affichage impressionnant du contenu des sous-dossiers. C'est le code qui représente votre projet SvelteKit "minimal".
Il n'est pas toujours vrai qu'un package logiciel se retrouve dans votre projet. Lorsque vous installez un outil qui pourrait être utile partagé avec d'autres projets, vous pouvez demander qu'il soit installé "globalement". Pour ce faire, ajoutez un "champ d'indicateur" "-g" à votre commande npm. Vous verrez des champs de drapeau largement utilisés dans les commandes du terminal. Pour l’instant, laissez votre logiciel d’installation vous donner des conseils sur leur utilisation. Demandez à chatGPT de vous donner un tutoriel à ce sujet de temps en temps.
Le programme d'installation de Svelte vous demande maintenant d'exécuter npm run dev -- --open. Essayez-le :
npm install
Cela lance le serveur local SvelteKit et y exécute votre projet. Le serveur local a pour tâche de créer des pages "localhost" sur le port 5173 de votre navigateur. Si cette phrase n'a aucun sens pour vous, vous allez maintenant voir ce qu'elle signifie de toute façon car le bit "-- --open" de la commande npm donne automatiquement le contrôle à votre navigateur et vous fait une démonstration. Votre écran devrait ressembler à l'image ci-dessous :
Il s'agit d'une application Web codée avec exactement le même type de code HTML que celui que vous avez vu dans la publication 1.1. La différence est que son contenu est surveillé par le framework SVelteKit. Le code se trouve actuellement dans votre nouveau projet VSCode svelte-dev. Trouvons le bit qui affiche la bannière "Bienvenue sur SvelteKit" sur l'écran de votre navigateur, modifions-le et voyons ce qui se passe.
De retour dans VSCode, avec votre projet visible dans son « espace de travail », utilisez sa hiérarchie de dossiers/fichiers pour parcourir son contenu exactement comme vous le feriez dans l'Explorateur Windows. Vous constaterez que le projet a acquis une collection de code assez impressionnante ! Par exemple, il existe désormais un dossier node_modules rempli de petits fichiers. C'est là que sont allés tous ces fichiers téléchargés lors de votre travail d'installation npm. Localisez maintenant le fichier page.svelte que vous trouverez dans le dossier src/routes et cliquez dessus. (La signification de son nom et de son emplacement dans le dossier src sera clarifiée dans les prochains articles - disons simplement pour l'instant que le nom " page.svelte" est plutôt important). Vous verrez maintenant le contenu de src/routes/page.svelte affiché dans la fenêtre d'édition VSCode sur le côté droit de l'écran. Le
Étant donné que le serveur SvelteKit que vous avez démarré avec npm run dev surveille votre dossier de projet, chaque fois que vous modifiez un fichier, le serveur transmet automatiquement les modifications à l'application active dans le navigateur.
Cela va rendre le développement tellement amusant !
Si vous avez survécu à ce post, donnez-vous une étoile d'or. Vous avez réussi à faire fonctionner une application Web SvelteKit en mode développement et, tout aussi important, vous avez créé "l'échafaudage" VSCode, npm et Node.js qui permettra à chaque futur projet SvelteKit de démarrer sur les chapeaux de roue.
Le prochain article de cette série vous montrera comment utiliser Javascript et le « langage » Svelte pour ajouter de l'intelligence à votre application Web.
Il n'est pas difficile de se mettre dans le pétrin avec ce genre de choses : les développeurs les plus expérimentés tapent parfois mal le nom d'une balise HTML et inondent leur écran de messages d'erreur effrayants. La différence, c'est qu'ils ont déjà tout vu et savent qu'il ne faut pas paniquer ! En tant que débutant, lorsque vous voyez ce genre de chose, vous penserez probablement que vous avez complètement détruit votre ordinateur et que vous devez maintenant en acheter un nouveau. Calme-toi. Vous pouvez trier ça.
Les erreurs seront signalées de différentes manières. Les erreurs de syntaxe dans un fichier .js (javascript) ouvert dans VSCode seront signalées dans la fenêtre d'édition. Dans l'exemple ci-dessous, j'ai délibérément paralysé le code HTML du message d'en-tête dans un projet "minimal" en supprimant le > de la valeur initiale
Notez que :
C'est un exemple parfait de la raison pour laquelle vous devez rester cool. Derrière tout ce chaos se cache une erreur parfaitement triviale
En premier lieu, vous verrez que tout cela ne tient pas la route. Le système ne met pas correctement en évidence le signe tag comme source de l’erreur. Le vrai problème réside dans l'ouverture cassée
Ma pratique générale est que, lorsque les choses tournent mal avec mon code, je commence par résoudre les problèmes signalés par l'éditeur. Mais il y aura des moments où VSCode sera parfaitement satisfait mais où votre navigateur affichera une erreur. C'est à ce moment-là que vous devez regarder les messages d'erreur affichés dans votre session de terminal. Ces erreurs seront plus graves et mon conseil est de prendre une profonde respiration, de lire attentivement les messages et d'essayer de réfléchir à ce qu'il essaie de vous dire. Si vous êtes toujours bloqué, collez le message d'erreur dans chatGPT et demandez conseil. Les recherches Google citant Stackoverflow sont également une bonne ressource. Si vous êtes
toujourscoincé, faites une pause, allez vous promener et prenez l'air. Cela peut faire une énorme différence. Ce qu’il y a de bien avec l’informatique, c’est que quand les choses tournent mal, il y a toujours une raison. Mieux encore, lorsque vous trouvez cette raison et la corrigez, elle reste corrigée. Considérez-vous chanceux : vous pourriez essayer de résoudre un problème impliquant des personnes, alors que c'est exactement l'inverse qui s'applique ! Courage, mon brave. Vous trouverez ce problème de codage et le corrigerez, c'est sûr. Post-scriptum 2 : Travailler avec VSCode
De même, n'oubliez pas que lorsque le panneau d'édition est superposé par une session de terminal, vous pouvez rapidement le désactiver avec le raccourci "ctrl '".
Enfin, il vous sera utile de savoir que plusieurs fenêtres de terminal peuvent être actives simultanément. Dans ce cas, la barre de menu de la fenêtre du terminal affiche une liste des terminaux actifs et vous permet de basculer entre eux en cliquant sur les entrées de la liste. Une icône "poubelle" ici vous permet également de supprimer une fenêtre, bien que cela ne soit visible que si vous avez rendu la fenêtre du terminal suffisamment grande - l'espace est toujours limité dans VSCode.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
