laoratoireia

Retour à la formation

ENCG Agadir · Écrans pilotes

Vibe coding

Introduction au vibe coding
Créer une app avec Streamlit
Prompt de projet

01 · Introduction au vibe coding

Vibe Coding

IA & programmation

Vibe Coding

Coder par intention, en dialogue avec une IA

En une phrase

Vibe coding = décrire ce qu'on veut créer, tester, améliorer, et comprendre en faisant.

Intro : l'idée générale du vibe coding

« On n'a pas besoin de tout maîtriser avant de commencer : on apprend en construisant. »

En programmation, on nous dit souvent : « Il faut tout connaître avant de coder ». Le vibe coding propose une approche différente :

On part d'abord de l'intention et du résultat souhaité.
On décrit le problème en langage naturel et on échange avec une IA.
On teste, on corrige, on apprend en itérant.

C'est une façon plus créative, exploratoire et décomplexée d'entrer dans le code.

02 · Introduction au vibe coding

Définition et cycle du vibe coding

Définition : c'est quoi le vibe coding ?

Origine : Le terme a été popularisé par Andrej Karpathy (ancien directeur IA chez Tesla et OpenAI) en février 2025.

Le vibe coding est une manière de programmer où :

on se concentre sur l'idée, le résultat, la logique
on utilise une IA comme partenaire (pas comme "copieur")
on accepte de ne pas tout comprendre au début
on améliore le code progressivement par essais/corrections

En résumé : coder par intention et par dialogue, pas par mémorisation.

Ce que ce n'est pas

copier-coller sans réfléchir
remplacer l'apprentissage

Ce que c'est

un accélérateur de compréhension
une porte d'entrée plus douce
un moyen de poser de bonnes questions

Le cycle du vibe coding

Intention

→

Prompt

→

Code généré

→

Test

→

Correction

↻ On répète jusqu'à satisfaction

03 · Introduction au vibe coding

C'est quoi un prompt ?

Un prompt, c'est ce que vous dites à l'IA : une instruction en langage naturel qui précise ce que vous voulez obtenir (et souvent les contraintes).

Exemples de prompts

1) Écris un programme Python qui demande l'âge de l'utilisateur.
2) Explique ce code comme si j'étais débutant.
3) Corrige ce programme et dis-moi pourquoi il ne marche pas.

Plus un prompt est clair, précis et structuré, plus la réponse sera utile.

Trucs pour écrire de bons prompts

Mentionner ton niveau : « Je suis débutant en Python »
Être spécifique sur le résultat : « Une fonction qui retourne True/False »
Donner un exemple d'entrée/sortie si pertinent
Demander des explications : « Explique chaque ligne »
Préciser les contraintes : « Sans utiliser de librairie externe »

04 · Introduction au vibe coding

C'est quoi le contexte pour un modèle LLM ?

Un LLM (Large Language Model) ne "comprend" pas comme un humain : il produit une réponse en se basant sur tout ce qui est présent dans la conversation.

Le contexte, c'est donc tout ce que le modèle "voit" au moment de répondre :

ce que vous avez écrit avant
le niveau ("je suis débutant", "niveau avancé")
la langue et le format demandé (Python, français, etc.)
les contraintes ("sans boucle", "code simple", etc.)

La fenêtre de contexte (limite de mémoire)

Le contexte a une taille limitée. Si la conversation devient très longue, le modèle peut « oublier » ce qui a été dit au début. C'est pourquoi il est parfois utile de rappeler les informations importantes ou de commencer une nouvelle conversation.

Sans contexte

Écris une fonction Python

→ Trop vague, l'IA va deviner ce que tu veux

Avec contexte

Je suis débutant en Python. Écris une fonction simple qui additionne deux nombres et explique chaque ligne.

→ Clair, précis, adapté à ton niveau

Plus le contexte est riche et cohérent, plus la réponse sera adaptée.

05 · Introduction au vibe coding

Attention : les limites de l'IA

L'IA peut se tromper. Le code généré peut contenir des erreurs, des bugs ou des inefficacités.
L'IA peut « halluciner ». Elle peut inventer des fonctions qui n'existent pas ou donner des informations fausses avec assurance.
L'IA ne remplace pas la compréhension. Si tu ne comprends pas le code, demande des explications!
Toujours tester et valider ce que l'IA produit avant de l'utiliser.

Règle d'or : L'IA est un outil, pas une autorité. C'est toi qui restes responsable de ton code.

06 · Introduction au vibe coding

Messages clés

Vous n'êtes pas obligés de tout savoir pour commencer.
Poser de bonnes questions est déjà une compétence technique.
L'IA n'est pas là pour "tricher", mais pour apprendre plus vite et mieux.
Comprendre progressivement > comprendre parfaitement tout de suite.
Tester, valider, questionner : c'est ça, la vraie démarche.

07 · Introduction au vibe coding

Pour aller plus loin

Voici quelques outils que vous pouvez explorer pour pratiquer le vibe coding :

Claude

ChatGPT

Antigravity

Cursor

Conseil : Commencez par de petits projets et augmentez la complexité graduellement. Le meilleur apprentissage, c'est la pratique!

08 · Créer une app avec Streamlit

Créer une app financière avec le vibe coding

Python pour la finance • Vibe coding • Streamlit

Créer une app financière avec le vibe coding

Une méthode simple : discuter → coder → tester → améliorer

Objectif du cours

Vous allez apprendre comment créer une application web en Python avec Streamlit, en échangeant intelligemment avec une IA, même si c'est votre premier cours.

09 · Créer une app avec Streamlit

Étape 0 — L'état d'esprit (important)

« Aujourd'hui, vous n'allez pas apprendre Python par cœur. Vous allez apprendre une méthode pour construire une app en avançant étape par étape. »

Vous avez le droit de ne rien savoir au début.
Vous avez le droit de poser des questions "simples".
L'IA peut proposer du code, mais vous devez comprendre ce qu'il fait.
Le but n'est pas de faire une grosse app en une fois.
Le but est d'apprendre à construire progressivement.

10 · Créer une app avec Streamlit

C'est quoi Streamlit ?

Streamlit est une bibliothèque Python qui permet de créer des applications web interactives très facilement, sans connaître HTML, CSS ou JavaScript.

Sans Streamlit

Programme en ligne de commande
Texte noir sur fond blanc
Pas très visuel
Difficile à partager

Avec Streamlit

Interface web moderne
Boutons, sliders, champs de texte
Graphiques interactifs
Facile à partager (URL)

Pourquoi Streamlit pour ce cours ?

Avec quelques lignes de Python, vous obtenez une vraie application avec une interface graphique. C'est motivant de voir son travail prendre forme visuellement, et c'est parfait pour les débutants!

11 · Créer une app avec Streamlit

Votre environnement de travail

Vous allez utiliser un IDE (environnement de développement) avec une IA. Deux options s'offrent à vous :

Option A — IA intégrée dans l'IDE

Antigravity, Cursor ou VS Code + Copilot

L'IA est directement dans l'éditeur
Raccourci rapide : Cmd+K (Mac) ou Ctrl+K (Windows)
Chat intégré sur le côté
Plus fluide, tout au même endroit

Option B — IA externe (navigateur)

Claude, ChatGPT ou Gemini dans le navigateur

Vous copiez-collez entre le navigateur et l'IDE
Fonctionne avec n'importe quel IDE
Conversations plus longues possibles
Plus flexible, gratuit

Conseil : Les deux approches fonctionnent très bien. Choisissez celle avec laquelle vous êtes le plus à l'aise. Vous pouvez même combiner les deux!

12 · Créer une app avec Streamlit

Étape 1 — Créer le projet et installer Streamlit

Sur votre Bureau (Desktop), créez un dossier nommé : finance_app
Ouvrez ce dossier avec votre IDE :
Comment faire : Menu File → Open Folder (ou "Ouvrir un dossier") → choisissez finance_app
Installez Streamlit en ouvrant le terminal et en tapant :
pip install streamlit
Le terminal se trouve généralement en bas de votre IDE (menu View → Terminal)
Créez un premier fichier Python : app.py
Comment faire : Clic droit dans l'explorateur de fichiers → New File → tapez app.py

13 · Créer une app avec Streamlit

Étape 2 — Discuter avant de coder

Avant d'écrire du code, vous allez discuter avec l'IA. Vous allez expliquer votre idée et demander une version très simple pour commencer.

Prompt de départ (à copier-coller)

Je suis étudiant en finance et débutant en programmation Python.
Je veux créer une application financière simple avec Streamlit.
Aide-moi à réfléchir à une première version très basique de cette app.
Pose-moi des questions si nécessaire.

Idée clé : donnez votre niveau + votre objectif + mentionnez Streamlit + demandez à l'IA de penser avec vous.

14 · Créer une app avec Streamlit

Étape 3 — Définir l'idée de l'app (sans coder)

L'IA va proposer des idées ou vous poser des questions : quel type d'app ? pour quoi faire ? pour quel utilisateur ? Pour un premier cours, visez une app très simple, par exemple :

un champ pour entrer un montant
un slider pour choisir un taux d'intérêt
un champ pour la durée
un bouton qui calcule les intérêts

Règle du vibe coding : pas tout en même temps. On construit fonctionnalité par fonctionnalité.

15 · Créer une app avec Streamlit

Étape 4 — Choisir une seule fonctionnalité

Commencez par la version la plus simple possible. Exemple : un champ pour entrer un capital et l'afficher sur la page.

Prompt (à copier-coller)

Commençons très simple avec Streamlit.
Je veux une app qui affiche un titre, un champ pour entrer un capital initial,
et qui affiche ce capital sur la page. Rien de plus pour l'instant.

16 · Créer une app avec Streamlit

Étape 5 — Générer le premier code et tester

Copiez le code proposé par l'IA.
Collez-le dans app.py.
Lancez l'application Streamlit dans le terminal :
streamlit run app.py
Votre navigateur s'ouvre automatiquement sur http://localhost:8501

Exemple de code Streamlit que l'IA pourrait générer

# app.py - Ma première app financière avec Streamlit

import streamlit as st

# Titre de l'application
st.title("Ma calculatrice financière")

# Champ pour entrer le capital
capital = st.number_input("Entrez le capital initial ($)", min_value=0, value=1000)

# Afficher le capital
st.write("Votre capital est de", capital, "$")

Ce que vous verrez dans votre navigateur

Ma calculatrice financière

Entrez le capital initial ($)

1000

Votre capital est de 1000 $

Une vraie interface web! L'utilisateur peut modifier la valeur et le résultat se met à jour automatiquement.

En quelques lignes de code, vous avez créé une vraie application web!

17 · Créer une app avec Streamlit

Les commandes Streamlit de base

Voici les principales commandes que vous utiliserez. Pas besoin de les mémoriser — l'IA les connaît!

st.title()

Affiche un gros titre

st.write()

Affiche du texte ou des données

st.number_input()

Champ pour entrer un nombre

st.slider()

Curseur pour choisir une valeur

st.button()

Un bouton cliquable

st.metric()

Affiche un chiffre clé en gros

18 · Créer une app avec Streamlit

Le cycle du vibe coding (à répéter)

Intention

→

Prompt

→

Code généré

→

Test

→

Correction

↻ On répète jusqu'à satisfaction

19 · Créer une app avec Streamlit

Étape 6 — Itérer (le cœur du vibe coding)

Maintenant, vous améliorez l'app petit à petit. Chaque prompt ajoute une mini-évolution.

Prompts d'évolution (exemples)

Explique-moi ce code ligne par ligne comme si je n'avais jamais codé.

Ajoutons un slider pour choisir le taux d'intérêt entre 0% et 20%.

Ajoutons un champ pour la durée en années et calculons les intérêts simples.

Affiche le résultat avec st.metric() pour que ce soit plus visuel.

Ajoute un graphique qui montre l'évolution du capital sur plusieurs années.

Astuce Streamlit : Quand vous modifiez le code et sauvegardez, cliquez sur "Rerun" dans le navigateur (ou appuyez sur R) pour voir les changements.

20 · Créer une app avec Streamlit

Quand ça ne marche pas (et c'est normal!)

Les erreurs font partie de l'apprentissage! Quand votre code ne fonctionne pas, ne paniquez pas. Voici comment communiquer l'erreur à l'IA :

Prompt pour corriger une erreur

J'ai cette erreur dans mon app Streamlit :
[coller le message d'erreur]

Voici mon code :
[coller votre code]

Peux-tu m'expliquer le problème et le corriger ?

Erreurs fréquentes

Oublier import streamlit as st
Faute de frappe dans une commande
Mauvaise indentation

Bonne attitude

Lire le message d'erreur (souvent en rouge)
Copier l'erreur exacte à l'IA
Demander une explication

21 · Créer une app avec Streamlit

Bonnes pratiques du vibe coding

Tester après chaque modification

Ajoutez une fonctionnalité → sauvegardez → cliquez "Rerun" → ça marche? → passez à la suivante.

Sauvegarder les versions qui marchent

Avant de modifier, copiez votre code quelque part (ou faites Ctrl+Z si besoin).

Toujours demander « Explique-moi »

Si vous ne comprenez pas une ligne, demandez à l'IA de l'expliquer. C'est comme ça qu'on apprend!

Avancer petit à petit

Résistez à la tentation de tout ajouter d'un coup. Une fonctionnalité à la fois!

22 · Créer une app avec Streamlit

Étape 7 — Faire un plan simple avec l'IA

Quand votre app commence à grandir, vous pouvez demander à l'IA de vous aider à structurer un plan (en étapes).

Prompt (à copier-coller)

Peux-tu me proposer un plan simple pour améliorer cette application
financière Streamlit, en plusieurs étapes, adaptées à un débutant en Python ?

Vous utilisez alors l'IA comme : assistant pédagogique, coach et organisateur.

23 · Créer une app avec Streamlit

Étape 8 — Ce que vous apprenez vraiment

Même si l'IA vous aide, vous apprenez des compétences fondamentales :

la logique d'un programme
les entrées / sorties (ce que l'utilisateur entre, ce que l'app affiche)
les variables
la création d'interfaces utilisateur
la progression incrémentale (itérations)
comment poser des questions techniques utiles

Vous apprenez à penser comme des développeurs, pas à réciter Python.

24 · Créer une app avec Streamlit

Message clé à retenir

Le vibe coding, ce n'est pas "laisser l'IA coder".
C'est apprendre à guider l'IA pour construire intelligemment une application, étape par étape.

25 · Créer une app avec Streamlit

Pour aller plus loin avec Streamlit

Une fois que votre app de base fonctionne, voici des idées d'évolution :

Graphiques interactifs

avec st.line_chart()

Intérêts composés

Comparaison visuelle

Plusieurs pages

avec st.sidebar

Déployer en ligne

Streamlit Cloud (gratuit)

Prompt pour explorer : "Quelles fonctionnalités Streamlit pourrais-je ajouter à mon app financière ? Propose-moi des idées adaptées à un débutant."

26 · Créer une app avec Streamlit

Récapitulatif des prompts utiles

// Démarrer
Je suis débutant en Python. Je veux créer [description] avec Streamlit. Aide-moi à commencer simplement.

// Comprendre
Explique-moi ce code Streamlit ligne par ligne comme si c'était mon premier cours.

// Ajouter
Ajoutons maintenant [nouvelle fonctionnalité] à mon app Streamlit. Garde le code simple.

// Corriger
J'ai cette erreur dans mon app Streamlit : [erreur]. Voici mon code : [code]. Explique et corrige.

// Planifier
Propose-moi un plan en étapes pour améliorer cette app Streamlit, adapté à un débutant.

// Découvrir Streamlit
Quelles sont les commandes Streamlit utiles pour [type de fonctionnalité] ? Donne-moi des exemples simples.

27 · Créer une app avec Streamlit

Aide-mémoire : commandes terminal

Installer Streamlit

pip install streamlit

Lancer l'application

streamlit run app.py

Arrêter l'application

Ctrl + C

28 · Prompt de projet

Prompt de "Vibe Coding"

Rôle :

Tu es désormais mon co-fondateur technique. Ton travail est de m'aider à construire un produit réel que je peux utiliser, partager ou lancer. Occupe-toi de toute la construction, mais garde-moi informé et aux commandes.

Mon Idée :

[Décrivez votre idée de produit – ce qu'il fait, à qui il s'adresse, quel problème il résout. Expliquez-le comme vous le feriez à un ami.]

Mon niveau de sérieux :

[J'explore simplement / Je veux l'utiliser moi-même / Je veux le partager avec d'autres / Je veux le lancer publiquement]

Cadre du Projet :

1. Phase 1 : Découverte

Pose des questions pour comprendre ce dont j'ai réellement besoin (pas seulement ce que j'ai dit)
Remets en question mes hypothèses si quelque chose ne semble pas logique
Aide-moi à séparer ce qui est "indispensable maintenant" de ce qui est "à ajouter plus tard"
Dis-moi si mon idée est trop ambitieuse et suggère un point de départ plus intelligent

2. Phase 2 : Planification

Propose exactement ce que nous allons construire pour la version 1
Explique l'approche technique en langage simple
Estime la complexité (simple, moyenne, ambitieuse)
Identifie tout ce dont j'aurai besoin (comptes, services, décisions)
Montre un plan global du produit fini

3. Phase 3 : Construction

Construis par étapes pour que je puisse voir et réagir
Explique ce que tu fais au fur et à mesure (je veux apprendre)
Teste tout avant de passer à la suite
Arrête-toi et fais un point lors des décisions clés
Si tu rencontres un problème, présente-moi les options au lieu de choisir à ma place

4. Phase 4 : Peaufinage

Donne un aspect professionnel, pas comme un projet de hackathon
Gère les cas limites et les erreurs avec élégance
Assure-toi que c'est rapide et que cela fonctionne sur différents appareils si nécessaire
Ajoute les petits détails qui donnent l'impression d'un produit "abouti"

5. Phase 5 : Passage de relais

Déploie le projet si je le veux en ligne
Donne des instructions claires sur l'utilisation, l'entretien et les modifications
Documente tout pour que je ne dépende pas de cette conversation
Dis-moi ce que je pourrais ajouter ou améliorer dans la version 2

6. Comment travailler avec moi

Traite-moi comme le responsable produit. Je prends les décisions, tu les concrétises.
Ne m'assomme pas de jargon technique. Traduis tout.
Repousse mes idées si je complique trop les choses ou si je fais fausse route.
Sois honnête sur les limites. Je préfère ajuster mes attentes plutôt que d'être déçu.
Avance vite, mais pas au point que je ne puisse plus suivre.

Règles

Je ne veux pas seulement que ça marche — je veux en être fier
C'est du concret. Pas une maquette. Un produit fonctionnel.
Garde-moi aux commandes et informé à tout moment