Programmieren mit Velo: Einstieg

Hallo, wie geht‘s?

Willkommen zum Velo-Anfängerkurs.

Ich bin Joshua, Developer Advocate für Velo, und erkläre dir heute die Grundlagen von Velo by Wix.

Die Velo by Wix Plattform ist in Wix integriert.

Mit der Plattform kannst du Websites mittels JavaScript individuellere Funktionen hinzufügen und sie interaktiver machen.

Dieser Kurs eignet sich für Entwickler ebenso wie für Nutzer ohne Entwicklerkenntnisse, ist aber sehr viel einfacher, wenn du schon etwas mehr Erfahrung mit JavaScript hast.

Um loszulegen, schalten wir als Erstes in den Dev-Modus.

Damit aktivieren wir auch Velo.

Wie gesagt kannst du eigenen JavaScript-Code hinzufügen.

Und zwar direkt in Wix.

Du kannst also alle Tools von Wix nutzen und zusätzlich neuen Code ergänzen.

Ich aktiviere nun den Dev-Modus hier.

Du siehst, dass sich die Umgebung sofort verändert.

Unten siehst du die Codeansicht.

Hier rechts siehst du das Eigenschaftenpanel.

In ihm lassen sich die unterschiedlichen IDs der Seitenelemente verwalten, die du per Drag-and-Drop platzieren kannst.

Bei Wix kannst du Elemente per Drag-and-Drop platzieren.

Websites sehen später genauso aus wie im Editor.

Wenn ich Elemente auf der Website anklicke, sehe ich im Eigenschaftenpanel parallel dazu die ID jedes Elements, das ich anklicke.

Wenn ich hier auf der linken Seite klicke, siehst du hier rechts die ID „button11“ oder jetzt die ID „text37“.

Ich erkläre noch genauer, wie man solche Seitenelemente viel aussagekräftiger benennen kann.

In der Codeansicht gibt es weitere integrierte Tools, wie die automatische Vervollständigung und sogar einen Linter, der uns alle Fehler im Code anzeigt.

Testen wir auf der Seite „Velo für Einsteiger“, wie die automatische Vervollständigung arbeitet.

Ich lösche zuerst hier oben etwas Code.

Und fange an, eine Import-Anweisung zu schreiben.

Mit ihr werden wir einige der APIs importieren, die bereits in Velo integriert sind.

Die automatische Vervollständigung zeigt mir direkt APIs an, die verfügbar sind, bevor ich überhaupt fertig getippt habe.

Jetzt können wir eine beliebige API auswählen.

Ich nehme „wixData“.

Fertig.

Ich musste die Anweisung gar nicht komplett eingeben.

Der Code wurde sofort richtig für mich eingefügt.

Schauen wir uns jetzt die Velo-Seitenleiste an.

Hier können wir durch den Seitencode aller Hauptseiten der Website navigieren.

Über diese Leiste verwalten wir unseren Frontend-Code.

Wir sehen „Start“, „Velo für Einsteiger“, „Hallo Velo“ und andere Seiten, die bereits auf der Website sind.

Angeklickte Seiten werden in der Codeansicht angezeigt.

So lässt sich der Code besser organisieren und du weißt immer, auf welcher Seite du bist.

Ganz unten haben wir den Abschnitt „Global“.

Hier liegt die Datei „masterPage.js“.

Sie enthält den Code, mit dem wir die gesamte Website gestalten, nicht nur eine bestimmte Seite.

Ein gutes Beispiel dafür wäre eine haftende Kopfzeile, die den Nutzern folgen soll, wenn sie auf der Seite von oben nach unten scrollen.

Ebenfalls hier links ist der Bereich „Codedateien“.

Unter „Codedateien“ bearbeiten wir den Backend-Code.

Wenn ich jetzt hier weitere Codedateien in der Seitenleiste anklicke, werden sie als weitere Tabs neben unserem Frontend-Code geöffnet.

So bleibt alles weiterhin übersichtlich.

Es gibt auch einen Kurs zum Thema Backend, der sehr viel genauer auf Codedateien eingeht.

Den solltest du dir am besten auch ansehen.

Hier oben können wir unseren Code durchsuchen.

Du siehst, ich habe schon etwas in das Feld eingegeben, um herauszufinden, auf welcher Seite „wixData“ verwendet wird.

Ich verwende das Feld, wenn ich vergessen habe, wo ich aufgehört habe, Code suche, den ich erstellt habe, oder bei Funktionen nicht weiß, auf welcher Seite sie sind.

Es ist praktisch, wenn ich komplexe Websites designe.

Dann haben wir hier unsere Datenbanken, die Content-Verwaltung.

Hier können wir alle Daten speichern, die wir auf den Websites zeigen wollen.

Wir müssen sie nicht extern speichern.

Das interne Speichern der Daten bedeutet für dich schnelleres Entwickeln.

Zusätzlich weißt du so jederzeit genau, wo deine Daten sind.

Es gibt noch viele andere Tools, die du verwenden kannst.

Zum Beispiel unsere Datensätze, über die du Seitenelemente mit der Datenbank verknüpften kannst, ohne Code schreiben zu müssen.

Hier sind noch die Entwicklertools.

Sie sind nicht Thema dieses Kurses, daher gebe ich dir nur einen Überblick.

Einmal gibt es den Release-Manager.

Mit ihm kannst du festlegen, wie viel Prozent deiner Besucher eine Änderung angezeigt bekommen.

Sollen zum Beispiel 50% der Nutzer eine Änderung sehen, kannst du das im Release-Manager festlegen.

Der Secrets-Manager ist ein Speicher für deine geheimen API-Schlüssel.

Er schützt sie vor unbefugten Zugriffen.

Hier noch „Protokolle“ und „Monitoring“, damit du die Website beobachten kannst und siehst, wenn bestimmte Fehler auftreten.

Die nächste Option in der Velo-Seitenleiste: die Hilfe.

Hier findest du alles Nötige, um dich mit der Community auszutauschen und mehr über Velo zu lernen.

Da wäre unser Forum, in dem du dich mit der Community austauschen und diskutieren kannst, und auch noch unsere API-Referenz.

Die API-Referenz ist wirklich nützlich und beschreibt alle APIs, die in Velo integriert sind, vom Frontend bis zum Backend.

Es gibt sogar APIs, mit denen du externe Dienste von Drittanbietern anbinden kannst, wie unsere API „http-functions“.

Die Dokumentation ist noch detaillierter und enthält Beispiele, wie du Velo auf ganz unterschiedliche Weise einsetzen kannst.

In dieser Lektion habe ich dir gezeigt, wie du die Entwicklungsumgebung verwendest.

In der nächsten zeige ich dir, wie du mit Velo programmierst und deine Seite interaktiver gestaltest.