Fiche savoirs : Utiliser Github avec Visual Studio

Le site GitHub permet héberger des projets de développement en gérant différentes versions des projets, permettant ainsi le travail collaboratif.

Pour cette activité, vous allez utiliser GitHub comme un outil de revue de code afin de faire remonter des propositions de corrections qui pourront être acceptées ou non.

Revue de code :

La revue de code représente l'analyse du code d'un projet pour corriger le maximum d'erreurs et de non respects des règles de codage.

La revue de code est en général réalisée par un ou plusieurs autres développeurs, différents de celui ou ceux qui sont à l'origine de la création du code. On parle aussi de revue de code par les pairs.

Configurer GitHub pour un projet

Vous allez tester l'extension Github avec un de vos projet. Pour la suite de ce document, c'est le projet Calculs corrigé de l'activité 1 qui est utilisé.

Depuis le menu Git de Visual Studio 2022, sélectionnez Créer un dépôt Git … :

Si vous n'avez pas encore configuré Visual Studio 2022 avec votre compte Github, le lien Se connecter … est affiché dans la zone Créer un dépôt GitHub.

cliquez sur le lien Se connecter … pour ajouter votre compte GitHub.

Dans le navigateur, vous êtes redirigé vers le site GitHub.
connectez-vous à votre compte GitHub ou cliquez sur le lien Create an account pour créer votre compte GitHub :

Sur la page d'inscription, entrez vos informations (en les notant pour ne pas les oublier) :
- le Username est libre mais ne doit pas déjà être pris (un message vous signale si le username est accepté.
- Cliquez ensuite sur Vérifier et résolvez l'énigme anti-robot pour avoir ensuite accès au bouton create account.
- Cliquez alors sur ce bouton.

Vous allez alors recevoir un mail pour contrôler votre adresse mail. Pensez à cliquer dans le mail, sur Verify email address.

Votre compte Github est maintenant créé.

Revenez dans le logiciel Visual Studio, au niveau de la fenêtre GitHub,
maintenant vous pouvez cliquer sur Se connecter avec votre navigateur.

Dans le navigateur, vous allez tomber sur cette page.

Cliquez sur Authorize github.

Vous avez reçu un mail dans lequel vous devez cliquer sur Verify email adress qui va rediriger vers GitHub. Vous pouvez cliquer sur l'icône de GitHub, en haut à gauche, pour arriver à votre page d'accueil du compte.

De retour dans Visual Studio, vous obtenez la fenêtre suivante :

Remarquez Initialiser un dépôt local qui contient déjà un chemin local car le dépôt va aussi être en local.

La partie Créer un dépôt GitHub contient maintenant votre nom de votre compte ainsi que le nom du propriétaire (à priori le même).

Le nom du dépôt est prérempli avec le nom du projet : laissez ce nom. Vous pouvez si vous voulez ajouter une description.

Décochez la case Dépôt privé et cliquez sur Créer et envoyer (push).

Teams explorer

Depuis le menu Affichage, sélectionnez Teams Explorer
Cliquez sur la maison pour aller à l'accueil.

Si vous avez le message vous demandant de configurer votre compte, cliquez sur le lien pour renseigner votre nom et adresse de courriel :

Remarquez que l'onglet Modifications Git a changé et se prépare à d'éventuels futurs commit.

Depuis le menu Opérations supplémentaires cliquez sur l'option Ouvrir dans le navigateur :
Vous accédez maintenant au site Github et vous voyez dépôt créé :

Revenez à l'onglet Team Explorer et cliquez sur la maison pour aller à l'accueil.
Remarquez en bas de l'onglet, différentes commandes (dont Requêtes de tirage qui sera utilisé plus tard) et en milieu d'onglet, le lien pour aller sur le dépôt (repository) sur GitHub. Cliquez sur le lien.

Vous accédez maintenant au site Github et vous voyez dépôt créé :

Le projet a bien été transféré. Remarquez les informations mentionnées dans la barre au-dessus des fichiers :

2 commits : 2 transferts ont été réalisés (si vous cliquez dessus, vous verrez qu'en fait, cela concerne le projet et les fichiers spécifiques à git).
1 branch : pour le moment il n'y a que la branche “master” qui est la branche principale. Vous verrez que pour proposer des correctifs, on travaillera sur une autre branche dans laquelle le projet sera copié, et ce n'est que si les correctifs conviennent, qu'ils seront intégrés (merge) à la branche “master”.

Prenez connaissance de l'URL de votre projet que vous pouvez communiquer à un autre développeur afin que celui-ci puisse télécharger le code de votre projet :

Récupérer un projet pour la revue de code

Pour récupérer le projet d'un autre développeur déposé sur GitHub, il faut récupérer l'adresse du dépôt en ligne.
Dans Visual Studio, fermez le projet en cours, avec le menu Fichier > Fermer la solution.
Vous retrouvez la fenêtre qui permet d'ouvrir un projet ou d'en créer un.
Sélectionnez Cloner un dépôt.
Dans la zone de l'emplacement du dépôt, collez l'adresse que vous avez récupérée. Elle doit forcément se terminer par .git. La zone du chemin local se remplit automatiquement mais attention, l'idée est d'enregistrer le clone dans un autre dossier que le projet d'origine. Donc pensez à changer le chemin.

Ensuite, cliquez sur Cloner.
Si vous n'êtes pas dans l'onglet “Explorateur de solutions”, cliquez dessus.
Cliquez sur le bouton (encadré en rouge) Passer entre les solutions et les vues disponibles.

Vous retrouvez le projet qui a été cloné.
Double cliquez sur Calculs.sln pour ouvrir la solution.
Vous retrouvez l'arborescence classique d'un projet.
Ouvrez Program.cs en double cliquant dessus.
Le code apparait dans la fenêtre principale.