⏲️ Temps estimé pour terminer : 60 min. ⏲️
Aujourd'hui, vous allez apprendre comment :
- Créer une nouvelle branche dans votre projet
- Comment changer le titre et sa couleur sur votre application
- Tester vos modifications dans votre espace de travail
- Valider & pousser vos modifications
- Ouvrir une Pull Request & la fusionner
- Créer une nouvelle branche dans votre projet
- Changer le titre et sa couleur de votre application
- Tester vos modifications dans votre espace de travail
- Valider & pousser vos modifications
- Ouvrir une demande de tirage et la fusionner
Allez sur votre dépôt sur GitHub. Cliquez sur le menu déroulant main et tapez le nom de votre nouvelle branche (par exemple, update-title-and-color). Cliquez sur Create branch : update-title-and-color from main pour la créer.
Pour ne pas risquer de déteriorer le fonctionnement du project, les développeurs créent une branche afin de travailler sur une copie du projet le temps de finir le code de leur nouvelle fonctionnalité.
Tapons quelques commandes git dans le terminal pour créer une nouvelle branche. Pour afficher le terminal, rendez-vous dans le menu View puis Terminal ou par le raccourci clavier Ctrl + j ou Ctrl + ù.
Qu'est-ce qu'un terminal ?
Vous avez probablement l'habitude de faire les choses sur votre ordinateur en déplaçant votre souris et en cliquant sur des choses. Il existe en fait une autre manière dont vous pouvez utiliser votre ordinateur : le terminal ! Au lieu de déplacer votre souris, vous pouvez taper une commande dans le terminal et l'ordinateur l'exécutera. Si l'utilisation de la souris est plus intuitive, le terminal permet d'enchainer plusieurs opérations très rapidement ce qui serait plus long manuellement. Disons que vous voulez aller dans un dossier spécifique sur votre ordinateur - nous avons une commande pour cela, à savoir cd <chemin-vers-votre-dossier> (cd signifie change directory). Il existe de nombreuses autres commandes qui ont chacune leur utilité. Vous pouvez les essayer par vous-même, allez dans le terminal (la petite boîte comme montré sur la photo) et tapez help - cela listera toutes les commandes intégrées. N'hésitez pas à jouer avec et à les essayer pour vous familiariser avec l'environnement. Pour quelques commandes communes pratiques, vous pouvez essayer : pwd (affiche le chemin de votre répertoire courant, pwd signifie print working directory) et ls (liste tous les fichiers dans le dépôt courant).
Revenez dans votre espace de travail et tapez dans le terminal :
git pull
Cette commande permet à git de savoir que vous avez créé une nouvelle branche via l'interface de GitHub.
Puis tapez la commande suivante :
git checkout update-title-and-color
Cette commande permet de vous placer sur la branche que vous avez créé.
Cela devrait ressembler à ceci :
Félicitations ! Vous venez de créer une nouvelle branche et de vous placer dessus avec succès. Maintenant, vous pouvez commencer à apporter des modifications à votre code !
Ouvrez le fichier Home.vue du dossier frontend/src/views. En haut, vous trouverez un élément appelé <template> qui décrit la structure de base de la page d'accueil. Vous pouvez changer le titre de l'application comme vous le souhaitez en changeant le texte entre les balises <b-navbar-item>.
Pour changer la couleur, nous devons ajouter un nouvel attribut à la balise <b-navbar-item>. L'attribut s'appelle style et nous pouvons le définir sur color: green pour rendre notre titre vert. Vous pouvez trouver une liste complète de toutes les couleurs possibles ici.
- Installez les extensions recommandées lorsqu'elles sont proposées.
- Dans le terminal, naviguez vers le dossier frontend en tapant la command
cd frontend - Puis tapez la commande
npm installpour installer les packages node. Les packages sont le code de d'autres utilisateurs dont l'application dépend. - Démarrez l'application avec la commande
npm run dev - Cliquez sur le bouton vert
naviguer vers le sitelorsqu'il apparaît pour voir votre site déployé, vous devriez maintenant voir vos modifications - Maintenant, essayez de changer la couleur du titre pour une autre couleur de votre choix : la couleur changera automatiquement dans le navigateur sans que vous ayez à rafraîchir la page !
si la pop-up ouvrir dans le navigateur n'apparaît pas en bas de votre fenêtre, actualisez la page et réessayez |
Cliquez sur le signe + en haut à droite de votre terminal pour en ouvrir un nouveau. Nous ne voulons pas arrêter notre application, nous utiliserons donc un nouveau terminal pour les prochaines étapes.
Après avoir vérifié vos modifications, il est temps de les valider et de les sauvegarder (On utilise le terme pousser ou push en anglais pour signifier que l'on "pousse" les changements au reste de l'équipe). Tout d'abord, nous voulons vérifier quels fichiers nous avons modifiés. Tapez git status dans votre terminal et appuyez sur entrée. Comme nous n'avons fait des modifications que dans notre fichier Home.vue, nous pouvons voir qu'il est marqué comme modifié.
Maintenant, exécutez d'abord git add . cela sélectionnera tous les fichiers modifiés pour pouvoir être sauvegardé. Ensuite, exécutez git commit -m "Mise à jour du titre et de la couleur" pour valider vos modifications. L'option -m est utilisé pour ajouter un message explicant les modifications aux autres développeurs (on appelle cela un message de commit). Il est important d'écrire un message clair, afin que les autres développeur puissent comprendre ce que vous avez changé. Ensuite, exécutez git push pour pousser vos modifications sur GitHub.
Retournez maintenant dans votre dépôt sur GitHub. Vous devriez voir un message indiquant que vous avez poussé du code sur votre branche. Cliquez sur le bouton Compare & pull request pour ouvrir une nouvelle pull request.
Pour rappel: Une pull request est une demande de fusion de vos modifications dans la branche principale. C'est une manière très populaire de travailler professionnellement avec d'autres développeurs sur un projet pour garantir la qualité du code.
Si ce message n'apparaît pas, cliquez sur l'onglet Pull request puis sur le bouton New pull request.
Une nouvelle fenêtre s'ouvre. Ici, vous pouvez voir votre dernier message de commit comme titre et avez la possibilité d'insérer une description. Vérifiez que vous avez choisi la branche principale main de votre dépôt pour la fusion afin d'y appliquer vos changements de votre branche update-title-and-color.
Cliquez sur le bouton Create pull request en bas à gauche pour créer une nouvelle pull request.
Une autre fenêtre s'ouvre. Ici, vous pouvez revoir vos modifications. Cliquez sur Fichiers modifiés. Vous pouvez voir les modifications que vous avez apportées dans le fichier Home.vue.
Cliquez à nouveau sur Conversation pour voir la vue de la conversation. Ici, vous pouvez voir le message de commit et la description que vous avez ajoutés.
Les pull requests sont une manière très populaire de travailler professionnellement avec d'autres développeurs sur un projet pour garantir la qualité du code. Habituellement, une autre personne examinerait maintenant vos modifications et les accepterait ou pas puis les fusionnerait dans la branche principale, ici: main.
Aujourd'hui, vous allez le faire vous-mêmes. Cliquez sur le bouton Merge pull request puis sur le bouton Confirm merge pour fusionner vos modifications récentes.
Si tout s'est bien passé, vous devriez voir un message indiquant que votre Pull Request a été fusionnée.
Félicitations ! Vous avez réussi à apporter vos premières modifications à votre projet, vous avez appris comment les développeurs professionnels travaillent ensemble.