Eine Anleitung für Anfänger zur Verwendung von Velo von Wix

Velo ist ein Wix-Produkt mit einem Twist. Wix ist eine der beliebtesten Entwicklungsplattformen im Internet. Es ermöglicht Designern (und dem durchschnittlichen Websitebesitzer) erstaunliche Websites zu erstellen, ohne eine einzige Codezeile zu schreiben.

Mit Velo erweitert Wix seine Benutzerbasis um Entwickler. Velo ist eine Full-Stack-Entwicklungsplattform, mit der Benutzer mithilfe von Code großartige Websites erstellen können. Die einzige Programmiersprache, die Sie kennen müssen, um Velo zu verwenden, ist JavaScript. Die Plattform unterstützt moderne JavaScript-Funktionen und verwendet ein NodeJS-basiertes serverseitiges System.

In diesem Artikel erfahren Sie mehr über die einzigartigen Funktionen von Velo und wie Sie sie verwenden.

Velos Entwicklerfunktionen

Die Velo-Entwicklungsplattform verfügt über eine integrierte IDE, mit der Entwickler JavaScript-Code schreiben und die Änderungen in Echtzeit sehen können. Velo läuft auf einem NodeJS-Server, was bedeutet, dass ein Entwickler Zugriff auf npm-Pakete und andere Entwicklertools hat. Zu diesen Entwicklerfunktionen gehören:

• Die Möglichkeit, benutzerdefinierte Layouts und Interaktionen auf einer Webseite zu erstellen.
• Die Möglichkeit, Sammlungen in einer Datenbank zu erstellen.
• Die Möglichkeit, benutzerdefinierte APIs für Ihre Website zu erstellen.

Erstellen einer Website mit Velo

Um Velo zu verwenden, müssen Sie zur Hauptwebsite navigieren. Wählen Sie dort die Option zum Starten eines neuen Projekts. Dies führt Sie durch das Übliche Erstellungsprozess der Website von Wix, wo Sie die Art der Website auswählen müssen, die Sie erstellen möchten. Sie können entweder selbst oder mit Hilfe von Wix ADI eine Vorlage auswählen.

Nachdem Sie die Option zum Bearbeiten Ihrer Vorlage ausgewählt haben, sehen Sie etwa die folgende Benutzeroberfläche:

Links neben dem obigen Bild befindet sich die Seitenleiste der Website-Struktur, über die Sie auf die verschiedenen JavaScript-Dateien zugreifen können, die mit allen Seiten Ihrer Website verbunden sind. Die aktuell ausgewählte Seite ist die Homepage, und wenn Sie sich das Bild oben unten ansehen, sehen Sie einen Code-Editor, der den Inhalt der Datei HOME.js anzeigt.

Erstellen benutzerdefinierter Layoutstrukturen und Interaktionen

Die für diesen Artikel ausgewählte Vorlage ist der Online-Wellness-Shop. Die Startseite dieser Website hat eine „Beliebteste“, die Sie im folgenden Bild sehen können:

Wenn Sie jedoch eine andere Überschrift für diesen Abschnitt verwenden möchten, können Sie dies im Velo-Editor erreichen, indem Sie den folgenden Code in die Datei HOME.js einfügen.

Die HOME.js-Datei

$w.onReady(Funktion () {
 $w('#text20').text = 'TRENDING ITEMS'
});

Der obige Code aktualisiert die „beliebteste“ Überschrift zu „Angesagte Artikel“, und Sie können diese Aktualisierung anzeigen, indem Sie auf die Vorschau-Schaltfläche oben rechts in der Velo-Oberfläche klicken. Auf der Homepage im entsprechenden Abschnitt sollten Sie etwa die folgende Ausgabe sehen:

Arbeiten mit der Datenbank von Velo

Die meisten dynamischen Websites verfügen über eine Datenbank, die Daten je nach Typ unterschiedlich speichert. Velo speichert seine Daten in Sammlungen in seiner zentralen Datenbank. Um Zugriff auf diese Datenbank zu erhalten, müssen Sie zur Tabelle mit Zeilen und Spalten links neben der Entwickleroberfläche von Velo navigieren.

Wie Sie dem obigen Bild entnehmen können, verfügt jede Wix-Vorlage über einige Standardsammlungen, abhängig von der Art der Website. Die für diesen Artikel ausgewählte Website-Vorlage ist ein Wellness-Geschäft. Daher verfügt es über eine Sammlung von Standardprodukten, die Sie einfach durch Ihre Artikel ersetzen können.

Verwandt: So bauen Sie mit Wix eine professionelle Online-Präsenz auf

Wenn Sie Ihre Sammlung jedoch von Grund auf neu erstellen möchten, haben sie auch diese Option.

Um eine neue Sammlung in Ihrer Velo-Datenbank zu erstellen, bewegen Sie einfach Ihre Maus über den Abschnitt „Inhaltssammlungen“, und ein Plus-Symbol erscheint rechts neben dem Text.

Durch Klicken auf die neue Sammlungsoption im obigen Bild wird das folgende Sammlungserstellungsformular generiert:

Wenn Sie einen Sammlungsnamen eingeben und auf die Schaltfläche „Erstellen“ klicken, gelangen Sie zur folgenden Content-Manager-Seite:

Auf der Content-Manager-Seite oben können Sie mit dem Füllen Ihrer Produktsammlung beginnen, indem Sie die entsprechenden Plus-Symbole verwenden. Bevor Sie jedoch Produkte zu Ihrer Sammlung hinzufügen, müssen Sie die entsprechenden Felder erstellen.

Sehen Sie sich die Inhaltsmanager-Seite oben an; es hat derzeit ein Feld – Titel. Sie können dieses Feld nicht löschen, da es das primäre Feld (oder die eindeutige Kennung) ist, das jede Sammlung haben muss. Sie können ihm jedoch einen passenderen Titel geben, z. B. Produktname oder ID.

Um den Namen eines vorhandenen Felds in Ihrer Sammlung zu ändern, klicken Sie einfach auf das betreffende Feld und Sie sehen mehrere Optionen.

Wenn Sie die Eigenschaftsoption auswählen, die Sie im obigen Bild sehen können, wird das folgende Popup-Formular angezeigt:

Mit dem obigen Popup-Formular können Sie den Feldnamen ändern, indem Sie den gewünschten Titel in das Textfeld mit der Bezeichnung „Feldname“ eingeben und auf „Speichern“ klicken.

Ein neues Feld hinzufügen

Es gibt zwei Möglichkeiten, Ihrer Sammlung ein neues Feld hinzuzufügen. Die erste Option besteht darin, auf das Plus-Symbol rechts neben dem vorhandenen Titel in der Sammlung zu klicken. Diese Methode generiert das folgende Formular:

Mit dem neuen Feldformular können Sie einen Feldnamen, einen Feldschlüssel (zur Integration in Ihren Code) und einen Feldtyp angeben. Der Feldtyp kann einer der folgenden sein:

• Text
• Bild
• Boolesch
• Nummer
• Datum (und Uhrzeit
• Zeit
• Rich-Text
• Bezug
• Mehrfachreferenz
• URL

Die zweite Möglichkeit, Ihrer Sammlung ein neues Feld hinzuzufügen, besteht darin, auf den Abschnitt „Ausgeblendete Felder“ zu klicken und die Option „Feld hinzufügen“ aus der Popup-Feldliste auszuwählen. Sie sollten so etwas wie das folgende Bild sehen:

Hinzufügen von Elementen zur Sammlung Um Ihrer Sammlung ein neues Element hinzuzufügen, können Sie rechts auf der Content-Manager-Seite auf die Schaltfläche „Element hinzufügen“ oder auf das Pluszeichen unter den Feldtiteln klicken. Nachdem Sie Ihrer Sammlung Ihr erstes Objekt hinzugefügt haben, sollte es so aussehen:

Sie können jetzt mit einer der oben genannten Methoden so viele Elemente wie möglich zu Ihrer Sammlung hinzufügen. Um Ihre Website jedoch mit einer beliebigen Sammlung zu aktualisieren, müssen Sie die Website zuerst veröffentlichen.

Was Velo spannend macht

Jetzt wissen Sie, wie Sie Ihre Website mithilfe von JavaScript-Code in der Velo-IDE anpassen können. Sie können auch benutzerdefinierte Sammlungen mit beliebig vielen Artikeln in der Velo-Datenbank erstellen. Aber was wahrscheinlich das Beste an Velo ist, ist die Möglichkeit, npm-Pakete zu importieren und zu verwenden.

Was ist npm? Der JavaScript-Paketmanager erklärt

Verbessern Sie Ihre Projekte mit npm-Paketen.

Lesen Sie weiter

Über den Autor