Aloittelijan opas Wixin Velon käyttöön

Velo on Wix-tuote kierteellä. Wix on yksi suosituimmista kehitysalustoista verkossa. Sen avulla suunnittelijat (ja tavallinen verkkosivuston omistaja) voivat rakentaa upeita verkkosivustoja kirjoittamatta yhtään koodiriviä.

Velon avulla Wix laajentaa käyttäjäkuntaansa kehittäjiin. Velo on täyden pinon kehitysalusta, jonka avulla käyttäjät voivat luoda upeita verkkosivustoja koodin avulla. Ainoa ohjelmointikieli, jonka sinun tarvitsee tietää käyttääksesi Veloa, on JavaScript. Alusta tukee nykyaikaisia ​​JavaScript-ominaisuuksia ja käyttää NodeJS-pohjaista palvelinpuolen järjestelmää.

Tässä artikkelissa opit Velon ainutlaatuisista ominaisuuksista ja niiden käytöstä.

Velon kehittäjäominaisuudet

Velo-kehitysalustassa on sisäänrakennettu IDE, jonka avulla kehittäjät voivat kirjoittaa JavaScript-koodia ja nähdä muutokset reaaliajassa. Velo toimii NodeJS-palvelimella, mikä tarkoittaa, että kehittäjällä on pääsy npm-paketteihin ja muihin kehittäjätyökaluihin. Näitä kehittäjäominaisuuksia ovat:

• Mahdollisuus luoda mukautettuja asetteluja ja vuorovaikutuksia verkkosivulle.
instagram viewer
• Mahdollisuus luoda kokoelmia tietokantaan.
• Mahdollisuus luoda mukautettuja sovellusliittymiä verkkosivustollesi.

Verkkosivuston luominen Velolla

Jotta voit käyttää Veloa, sinun on siirryttävä sen pääsivustolle. Kun olet siellä, valitse vaihtoehto uuden projektin aloittamiseksi. Tämä vie sinut tavanomaiseen Wix-sivuston luomisprosessi, jossa sinun on valittava verkkosivuston tyyppi, jonka haluat rakentaa. Voit valita mallin joko itse tai Wix ADI: n avulla.

Kun olet valinnut mallin muokkausvaihtoehdon, näet seuraavanlaisen käyttöliittymän:

Yllä olevan kuvan vasemmalla puolella on verkkosivuston rakenteen sivupalkki, joka antaa sinulle pääsyn erilaisiin JavaScript-tiedostoihin, jotka on yhdistetty verkkosivustosi kaikkiin sivuihin. Tällä hetkellä valittu sivu on kotisivu, ja jos katsot yllä olevan kuvan alaosaa, näet koodieditorin, joka näyttää HOME.js-tiedoston sisällön.

Mukautetun asettelurakenteen ja vuorovaikutusten luominen

Tähän artikkeliin valittu malli on hyvinvointiverkkokauppa. Tämän sivuston kotisivulla on "suosituin", jonka näet seuraavassa kuvassa:

Jos kuitenkin haluat käyttää eri otsikkoa tälle osalle, voit saavuttaa tämän Velo-editorissa lisäämällä seuraavan koodin HOME.js-tiedostoon.

HOME.js-tiedosto

$w.onReady(toiminto () {
 $w('#text20').text = 'TRENDAAVAT TAVARAT'
});

Yllä oleva koodi päivittää "suosituimman" otsikon muotoon "trendaavat kohteet", ja voit tarkastella tätä päivitystä napsauttamalla esikatselupainiketta Velo-käyttöliittymän oikeassa yläkulmassa. Kotisivulla sopivassa osiossa sinun pitäisi nähdä jotain seuraavanlaista tulosta:

Työskentely Velon tietokannan kanssa

Useimmilla dynaamisilla verkkosivustoilla on tietokanta, joka tallentaa tiedot eri tavalla tyypistä riippuen. Velo tallentaa tiedot kokoelmiinsa keskustietokantaansa. Päästäksesi tähän tietokantaan, sinun on navigoitava rivien ja sarakkeiden taulukkoon Velon kehittäjäliittymän vasemmalla puolella.

Kuten yllä olevasta kuvasta näet, jokaisessa Wix-mallissa on joitain oletuskokoelmia verkkosivuston tyypistä riippuen. Tälle artikkelille valittu verkkosivustomalli on hyvinvointikauppa. Siksi siinä on kokoelma oletustuotteita, jotka voit helposti korvata tuotteillasi.

Aiheeseen liittyvä: Kuinka rakentaa ammattimainen online-läsnäolo Wixin avulla

Jos kuitenkin haluat luoda kokoelmasi tyhjästä, heillä on myös tämä vaihtoehto.

Luo uusi kokoelma Velo-tietokantaan viemällä hiiren osoitin "sisältökokoelmat" -osion päälle, jolloin tekstin oikealle puolelle tulee plus-kuvake.

Napsauttamalla uuden kokoelman vaihtoehtoa yllä olevassa kuvassa luodaan seuraava kokoelman luontilomake:

Kun annat kokoelman nimen ja napsautat Luo-painiketta, pääset seuraavalle sisällönhallintasivulle:

Yllä olevalta sisällönhallintasivulta voit aloittaa tuotekokoelmasi täyttämisen asianmukaisten plus-kuvakkeiden avulla. Mutta ennen kuin aloitat tuotteiden lisäämisen kokoelmaasi, sinun on luotava asianmukaiset kentät.

Katso yllä olevaa sisällönhallintasivua. sillä on tällä hetkellä yksi kenttä – otsikko. Et voi poistaa tätä kenttää, koska se on ensisijainen kenttä (tai yksilöllinen tunniste), joka on oltava jokaisessa kokoelmassa. Voit kuitenkin antaa sille sopivamman otsikon, kuten tuotteen nimen tai tunnuksen.

Jos haluat muuttaa kokoelmassasi olevan kentän nimeä, napsauta kyseistä kenttää, niin näet useita vaihtoehtoja.

Kun valitset yllä olevassa kuvassa näkyvän ominaisuuden, saat seuraavan ponnahdusikkunan:

Yllä olevan ponnahdusikkunan avulla voit muuttaa kentän nimeä kirjoittamalla haluamasi otsikon tekstikenttään "kentän nimi" ja napsauttamalla Tallenna.

Uuden kentän lisääminen

Voit lisätä uuden kentän kokoelmaasi kahdella tavalla. Ensimmäinen vaihtoehto on napsauttaa plus-kuvaketta kokoelmassa olevan otsikon oikealla puolella. Tämä menetelmä luo seuraavan lomakkeen:

Uuden kenttälomakkeen avulla voit antaa kentän nimen, kentän avaimen (integroidaksesi koodiisi) ja kentän tyypin. Kentän tyyppi voi olla mikä tahansa seuraavista:

• Teksti
• Kuva
• Boolean
• Määrä
• Päivämäärä ja aika
• Aika
• Rich Text
• Viite
• Multi-Reference
• URL-osoite

Toinen tapa lisätä uusi kenttä kokoelmaasi on napsauttaa "piilotetut kentät" -osiota ja valita "Lisää kenttä" -vaihtoehto ponnahdusikkunaluettelosta. Sinun pitäisi nähdä jotain alla olevan kuvan kaltaista:

Kohteiden lisääminen kokoelmaan Voit lisätä uuden kohteen kokoelmaasi napsauttamalla "Lisää kohde" -painiketta sisällönhallintasivun oikealla puolella tai napsauttamalla plusmerkkiä kenttien otsikoiden alla. Kun olet lisännyt ensimmäisen kohteen kokoelmaasi, sen pitäisi näyttää tältä:

Voit nyt lisätä mahdollisimman monta kohdetta kokoelmaasi jommallakummalla yllä olevista tavoista. Kuitenkin, jos haluat päivittää verkkosivustosi kokoelmalla, sinun on ensin julkaistava sivusto.

Mikä tekee Velosta jännittävän

Nyt tiedät kuinka muokata verkkosivustoasi JavaScript-koodilla Velo IDE: ssä. Voit myös luoda mukautettuja kokoelmia niin monella esineellä kuin haluat Velo-tietokannassa. Mutta mikä saattaa olla parasta Velossa, on kyky tuoda ja käyttää npm-paketteja.

Mikä on npm? JavaScript-pakettien hallinta selitettynä

Paranna projektejasi npm-pakettien avulla.

Lue Seuraava

Kirjailijasta