Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Replit

Comme Google Colab, Replit est un outil qui permet d’écrire et d’exécuter du code sans avoir à installer d’IDE (environnement de développement).

Lien vers Replit

Sur cette page, tu trouveras :

Créer et retrouver ses projets

Créer un projet

Une fois connecté à Replit, dans le menu à gauche, on peut créer un nouveau projet (aussi appelé « Repl » su Replit) en cliquant sur le bouton « Create ».

Note : on peut afficher / masquer le menu de gauche avec l’icône entourée en rouge sur l’image ci-contre.

On peut alors choisir le type de projet. par exemple HTML / CSS ou encore Python.

On donne ensuite un nom au projet et il ne reste plus qu’à cliquer sur le bouton « Create Repl » !

Le projet est créé, on peut alors commencer à coder !

Retrouver un projet

 

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 ».
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.
  • La partie centrale, où on peut écrire le code
  • L’aperçu du site web / de l’applicatif 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
  • 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)

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 quelle personne cliquant sur ce lien peut donc accéder à ton projet et travailler dessus.

Il est aussi possible d’inviter des personnes via leur pseudo / 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.

alicebobcedric2

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 champ key et sa 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 l’exemple ci-dessous, je récupère la valeur de ma variable d’environnement dans une variable que j’ai appelé « token » !