Formulare, Uploads, E-Mail und Zahlungen hinzufügen

Die Abläufe hinter Formularen, Datei-Uploads, E-Mails und Zahlungen beschreiben, damit condoo.Vibe deine App mit echten Ergebnissen in der Praxis verbindet.

Moderne Anwendungen zeigen nicht nur Informationen an.

Sie erfassen Daten, nehmen Dateien an, versenden Nachrichten, verarbeiten Zahlungen und lösen Aktionen anhand des Nutzerverhaltens aus.

Mit condoo.Vibe kannst du diese Abläufe in natürlicher Sprache beschreiben und dein KI-Produktteam die Funktionen in deine Anwendung einbauen lassen.

Nicht nur die Oberfläche beschreiben, sondern auch, was geschehen soll.

Den Ablauf entwickeln, nicht nur die Ansicht

Betrachte diesen Prompt:

Ein Kontaktformular mit Name, E-Mail, Telefonnummer und Nachricht hinzufügen.

Das sagt condoo.Vibe, wie das Formular aussehen soll.

Aber was soll passieren, nachdem jemand es absendet?

Eine bessere Anfrage lautet:

Ein Kontaktformular mit Name, E-Mail, Telefonnummer und Nachricht hinzufügen. Jede Anfrage in der Datenbank speichern, im Administrationsdashboard anzeigen, dem Kunden eine Bestätigungs-E-Mail senden und unser Team über neue Anfragen benachrichtigen.

Damit beschreibst du einen vollständigen Ablauf:

Kunde sendet Formular ab
        ↓
Informationen validieren
        ↓
Anfrage speichern
        ↓
Im Dashboard anzeigen
        ↓
Bestätigung senden
        ↓
Team benachrichtigen

condoo.Vibe kann die verschiedenen dafür erforderlichen Teile entwickeln.

Formulare

Mit Formularen senden Nutzer Informationen an deine Anwendung.

Sie eignen sich für:

• Kontaktanfragen
• Lead-Erfassung
• Kunden-Onboarding
• Buchungsanfragen
• Kontoeinstellungen
• Umfragen
• Bewerbungen
• Checkout
• Supportanfragen
• Erstellen und Bearbeiten von Datensätzen

Du kannst beschreiben, welche Informationen erfasst werden sollen und was danach geschehen soll.

Ein Formular erstellen

Zum Beispiel:

Ein Formular zur Lead-Erfassung mit Name, geschäftlicher E-Mail, Telefonnummer, Unternehmensname, Unternehmensgröße und Nachricht hinzufügen. Name und E-Mail sind Pflichtfelder.

condoo.Vibe kann die passenden Felder, die Validierung und die Oberfläche erstellen.

Für eine echte Anwendung solltest du außerdem beschreiben, was mit den übermittelten Daten geschehen soll.

Zum Beispiel:

Jede Einsendung als Lead in der Datenbank speichern und neue Leads im Vertriebsdashboard anzeigen.

Jetzt ist das Formular mit deiner Anwendung verbunden.

Formularvalidierung

Die Validierung legt fest, welche Informationen zulässig sind, bevor ein Formular verarbeitet wird.

Zum Beispiel:

Name und E-Mail sind erforderlich. Das Format der E-Mail-Adresse prüfen und direkt unter ungültigen Feldern eine Fehlermeldung anzeigen.

Oder:

Passwörter müssen mindestens 8 Zeichen enthalten.

Oder:

Das Buchungsdatum darf nicht in der Vergangenheit liegen.

condoo.Vibe kann die Validierung anhand deiner Anforderungen implementieren.

Ein hilfreicher Prompt beschreibt beides:

Welche Informationen erforderlich sind

und

wann diese Informationen gültig sind.

Erfolgs- und Fehlerzustände

Denke auch daran, was nach dem Absenden passiert.

Zum Beispiel:

Nach erfolgreichem Absenden das Formular leeren und die Erfolgsmeldung „Vielen Dank! Wir melden uns in Kürze bei dir.“ anzeigen.

Berücksichtige auch Fehler:

Wenn das Absenden fehlschlägt, die eingegebenen Informationen beibehalten und eine Fehlermeldung mit der Möglichkeit zum erneuten Versuch anzeigen.

Gute Benutzererlebnisse berücksichtigen beide Ergebnisse.

Datei-Uploads

In manchen Anwendungen müssen Nutzer Dateien hochladen können.

Beispiele:

• Profilfotos
• Immobilienbilder
• Dokumente
• PDFs
• Produktbilder
• Belege
• Anhänge
• Portfoliodateien

Du kannst den gewünschten Upload-Ablauf beschreiben.

Zum Beispiel:

Immobilienmaklern ermöglichen, beim Erstellen eines Immobilienangebots mehrere Bilder hochzuladen. Die Bilder in einer Galerie auf der Immobiliendetailseite anzeigen.

Oder:

Kunden ermöglichen, PDF-, DOCX-, JPG- und PNG-Dateien an Supporttickets anzuhängen.

Upload-Beschränkungen beschreiben

Sag condoo.Vibe bei Uploads, welche wichtigen Beschränkungen gelten.

Zum Beispiel:

Bis zu 10 Immobilienbilder pro Angebot zulassen. JPG-, PNG- und WebP-Dateien akzeptieren und jede Datei auf 10 MB begrenzen.

Oder:

Nur PDF-Dokumente bis 20 MB akzeptieren.

So erhält condoo.Vibe klarere Anforderungen für Validierung und Rückmeldungen an Nutzer.

Dateispeicherung

Dateien sollten normalerweise nicht direkt in der relationalen Datenbank deiner Anwendung gespeichert werden.

Stattdessen verwenden Anwendungen meist spezielle Medien- oder Dateispeicherdienste und speichern Verweise auf die Dateien in der Datenbank.

condoo.Vibe unterstützt Connectors wie Cloudinary für Abläufe zur Speicherung und Auslieferung von Medien.

Zum Beispiel:

Nutzer wählt ein Bild aus
       ↓
Anwendung validiert die Datei
       ↓
Bild wird zu Cloudinary hochgeladen
       ↓
Dateiverweis wird gespeichert
       ↓
Bild wird in der Anwendung angezeigt

Die Einrichtung von Cloudinary behandeln wir ausführlich im Abschnitt Integrationen.

E-Mail

Anwendungen müssen häufig E-Mails aufgrund von Nutzeraktionen versenden.

Beispiele:

• Willkommens-E-Mails
• Buchungsbestätigungen
• Benachrichtigungen aus Kontaktformularen
• Bestellbestätigungen
• Teameinladungen
• Nachrichten zu Passwörtern
• Statusaktualisierungen
• Transaktionsbenachrichtigungen

condoo.Vibe kann E-Mail-Abläufe mit unterstützten Integrationen wie Resend entwickeln.

Beschreiben, wann eine E-Mail versendet werden soll

Statt nur zu sagen:

E-Mail hinzufügen.

Beschreibe das Ereignis.

Zum Beispiel:

Wenn ein Kunde erfolgreich einen Termin bucht, ihm eine Bestätigungs-E-Mail mit Dienstleistung, Mitarbeiter, Datum, Uhrzeit und Buchungsreferenz senden.

Das ist deutlich klarer.

Vereinfacht:

Buchung wird angelegt
      ↓
Buchung speichern
      ↓
Bestätigungs-E-Mail senden
      ↓
Erfolgszustand anzeigen

E-Mails an dein Team senden

E-Mails sind nicht nur für Kunden gedacht.

Zum Beispiel:

Wenn jemand das Demo-Anfrageformular absendet, den Lead speichern und unserem Vertriebsteam eine E-Mail mit Name, E-Mail, Unternehmen und Nachricht der Person senden.

Oder:

Den zuständigen Makler benachrichtigen, wenn ihm ein neuer Lead zugewiesen wird.

condoo.Vibe kann Anwendungsereignisse mit E-Mail-Abläufen verbinden.

Resend verbinden

Für Anwendungen, die Transaktions-E-Mails versenden, kannst du Resend über den unterstützten Integrationsablauf von condoo.Vibe verbinden.

Nach der Einrichtung kannst du dich in deinen Prompts darauf konzentrieren, was geschehen soll.

Zum Beispiel:

Nach der Registrierung eine Willkommens-E-Mail senden.

Du musst nicht den gesamten E-Mail-Versand selbst implementieren.

Die Verbindung von Resend erklären wir später im Abschnitt Integrationen.

Zahlungen

Du kannst auch Zahlungsabläufe in deine Anwendung einbauen.

condoo.Vibe unterstützt Stripe für Zahlungsabläufe.

Damit lassen sich zum Beispiel folgende Funktionen entwickeln:

• Einmalige Käufe
• Abonnement-Checkout
• SaaS-Tarife
• Kundenabrechnung
• Upgrades
• Zahlungsstatus
• Zugang zum Abrechnungsportal

Du beschreibst, wie Zahlungen in dein Produkt passen sollen.

Einmalzahlungen

Zum Beispiel:

Kunden sollen diesen digitalen Kurs für $99 über Stripe kaufen können. Nach erfolgreicher Zahlung Zugriff auf das Kursdashboard geben.

Dazu gehört mehr als die Anzeige einer Zahlungsschaltfläche.

Vereinfacht:

Kunde wählt ein Produkt
        ↓
Stripe-Checkout
        ↓
Zahlung erfolgreich
        ↓
Anwendung überprüft die Zahlung
        ↓
Zugriff wird gewährt

condoo.Vibe kann den Anwendungsablauf rund um den Zahlungsprozess entwickeln.

Abonnementzahlungen

Für SaaS-Anwendungen benötigst du möglicherweise wiederkehrende Abonnements.

Zum Beispiel:

Drei Abonnementtarife hinzufügen: Starter für $19/Monat, Pro für $49/Monat und Business für $99/Monat. Nutzer sollen beim Checkout einen Tarif wählen. Ihr Konto soll anschließend das aktive Abonnement anzeigen.

Für anspruchsvollere Abrechnungssysteme benötigst du möglicherweise außerdem:

• Upgrades
• Downgrades
• Kündigungen
• Behandlung fehlgeschlagener Zahlungen
• Abonnementstatus
• Abrechnungsverlauf
• Zugang zum Kundenportal
• Funktionsbeschränkungen

Ziehe in diesen Fällen vor der Umsetzung Plan Mode in Betracht.

Zahlungen sind mehr als Checkout

Ein häufiger Irrtum ist, dass die Integration von Stripe lediglich eine Checkout-Seite erfordert.

Ein echter Abonnementablauf sieht eher so aus:

Nutzer wählt Pro
       ↓
Checkout wird erstellt
       ↓
Stripe verarbeitet die Zahlung
       ↓
Zahlung wird bestätigt
       ↓
Abonnement wird gespeichert
       ↓
Pro-Funktionen werden freigeschaltet
       ↓
Dashboard wird aktualisiert

Deine Anwendung muss wissen, was geschehen ist, nachdem der Nutzer Stripe verlassen hat.

Deshalb beziehen Zahlungsabläufe häufig sowohl Stripe als auch das Backend deiner Anwendung ein.

Fähigkeiten zu Abläufen verbinden

Der große Nutzen entsteht durch die Kombination dieser Fähigkeiten.

Angenommen, du entwickelst eine Buchungsplattform für Fotografie.

Du könntest condoo.Vibe sagen:

Kunden sollen ein Buchungsformular ausfüllen, ein Fotografiepaket auswählen, Referenzbilder hochladen, eine Anzahlung von 30% über Stripe leisten und nach erfolgreicher Zahlung eine Bestätigungs-E-Mail erhalten. Die Buchung im Administrationsdashboard mit dem Status "Deposit Paid" speichern.

Dieser einzelne Produktablauf umfasst:

Formular

Buchungsdetails erfassen.

↓

Upload

Referenzbilder speichern.

↓

Stripe

Die Anzahlung einziehen.

↓

Datenbank

Buchung und Zahlungsstatus speichern.

↓

Resend

Bestätigung senden.

↓

Dashboard

Dem Fotografen die Buchung anzeigen.

Du beschreibst das Kundenerlebnis.

condoo.Vibe kann helfen, die Systeme dahinter zu entwickeln.

Ein weiteres Beispiel: Lead-Qualifizierung

Angenommen, du entwickelst eine Agenturwebsite.

Du könntest fragen:

Ein Formular "Request a Proposal" erstellen. Name, Unternehmen, E-Mail, Website, monatliches Marketingbudget, benötigte Dienstleistungen und Projektbeschreibung abfragen. Einsendungen als Leads speichern. Bei einem Budget über $5,000 den Lead als High Priority markieren und das Vertriebsteam per E-Mail benachrichtigen.

Vereinfacht:

Angebotsanfrage eingereicht
        ↓
Lead speichern
        ↓
Budget prüfen
        ↓
   Über $5,000?
      ↙       ↘
     Ja       Nein
     ↓          ↓
High Priority  Standard
     ↓
Vertrieb benachrichtigen

Das ist Anwendungslogik rund um ein Formular.

Das vollständige Ergebnis beschreiben

Denke bei Prompts an condoo.Vibe über die sichtbare Komponente hinaus.

Statt:

Ein Bewerbungsformular hinzufügen.

Versuche:

Ein Bewerbungsformular mit Name, E-Mail, LinkedIn-Profil, Berufserfahrung in Jahren, Position und Lebenslauf hinzufügen. Für den Lebenslauf nur PDF-Dateien akzeptieren. Bewerbungen in der Datenbank speichern und im Administrationsdashboard anzeigen. Bewerbern nach erfolgreicher Einsendung eine Bestätigungs-E-Mail senden.

Statt:

Eine Schaltfläche Buy hinzufügen.

Versuche:

Eine Schaltfläche Buy hinzufügen, die den Stripe-Checkout startet. Nach erfolgreicher Zahlung den Kauf speichern und den Download im Kundenkonto freischalten.

Je klarer du das Ergebnis beschreibst, desto besser versteht condoo.Vibe den vollständigen Ablauf.

Externe Dienste benötigen Connectors

condoo.Vibe kann die Anwendungslogik für externe Dienste entwickeln. Diese Dienste gehören jedoch weiterhin ihren jeweiligen Anbietern.

Zum Beispiel:

Normalerweise musst du das passende Konto oder dessen Zugangsdaten verbinden, bevor die Anwendung den externen Dienst nutzen kann.

Die Connectors von condoo.Vibe erleichtern diesen Vorgang.

Jeden unterstützten Connector behandeln wir später einzeln.

Zugangsdaten sicher aufbewahren

Externe Integrationen erfordern häufig API-Schlüssel oder andere Zugangsdaten.

Diese Werte müssen als Geheimnisse behandelt werden.

Verwende beim Hinzufügen von Zugangsdaten die unterstützten Connector- oder sicheren Konfigurationsabläufe von condoo.Vibe.

Nach der Verbindung kannst du dich in Prompts auf das Produktverhalten konzentrieren, statt Zugangsdaten wiederholt anzugeben.

Den passenden Modus auswählen

Einfache Abläufe können oft direkt in Build Mode umgesetzt werden.

Zum Beispiel:

Ein Kontaktformular hinzufügen und Einsendungen in der Datenbank speichern.

Build + Min kann ausreichen.

Komplexere Abläufe sollten geplant werden.

Zum Beispiel:

Abonnements mit drei Tarifen, Funktionsgrenzen, Upgrades, Downgrades, Kündigungen, Behandlung fehlgeschlagener Zahlungen und einem Abrechnungsportal für Kunden hinzufügen.

Ziehe Folgendes in Betracht:

Plan + Max → Prüfen → Build

So kann condoo.Vibe die vollständige Abrechnungsarchitektur vor der Umsetzung durchdenken.

Beispielprompts

Kontaktformular

Ein Kontaktformular mit Name, E-Mail, Unternehmen und Nachricht erstellen. Einsendungen speichern und anschließend eine Erfolgsmeldung anzeigen.

Upload

Nutzern ermöglichen, ein Profilbild hochzuladen. JPG, PNG und WebP akzeptieren und das hochgeladene Bild im Profil anzeigen.

E-Mail

Kunden nach erfolgreicher Terminbuchung eine E-Mail-Bestätigung senden.

Zahlung

Stripe-Checkout für den Pro-Tarif zu $49/Monat hinzufügen und das Abonnement des Nutzers nach erfolgreicher Zahlung aktualisieren.

Vollständiger Ablauf

Einen Ablauf zur Buchung von Beratungsterminen entwickeln. Kunden sollen eine Dienstleistung sowie ein verfügbares Datum und eine Uhrzeit wählen, ihre Kontaktdaten eingeben, die Beratungsgebühr über Stripe bezahlen und eine E-Mail-Bestätigung erhalten. Buchung und Zahlungsstatus in der Datenbank speichern.

In Ergebnissen denken

Du musst condoo.Vibe nicht jeden technischen Schritt zur Umsetzung eines Ablaufs vorgeben.

Beginne mit:

Was soll der Nutzer tun können?

Dann:

Was soll geschehen, wenn er das tut?

Und schließlich:

Welche Informationen soll die Anwendung speichern?

Zum Beispiel:

• Ein Kunde bucht einen Termin.
• Die Buchung soll gespeichert werden.
• Die Zahlung soll eingezogen werden.
• Der Kunde soll eine Bestätigung erhalten.
• Das Unternehmen soll die Buchung in seinem Dashboard sehen.

Das ist ein Produktablauf.

condoo.Vibe kann helfen, daraus funktionierende Software zu machen.

Weiter: APIs und serverseitige Logik

Formulare erfassen Informationen.

Datenbanken speichern sie.

Integrationen verbinden deine Anwendung mit externen Diensten.

Aber etwas muss noch bestimmen, was bei Nutzeraktionen geschieht.

Als Nächstes betrachten wir APIs und serverseitige Logik: die Funktionen hinter Schaltflächen, Abläufen, Berechtigungen, Berechnungen und Integrationen deiner Anwendung.