Article original : How to Use Replit – A Beginner's Guide
Replit est un IDE en ligne gratuit et populaire que vous pouvez utiliser pour créer vos projets avec très peu de configuration. Cet éditeur supporte plus de 50 langues et est utilisé par de nombreux cours de programmation, y compris freeCodeCamp.
Dans cet article, je vais vous montrer comment commencer avec Replit et vous montrer comment utiliser beaucoup de fonctionnalités de base.
Voici une liste des sujets abordés dans l'article :
- Comment créer un compte Replit gratuit
- Qu'est-ce qu'un Repl et comment en créer un ?
- Fonctionnalités de base de l'éditeur Replit
- Fichiers et dossiers Replit
- Contrôle de version dans Replit
- Débogueur Replit
- Comment installer des packages dans Replit
- Secrets (Variables d'environnement) dans Replit
- Comment personnaliser les paramètres Replit
- Base de données Replit
- Comment ajouter des tests unitaires dans Replit
- Comment utiliser le bouton run dans Replit
- Comment effacer la console dans Replit
- Qu'est-ce que la console shell Replit ?
- Comment ajouter un domaine personnalisé dans Replit
- Comment publier votre projet dans Replit
- Comment partager les URLs de projet Replit
- Comment inviter d'autres personnes à éditer vos repls
- Qu'est-ce qui est inclus avec l'abonnement payant Replit ?
Comment créer un compte Replit gratuit
Pour commencer, vous devrez d'abord aller sur la page d'accueil de Replit. Dans le coin supérieur droit, cliquez sur S'inscrire.
Vous pouvez créer un compte avec votre propre nom d'utilisateur, email et mot de passe. Ou vous pouvez créer un compte en utilisant votre compte Google, Facebook ou GitHub.
Une fois connecté, vous devriez être redirigé vers la page d'accueil de votre compte.
Qu'est-ce qu'un Repl et comment en créer un ?
Repl signifie read-eval-print loop et c'est un environnement de programmation interactif pour les développeurs afin de créer de petits projets.
Dans Replit, il y a trois endroits où vous pouvez créer un nouveau repl.
Une façon est de cliquer sur le bouton Create Repl situé dans le coin supérieur gauche de la page d'accueil.
Vous pouvez également créer un repl en cliquant sur l'icône + sous la section Create.
La dernière option est de cliquer sur l'icône + située dans le coin supérieur droit.
Ensuite, vous pouvez choisir parmi l'un des nombreux modèles de Replit, y compris Python, Node, Java, HTML & CSS, Ruby, et plus encore.
Une fois que vous avez choisi votre langue, donnez un nom à votre projet.
Pour la version gratuite de Replit, vous n'êtes pas autorisé à créer des projets privés. Si vous voulez un repl privé, vous devrez passer à l'abonnement payant.
Une fois que vous avez nommé votre repl, cliquez sur le bouton bleu Create Repl.
Ensuite, vous devriez être redirigé vers l'éditeur.
Fonctionnalités de base de l'éditeur Replit
Dans cette section, je vais passer en revue certaines des fonctionnalités de base que vous pouvez utiliser dans l'éditeur Replit. Ces fonctionnalités incluent un débogueur, des fichiers et dossiers, le contrôle de version, des tests unitaires, et plus encore.
Fichiers et dossiers Replit
Dans le coin supérieur gauche, vous pouvez cliquer sur l'icône de fichier pour ajouter des fichiers et des dossiers à votre projet.
Pour ajouter un fichier, cliquez sur l'icône Ajouter un fichier.
Pour ajouter un dossier, cliquez sur l'icône Ajouter un dossier.
Si vous souhaitez télécharger des fichiers ou des dossiers depuis votre ordinateur, cliquez sur l'icône des trois points verticaux.
Si vous devez supprimer des fichiers ou des dossiers, cliquez sur l'icône des trois points située à côté du fichier que vous souhaitez supprimer. Ensuite, choisissez l'option de suppression.
Vous pouvez également faire un clic droit sur le fichier et vous devriez voir la liste des options.
Contrôle de version dans Replit
Vous avez également la possibilité de vous connecter à votre compte GitHub et de créer un dépôt pour ce projet. Au moment de la rédaction de cet article, cette fonctionnalité est actuellement en version bêta.
Cliquez d'abord sur l'icône de contrôle de version située sur le côté gauche de la page de l'éditeur.
Vous devriez alors voir une option pour vous connecter à votre compte GitHub.
Vous serez invité à accorder à Replit la permission de créer de nouveaux dépôts sur GitHub.
Entrez vos informations de connexion pour GitHub.
Si vous avez plusieurs comptes liés à votre profil, choisissez le compte où vous souhaitez installer Replit.
Vous devrez ensuite autoriser Replit à s'installer.
Après avoir installé et autorisé Replit, vous devriez être redirigé vers l'éditeur Replit.
Maintenant, tous nos changements seront suivis et nous pourrons pousser ces changements vers GitHub. Écrivez un court message de commit et cliquez sur le bouton Commit & push.
Vous devriez voir tous vos messages de commit dans le panneau de contrôle de version.
Ensuite, cliquez sur le bouton Connect to GitHub pour pouvoir créer un nouveau dépôt.
Vous pouvez ajouter une description pour le dépôt, puis cliquez sur le bouton Create GitHub repository.
Une fois créé, vous devriez voir le nom du dépôt dans le panneau de contrôle de version.
Vous pouvez également voir votre nouveau dépôt dans GitHub.
Débogueur Replit
L'éditeur Replit dispose d'un outil de débogage, où vous pouvez parcourir votre code étape par étape pour voir ce qui se passe et corriger les erreurs. Il s'agit également d'une fonctionnalité bêta.
Vous pouvez trouver cette fonctionnalité sur le côté gauche de la page de l'éditeur.
Comment installer des packages dans Replit
Vous pouvez également installer différents packages dans vos projets comme morgan, express ou cors en utilisant le panneau Packages situé sur le côté gauche de la page de l'éditeur.
Recherchez le package que vous souhaitez utiliser et cliquez sur l'icône + pour l'installer dans votre projet.
Dans la console, située sur le côté droit de l'écran, vous devriez voir le package en cours d'installation.
Secrets (Variables d'environnement) dans Replit
Replit ne supporte plus la création de fichiers .env.
Au lieu de cela, vous devrez utiliser l'onglet Secrets pour stocker vos variables d'environnement. Vous pouvez trouver cette icône Secrets sur le côté gauche de la page de l'éditeur.
Vous écrirez le nom de votre clé dans le champ de saisie Key et la valeur dans le champ de saisie Value. Ensuite, cliquez sur Add new secret.
Vous devriez alors voir votre nouvelle variable d'environnement dans l'onglet Secrets.
Si vous devez modifier cette variable, survolez le nom de la variable avec votre souris et cliquez sur l'icône du crayon.
Maintenant, vous devriez pouvoir utiliser cette variable d'environnement dans votre code.
Comment personnaliser les paramètres Replit
Si vous devez personnaliser les paramètres de l'éditeur pour votre projet, cliquez sur l'icône des paramètres située sur le côté gauche de la page de l'éditeur.
Base de données Replit
Si vous souhaitez utiliser le stockage clé-valeur de Replit, cliquez sur l'icône de la base de données située sur le côté gauche de la page de l'éditeur.
Pour en savoir plus sur l'utilisation de la base de données Replit, veuillez consulter la documentation.
Comment ajouter des tests unitaires dans Replit
Si vous devez ajouter des tests unitaires à votre projet, cliquez sur l'icône des tests unitaires située sur le côté gauche de la page de l'éditeur.
Ensuite, cliquez sur le bouton Add test.
Ensuite, vous pouvez créer vos tests unitaires en fournissant un nom, le code et un message d'échec. Cliquez sur sauvegarder lorsque vous avez terminé.
Voici une capture d'écran utilisant les tests unitaires d'exemple de Replit pour l'addition de deux nombres :
Ensuite, cliquez sur le bouton Run tests.
Dans la console, vous verrez les tests en cours d'exécution avec les résultats.
Comment utiliser le bouton run dans Replit
Si vous souhaitez démarrer le serveur pour votre projet, cliquez sur le bouton vert Run situé en haut de la page de l'éditeur.
Lorsque vous cliquez sur le bouton Run, vous devriez voir les résultats de votre code dans la fenêtre de prévisualisation et la console situées sur le côté droit de la page de l'éditeur.
Comment effacer la console dans Replit
Si vous devez effacer la console, cliquez sur l'icône x située sur le côté droit de la fenêtre de la console.
Qu'est-ce que la console shell Replit ?
Si vous devez taper des commandes, comme supprimer ou ajouter des dossiers, vous pouvez utiliser la console Shell.
Comment ajouter un domaine personnalisé dans Replit
Dans l'éditeur de prévisualisation, vous pouvez ajouter un domaine personnalisé pour votre projet. Cliquez sur l'icône du crayon à côté de l'URL de prévisualisation.
Ensuite, vous pouvez ajouter votre domaine personnalisé et les informations CNAME :
Comment publier votre projet dans Replit
Une fois que vous avez terminé de créer votre projet, vous pouvez le publier et l'afficher dans la collection des applications Replit.
Cliquez d'abord sur le nom du projet, situé dans le coin supérieur gauche.
Ensuite, vous pouvez fournir une courte description du projet et cliquer sur Publish.
Vous aurez ensuite la possibilité de fournir une description, une image de couverture et des informations sur les tags. Lorsque vous avez terminé, cliquez sur le bouton publish.
Si vous souhaitez publier une mise à jour, vous pouvez cliquer sur votre projet, puis cliquer sur Publish update.
Si vous devez dépublier votre projet, cliquez sur l'icône des trois points à droite de la page de publication et choisissez l'option unpublish.
Comment partager les URLs de projet Replit
Si vous souhaitez partager l'URL de votre projet, vous devrez d'abord cliquer sur le bouton vert Run, suivi du bouton Open in new tab situé dans la fenêtre de prévisualisation.
Ensuite, vous devriez voir votre page dans un nouvel onglet.
Si vous souhaitez partager votre URL contenant l'éditeur et la fenêtre de prévisualisation, utilisez le lien trouvé en haut du navigateur.
Si vous visitez le lien, vous devriez voir ce résultat :
Si vous avez besoin d'aide sur un projet et que vous souhaitez que d'autres développeurs voient votre code et vos fichiers, vous pouvez partager ce lien de navigateur. Les autres ne pourront pas voir vos variables d'environnement lorsque vous partagez votre projet.
Comment inviter d'autres personnes à éditer vos repls
Replit dispose d'une fonctionnalité où vous pouvez inviter d'autres développeurs à rejoindre votre projet et à éditer le code.
Cliquez d'abord sur le bouton Invite situé en haut à droite de la page de l'éditeur.
Dans le champ de recherche, vous pouvez ajouter des utilisateurs de replit ou ajouter les adresses e-mail de ceux que vous souhaitez inviter.
Ensuite, cliquez sur le bouton bleu Invite pour envoyer des invitations aux utilisateurs.
Vous verrez que leur invitation est en attente.
Vous pouvez également envoyer un lien de participation à l'utilisateur que vous souhaitez ajouter au projet. Cliquez sur le bouton Generate a join link situé en bas.
Si vous devez supprimer des utilisateurs invités, cliquez sur l'icône x située à côté de leur nom.
Qu'est-ce qui est inclus avec l'abonnement payant Replit ?
Le niveau d'abonnement payant Hacker offre plus de mémoire, de stockage, de vitesse et des repls privés.
Le niveau d'abonnement payant Teams offre des projets éducatifs pour les étudiants et les enseignants.
Pour en savoir plus, veuillez visiter la page des tarifs de Replit.
J'espère que vous avez apprécié ce guide de démarrage Replit et bonne chance dans votre parcours de développeur.