Cours Vibe coding avec l'IA · Module 10: Clone de TikTok
Assistant de code IA - Intégration Cursor/Copilot
Dans cette leçon3
Utiliser l'IA dans le développement.
GitHub Copilot
Installe l'extension Copilot dans VS Code/Cursor.
Exemples d'utilisation :
- Autocomplétion de fonction :
1// Écris un commentaire et Copilot suggère du code
2// Fonction pour valider un email
3function validateEmail
4// Copilot suggérera toute l'implémentation !- Génération de tests :
1// Génère des tests unitaires pour la fonction validateEmail
2// Copilot générera les tests !Cursor AI Chat
Dans Cursor tu peux :
- Cmd+K : édition en ligne
- Cmd+L : chat
- @-mentions : références de fichiers
Exemples de prompts :
1"Ajoute la gestion des erreurs à cette route API"
2"Refactorise ce composant pour utiliser TypeScript"
3"Explique ce que fait cette regex"
4"Convertis ceci pour utiliser Tailwind CSS"Bonnes pratiques
- Relis le code de l'IA - vérifie toujours ce que l'IA a généré
- Prompts précis - plus le prompt est précis, meilleur est le code
- Itère - améliore le prompt si le résultat n'est pas idéal
- Apprends de l'IA - observe comment l'IA résout les problèmes
À bientôt !
Code de cette leçon : App.jsx
1// Enregistreur de duo
2import { useState } from 'react';
3
4export default function App() {
5 const [layout, setLayout] = useState('side-by-side');
6 const [isRecording, setIsRecording] = useState(false);
7
8 return (
9 <div className="h-screen bg-black flex flex-col">
10 {/* Sélecteur de disposition */}
11 <div className="bg-gray-900 p-3 flex gap-2">
12 <button
13 onClick={() => setLayout('side-by-side')}
14 className={`px-4 py-2 rounded ${
15 layout === 'side-by-side' ? 'bg-white text-black' : 'bg-gray-700 text-white'
16 }`}
17 >
18 Côte à côte
19 </button>
20 <button
21 onClick={() => setLayout('top-bottom')}
22 className={`px-4 py-2 rounded ${
23 layout === 'top-bottom' ? 'bg-white text-black' : 'bg-gray-700 text-white'
24 }`}
25 >
26 Haut et bas
27 </button>
28 </div>
29
30 {/* Aperçu de la vidéo */}
31 <div className={`flex-1 flex ${layout === 'side-by-side' ? 'flex-row' : 'flex-col'}`}>
32 {/* Vidéo originale */}
33 <div className="flex-1 relative bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
34 <div className="text-6xl">◆</div>
35 <div className="absolute top-4 left-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm">
36 Originale
37 </div>
38 </div>
39
40 {/* Vidéo de l'utilisateur */}
41 <div className={`flex-1 relative bg-gradient-to-br from-purple-900 to-pink-900 flex items-center justify-center ${
42 layout === 'side-by-side' ? 'border-l-2' : 'border-t-2'
43 } border-white`}>
44 <div className="text-6xl">◆</div>
45 <div className="absolute top-4 right-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm">
46 Toi
47 </div>
48
49 {isRecording && (
50 <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
51 <div className="w-16 h-16 border-4 border-red-500 rounded-full animate-pulse"></div>
52 </div>
53 )}
54 </div>
55 </div>
56
57 {/* Commandes */}
58 <div className="bg-black p-6">
59 <div className="flex justify-center">
60 <button
61 onClick={() => setIsRecording(!isRecording)}
62 className={`w-20 h-20 rounded-full border-4 border-white flex items-center justify-center ${
63 isRecording ? 'bg-red-500' : 'bg-transparent'
64 }`}
65 >
66 {isRecording && <div className="w-8 h-8 bg-white rounded"></div>}
67 </button>
68 </div>
69 </div>
70 </div>
71 );
72}Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Qu'est-ce que GitHub Copilot selon la leçon ?
2. Quelle règle de travail avec l'IA la leçon souligne-t-elle comme la plus importante ?
Tâches pratiques dans le jeu
- Tri vertical
Ordonne les capacités de Cursor telles que listées dans la leçon (de haut en bas) :