Um guia para iniciantes no uso do Velo by Wix

Velo é um produto Wix com um toque diferente. Wix é uma das plataformas de desenvolvimento mais populares na web. Ele permite que designers (e o proprietário médio de sites) criem sites incríveis sem escrever uma única linha de código.

Com o Velo, o Wix está expandindo sua base de usuários para incluir desenvolvedores. Velo é uma plataforma de desenvolvimento full-stack que permite aos usuários criar ótimos sites usando código. A única linguagem de programação que você precisa conhecer para usar o Velo é JavaScript. A plataforma suporta recursos JavaScript modernos e usa um sistema do lado do servidor baseado em NodeJS.

Neste artigo, você aprenderá sobre os recursos exclusivos do Velo e como usá-los.

Recursos do desenvolvedor do Velo

A plataforma de desenvolvimento Velo possui um IDE integrado, permitindo que os desenvolvedores escrevam código JavaScript e vejam as alterações em tempo real. Velo é executado em um servidor NodeJS, o que significa que um desenvolvedor tem acesso a pacotes npm e outras ferramentas de desenvolvedor. Esses recursos do desenvolvedor incluem:

• A capacidade de criar layouts personalizados e interações em uma página da web.
• A capacidade de criar coleções em um banco de dados.
• A capacidade de criar APIs personalizadas para o seu site.

Criando um site usando o Velo

Para usar o Velo, você precisará navegar até o site principal. Uma vez lá, selecione a opção para iniciar um novo projeto. Isto irá levá-lo através do habitual Processo de criação de sites Wix, onde você terá que escolher o tipo de site que deseja construir. Você pode selecionar um modelo por conta própria ou com a ajuda do Wix ADI.

Depois de selecionar a opção de editar seu modelo, você verá algo como a seguinte interface do usuário:

À esquerda da imagem acima está a barra lateral da estrutura do site, que dá acesso aos vários arquivos JavaScript conectados a todas as páginas do seu site. A página selecionada atualmente é a página inicial e, se você observar a parte inferior da imagem acima, verá um editor de código exibindo o conteúdo do arquivo HOME.js.

Criação de estrutura de layout personalizado e interações

O modelo selecionado para este artigo é a loja online de bem-estar. A página inicial deste site tem um “mais popular”, que você pode ver na imagem a seguir:

No entanto, se você quiser usar um título diferente para esta seção, poderá fazer isso no editor Velo inserindo o código a seguir no arquivo HOME.js.

O arquivo HOME.js

$w.onPronto(função () {
 $w('#text20').text = 'ITENS EM PONTA'
});

O código acima atualizará o título “mais popular” para “itens em alta, e você pode visualizar esta atualização clicando no botão de visualização no canto superior direito da interface do Velo. Na página inicial na seção apropriada, você deve ver algo como a seguinte saída:

Trabalhando com o banco de dados da Velo

A maioria dos sites dinâmicos possui um banco de dados que armazena dados de forma diferente, dependendo do tipo. A Velo armazena seus dados em coleções em seu banco de dados central. Para obter acesso a esse banco de dados, você precisará navegar até a tabela de linhas e colunas à esquerda da interface do desenvolvedor do Velo.

Como você pode ver na imagem acima, cada template Wix vem com algumas coleções padrão, dependendo do tipo de site. O modelo de site selecionado para este artigo é uma loja de bem-estar. Portanto, possui uma coleção de produtos padrão que você pode substituir facilmente por seus itens.

Relacionado: Como construir uma presença online profissional com Wix

No entanto, se você quiser criar sua coleção do zero, eles também têm essa opção.

Para criar uma nova coleção em seu banco de dados Velo, basta passar o mouse sobre a seção “coleções de conteúdo” e um ícone de adição aparecerá à direita do texto.

Clicar na opção nova coleção na imagem acima irá gerar o seguinte formulário de criação de coleção:

Fornecer um nome de coleção e clicar no botão criar levará você à seguinte página do gerenciador de conteúdo:

Na página do gerenciador de conteúdo acima, você pode começar a preencher sua coleção de produtos usando os ícones de adição relevantes. Mas antes de começar a adicionar produtos à sua coleção, você precisará criar os campos apropriados.

Veja a página do gerenciador de conteúdo acima; atualmente tem um campo—título. Você não pode excluir este campo porque é o campo primário (ou identificador exclusivo), que toda coleção deve ter. No entanto, você pode atribuir um título mais apropriado, como nome ou ID do produto.

Para alterar o nome de um campo existente em sua coleção, basta clicar no campo em questão e você verá várias opções.

Selecionar a opção de propriedade que você pode ver na imagem acima produzirá o seguinte formulário pop-up:

O formulário pop-up acima permite que você altere o nome do campo inserindo o título desejado no campo de texto denominado “nome do campo” e clicando em salvar.

Adicionando um novo campo

Há duas maneiras de adicionar um novo campo à sua coleção. A primeira opção é clicar no ícone de adição à direita do título existente na coleção. Este método irá gerar o seguinte formulário:

O novo formulário de campo permite fornecer um nome de campo, uma chave de campo (para integrar em seu código) e um tipo de campo. O tipo de campo pode ser qualquer um dos seguintes:

• Texto
• Imagem
• boleano
• Número
• Data e hora
• Tempo
• Rich Text
• Referência
• Referência múltipla
• URL

A segunda maneira de adicionar um novo campo à sua coleção é clicando na seção “campos ocultos” e selecionando a opção “Adicionar campo” na lista de campos pop-up. Você deve ver algo como a imagem abaixo:

Adicionando itens à coleção Para adicionar um novo item à sua coleção, você pode clicar no botão “Adicionar item” à direita da página do Gerenciador de conteúdo ou clicar no sinal de mais abaixo dos títulos dos campos. Depois de adicionar seu primeiro item à sua coleção, ele deve ficar assim:

Agora você pode adicionar o maior número possível de itens à sua coleção usando um dos métodos acima. No entanto, para atualizar seu site com qualquer coleção, você precisará primeiro publicar o site.

O que torna o Velo emocionante

Agora você sabe como personalizar seu site usando código JavaScript no Velo IDE. Você também pode criar coleções personalizadas com quantos itens quiser no banco de dados Velo. Mas o que possivelmente é a melhor coisa do Velo é a capacidade de importar e usar pacotes npm.

O que é npm? O gerenciador de pacotes JavaScript explicado

Melhore seus projetos com pacotes npm.

Leia a seguir

Sobre o autor