En nybörjarguide för att använda Velo av Wix

Velo är en Wix-produkt med en twist. Wix är en av de mer populära utvecklingsplattformarna på webben. Det tillåter designers (och den genomsnittliga webbplatsägaren) att bygga fantastiska webbplatser utan att skriva en enda rad kod.

Med Velo utökar Wix sin användarbas till att omfatta utvecklare. Velo är en full-stack utvecklingsplattform som låter användare skapa fantastiska webbplatser med hjälp av kod. Det enda programmeringsspråket du behöver kunna för att använda Velo är JavaScript. Plattformen stöder moderna JavaScript-funktioner och använder ett NodeJS-baserat system på serversidan.

I den här artikeln kommer du att lära dig om Velos unika funktioner och hur du använder dem.

Velos utvecklarfunktioner

Velo-utvecklingsplattformen har en inbyggd IDE, som gör att utvecklare kan skriva JavaScript-kod och se förändringarna i realtid. Velo körs på en NodeJS-server, vilket innebär att en utvecklare har tillgång till npm-paket och andra utvecklarverktyg. Dessa utvecklarfunktioner inkluderar:

• Möjligheten att skapa anpassade layouter och interaktioner på en webbsida.
• Möjligheten att skapa samlingar i en databas.
• Möjligheten att skapa anpassade API: er för din webbplats.

Skapa en webbplats med Velo

För att använda Velo måste du navigera till dess huvudwebbplats. Väl där väljer du alternativet för att starta ett nytt projekt. Detta tar dig igenom det vanliga Process för att skapa en Wix-webbplats, där du måste välja vilken typ av webbplats du vill bygga. Du kan antingen välja en mall på egen hand eller med hjälp av Wix ADI.

När du har valt alternativet att redigera din mall ser du något i stil med följande användargränssnitt:

Till vänster om bilden ovan finns webbplatsstrukturens sidofält, som ger dig tillgång till de olika JavaScript-filerna kopplade till alla sidor på din webbplats. Den sida som för närvarande är vald är startsidan, och om du tittar längst ner på bilden ovan ser du en kodredigerare som visar innehållet i filen HOME.js.

Skapa anpassad layoutstruktur och interaktioner

Mallen som valts för den här artikeln är hälsobutiken online. Hemsidan för denna webbplats har en "mest populär", som du kan se i följande bild:

Men om du vill använda en annan rubrik för det här avsnittet kan du uppnå detta i Velo-redigeraren genom att infoga följande kod i filen HOME.js.

HOME.js-filen

$w.onReady(fungera () {
 $w('#text20').text = 'TRENANDE ARTIKEL'
});

Koden ovan kommer att uppdatera den "mest populära" rubriken till "trending items, och du kan se den här uppdateringen genom att klicka på förhandsgranskningsknappen längst upp till höger i Velo-gränssnittet. På startsidan i lämpligt avsnitt bör du se något i stil med följande utdata:

Arbeta med Velos databas

De flesta dynamiska webbplatser har en databas som lagrar data på olika sätt, beroende på typ. Velo lagrar sina data i samlingar i sin centrala databas. För att få tillgång till denna databas måste du navigera till tabellen med rader och kolumner till vänster om Velos utvecklargränssnitt.

Som du kan se från bilden ovan kommer varje Wix-mall med några standardsamlingar, beroende på typ av webbplats. Webbplatsmallen som valts för den här artikeln är en hälsobutik. Därför har den en samling standardprodukter som du enkelt kan ersätta med dina föremål.

Relaterad: Hur man bygger en professionell onlinenärvaro med Wix

Men om du vill skapa din samling från grunden har de också det alternativet.

För att skapa en ny samling i din Velo-databas, för bara musen över avsnittet "innehållssamlingar", så kommer en plusikon att dyka upp till höger om texten.

Genom att klicka på det nya samlingsalternativet i bilden ovan genereras följande samlingsskapande:

Om du anger ett samlingsnamn och klickar på knappen Skapa kommer du till följande innehållshanterarsida:

Från innehållshanteraren ovan kan du börja fylla din produktsamling med de relevanta plusikonerna. Men innan du börjar lägga till produkter i din samling måste du skapa lämpliga fält.

Titta på innehållshanteraren ovan; den har för närvarande ett fält – titel. Du kan inte ta bort det här fältet eftersom det är det primära fältet (eller den unika identifieraren), som varje samling måste ha. Du kan dock ge den en mer passande titel, som produktnamn eller ID.

För att ändra namnet på ett befintligt fält i din samling klickar du bara på fältet i fråga, så ser du flera alternativ.

Om du väljer egenskapsalternativet som du kan se i bilden ovan visas följande popup-formulär:

Popup-formuläret ovan låter dig ändra fältnamnet genom att ange den titel du vill ha i textfältet märkt "fältnamn" och klicka på spara.

Lägga till ett nytt fält

Det finns två sätt att lägga till ett nytt fält i din samling. Det första alternativet är att klicka på plusikonen till höger om den befintliga titeln i samlingen. Denna metod kommer att generera följande formulär:

Det nya fältformuläret låter dig ange ett fältnamn, en fältnyckel (att integrera i din kod) och en fälttyp. Fälttypen kan vara någon av följande:

• Text
• Bild
• Boolean
• siffra
• Datum och tid
• Tid
• Rik text
• Referens
• Multi-referens
• URL

Det andra sättet att lägga till ett nytt fält i din samling är genom att klicka på avsnittet "dolda fält" och välja alternativet "Lägg till fält" från popup-fältlistan. Du bör se något liknande bilden nedan:

Lägga till objekt i samlingen För att lägga till ett nytt objekt i din samling kan du klicka på knappen "Lägg till objekt" till höger på sidan för innehållshanteraren eller klicka på plustecknet under fälttitlarna. När du har lagt till ditt första föremål i din samling bör det se ut så här:

Du kan nu lägga till så många föremål som möjligt till din samling med någon av metoderna ovan. Men för att uppdatera din webbplats med valfri samling måste du först publicera webbplatsen.

Vad gör Velo spännande

Nu vet du hur du anpassar din webbplats med JavaScript-kod i Velo IDE. Du kan också skapa anpassade samlingar med så många föremål som du vill i Velo-databasen. Men det som förmodligen är det bästa med Velo är möjligheten att importera och använda npm-paket.

Vad är npm? JavaScript-pakethanteraren förklaras

Förbättra dina projekt med npm-paket.

Läs Nästa

Om författaren