Un ghid pentru începători pentru utilizarea Velo de la Wix

Velo este un produs Wix cu o întorsătură. Wix este una dintre cele mai populare platforme de dezvoltare de pe web. Le permite designerilor (și proprietarului mediu de site-uri web) să construiască site-uri web uimitoare fără a scrie o singură linie de cod.

Cu Velo, Wix își extinde baza de utilizatori pentru a include dezvoltatori. Velo este o platformă de dezvoltare full-stack care permite utilizatorilor să creeze site-uri web grozave folosind cod. Singurul limbaj de programare pe care trebuie să-l cunoașteți pentru a utiliza Velo este JavaScript. Platforma acceptă funcții JavaScript moderne și utilizează un sistem bazat pe server NodeJS.

În acest articol, veți afla despre caracteristicile unice ale Velo și despre cum să le utilizați.

Caracteristicile pentru dezvoltatori Velo

Platforma de dezvoltare Velo are un IDE încorporat, permițând dezvoltatorilor să scrie cod JavaScript și să vadă modificările în timp real. Velo rulează pe un server NodeJS, ceea ce înseamnă că un dezvoltator are acces la pachetele npm și la alte instrumente pentru dezvoltatori. Aceste caracteristici pentru dezvoltatori includ:

• Abilitatea de a crea machete și interacțiuni personalizate pe o pagină web.
• Abilitatea de a crea colecții într-o bază de date.
• Abilitatea de a crea API-uri personalizate pentru site-ul dvs. web.

Crearea unui site web folosind Velo

Pentru a utiliza Velo, va trebui să navigați la site-ul său principal. Odată ajuns acolo, selectați opțiunea de a începe un nou proiect. Acest lucru vă va duce prin obiceiul Procesul de creare a site-ului Wix, unde va trebui să alegeți tipul de site web pe care doriți să îl construiți. Puteți selecta fie un șablon pe cont propriu, fie cu ajutorul Wix ADI.

După ce ați selectat opțiunea de a edita șablonul, veți vedea ceva de genul următoarei interfețe de utilizare:

În stânga imaginii de mai sus se află bara laterală a structurii site-ului web, care vă oferă acces la diferitele fișiere JavaScript conectate la toate paginile de pe site-ul dvs. Pagina selectată în prezent este pagina de pornire, iar dacă te uiți în partea de jos a imaginii de mai sus, vezi un editor de cod care afișează conținutul fișierului HOME.js.

Crearea unei structuri de aspect personalizate și a interacțiunilor

Șablonul selectat pentru acest articol este magazinul de wellness online. Pagina de start a acestui site are un „cel mai popular”, pe care îl puteți vedea în următoarea imagine:

Cu toate acestea, dacă doriți să utilizați un titlu diferit pentru această secțiune, puteți realiza acest lucru în editorul Velo inserând următorul cod în fișierul HOME.js.

Fișierul HOME.js

$w.onReady(funcţie () {
 $w('#text20').text = 'ARTICOLE TENDINȚE'
});

Codul de mai sus va actualiza titlul „cel mai popular” la „articole în tendințe și puteți vizualiza această actualizare făcând clic pe butonul de previzualizare din partea dreaptă sus a interfeței Velo. Pe pagina de pornire din secțiunea corespunzătoare, ar trebui să vedeți ceva de genul următor rezultat:

Lucrul cu baza de date Velo

Majoritatea site-urilor web dinamice au o bază de date care stochează datele diferit, în funcție de tip. Velo își stochează datele în colecții din baza de date centrală. Pentru a obține acces la această bază de date, va trebui să navigați la tabelul de rânduri și coloane din stânga interfeței pentru dezvoltatori a lui Velo.

După cum puteți vedea din imaginea de mai sus, fiecare șablon Wix vine cu câteva colecții implicite, în funcție de tipul de site web. Șablonul de site selectat pentru acest articol este un magazin de wellness. Prin urmare, are o colecție de produse implicite pe care le puteți înlocui cu ușurință cu articolele dvs.

Legate de: Cum să construiești o prezență online profesională cu Wix

Cu toate acestea, dacă doriți să vă creați colecția de la zero, au și această opțiune.

Pentru a crea o nouă colecție în baza de date Velo, treceți pur și simplu cu mouse-ul peste secțiunea „colecții de conținut”, iar o pictogramă plus va apărea în dreapta textului.

Făcând clic pe noua opțiune de colecție din imaginea de mai sus, se va genera următorul formular de creare a colecției:

Dacă furnizați un nume de colecție și faceți clic pe butonul de creare, veți ajunge la următoarea pagină de manager de conținut:

Din pagina managerului de conținut de mai sus, puteți începe să vă completați colecția de produse folosind pictogramele plus relevante. Dar înainte de a începe să adăugați produse la colecția dvs., va trebui să creați câmpurile corespunzătoare.

Uită-te la pagina managerului de conținut de mai sus; are în prezent un câmp — titlu. Nu puteți șterge acest câmp deoarece este câmpul principal (sau identificatorul unic), pe care trebuie să îl aibă fiecare colecție. Cu toate acestea, îi puteți da un titlu mai adecvat, cum ar fi numele produsului sau ID-ul.

Pentru a schimba numele unui câmp existent din colecția dvs., faceți clic pe câmpul în cauză și veți vedea mai multe opțiuni.

Selectarea opțiunii de proprietate pe care o puteți vedea în imaginea de mai sus va produce următorul formular pop-up:

Formularul pop-up de mai sus vă permite să schimbați numele câmpului introducând titlul dorit în câmpul de text etichetat „nume câmp” și făcând clic pe Salvare.

Adăugarea unui câmp nou

Există două moduri de a adăuga un câmp nou la colecția dvs. Prima opțiune este să faceți clic pe pictograma plus din dreapta titlului existent în colecție. Această metodă va genera următorul formular:

Noul formular de câmp vă permite să furnizați un nume de câmp, o cheie de câmp (pentru a se integra în codul dvs.) și un tip de câmp. Tipul de câmp poate fi oricare dintre următoarele:

• Text
• Imagine
• boolean
• Număr
• Data si ora
• Timp
• Text bogat
• Referinţă
• Multi-referință
• URL

A doua modalitate de a adăuga un câmp nou la colecția dvs. este făcând clic pe secțiunea „câmpuri ascunse” și selectând opțiunea „Adăugați câmp” din lista de câmpuri pop-up. Ar trebui să vedeți ceva ca imaginea de mai jos:

Adăugarea de articole la colecție Pentru a adăuga un articol nou la colecția dvs., puteți face clic pe butonul „Adăugați articol” din partea dreaptă a paginii Manager de conținut sau puteți face clic pe semnul plus de sub titlurile câmpurilor. După ce adăugați primul articol în colecție, ar trebui să arate astfel:

Acum puteți adăuga cât mai multe articole în colecția dvs. folosind oricare dintre metodele de mai sus. Cu toate acestea, pentru a vă actualiza site-ul web cu orice colecție, va trebui mai întâi să publicați site-ul.

Ce face ca Velo să fie incitant

Acum știți cum să vă personalizați site-ul web folosind codul JavaScript în Velo IDE. De asemenea, puteți crea colecții personalizate cu câte articole doriți în baza de date Velo. Dar ceea ce poate fi cel mai bun lucru despre Velo este capacitatea de a importa și utiliza pachete npm.

Ce este npm? Managerul de pachete JavaScript explicat

Îmbunătățiți-vă proiectele cu pachetele npm.

Citiți în continuare

Despre autor