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
Bonjour et bienvenue ! J'espère que vous trouverez ce que vous cherchez ici.
Cet article est destiné aux débutants complets. Il couvre tout ce que j'aurais aimé savoir moi-même lorsque j'ai commencé à bricoler des sites Web et des bases de données. Peut-être êtes-vous encore aux études, ou plus âgé et envisagez-vous un changement de carrière, ou peut-être retraité (bien qu'encore jeune d'esprit) et simplement curieux. L’important est que vous ayez un esprit jeune, ouvert aux nouvelles idées et prompt à apprécier les opportunités. Vous en aurez besoin car le nombre de nouvelles idées que vous devrez absorber est presque écrasant. La pratique des systèmes d’information modernes est une jungle parfaite d’outils et de techniques. Pire encore, cette jungle évolue à une vitesse vertigineuse. Par où diable devriez-vous commencer ?
Cette série vise à minimiser vos difficultés en proposant un itinéraire particulier à travers cette jungle - un itinéraire qui donne des résultats rapides et utiles mais qui développe également des compétences et des concepts pour vous permettre de suivre votre propre chemin par la suite.
Étonnamment (et je n'ai jamais cessé d'être étonné par cela), la plupart des outils et technologies que je décris ici sont gratuits. La seule chose que vous devrez investir est votre temps personnel. Malheureusement, ce ne sera pas un facteur insignifiant mais, comme on dit, « pas de douleur, pas de gain !
Cependant, comme encouragement supplémentaire, permettez-moi également de dire que vous disposez désormais d'un formidable allié gratuit : le chatBot à usage général. Cette série comprend des articles absurdement longs et remplis d'instructions fastidieuses. Néanmoins, ils seraient encore plus longs si j'avais tenté de décrire les étapes avec le détail que vous méritez. Je peux désormais être sûr que partout où vous aurez l'impression de vous avoir laissé derrière vous, vous pourrez faire appel au robot pour vous remettre sur la bonne voie. Avant la sortie de chatGPT et d’autres robots en 2022, je n’aurais pas imaginé que cela soit possible. Maintenant, tout a changé. Voir le message 4.1 pour une présentation de votre tuteur numérique. Actuellement, je vous recommande d'utiliser chatGPT40 sur son niveau gratuit.
Cela dit, voici un énoncé de l'objectif global de cette série et un aperçu du parcours qu'elle propose de suivre.
L'hypothèse est que votre objectif est de développer un logiciel qui lira certaines informations dans un ordinateur, les traitera de manière ciblée, puis affichera les résultats sur un écran. Oh, et en plus, vous aimeriez que n'importe qui, n'importe où dans le monde, puisse utiliser votre travail. Cela devrait sûrement être assez facile...
Dans le monde de l'informatique, il existe une myriade de façons d'accomplir cette tâche simple. Mais d'après mon expérience, l'option la plus simple consiste à utiliser un navigateur Internet tel que Chrome ou Safari comme « rampe de lancement » pour votre application. Cela peut paraître étrange, me direz-vous. Tout le monde n'utilise-t-il pas des « applications » autonomes sur son téléphone mobile ?
Voici une raison : vous souhaitez que votre application soit disponible pour les utilisateurs travaillant sur tous les appareils imaginables : ordinateur portable, tablette, ordinateur de bureau, etc. Les navigateurs constituent un excellent moyen d'y parvenir en isolant votre application des différences. dans le matériel et les systèmes d'exploitation. Ils vous offrent également un environnement sophistiqué et pratique pour prendre en charge la logique de votre application. Les applications, en revanche, sont liées à des plates-formes matérielles particulières et sont embourbées par la complexité.
Voici une autre raison : vous souhaitez que les informations de votre application soient disponibles pour les utilisateurs partout dans le monde. Des navigateurs sont déjà positionnés sur Internet, dont le seul objectif est de faciliter le partage d'informations. C'est pourquoi de grandes entreprises telles qu'Amazon et Facebook sont très heureuses d'utiliser les navigateurs Web comme plates-formes pour leurs systèmes.
Ainsi, l'itinéraire que je suggère mène à ce qui est maintenant généralement connu sous le nom de « webapp », un logiciel activé en entrant simplement « l'adresse » de la webapp dans un navigateur Web. Cette application Web sera capable de maintenir des magasins de données persistants (« bases de données ») et assurera la sécurité de ces données via une fonctionnalité de « connexion ». Les chatbots basés sur un navigateur constituent un excellent exemple d'utilisation de la technologie des applications Web.
Voici un aperçu des outils et technologies que vous devrez maîtriser pour créer une application Web moderne :
OK, attachez votre ceinture, c'est parti... Puisque vous lisez cet article en ligne, je suppose que vous êtes déjà raisonnablement habitué au monde en ligne. Pour ce cours, vous aurez besoin d'accéder à un ordinateur de bureau et, par souci de simplicité, j'ai supposé qu'il s'agirait d'un ordinateur portable Microsoft Windows. Je suis sûr que, lorsque ce n'est pas le cas, vous pourrez adapter mes instructions le cas échéant.
Vous développez un logiciel pour afficher du texte dans un navigateur Web. Vous souhaitez que ce texte soit affiché dans diverses configurations élégantes de position, de couleur, de taille, etc. Les navigateurs Web vous permettent de spécifier ces configurations en entourant le contenu du texte de codes de « balisage » qui déterminent la manière dont le contenu doit être affiché. Cet arrangement simple donne des résultats étonnamment puissants.
Vous pouvez créer un échantillon en tapant les instructions dans un fichier texte dans un éditeur simple comme le Bloc-notes de Microsoft. Essayez cet exercice simple :
Tapez la ligne suivante dans votre éditeur de texte préféré (par exemple l'utilitaire Bloc-notes de Windows), puis enregistrez-la sous forme de fichier avec une extension HTML (par exemple "my-first-app.html") :
<h1>Hello there</h1>
Lorsque vous « ouvrez » le fichier en « double-cliquant » sur son entrée dans l'Explorateur Windows, Windows devrait répondre en ouvrant votre navigateur par défaut et en affichant un écran affichant les mots « Bonjour ». Félicitations, vous avez écrit votre première application Web (même si personne d'autre que vous ne peut la voir, mais nous y remédierons plus tard).
Si les choses ne fonctionnent pas comme prévu ici, ce serait le bon moment pour demander à ChatGPT de vous aider à résoudre le problème. La procédure décrite ci-dessus repose sur la configuration de l'appareil. Dites à ChatGPT ce que vous ne comprenez pas ou ce qui ne fonctionne pas sur votre appareil particulier, et il vous dira exactement ce que vous devez faire pour réparer les choses.
Le
Et surtout, dans ces documents, vous apprendrez que de nombreux qualificatifs sont disponibles pour modifier l'action d'un tag. Par exemple, un
Vous avez peut-être simplement l'impression que l'écriture de votre application Web vous obligera à créer des fichiers assez volumineux. Le code de l'application Web est verbeux et des fichiers contenant des milliers de lignes ne seraient pas inhabituels.
Vous pourriez, comme le montre l'exemple ci-dessus, simplement taper ces lignes dans un éditeur de texte de base, mais ce serait une mauvaise idée. Les navigateurs sont des bêtes impitoyables, et toute faute d’orthographe dans votre code entraînera l’échec complet de vos intentions. Idéalement, vous avez besoin d'un éditeur de texte spécialisé qui surveillera le code au fur et à mesure que vous le saisissez, le formatera et le mettra en surbrillance de manière à vous aider à contrôler sa structure, et peut-être même à l'écrire pour vous.
L'IDE est conçu pour répondre à ces besoins - et bien plus encore.
De nombreux IDE sont disponibles, mais le VSCode de Microsoft est celui que je recommande. Son installation est gratuite et très largement utilisée. Encore une fois, cela représente une courbe d'apprentissage abrupte, mais Microsoft fournit une excellente documentation en ligne.
Dans le package gratuit VSCode, vous trouverez également de nombreuses aides automatisées - des outils pour formater votre code et pour fournir des mécanismes simples d'auto-complétion (par exemple, pour les instructions JavaScript et les noms de variables). Les mécanismes de vérification détecteront les erreurs de syntaxe et mettront en évidence les variables non définies, etc.
L'IDE fournit de nombreux autres services utiles. Jusqu'à présent, votre application est représentée par un seul fichier .html. En réalité, un système informatique moderne contiendra probablement des centaines de fichiers – nous appelons l’ensemble complet un « projet ». La gestion d'un grand projet donne lieu à de nombreuses tâches difficiles et celles-ci deviennent toutes désormais la responsabilité de l'IDE.
Par exemple, supposons que vous souhaitiez changer>
Encore une fois, supposons que vous souhaitiez abandonner les modifications récentes apportées à un fichier et le réinitialiser à un état antérieur dans son historique d'édition. VSCode conserve un historique des fichiers locaux que vous pouvez utiliser pour éliminer les dégâts. De plus, VSCode se connecte de manière transparente à un système de gestion de versions appelé Github pour créer des copies Web externes sécurisées de « point de contrôle » de votre projet. De cette façon, votre source et son historique sont en sécurité même si vous laissez votre ordinateur portable dans le bus.
Enfin, VSCode fournit la plate-forme pour exécuter votre projet à l'aide de sessions de terminal directement liées au système d'exploitation de votre appareil. Vous passerez probablement beaucoup de temps dans VSCode !
Cela pourrait être le bon moment pour installer VSCode sur votre appareil et essayer le didacticiel de Microsoft dans la section Premiers pas avec Visual Studio Code
JavaScript est un excellent langage pour les débutants. C'est facile à apprendre et fonctionne bien dans de nombreuses situations. Son domicile naturel est le navigateur, où il peut lire et écrire dans les structures de données définies par les sections HTML de votre application Web. En termes simples, il peut lire et écrire directement sur l'écran. Cependant, il a également acquis la capacité de lire et d'écrire dans des magasins de données distants basés sur un serveur, à la fois depuis le navigateur et lors de son exécution à distance sur le serveur. En bref, il est devenu si utile qu’il s’agit peut-être de la seule langue que vous devez apprendre.
Commençons. JavaScript est un langage « interprété ». Cela signifie qu'aucun prétraitement spécial n'est requis pour préparer le code à l'exécution. Vous pouvez le lancer directement dans votre « moteur d'exécution » et voir les résultats immédiatement. Votre humble navigateur Web est un exemple de moteur d'exécution JavaScript. Voyons comment vous pouvez faire en sorte que le fichier my-first-app.html que vous avez créé précédemment se comporte "intelligemment" en ajoutant du Javascript.
JavaScript tire sa capacité de lire et d'écrire directement à l'écran de la nature rigoureuse de la syntaxe HTML. Cela permet au navigateur de construire un "modèle" de la disposition de l'écran - une structure arborescente appelée "Modèle d'objet de domaine" (ou "DOM" en abrégé). Au sein du DOM, les différentes branches et feuilles de l'arbre sont toutes adressables individuellement par JavaScript.
Voici un exemple. Prenez le fichier my-first-app.html présenté ci-dessus et modifiez-le comme suit :
<h1>
<p>Ce code rend la sortie du code dépendante de l'heure de la journée. Si vous réexécutez le fichier avant l'heure du déjeuner (plus précisément avant midi un jour donné), la sortie apparaîtra en bleu. Après le déjeuner, la sortie apparaîtra en rouge. Félicitations, vous avez codé votre première webapp « intelligente ». </p><p>Les lignes entre le HTML <script> et </script> les balises contiennent votre premier morceau de code JavaScript. La ligne commençant hourOfDay = crée une "variable" contenant un "objet" "Date" pour l'exécution. Un « objet » en Javascript est un concept complexe que vous adorerez comprendre dans le futur. Pour l'instant, cependant, tout ce que vous devez savoir, c'est que l'instance de l'objet "Date" créée lors de l'exécution de votre code contiendra, quelque part en son sein, une représentation précise à la milliseconde de l'heure de la journée. De plus, l'objet contient également une "méthode" .getHours qui extrait des données en millisecondes un entier compris entre 0 et 23 représentant "l'heure du jour". Les mots-clés Javascript if et else dans les lignes de code suivantes fournissent une logique pour agir de manière appropriée sur les valeurs auxquelles ils font référence.
<p>Si vous trouvez gênant d'attendre l'heure du déjeuner pour tester la logique de changement de couleur, essayez de changer le code pour changer de couleur lorsque la minute est un nombre pair. La « méthode » pour obtenir les minutes de la journée est getMinutes(). Le Javascript pour tester si un nombre num est pair ou impair est if (num % 2 === 0). Voyez si vous pouvez modifier le code dans my-first-app.html pour changer la couleur du texte lorsque vous actualisez la page après une minute.</p>
<p>Vous aurez probablement remarqué que le <h1> La balise dans la première ligne de la version originale du fichier a acquis une clause 'id='. Cela a "étiqueté" la balise avec une chaîne unique ("test" dans ce cas). Le plus intelligent est l'instruction document.getElementById('test') qui permet à JavaScript de modifier le "style" du 'test' <h1> étiqueter. </p>
<p><em>Avant de vous effrayer à l'idée de passer votre vie à jouer avec les instructions document.getElementById('test'), laissez-moi vous assurer que cela ne sera pas nécessaire. L'ensemble des développements récents en génie logiciel a été conçu pour vous permettre de contrôler la disposition des écrans grâce à des modèles de langage <b>significatifs</b>. Ceux-ci simplifient énormément la tâche. Dans cette série d'articles, comme indiqué précédemment, vous utiliserez un « framework de code » appelé SvelteKit pour créer vos systèmes. Vous en verrez un exemple dans l'article 2.1.</em></p>
<p>Maintenant, comment acquérir la maîtrise de JavaScript ? Ce dont vous avez besoin ici, c'est d'un bon livre et celui que je recommande est "Eloquent JavaScript" de Marijn Haverbeke. </p>
<p> Lisez ceci en ligne si vous le devez (vous pouvez trouver la dernière édition sur https://JavaScript .net/), mais rien de tel que la commodité d'un livre approprié et bien écrit avec des pages physiques sur lesquelles vous pouvez griffonner. L'occasion (et les premières éditions) conviennent à ce stade et constitueront probablement le meilleur (et le seul) investissement initial que vous devrez faire pendant un bon moment. Haverbeke fera un bien meilleur travail pour expliquer les concepts « objet », « méthode », « fonction » et « style » introduits ci-dessus que tout ce que je peux espérer réaliser. </p><p>Si vous êtes toujours déterminé à étudier en ligne, je pense que le didacticiel de Mozilla sur les bases de JavaScript est excellent.</p>
<p>Ce serait également une bonne idée de commencer à réfléchir à un projet test pour votre travail. Les articles ultérieurs de cette série fourniront des exemples artificiels, mais les choses n'auront de sens que lorsque vous pourrez les réinterpréter en termes de quelque chose de personnel. Commencez dès maintenant à réfléchir au type de données dont ce projet aurait besoin. Comment cela serait-il représenté ? Comment les utilisateurs interagiraient-ils avec lui ?</p>
<h4>
2.4 Outils du navigateur
</h4>
<p>Il est très peu probable que vos tentatives de codage fonctionnent correctement du premier coup. Peut-être que la disposition des écrans ne correspondra pas exactement à ce que vous souhaitiez ou peut-être qu'il y aura un problème avec la logique de l'application Web. Parfois, le navigateur affichera un message d’erreur, mais dans d’autres cas, il se contentera de bouder. Comment régler cela ?</p>
<p>La bonne nouvelle est que tous les navigateurs grand public disposent d'un « outil d'inspection » intégré qui vous permet d'enquêter sur ces problèmes. L'« inspecteur » vous donne des informations privilégiées sur l'interprétation par le navigateur des définitions de disposition d'écran et vous permet de surveiller l'exécution des instructions JavaScript côté client. Dans le cas de Google Chrome, cet outil d'inspection est accessible par un simple clic droit sur l'écran du navigateur et en sélectionnant « inspecter » dans la fenêtre contextuelle ainsi révélée. </p>
<p>La mauvaise nouvelle est que, dès la première connaissance, l'outil d'inspection se révèle comme un complexe alarmant de barres de menus et de fenêtres redimensionnables. Mais veuillez accepter mon assurance qu'une fois que vous l'aurez compris, vous constaterez que cet outil est un plaisir de travailler avec et une ressource inestimable pour localiser et résoudre les problèmes. Vous pouvez trouver une documentation complète sur Google devtools.</p>
<p>En ce qui concerne les problèmes de mise en page, l'inspecteur vous donne une démonstration graphique de la façon dont les différents paramètres "marge", "remplissage" et "largeur" qui déterminent la position d'un élément d'affichage sont appliqués par le navigateur. Parallèlement à cela, il fournit un outil pour expérimenter les ajustements appropriés.</p>
<p>En ce qui concerne les problèmes de logique, l'inspecteur vous permet de définir des "points d'arrêt" dans votre code source JavaScript. Une fois ceux-ci en place, l'actualisation de l'application Web arrêtera l'exécution au premier point d'arrêt et vous permettra d'afficher les valeurs des variables du programme à ce stade. Vous avez alors la possibilité de parcourir ligne par ligne le code suivant ou de passer au point d'arrêt suivant</p>
<p>Si votre programme « plante », l'inspecteur vous dira ce qui ne va pas.</p><p>Auparavant, la manière habituelle de découvrir ce qui avait conduit à un problème de logique aurait été d'ajouter des instructions de « journalisation ». Ceux-ci auraient suivi le « flux de contrôle » à travers le programme et affiché les valeurs des variables du programme aux points d'inspection. Comme vous pouvez l’imaginer, c’était une procédure fastidieuse. Désormais, lorsque j'« inspecte » une application Web dans le navigateur, c'est comme si j'avais ouvert le dos d'une montre suisse et découvert toutes ses subtilités prêtes à être examinées. Le débogage est maintenant si agréable que j'ai presque hâte d'avoir des erreurs dans mon code !</p>
<h4>
2.5 Kit Svelté
</h4>
<p>L'exemple Javascript présenté dans la section 2.3 ci-dessus utilisait une vilaine méthode document.getElementById("idName") pour accéder au DOM d'une application Web et modifier les propriétés de l'élément "idName". Des frameworks comme Sveltekit fournissent une interface DOM beaucoup plus conviviale et efficace. Ils vous permettent d'écrire du code « significatif » pour des tâches courantes telles que révéler et masquer des fenêtres contextuelles, afficher des listes et créer un historique des onglets du navigateur. Par exemple, une instruction Svelte qui dit "if popUpVisible displayPopup()" (bien qu'avec une syntaxe légèrement plus rigoureuse), rendra la fenêtre contextuelle visible lorsque la variable displayPopup passe à true.</p>
<p>Lors du développement initial, le framework fonctionne via un "serveur local" que vous lancez dans une session de terminal IDE. Cela a l'effet magique de maintenir une fenêtre de navigateur qui se met à jour et se rafraîchit automatiquement chaque fois que vous modifiez le code de l'application Web sous-jacente. </p>
<p>Le framework vous permet également de spécifier où le code de l'application Web s'exécute. Par exemple, les instructions qui lisent et écrivent sur le stockage distant peuvent, selon les circonstances, être mieux exécutées soit localement dans le navigateur de l'utilisateur, soit à distance sur le serveur. Cela ne vous intéressera peut-être pas pour le moment, mais deviendra important une fois que vous aurez écrit du code sérieux. Le code qui s'exécute sur le navigateur est facile à déboguer mais, lorsque vous devez faire face à des problèmes d'efficacité et de sécurité, vous serez peut-être heureux de pouvoir l'exécuter « côté serveur ». Sveltekit vous permet de livrer de tels arrangements d'une manière particulièrement élégante.</p>
<p>Lorsque vous êtes prêt à implémenter votre code, l'acte final du framework consiste à « construire » une version « packagée » de votre application. Cela effectue une série d'étapes pour compiler, regrouper et optimiser votre application dans un « package » prêt à être déployé. Cela garantit que l'application Web déployée est aussi petite, rapide et efficace que possible.</p>
<p>Actuellement, le framework le plus populaire est probablement le système React de Meta. Celui-ci a été créé vers 2010 pour soutenir le développement de Facebook. L'idée a si bien fonctionné que des concurrents tels que Vue, Angular et Next.js ont rapidement émergé. Sveltekit est un des derniers arrivés et je l'utilise ici car il est particulièrement simple d'utilisation. Vous pourriez être intéressé de noter ses bonnes notes d'approbation dans l'enquête auprès des développeurs 2024 de Stack Overflow'</p><p><em>En passant, vous remarquerez peut-être que je parle parfois de Svelteki et que j'ai ensuite l'air pervers de passer à autre chose appelé Svelte. Svelte est le « langage » créé par les ingénieurs de svelte.dev pour « étendre » Javascript et faciliter l’écriture de webapps efficaces. Sveltekit est le framework qui crée l'environnement dans lequel les applications Web Svelte s'exécutent.</em></p>
<h4>
2.6 Firebase et App Engine
</h4>
<p>Tout ce dont vous avez besoin pour terminer la phase de développement d'un projet d'application Web peut être fourni sur un ordinateur de bureau modestement spécifié. Mais lorsque vous arrivez au point où vous souhaitez lancer votre projet dans le monde futur, vous aurez besoin des services d'un serveur Web "back-end" spécialisé. Cela va :</p>
Dans ce cours, vous utiliserez :
Puisque vous utiliserez Firestore dès le départ, vous devrez commencer par créer un compte Firebase.
Dans le passé, vous vous êtes peut-être tourné vers un « fournisseur d'accès Internet » tel que GoDaddy ou HostPapa pour fournir vos services Cloud. Même si ces services ont encore un rôle à jouer et vous offrent certainement un excellent support personnalisé via leurs services d'assistance, les plateformes Cloud offrent un meilleur package complet pour vos besoins actuels.
Ce cours se déroule désormais en deux étapes principales. Le premier est conçu pour vous familiariser avec les bases de HTML, Javascript, Firebase et Firestore. Si vous êtes complètement nouveau dans ce jeu, il y a beaucoup à apprendre ici et beaucoup de risques de confusion. Attendez-vous à y consacrer du temps. Prenez votre temps et utilisez votre tuteur chatBot de manière prolifique.
Une fois que vous avez terminé, la deuxième étape vous présente certains des éléments les plus avancés de la conception d'applications Web Sveltekit. Si vous réussissez, vous saurez la plupart de ce dont vous avez besoin pour développer une application Web utile.
Alors maintenant, c'est parti. La première étape consiste à installer SvelteKit sur votre machine locale et à vous habituer aux techniques de développement d'applications Web. Voir le message 2.1 pour les instructions.
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!
Solution aux propriétés du dossier Win7 ne partageant pas la page à onglet
qu'est-ce que vuex
Comment nettoyer le lecteur C de l'ordinateur trop plein
Logiciel de modélisation mathématique
La différence entre vscode et vs
Comment taper l'inscription sur le cercle de la pièce ?
Comment décrypter le cryptage Bitlocker
Comment résoudre le problème de téléchargement lent de Baidu Netdisk
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
