Wie Sie eine Web-App mit Hostinger Horizons erstellen

Hostinger Horizons ist ein KI-gestütztes Tool, mit dem Sie Webanwendungen erstellen können, ohne eine einzige Zeile Code zu schreiben. Ob Sie eine Fitness-App für personalisierte Trainingspläne oder ein Tool zur Verwaltung von Freiwilligen für eine gemeinnützige Organisation benötigen, geben Sie einfach Ihre Eingabeaufforderungen („Prompts”) ein, und Hostinger Horizons erledigt den Rest.

Es ist eine ausgezeichnete Wahl für Web-App-Erstentwickler ohne Programmiererfahrung. Auch Solopreneure mit einem begrenzten Budget können davon profitieren, da sie voll funktionsfähige Apps erstellen können, ohne Entwickler einstellen zu müssen.

In diesem Leitfaden erfahren Sie, wie Sie eine Web-App mit Horizons erstellen, von der Idee über die Einrichtung Ihres ersten Projekts bis zum Start für den öffentlichen Zugang. Sie erfahren, wie Sie Ihre Prompts für bessere Ergebnisse verfeinern, wichtige Funktionen effektiv nutzen und die Funktionalität Ihrer App für Ihre Bedürfnisse optimieren können.

Wie Sie In sieben Schritten eine Web-App mit Horizons erstellen

Um den Prozess besser zu veranschaulichen, wie Sie eine Web-App mit dem KI Softwareentwickler “Horizons” erstellen, werden wir in diesem Tutorial eine Fitness-Webanwendung erstellen, die personalisierte Trainings- und Diätpläne auf der Grundlage von Benutzerdaten (wie Alter, Größe, Gewicht, Aktivitätsniveau und bestehende Gesundheitszustände) erstellt.

Wenn Sie an einer anderen Art von Webanwendung arbeiten, können Sie die Prompts und Funktionen entsprechend anpassen.

1. Registrieren Sie sich und starten Sie ein neues Projekt

Beginnen Sie mit dem Besuch der offiziellen Seite von Hostinger Horizons und wählen Sie einen Plan, der Ihren Bedürfnissen entspricht. Ab 19,99 €/Monat bieten alle unsere Pläne die gleichen Funktionen zur Erstellung von Web-Apps und einen Monat kostenloses Hosting. Der Unterschied liegt in den monatlichen Nachrichtenlimits, die bis zu 1.000 Nachrichten gehen.

Bitte beachten Sie, dass sich Hostinger Horizons derzeit in der Early Access-Phase befindet, sodass bei der Nutzung gelegentlich Fehler auftreten können. Aber keine Sorge – es gibt eine 30-Tage-Geld-zurück-Garantie, mit der Sie jederzeit kündigen können, wenn Sie Ihre Meinung ändern.

Nachdem Sie Ihre Zahlung abgeschlossen haben, gehen Sie zum hPanel Dashboard und wählen Websites → Websites-Liste in der linken Seitenleiste. Dann klicken Sie auf Website hinzufügen und wählen Hostinger Horizons.

2. Bedienen Sie das Interface des Tools

Es ist Zeit, mit Hostinger Horizons zu beginnen.

Sie sehen ein Textfeld, in dem Sie Ihren Prompt in mehr als 80 Sprachen schreiben können. Nachdem Sie Ihre Web-App beschrieben haben, drücken Sie Enter.

Hostinger Horizons benötigt einige Augenblicke, um Ihre Eingabe zu verarbeiten. Sobald dies geschehen ist, wird das Dashboard in zwei Bereiche aufgeteilt:

• Linker Bereich – geben Sie hier zusätzliche Prompts ein, um weitere Funktionen hinzuzufügen oder Ihre Web-App zu verfeinern. Unterhalb des Eingabefeldes finden Sie die Anzahl der verbleibenden Nachrichtencredits in Ihrem Plan.
• Rechter Bereich – zeigt eine Echtzeit-Vorschau Ihrer App, während Sie Anpassungen vornehmen. Sie können mit den Elementen interagieren, um ihre Funktionalität zu testen.

In der oberen rechten Ecke des Dashboards finden Sie die Schaltfläche Veröffentlichen, um Ihre Webanwendung zu starten und sie öffentlich zugänglich zu machen.

3. Definieren Sie den Zweck Ihrer Webanwendung

Hostinger Horizons verlässt sich auf gut strukturierte Prompts, um die Webanwendung zu erstellen, die Sie sich vorstellen. Je präziser Ihre Prompts sind, desto besser sind die Ergebnisse.

Wenn Sie den Zweck Ihrer Webanwendung definieren, sollten Sie folgende wichtige Details angeben, damit Hostinger Horizons Ihre Idee versteht:

• Zweck der App – geben Sie klar das Problem an, das Ihre Web-App löst, z. B. „Unterstützung der Benutzer bei der Messung des Fitnessfortschritts”.
• Kernfunktionen – listen Sie die wesentlichen Funktionen auf, die Sie einbeziehen möchten, wie Benutzeranmeldung, Formulare, Dashboards oder Berichte.
• UI-Präferenzen – machen Sie genaue Angaben zu Designelementen wie Layout, Farbschema und Gesamtästhetik.

Hier ein Beispiel für eine Fitnessplattform, die personalisierte Trainings- und Ernährungspläne erstellt:

Erstelle eine Fitnessplattform, die auf der Grundlage von Benutzerdaten personalisierte Trainings- und Ernährungspläne bereitstellt. Die App sollte es den Nutzern ermöglichen, ihr Alter, ihre Größe, ihr Gewicht, ihr Aktivitätsniveau und ihren Gesundheitszustand einzugeben. Auf der Grundlage dieser Daten sollte sie maßgeschneiderte Fitnessroutinen und Essensempfehlungen generieren. Ein benutzerfreundliches Dashboard mit Eingabeformularen, eine Fortschrittsanzeige und eine optisch ansprechende Oberfläche mit einem sauberen, modernen Layout und einem Farbschema in Türkis und Violett sollten ebenfalls enthalten sein.

Wie bei jedem anderen KI-Tool kann es sein, dass das erste Resultat von Hostinger Horizons nicht perfekt ist, egal wie detailliert Ihr erster Prompt war. Wir können auf dieser ersten Iteration der App aufbauen, indem wir Korrekturprompts eingeben.

4. Passen Sie das Design Ihres Projekts an

Der nächste Schritt ist die Anpassung des Designs der Anwendung. Dabei geht es nicht nur darum, Ihre Anwendung optisch ansprechender zu gestalten, sondern auch darum, wichtige Elemente für die Navigation und Funktionalität hinzuzufügen.

Im Folgenden finden Sie einige der wichtigsten Frontend-Komponenten, die Sie in Ihre Anwendung einbauen sollten:

• Menüs – Bereiche wie eine Seitenleiste, eine Registerkarte oder ein Dropdown-Menü, die Verknüpfungen zu verschiedenen Seiten enthalten.
• Formulare – Felder, in die Benutzer Daten eingeben können, z. B. eine E-Mail-Adresse oder ein Bild.
• Seiten – bildschirmfüllende Fenster mit verschiedenen Einstellungen und Informationen.
• Schaltflächen – Elemente, die bestimmte Aktionen ausführen, z. B. Daten übermitteln oder zu einer anderen Seite navigieren.

Wenn Sie einen Wireframe haben, der das Layout der Anwendung und die Platzierung der Elemente detailliert beschreibt, können Sie ihn als Prompt in Hostinger Horizons hochladen. Dies wird zu einem genaueren Resultat führen.

Andernfalls verwenden Sie einen textbasierten Prompt, wie in diesem Beispiel:

Erstellen Sie eine Anmeldeseite, auf der die Benutzer auf ihr Konto zugreifen können. Fügen Sie hier eine Schaltfläche ein, die die Nutzer zur Anmeldeseite weiterleitet, auf der sie ein neues Konto erstellen können, wenn sie noch keins haben.

Vergessen Sie nicht, weitere Details zum Design Ihrer Anwendung hinzuzufügen, z. B. Farben, Textgröße und Schriftart.

5. Verfeinern Sie die Logik und Struktur

Nun, da Sie das Design festgelegt haben, können Sie die Funktionalität der App verfeinern. Der Prozess bleibt derselbe: Sie geben Korrekturprompts zu Aspekten ein, die Sie verbessern möchten.

In dieser Phase beziehen sich die zu verbessernden Bereiche in der Regel auf die Logik und die Funktionen Ihrer Anwendung. Einige der häufigsten sind:

• Businesslogik – die zugrunde liegenden Regeln Ihrer Anwendung. Zum Beispiel sollte Ihre Fitness-App je nach den eingegebenen Gesundheitsdaten unterschiedliche Empfehlungen geben.
• Entscheidungsbaum – der Fluss Ihrer Anwendung basiert auf den Entscheidungen der Nutzer. Wenn ein Benutzer zum Beispiel ein bestimmtes Menü auswählt, sollte eine vorher festgelegte Seite angezeigt werden.
• Ereignisbehandlung („Event Handling”) – die Reaktion auf Benutzeraktionen, wie Klicken, Streichen und Tastendruck. Zum Beispiel sollte ein Toggle umschalten, wenn er angeklickt wird.
• Datenfluss – die Behandlung von Benutzerdaten, wenn sie durch Formulare geleitet, validiert oder hochgeladen werden. Ein Benutzerkennwort muss zum Beispiel eine Textfolge sein, die mit dem Datenbankeintrag übereinstimmt.

Wenn Sie Prompts für Hostinger Horizons schreiben, stellen Sie sicher, dass Sie die Logik oder Funktion, die Sie verbessern wollen, klar beschreiben. Wenn Sie der KI mehr Kontext Ihrer Idee geben, kann sie ein genaueres Resultat produzieren.

Hier ist ein Beispiel für die Verfeinerung des Datenflusses:

Überprüfe die Felder für E-Mail-Adresse und Passwort auf der Anmeldeseite. Vergewissere dich, dass sie nur Textzeichenfolgen akzeptieren, die mit vorhandenen Datenbankeinträgen übereinstimmen.

Wenn die eingegebenen Daten mit keinem Datenbankeintrag übereinstimmen, zeige eine Fehlermeldung an, die besagt: "Ungültige E-Mail oder ungültiges Passwort". Wenn die eingegebenen Informationen gültig sind, leite den Benutzer zum Haupt-Dashboard um.

Prüfen Sie dann, ob Hostinger Horizons die Logik und Funktionalität Ihrer Anwendung richtig konfiguriert hat, indem Sie sie in der Vorschau testen. So können Sie auch feststellen, ob eine Funktion fehlt.

6. Verbinden Sie Ihre Anwendung mit einer Datenbank (optional)

Eine Datenbank ermöglicht es Ihrer Webanwendung, Benutzerdaten zu sammeln und zu speichern. Dies ist wichtig, wenn Ihre Anwendung Funktionen wie die Benutzerregistrierung hat.

Mit Hostinger Horizons können Sie ganz einfach eine Datenbank für Ihre Anwendung mit Supabase konfigurieren.

Gehen Sie dazu auf die Registrierungsseite von Supabase und erstellen Sie ein neues Konto. Legen Sie eine neue Organisation an und wählen Sie einen Plan aus – der kostenlose Plan ist für eine einfache, kleine App ausreichend. Erstellen Sie dann ein neues Projekt, indem Sie den Namen, das Datenbankpasswort und die Region eingeben.

Sie sollten zur Seite „Neues Projekt” weitergeleitet werden. Kopieren Sie aus diesem Menü die Projekt-URL und den API-Schlüssel, mit denen wir die Datenbank mit Ihrer Anwendung verbinden werden.

Bitten Sie nun Hostinger Horizons, das Backend Ihrer Anwendung mit den von Supabase kopierten Anmeldedaten einzurichten. Hier ist ein Beispiel für den Prompt:

Verbinde die Anwendung mit meiner Supabase-Datenbank. Hier sind die Anmeldeinformationen:

Projekt-URL: ihre-projekt-URL

API-Schlüssel: Ihr-API-Schlüssel

Erstellen Sie dann die erforderlichen Tabellen und verbinden Sie sie mit den entsprechenden Feldern in der Anwendung.

7. Testen und veröffentlichen Sie Ihre Webanwendung

Zu diesem Zeitpunkt sollte Ihre Anwendung vollständig entwickelt und funktionsfähig sein. Überprüfen Sie vor der Fertigstellung alle Funktionen und die Navigation, um sicherzustellen, dass sie richtig funktionieren.

In Hostinger Horizons können Sie Ihre Anwendung direkt über das Vorschau-Menü auf der rechten Seite überprüfen und mit ihr interagieren.

Im Folgenden finden Sie eine Checkliste dafür, was Sie beim Testen von Webanwendungen überprüfen sollten:

• Funktionalität – alle Funktionen sollten in der Live-Umgebung ordnungsgemäß funktionieren. Dazu gehört die Fähigkeit, CRUD-Datenbankoperationen und Businesslogik durchzuführen.
• Navigation – der Fluss Ihrer App und die Funktionalität der Navigationselemente. Wenn Sie zum Beispiel auf Anmelden klicken, sollten Sie zum Haupt-Dashboard weitergeleitet werden.
• Sichtbarkeit – das Aussehen Ihrer Webanwendung auf dem Handy und dem Desktop. Stellen Sie sicher, dass alle Elemente richtig skaliert und benutzbar sind.

Wir veröffentlichen nun Ihr Projekt. Da Hostinger Horizons mit unserem Business-Webhosting-Plan bereitgestellt wird, können Sie Ihre Web-App sofort veröffentlichen, indem Sie einfach auf den Veröffentlichen-Button oben rechts klicken.

Hostinger Horizons wird Ihr Projekt unter einer temporären Domain veröffentlichen. Bevor Sie Ihre eigene Domain verbinden, lassen Sie uns noch ein paar zusätzliche Tests durchführen.

Beginnen Sie mit der Überprüfung der Browser-übergreifenden Kompatibilität. Rufen Sie dazu Ihre Anwendung mit verschiedenen Webbrowsern und Geräten auf, um zu sehen, ob Probleme auftreten.

Prüfen Sie dann die Leistung und die Ladegeschwindigkeit mit einem Benchmark-Tool wie GTMetrix. Wenn das Ergebnis suboptimal ist, bitten Sie Hostinger Horizons, den Code zu optimieren.

Wenn alles gut aussieht, kehren Sie zum Menü Websites im hPanel zurück, um Ihre Domain mit der Webanwendung zu verbinden.

Das war’s! Herzlichen Glückwunsch, Sie haben eine Web-App mit Horizons erstellt und veröffentlicht.

Fazit

Hostinger Horizons ist eine KI-gestützte Plattform, mit der Sie eine vollständige Webanwendung ohne Programmierkenntnisse entwickeln können. Geben Sie einfach Prompts ein, und dieses Tool erstellt jede beliebige Anwendung, die Sie im Sinn haben.

In diesem Artikel haben wir die allgemeinen Schritte zur Erstellung einer Webanwendung mit Hostinger Horizons erläutert. Hier nochmal eine Zusammenfassung:

1. Melden Sie sich bei Hostinger Horizons an und starten Sie ein neues Projekt über das hPanel-Dashboard.
2. Machen Sie sich mit der Benutzeroberfläche des Tools vertraut.
3. Geben Sie den ersten Prompt ein, um den Hauptzweck Ihrer Webanwendung zu definieren.
4. Passen Sie das Layout, das Design und die Front-End-Komponenten Ihres Projekts an.
5. Verfeinern Sie die Businesslogik und Struktur Ihrer Anwendung, um eine reibungslose Funktionalität zu gewährleisten.
6. (Optional) Wenn Sie Benutzerdaten sammeln wollen, erstellen Sie eine Supabase-Datenbank und bitten Sie Hostinger Horizons, diese mit Ihrer Anwendung zu verbinden.
7. Testen Sie Ihre Anwendung und veröffentlichen Sie sie mit dem Business-Webhosting-Plan von Hostinger. Verbinden Sie dann Ihre Webanwendung mit einer geeigneten Domainadresse.

Warum es nicht mal versuchen? Sie können ganz einfach Ihre eigene Web-App mit Horizons erstellen.web-app-erstellen-hostinger-horizons

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.