Przewodnik dla początkujących dotyczący korzystania z Velo przez Wix

Velo to produkt Wix z niespodzianką. Wix to jedna z najpopularniejszych platform programistycznych w sieci. Pozwala projektantom (i przeciętnemu właścicielowi witryny) budować niesamowite witryny bez pisania nawet jednej linii kodu.

Dzięki Velo, Wix rozszerza swoją bazę użytkowników o programistów. Velo to platforma programistyczna typu full-stack, która pozwala użytkownikom tworzyć świetne strony internetowe za pomocą kodu. Jedynym językiem programowania, który musisz znać, aby korzystać z Velo, jest JavaScript. Platforma obsługuje nowoczesne funkcje JavaScript i wykorzystuje system po stronie serwera oparty na NodeJS.

W tym artykule dowiesz się o unikalnych funkcjach Velo i o tym, jak z nich korzystać.

Funkcje programistyczne Velo

Platforma programistyczna Velo ma wbudowane IDE, umożliwiające programistom pisanie kodu JavaScript i obserwowanie zmian w czasie rzeczywistym. Velo działa na serwerze NodeJS, co oznacza, że ​​programista ma dostęp do pakietów npm i innych narzędzi programistycznych. Te funkcje programistyczne obejmują:

• Możliwość tworzenia niestandardowych układów i interakcji na stronie internetowej.
• Możliwość tworzenia kolekcji w bazie danych.
• Możliwość tworzenia niestandardowych interfejsów API dla Twojej witryny.

Tworzenie strony internetowej za pomocą Velo

Aby korzystać z Velo, musisz przejść do jego głównej strony internetowej. Tam wybierz opcję rozpoczęcia nowego projektu. To przeprowadzi Cię przez zwyczajowe Proces tworzenia witryny Wix, gdzie będziesz musiał wybrać typ witryny, którą chcesz zbudować. Możesz wybrać szablon samodzielnie lub za pomocą Wix ADI.

Po wybraniu opcji edycji szablonu zobaczysz podobny do następującego interfejsu użytkownika:

Po lewej stronie powyższego obrazu znajduje się pasek boczny struktury witryny, który zapewnia dostęp do różnych plików JavaScript powiązanych ze wszystkimi stronami w witrynie. Aktualnie wybrana strona jest stroną główną, a jeśli spojrzysz na dół powyższego obrazu, zobaczysz edytor kodu wyświetlający zawartość pliku HOME.js.

Tworzenie niestandardowej struktury układu i interakcji

Szablon wybrany do tego artykułu to internetowy sklep wellness. Strona główna tej witryny ma „najpopularniejszy”, co można zobaczyć na poniższym obrazku:

Jeśli jednak chcesz użyć innego nagłówka dla tej sekcji, możesz to osiągnąć w edytorze Velo, wstawiając następujący kod do pliku HOME.js.

Plik HOME.js

$w.onReady(funkcjonować () {
 $w('#text20').text = 'POZYCJE TRENDU'
});

Powyższy kod zaktualizuje nagłówek „najpopularniejszy” na „modne przedmioty”, a tę aktualizację można wyświetlić, klikając przycisk podglądu w prawym górnym rogu interfejsu Velo. Na stronie głównej w odpowiedniej sekcji powinieneś zobaczyć coś takiego jak następujący wynik:

Praca z bazą danych Velo

Większość dynamicznych witryn internetowych ma bazę danych, która przechowuje dane w różny sposób, w zależności od typu. Velo przechowuje swoje dane w zbiorach w swojej centralnej bazie danych. Aby uzyskać dostęp do tej bazy danych, musisz przejść do tabeli wierszy i kolumn po lewej stronie interfejsu programisty Velo.

Jak widać na powyższym obrazku, każdy szablon Wix zawiera kilka domyślnych kolekcji, w zależności od typu witryny. Szablon strony internetowej wybrany do tego artykułu to sklep wellness. Dlatego posiada kolekcję domyślnych produktów, które możesz łatwo zastąpić swoimi przedmiotami.

Związane z: Jak zbudować profesjonalną obecność w Internecie za pomocą Wix

Jeśli jednak chcesz stworzyć swoją kolekcję od podstaw, oni również mają taką opcję.

Aby utworzyć nową kolekcję w bazie danych Velo, po prostu najedź kursorem myszy na sekcję „kolekcje treści”, a po prawej stronie tekstu pojawi się ikona plusa.

Kliknięcie nowej opcji kolekcji na powyższym obrazku spowoduje wygenerowanie następującego formularza tworzenia kolekcji:

Podanie nazwy kolekcji i kliknięcie przycisku tworzenia spowoduje przejście do następującej strony menedżera treści:

Na powyższej stronie menedżera treści możesz rozpocząć wypełnianie swojej kolekcji produktów za pomocą odpowiednich ikon plusa. Ale zanim zaczniesz dodawać produkty do swojej kolekcji, musisz stworzyć odpowiednie pola.

Spójrz na powyższą stronę menedżera treści; obecnie ma jedno pole — tytuł. Nie możesz usunąć tego pola, ponieważ jest to pole podstawowe (lub unikalny identyfikator), który musi posiadać każda kolekcja. Możesz jednak nadać mu bardziej odpowiedni tytuł, taki jak nazwa produktu lub identyfikator.

Aby zmienić nazwę istniejącego pola w swojej kolekcji, po prostu kliknij dane pole, a zobaczysz kilka opcji.

Wybranie opcji właściwości widocznej na powyższym obrazku spowoduje wyświetlenie następującego wyskakującego formularza:

Wyskakujący formularz powyżej pozwala zmienić nazwę pola, wprowadzając żądany tytuł w polu tekstowym oznaczonym „nazwa pola” i klikając Zapisz.

Dodawanie nowego pola

Istnieją dwa sposoby dodania nowego pola do swojej kolekcji. Pierwsza opcja to kliknięcie ikony plusa po prawej stronie istniejącego tytułu w kolekcji. Ta metoda wygeneruje następujący formularz:

Nowy formularz pola umożliwia podanie nazwy pola, klucza pola (w celu integracji z kodem) oraz typu pola. Typ pola może być jednym z następujących:

• Tekst
• Obraz
• Boole'a
• Numer
• Data i godzina
• Czas
• Tekst sformatowany
• Odniesienie
• Wiele referencji
• URL

Drugim sposobem dodania nowego pola do kolekcji jest kliknięcie sekcji „ukryte pola” i wybranie opcji „Dodaj pole” z wyskakującej listy pól. Powinieneś zobaczyć coś takiego jak na poniższym obrazku:

Dodawanie przedmiotów do kolekcji Aby dodać nowy przedmiot do swojej kolekcji, możesz kliknąć przycisk „Dodaj przedmiot” po prawej stronie strony Menedżera treści lub kliknąć znak plus pod tytułami pól. Po dodaniu pierwszego przedmiotu do swojej kolekcji powinien on wyglądać tak:

Możesz teraz dodać do swojej kolekcji jak najwięcej przedmiotów, korzystając z jednej z powyższych metod. Aby jednak zaktualizować swoją witrynę o dowolną kolekcję, musisz najpierw opublikować witrynę.

Co sprawia, że ​​Velo jest ekscytujące?

Teraz wiesz, jak dostosować swoją stronę internetową za pomocą kodu JavaScript w Velo IDE. Możesz także tworzyć niestandardowe kolekcje z dowolną liczbą przedmiotów w bazie danych Velo. Ale prawdopodobnie najlepszą rzeczą w Velo jest możliwość importowania i używania pakietów npm.

Co to jest npm? Wyjaśnienie Menedżera pakietów JavaScript

Ulepsz swoje projekty dzięki pakietom npm.

Czytaj dalej

O autorze