Programmieren mit Velo: Frontend

Hallo und willkommen zum Velo Frontend-Kurs.

Ich bin Joshua, Developer Advocate, und ich zeige dir, wie du das Frontend für Velo by Wix verwenden kannst.

In diesem Kurs behandeln wir einige Themen, wie das Erstellen statischer und dynamischer Ereignishandler, das Erstellen eines einfachen „Hello World“-Beispiels sowie die Nutzung unserer eigenen internen APIs von Wix, wie Storage, Window.

Außerdem lernen wir, wie wir einige unserer Tools, wie den Release Candidate, Logging und Monitoring verwenden.

Du kannst all diese Fähigkeiten miteinander kombinieren und am Ende kannst du solide Frontend-Anwendungen mit Velo by Wix entwickeln.

Hallo und willkommen zu dieser Lektion.

In dieser Lektion lernen wir den Editor, hauptsächlich für das Frontend, kennen.

Bevor wir loslegen, müssen wir den Dev-Modus einschalten, um Velo zu aktivieren.

Hier am oberen Rand des Bildschirms schalten wir den Dev-Modus ein.

Im Dev-Modus können wir eigenen JS-Code hinzufügen, eine Verbindung zu den internen Tools von Wix und unseren eigenen APIs herstellen, die wir im Laufe dieses Kurses besprechen.

Wir schalten den Dev-Modus ein, und können ohne jegliches Setup starten.

Ich habe hier schon etwas Code und du siehst, dass hier einige neue Dinge auf dem Bildschirm sind, in der Codeansicht und in der Velo-Seitenleiste.

Wir beginnen hier mit der Codeansicht oder auch IDE.

Die Codeansicht hat verschiedene Tabs, abhängig von der Seite, die du geöffnet hast.

Jetzt sind wir auf der Velo-Frontend-Seite und hier haben wir ein weiteres Tab für die masterpage.js.

masterpage.js ist eine Datei, die alle Seiten auf deiner Website steuert.

Du kannst hier Code hinzufügen, um verschiedene Funktionen auf jeder Seite auszuführen.

Du hast zum Beispiel Kopfzeilen und Fußzeilen, vielleicht hast du eine Suchleiste oben in deiner Kopfzeile, die auf jeder Seite auf die gleiche Weise angezeigt werden und funktionieren soll.

Das kannst du tun.

Zurück zum Tab „Velo-Frontend“, es ist ziemlich einfach, hin und her zu navigieren.

Wir haben auch die Codeansicht bzw. die IDE.

Die IDE hat einen eigenen integrierten ESLinter.

Das ist so ähnlich wie VS-Code.

Sie hat auch eine automatische Ausfüll- und Korrekturfunktion.

Wenn ich hier eine neue API importiere, erhalte ich eine Liste von dieser automatischen Ausfüllfunktion.

Ich kann viele APIs wix-data, wix-crm-backend, wix-animations, wix-stores usw. auswählen, um damit zu arbeiten.

Wenn ich wixLocation eingebe, eine Frontend-API, die wir in diesem Kurs behandeln, wird sie hier übernommen, aber ich erhalte auch einige Fehler.

Das ist etwas, was der Editor für uns tun kann.

Er lässt uns wissen, ob der Code Duplikate oder etwas Falsches enthält.

Wir löschen hier einfach wixLocation, da es bereits in unserem Code vorhanden ist.

Und wir können auch hier mit der rechten Maustaste klicken und den Code formatieren.

Wenn wir verschiedene Elemente auf der Seite auswählen, wird im Editor ein neues Element in der Codeansicht angezeigt und das ist das Eigenschaftenpanel.

Im Eigenschaftenpanel können wir alle unsere verschiedenen Elemente auf der Seite verwalten, wenn wir sie anklicken.

Hier haben wir „welcomeMessage“.

Das ist die ID, auf die ich sie festgelegt habe.

Und ich kann jederzeit hier den ID-Namen bearbeiten.

Darunter sind die Standardwerte angegeben.

Die Standardwerte sind „Verborgen“ und „Ausgeblendet“ und das hängt von dem Element ab, das ausgewählt ist.

„Verborgen“ und „Ausgeblendet“ können wir als Standardwerte festlegen, sodass diese Aktionen beim Laden der Seite automatisch ausgeführt werden.

Wir können das auch programmseitig machen, mit Code, aber mit den Standardwerten, die du hier auswählen kannst, geht es schneller.

Darunter sind die Ereignishandler aufgeführt, und sie umfassen alle verschiedenen statischen Ereignishandler, die wir je nach ausgewähltem Element hinzufügen können.

Und das hängt auch vom Datentyp ab.

Ob es sich um einen Text oder einen Button handelt, es gibt für jeden Datentyp unterschiedliche Ereignishandler.

Und nun zur Velo-Seitenleiste.

Die Velo-Seitenleiste hat viele Optionen, aber vor allem für das Frontend konzentrieren wir uns auf „Seitencode“.

„Seitencode“ hat hier einen Ordner mit dem Namen „Startseiten“ und hier kann ich auf alle meine verschiedenen Seiten zugreifen, die ich in meinem Projekt habe.

Wenn ich die verschiedenen Seiten anklicke, ändert sich das Tab in der Codeansicht.

Alles klar?

Jede Seite hat ihre eigene Art, Code hinzuzufügen und zu steuern.

Darunter haben wir auch einen Bereich für Elemente von Wix, und wenn ich Wix Stores oder Bookings oder Events hinzufüge, würde das weitere Frontend-Seiten zur Option „Seitencode“ hier hinzufügen.

Und unten auf der Seite haben wir Lightboxen, die wir im Laufe dieses Kurses behandeln werden, wie auch wix-window und wix-location.

Und wir haben die masterpage.js, über die wir gerade gesprochen haben.

Das sind all die Tools, die du für die Entwicklung deines Frontends einsetzen kannst.

Du kannst auch die Velo-Tools hier auf der Seite verwenden, um dir den Release-Manager, den Secrets-Manager oder das Monitoring anzusehen, über die wir später im Kurs noch sprechen werden.

Wenn du Hilfe benötigst, kannst du hier klicken, um zur Velo-Hilfe zu kommen und unsere API-Referenz anzuzeigen.

Und dann kannst du dir auch unsere Gespräche im Forum ansehen.

Damit ist der Rundgang durch den Editor beendet.

Wir sehen uns in der nächsten Lektion, in der wir ein sehr einfaches „Hello World“-Beispiel mit Velo durchgehen werden.