Tutorial: In 15 Minuten zur eigenen App (2/2)

Bild: ChatGPT

Im ersten Teil dieser Serie hast du mit dem CahtGPT-Coding-Agent Codex einen QR-Code-Generator gebaut, ganz ohne Programmierkenntnisse. Am Ende lag eine fertige HTML-Datei auf deinem Computer. In diesem zweiten Teil stellst du sie kostenlos ins Internet, sodass du deine App über einen Link mit anderen teilen kannst. Dafür nutzen wir Netlify, weil das Hochladen dort ohne Vorkenntnisse funktioniert.

Das ist Teil 2 unserer Vibe-Coding-Serie. In Teil 1 baust du die App, hier bringst du sie online.

In Kürze:

• Mit Netlify Drop stellst du deine App innerhalb von wenigen Sekunden online.

• Wir zeigen dir, wie das geht und wie du anschliessend von überall her auf deinen QR-Code-Generator zugreifen kannst.

Schritt 1: Lass dich von ChatGPT leiten

Öffne die Desktopversion von ChatGPT und dort den Chat, in dem Codex deinen QR-Code-Generator gebaut hat. ChatGPT kennt deine App bereits und weiss, wie sie aufgebaut ist. Schreib folgende Anweisung:

Ich möchte meinen QR-Code-Generator mit Netlify kostenlos im Internet veröffentlichen. Bitte führe mich Schritt für Schritt durch den Prozess.

Von hier an begleitet dich ChatGPT bis zur fertigen Online-App.

Dabei lernst du vielleicht einen Fachbegriff kennen, der dir beim Programmieren mit KI immer wieder begegnet: Deploy. Das heisst nichts anderes, als deine App ins Internet zu stellen, damit sie über einen Link erreichbar wird. Egal ob mit ChatGPT, Codex oder einem anderen Werkzeug, das Wort meint immer dasselbe.

Schritt 2: Die Datei zu Netlify hochladen

ChatGPT schickt dich zu Netlify Drop. Dort siehst du eine Fläche, auf die du deine HTML-Datei bzw. den Ordner mit deiner HTM-Datei aus Teil 1 per Drag & Drop ziehst.

Schritt 3: Die automatische Adresse testen

Wenige Sekunden später ist deine App live. Netlify vergibt dafür automatisch eine Adresse, die ungefähr so aussieht: happy-tree-482.netlify.app. Der Name wird zufällig zusammengesetzt und wirkt oft etwas kurios, das ist normal. Wichtig ist nur, dass der Link funktioniert. Öffne ihn im Browser, und wenn dein QR-Code-Generator erscheint, ist deine erste eigene App weltweit erreichbar. Den Link kannst du sofort mit Freunden, Familie oder Arbeitskolleginnen teilen.

Schritt 4: Die Seite mit einem kostenlosen Konto sichern

Die App ist zwar online, allerdings bleibt sie nur während einer Stunde gespeichert. Damit dein QR-Code-Generator dauerhaft online bleibt, musst du ein kostenloses Konto erstellen. Für ein kleines Projekt wie diesen Generator reicht der Gratis-Plan locker aus. Klicke auf «Claim this site».

Nach der Registration wird dir ein einigermassen unübersichtliches Dashboard angezeigt. Das kannst du gekonnt ignorieren. Dein QR-Code-Generator ist jetzt dauerhaft gesichert.

Schritt 5: Der App einen eigenen Namen geben

Die zufällige Adresse lässt sich jederzeit umbenennen. Klicke unterhalb deines Projekts auf «Quick Setup» und wähle einen gewünschten Namen. Für dieses Tutorial haben wir deeds-qr gewählt, damit lautet der Link neu deeds-qr.netlify.app. Diesen Namen kannst du später jederzeit unter den Einstellungen wieder ändern.

Falls du bereits eine eigene Domain besitzt (z.B. deeds-qr.ch) könntest du diese in einem nächsten Schritt mit deiner Web-App verbinden. Du kannst auch direkt über Netlify eine neue Domain kaufen. Zudem ist es möglich, deine Seite mit einem Passwort zu schützen.

Lust auf mehr KI?

Ein QR-Code-Generator ist nur ein Anfang. In unseren KI-Workshops zeigen wir dir weitere Anwendungen, Tools und Lifehacks für den Alltag und ordnen auch Themen wie Ethik und Datenschutz praxisnah ein.

Weitere Infos zu unseren KI-Workshops findest du hier: https://www.deeds.ch/ki-workshops