Een beginnershandleiding voor het gebruik van Velo van Wix

Velo is een Wix-product met een twist. Wix is ​​een van de meer populaire ontwikkelingsplatforms op internet. Hiermee kunnen ontwerpers (en de gemiddelde website-eigenaar) geweldige websites bouwen zonder een enkele regel code te schrijven.

Met Velo breidt Wix zijn gebruikersbestand uit met ontwikkelaars. Velo is een full-stack ontwikkelplatform waarmee gebruikers geweldige websites kunnen maken met behulp van code. De enige programmeertaal die u moet kennen om Velo te gebruiken, is JavaScript. Het platform ondersteunt moderne JavaScript-functies en maakt gebruik van een op NodeJS gebaseerd server-side systeem.

In dit artikel leer je over de unieke functies van Velo en hoe je ze kunt gebruiken.

Velo's ontwikkelaarsfuncties

Het Velo-ontwikkelplatform heeft een ingebouwde IDE, waardoor ontwikkelaars JavaScript-code kunnen schrijven en de wijzigingen in realtime kunnen zien. Velo draait op een NodeJS-server, wat betekent dat een ontwikkelaar toegang heeft tot npm-pakketten en andere ontwikkelaarstools. Deze ontwikkelaarsfuncties omvatten:

• De mogelijkheid om aangepaste lay-outs en interacties op een webpagina te maken.
• De mogelijkheid om collecties in een database aan te maken.
• De mogelijkheid om aangepaste API's voor uw website te maken.

Een website maken met Velo

Om Velo te gebruiken, moet je naar de hoofdwebsite gaan. Selecteer daar de optie om een ​​nieuw project te starten. Dit leidt u door de gebruikelijke Aanmaakproces voor Wix-sites, waar u het type website moet kiezen dat u wilt bouwen. U kunt zelf een sjabloon selecteren of met behulp van Wix ADI.

Nadat je de optie hebt geselecteerd om je sjabloon te bewerken, zie je zoiets als de volgende gebruikersinterface:

Links van de afbeelding hierboven bevindt zich de zijbalk van de websitestructuur, die u toegang geeft tot de verschillende JavaScript-bestanden die zijn verbonden met alle pagina's op uw website. De momenteel geselecteerde pagina is de startpagina en als u naar de onderkant van de bovenstaande afbeelding kijkt, ziet u een code-editor die de inhoud van het HOME.js-bestand weergeeft.

Aangepaste lay-outstructuur en interacties maken

De sjabloon die voor dit artikel is geselecteerd, is de online wellnesswinkel. De startpagina van deze website heeft een "meest populair", die u in de volgende afbeelding kunt zien:

Als u echter een andere kop voor deze sectie wilt gebruiken, kunt u dit in de Velo-editor bereiken door de volgende code in het HOME.js-bestand in te voegen.

Het HOME.js-bestand

$w.onReady(functie () {
 $w('#text20').text = 'TRENDING ITEMS'
});

De bovenstaande code zal de "meest populaire" kop bijwerken naar "trending items", en u kunt deze update bekijken door op de voorbeeldknop rechtsboven in de Velo-interface te klikken. Op de startpagina in de juiste sectie zou u zoiets als de volgende uitvoer moeten zien:

Werken met Velo's database

De meeste dynamische websites hebben een database waarin gegevens verschillend worden opgeslagen, afhankelijk van het type. Velo slaat haar gegevens op in collecties in haar centrale database. Om toegang te krijgen tot deze database, moet je navigeren naar de tabel met rijen en kolommen aan de linkerkant van Velo's ontwikkelaarsinterface.

Zoals je op de afbeelding hierboven kunt zien, wordt elke Wix-sjabloon geleverd met enkele standaardverzamelingen, afhankelijk van het type website. Het websitesjabloon dat voor dit artikel is geselecteerd, is een wellnesswinkel. Daarom heeft het een verzameling standaardproducten die u eenvoudig kunt vervangen door uw artikelen.

Verwant: Een professionele online aanwezigheid opbouwen met Wix

Als u echter uw verzameling helemaal opnieuw wilt maken, hebben ze die optie ook.

Om een ​​nieuwe collectie in uw Velo-database aan te maken, beweegt u uw muis over het gedeelte "inhoudsverzamelingen", waarna rechts van de tekst een pluspictogram verschijnt.

Als u op de nieuwe collectie-optie in de afbeelding hierboven klikt, wordt het volgende formulier voor het maken van een collectie gegenereerd:

Als u een collectienaam opgeeft en op de knop Maken klikt, gaat u naar de volgende pagina voor inhoudbeheer:

Vanaf de contentmanager-pagina hierboven kunt u beginnen met het vullen van uw productcollectie met behulp van de relevante pluspictogrammen. Maar voordat u producten aan uw collectie gaat toevoegen, moet u de juiste velden maken.

Kijk naar de contentmanager-pagina hierboven; het heeft momenteel één veld: titel. U kunt dit veld niet verwijderen omdat dit het primaire veld (of unieke ID) is dat elke verzameling moet hebben. U kunt het echter een meer toepasselijke titel geven, zoals productnaam of ID.

Om de naam van een bestaand veld in uw verzameling te wijzigen, klikt u eenvoudig op het betreffende veld en ziet u verschillende opties.

Als u de eigenschapsoptie selecteert die u in de bovenstaande afbeelding kunt zien, krijgt u het volgende pop-upformulier:

Met het bovenstaande pop-upformulier kunt u de veldnaam wijzigen door de gewenste titel in het tekstveld met het label "veldnaam" in te voeren en op Opslaan te klikken.

Een nieuw veld toevoegen

Er zijn twee manieren om een ​​nieuw veld aan uw verzameling toe te voegen. De eerste optie is om op het pluspictogram rechts van de bestaande titel in de verzameling te klikken. Deze methode genereert het volgende formulier:

Met het nieuwe veldformulier kunt u een veldnaam, een veldsleutel (te integreren in uw code) en een veldtype opgeven. Het veldtype kan een van de volgende zijn:

• Tekst
• Afbeelding
• Booleaans
• Nummer
• Datum en tijd
• Tijd
• Rijke text
• Referentie
• Multi-referentie
• URL

De tweede manier om een ​​nieuw veld aan uw verzameling toe te voegen, is door op het gedeelte 'verborgen velden' te klikken en de optie 'Veld toevoegen' te selecteren in de pop-uplijst met velden. Je zou zoiets als de onderstaande afbeelding moeten zien:

Items aan de collectie toevoegen Om een ​​nieuw item aan je collectie toe te voegen, kun je op de knop "Item toevoegen" rechts op de pagina Content Manager klikken of op het plusteken onder de veldtitels klikken. Nadat je je eerste item aan je collectie hebt toegevoegd, zou het er als volgt uit moeten zien:

Je kunt nu zoveel mogelijk items aan je collectie toevoegen met een van de bovenstaande methoden. Als u uw website echter wilt bijwerken met een verzameling, moet u eerst de site publiceren.

Wat maakt Velo zo spannend?

Nu weet u hoe u uw website kunt aanpassen met JavaScript-code in de Velo IDE. U kunt ook aangepaste collecties maken met zoveel items als u wilt in de Velo-database. Maar wat misschien wel het beste van Velo is, is de mogelijkheid om npm-pakketten te importeren en te gebruiken.

Wat is npm? De JavaScript-pakketbeheerder uitgelegd

Verbeter uw projecten met npm-pakketten.

Lees volgende

Over de auteur