Willkommen in der Zukunft

Erstelle deine erste App mit Techbridge

Heute wirst du zum Creator 🚀

Kapitel 1

Was ist eine App?

Apps lösen Probleme und helfen Menschen, Dinge schneller zu erledigen.

👤

Benutzer hat ein Bedürfnis

→

📱

Öffnet App

→

👆

Wird aktiv

→

✨

Erhält Ergebnis ✨

Taschenrechner • WhatsApp • YouTube • TikTok

Kapitel 2

Was ist Techbridge?

Ein intelligentes KI-Tool, das uns hilft, Apps schneller zu bauen.

IDEE 💡

PROMPT ⌨️

KI ERSTELLT 🤖

MENSCH VERBESSERT 👨‍🎨

KI hilft Entwicklern – sie ersetzt sie nicht.

Kapitel 3

Techbridge als IDE verwenden

Eine IDE (Integrierte Entwicklungsumgebung) ist ein Arbeitsbereich, in dem Entwickler Apps erstellen.

LINKS: Prompt-Bereich (Sag der KI, was sie tun soll)

Prompt

> Create a calculator app...

RECHTS: Live-Vorschau (Sieh deine App sofort)

Preview

📱 Live App

Code-Bereich (Was die KI generiert hat)

Kapitel 4

Unser erstes Projekt: Taschenrechner-App

Wir bauen einen schönen, funktionalen Taschenrechner.

Addition, Subtraktion
Multiplikation, Division
Leuchtende interaktive Schaltflächen

0

Kapitel 5

Wie man einen guten Prompt schreibt

KI liefert bessere Ergebnisse, wenn deine Anweisungen klar sind.

❌ SCHLECHTER PROMPT:

"Erstelle einen Taschenrechner"

✅ GUTER PROMPT:

"Create a modern glassmorphism calculator app with smooth animations, glowing buttons, responsive design, dark mode, and interactive hover effects."

Kapitel 6

Schritt-für-Schritt-Prompt-Erstellung

Lass uns unseren Prompt in einfache Schritte unterteilen.

1. Was erstellen wir? → Taschenrechner-App

2. Welcher Stil? → Moderner Glassmorphism

3. Welche Funktionen? → Addieren, subtrahieren, dividieren, multiplizieren

4. Welche Animationen? → Leuchten, Hover, Bounce

5. Welche Farben? → Lila, Blau, Neon

Kapitel 7

Live-App-Generierung

Erleben Sie, wie Techbridge Ihren Prompt in eine echte App verwandelt!

function init() { const btn = document.createElement('button'); btn.style.color = '#fff'; btn.onclick = calculate; } function calculate() { let x = 10; let y = 20; return x + y; } // generating UI...

0

Kapitel 8

Verständnis dessen, was die KI erstellt hat

Keine Angst vor dem Code! Schauen wir uns an, wie er funktioniert.

              <button onclick="add()">+</button>
            
              <div id="screen">0</div>
            
              if (btn == '+') { add(); }

Schaltfläche → Führt Aktion aus

Anzeigebildschirm → Zeigt Antwort an

Logik → Trifft Entscheidungen

Hover or click the code lines to see what they do!

Kapitel 9

Die App anpassen

Jetzt gestalte sie nach deinen Wünschen! Ändere Farben und Stile.

0

Versuche, die Tasten zu drücken!

Kapitel 10

Häufige Prompt-Fehler

Warum vage Prompts scheitern.

❌ "Mach es cool" → (Was bedeutet cool für eine KI?)

✅ "Mach es futuristisch mit Cyan-Leuchten"

❌ "Erstelle eine App" → (Was für eine App?)

✅ "Erstelle eine Trinkgeld-Rechner-App"

Details sind wichtig! Kreativität ist wichtig!

Kapitel 11

Klassenzimmer-Herausforderung 🏆

Schreibe deinen Prompt, generiere deine App und passe sie an!

📝 1. Einen Prompt schreiben

🤖 2. App generieren

🎨 3. Stil anpassen

Verbleibende Zeit:

05:00

🎉 Herzlichen Glückwunsch!

Du hast deine erste App gebaut!

Jeder großartige Entwickler hat mit einem Projekt angefangen.

🏆

Leistungszertifikat

KI-App-Entwickler

Hat erfolgreich seine erste App mit KI entwickelt!