[Visual Studio] Stocker son projet sur le Cloud

Tout d'abord, ce tutoriel a été réalisé à partir de Windows. Il est donc fortement probable qu'il ne fonctionne pas sur d'autres systèmes d'exploitation.

Création d'un compte

Aller sur le site https://www.visualstudio.com/fr/

Si vous possédez déjà un compte Microsoft (ooutlook, hotmail ou autre), vous devez juste vous connecter et aller à l'étape suivante.

1 vs connexion

Pour les autres, il faut cliquer sur "Créez-en un !"

Complétez le formulaire et répondez aux différentes questions puis vous arrivez à cet écran :

3 acceuil

 

Maintenant que vous avez votre compte, nous allons créer un premier projet.

Nouveau projet

Pour l'instant, cliquer simplement sur "Créer un compte".

Dans le nouvel écran, il vous demande plusieurs informations :

  • le début de l'url pour accéder à vos fichiers
  • le type de gestion des fichiers

Point culturel : il existe un grand nombre de logiciels pour faire du "versionning" tels que Team Foundation Version Control (gratuit), Git (gratuit), Perforce (payant), SVN (aucune idée ^^) et plein d'autres que je ne connais pas. Tout le monde connait et/ou utilise Git (par Github) mais est-ce vraiment ce dont vous avez besoin ?
Cette question mérite tout un dossier complet tellement elle est susceptible de heurter les "puristes" de tous bords.
Pour ma part, j'ai déjà utilisé Git, TFVC et Perforce et ma préférence va à TFVC.

 

Utilisation de Team Foundation Version Control

Donc, renseignez le début de l'url (une vérification est faite s'il existe déjà) puis sélectionnez "Team Foundation Version Control".

/!\ ATTENTION /!\ Ne cliquer pas encore sur "Continuer" mais sur "Changer les détails" !

Cela va vous permettre de renommer votre premier projet. Si vous avez cliqué sur "Continuer", votre projet s'intitulera "MyFirstProject" (ou quelque chose de similaire).

Vous pouvez aussi changer la méthode de travail (Agile/Scrumm/CMMI) et la zone d'hébergement de vos données (Europe, USA, Canada, Asie, Inde, Australie et Brésil).

Maintenant que vous avez mis à jour les informations du projet, là vous pouvez cliquer sur "Continuer".

Une barre de progression vous indiquera les différentes actions en cours de réalisations par le programme.

Vous devez voir un écran ressemblant à celui ci-dessous :

4 acceuil projet

 

Voilà, votre compte est actif. Ce qui est bien, c'est qu'en plus, vous avez :

  • une adresse mail (oui, je sais encore une...)
  • un espace de stockage sur OneDrive de 5Go pour divers fichiers (différent de celui utilisé par vos projets)

Bref, cela vous permet d'avoir accès à tous les outils mis à disposition gratuitement par Microsoft : Word, Excel, PowerPoint, etc.

 

Configuration de Visual Studio

Je vous laisse vous charger d'installer Visual Studio (pour rappel, la version gratuite, c'est la version Community).

Pour mon exemple, je vais créer un nouveau projet "Application vide (Universal Windows)" que l'on trouve sous "Autres langages > Visual C# > Windows Universel".
Vous pouvez prendre le type de projet que vous voulez, cela n'a aucune incidence sur la suite du tutoriel.

Renseignez un nom pour le projet et un nom pour la solution ainsi que le répertoire où seront copiés vos fichiers en local.

Tfvc 5 nouveau projet

Maintenant que votre projet est chargé, nous allons l'enregistrer sur le cloud.

Enregistrement du projet dans le cloud

Pour cela, vous allez afficher "Team Explorer" (menu "Affichage > Team Explorer").

Tfvc 6 team explorer

Cliquer sur l'icone représentant une prise verte intitulé "Gérer les connexions" (chiffre 1) puis sur le lien "Manage Connections" (chiffre 2) et enfin sur "Connexion à un projet" (chiffre 3)

 

Tfvc 7 gerer connexions

Vous devez obtenir une fenêtre similaire à celle ci-dessous :

Tfvc 8 connexion compte

Cliquer sur "Ajouter un compte" et renseigner votre compte créé précédemment.
Une fois que vous aurez saisi votre mot de passe, vous verrez apparaître votre projet dans la fenêtre comme ci-dessous :

Tfvc 9 selection projet

Petite explication sur le contenu affiché :

  • La ligne avec l'icone en forme de nuage, c'est, vous l'aurez deviné, l'url de votre compte sur le cloud.
  • La ligne juste en dessous avec les 2 petits personnages représente votre équipe. Pour l'instant, vous êtes seul(e) mais on peut toujours travailler à plusieurs sur un même projet.
  • Et enfin, la dernière ligne, celle qui commence par le caractère $, représente votre projet...enfin, l'emplacement de la zone de stockage de vos fichiers.

C'est cette dernière que vous devez sélectionner puis cliquer sur "Connect".

Tfvc 10 association dossiers

Vous l'avez remarqué, dans Team Explorer, vous avez de nouveaux liens qui sont apparus. Mais nous en reparlerons dans un autre tutoriel. Pour l'instant, il faut associer physiquement notre répertoire sur le cloud avec celui en local sur notre machine.

Dans le premier champ sous "Configure workspace", vous avez l'emplacement de la zone de stockage de vos fichiers, celui qu'on a sélectionné précédemment.

Juste en dessous, vous devez avoir le chemin local vers vos fichiers. Vérifiez qu'il pointe bien sur le bon répertoire.

Dès que vous l'avez mis à jour, cliquer sur "Map & Get".

 

Envoi des données dans le cloud

La première chose à faire est d'envoyer le contenu du projet dans le cloud.
Pour cela, il faut cliquer sur "Pending changes".

Pour l'instant, il ne semble pas y avoir de modification en attente. Mais si vous regardez à nouveau, vous remarquerez qu'il y a des fichiers qui ont été exclus : tous les fichiers de votre projet.

Tfvc 11 pending changes

Cliquer sur "Detected: [XX] add(s)". Cela vous ouvre une fenêtre listant tous les fichiers.

Cliquer sur "Promote" pour les inclure dans les changements en attente.

Pour envoyer vos fichiers vers le cloud, il vous suffit de cliquer sur "Check-in".

Je vous conseille néanmoins d'indiquer un commentaire à chaque fois que vous faites des "Check-in".
Cela vous indiquera pour quelle raison vous l'aviez fait à l'époque (^_^)

Vérification de l'envoi des fichiers

Nous allons maintenant vérifier que tout a bien été envoyé.
Pour cela, cliquer sur l'icone "Home" ("Début" en français...).

Sous l'information "Visual Studio Team Services, vous voyez le nom de votre projet ainsi qu'une url.
Cliquez dessus et cela vous affichera la page d'acceuil de votre projet. En cliquant sur "Web portal" vous arriverez au même endroit.

Sur cette page Web, cliquer sur le menu "Code"

Dans le sous-menu "Files", vous avez les dernières versions de vos fichiers

Dans le sous-menu "Changesets", vous avez, pour chaque fichier et répertoire, le numéro et libellé du "Check-in" ainsi que l'auteur et la date.
Si vous cliquez sur un des changesets, vous pourrez visualiser les modifications apportées uniquement sur les fichiers concernés.

Dans mon exemple, j'ai supprimé une image et le projet a supprimé la référence pointant dessus.

Tfvc 12 changeset

 

Suppression d'un projet

Sur le site web, passer votre souris sur l'engrenage puis cliquer sur "Account Settings".

Dans la fenêtre, passer votre souris sur le le nom du projet à supprimer. Vous verrez apparaître trois points.

Cliquez dessus et sélectionner "Delete"

Tfvc 13 projets

Dans la nouvelle fenêtre, il vous suffit d'indiquer le nom du projet. De plus, il est également noté dans la fenêtre.

Tfvc 14 delete

Il vous suffit de cliquer sur "Close" et vous aurez ainsi un écran d'acceuil "vierge" de tout projet.

Tfvc 15 compte vierge

 

Fin du tutoriel

Ce tutoriel est terminé et je sais que vous avez de nombreuses questions.
N'hésitez pas à me laisser vos commentaires en indiquant ce que vous aimeriez que je détaille dans un prochain tutoriel.

Date de dernière mise à jour : 19/12/2017