Programando com o Velo: front-end

Olá, e bem-vindo ao curso de front-end do Velo.

Eu sou o Joshua, evangelista de software, e vou mostrar a você como usar o front-end do Velo by Wix.

Ao longo deste curso, faremos várias coisas, como criar manipuladores de eventos estáticos e dinâmicos, criar um exemplo simples de “OHello, World” e até mesmo utilizar nossas próprias APIs internas do Wix, como armazenamento, janela e, além disso, também vamos aprender a usar algumas de nossas ferramentas, como o site de teste, e registro e monitoramento.

Você poderá combinar todas essas habilidades e, no final, poderá ser um bom desenvolvedor de front-end com no Velo by Wix.

Olá, e bem-vindo a esta aula.

Vamos repassar a visão geral do Editor, principalmente para o front-end.

Antes de começarmos, precisamos ativar o “Modo avançado” para habilitar o Velo.

Vamos até o topo da tela e ativamos o “Modo avançado” O “Modo avançado” nos dá acesso para adicionar nosso próprio código JS, conectar-se às ferramentas internas do Wix e às nossas próprias APIs, que vamos analisar neste curso.

Após ativar o “Modo avançado”, perceba que começamos sem nenhuma configuração.

Já tem um código aqui, e você vai notar que eu há algumas coisas novas na tela, em “Código da Página” e até mesmo no menu lateral Velo.

Vamos começar com “Código da Página”.

As abas são diferentes nele, dependendo da página em que você abrir.

Agora estamos na página de front-end do Velo, e também há outra aba aqui para o “masterpage.js”.

O “masterpage.js” é um arquivo que controla todas as páginas do seu site.

Você pode adicionar código aqui para fazer com que diferentes funções aconteçam em cada página.

Por exemplo, há os cabeçalhos e rodapés, e talvez você tenha uma barra de busca na parte superior do cabeçalho que deseja exibir e operar da mesma maneira em todas as páginas.

É possível fazer isso.

Então, volte à aba de front-end do Velo.

É muito fácil ir e voltar.

Também há “Código da Página”.

Ele tem seu próprio “ES linter”.

É meio parecido com o VS Code.

E também tem preenchimento automático e correção automática.

Se eu for aqui e importar uma nova API, veja que aparece uma lista com preenchimento automático aqui.

Eu posso escolher muitas APIs de “wix-data”, ”wix-crm-backend”, “wix-animations”, “wix-stores”, para trabalhar com essa vertical.

Você escolhe.

Então, se eu digitar “wixLocation”, que é uma API de front-end que vamos examinar neste curso, você verá que está aqui.

Mas também notamos que há alguns erros.

Isso é uma coisa que nosso Editor pode fazer, e nos informa se há alguma duplicata ou algo errado com nosso código.

Vamos aqui e excluir o “wixLocation”, pois já o temos em nosso código.

Podemos até vir aqui, clicar com o botão direito do mouse e formatar o código para melhorá-lo.

À medida que selecionamos diferentes elementos na página ou no Editor, perceba que aparece uma nova peça aqui em “Código da Página”, e esse é o nosso painel de propriedades.

Nosso painel de propriedades nos permite gerenciar todos os diferentes elementos na página à medida que clicamos neles.

Você vai ver aqui, há “welcomeMessage”.

Defini com esse ID.

E eu posso vir aqui e editar o nome de ID quando quiser.

Abaixo, há os valores padrão.

Esses valores padrão são “Oculto” e “Retraído”.

Isso depende apenas do elemento que você selecionou, ok?

Sobre o “Oculto” e “Recolhido”, defina-os como valores padrão para que, quando a página for carregada, ela faça essas ações automaticamente.

Podemos até fazer isso com código também, mas existem valores padrão que você pode selecionar aqui para melhorar as coisas.

Abaixo disso, temos os manipuladores de eventos.

Eles têm todos os diferentes manipuladores de eventos estáticos que podemos adicionar, dependendo do elemento que escolhemos.

E isso também depende do tipo de dados.

Se for um texto ou um botão, serão manipuladores de eventos diferentes para cada tipo de dados.

Vamos falar do menu lateral Velo.

O menu lateral Velo tem muitas opções, mas para o front-end, especificamente, vamos focar em “Código da Página”.

Essa aba tem uma pasta chamada “Páginas principais”, e é aqui que posso acessar todas as páginas diferentes que tenho no meu projeto.

Ao clicar nas diferentes páginas, perceba que a aba muda em “Código da Página”.

Cada página tem sua própria maneira de adicionar código e controlá-lo.

Abaixo disso, também temos uma área aqui para “Membros Wix”, e posso adicionar “Wix Stores” ou mesmo “Bookings” ou “Eventos”.

Isso adicionaria mais páginas de front-end às opções em “Código da página”.

E então, na parte inferior, há as janelas, que examinaremos ao longo deste curso, bem como com “wix-window” e “wix-location”.

Por último mas não menos importante, temos o “masterpage.js”, sobre o qual acabamos de falar.

Essas são todas as ferramentas que você pode criar e preparar para o seu desenvolvimento de front-end.

Você também pode usar as ferramentas Velo aqui ao lado para conferir o “Gerenciador de versões”, “Gerenciador de segredos”, “Monitoramento”, sobre o qual falaremos um pouco mais adiante no curso.

Se precisar de ajuda, clique aqui em “Ajuda Velo” para conferir nosso guia de API.

Você também pode ver as conversas no fórum.

Isso encerra a visão geral do Editor.

Nos vemos na próxima aula, onde veremos um exemplo muito simples de “Hello, World” com o Velo.