Replit
Replit est un éditeur de code en ligne et gratuit. Il permet d’écrire et d’exécuter du code sans avoir à installer d’IDE (environnement de développement).
Sur cette page tu trouveras:
Créer et retrouver ses projets
Sur Replit, un projet s’appelle « Repl ». Tu vas te familiariser avec ce mot pour te retrouver facilement dans ton interface.
Créer un nouveau projet
Une fois connecté à ton compte Replit, en ouvrant le menu à gauche, tu peux créer un nouveau projet en cliquant sur le bouton « Create Repl ».
Note : on peut afficher / masquer le menu de gauche avec l’icône entourée en rouge sur l’image ci-contre.
Choisis un template allant avec le langage de programmation que nous souhaitons coder. Par exemple, html / css ou python ou encore flask.
Donne ensuite un nom à ton projet
Valide en cliquant sur le bouton « Create Repl » !
Le projet est créé, on peut alors commencer à coder !
Retrouver ses projets
Une fois connecté sur Replit, dans le menu à gauche, on peut sélectionner « My repls ».
Cela affiche alors tes projets, il te suffit de double-cliquer sur un projet pour l’ouvrir !
Note : il se peut que tu trouves également à cet endroit un dossier « Multiplayer Repls » ou « Unnamed ».
N’hésite pas à l’ouvrir, il se peut qu’il y ait aussi certains de tes projets à l’intérieur de ce dossier.
L’interface de Replit
Voici un aperçu de l’inteface de Replit. On peut y voir :
- Le nom du projet, précédé par le pseudo de la personne à qui ce projet appartient. On peut cliquer sur le nom du projet pour le renommer.
- Le menu de gauche, qui permet d’afficher :
- Les fichiers (1ère icône) – voir la partie Gestion des fichiers
- Les packages (3ème icône) – pour voir / installer des packages
- Les variables d’environnement (4ème icône)
- La partie centrale, où l’on écrit notre code
- L’aperçu du site web / de l’application que l’on est en train de créer. Il est vivement conseillé de ne pas se fier à cet aperçu et plutôt de cliquer sur la petite icône entourée en violet pour voir l’aperçu de son site / application dans un autre onglet !
- La console qui nous permet de voir comment se déroule l’exécution de notre code. Elle nous indique également les erreurs si il y en a et nous guide pour les trouver !
Travailler à plusieurs
Partager son projet
Pour que quelqu’un d’autre puisse accéder à ton projet, tu peux cliquer sur le bouton « Invite » en haut à droite puis générer un lien que tu pourras partager !
N’importe qui cliquant sur ce lien peut donc accéder à ton projet et travailler dessus.
Il est aussi possible d’inviter des personnes via leur pseudo replit ou leur adresse e-mail.
Faire une copie d’un projet
Pour que quelqu’un puisse facilement faire une copie de ton projet, partage simplement l’adresse qui s’affiche dans ta barre d’adresse lorsque tu travailles sur ton projet.
Lorsque quelqu’un d’autre que toi arrive sur cette adresse, il voit quelque chose qui ressemble à l’image ci-contre.
Il suffit alors de cliquer sur le bouton « Fork Repl ». C’est tout ! On a ainsi fait une copie du projet !
Note : Par défaut, les projets ainsi copiés sont rangés dans My Repls -> Multiplayer Repls
Utiliser plusieurs fichiers
Une dernière astuce pour travailler à plusieurs sur Replit : utiliser différents fichiers.
Chaque maker peut travailler sur un fichier différent, et on importera ces fichiers sur un seul et même projet par la suite.
Exemple :
Alice, Bob et Cédric souhaitent créer un jeu de bataille navale. Ils identifient différentes tâches à réaliser, différentes classes à créer…
- Alice s’occupera de la logique globale du jeu (chaque joueur joue son tour l’un après l’autre, durant son tour un joueur doit indiquer la case visée, l’ordinateur indique si c’est touché / coulé / raté)
- Bob s’occupe de la classe Grille qui correspond à une grille dans le jeu, avec ses fonctions : afficher la grille, mettre à jour la grille, etc.
- Cédric s’occupe de fonctions additionnelles que l’équipe a identifié : placer les bateaux, afficher les résultats…
Dans un premier temps Alice crée un projet et invite Bob et Cédric : ensemble, ils créent la base dont ils ont besoin pour commencer à travailler. Ensuite, Bob et Cédric font chacun une copie du projet : chacun a maintenant un projet sur lequel avancer, avec les mêmes bases !
Bob crée un fichier Grille.py qui contient sa classe Grille.
Cédric crée un fichier Fonctions.py et y ajoute les fonctions additionnelles requises.
Une fois que chaque maker a réalisé sa tâche, Bob et Cédric ajoutent leurs fichiers Grille.py et Fonctions.py via un glisser-déposer dans le projet d’Alice. Celle-ci n’a alors plus qu’à importer ces fichiers dans son code pour commencer à utiliser la classe Grille et les fonctions que Cédric a créé !
Gestion des fichiers
Sur ton projet Repl, tu peux cliquer sur l’icône de feuille pour afficher les fichiers de ton projet. Sur un projet Python, le fichier par défaut dans lequel on écrit du code est main.py
Tu peux importer de nouveaux fichiers simplement en glissant-déposant des fichiers dans cette zone !
Tu peux aussi créer un nouveau fichier / dossier en cliquant sur les icônes correspondantes (soulignées en orange sur l’image).
Quand tu crées un fichier, le type du fichier créé dépendra simplement de l’extension que tu précises : par exemple, si je souhaite créer une nouvelle page HTML, je peux créer un fichier qui s’appelle « newpage.html« .
Variables d’environnement
Créer une variable d’environnement
Les variables d’environnement servent à stocker des mots de passe de connexion, de manière à ce qu’ils ne soient pas visibles par tout le monde, c’est une sorte de fichier caché.
Pour créer des variables d’environnement :
Clique sur le petit cadenas
Puis écris le nom de ta variable dans le champs key et valeur dans value.
Utiliser une variable d’environnement
Une fois ta variable créé, il te faut ajouter la ligne import os ainsi que la ligne récupérant la variable d’environnement dans ton code.
Heureusement Replit t’affiche 2 boutons pour ajouter directement ces lignes dans ton code ! Assure-toi simplement qu’elle soient ajoutées au bon endroit.
Dans cet exemple, je récupère la valeur de ma variable d’environnement dans une variable que appelé « token » !
Tips : bug de replit
Il est possible que pendant ton activité, comme tout logiciel, replit puisse bugger. Qu’il n’affiche plus un projet exemple des ressources, le tien, ou celui d’un maker.
Voici quelques pistes pour t’aider à résoudre les principaux problèmes :
Redémarrer l’environnement d’exécution
Si c’est ton projet, (ou à conseiller à un maker), tu peux lancer la commande kill 1 dans le shell.
Cela redémarre ton environnement.
Forker le projet
Si ce n’est pas ton projet, tu peux forker le projet exemple. Souvent la copie fonctionne
Changer de navigateur
Tu peux tenter un autre navigateur. Parfois on se retrouve bloqué un laps de temps sur google chrome par exemple, et on s’aperçoit que sur firefox il fonctionne.