Semaine 3 · Jour 4 · 420-SN1 · Bonus facultatif

HELLO WORLD
SUR STACKBLITZ

Du Python qui tourne dans ton navigateur, sans rien installer 🚀

Et si Python n'avait besoin de rien ?

Jusqu'ici, on a fait tourner Python dans Colab : on ouvre un onglet, on attend que la machine de Google se réveille, et on a droit aux grandes librairies scientifiques (numpy, matplotlib...).

Aujourd'hui on découvre une autre porte d'entrée : StackBlitz, un vrai atelier de programmation qui s'ouvre instantanément dans l'onglet du navigateur. Le Python s'y exécute sur ta machine, dans la page - aucun serveur à réveiller, aucun téléchargement.

StackBlitz ou Colab ?

 StackBlitzColab
Démarrageinstantané (rien à réveiller)quelques secondes d'attente
Où tourne le codedans ton navigateursur un serveur de Google
Fichiersun vrai projet (arborescence)un seul carnet de cellules
Terminaloui, comme un vrai postecaché (le ! magique)
Grosses librairies❌ Python pur seulement✅ numpy, matplotlib...
Partageune URL et c'est en lignepartage Drive
À retenir : ce ne sont pas des rivaux. StackBlitz = léger, rapide, parfait pour apprendre la structure d'un projet. Colab = lourd mais armé pour le calcul scientifique. Un bon scientifique connaît ses deux outils.

Ce qu'on va réussir

1  Découvrir un IDE en ligne : ouvrir un vrai projet, repérer l'éditeur, l'arborescence et le terminal.

2  Voir Python tourner dans le navigateur : écrire un petit programme interactif et le lancer nous-mêmes.

3  Partager en un lien : récupérer l'URL de notre projet - la première marche vers le déploiement en ligne.

Étape 1 - Ouvrir un projet Python

Va sur stackblitz.com, clique sur New project, puis choisis le gabarit Python. (Raccourci : l'adresse directe stackblitz.com/edit/python ouvre déjà un projet tout prêt.)

Aucun compte obligatoire pour essayer 🔐
Comment c'est possible ? StackBlitz utilise une technologie appelée WebContainers : une version de Python compilée en WebAssembly qui s'exécute directement dans l'onglet. Le navigateur devient un mini-ordinateur.

L'anatomie de l'atelier

Explorateur 📁 src/ main.py package.json tes fichiers Éditeur de code # main.py print("Bonjour !") là où on écrit Terminal $ python3 main.py Bonjour ! Aperçu (pour les projets web)

Quatre zones : l'explorateur (tes fichiers), l'éditeur (où on écrit), le terminal (où on lance), et l'aperçu (pour les pages web). Pour notre Python, tout se joue entre l'éditeur et le terminal.

Étape 2 - Le tout premier message

# fichier : main.py print("Bonjour le monde !")

On clique dans l'éditeur sur main.py, on efface ce qui s'y trouve, et on écrit cette seule ligne. print() est la fonction qui affiche un texte. Rien de neuf depuis la semaine 1 - mais cette fois, c'est nous qui allons le lancer.

Étape 3 - Lancer soi-même

Terminal
$ python3 main.py Bonjour le monde ! $

Dans le terminal, on tape la commande python3 main.py et on appuie sur Entrée. Python lit le fichier, exécute la ligne, et affiche le résultat juste en dessous.

Différence avec Colab : dans un carnet, on appuie sur ▶ pour exécuter une cellule. Ici, on appelle Python à la main, comme sur un vrai poste de développeur. python3 = « lance l'interpréteur Python », main.py = « sur ce fichier ».

Étape 4 - Lui demander ton prénom

prenom = input("Ton prenom ? ") print("Salut " + prenom + " !")

input() met le programme en pause et attend que tu écrives quelque chose dans le terminal. Ce que tu tapes est rangé dans la variable prenom, qu'on recolle ensuite au message avec le +.

Pourquoi c'est remarquable : input() a besoin d'un vrai terminal interactif. StackBlitz en a un - donc, contrairement à beaucoup de bacs à sable en ligne, les questions à l'usager fonctionnent vraiment.

Étape 5 - Lire un nombre

prenom = input("Ton prenom ? ") note = float(input("Ta note sur 100 ? "))

input() rend toujours du texte, même si tu tapes 87. Pour pouvoir calculer avec, on l'enveloppe dans float() qui le transforme en nombre à virgule. (int() ferait un entier.)

Le piège classique : oublier le float() et essayer note + 10. Python répond TypeError : on ne peut pas additionner du texte et un nombre. Convertir, c'est le réflexe.

Étape 6 - Réagir à la note

if note >= 60: print("Bravo " + prenom + " ! Tu reussis.") else: manque = 60 - note print(prenom + ", il te manque " + str(manque) + " points.")

On réinvestit la condition de la semaine 1 : si la note atteint 60, on félicite ; sinon, on calcule combien il manque. Comme manque est un nombre, on le repasse en texte avec str() pour le coller au message.

Le programme complet

# main.py - mon premier programme interactif prenom = input("Ton prenom ? ") note = float(input("Ta note sur 100 ? ")) if note >= 60: print("Bravo " + prenom + " ! Tu reussis.") else: manque = 60 - note print(prenom + ", il te manque " + str(manque) + " points.")
Terminal
$ python3 main.py Ton prenom ? Maya Ta note sur 100 ? 87 Bravo Maya ! Tu reussis.

La grande limite à connaître

✅ Marche sur StackBlitz
import math import random print(math.pi) # tout le Python "de base"
❌ Ne marche PAS
import numpy import matplotlib # ModuleNotFoundError # pas de pip install ici
Pourquoi ? StackBlitz exécute du Python pur : les modules livrés avec Python (math, random, datetime...) sont là, mais on ne peut pas installer les grosses librairies scientifiques écrites en code natif. C'est exactement pour ça que Colab existe. Le bon outil pour le bon travail.

Étape 7 - Partager en un lien

Ton projet vit déjà à une adresse web (dans la barre du navigateur, quelque chose comme stackblitz.com/edit/...). Copie ce lien, envoie-le : la personne ouvre exactement ton projet, code compris, sans rien installer.

🔗 Un lien = ton code, partout, tout de suite

En te créant un compte gratuit, tu peux sauvegarder tes projets et garder une URL stable. C'est la première marche du déploiement : donner à ton travail une adresse que le monde peut visiter.

La grande idée : déployer

ton code StackBlitz l'exécute une URL publique que tout le monde visite

Déployer, c'est donner à un programme une adresse publique pour que d'autres l'utilisent. StackBlitz t'en fait toucher le principe en quelques secondes. Plus tard, les vrais sites (pages web, jeux, applications) suivent exactement cette logique : du code, un hébergeur, une URL.

Mini-défis (pour les curieux)

A  Demande deux notes et affiche leur moyenne.

B  Affiche un message différent pour « échec », « passe » et « excellent » (90+) avec elif.

C  import random et fais tirer au programme un nombre mystère à deviner.

Astuce : garde le réflexe float(input(...)) pour tout ce qui doit être calculé, et str(...) pour tout nombre que tu veux coller dans un message.

Ce qu'on retient

Le gesteLe moyen
Ouvrir un atelier Python en lignestackblitz.com → Python
Lancer mon fichier moi-mêmepython3 main.py
Poser une question à l'usagerinput("...")
Transformer un texte en nombrefloat(...) / int(...)
Coller un nombre dans un messagestr(...)
Partager mon travailcopier l'URL du projet

Tu sais maintenant faire tourner Python hors de Colab, dans un vrai environnement de projet, et lui donner une adresse partageable. Deux outils dans ta boîte valent mieux qu'un.

À TOI DE JOUER ! 🚀

Ouvre stackblitz.com, écris ton Hello World interactif, lance-le avec python3 main.py - puis tente un mini-défi
⤺ Refermer le diaporama