Central de Ajuda Wix
    Início
    Introdução ao Velo by Wix

Introdução ao Velo by Wix

6 min de leitura
Visite o site do Velo by Wix para começar e continuar aprendendo.
Velo by Wix é um produto inovador que permite criar aplicações Web sofisticadas sem nenhuma configuração. Utilize o construtor visual do Wix, adicione funcionalidades e interações personalizadas usando as APIs do Velo e crie código sem servidores tanto no front-end quanto no back-end. Com Velo, sua aplicação Web pode estar em pleno funcionamento em uma fração do tempo que normalmente levaria.
Para apresentar você ao Velo, criamos nossa própria versão do "Olá, mundo!": um site simples de conversão de moeda que usa a API wix-fetch para fazer conexão com um serviço de terceiros. Os visitantes do site podem escolher as moedas de origem e destino em menus dropdown e digitar uma quantia a ser convertida. Os resultados são exibidos em uma caixa de texto.
Siga as etapas abaixo para se familiarizar com a estrutura e sintaxe básicas do Velo.

Etapa 1: crie um novo site Wix

  1. Faça login na sua conta Wix ou crie uma conta Wix caso ainda não tenha uma.
  2. Abra um template em branco no Editor.

Etapa 2: ative o Velo

Ative o Velo no Editor Wix para que você possa usar código no site.

Etapa 3: adicione elementos à página

Adicione elementos da página no Editor Wix: 
  1. Clique em Adicionar na parte esquerda do Editor.
  2. Adicione ao seu site os elementos da página ilustrados abaixo.                                                      
  •  Ao adicionar cada elemento, defina o ID no painel de propriedades e eventos que é exibido na parte direita do Editor. Use o nome de cada elemento exibido abaixo, retirando o hashtag (#). Veja na tabela abaixo a lista completa de elementos e onde encontrá-los no menu Adicionar.
 Elemento 
 Local no menu Adicionar 
 Descrição 
ID
Menu Dropdown 
Campo de Entrada 
Para selecionar a moeda de origem 
sourceCurrency
Menu Dropdown 
Campo de Entrada 
Para selecionar a moeda de destino 
targetCurrency
Entrada 
User Input
Para digitar a quantia a ser convertida 
sourceAmount
Caixa de Texto 
Campo de Entrada 
Para exibir a quantia convertida 
targetAmount
Botão 
Botão  
Para efetuar a conversão de moeda ao ser clicado 
calculateButton

Etapa 4: adicione código

Observações
  • Todo o código deste exemplo é adicionado a uma única página do site. Nesta seção, dividimos o código em pequenos blocos seguidos de explicações. Para ver o código completo deste exemplo sem os comentários, role a tela para o final do tutorial. 
  • Consulte nossa referência de API para saber mais sobre o código baseado em Velo deste exemplo.
Para adicionar o código:
  1. Clique duas vezes no Código da Página Inicial na parte inferior do Editor para abrir o painel de código.
  2. Adicione o seguinte código à parte superior do código na aba antes da função onReady:
1// A função getJSON em wix-fetch permite recuperar um
2// recurso JSON da rede usando HTTPS.
3import {getJSON} from 'wix-fetch';
4
5// Configura o URL do serviço de terceiros.
6const url = "https://api.exchangeratesapi.io/latest";
7
8// Define os valores de opção de moeda e o texto dos menus dropdown.
9let currencyOptions = [
10  { "value": "USD",  "label": "US Dollars"},
11  { "value": "EUR",  "label": "Euros"},
12  { "value": "JPY",  "label": "Japanese Yen"},
13];
  1. Adicione o código abaixo à função onReady. O código dentro da função onReady é executado quando a página é carregada.
1$w.onReady(function () {
2  // Define as opções de moeda dos menus dropdown.
3  populateDropdowns();
4
5  // Define o manipulador de eventos onClick para que o calculateButton calcule a moeda de destino.
6  $w('#calculateButton').onClick((event) => {
7    calculateCurrency();
8  })
9});

A função $w pode selecionar elementos de uma página por ID ou por tipo, permitindo a execução de funções e definição das propriedades dos elementos. Use esta sintaxe para selecionar um elemento por ID: $w("#myElementId") e esta para selecionar por tipo: $w("ElementType").

qui selecionamos o botão e definimos um manipulador de eventos onClick event handler para calcular a quantia na moeda de destino.

4.  Adicione código para definir as funções:

populateDropdowns( )
1// Preenche os menus dropdown.
2function populateDropdowns(){
3  // Define as opções dos menus dropdown.
4  $w("Dropdown").options = currencyOptions;
5  // Define a primeira opção do menu dropdown como a opção inicial.
6  $w("Dropdown").selectedIndex = 0;
7}

Aqui selecionamos todos os menus dropdown por tipo. Ao chamar a função $w com o elemento do tipo "Menu Dropdown", selecionamos todos os menus dropdown da página.

calculateCurrency( )
1// Calcula a quantia de destino.
2function calculateCurrency() {
3  // Quantia inicial 
4  let initialAmount = $w("#sourceAmount").value;
5  // Moeda de origem
6  let sourceSymbol = $w("#sourceCurrency").value;
7  // Moeda de destino
8  let targetSymbol = $w("#targetCurrency").value;
9  // Define o URL completo.
10  let fullUrl = `${url}?base=${sourceSymbol}&symbols=${targetSymbol}`;
11    
12  // Chama a função API wix-fetch para recuperar o recurso JSON.
13  getJSON(fullUrl)
14  .then(json => {
15    // Define a quantia de destino como a quantia inicial multiplicada 
16   // pela taxa de conversão.
17    $w("#targetAmount").value = initialAmount * json.rates[targetSymbol];
18  }
19)}
Usamos literais para definir o URL completo, que inclui as moedas de destino e de origem.

A função getJSON da API wix-fetch recupera o recurso JSON usando o URL completo. A função getJSON retorna uma promessa, que é resolvida para um objeto JSON.

Multiplicamos a taxa recebida pela quantia inicial e atribuímos o resultado à caixa de texto targetAmount.

Etapa 5: veja o código em funcionamento

Agora está na hora de testar o site:

  1. Clique em Visualizar na parte superior direita do Editor.
  2. Digite uma quantia no campo de entrada da moeda de origem.
  3. Clique no botão Calcular e veja a quantia convertida na caixa de texto da quantia de destino.
  4. Publique o site online para atualizá-lo e deixá-lo pronto para exibição.

Pronto! Em apenas alguns minutos, você criou uma aplicação Web no Velo! Sem precisar configurar nem gerenciar a infraestrutura de servidores, apenas integrando as APIs do Velo com o construtor visual do Wix.

Próximas etapas

Agora que você conhece o Velo, confira o que mais você pode fazer:

Exemplo de código

Segue o código completo deste exemplo sem comentários:
1import {getJSON} from 'wix-fetch';
2
3const url = "https://api.exchangeratesapi.io/latest";
4
5let currencyOptions = [
6  { "value": "USD",  "label": "US Dollars"},
7  { "value": "EUR",  "label": "Euros"},
8  { "value": "JPY",  "label": "Japanese Yen"},
9];
10
11$w.onReady(function () {
12  populateDropdowns();
13 
14  $w('#calculateButton').onClick((event) => {
15    calculateCurrency();
16  })
17});
18
19function populateDropdowns(){
20  $w('Dropdown').options = currencyOptions;
21  $w('Dropdown').selectedIndex = 0;
22}
23
24function calculateCurrency() {
25  let initialAmount = $w("#sourceAmount").value;
26  let sourceSymbol = $w("#sourceCurrency").value;
27  let targetSymbol = $w("#targetCurrency").value;
28  let fullUrl = `${url}?base=${sourceSymbol}&symbols=${targetSymbol}`;
29
30  getJSON(fullUrl)
31  .then(json => {
32    $w("#targetAmount").value = initialAmount * json.rates[targetSymbol];
33  }
34)}

Esse artigo foi útil?

|
Neste artigo
  • Etapa 1: crie um novo site Wix
  • Etapa 2: ative o Velo
  • Etapa 3: adicione elementos à página
  • Etapa 4: adicione código
  • Etapa 5: veja o código em funcionamento
  • Próximas etapas
  • Exemplo de código

Contrate um profissional

Encontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Encontre um Parceiro