En nybegynnerveiledning for bruk av Velo av Wix

Velo er et Wix-produkt med en vri. Wix er en av de mer populære utviklingsplattformene på nettet. Det lar designere (og den gjennomsnittlige nettstedseieren) bygge fantastiske nettsteder uten å skrive en eneste linje med kode.

Med Velo utvider Wix brukerbasen til å inkludere utviklere. Velo er en full-stack utviklingsplattform som lar brukere lage flotte nettsider ved hjelp av kode. Det eneste programmeringsspråket du trenger å kunne for å bruke Velo er JavaScript. Plattformen støtter moderne JavaScript-funksjoner og bruker et NodeJS-basert serversidesystem.

I denne artikkelen vil du lære om Velos unike funksjoner og hvordan du bruker dem.

Velos utviklerfunksjoner

Velo-utviklingsplattformen har en innebygd IDE, som lar utviklere skrive JavaScript-kode og se endringene i sanntid. Velo kjører på en NodeJS-server, noe som betyr at en utvikler har tilgang til npm-pakker og andre utviklerverktøy. Disse utviklerfunksjonene inkluderer:

• Muligheten til å lage tilpassede oppsett og interaksjoner på en nettside.
instagram viewer
• Muligheten til å lage samlinger i en database.
• Muligheten til å lage tilpassede APIer for nettstedet ditt.

Opprette et nettsted ved hjelp av Velo

For å bruke Velo, må du navigere til hovednettstedet. Når du er der, velg alternativet for å starte et nytt prosjekt. Dette vil ta deg gjennom det vanlige Opprettingsprosess for Wix-nettsted, hvor du må velge hvilken type nettside du vil bygge. Du kan enten velge en mal på egen hånd eller ved hjelp av Wix ADI.

Etter at du har valgt alternativet for å redigere malen din, vil du se noe sånt som følgende brukergrensesnitt:

Til venstre for bildet ovenfor er sidefeltet for nettstedstruktur, som gir deg tilgang til de forskjellige JavaScript-filene som er koblet til alle sidene på nettstedet ditt. Siden som er valgt for øyeblikket er hjemmesiden, og hvis du ser nederst på bildet ovenfor, ser du et koderedigeringsprogram som viser innholdet i HOME.js-filen.

Opprette egendefinert layoutstruktur og interaksjoner

Malen valgt for denne artikkelen er den nettbaserte velværebutikken. Hjemmesiden til denne nettsiden har en "mest populær", som du kan se på følgende bilde:

Men hvis du ønsker å bruke en annen overskrift for denne delen, kan du oppnå dette i Velo-editoren ved å sette inn følgende kode i HOME.js-filen.

HOME.js-filen

$w.onReady(funksjon () {
 $w('#text20').text = 'TENDENDE ARTIKLER'
});

Koden ovenfor vil oppdatere den "mest populære" overskriften til "trending items, og du kan se denne oppdateringen ved å klikke på forhåndsvisningsknappen øverst til høyre i Velo-grensesnittet. På hjemmesiden i den aktuelle delen bør du se noe sånt som følgende utgang:

Arbeide med Velos database

De fleste dynamiske nettsteder har en database som lagrer data forskjellig, avhengig av typen. Velo lagrer dataene sine i samlinger i sin sentrale database. For å få tilgang til denne databasen, må du navigere til tabellen med rader og kolonner til venstre for Velos utviklergrensesnitt.

Som du kan se fra bildet ovenfor, kommer hver Wix-mal med noen standardsamlinger, avhengig av typen nettsted. Nettsidemalen valgt for denne artikkelen er en velværebutikk. Derfor har den en samling standardprodukter som du enkelt kan erstatte med varene dine.

I slekt: Hvordan bygge en profesjonell online tilstedeværelse med Wix

Men hvis du vil lage samlingen fra bunnen av, har de også det alternativet.

For å opprette en ny samling i Velo-databasen din, hold ganske enkelt musen over delen "innholdssamlinger", og et plussikon vil vises til høyre for teksten.

Ved å klikke på det nye samlingsalternativet i bildet ovenfor genereres følgende samlingsopprettingsskjema:

Hvis du oppgir et samlingsnavn og klikker på opprett-knappen, kommer du til følgende innholdsbehandlingsside:

Fra innholdsbehandlingssiden ovenfor kan du begynne å fylle ut produktsamlingen din ved å bruke de relevante plussikonene. Men før du begynner å legge til produkter i samlingen din, må du opprette de riktige feltene.

Se på innholdsbehandlingssiden ovenfor; den har for øyeblikket ett felt – tittel. Du kan ikke slette dette feltet fordi det er det primære feltet (eller den unike identifikatoren), som hver samling må ha. Du kan imidlertid gi den en mer passende tittel, for eksempel produktnavn eller ID.

For å endre navnet på et eksisterende felt i samlingen din, klikk ganske enkelt på det aktuelle feltet, og du vil se flere alternativer.

Hvis du velger egenskapsalternativet som du kan se i bildet ovenfor, vises følgende popup-skjema:

Popup-skjemaet ovenfor lar deg endre feltnavnet ved å skrive inn tittelen du ønsker i tekstfeltet merket "feltnavn" og klikke på lagre.

Legge til et nytt felt

Det er to måter å legge til et nytt felt i samlingen din. Det første alternativet er å klikke på plussikonet til høyre for den eksisterende tittelen i samlingen. Denne metoden vil generere følgende skjema:

Det nye feltskjemaet lar deg oppgi et feltnavn, en feltnøkkel (som skal integreres i koden) og en felttype. Felttypen kan være en av følgende:

• Tekst
• Bilde
• boolsk
• Nummer
• Dato og tid
• Tid
• Rik tekst
• Referanse
• Multi-referanse
• URL

Den andre måten å legge til et nytt felt i samlingen på er ved å klikke på "skjulte felt"-delen og velge alternativet "Legg til felt" fra popup-feltlisten. Du bør se noe som bildet nedenfor:

Legge til elementer i samlingen For å legge til et nytt element i samlingen din, kan du klikke på "Legg til element"-knappen til høyre på innholdsbehandlingssiden eller klikke på plusstegnet under felttitlene. Etter at du har lagt til det første elementet i samlingen din, skal det se slik ut:

Du kan nå legge til så mange elementer som mulig i samlingen din ved å bruke en av metodene ovenfor. Men for å oppdatere nettstedet ditt med en samling, må du først publisere nettstedet.

Hva gjør Velo spennende

Nå vet du hvordan du tilpasser nettstedet ditt ved å bruke JavaScript-kode i Velo IDE. Du kan også lage tilpassede samlinger med så mange elementer du vil i Velo-databasen. Men det som muligens er det beste med Velo er muligheten til å importere og bruke npm-pakker.

Hva er npm? JavaScript-pakkebehandleren forklart

Forbedre prosjektene dine med npm-pakker.

Les Neste

Om forfatteren