Vibe Coding ist GENIAL! — Transcript

Cloud Code macht gerade etwas möglich, das vor 3 Jahren noch absolut unvorstellbar gewesen wäre: eine komplette Webanwendung in Minuten zu erstellen, die dir potenziell Geld machen, Arbeit abnehmen und Zeit zurückgeben kann. Dieses Video ist ein kostenloser Schritt-für-Schritt-Grundkurs, indem ich dir einmal zeige, wie du auch als absoluter Beginner mit Cloud Code richtig starke Webapps bauen kannst. Wir müssen uns jetzt im ersten Schritt nur einmal anschauen, welche Komponenten du eigentlich brauchst, wenn du eine Webapp erstellen möchtest. Das ist der wichtigste Teil von diesem Video, denn die meisten bekommen ihre Webanwendung nur deshalb nicht zum Laufen, weil sie hier nicht die richtigen Entscheidungen treffen. Dabei ist es eigentlich ganz einfach. Du brauchst für eine Webapp nur vier Bestandteile, und das sind ein KI-Agent, eine Datenbank, ein Server und GitHub. Mit diesen vier Bestandteilen kannst du dir schon richtig professionelle Webapps bauen. Ich zeig dir jetzt einmal das genaue Setup, das ich auch nutze, wenn ich Webapps oder Webseiten mit Cloud Code erstelle. Das Setup, das ich nutze, besteht aus Cloud Code, Hostinger, GitHub und Supabase. Und in meinen Augen ist das eine wirklich starke Kombination. Zum einen, weil Cloud Code hier fast alles automatisieren kann. Es kostet sehr wenig. Also GitHub und Supabase sind hier gratis. Hostinger kostet 4 € im Monat, Cloud Code kostet 15 € im Monat. Und weil wir Hostinger und Supabase in Deutschland hosten können, ist es auch aus DSGVO-Sicht eine sehr valide Kombination. Der erste Schritt ist hier also, dich für eine KI zu entscheiden, die dir am Ende des Tages die Webapp entwickelt. Das müsste jetzt nicht Cloud Code sein. Du kannst hier theoretisch auch mit Codex arbeiten. Die Tools funktionieren am Ende des Tages alle sehr ähnlich. Für den Start empfehle ich dir aber, mit Cloud Code anzufangen. Wenn du gut damit wirst, dann wirst du später auch keine Probleme haben, auf Codex zu wechseln, weil sich diese Tools, wie gesagt, sehr stark ähneln. Wenn wir mal ins Pricing von Cloud schauen, dann sehen wir: Cloud Pro kostet stand jetzt 15 € im Monat bei jährlicher Abrechnung. Bei monatlicher Abrechnung sind das 18 € im Monat. Aber das ist die Voraussetzung, damit wir hier auf Cloud Code zugreifen können und uns davon die Webapp entwickeln lassen können. Als nächstes brauchen wir natürlich einen Server, wo am Ende deine Webanwendung liegt. Und hier empfehle ich dir für den Einstieg ganz klar Hostinger. Zum einen, weil es super einfach einzurichten ist. Du bekommst hier gleich einen Server in Deutschland, also das ist auch sehr gut, wenn du DSGVO-konform sein musst. Mit dem Node.js-Webhosting kannst du hier fünf Apps gleichzeitig hosten und du bekommst für ein Jahr außerdem die Domain und die Business-E-Mail gratis dazu, und das alles für 4 € im Monat ist hier schon ein sehr guter Deal. Außerdem, und das ist meiner Meinung nach das Beste, hat Hostinger Verbindung zu jedem der anderen Tools, die wir in diesem Workflow benutzen. Bis hierhin hast du also das KI-Tool und den Server. Also Cloud Code erstellt die Webapp und Hostinger sorgt dafür, dass sie dann online erreichbar ist. Die Frage ist nur, wie bekommen wir jetzt diesen Code, den Cloud Code ja auf unseren Rechner erstellt, auf den Hostinger-Server. Die einfachste Möglichkeit wäre das hier theoretisch per Hand zu machen, also dich in deinen Server einzuloggen und dann die Dateien immer von deinem Rechner in diesen Server reinzukopieren. Das würde theoretisch sogar funktionieren. Die professionelle Variante ist dafür aber, GitHub zu nutzen. Und GitHub ist einfach gesagt eine Cloud, aber für deinen Code. Cloud Code kann sich automatisch damit verbinden und den Code, den du erstellst, selbstständig dort reinladen, und Hostinger kann sich ebenfalls mit GitHub synchronisieren, sodass die Änderungen direkt in deiner Website angezeigt werden, ohne dass du was in GitHub selbst machen musst. GitHub ist also einfach gesagt die Brücke zwischen Cloud Code und Hostinger, und es ist eines der grundlegendsten Tools, wenn du irgendwas entwickeln möchtest. Check an der Stelle gerne mal aus, dass du hier bei GitHub ein Konto angelegt hast. Den Link zur Seite findest du in der Videobeschreibung, und dann kannst du dir einfach über den Button für GitHub registrieren ein Konto anlegen. Das ist jetzt keine Pflicht. Du kannst das Video auch einfach nur schauen, um zu lernen, wie es funktioniert. Aber gerade, wenn dich das Thema Agentic Engineering interessiert, dann solltest du hier auf jeden Fall einen GitHub-Account haben. So, und zuletzt brauchst du eine Datenbank, damit deine App-Daten auch dauerhaft gespeichert werden können. Und an dieser Stelle kann ich dir sehr empfehlen, hier Supabase zu verwenden. Das Ganze ist komplett gratis. Du hast auch hier wieder eine super einfache Einrichtung, und der Vorteil ist, dass sowohl Cloud Code als auch Hostinger sich mit Supabase verbinden können. Also das Schöne an Supabase ist eigentlich, dass du am Ende des Tages gar nicht reinschauen musst. Du erstellst hier einen Account, verbindest dann deinen Cloud Code damit, und die KI kümmert sich darum, dass dann in der Datenbank alles angelegt wird und das Ganze für dich eingerichtet wird. Supabase kannst du außerdem in Deutschland hosten, was natürlich wichtig ist, wenn du DSGVO-konform sein musst. Außerdem übernimmt Supabase hier gleich das Thema Authentifizierung für uns, was ein sehr anspruchsvolles Thema sein kann, wenn du das hier selbst entwickeln müsstest. Geh also an der Stelle auch gerne mal auf die Seite von Supabase, die verlinke ich dir natürlich auch unten in der Videobeschreibung. Dann gehst du ja einmal oben rechts auf den Button Sign in, und hier kannst du dich wieder kostenlos registrieren bzw. kannst dich hier auch gleich in GitHub anmelden, wenn du gerade ein Konto erstellt hast, umso besser. Und Supabase wird auch für unsere App komplett kostenlos sein. Wir müssen ja auch keine Zahlung hinterlegen oder so. Du erstellst hier wirklich einfach nur das Konto, speicherst deine Anmeldedaten und musst erstmal nicht mehr reinschauen. So, und damit weißt du jetzt, was die vier wichtigsten Komponenten sind. Erstens haben wir einen KI-Agenten, nämlich Cloud Code, mit dem wir chatten und der uns diese Webapp erstellt. Cloud Code kümmert sich dann darum, dass der Code zum einen bei GitHub landet und unsere Datenbank Supabase richtig eingerichtet ist, und Hostinger, das ist dann der Server, wo am Ende des Tages unsere App läuft und womit wir sicherstellen, dass jeder auf unsere Apps zugreifen kann. Hostinger hat außerdem eine Verbindung zu Supabase, worüber dann die Authentifizierung und die Datenspeicherung erledigt wird. Aber die Hauptaufgabe von Hostinger ist, dass die Website online ist und von den Nutzern gesehen werden kann. Und Hostinger und Supabase, das sind am Ende die beiden kritischen Komponenten, wo Nutzerdaten verarbeitet werden. Also hier müssen wir entsprechend der DSGVO aufpassen, dass diese beiden Server auf jeden Fall in Deutschland stehen. Das Schöne an diesem Setup ist jetzt, dass du hier nur lernen musst, wie du mit Cloud Code richtig arbeitest. Also GitHub, Hostinger, Supabase, das sind am Ende einfach nur Accounts, die du dir einmal erstellst, aber dieses System, das läuft dann komplett im Hintergrund. Wenn es also eine Sache gibt, die du jetzt aus diesem Video mitnehmen solltest, dann sollte es jetzt einmal sein, dir die Gratis-Accounts bei GitHub und Supabase zu erstellen und den Cloud Pro-Plan zu holen, damit du hier auf Cloud Code zugreifen kannst. Der Hostinger-Server ist ebenfalls entscheidend und kostet nur 4 € im Monat. Wie wir den einrichten, das zeige ich dir gleich. Wenn du das gemacht hast, herzlichen Glückwunsch, hast du jetzt schon mal ein super einfaches, aber richtig starkes Setup. So, und als Webapp für dieses Video habe ich mir Folgendes überlegt: Wir können uns einen Abotracker bauen, der uns eine Übersicht darüber gibt, wie viel Geld wir pro Monat...

Grundkurs, indem ich dir einmal zeige, wie du auch als absoluter Beginner Dancloud Code richtig starke Webapps bauen kannst. Wir müssen uns jetzt im ersten Schritt nur einmal anschauen, welche Komponenten du eigentlich brauchst, wenn du eine Webapp erstellen möchtest. Das ist der wichtigste Teil

von diesem Video, denn die meisten bekommen ihre Webanwendung nur deshalb nicht zum Laufen, weil sie hier nicht die richtigen Entscheidungen treffen.

Dabei ist es eigentlich ganz einfach. Du brauchst für eine Webapp nur vier Bestandteile und das sind ein KI Agent, eine Datenbank, ein Server und GitHub.

Mit diesen vier Bestandteilen kannst du dir schon richtig professionelle Webapps bauen. Ich zeig dir jetzt einmal das genaue Setup, dass ich auch nutze, wenn ich Webapps oder Webseiten mit Cloud Code erstelle. Das Setup, das ich nutze, besteht aus Cloud Code, Hostinger, Gitup

und Superbase. Und in meinen Augen ist das eine wirklich starke Kombination. Zum einen, weil Cloud Code hier fast alles automatisieren kann. Es kostet sehr wenig. Also GitHub und Superbase sind hier gratis. Hostinger kostet 4 € im Monat, Cloud Code kostet 15 € im

Monat. Und weil wir Hostinger und Superbase in Deutschland hosten können, ist es auch aus DSGVO Sicht eine sehr valide Kombination. Der erste Schritt ist hier also dich für eine KI zu entscheiden, die dir am Ende des Tages die Webapp entwickelt. Das müsste jetzt

nicht Cloud Code sein. Du kannst hier theoretisch auch mit Codex arbeiten. Die Tools funktionieren am Ende des Tages alle sehr ähnlich. Für den Start empfehle ich dir aber mit Cloud Code anzufangen. Wenn du gut damit wirst, dann wirst du später auch keine Probleme

haben auf Codex zu wechseln, weil sich diese Tools wie gesagt sehr stark ähneln. Wenn wir mal ins Pricing von Cloud schauen, dann sehen wir Cloud Pro kostet stand jetzt 15 € im Monat bei jährlicher Abrechnung. Bei monatlicher Abrechnung sind das 18 € im Monat. Aber

das ist die Voraussetzung, damit wir hier auf Cloud Code zugreifen können und uns davon die Webapp entwickeln lassen können. Als nächstes brauchen wir natürlich einen Server, wo am Ende deine Webanwendung liegt. Und hier empfehle ich dir für den Einstieg ganz klar

Hausdinger. Zum einen, weil es super einfach einzurichten ist. Du bekommst hier gleich einen Server in Deutschland, also das ist auch sehr gut, wenn du DSGVO Compli sein musst. Mit dem NOJs Web Hosting kannst du hier fünf Apps gleichzeitig hosten und du bekommst für

ein Jahr außerdem die Domain und die Business E-Mail gratis dazu und das alles für 4 € im Monat ist hier schon sehr guter Deal. Außerdem, und das ist meiner Meinung nach das Beste, hat Hostinger Verbindung zu jedem der

anderen Tools, die wir in diesem Workflow benutzen. Bis hierhin hast du also das KI Tool und den Server. Also Cloud Code erstellt die Webapp und Hostinger sorgt dafür, dass sie dann online erreichbar ist. Die Frage ist nur, wie bekommen wir jetzt diesen Code,

den Cloud Code ja auf unseren Rechner erstellt, auf den Hostinger Server. Die einfachste Möglichkeit wäre das hier theoretisch per Hand zu machen, also dich in deinen Server einzuloggen und dann die Dateien immer von deinem Rechner in diesen Server reinzukopieren.

Das würde theoretisch sogar funktionieren. Die professionelle Variante ist dafür aber Gitub zu nutzen. Und GitHub ist einfach gesagt eine Cloud, aber für deinen Code. Cloud Code kann sich automatisch damit verbinden und den Code, den du erstellst, selbstständig dort reinladen und

Husinger kann sich ebenfalls mit GitHub synchronisieren, sodass die Änderungen direkt in deiner Website angezeigt werden, ohne dass du was in GitHub selbst machen musst. Getub ist also einfach gesagt die Brücke zwischen Cloud Code und Hostinger und es ist eines der

grundlegendsten Tools, wenn du irgendwas entwickeln möchtest. Check an der Stelle gerne mal aus, dass du hier bei Gitub ein Konto angelegt hast. Den Link zur Seite findest du in der Videobeschreibung und dann kannst du dir einfach über den Button für GitHub

registrieren ein Konto anlegen. Das ist jetzt keine Pflicht. Du kannst das Video auch einfach nur schauen, um zu lernen, wie es funktioniert. Aber gerade, wenn dich das Thema Agentic Engineering interessiert, dann solltest du hier auf jeden Fall einen Gitub Account haben. So

und zuletzt brauchst du eine Datenbank, damit deine Appdaten auch dauerhaft gespeichert werden können. Und an dieser Stelle kann ich dir sehr empfehlen, hier für Superbase zu verwenden. Das Ganze ist komplett gratis. Du hast auch hier wieder eine super einfache Einrichtung

und der Vorteil ist, dass sowohl Cloud Code als auch Hostinger sich mit Superbase verbinden können. Also das Schöne an Superbase ist eigentlich, dass du am Ende des Tages gar nicht reinschauen musst. Du erstellst hier einen Account, verbindest dann deinen

Cloud Code damit und die KI kümmert sich darum, dass dann in der Datenbank alles angelegt wird und das Ganze für dich eingerichtet wird. Superbase kannst du außerdem in Deutschland hausten, was natürlich wichtig ist, wenn du DSGVO konform sein musst. Außerdem übernimmt

Superbase hier gleich das Thema Authentifizierung für uns, was ein sehr anspruchsvolles Thema sein kann, wenn du das hier selbst entwickeln müsstest. Geh also an der Stelle auch gerne mal auf die Seite von Superbase, die verlinke ich dir natürlich auch unten in der

Videobeschreibung. Dann gehst du ja einmal oben rechts auf den Button Sign in und hier kannst du dich wieder kostenlos registrieren bzw. kannst dich hier auch gleich in Gitub anmelden, wenn du gerade ein Konto erstellt hast, umso besser. Und Superbase wird auch für

unsere App komplett kostenlos sein. Wir müssen ja auch keine Zahlung hinterlegen oder so. Du erstellst hier wirklich einfach nur das Konto, speicherst deine Anmeldedaten und musst erstmal nicht mehr reinschauen. So und damit weißt du jetzt, was die vier wichtigsten

Komponenten sind. Erstens haben wir einen KI-Agenten, nämlich Cloud Code, mit dem wir chatten und der uns diese Webapp erstellt. Cloud Code kümmert sich dann darum, dass der Code zum einen bei Gitter landet und unsere Datenbank Superbase richtig eingerichtet ist und

Hostinger, das ist dann der Server, wo am Ende des Tages unsere App läuft und womit wir sicherstellen, dass jeder auf unsere Appus zugreifen kann. Hostinger hat außerdem eine Verbindung zu Superbase, worüber dann die Authentifizierung und die Datenspeicherung erledigt wird. Aber die

Hauptaufgabe von Hostinger ist, dass die Website online ist und von den Nutzern gesehen werden kann. Und Hostinger und Superbase, das sind am Ende die beiden kritischen Komponenten, wo Nutzerdaten verarbeitet werden. Also hier müssen wir entsprechend der DSGVO aufpassen, dass

diese beiden Server auf jeden Fall in Deutschland stehen. Das Schöne an diesem Setup ist jetzt, dass du hier nur lernen musst, wie du mit Cloud Code richtig arbeitest. Also GitHub, Hostinger, Superbase, das sind am Ende einfach nur Accounts, die du dir einmal erstellst,

aber dieses System, das läuft dann komplett im Hintergrund. Wenn es also eine Sache gibt, die du jetzt aus diesem Video mitnehmen solltest, dann sollte es jetzt einmal sein, dir die Gratis Accounts bei Gitub und Superbase zu erstellen und den Cloud Proan zu holen,

damit du hier auf Cloud Code zugreifen kannst. Der Hausdinger Server ist ebenfalls entscheidend und kostet nur 4 € im Monat. Wie wir den einrichten, das zeige ich dir gleich. Wenn du das gemacht hast, herzlichen Glückwunsch, hast du jetzt schon mal ein super

einfaches, aber richtig starkes Setup. So und als Web für dieses Video habe ich mir folgendes überlegt. Wir können uns einen Abotracker bauen, der uns eine Übersicht darüber gibt, wie viel Geld wir pro Monat eigentlich ausgeben. Die App soll dann später auch Analysen

erstellen, die zeigen, wie sich unsere Ausgaben entwickelt haben und neue Nutzer sollen sich online auch direkt registrieren und einloggen können. Das ist auf jeden Fall eine super Möglichkeit, um dich hier mit dem ganzen Prozess vertraut zu machen. Natürlich,

wenn du schon eine Idee hast, dann kannst du das hier auch gerne direkt umsetzen. Die Schritte zum Erstellen der Webapp sind am Ende eigentlich die gleichen. Stellst also an dieser Stelle einmal sicher, dass du dir die Cloud App

heruntergeladen hast, damit wir gleich Cloud Code benutzen können. Den Link zur Downloadseite, den packe ich dir natürlich ebenfalls in die Videobeschreibung. Und wenn du dir jetzt wenigstens auch nur mal für einen Monat Cloud Pro holst, dann solltest du hier

oben links in der Seitenleiste neben dem Reiter Chat auch den Reiter Code sehen und über den kommen wir jetzt in Cloud Code rein. Ein wesentlicher Unterschied zwischen Cloud und Cloud Code ist, dass Cloud Code immer in einem Ordner

arbeiten muss. Also während du hier beim normalen Cloud Chatboard deine Dateien immer hoch und runterladen musst, arbeitet Cloud Code immer in einem Ordner auf deinem Rechner. Deshalb ist der erste Schritt hier für uns einen neuen Ordner für diese Webapp zu

erstellen, in der dann Cloud Code die entsprechenden Dateien anlegen kann. Ich habe jetzt z.B. in meinen Dokumenten einen Ordner namens Cloud Code, wo ich jetzt alle meine Projekte speichere. Du kannst den Ordner aber auch irgendwo ablegen, wo du ihn wiederfindest.

Wichtig ist, du gehst jetzt hier einmal auf neuer Ordner, können dieses Projekt jetzt z.B. Abotracker nennen. Und jetzt sehen wir, haben wir hier unseren leeren Ordner Abotracker. Genau, den wollen wir zu Cloud Code hinzufügen. Dafür gehst du hier einmal auf den Button und dann auf

Ordner öffnen. Und dann suchst du einmal den entsprechenden Ordner und drückst dann auf öffnen und schon haben wir Cloud Code zu diesem Ordner hinzugefügt.

Jetzt ist auch ein guter Moment gekommen, um unser Cloud Code mit Superbase zu verbinden. Keine Sorge, das geht wirklich super einfach. Du brauchst hier, wie gesagt nur einen Superbase Account. Dafür öffnest du hier oben links einmal die Seitenleiste und gehst

auf den Button anpassen. Dann gehst du hier links einmal auf den Button Connectoren. Jetzt siehst du hier alle Apps, auf die Cloud zugreifen kann. Dann gehst du hier oben einmal auf das Plus Connectors durchsuchen und hier gehen wir jetzt Superbase ein. Dann siehst du

hier den entsprechenden Connector. Kannst dann da einmal auf das Plus gehen und jetzt sollte sich diese Seite hier öffnen, wo du deinen Cloud mit Superbase verbinden kannst. Klickst dann hier einmal auf authorized Cloud und schon siehst du, sind wir hier verbunden. Er

schickt uns jetzt zurück zur Cloud App und du siehst, dass wir Cloud jetzt mit Superbase verbunden haben. Und das war auch schon alles. Wir müssen theoretisch nicht mehr in Superbase reinschauen, denn Cloud Code wird jetzt über diese Verbindung automatisch das

Datenbankschema und die Authentifizierungslogik anlegen können. So und du könntest jetzt an der Stelle natürlich zu Cloud Code gehen und dem sagen: "Hey Cloud, programmiere mir die Webapp, leg mir die Datenbank an etc.

Das kannst du theoretisch machen und er wird dir die Webapp auch erstellen. Ich empfehle dir aber für den Anfang, das Ganze mit Cloud Code einmal sauber durchzuplanen. Nicht um das Projekt hier unnötig aufzubläen, sondern damit Cloud Code einen klaren Auftrag hat und du

später nicht mehr so viel korrigieren musst. Dafür gehst du hier unten links in Cloud Code einmal auf den Modus Button und wählst dann den Planmodus aus. In diesem Modus erstellt Cloud Code also hier erstmal einen Plan, bevor er

anfängt irgendwas zu programmieren. Also genau das, was wir haben wollen. Wir hier unten rechts einmal das neueste Modell aus. Aufwand würde ich jetzt mal auf extra stellen und dann schreiben wir jetzt Cloud Code einmal, was für eine App wir genau mit ihm erstellen möchten.

Wenn du jetzt den Abotracker mitmachen willst, dann kannst du jetzt von diesem Prom deiner Cloud Code Instanz einfach ein Screenshot schicken. Wenn du deine eigene App erstellen willst, kannst du hier einen ähnlichen Prompt schreiben.

Wichtig ist vom Aufbau her, dass du ihm einmal klar sagst, was für eine App du genau mit ihm erstellen möchtest und welche Funktion diese App enthalten soll. Dann auch, was für eine Datenbank du nutzen möchtest. In unserem Fall ist

das ja jetzt Superbase gehostet in Frankfurt und auf welchem Server das Ganze später laufen soll. In unserem Fall ist das ja Hostinger. Lass dir auch von Cloud Code immer gleich einen Admin User mit Testdaten erstellen, damit du die App entsprechend ausprobieren

kannst. Und ich lasse mir von ihm immer gerne Rückfragen stellen, um Unklarheiten aus dem Weg zu räumen, bevor ihr anfängt die App zu planen. Und hier im letzten Satz gebe ich ihm noch ein paar Hinweise zum Hostinger Setup

mit. Wenn du auch Hostinger benutzt, dann kannst du sie an dieser Stelle einmal kopieren. So, dann würde ich sagen, schicken wir das Ganze einmal ab und warten darauf, dass er uns hier den entsprechenden Plan erstellt. So, jetzt siehst du, kommt er hier zurück mit

entsprechenden Rückfragen. Er sieht z.B., dass wir jetzt noch kein Superbase Projekt haben und fragt, ob er hier direkt eins in Frankfurt anlegen soll.

Da sagen wir natürlich ja, dass er das anlegen soll. Er fragt uns jetzt, welche extra Funktion der Abo Tracker haben soll. Hier würde ich sagen, wähen wir einfach mal alles aus. Das ist jetzt eine Frage, die müsstest du wissen.

Würde Cloud Code aber theoretisch auch so rausfinden. Hostinger legt nach der Verbindung mit Superbase den Secret Key und nicht den Publishable Key an. So, damit sind die Fragen einmal beantwortet und er sollte sich jetzt losmachen und dieses Projekt für uns durchplanen. Er

ist jetzt nach ca. 5 Minuten fertig und präsentiert uns diesen Plan hier einmal. Unsere Aufgabe ist es jetzt uns diesen Plan einmal genau durchzulesen, um zu prüfen, ob er hier auch alles richtig verstanden hat oder ob wir ihm zu ein

paar Punkten noch mal Feedback geben sollten. Er hat hier z.B. das Datenmodell für Superbase ausgearbeitet, hat sich hier für eine Projektstruktur entschieden und hat das ganze Dashboard mit der entsprechenden Aboliste einmal durchgeplant. Ich denke, er hat alle richtigen Themen verstanden. Also, er

braucht jetzt in dem Fall kein Feedback zu diesem Plan. Und alles, was wir jetzt machen müssen, damit er uns diese App programmiert, ist hier auf den Button akzeptieren und Automodus zu gehen. Da klicke ich jetzt einmal rauf und er

sollte direkt anfangen, diese Website für uns zu erstellen. Das kann jetzt hier auf jeden Fall ein bisschen dauern, bis er fertig ist mit dem Programmieren und dann würde ich sagen, sehen wir uns gleich. So, er ist jetzt damit fertig.

Das heißt, er hat uns diese Webapp jetzt einmal erstellt. Und was ich dir einmal zeigen möchte, wenn wir jetzt hier in unseren Abootracker Ordner schauen, der war ja vorher leer, dann sehen wir aber, dass jetzt eine ganze Reihe von Dateien

da drin sind. Das ist hier also am Ende der Code von unserer Webapp. Der liegt hier erstmal nur auf unserem Computer, also die Webapp ist noch nicht online erreichbar. Trotzdem können wir das Ganze jetzt direkt einmal lokal austesten. Er hat den Server also auf

unserem Computer gestartet und uns hier gleich einen Link mitgegeben. Ja, und wenn wir den einmal anklicken, dann kommen wir jetzt hier zu unserer lokalen App. Wir sind hier auch schon eingeloggt. Theoretisch hat er uns ja aber extra ein Adminkonto angelegt und

ich würde sagen, schauen wir mal, ob wir uns auch so einloggen können. Ich gehe mal auf einloggen und ja, schon bin ich jetzt in der App drin und ich muss sagen, die sieht ja auch wirklich schön aus. Also, ich find es wirklich toll,

wie er das Ganze designed hat mit den monatlichen Ausgaben, die man jetzt so schön sieht. Wir sehen auch, wie viel uns das im Jahr kostet, wie viele aktive Abos wir haben, wann die nächsten Zahlungen sind und für welche Kategorien

wir Geld ausgeben. Und hier sehen wir jetzt alle Abos, die wir hier auch einmal bearbeiten bzw. löschen können.

Und wir haben hier auch über dem Button direkt die Möglichkeit, neue Abos hinzuzufügen. Und wenn wir jetzt einmal in unseren Superbase Account reinschauen, dann sehen wir, dass er hier das Projekt auch entsprechend angelegt hat. Wir sehen, dass die

Datenbank jetzt auch in Frankfurt steht. Und wenn wir uns das Datenbank Schema sehen wir, hat er das ja auch komplett selbständig für uns erstellt. Also mega gut. Ich bin sehr zufrieden, wie die App aussieht und auch wie sie funktioniert.

Und das Schöne ist eben, dass Cloud Code diese App jetzt erstmal lokal auf unserem Rechner oder Laptop erstellt.

Das heißt, du kannst damit rumexerimentieren, du kannst dir ausprobieren, wie du möchtest und im zweiten Schritt kannst du dann, wenn du die App entsprechend getestet hast, sie auch online stellen. Und dafür musst du im nächsten Schritt diesen Code jetzt

einmal auf Gitub hochladen. Gitub ist wie gesagt die Cloud für unseren Code, in der dann immer die aktuelle Version von unserer Webapp lebt und der Hostinger Server, der zieht sich dann noch immer die neueste Version direkt von Gitup. Das heißt, wenn du das noch

nicht gemacht hast, dann registriere dich jetzt gerne einmal bei Gitub. Erstelle dir hier ein entsprechendes Konto. Jetzt musst du dein Cloud Code nur entsprechend mit GitHub verbinden.

Das geht auch super einfach. Dafür öffnest du hier einmal die Seitenleiste, klickst auf den Button anpassen. Jetzt sollte dir hier in der Seitenleiste die Gitub Integration angezeigt werden. Da kannst du dann einmal auf Verbinden drücken. Dann meldest du dich eventuell

einmal mit deinem Gitub Konto an und schon siehst du, sind wir hier verbunden. Also auch das geht super einfach. Damit ist unser Cloud Code jetzt mit Gitub verbunden und kann den Code da automatisch hochladen. Nur damit du verstehst, wie Gitub funktioniert.

Bei Gitub wird der Code immer in sogenannten Repositories gespeichert. Das sind einfach gesagt deine verschiedenen Projekte. Also zu jedem Projekt wird ein neues Repository angelegt. Es ist einfach wichtig, dass du weißt, zu jedem Codingpjekt gibt's ein entsprechendes Repository auf

GitHub. Aber du musst jetzt nicht wissen, wie genau du dir das Repository anlegst. Das macht hier Cloud Code für dich. Dafür schreibe ich ihm ja einmal, bitte lade den Code jetzt auf Gitub hoch und erstelle ein neues Projekt in

Klammern Repository. Schicken das Ganze einmal ab und schon wird er sich jetzt daran machen und den Code hier für uns automatisch auf GitHub hochladen. Der Code auf GitHub wird dann etwas sein, dass Programmierer eine Single Source of Truth nennt, einen einzigen Punkt, an

den der vereinbarte Code liegt. Es kann also sein, dass später mehrere Teammitglieder an verschiedenen Versionen von deinem Code arbeiten, aber auf GitHub wird immer die richtige Version online sein, auf die sich alle einigen können. Und deshalb ist es auch

besser, wenn sich der Server am Ende den Code später direkt von Gitub zieht. Jetzt fragt ihr uns hier, ob das Gitter Repository privat oder öffentlich sein soll. Hier sagen wir auf jeden Fall privat. Wir wollen ja nicht, dass unser

Code irgendwie öffentlich einsehbar ist. Wie soll das Projekt heißen? Ich finde den Namen Abotracker schon mal ganz gut.

So, jetzt braucht er hier kurz und lädt das ganze Projekt dann entsprechend hoch. Er hat jetzt hier das Repository erstellt und wenn wir einmal in GitHub schauen, dann sehen wir das Ganze auch.

Also der Code, der vorher auf unserem Rechner lag in, der liegt jetzt in unserer privaten Cloud direkt in GitHub.

Damit kommen wir zum letzten, aber wichtigsten Schritt und das ist den Server zu holen und unsere Appline zu bringen. Das schaffen leider, wie gesagt, nur die wenigsten, dabei es ist ein super wichtiger Schritt auch, dass du einmal weißt, wie das Ganze

funktioniert. Und wir nutzen hierfür, wie gesagt das Node JS Web Hosting von Hostinger. Geh dafür jetzt einmal gerne auf diese Seite hier, klick dafür auf den ersten Link in der Videobeschreibung. Hier gehen wir jetzt einmal auf Pläne ansehen und hier sehen

wir das entsprechende 4 € Angebot. Also für 4 € bekommen wir fünf Webapps, eine kostenlose Domain für ein Jahr, eine kostenlose Business E-Mail für ein Jahr und diese ganzen weiteren Punkte. Also geh hier einmal auf Plan wählen. Den

Zeitraum kannst du auf 48 Monate stellen oder auch z.B. erstmal nur auf 12 Monate. Das ganze kostet dann, wie du siehst, nur 64 € und du bekommst ja wie gesagt auch noch gratis deine Domain dazu. Das heißt, ich kann hier z.B.

direkt schauen, ob jetzt die Domain abo-track.com noch verfügbar ist. Und tatsächlich ist das der Fall. Das heißt, ich kann die ja einmal auswählen und dann sehen wir, bekommen wir die hier für ein Jahr auch komplett gratis mit dazu. Du kannst das

hier auch erstmal weglassen und später deine eigene Domain zu deiner Webpp hinzufügen. Das geht hier in Hostinger auch ganz einfach. Gehen dann hier einmal auf weiter. Dann musst du dich eventuell hier mit deinem Hostinger Account anmelden. Gibst dann einmal die

Rechnungsdaten ein. Und wichtig, bevor du das Ganze jetzt bezahlst, gehst du hier auf Haben Sie einen Rabattcode, gibst den Code Jonas 10 ein und dann bekommst du jetzt noch mal 10 % extra Rabatt. Also du bekommst hier fünf

Webapps plus Domain plus die Business E-Mail für unter 60 €. Also das schon ein sehr sehr guter Preis. Ich zahle das Ganze jetzt einmal mit PayPal. Dann gehst du hier einmal auf loslegen, sagen jetzt, dass wir hier eine neue Website

erstellen wollen. Personalisierung können wir einmal überspringen. Gehen dann hier unten links auf Nodejs Webapp und drücken einmal auf weiter. Jetzt stellen wir hier sicher, dass wir einmal die Domain nehmen, die wir vorhin angegeben haben. Drücken dann einmal auf

weiter. Den Serverstandort stellen wir einmal auf Deutschland und wir haben unseren Code ja auf GitHub hochgeladen, damit der Hostinger Server sich jetzt automatisch die Updates von da ziehen kann. Und hier gehen wir jetzt links, also einmal auf weiter mit GitHub. Hier

musst du dich dann einmal mit deinem GitHub Account anmelden und hier sehen wir jetzt alle Projekte, die wir mal mit Gitub erstellt haben. Wir wählen jetzt einmal den Abotracker aus und drücken auf weiter. Jetzt importiert er hier automatisch dieses Projekt. Das ganze

passt erstmal soweit. Deshalb drücke ich jetzt auf bereitstellen und wenn irgendwas nicht klappen sollte, dann sehen wir das hier in der Regel immer im Bildprotokoll. Wir klicken jetzt hier noch einmal auf den Button zum Dashboard. Sind jetzt hier in unserem

Abotrack Dashboard drin und hier sehen wir diesen Punkt Datenbank. Da gehst du jetzt einmal auf verbinden und jetzt siehst du wird uns hier Superbase gleich vorgeschlagen. Da gehst du dann einmal auf weiter können dann eine bestehende Datenbank verbinden. Die hat Cloud Code

ja schon für uns angelegt und das ist genau diese Abocker Datenbank. Hier drücken wir einmal auf weiter. Jetzt zeigt ihr hier den Code, wie wir die Datenbank richtig einbinden können. Das sollte Cloud Code mit unseren Hinweisen eigentlich schon gemacht haben. Sollte

es bei dir irgendwie einen Fehler geben, dann kannst du ihm einfach auch noch mal ein Screenshot hiervon schicken. Sagen dann, dass wir die erforderlichen Änderungen vorgenommen haben und drücken einmal auf fertig. Und dann gehen wir einmal auf Datenbank verbinden. So,

jetzt sehen wir gleich, das Projekt wird ja auch neu bereitgestellt. Wir sehen, wir haben jetzt Superbase als unsere Datenbank verbunden. Was jetzt im Grunde genommen einfach passiert ist, ist, dass Hostinger die geheimen Schlüssel zur Datenbank hier als Umgebungsvariablen

angelegt hat. Also, wir sehen, dass jetzt hier die Superbase URL und der Superbase API Key als Umgebungsvariablen in diesem Projekt zur Verfügung stehen.

Und unsere App kann dann mit diesen beiden Geheimnissen arbeiten. Was du dann an dieser Stelle einmal machen musst, falls du jetzt eine neue Domain gekauft hast, du musst die ja einmal registrieren und verbinden. Hostinger führt dich da komplett durch, also es

sind insgesamt wirklich nur drei Klicks und dann sollte die Website entsprechend online sein. Wenn du nicht direkt darauf Zugriff hast, dann kann es sein, dass du einmal kurzfristig dein Internet wechseln musst, weil es bei dir im Heimnetz eventuell länger dauert, bis

die Änderung auch durchgekommen ist. Und damit würde ich sagen, lass uns jetzt mal testen, ob das Ganze hier auch wirklich funktioniert. Dafür können wir ja einfach auf diesen Link abrack.com gehen. Jetzt lädt es kurz und wir sehen, wir sind jetzt in der App drin. Testen

wir einmal aus, ob wir uns hier mit unseren Admdaten noch anmelden können. Gehen dann hier einmal auf einloggen und wir sehen, wir sind hier jetzt drin. Wir haben auch mit unserem Account immer noch die gleichen Daten, weil er sich

die hier direkt aus der Datenbank gezogen hat. Natürlich kann man jetzt hier auch designtechnisch oder von den Funktionen her noch mal daran arbeiten, aber das Wichtigste hast du jetzt erstmal verstanden und zwar wie man so eine Webapp mit Cloud Code richtig

erstellt und aufsetzt. Dafür schon mal meinen größten Respekt und herzlichen Glückwunsch. Und das Schöne an diesem Setup, alles ist jetzt irgendwie verbunden. Das heißt, wenn ich hier einmal ein Hausdinger gehe, dann sehen wir, dass unsere App jetzt einmal mit

Gitab verbunden ist. Den Code hat Cloud Code hier selbständig hochgeladen und wir sehen, dass die Datenbank Superbase verbunden ist. Und auch dieses Schema hat Cloud Code uns hier selbständig angelegt. Das heißt also frei nach diesem Schema. Diese drei Punkte sind

jetzt mehr oder weniger automatisiert. Wir müssen jetzt, wenn wir eine Änderung an der App machen wollen, nur mit Cloud Code chatten. Z.B. könnten wir sagen, wir möchten hier noch eine Funktion hinzufügen, bei der man für ein Abo auch

ein Enddatum angeben kann. Dafür würde ich jetzt nicht selbst programmieren. Ich würde nicht in Hausdinger schauen, nichts an Gitup schrauben und auch nicht in Superbase. Alles, was ich jetzt mache ist, ich gehe hier zu Cloud Code und gebe ihm meinen Änderungsvorschlag.

Bitte füge jetzt auch eine Funktion hinzu, bei der man für ein Abo ein Enddatum angeben kann. Und sobald du damit fertig bist, lst du den ganzen Code bitte bei Gitab hoch. So, klare Anweisung für Cloud Code. Schicken wir

das Ganze einmal ab. Was also im ersten Schritt passiert, ist, dass jetzt diese Änderung einmal lokal an unserem Code durchführen wird. Er wird das Ganze auch selbstständig testen, um zu validieren, dass die Änderung auch wirklich erfolgreich war. Theoretisch könnten wir

das Ganze dann noch einmal selbst testen, um zu schauen, dass er diese Funktion auch richtig implementiert hat.

Aber wir haben ihm ja gleich dazu gesagt, dass sobald er fertig ist, er das Ganze auch bei GitHub hochladen soll. So und genau das ist jetzt auch der zweite Schritt. Also er hat die Änderung hier lokal gemacht, hat das

ganze Projekt getestet und hat es jetzt auf Gitub hochgeladen. Das heißt, wenn wir hier einmal in unser Gitub reinschauen und ich das Ganze einmal aktualisiere, dann sehen wir, dass er hier jetzt vor einer Minute diese ganzen relevanten Dateien geändert hat, die für

die Änderung jetzt wichtig waren. Und wenn wir hier einmal ein Hostdinger reinschauen, dann sehen wir, dass er diese Änderung auch erkannt hat und hier gleich eine neue Bereitstellung erstellt hat. Und wenn wir dann jetzt noch einmal die Webseite öffnen und ich jetzt hier

einmal auf Abo hinzufügen gehe, dann sehen wir, haben wir jetzt hier auch gleich den Button Enddatum. Du siehst, so einfach geht das am Ende des Tages.

Voraussetzung ist natürlich, dass wir hier einmal den Hostinger Server sauber aufgesetzt haben, so wie wir es auch im Video besprochen haben. Und mit dem Code Jonas 10 bekommst du ja auch noch mal 10 % extra Rabatt auf dein Webhosting. Also

nutzt das Angebot auf jeden Fall. Du siehst, das Ganze ist am Ende des Tages überhaupt nicht schwer. Das war also mein Vibecoding Grundkurs und wenn du mehr davon sehen willst, lass jetzt gerne ein Abo da. Ich würde sagen, bis

zum nächsten Mal. Mach's gut.