Deutsch (du)

Cloudinary

Cloudinary verbinden, um Bilder und andere Medien in den mit condoo.Vibe erstellten Anwendungen hochzuladen, zu speichern, umzuwandeln und auszuliefern.

Mit Cloudinary können Anwendungen, die du mit condoo.Vibe erstellst, Medien wie Bilder hochladen, speichern, verwalten und ausliefern.

Du kannst Cloudinary für Folgendes verwenden:

Sobald Cloudinary verbunden ist, beschreib, was Nutzer hochladen können sollen und wie diese Medien in deiner Anwendung verwendet werden sollen.

Cloudinary verbinden. Die Medienfunktion beschreiben. condoo.Vibe erstellt den Upload-Ablauf.

Warum Cloudinary verwenden?

Stell dir vor, du entwickelst eine Immobilienplattform.

Jede Immobilie könnte Folgendes haben:

Informationen wie Immobilienname, Preis und Standort gehören normalerweise in die Datenbank deiner Anwendung.

Bei den eigentlichen Bilddateien ist das anders.

Eine übliche Architektur sieht so aus:

IMMOBILIE
   ↓
Neon Postgres
Immobilieninformationen
   ↓
Cloudinary
Immobilienbilder

Deine Anwendung verbindet beides.

Datenbank und Medienspeicher

Diese Unterscheidung ist wichtig.

Angenommen, ein Kunde lädt ein Profilfoto hoch.

Cloudinary kann das Bild speichern und ausliefern.

Deine Datenbank kann die Informationen speichern, die deine Anwendung benötigt, um dieses Bild dem Kunden zuzuordnen.

Vereinfacht dargestellt:

Nutzer lädt Bild hoch
       ↓
Cloudinary
       ↓
Medienreferenz
       ↓
Neon Postgres
       ↓
Nutzerprofil
       ↓
Bild angezeigt

Der Nutzer sieht einfach sein Profilbild.

Die Anwendung kümmert sich um die dahinterliegenden Systeme.

Vor dem Start

Du benötigst ein Cloudinary-Konto und die vom Cloudinary-Connector in condoo.Vibe benötigten Zugangsdaten.

Dein Cloudinary-Konto stellt die Konfiguration bereit, die Anwendungen für die Kommunikation mit dem Dienst benötigen.

Cloudinary mit condoo.Vibe verbinden

Öffne dein condoo.Vibe-Projekt und wechsle zu Connectors.

Suche Cloudinary und wähle es aus.

Cloudinary in condoo.Vibe

Folge dem Verbindungsablauf und gib die von condoo.Vibe angeforderten Cloudinary-Angaben an.

Cloudinary-Konfiguration in condoo.Vibe

Nach dem Verbinden kannst du condoo.Vibe bitten, Medienfunktionen in deine Anwendung einzubauen.

Den ersten Upload erstellen

Angenommen, du erstellst ein Nutzerprofil.

Teile condoo.Vibe mit:

Nutzer sollen auf ihrer Account Settings-Seite ein Profilfoto hochladen können. Das Bild über Cloudinary hochladen und nach erfolgreichem Upload im Profil anzeigen.

Vereinfacht dargestellt:

Foto auswählen
     ↓
Datei prüfen
     ↓
Zu Cloudinary hochladen
     ↓
Medienreferenz speichern
     ↓
Profil aktualisieren
     ↓
Foto anzeigen

Der Upload wird Teil des Anwendungsablaufs.

Festlegen, was Nutzer hochladen können

Schreib nicht einfach:

Datei-Upload hinzufügen.

Beschreib den Zweck des Uploads.

Zum Beispiel:

Nutzer sollen ein Profilbild hochladen können.

Oder:

Makler sollen beim Erstellen oder Bearbeiten eines Angebots Immobilienfotos hochladen können.

Oder:

Shop-Administratoren sollen Produktbilder hochladen können.

Dieser Kontext hilft condoo.Vibe zu verstehen, wie die hochgeladenen Medien mit dem Rest der Anwendung zusammenhängen sollen.

Dateitypen

Du kannst festlegen, welche Dateitypen deine Anwendung akzeptieren soll.

Zum Beispiel:

JPG-, PNG- und WebP-Bilder für Immobilienangebote akzeptieren.

So wird verhindert, dass Nutzer Dateien hochladen, für die deine Funktion nicht ausgelegt ist.

Dateigrößenlimits

Vielleicht möchtest du auch die Dateigröße begrenzen.

Zum Beispiel:

Profilfotos müssen JPG, PNG oder WebP sein und dürfen höchstens 5 MB groß sein.

Oder:

Produktbilder mit bis zu 10 MB pro Bild zulassen.

Die gewählten Limits sollten deine Produktanforderungen und die Möglichkeiten deines Cloudinary-Kontos berücksichtigen.

Einzelne Bilder hochladen

Manche Funktionen benötigen nur ein Bild.

Beispiele sind:

Nutzer → Profilfoto

Unternehmen → Logo

Artikel → Titelbild

Kategorie → Vorschaubild

Ein einfacher Prompt könnte lauten:

Workspace Settings um einen Upload für das Firmenlogo ergänzen. JPG, PNG und WebP akzeptieren. Nach erfolgreichem Upload das Logo im Kopfbereich des Arbeitsbereichs anzeigen.

Mehrere Bilder hochladen

Andere Funktionen benötigen Galerien.

Immobilien sind ein gutes Beispiel.

Du könntest schreiben:

Makler sollen bis zu 20 Bilder pro Immobilienangebot hochladen können. Den Upload-Fortschritt anzeigen und die hochgeladenen Bilder in einer Galerie darstellen. Makler sollen Bilder vor dem Speichern des Angebots entfernen können.

Vereinfacht dargestellt:

Immobilienformular
      ↓
Bilder auswählen
      ↓
Prüfen
      ↓
Zu Cloudinary hochladen
      ↓
Referenzen speichern
      ↓
Immobiliengalerie

Angenommen, du entwickelst einen Immobilienmarktplatz.

Jede Immobilie kann mehrere Bilder haben.

Du könntest condoo.Vibe mitteilen:

Immobilienangebote um eine Bildergalerie ergänzen. Makler sollen bis zu 20 JPG-, PNG- oder WebP-Bilder hochladen können. Sie sollen ein Hauptbild auswählen können, das auf Immobilienkarten und in Suchergebnissen verwendet wird.

Jetzt muss die Anwendung mehr verstehen als das bloße Hochladen von Dateien.

Sie muss wissen:

Das ist eine vollständige Medienfunktion.

Hauptbilder

Bei Galerien ist es oft hilfreich, ein Haupt- oder Titelbild festzulegen.

Zum Beispiel:

Immobilie
   ↓
20 Bilder
   ↓
1 Hauptbild
   ↓
Suchergebniskarte

Du kannst schreiben:

Makler sollen ein Immobilienbild als Hauptbild festlegen können. Dieses Bild auf Immobilienkarten in der gesamten Anwendung verwenden.

Bilder neu anordnen

Die Reihenfolge der Bilder kann wichtig sein.

Zum Beispiel:

Makler sollen Immobilienbilder durch Ziehen neu anordnen können. Diese Reihenfolge in der öffentlichen Immobiliengalerie beibehalten.

So wird aus einem einfachen Upload eine richtige Medienverwaltung.

Bilder entfernen

Nutzer müssen möglicherweise auch hochgeladene Medien entfernen können.

Zum Beispiel:

Nutzer sollen ihr aktuelles Profilfoto entfernen und ein neues hochladen können.

Oder:

Makler können einzelne Bilder aus einer Immobiliengalerie entfernen.

Sei vorsichtig beim Löschen von Medien aus Anwendungen, die bereits echte Nutzerinhalte enthalten.

Die Anwendung muss möglicherweise sowohl die Cloudinary-Ressource als auch die zugehörige Datenbankreferenz aktualisieren.

Bilder ersetzen

Manchmal ist es besser, ein Bild zu ersetzen, statt jede Aktualisierung als neue unabhängige Datei zu behandeln.

Zum Beispiel:

Wenn ein Nutzer ein neues Profilfoto hochlädt, das aktuelle Profilbild ersetzen und sein Konto so aktualisieren, dass es das neue Bild verwendet.

Das Verhalten deiner Anwendung sollte klar zeigen, welches Bild aktuell aktiv ist.

Upload-Fortschritt

Große Bilder oder mehrere Uploads können Zeit benötigen.

Deine Oberfläche sollte vermitteln, was gerade passiert.

Zum Beispiel:

3 von 8 werden hochgeladen ...

████████████░░░░░

Du kannst condoo.Vibe bitten:

Während des Hochladens von Immobilienbildern den Upload-Fortschritt anzeigen. Die Schaltfläche Save Property deaktivieren, bis die erforderlichen Uploads abgeschlossen sind.

So müssen Nutzer nicht rätseln, ob die Anwendung funktioniert.

Erfolgreicher Upload

Nach einem abgeschlossenen Upload sollte die Anwendung das Ergebnis anzeigen.

Zum Beispiel:

Das hochgeladene Profilfoto sofort nach erfolgreichem Upload anzeigen.

Oder:

Erfolgreich hochgeladene Immobilienbilder zur Galerievorschau hinzufügen.

Nutzer sollten eine klare Rückmeldung erhalten, dass ihr Upload funktioniert hat.

Upload-Fehler

Uploads können fehlschlagen.

Zum Beispiel:

Upload
  ↓
Cloudinary
  ↓
Fehlgeschlagen
  ↓
Fehler anzeigen
  ↓
Erneut versuchen

Lass Nutzer nicht im Unklaren.

Du könntest condoo.Vibe mitteilen:

Wenn ein Bild-Upload fehlschlägt, anzeigen, welches Bild betroffen ist, und einen erneuten Versuch ermöglichen, ohne erfolgreich hochgeladene Bilder erneut hochladen zu müssen.

Das ist besonders bei Uploads mehrerer Bilder hilfreich.

Bildoptimierung

Große Bilder können Anwendungen unnötig langsam machen.

Cloudinary bietet Funktionen zur optimierten Medienauslieferung.

Bei bildreichen Anwendungen bitte condoo.Vibe, eine passende Bildauslieferung und Optimierung zu verwenden.

Zum Beispiel:

Immobilienbilder für die Webauslieferung optimieren und für Angebotskarten passend dimensionierte Bilder verwenden, statt überall die Originale in voller Größe zu laden.

Eine Angebotskarte benötigt nicht zwangsläufig dieselben Bildabmessungen wie eine bildschirmfüllende Immobiliengalerie.

Responsive Bilder

Deine Anwendung kann auf folgenden Geräten angesehen werden:

Die Mediendarstellung sollte auf all diesen Bildschirmgrößen funktionieren.

Zum Beispiel:

Die Immobiliengalerie responsiv gestalten und sicherstellen, dass Angebotsbilder auf Mobilgeräten und Desktops passend dimensioniert und zugeschnitten bleiben.

Bildzuschnitt

Unterschiedliche Oberflächen können unterschiedliche Bildformen erfordern.

Zum Beispiel:

Profil
1:1

Immobilienkarte
4:3

Hero-Bild
16:9

Du kannst das gewünschte visuelle Ergebnis beschreiben.

Zum Beispiel:

Profilfotos als quadratische Bilder mit einheitlichem Zuschnitt anzeigen.

Oder:

Für Immobilienkarten ein einheitliches Seitenverhältnis von 4:3 verwenden, ohne Bilder zu verzerren.

Beispiel: Produktbilder im E-Commerce

Angenommen, du entwickelst einen Onlineshop.

Teile condoo.Vibe mit:

Administratoren sollen mit Cloudinary bis zu 8 Bilder pro Produkt hochladen können. Ein Bild soll als Hauptproduktbild markiert werden. Bilder sollen sich neu anordnen und entfernen lassen. Das Hauptbild auf Produktkarten und die vollständige Galerie auf der Produktseite anzeigen.

Der Ablauf wird zu:

Admin
  ↓
Produkt erstellen
  ↓
Bilder hochladen
  ↓
Cloudinary
  ↓
Produkt + Medienreferenzen speichern
  ↓
Shop-Oberfläche

Beispiel: Nutzeravatare

Ein einfacherer Ablauf könnte so aussehen:

Nutzer sollen ihr Profilfoto unter Account Settings hochladen oder ersetzen können. JPG, PNG und WebP mit bis zu 5 MB akzeptieren. Das Bild im Navigationsavatar und im Profil anzeigen.

Das verbindet ein einzelnes hochgeladenes Bild mit mehreren Teilen der Anwendungsoberfläche.

Beispiel: Portfolio

Für eine kreative Portfolio-Anwendung:

Kreative sollen Bilder zu Projekten hochladen können. Jedes Projekt kann bis zu 15 Bilder enthalten. Die Bilder sollen sich neu anordnen lassen, und ein Titelbild soll auswählbar sein. Das Titelbild auf Portfoliokarten und die vollständige Sammlung auf der Projektseite anzeigen.

Auch hier übernimmt Cloudinary die Medien, während deine Anwendung die Produktfunktionen darum herum verwaltet.

Medien und deine Datenbank

Deine Datenbank muss möglicherweise Informationen über hochgeladene Medien speichern.

Vereinfacht dargestellt:

IMMOBILIE
ID: 104

      ↓

IMMOBILIENBILD
Immobilie: 104
URL: ...
Hauptbild: true
Position: 1

Damit kann deine Anwendung erkennen:

Cloudinary und Neon arbeiten zusammen, anstatt einander zu ersetzen.

Upload-Berechtigungen schützen

Nicht jeder Nutzer sollte zwangsläufig jedes Bild hochladen oder ändern dürfen.

Zum Beispiel:

Nur Makler, die eine Immobilie bearbeiten dürfen, sollen deren Bilder hochladen, neu anordnen oder löschen können.

Oder:

Nutzer können ihr eigenes Profilfoto ändern, aber nicht das anderer Nutzer.

Diese Berechtigungen sollten durch die Anwendung angemessen durchgesetzt werden.

Sensible Zugangsdaten nicht offenlegen

Cloudinary-Funktionen, die private Zugangsdaten benötigen, sollten in der passenden sicheren Anwendungsumgebung ausgeführt werden.

Der grundsätzliche Ablauf ist:

Anwendung
    ↓
Sichere Logik
    ↓
Cloudinary

anstatt sensible Zugangsdaten direkt jedem Nutzerbrowser offenzulegen.

Häufige Probleme

Bilder werden nicht hochgeladen

Prüfe zuerst, welchen Bereich das Problem betrifft:

Teile condoo.Vibe mit, welcher Teil fehlschlägt.

Upload erfolgreich, aber Bild erscheint nicht

Der Cloudinary-Upload funktioniert möglicherweise, während deine Anwendung die resultierende Medienreferenz nicht korrekt speichert oder anzeigt.

Teile condoo.Vibe mit:

Das Bild wird erfolgreich zu Cloudinary hochgeladen, erscheint aber nach dem Speichern nicht bei der Immobilie. Untersuchen, wie die Referenz des hochgeladenen Bildes gespeichert und abgerufen wird.

Bild erscheint nach dem Upload, verschwindet aber nach dem Neuladen

Das deutet häufig darauf hin, dass die Anwendung einen vorübergehenden Frontend-Zustand anzeigt, ohne die Medienreferenz korrekt dauerhaft zu speichern.

Teile condoo.Vibe mit:

Das Profilbild erscheint sofort nach dem Upload, verschwindet aber nach dem Neuladen der Seite. Sicherstellen, dass die Referenz des hochgeladenen Bildes im Nutzerprofil gespeichert und aus der Datenbank geladen wird.

Bilder laden zu langsam

Große Mediendateien werden möglicherweise in unnötig großen Abmessungen ausgeliefert.

Bitte condoo.Vibe, das Laden der Bilder zu untersuchen und die Auslieferung für die jeweiligen Darstellungskontexte zu optimieren.

Falsches Bild erscheint

Das kann auf eine falsche Beziehung zwischen den hochgeladenen Medien und dem zugehörigen Datenbankdatensatz hinweisen.

Gib condoo.Vibe das konkrete Beispiel und bitte um eine Prüfung der Beziehung.

Cloudinary-Fehler untersuchen

Eine hilfreiche Anfrage im Debug-Modus könnte so aussehen:

Erwartet: Wenn ein Makler Immobilienbilder hochlädt und das Angebot speichert, sollen die Bilder mit der Immobilie verknüpft bleiben.

Tatsächlich: Bilder werden hochgeladen und erscheinen in der Vorschau, verschwinden aber nach dem Neuladen der Seite.

Die Immobilie selbst wird korrekt gespeichert.

Den Cloudinary-Upload und die dauerhafte Speicherung in der Datenbank untersuchen, ohne die Gestaltung des Immobilienformulars zu ändern.

Das grenzt das Medienproblem vom Rest der Anwendung ab.

Die Upload-Funktion testen

Teste vor der Veröffentlichung:

Teste außerdem, was passiert, wenn ein Nutzer ein wesentlich größeres Bild als erwartet hochlädt.

Ein guter Cloudinary-Prompt

Eine gute Anfrage legt fest:

Zum Beispiel:

Makler sollen mit Cloudinary bis zu 20 Bilder pro Immobilie hochladen können. JPG, PNG und WebP mit bis zu 10 MB pro Bild akzeptieren. Bilder sollen sich neu anordnen und entfernen lassen, und der Makler soll ein Hauptbild auswählen können. Das Hauptbild auf Immobilienkarten und die vollständige Galerie auf der Immobiliendetailseite anzeigen.

Das ist deutlich aussagekräftiger als:

Bild-Upload hinzufügen.

In Medienabläufen denken

Ein hilfreiches Modell ist:

AUSWÄHLEN
  ↓
PRÜFEN
  ↓
HOCHLADEN
  ↓
REFERENZ SPEICHERN
  ↓
ANZEIGEN
  ↓
VERWALTEN

Cloudinary übernimmt die Medieninfrastruktur.

Deine condoo.Vibe-Anwendung legt fest, wie diese Medien in das Produkt passen.

Als Nächstes: OpenAI

Wir haben Zahlungen, E-Mail, Kommunikation und Medien angebunden.

Jetzt geht es um KI-Integrationen.

Als Nächstes behandeln wir OpenAI: wie du OpenAI mit einem condoo.Vibe-Projekt verbindest und KI-gestützte Funktionen direkt in deine Anwendung einbaust.

Beispiele sind:

OpenAI

OpenAI verbinden, um Assistenten, Inhaltserstellung und KI-Abläufe hinzuzufügen.