Sprievodca pre začiatočníkov používaním Velo od Wix

Velo je produkt Wix s twistom. Wix je jednou z najpopulárnejších vývojových platforiem na webe. Umožňuje dizajnérom (a priemernému vlastníkovi webových stránok) vytvárať úžasné webové stránky bez písania jediného riadku kódu.

S Velo Wix rozširuje svoju užívateľskú základňu o vývojárov. Velo je komplexná vývojová platforma, ktorá umožňuje používateľom vytvárať skvelé webové stránky pomocou kódu. Jediný programovací jazyk, ktorý potrebujete vedieť, aby ste mohli používať Velo, je JavaScript. Platforma podporuje moderné funkcie JavaScriptu a používa serverový systém založený na NodeJS.

V tomto článku sa dozviete o jedinečných funkciách Velo a o tom, ako ich používať.

Vývojárske funkcie Velo

Vývojová platforma Velo má vstavané IDE, ktoré umožňuje vývojárom písať kód JavaScript a vidieť zmeny v reálnom čase. Velo beží na serveri NodeJS, čo znamená, že vývojár má prístup k balíkom npm a ďalším vývojárskym nástrojom. Tieto vývojárske funkcie zahŕňajú:

• Schopnosť vytvárať vlastné rozloženia a interakcie na webovej stránke.
instagram viewer
• Schopnosť vytvárať kolekcie v databáze.
• Schopnosť vytvárať vlastné API pre váš web.

Vytvorenie webovej stránky pomocou Velo

Ak chcete používať Velo, musíte prejsť na jeho hlavnú webovú stránku. Keď tam budete, vyberte možnosť začať nový projekt. Toto vás prevedie zvykom Proces vytvárania stránok Wix, kde si budete musieť vybrať typ webu, ktorý chcete vytvoriť. Šablónu si môžete vybrať sami alebo pomocou Wix ADI.

Po výbere možnosti na úpravu šablóny sa zobrazí niečo ako nasledujúce používateľské rozhranie:

Naľavo od obrázka vyššie je bočný panel so štruktúrou webových stránok, ktorý vám umožňuje prístup k rôznym súborom JavaScript pripojeným ku všetkým stránkam na vašom webe. Aktuálne vybratá stránka je domovskou stránkou a ak sa pozriete na spodnú časť obrázku vyššie, uvidíte editor kódu zobrazujúci obsah súboru HOME.js.

Vytváranie vlastnej štruktúry rozloženia a interakcií

Šablónou vybranou pre tento článok je internetový wellness obchod. Domovská stránka tohto webu má „najpopulárnejšie“, čo môžete vidieť na nasledujúcom obrázku:

Ak však chcete pre túto sekciu použiť iný nadpis, môžete to dosiahnuť v editore Velo vložením nasledujúceho kódu do súboru HOME.js.

Súbor HOME.js

$w.onReady(funkciu () {
 $w('#text20').text = 'TRENDENTNÉ POLOŽKY'
});

Vyššie uvedený kód aktualizuje nadpis „najpopulárnejšie“ na „trendy“ a túto aktualizáciu môžete zobraziť kliknutím na tlačidlo ukážky v pravom hornom rohu rozhrania Velo. Na domovskej stránke v príslušnej sekcii by ste mali vidieť niečo ako nasledujúci výstup:

Práca s databázou Velo

Väčšina dynamických webových stránok má databázu, ktorá ukladá údaje rôzne v závislosti od typu. Velo ukladá svoje údaje do kolekcií vo svojej centrálnej databáze. Ak chcete získať prístup k tejto databáze, budete musieť prejsť do tabuľky riadkov a stĺpcov naľavo od vývojárskeho rozhrania Velo.

Ako vidíte na obrázku vyššie, každá šablóna Wix sa dodáva s niektorými predvolenými kolekciami v závislosti od typu webovej stránky. Šablóna webu vybratá pre tento článok je wellness obchod. Preto má kolekciu predvolených produktov, ktoré môžete jednoducho nahradiť vašimi položkami.

Súvisiace: Ako si vybudovať profesionálnu online prítomnosť s Wix

Ak však chcete vytvoriť svoju zbierku od začiatku, majú tiež túto možnosť.

Ak chcete vytvoriť novú kolekciu vo svojej databáze Velo, jednoducho umiestnite kurzor myši na časť „zbierky obsahu“ a napravo od textu sa zobrazí ikona plus.

Kliknutím na možnosť novej kolekcie na obrázku vyššie vygenerujete nasledujúci formulár na vytvorenie kolekcie:

Zadaním názvu kolekcie a kliknutím na tlačidlo vytvoriť sa dostanete na nasledujúcu stránku správcu obsahu:

Na stránke správcu obsahu vyššie môžete začať napĺňať kolekciu produktov pomocou príslušných ikon plus. Ale skôr, ako začnete pridávať produkty do svojej zbierky, budete musieť vytvoriť príslušné polia.

Pozrite sa na stránku správcu obsahu vyššie; v súčasnosti má jedno pole – názov. Toto pole nemôžete odstrániť, pretože ide o primárne pole (alebo jedinečný identifikátor), ktoré musí mať každá kolekcia. Môžete mu však dať vhodnejší názov, napríklad názov produktu alebo ID.

Ak chcete zmeniť názov existujúceho poľa vo svojej kolekcii, jednoducho kliknite na príslušné pole a zobrazí sa niekoľko možností.

Výberom možnosti vlastnosti, ktorú môžete vidieť na obrázku vyššie, sa zobrazí nasledujúci kontextový formulár:

Vyskakovací formulár vyššie vám umožňuje zmeniť názov poľa zadaním požadovaného názvu do textového poľa označeného ako „názov poľa“ a kliknutím na tlačidlo Uložiť.

Pridanie nového poľa

Existujú dva spôsoby, ako pridať nové pole do zbierky. Prvou možnosťou je kliknúť na ikonu plus napravo od existujúceho titulu v kolekcii. Táto metóda vygeneruje nasledujúci formulár:

Nový formulár poľa vám umožňuje zadať názov poľa, kľúč poľa (na integráciu do vášho kódu) a typ poľa. Typ poľa môže byť ktorýkoľvek z nasledujúcich:

• Text
• Obrázok
• Boolean
• číslo
• Dátum a čas
• čas
• Bohatý text
• Odkaz
• Viacnásobná referencia
• URL

Druhým spôsobom, ako pridať nové pole do zbierky, je kliknúť na sekciu „skryté polia“ a vybrať možnosť „Pridať pole“ zo zoznamu vyskakovacích polí. Mali by ste vidieť niečo ako obrázok nižšie:

Pridávanie položiek do zbierky Ak chcete do zbierky pridať novú položku, môžete kliknúť na tlačidlo „Pridať položku“ na pravej strane stránky správcu obsahu alebo kliknúť na znamienko plus pod názvami polí. Po pridaní prvej položky do zbierky by mala vyzerať takto:

Teraz môžete do svojej zbierky pridať čo najviac položiek pomocou jednej z vyššie uvedených metód. Ak však chcete aktualizovať svoj web akoukoľvek zbierkou, budete musieť web najskôr zverejniť.

Čo robí Velo vzrušujúcim

Teraz viete, ako prispôsobiť svoju webovú stránku pomocou kódu JavaScript v IDE Velo. Môžete si tiež vytvoriť vlastné kolekcie s ľubovoľným počtom položiek v databáze Velo. Čo je však na Velo pravdepodobne najlepšie, je schopnosť importovať a používať balíčky npm.

Čo je npm? Vysvetlenie správcu balíkov JavaScript

Vylepšite svoje projekty pomocou balíčkov npm.

Prečítajte si ďalej

O autorovi