En begyndervejledning til brug af Velo af Wix

Velo er et Wix-produkt med et twist. Wix er en af ​​de mere populære udviklingsplatforme på nettet. Det giver designere (og den gennemsnitlige webstedsejer) mulighed for at bygge fantastiske websteder uden at skrive en enkelt linje kode.

Med Velo udvider Wix sin brugerbase til også at omfatte udviklere. Velo er en fuld stack udviklingsplatform, der giver brugerne mulighed for at skabe fantastiske websteder ved hjælp af kode. Det eneste programmeringssprog, du behøver at kende for at bruge Velo, er JavaScript. Platformen understøtter moderne JavaScript-funktioner og bruger et NodeJS-baseret serversidesystem.

I denne artikel lærer du om Velos unikke funktioner, og hvordan du bruger dem.

Velo's udviklerfunktioner

Velo-udviklingsplatformen har en indbygget IDE, som gør det muligt for udviklere at skrive JavaScript-kode og se ændringerne i realtid. Velo kører på en NodeJS-server, hvilket betyder, at en udvikler har adgang til npm-pakker og andre udviklerværktøjer. Disse udviklerfunktioner inkluderer:

• Evnen til at skabe tilpassede layouts og interaktioner på en webside.
• Muligheden for at oprette samlinger i en database.
• Muligheden for at oprette tilpassede API'er til dit websted.

Oprettelse af en hjemmeside ved hjælp af Velo

For at bruge Velo skal du navigere til dets hovedwebsted. Når du er der, skal du vælge muligheden for at starte et nyt projekt. Dette vil tage dig igennem det sædvanlige Oprettelse af Wix-websted, hvor du skal vælge den type hjemmeside, du vil bygge. Du kan enten vælge en skabelon på egen hånd eller ved hjælp af Wix ADI.

Når du har valgt muligheden for at redigere din skabelon, vil du se noget i stil med følgende brugergrænseflade:

Til venstre for billedet ovenfor er sidebjælken for hjemmesidens struktur, som giver dig adgang til de forskellige JavaScript-filer, der er forbundet med alle siderne på din hjemmeside. Den aktuelt valgte side er startsiden, og hvis du ser nederst på billedet ovenfor, ser du en kodeeditor, der viser indholdet af filen HOME.js.

Oprettelse af tilpasset layoutstruktur og interaktioner

Skabelonen valgt til denne artikel er online wellness butikken. Hjemmesiden på denne hjemmeside har en "mest populær", som du kan se på følgende billede:

Men hvis du vil bruge en anden overskrift til denne sektion, kan du opnå dette i Velo-editoren ved at indsætte følgende kode i filen HOME.js.

HOME.js-filen

$w.onReady(fungere () {
 $w('#text20').text = 'TRENDENDE ARTIKLER'
});

Koden ovenfor vil opdatere den "mest populære" overskrift til "trending items, og du kan se denne opdatering ved at klikke på forhåndsvisningsknappen øverst til højre i Velo-grænsefladen. På startsiden i den relevante sektion bør du se noget som følgende output:

Arbejde med Velos database

De fleste dynamiske websteder har en database, der gemmer data forskelligt afhængigt af typen. Velo gemmer sine data i samlinger i sin centrale database. For at få adgang til denne database skal du navigere til tabellen med rækker og kolonner til venstre for Velos udviklergrænseflade.

Som du kan se fra billedet ovenfor, kommer hver Wix-skabelon med nogle standardsamlinger, afhængigt af typen af ​​websted. Hjemmesideskabelonen valgt til denne artikel er en wellnessbutik. Derfor har den en samling af standardprodukter, som du nemt kan erstatte med dine varer.

Relaterede: Sådan opbygger du en professionel online tilstedeværelse med Wix

Men hvis du vil skabe din samling fra bunden, har de også den mulighed.

For at oprette en ny samling i din Velo-database skal du blot holde musen over sektionen "indholdssamlinger", og et plusikon vises til højre for teksten.

Ved at klikke på den nye samlingsmulighed på billedet ovenfor genereres følgende samlingsformular:

Hvis du angiver et samlingsnavn og klikker på knappen Opret, kommer du til følgende indholdsadministratorside:

Fra indholdsadministratorsiden ovenfor kan du begynde at udfylde din produktsamling ved hjælp af de relevante plusikoner. Men før du begynder at tilføje produkter til din samling, skal du oprette de relevante felter.

Se indholdsadministratorsiden ovenfor; det har i øjeblikket ét felt – titel. Du kan ikke slette dette felt, fordi det er det primære felt (eller unikke identifikator), som hver samling skal have. Du kan dog give det en mere passende titel, såsom produktnavn eller ID.

For at ændre navnet på et eksisterende felt i din samling skal du blot klikke på det pågældende felt, og du vil se flere muligheder.

Hvis du vælger den egenskabsindstilling, du kan se på billedet ovenfor, fremkommer følgende pop-up-formular:

Pop-up-formularen ovenfor giver dig mulighed for at ændre feltnavnet ved at indtaste den ønskede titel i tekstfeltet mærket "feltnavn" og klikke på Gem.

Tilføjelse af et nyt felt

Der er to måder at tilføje et nyt felt til din samling. Den første mulighed er at klikke på plusikonet til højre for den eksisterende titel i samlingen. Denne metode vil generere følgende formular:

Den nye feltformular giver dig mulighed for at angive et feltnavn, en feltnøgle (til at integrere i din kode) og en felttype. Felttypen kan være en af ​​følgende:

• Tekst
• Billede
• Boolean
• Nummer
• Dato og tid
• Tid
• Rig tekst
• Reference
• Multi-reference
• URL

Den anden måde at tilføje et nyt felt til din samling på er ved at klikke på sektionen "skjulte felter" og vælge indstillingen "Tilføj felt" fra pop op-feltlisten. Du bør se noget som billedet nedenfor:

Tilføjelse af elementer til samlingen For at tilføje et nyt element til din samling kan du klikke på knappen "Tilføj element" til højre på indholdsadministratorsiden eller klikke på plustegnet under felttitlerne. Når du har føjet dit første element til din samling, skulle det se sådan ud:

Du kan nu tilføje så mange elementer som muligt til din samling ved at bruge en af ​​metoderne ovenfor. Men for at opdatere dit websted med en samling, skal du først udgive webstedet.

Hvad gør Velo spændende

Nu ved du, hvordan du tilpasser dit websted ved hjælp af JavaScript-kode i Velo IDE. Du kan også oprette brugerdefinerede samlinger med så mange elementer, som du vil, i Velo-databasen. Men det, der muligvis er det bedste ved Velo, er muligheden for at importere og bruge npm-pakker.

Hvad er npm? JavaScript-pakkeadministratoren forklaret

Forbedre dine projekter med npm-pakker.

Læs Næste

Om forfatteren