Contrôle de la version principale pour les équipes distantes

Sep 15, 2025
Comment
Version control [dix] [dix] [dix]
[dix]

Le travail à distance est devenu beaucoup plus fréquent dans le développement du Web au cours des dernières années. Avant le contrôle de la version, le travail à distance sur le même projet de développement aurait été un cauchemar absolu. Les développeurs auraient dû devaient envoyer de gros fichiers l'un à l'autre (probablement par courrier électronique), coller dans leur propre code avant de le renvoyer. Il n'y avait pas de réel moyen de suivre ce qui avait été ajouté et quand.

[dix]
  • 6 compétences indispensables pour les jeunes développeurs Web

Heureusement, la version de la version est arrivée et rendue le développement sur tous les fronts beaucoup plus gérables. Les projets Web sont devenus beaucoup plus faciles à mettre en œuvre et à gérer, en particulier lorsqu'il s'agit de travailler dans une équipe de développement distante. Vous n'avez plus à vous soucier de la version actuelle d'un site Web écrasé - chaque membre de l'équipe est libre de travailler sur n'importe quel fichier à tout moment, il n'y a pas de confusion quant à l'endroit où la dernière version d'un fichier est stockée - et en haut stockage en ligne aide avec le processus aussi.

Dans ce tutoriel, nous allons utiliser Github Pour gérer notre code. Il existe de nombreux types d'outil de contrôle de version, tels que BitBucket et TFVC, mais même s'ils sont tous différents, les principes restent les mêmes en ce qui concerne la gestion du code.

Pour plus de moyens de faciliter le processus de construction de votre site, consultez nos guides au sommet Générateur de site Web et hébergement Web un service.

Modèle de ramification

Premièrement, il est très important d'avoir un modèle de ramification réussie lorsque vous travaillez dans une équipe pour que le processus de développement et de déploiement fonctionne correctement. Vous aurez probablement plusieurs développeurs travaillant sur le même projet. Lorsque vous travaillez avec une main-d'œuvre distante, je pense que le meilleur flux de travail est composé de trois branches principales ainsi que d'un ensemble de celles temporaires:

[dix]
  • Développer une branche: Chaque ligne de code a été testée et validée par le client.
  • Branche de mise en scène: Cela correspondra à l'environnement de validation.
  • Branche de sortie: Ceci contient la dernière version de votre site Web en production.

Il y aura également un ensemble de branches de fonctionnalités. Cependant, ceux-ci seront simplement temporaires pour développer initialement les nouvelles fonctionnalités.

Plusieurs développeurs sur un projet

Version control: Branching model

[dix] [dix]
Le meilleur flux de travail est composé de trois branches principales: développer, mettre en scène et libération

Supposons que vous gagnez une équipe avec deux développeurs qui travaillent à distance. Nous les appellerons Sarah et James: ils travaillent tous deux sur le même site Web de l'Ecommerce pour un client. Sarah doit développer une fonctionnalité qui enregistre les détails du client.

Nous allions casser cela en trois histoires d'utilisateurs distinctes - ajoutant, éditer et supprimer - puis ajoutez ces trois billets dans le carnet de sprint.

Branches de fonctionnalités

Version control: Feature branches

[dix] [dix]
Ajout d'une branche de fonctionnalité pour le développement d'une fonctionnalité de détail du client et ajout d'une branche d'histoire utilisateur pour une tâche de détail

Donc, disons que Sarah commence à ajouter la section Détails du client. Elle aurait besoin de créer la branche de fonctionnalité "Détails des clients" et d'une histoire d'utilisateur une pour la première tâche "ADD-Data".

 Git Checkout Developpement & Amp; & amp; Git Tirez Origine / Développer
Fonction GIT Checkout -B / Détails du client
Git Checkout -B Ajouter-Détails 

Sarah continuerait à travailler sur la branche temporaire "Add-discours" locale et de commettre son travail en se développant. Maintenant, disons que James veut aider Sarah avec la fonctionnalité de détails du client, il commence donc à travailler sur la suppression des détails.

James tire la dernière version de la succursale partagée et créerait une nouvelle succursale pour l'article d'utilisateur 'Supprimer les détails ". Ensuite, il peut commencer à faire ses propres ajouts sans se soucier de l'écrasement au code de Sarah.

 Caractéristique de la caisse GIT / Détails du client
ORIGINE / FONCTIONNEMENT DU TRÈS GIT / Détails du client
Git Checkout -B Supprimer les détails 

Il utilisera également sa branche temporaire pour coder localement et valider toute modification. Une fois que Sarah a terminé sa fonctionnalité localement, elle met le billet en code de code. Elle pousserait son code à la branche de la stadification et ouvrirait une demande de traction avec l'environnement de mise en scène.

 // Elle pousse son code à la branche de la stadification
Git Push Origin Ajouter-détails
// Elle ouvre une demande de traction avec l'environnement de mise en scène
Demande de requête GIT ADD-Détails 

Nous aurions désormais la branche de fonctionnement des détails du client et les deux branches de fonctionnalités de l'article utilisateur dans le développement 'Ajout-Détails' et «Delete-Détails».

Fusion

Version control: Adding new branch

[dix] [dix]
Création d'une nouvelle branche pour les détails de l'histoire de l'utilisateur, vous permettant de faire des ajouts sans vous soucier de l'écrasement du code d'une autre personne.

Une fois que son code a été examiné, elle peut fusionner sa succursale dans la mise en scène. Le billet est maintenant dans la colonne de validation, en attente de la validation du développeur principal.

 // Elle obtient la dernière version de la branche de la stadification
Checkout GIT STAGING ET AMP; & AMP; GIT ORIGINE ORIGINE / STAGINE
GIT Fusionner Ajouter-détails & amp; & amp; git push origine mise en scène
// Elle construit l'environnement de validation
// et demande au propriétaire du produit de valider 

Une fois que les travaux de Sarah ont été validés, le billet peut être déplacé dans la colonne Terminé. Elle peut fusionner son travail dans la branche des fonctionnalités et commencer une autre histoire d'utilisateur, comme la suppression des détails du client.

 // Elle tire la dernière version de la branche de fonctionnalité
Caractéristique de la caisse GIT / Détails du client
Caractéristique de l'origine de git / Client-Détails
GIT Fusionner Add-Adresse & Amp; & amp; Fonction d'origine push git / détails du client 

Lorsque toute la fonctionnalité a été validée à la fois par le développeur principal et le client, Sarah peut fusionner la branche de fonctionnalité dans le développement, car elle est prête à partir.

 // Elle obtient la dernière version de la Développement de la branche
Git Checkout Developpement & Amp; & amp; Git Tirez Origine / Développer
Fonction de fusion GIT / Détails du client et amp; & amp; Git Push Origine Développer 
[dix]

Déployer en production

Version control: Deployment

[dix] [dix]
Une fois prêt à déployer, fusionnez-vous dans la sortie et lancez le déploiement

Une fois que tout est complet et qu'il est prêt à être déployé dans la production, James fusionne-t-il dans la libération et lance le déploiement. À ce stade, il saurait que tout le code est correct et que le client est heureux. Il marquait la validation de la libération pour obtenir l'historique de chaque version.

 Git Checkout Developpement & Amp; & amp; Git Tirez Origine / Développer
Livraison GIT Checkout & Amp; & amp; Git Tirez l'origine / la libération
GIT Fusionner Developpement & Amp; & amp; git tag 2.1
Libération d'origine push git --tags 

Règles à suivre pour ce flux de travail

Ce flux de travail de développement à distance peut être assez difficile à comprendre au début, mais si vous souhaitez travailler votre équipe par cette méthode, vous disposez d'un flux de travail gratuit sans la nécessité de paniquer sur des fichiers remplacés ou de vos développeurs travaillant sur la même zone.

Il y a des choses essentielles à retenir:

  • La première chose dont vous aurez besoin d'enseigner à vos développeurs à distance est votre flux de travail de contrôle de la version et assurez-vous qu'ils lisent tous du même livre.
  • Si vous développez une fonctionnalité, essayez de casser cela dans des histoires d'utilisateurs plus petites. De cette façon, il est plus facile de garder une trace de chaque commit.
  • Ne manquez aucune étape: le même flux de travail doit être suivi à chaque fois.
  • Vous aurez toujours besoin de fusionner votre succursale pour développer pour préparer la prochaine version.
  • Vous devez nettoyer le référentiel de stockage chaque semaine si possible. Vous devez supprimer la branche de la stadification, localement et à distance, et la recréer à partir de Développement de la branche - voir exemple ci-dessous:
 Git CO Développer & amp; & amp; Git Tirez Origine / Développer
branche GIT -D STAGINE & AMP; & AMP; git push Origin --Delete
GIT CO -B STAGINE & AMP; & AMP; Git Tirez l'origine de l'origine 

Flux de travail supplémentaires

Avec des projets plus petits, vous voudrez peut-être utiliser un flux de travail moins complexe. Vous pouvez utiliser Master, qui contient la version la plus à jour, une branche de développement, puis un ensemble de succursales pour chaque fonctionnalité supplémentaire - que ce soit sur le forum, le formulaire de contact, le système de paiement. Tout dépend de votre préférence personnelle.

Gérer les conflits de fusion

Traiter avec les conflits de fusion est suffisamment difficile si vous travaillez tous dans la même pièce, mais ils peuvent devenir encore plus de cauchemar si vous travaillez tous dans un bureau différent. La chose la plus importante est de rappeler que vous pouvez toujours annuler une fusion et revenir à l'État avant que le conflit ne se produise.

Que vous faites toutes les fondues en tant que développeur principal ou que votre équipe, ce sont ceux qui les font de manière indépendante, la première étape consiste à comprendre ce qui s'est passé.

  • L'un de vos co-développeurs a-t-il édité la même ligne dans le même dossier?
  • Ont-ils supprimé un fichier que vous avez modifié?
  • Avez-vous tous deux ajouté un fichier avec le même nom?

Git vous dira que vous avez chemins non cédés via statut de git :

 $ Statut GIT
# Sur le système de contrôle de la branche
# Vous avez des chemins non allumés.
# (réparer les conflits et gérer "git commit")
#
# Chemins non licentés:
# (utilisez "git add & lt; fichier et gt; ..." pour marquer la résolution)
#
# à la fois modifié: checkout.html
#
Aucun changement ajouté pour commettre (utiliser "Git Ajouter" et / ou "GIT COMMIT -A") 

Maintenant, la cause la plus courante d'un conflit est lorsque des modifications affectent les mêmes fichiers sur la même ligne. Alors, regardons le contenu de la ligne conflictuelle. Vous remarquerez que Git est vraiment bon dans le fait qu'il marquera la zone en conflit en le joignant & lt; & lt; & lt; & lt; & lt; & lt; tête; tête et & gt; & gt; & gt; & gt; & gt; & gt; [Autre / Branche / Nom] . Dans ce cas, c'est système de paiement .

 & lt; & lt; & lt; & lt; & lt; & lt; DIRIGER
Cette ligne a été commise tout en travaillant dans la branche "Formulaire d'utilisateur".
=======
Cette ligne, en revanche, s'est engagée tout en travaillant dans la branche "Checkout-System".
& gt; & gt; & gt; & gt; & gt; & gt; & gt; Refs / Heads / Checkout-System 

Le contenu après le premier marqueur est originaire de votre agence de travail actuelle. Après les crochets d'angle, Git nous dit quelle branche les changements provenaient. Une ligne avec ======= sépare les deux changements conflictuels.

Vous pouvez maintenant simplement ouvrir le fichier dans un éditeur, rechercher les marqueurs de conflit et apporter des modifications nécessaires. Lorsque vous avez terminé, le fichier doit ressembler exactement comme vous le souhaitez à regarder ou, sinon, vous pouvez dire à GIT que vous allez simplement accéder à l'une des versions éditées, appelées les notres ou les leurs .

 Git Checkout --Ors Path / to / Conflict-File.html 

Il existe également de nombreuses applications d'outils de fusion pouvant aider avec cela. Kaleidoscope est un excellent pour Mac.

Gestion du projet et des émissions

Version control: Issues and problems

[dix] [dix]
Ne confondez pas de problèmes avec des problèmes: vous pouvez également utiliser l'étiquetage de problèmes pour des améliorations, des questions et des bogues

Il est tout aussi important qu'un développeur principal d'avoir un outil de gestion de projet pour gérer des éléments tels que des tâches et des bogues, en particulier lorsque vos développeurs ne sont pas basés sur des bureaux. Il existe de nombreuses solutions, telles que Zenhub et Asuna, mais je crois que le système intégré de GitHub's intégré est le meilleur.

Vous pouvez faire des choses comme configurer un nouveau projet, créer des cartes ou attribuer des problèmes. Et ne vous contentez pas de confondre des problèmes avec des problèmes: vous pouvez également l'utiliser pour des améliorations, des questions et des bogues, entre autres.

Voici quelques-unes de ses meilleures caractéristiques:

  • Système de marquage intégré: Vous permet d'organiser et de hiérarchiser votre flux de travail et de rechercher facilement des projets pour des informations pertinentes.
  • Jalons: Parfait pour associer des problèmes avec des caractéristiques spécifiques ou des phases de projet, tels que des bogues à fixer avant que le lancement ou des tâches bêta soient achevé en octobre.
  • Multi assignations: Les problèmes peuvent être attribués aux utilisateurs en vrac, à l'enregistrement et à vous rendre plus efficace.
  • Commentaire: Les ingénieurs et les équipes de gestion peuvent facilement discuter des progrès et des résultats à chaque étape du processus d'utilisation du système de commentaire intégré.
  • Listes de tâches: Des problèmes plus importants peuvent être décomposés en étapes pour décourager la création de dizaines de problèmes microscopiques, en gardant tout votre travail au même endroit.
  • Format de marquage: La capacité d'utiliser le formatage de marquage sera populaire auprès de vos développeurs et il peut être utilisé dans la plupart des endroits autour de GitHub.
  • Boards de projet: Ceux-ci peuvent être utilisés pour héberger des problèmes, tirer des demandes et des notes, les classer comme des cartes dans des colonnes de votre choix afin que vous puissiez regarder des projets plus importants dans son ensemble.
  • Haute sécurité: Vous pouvez faire confiance à Github pour protéger vos données et il est plus difficile de violer que la plupart des autres systèmes de gestion de projet.

Mettre en place un projet

Si vous allez à Github, puis dirigez-vous vers l'un de vos référentiels, vous verrez un onglet appelé projets. De là, vous pouvez sélectionner un nouveau projet, configurer vos coordonnées de votre projet et créer un nouveau modèle de projet.

Si vous sélectionnez maintenant l'onglet Problèmes qui se trouve le long du haut et sélectionnez Nouveau problème, vous pourrez créer un nouveau problème. Vous pouvez ensuite appliquer diverses étiquettes - ce sont des choses telles que des bugs, une amélioration, des questions et duplicata. Vous pouvez également utiliser une amélioration pour une nouvelle fonctionnalité ou une nouvelle demande. Vous pouvez ensuite attribuer divers membres de l'équipe à la tâche, un jalon et le projet que vous venez de créer.

Les membres assignés auront alors une liste de toutes leurs tâches et vous pouvez même utiliser la carte de projet pour garder une trace de ce qui est en cours de construction. Si vous vous souvenez de notre didacticiel antérieur, nous parlions de bouger des billets pour sprint arriétrole et validation. Donc, GitHub fonctionne très bien comme un outil tout-en-un pour superviser un projet.

Cet article a été publié à l'origine dans le numéro 311 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Achetez le numéro 311 ici ou S'abonner ici .

Articles Liés:

  • Comment réussir en tant que développeur indépendant
  • Développer des composants réactifs réutilisables
  • 4 conseils pour développer vos compétences de développeur
[dix] [dix]
[dix]

Comment - Most Popular Articles

22 meilleurs outils de conception UI

Comment Sep 15, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: invision) [DIX] UNE Sélection des Meilleu..


Stockage en nuage pour photos et images: Comment choisir le meilleur nuage pour votre travail

Comment Sep 15, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Getty Images) [DIX] Le Stockage En Nuage O..


Obtenez plus de graphite avec ces conseils

Comment Sep 15, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Au cours des Trois des Trois Dernières Années, J'utilise Graphite Comme M..


Exporter des animations après les effets sur HTML5

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] L'animation sur le Web est là pour rester. C'est dans tout, des mouvements s..


Créer un texte 3D dans Photoshop: un guide étape par étape

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Dans ce tutoriel, nous vous montrerons comment créer un morceau de ..


Scatter des arbres avec V-ray

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Ajout de détails à votre scène est toujours le moyen d'aller quand vous vo..


Commencez avec la rouille

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Page 1 ..


Comment créer des cheveux dans le cinéma 4D

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Inspiré par l'art de personnage fantastique de Carlos Ortega Elizalde et Loi..


Catégories