Quelles applications utilisez-vous chaque jour ?

Pensez aux applications que vous avez ouvertes ce matin...

Votre parcours en 5 jours

De zéro à une application qui fonctionne, en une semaine

Installer Antigravity

Votre terrain de jeu pour les exercices du jour

Antigravity est un environnement de programmation simple qui fonctionne dans votre navigateur. Vous l'utiliserez toute la journée pour faire de petits exercices et voir le code en action, sans rien installer.

<h1>Hello World!</h1>
<p>My name is [your name]</p>

Le navigateur : votre fenêtre sur le Web

Vous en utilisez un tous les jours : voyons comment il fonctionne

Un navigateur est un programme de votre ordinateur ou de votre téléphone qui permet de consulter des sites web. Chrome, Safari, Firefox et Edge sont des navigateurs. En ce moment même, vous regardez cette présentation dans un navigateur.

Qu'est-ce qu'une application ?

Un logiciel qui résout un problème pour ses utilisateurs

Anatomie d'une application

Toute application comporte trois couches

Comment on construit une application

Le code n'est que l'étape 4 sur 6 !

Que sont les spécifications ?

Le plan avant la construction

User stories

Décrire les fonctionnalités du point de vue de l'utilisateur

Bonnes et mauvaises spécifications

Tout est dans la précision

Qu'est-ce que l'UI/UX ?

Les deux faces d'une même pièce

4 principes de conception pour débutants

Suivez ces règles et votre application aura l'air professionnelle

Stitch AI

Générer des maquettes d'application à partir d'une description

Stitch est un outil de conception gratuit, fondé sur l'IA, proposé par Google. Vous décrivez ce que vous voulez en langage courant, et il génère en quelques secondes des écrans d'aspect professionnel. Aucune compétence en design n'est nécessaire.

Démo : concevoir avec Stitch

Regardez la démonstration de l'enseignant, puis essayez vous-même

« Une page de liste de tâches épurée pour une application de planning étudiant,
conçue d'abord pour le mobile, avec des cases à cocher, des titres de tâches,
des dates d'échéance et des étiquettes de priorité en couleur. »

« Un formulaire de création de tâche avec des champs pour le titre,
la date d'échéance, une liste déroulante de matières et un sélecteur
de niveau de priorité. Style moderne et minimaliste. »

« Un tableau de bord montrant les échéances à venir, des statistiques
d'avancement des tâches et un bouton d'ajout rapide.
Design blanc et épuré, avec des touches de bleu. »

De Stitch à Figma

Importez vos maquettes générées par l'IA et affinez-les

Figma est un outil de conception gratuit, qui fonctionne dans le navigateur, utilisé par les designers professionnels de Google, Microsoft, Uber et Airbnb. Vous y importerez vos écrans Stitch AI pour les affiner, les personnaliser et les partager.

Les notions clés de Figma

Les quatre briques de base à connaître

Fichiers et dossiers sur votre ordinateur

Les briques de base de tout projet

Documents/
├── School/
│   ├── essay.docx
│   └── notes.pdf
├── Photos/
│   └── vacation.jpg
└── Music/
    └── playlist.mp3

Qu'est-ce que le code ?

Des instructions écrites dans un langage que l'ordinateur comprend

Les langages de programmation

À chaque tâche son langage

Comme les humains parlent français, anglais ou espagnol, les ordinateurs comprennent différents langages de programmation. Chacun excelle dans une tâche précise. Pour une application web, il en faut trois :

<h1>Welcome</h1>
<p>This is my app.</p>
<button>Sign In</button>

button {
  background: blue;
  color: white;
  padding: 10px 20px;
}

button.onclick = function() {
  alert("Hello!");
}

<h1>My Study Planner</h1>
<p>Welcome to my app!</p>
<button>Add Task</button>

Vibe coding : laissez l'IA écrire le code pour vous

La nouvelle façon de créer des logiciels : en décrivant ce que vous voulez

Bons et mauvais prompts

La qualité de vos instructions détermine la qualité du code

Qu'est-ce qu'un projet logiciel ?

Tous les fichiers de votre application, rangés dans un seul dossier

study-planner/
├── src/
│   ├── app/
│   │   ├── page.tsx      (page d'accueil)
│   │   ├── tasks/
│   │   │   └── page.tsx  (page des tâches)
│   │   └── layout.tsx    (mise en page commune)
│   └── styles/
│       └── globals.css   (design)
├── public/
│   └── logo.png          (images)
├── data/
│   └── tasks.json        (données)
└── package.json          (config)

Qu'est-ce que « le cloud » ?

C'est simplement l'ordinateur de quelqu'un d'autre

Le problème de la gestion du code

Pourquoi les projets de code exigent des outils spécifiques

Imaginez que vous rédigez une dissertation dans Word. Simple : un fichier, une personne, on enregistre et c'est fini. Maintenant, imaginez :

Qu'est-ce que la gestion de versions ?

Une machine à remonter le temps pour votre projet

Elle enregistre des instantanés de tout votre projet aux moments clés, pour que vous puissiez toujours revenir en arrière.

Git et GitHub

Deux choses différentes qui fonctionnent ensemble

Qu'est-ce que l'open source ?

Pourquoi tant d'outils sont gratuits (et pourquoi GitHub existe)

Créer un compte GitHub

Votre premier pas dans le monde des développeurs

Qu'est-ce qu'un dépôt ?

La maison de votre projet sur GitHub

my-awesome-app/
├── index.html      (page principale)
├── style.css       (design)
├── script.js       (interactivité)
├── images/
│   └── logo.png
└── README.md       (description)

Créer votre premier dépôt

Faisons-le ensemble

Les issues GitHub

La liste de tâches de votre projet

Chaque issue peut être attribuée à quelqu'un, recevoir une étiquette (bug, feature, nice-to-have) et être fermée une fois terminée. C'est la liste de tâches de votre projet.

De la maquette aux issues

Transformez vos écrans Figma en issues GitHub concrètes

Titre : Créer la page de liste des tâches
Étiquette : feature

Description :
Construire la page de liste des tâches d'après la maquette Figma.

Critères d'acceptation :
- [ ] La page affiche une liste de tâches avec leur titre et leur date d'échéance
- [ ] Chaque tâche a une case à cocher pour la marquer comme terminée
- [ ] Les tâches sont triées par date d'échéance (la plus proche en premier)
- [ ] Un bouton « Ajouter une tâche » est visible en haut

Les livrables du jour

Ce que vous devez avoir à la fin de la journée

À vous de pratiquer !

Appliquez tout ce que vous avez appris aujourd'hui

Idéation : votre propre projet d'application

Seulement une fois les diapositives et le TP ci-dessus terminés