Kurs vibe coding z AI · Moduł 10: TikTok Clone
AI Code Assistant - Cursor/Copilot Integration
W tej lekcji3
Używanie AI w developmencie.
GitHub Copilot
Zainstaluj Copilot extension w VS Code/Cursor.
Przykłady użycia:
- Autocomplete funkcji:
// Wpisz komentarz i Copilot sugeruje kod
// Function to validate email
function validateEmail
// Copilot zasugeruje całą implementację!- Generowanie testów:
// Generate unit tests for validateEmail function
// Copilot wygeneruje testy!Cursor AI Chat
W Cursorze możesz:
- Cmd+K: Inline editing
- Cmd+L: Chat
- @-mentions: referencje do plików
Przykładowe prompty:
"Add error handling to this API route"
"Refactor this component to use TypeScript"
"Explain what this regex does"
"Convert this to use Tailwind CSS"Best Practices
- Review AI code - zawsze sprawdzaj co AI wygenerował
- Specific prompts - im bardziej szczegółowy prompt, tym lepszy kod
- Iterate - poprawiaj prompt jeśli wynik nie jest idealny
- Learn from AI - zobacz jak AI rozwiązuje problemy
Do zobaczenia!
Kod do tej lekcji: App.jsx
// Nagrywanie duetu
import { useState } from 'react';
export default function App() {
const [layout, setLayout] = useState('side-by-side');
const [isRecording, setIsRecording] = useState(false);
return (
<div className="h-screen bg-black flex flex-col">
{/* Wybór układu */}
<div className="bg-gray-900 p-3 flex gap-2">
<button
onClick={() => setLayout('side-by-side')}
className={`px-4 py-2 rounded ${
layout === 'side-by-side' ? 'bg-white text-black' : 'bg-gray-700 text-white'
}`}
>
Obok siebie
</button>
<button
onClick={() => setLayout('top-bottom')}
className={`px-4 py-2 rounded ${
layout === 'top-bottom' ? 'bg-white text-black' : 'bg-gray-700 text-white'
}`}
>
Góra i dół
</button>
</div>
{/* Podgląd wideo */}
<div className={`flex-1 flex ${layout === 'side-by-side' ? 'flex-row' : 'flex-col'}`}>
{/* Oryginalne wideo */}
<div className="flex-1 relative bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
<div className="text-6xl">◆</div>
<div className="absolute top-4 left-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm">
Oryginał
</div>
</div>
{/* Wideo użytkownika */}
<div className={`flex-1 relative bg-gradient-to-br from-purple-900 to-pink-900 flex items-center justify-center ${
layout === 'side-by-side' ? 'border-l-2' : 'border-t-2'
} border-white`}>
<div className="text-6xl">◆</div>
<div className="absolute top-4 right-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm">
Ty
</div>
{isRecording && (
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div className="w-16 h-16 border-4 border-red-500 rounded-full animate-pulse"></div>
</div>
)}
</div>
</div>
{/* Sterowanie */}
<div className="bg-black p-6">
<div className="flex justify-center">
<button
onClick={() => setIsRecording(!isRecording)}
className={`w-20 h-20 rounded-full border-4 border-white flex items-center justify-center ${
isRecording ? 'bg-red-500' : 'bg-transparent'
}`}
>
{isRecording && <div className="w-8 h-8 bg-white rounded"></div>}
</button>
</div>
</div>
</div>
);
}Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Czym jest GitHub Copilot według lekcji?
2. Którą zasadę pracy z AI podkreśla lekcja jako najważniejszą?
Zadania praktyczne w grze
- Układanie w pionie
Uporządkuj możliwości Cursora w kolejności z lekcji (od góry):