Commencer à utiliser les référentiels de CodeCatalyst sources et le plan d'application d'une seule page

Suivez les étapes de ce didacticiel pour apprendre à utiliser les référentiels de sources sur Amazon CodeCatalyst.

Le moyen le plus rapide de commencer à travailler avec les référentiels de sources sur Amazon CodeCatalyst est de créer un projet à l'aide d'un modèle. Lorsque vous créez un projet à l'aide d'un modèle, des ressources sont créées pour vous, notamment un référentiel de sources contenant un exemple de code. Vous pouvez utiliser ce référentiel et cet exemple de code pour apprendre à :

• Afficher les référentiels sources d'un projet et parcourir leur contenu

• Créez un environnement de développement avec une nouvelle branche dans laquelle vous pouvez travailler sur le code

• Modifiez un fichier, validez et publiez vos modifications

• Créez une pull request et passez en revue les modifications apportées au code avec les autres membres du projet

• Consultez le flux de travail de votre projet : créez et testez automatiquement les modifications dans la branche source de la pull request

• Fusionnez vos modifications de votre branche source dans la branche de destination et fermez la pull request

• Découvrez les modifications fusionnées créées et déployées automatiquement

Pour tirer le meilleur parti de ce didacticiel, invitez d'autres personnes à rejoindre votre projet afin de pouvoir travailler ensemble sur une pull request. Vous pouvez également explorer des fonctionnalités supplémentaires dans CodeCatalyst, telles que la création de problèmes et leur association à une pull request, ou la configuration de notifications et la réception d'alertes lorsque le flux de travail associé s'exécute. Pour une exploration complète de CodeCatalyst, voirTutoriels de mise en route.

Création d'un projet à l'aide d'un plan

La création d'un projet est la première étape pour pouvoir travailler ensemble. Vous pouvez utiliser un plan pour créer votre projet, qui créera également un référentiel source avec un exemple de code et un flux de travail qui créera et déploiera automatiquement votre code lorsque vous le modifiez. Dans ce didacticiel, nous allons vous présenter un projet créé à l'aide du plan d'application d'une seule page, mais vous pouvez suivre les procédures de tout projet comportant un référentiel source. Assurez-vous de choisir un IAM rôle ou d'en ajouter un IAM si vous n'en avez pas un lors de la création du projet. Nous vous recommandons d'utiliser CodeCatalystWorkflowDevelopmentRole-spaceNamerôle de service pour ce projet.

Si vous avez déjà un projet, vous pouvez passer àAfficher les référentiels d'un projet.

Note

Seuls les utilisateurs dotés du rôle d'administrateur de l'espace ou d'utilisateur avancé peuvent créer des projets dans CodeCatalyst. Si vous n'avez pas ce rôle et que vous avez besoin d'un projet sur lequel travailler pour ce didacticiel, demandez à une personne possédant l'un de ces rôles de créer un projet pour vous et de vous ajouter au projet créé. Pour de plus amples informations, veuillez consulter Octroi d'accès avec des rôles d'utilisateur.

Pour créer un projet à l'aide d'un plan

1. Dans la CodeCatalyst console, accédez à l'espace dans lequel vous souhaitez créer un projet.

2. Sur le tableau de bord de l'espace, choisissez Créer un projet.

3. Choisissez Commencer par un plan.

   Astuce

   Vous pouvez choisir d'ajouter un plan en indiquant à Amazon Q les exigences de votre projet pour qu'Amazon Q vous suggère un plan. Pour plus d’informations, consultez Utiliser Amazon Q pour choisir un plan lors de la création d'un projet ou de l'ajout de fonctionnalités et Bonnes pratiques lors de l'utilisation d'Amazon Q pour créer des projets ou ajouter des fonctionnalités à l'aide de plans. Cette fonctionnalité n'est disponible que dans la région Ouest des États-Unis (Oregon).

   Cette fonctionnalité nécessite que les fonctionnalités d'IA génératives soient activées pour l'espace. Pour plus d'informations, consultez la section Gestion des fonctionnalités d'IA générative.

4. Dans l'onglet CodeCatalyst Blueprints ou Space Blueprints, choisissez un plan, puis cliquez sur Next.

5. Sous Nommer votre projet, entrez le nom que vous souhaitez attribuer à votre projet et les noms de ressources associés. Le nom doit être unique dans votre espace.

6. (Facultatif) Par défaut, le code source créé par le plan est stocké dans un CodeCatalyst référentiel. Vous pouvez également choisir de stocker le code source du plan dans un référentiel tiers. Pour de plus amples informations, veuillez consulter Ajoutez des fonctionnalités aux projets avec des extensions dans CodeCatalyst.

   Important

   CodeCatalyst ne prend pas en charge la détection des modifications dans la branche par défaut pour les référentiels liés. Pour modifier la branche par défaut d'un dépôt lié, vous devez d'abord en dissocier CodeCatalyst, modifier la branche par défaut, puis la lier à nouveau. Pour de plus amples informations, veuillez consulter Lier GitHub les référentiels, les référentiels Bitbucket, les référentiels de GitLab projets et les projets Jira dans CodeCatalyst.

   Il est recommandé de toujours s'assurer que vous disposez de la dernière version de l'extension avant de lier un dépôt.

   Procédez de l'une des manières suivantes en fonction du fournisseur de référentiel tiers que vous souhaitez utiliser :

   • GitHub référentiels : connectez un GitHub compte.

     Choisissez le menu déroulant Avancé, choisissez GitHub comme fournisseur de référentiel, puis choisissez le GitHub compte sur lequel vous souhaitez stocker le code source créé par le plan.

     Note

     Si vous connectez un GitHub compte, vous devez créer une connexion personnelle pour établir un mappage d'identité entre votre CodeCatalyst identité et votre GitHub identité. Pour plus d’informations, consultez Connexions personnelles et Accès aux GitHub ressources par le biais de connexions personnelles.

   • Référentiels Bitbucket : connectez un espace de travail Bitbucket.

     Choisissez le menu déroulant Avancé, choisissez Bitbucket comme fournisseur de référentiel, puis choisissez l'espace de travail Bitbucket dans lequel vous souhaitez stocker le code source créé par le plan.

   • GitLab référentiels : Connectez un GitLab utilisateur.

     Choisissez le menu déroulant Avancé, choisissez GitLab comme fournisseur de référentiel, puis choisissez l' GitLab utilisateur dans lequel vous souhaitez stocker le code source créé par le plan.

7. Sous Ressources du projet, configurez les paramètres du plan. Selon le plan, vous pouvez avoir la possibilité de nommer le nom du référentiel source.

8. (Facultatif) Pour afficher les fichiers de définition mis à jour en fonction des paramètres de projet sélectionnés, choisissez Afficher le code ou Afficher le flux de travail dans Générer un aperçu du projet.

9. (Facultatif) Choisissez Afficher les détails sur la fiche du plan pour afficher des détails spécifiques sur le plan, tels qu'un aperçu de l'architecture du plan, les connexions et autorisations requises, ainsi que le type de ressources créé par le plan.

10. Sélectionnez Create a project (Créer un projet).

La page d'aperçu du projet s'ouvre dès que vous créez un projet ou que vous acceptez une invitation à participer à un projet et que vous terminez le processus de connexion. La page de présentation d'un nouveau projet ne contient aucun problème en suspens ni aucune pull request. Vous pouvez éventuellement choisir de créer un problème et de vous l'attribuer. Vous pouvez également choisir d'inviter quelqu'un d'autre à rejoindre votre projet. Pour plus d’informations, consultez Création d'un problème dans CodeCatalyst et Inviter un utilisateur à participer à un projet.

Afficher les référentiels d'un projet

En tant que membre d'un projet, vous pouvez consulter les référentiels sources du projet. Vous pouvez également choisir de créer des référentiels supplémentaires. Si une personne ayant le rôle d'administrateur d'espace a installé et configuré les GitHub référentiels, les référentiels Bitbucket ou l'extension de GitLab référentiels, vous pouvez également ajouter des liens vers des référentiels tiers dans les GitHub comptes, les espaces de travail Bitbucket ou les utilisateurs configurés pour l'extension. GitLab Pour plus d’informations, consultez Création d'un référentiel source et Démarrage rapide : installation d'extensions, connexion de fournisseurs et liaison de ressources dans CodeCatalyst.

Note

Pour les projets créés avec le plan d'application d'une seule page, le nom par défaut du référentiel source contenant l'exemple de code est spa-app.

Pour accéder aux référentiels sources d'un projet

1. Accédez à votre projet, puis effectuez l'une des opérations suivantes :

   • Sur la page de résumé de votre projet, choisissez le référentiel souhaité dans la liste, puis choisissez Afficher le référentiel.

   • Dans le volet de navigation, choisissez Code, puis sélectionnez Référentiels sources. Dans Référentiels sources, choisissez le nom du référentiel dans la liste. Vous pouvez filtrer la liste des référentiels en saisissant une partie du nom du référentiel dans la barre de filtre.

2. Sur la page d'accueil du référentiel, consultez le contenu du référentiel et les informations sur les ressources associées, telles que le nombre de pull requests et les flux de travail. Par défaut, le contenu de la branche par défaut est affiché. Vous pouvez modifier l'affichage en choisissant une autre branche dans la liste déroulante.

La page de présentation du référentiel inclut des informations sur les flux de travail et les pull requests configurés pour les branches de ce référentiel et ses fichiers. Si vous venez de créer le projet, les flux de travail initiaux pour créer, tester et déployer le code seront toujours en cours d'exécution, car leur exécution prend quelques minutes. Vous pouvez consulter les flux de travail associés et leur statut en choisissant le numéro sous Flux de travail associés, mais cela ouvre la page Flux de travail dans CI/CD. Pour ce didacticiel, restez sur la page de présentation et explorez le code du référentiel. Le contenu du README.md fichier est affiché sur cette page, sous les fichiers du référentiel. Dans Fichiers, le contenu de la branche par défaut est affiché. Vous pouvez modifier l'affichage du fichier pour afficher le contenu d'une autre branche si vous en avez une. Le .codecatalyst dossier contient le code utilisé pour d'autres parties du projet, tels que les YAML fichiers de flux de travail.

Pour afficher le contenu des dossiers, cliquez sur la flèche située à côté du nom du dossier pour le développer. Par exemple, cliquez sur la flèche à côté src pour afficher les fichiers de l'application Web d'une seule page contenue dans ce dossier. Pour afficher le contenu d'un fichier, sélectionnez ce dernier dans la liste. Cela ouvre la fenêtre Afficher les fichiers, dans laquelle vous pouvez parcourir le contenu de plusieurs fichiers. Vous pouvez également modifier des fichiers uniques dans la console, mais pour modifier plusieurs fichiers, vous devez créer un environnement de développement.

Création d'un environnement de développement

Vous pouvez ajouter et modifier des fichiers dans un référentiel source dans la CodeCatalyst console Amazon. Toutefois, pour travailler efficacement avec plusieurs fichiers et branches, nous vous recommandons d'utiliser un environnement de développement ou de cloner le référentiel sur votre ordinateur local. Dans ce didacticiel, nous allons créer un AWS Cloud9 environnement de développement avec une branche nomméedevelop. Vous pouvez choisir un autre nom de branche, mais en nommant la branchedevelop, un flux de travail s'exécutera automatiquement pour générer et tester votre code lorsque vous créerez une pull request plus loin dans ce didacticiel.

Astuce

Si vous décidez de cloner un dépôt localement au lieu ou en plus d'utiliser un environnement de développement, assurez-vous que Git est installé sur votre ordinateur local ou que Git IDE y est inclus. Pour de plus amples informations, veuillez consulter Configuration pour travailler avec les référentiels sources.

Pour créer un environnement de développement avec une nouvelle branche

1. Ouvrez la CodeCatalyst console à l'adresse https://codecatalyst.aws/.

2. Accédez au projet dans lequel vous souhaitez créer un environnement de développement.

3. Choisissez le nom du référentiel dans la liste des référentiels sources du projet. Dans le volet de navigation, vous pouvez également choisir Code, choisir Référentiels sources et choisir le référentiel pour lequel vous souhaitez créer un environnement de développement.

4. Sur la page d'accueil du référentiel, choisissez Create Dev Environment.

5. Choisissez un support dans le IDE menu déroulant. Pour plus d’informations, consultez Environnements de développement intégrés pris en charge pour les environnements de développement.

6. Choisissez le référentiel à cloner, choisissez Travailler dans une nouvelle branche, entrez le nom de la branche dans le champ Nom de la branche et choisissez une branche à partir de laquelle créer la nouvelle branche dans le menu déroulant Créer une branche depuis.

7. Ajoutez éventuellement un alias pour l'environnement de développement.

8. Vous pouvez éventuellement cliquer sur le bouton d'édition de la configuration de l'environnement de développement pour modifier la configuration de calcul, de stockage ou de temporisation de l'environnement de développement.

9. Sélectionnez Create (Créer). Pendant la création de votre environnement de développement, la colonne d'état de l'environnement de développement affichera Démarrage, et la colonne d'état affichera En cours d'exécution une fois l'environnement de développement créé. Un nouvel onglet s'ouvrira avec votre environnement de développement dans celui IDE de votre choix. Vous pouvez modifier le code, valider et appliquer vos modifications.

Une fois que vous avez créé l'environnement de développement, vous pouvez modifier des fichiers, valider vos modifications et les transférer vers la test branche. Pour ce didacticiel, modifiez le contenu entre les <p> balises du App.tsx fichier du src dossier afin de modifier le texte affiché sur la page Web. Validez et validez votre modification, puis revenez à l' CodeCatalyst onglet.

Pour apporter et appliquer un changement à partir d'un environnement AWS Cloud9 de développement

1. Dans AWS Cloud9, développez le menu de navigation latéral pour parcourir les fichiers. srcDéveloppez et ouvrezApp.tsx.

2. Modifiez le texte à l'intérieur des <p> balises.

3. Enregistrez le fichier, puis validez et appliquez vos modifications à l'aide du menu Git. Vous pouvez également, dans la fenêtre du terminal, valider et appliquer vos modifications à l'aide git commit des git push commandes et.

   git commit -am "Making an example change"
   git push

   Astuce

   Vous devrez peut-être remplacer les répertoires du terminal par le répertoire du référentiel Git avant de pouvoir exécuter correctement les commandes Git.

Création d'une demande d'extraction

Vous pouvez utiliser des pull requests pour examiner les modifications de code de manière collaborative afin de détecter des modifications ou des correctifs mineurs, des ajouts de fonctionnalités majeures ou de nouvelles versions de vos logiciels publiés. Dans ce didacticiel, vous allez créer une pull request pour examiner les modifications que vous avez apportées au test branche par rapport à la branche principale. La création d'une pull request dans un projet créé à l'aide d'un modèle lancera également l'exécution des flux de travail associés, le cas échéant.

Pour créer une pull request

1. Accédez à votre projet.

2. Effectuez l’une des actions suivantes :

   • Dans le volet de navigation, choisissez Code, choisissez Pull requests, puis Create pull request.

   • Sur la page d'accueil du référentiel, choisissez Plus, puis Create pull request.

   • Sur la page du projet, choisissez Create pull request.

3. Dans le référentiel source, assurez-vous que le référentiel source spécifié est celui qui contient le code validé. Cette option n'apparaît que si vous n'avez pas créé la pull request depuis la page principale du dépôt.

4. Dans Branche de destination, choisissez la branche dans laquelle vous souhaitez fusionner le code une fois celui-ci révisé.

5. Dans Branche source, choisissez la branche qui contient le code validé.

6. Dans Titre de la demande d'extraction, entrez un titre qui aide les autres utilisateurs à comprendre ce qui doit être revu et pourquoi.

7. (Facultatif) Dans la description de la Pull request, fournissez des informations telles qu'un lien vers les problèmes ou une description de vos modifications.

   Astuce

   Vous pouvez choisir Write description for me afin de générer CodeCatalyst automatiquement une description des modifications contenues dans la pull request. Vous pouvez apporter des modifications à la description générée automatiquement après l'avoir ajoutée à la pull request.

   Cette fonctionnalité nécessite que les fonctionnalités d'IA générative soient activées pour l'espace et ne sont pas disponibles pour les pull requests dans les référentiels liés. Pour plus d'informations, consultez la section Gestion des fonctionnalités d'IA générative.

8. (Facultatif) Dans Problèmes, choisissez Lier les problèmes, puis choisissez un problème dans la liste ou entrez son ID. Pour dissocier un problème, cliquez sur l'icône de dissociation.

9. (Facultatif) Dans Réviseurs obligatoires, sélectionnez Ajouter les réviseurs requis. Choisissez parmi la liste des membres du projet pour les ajouter. Les réviseurs requis doivent approuver les modifications avant que la pull request puisse être fusionnée dans la branche de destination.

   Note

   Vous ne pouvez pas ajouter un réviseur à la fois comme réviseur obligatoire et comme réviseur facultatif. Vous ne pouvez pas vous ajouter en tant que réviseur.

10. (Facultatif) Dans Réviseurs facultatifs, sélectionnez Ajouter des réviseurs facultatifs. Choisissez parmi la liste des membres du projet pour les ajouter. Les réviseurs facultatifs n'ont pas à approuver les modifications comme condition préalable pour que la pull request puisse être fusionnée dans la branche de destination.

11. Passez en revue les différences entre les branches. La différence affichée dans une pull request réside dans les modifications entre la révision dans la branche source et la base de fusion, qui est le commit principal de la branche de destination au moment de la création de la pull request. Si aucune modification ne s'affiche, il se peut que les branches soient identiques ou que vous ayez choisi la même branche pour la source et pour la destination.

12. Lorsque vous êtes certain que la pull request contient le code et les modifications que vous souhaitez vérifier, choisissez Create.

    Note

    Après avoir créé la pull request, vous pouvez ajouter des commentaires. Des commentaires peuvent être ajoutés à la pull request ou à des lignes individuelles des fichiers, ainsi qu'à la pull request globale. Vous pouvez ajouter des liens vers des ressources, telles que des fichiers, en utilisant le signe @ suivi du nom du fichier.

Vous pouvez consulter les informations relatives aux flux de travail associés lancés par la création de cette pull request en choisissant Vue d'ensemble, puis en consultant les informations dans la zone des détails de la demande d'extraction sous Exécutions du flux de travail. Pour afficher le flux de travail exécuté, choisissez l'exécution.

Astuce

Si vous avez donné un autre nom à votre branchedevelop, aucun flux de travail ne s'exécutera automatiquement pour créer et tester vos modifications. Si vous souhaitez configurer cela, modifiez le YAML fichier du onPullRequestBuildAndTestflux de travail. Pour de plus amples informations, veuillez consulter Création d'un flux de travail.

Vous pouvez commenter cette pull request et demander aux autres membres du projet de le faire. Vous pouvez également choisir d'ajouter ou de modifier des réviseurs facultatifs ou obligatoires. Vous pouvez choisir d'apporter d'autres modifications à la branche source du référentiel et voir comment ces modifications validées créent des révisions pour la pull request. Pour plus d'informations, reportez-vous aux Mettre à jour une pull request sectionsRévision d'une pull request,Révision du code avec des pull requests sur Amazon CodeCatalyst, etAfficher le statut et les détails de l'exécution du flux de travail.

Fusion d'une pull request

Une fois qu'une pull request a été examinée et qu'elle a reçu les approbations des réviseurs requis, vous pouvez fusionner sa branche source avec la branche de destination dans la CodeCatalyst console. La fusion d'une pull request lancera également une série de modifications via tous les flux de travail associés à la branche de destination. Dans ce didacticiel, vous allez fusionner la branche de test avec la branche principale, ce qui lancera une exécution du onPushToMainDeployPipelineflux de travail.

Pour fusionner une pull request (console)

1. Dans Pull requests, choisissez la pull request que vous avez créée à l'étape précédente. Dans la pull request, choisissez Merge.

2. Choisissez parmi les stratégies de fusion disponibles pour la pull request. Sélectionnez ou désélectionnez éventuellement l'option permettant de supprimer la branche source après avoir fusionné la pull request, puis choisissez Merge. Une fois la fusion terminée, le statut de la pull request passe à Merged et n'apparaît plus dans la vue par défaut des pull requests. La vue par défaut affiche les pull requests dont le statut est Ouvert. Vous pouvez toujours consulter une pull request fusionnée, mais vous ne pouvez pas l'approuver ni modifier son statut.

   Note

   Si le bouton Fusionner n'est pas actif ou si le libellé Non fusionnable s'affiche, cela signifie que le réviseur requis n'a pas encore approuvé la pull request ou que la pull request ne peut pas être fusionnée dans la CodeCatalyst console. Un réviseur qui n'a pas approuvé une pull request est indiqué par une icône en forme d'horloge dans la section Vue d'ensemble, dans la zone des détails de la pull request. Si tous les réviseurs requis ont approuvé la pull request mais que le bouton Fusionner n'est toujours pas actif, il se peut que vous rencontriez un conflit de fusion ou que vous ayez dépassé le quota de stockage pour l'espace. Vous pouvez résoudre les conflits de fusion pour la branche de destination dans un environnement de développement, appliquer les modifications, puis fusionner la pull request, ou vous pouvez résoudre les conflits et fusionner localement, puis transférer le commit contenant la fusion vers CodeCatalyst. Pour plus d'informations, consultez Fusion d'une pull request (Git) votre documentation Git.

Afficher le code déployé

Il est maintenant temps de consulter le code initialement déployé qui se trouvait dans la branche par défaut, ainsi que les modifications que vous avez fusionnées une fois qu'elles ont été automatiquement créées, testées et déployées. Pour ce faire, vous pouvez revenir à la page d'aperçu du référentiel et choisir le numéro à côté de l'icône des flux de travail associés, ou dans le volet de navigation, choisir CI/CD, puis choisir Workflows.

Pour afficher le code déployé

1. Dans Workflows, dansonPushToMainDeployPipeline, développez Recent runs.

   Note

   Il s'agit du nom par défaut du flux de travail pour les projets créés avec le plan d'application d'une seule page.

2. L'exécution la plus récente est celle lancée par la validation de votre pull request fusionnée dans la main branche et affichera probablement le statut En cours. Choisissez une exécution terminée avec succès dans la liste pour afficher les détails de cette exécution.

3. Choisissez Variables. Copiez la valeur pour App URL. Il s'agit de URL l'application Web à page unique déployée. Ouvrez un nouvel onglet de navigateur et collez la valeur pour afficher le code créé et déployé. Laissez l'onglet ouvert.

4. Revenez à la liste des exécutions du flux de travail et attendez que l'exécution la plus récente soit terminée. Lorsque c'est le cas, retournez à l'onglet que vous avez ouvert pour afficher l'application Web et actualiser votre navigateur. Vous devriez voir les modifications que vous avez apportées dans votre pull request fusionnée.

Nettoyage des ressources

Une fois que vous aurez exploré l'utilisation d'un référentiel source et d'une pull request, vous souhaiterez peut-être supprimer les ressources dont vous n'avez pas besoin. Vous ne pouvez pas supprimer les pull requests, mais vous pouvez les fermer. Vous pouvez supprimer toutes les branches que vous avez créées.

Si vous n'avez plus besoin du référentiel source ou du projet, vous pouvez également supprimer ces ressources. Pour plus d’informations, consultez Supprimer un référentiel source et Suppression d’un projet.