Una guida per principianti all'uso di Velo di Wix

Velo è un prodotto Wix con una svolta. Wix è una delle piattaforme di sviluppo più popolari sul web. Consente ai progettisti (e al proprietario medio di un sito Web) di creare siti Web straordinari senza scrivere una sola riga di codice.

Con Velo, Wix sta espandendo la sua base di utenti per includere gli sviluppatori. Velo è una piattaforma di sviluppo full-stack che consente agli utenti di creare fantastici siti Web utilizzando il codice. L'unico linguaggio di programmazione che devi conoscere per usare Velo è JavaScript. La piattaforma supporta le moderne funzionalità JavaScript e utilizza un sistema lato server basato su NodeJS.

In questo articolo imparerai le caratteristiche uniche di Velo e come usarle.

Funzionalità per sviluppatori di Velo

La piattaforma di sviluppo Velo ha un IDE integrato, che consente agli sviluppatori di scrivere codice JavaScript e vedere le modifiche in tempo reale. Velo funziona su un server NodeJS, il che significa che uno sviluppatore ha accesso ai pacchetti npm e ad altri strumenti per sviluppatori. Queste funzionalità per sviluppatori includono:

• La possibilità di creare layout e interazioni personalizzati su una pagina web.
• La possibilità di creare raccolte in un database.
• La possibilità di creare API personalizzate per il tuo sito web.

Creazione di un sito Web utilizzando Velo

Per utilizzare Velo, dovrai accedere al suo sito Web principale. Una volta lì, seleziona l'opzione per iniziare un nuovo progetto. Questo ti porterà attraverso il consueto Processo di creazione del sito Wix, dove dovrai scegliere il tipo di sito web che vuoi costruire. Puoi selezionare un modello da solo o con l'aiuto di Wix ADI.

Dopo aver selezionato l'opzione per modificare il modello, vedrai qualcosa di simile alla seguente interfaccia utente:

A sinistra dell'immagine sopra c'è la barra laterale della struttura del sito web, che ti dà accesso ai vari file JavaScript collegati a tutte le pagine del tuo sito web. La pagina attualmente selezionata è la home page e, se guardi in fondo all'immagine sopra, vedrai un editor di codice che mostra il contenuto del file HOME.js.

Creazione di strutture e interazioni personalizzate del layout

Il template selezionato per questo articolo è il negozio di benessere online. La home page di questo sito ha un "più popolare", che puoi vedere nell'immagine seguente:

Tuttavia, se si desidera utilizzare un'intestazione diversa per questa sezione, è possibile ottenere ciò nell'editor Velo inserendo il codice seguente nel file HOME.js.

Il file HOME.js

$w.onReady(funzione () {
 $w('#text20').text = 'ARTICOLI DI TENDENZA'
});

Il codice sopra aggiornerà l'intestazione "più popolare" in "articoli di tendenza e puoi visualizzare questo aggiornamento facendo clic sul pulsante di anteprima in alto a destra dell'interfaccia di Velo. Nella home page nella sezione appropriata, dovresti vedere qualcosa come il seguente output:

Lavorare con il database di Velo

La maggior parte dei siti Web dinamici dispone di un database che archivia i dati in modo diverso, a seconda del tipo. Velo memorizza i suoi dati in raccolte nel suo database centrale. Per accedere a questo database, dovrai accedere alla tabella di righe e colonne a sinistra dell'interfaccia per sviluppatori di Velo.

Come puoi vedere dall'immagine sopra, ogni modello Wix viene fornito con alcune raccolte predefinite, a seconda del tipo di sito web. Il modello di sito Web selezionato per questo articolo è un negozio di benessere. Pertanto, ha una raccolta di prodotti predefiniti che puoi facilmente sostituire con i tuoi articoli.

Imparentato: Come creare una presenza online professionale con Wix

Tuttavia, se vuoi creare la tua collezione da zero, hanno anche questa opzione.

Per creare una nuova raccolta nel tuo database Velo, passa semplicemente il mouse sulla sezione "raccolte di contenuti" e un'icona più apparirà a destra del testo.

Facendo clic sulla nuova opzione di raccolta nell'immagine sopra, verrà generato il seguente modulo di creazione della raccolta:

Fornire un nome di raccolta e fare clic sul pulsante Crea ti porterà alla seguente pagina di gestione dei contenuti:

Dalla pagina di gestione dei contenuti sopra, puoi iniziare a popolare la tua collezione di prodotti utilizzando le icone più pertinenti. Ma prima di iniziare ad aggiungere prodotti alla tua collezione, dovrai creare i campi appropriati.

Guarda la pagina del gestore dei contenuti sopra; attualmente ha un campo: titolo. Non puoi eliminare questo campo perché è il campo principale (o identificatore univoco) che deve avere ogni raccolta. Tuttavia, puoi assegnargli un titolo più appropriato, come il nome del prodotto o l'ID.

Per modificare il nome di un campo esistente nella tua raccolta, fai semplicemente clic sul campo in questione e vedrai diverse opzioni.

Selezionando l'opzione della proprietà che puoi vedere nell'immagine sopra, verrà prodotto il seguente modulo pop-up:

Il modulo a comparsa sopra ti consente di modificare il nome del campo inserendo il titolo che desideri nel campo di testo etichettato "nome campo" e facendo clic su Salva.

Aggiunta di un nuovo campo

Esistono due modi per aggiungere un nuovo campo alla tua raccolta. La prima opzione è fare clic sull'icona più a destra del titolo esistente nella raccolta. Questo metodo genererà il seguente modulo:

Il nuovo modulo di campo consente di fornire un nome di campo, una chiave di campo (da integrare nel codice) e un tipo di campo. Il tipo di campo può essere uno qualsiasi dei seguenti:

• Testo
• Immagine
• booleano
• Numero
• Data e ora
• Volta
• Testo ricco
• Riferimento
• Multiriferimento
• URL

Il secondo modo per aggiungere un nuovo campo alla tua raccolta è fare clic sulla sezione "campi nascosti" e selezionare l'opzione "Aggiungi campo" dall'elenco dei campi a comparsa. Dovresti vedere qualcosa come l'immagine qui sotto:

Aggiunta di articoli alla collezione Per aggiungere un nuovo articolo alla tua collezione, puoi fare clic sul pulsante "Aggiungi articolo" a destra della pagina del gestore dei contenuti o fare clic sul segno più sotto i titoli dei campi. Dopo aver aggiunto il tuo primo articolo alla tua collezione, dovrebbe apparire così:

Ora puoi aggiungere il maggior numero di articoli possibile alla tua collezione utilizzando uno dei metodi sopra indicati. Tuttavia, per aggiornare il tuo sito Web con qualsiasi raccolta, dovrai prima pubblicare il sito.

Ciò che rende Velo eccitante

Ora sai come personalizzare il tuo sito Web utilizzando il codice JavaScript nell'IDE Velo. Puoi anche creare collezioni personalizzate con tutti gli elementi che desideri nel database Velo. Ma ciò che probabilmente è la cosa migliore di Velo è la capacità di importare e utilizzare pacchetti npm.

Cos'è npm? Spiegazione del gestore di pacchetti JavaScript

Migliora i tuoi progetti con i pacchetti npm.

Leggi Avanti

Circa l'autore