Comece a programar com o Velo

Olá, bem-vindo ao curso do Velo para iniciantes.

Sou Joshua, evangelista de software do Velo, e vou mostrar o básico do Velo by Wix.

O Velo by Wix é uma plataforma que funciona diretamente no Wix e lhe permite adicionar mais funcionalidades personalizada e interatividade ao seu site usando JavaScript.

Este curso é destinado a desenvolvedores e não desenvolvedores, mas será bem mais fácil se você já tiver experiência em JavaScript.

Vamos começar ativando o modo avançado.

É assim que ativamos o Velo.

Podemos adicionar nosso próprio código JavaScript, como mencionei, e funciona em conjunto com o Wix, para que você possa usar todas as mesmas ferramentas Wix, além de adicionar código.

Vamos ativar o modo avançado aqui.

Você verá que nosso ambiente começa a mudar.

Temos nosso painel de código na parte inferior, e aqui no lado direito, temos o painel de propriedades, no qual podemos controlar todas as diferentes identificações dos elementos na página que podemos arrastar e soltar.

Como você sabe, com o Wix, é possível arrastar e soltar elementos.

O que você vê é o que vai estar no Editor.

À medida que eu clico em diferentes elementos na página, aqui nesse painel de propriedades, vou ver todos os IDs diferentes do que estou clicando.

Veja aqui no lado esquerdo, no lado direito, temos “button11”, temos “text37”.

E vamos entrar em mais detalhes sobre como identificar esses elementos na página com mais facilidade.

Em nosso painel de código, também temos outros recursos integrados, como preenchimento automático, e até mesmo um linter que nos permite ver todos os erros no código.

Vamos para a página Velo for Beginners, e eu vou mostrar como é o preenchimento automático.

Vamos excluir um pouco desse código aqui.

E vamos escrever um código de importação.

Assim, podemos importar algumas das APIs que já incorporamos ao Velo.

Como você pode ver, o preenchimento automático já me mostra algumas das outras APIs disponíveis antes mesmo de terminar a palavra.

Podemos selecionar a API que quisermos e escolheremos o “wixData”, e pronto.

Isso significa que eu nem precisei terminar a frase.

Na verdade, o código está pronto para ser usado.

Vamos para o menu lateral do Velo aqui ao lado.

Ele nos leva a todas as páginas principais, para “Código da página”.

É aqui onde poderemos controlar nosso código de front-end.

Temos “Início”, “Velo for Beginners”, ”Hello Velo”, algumas páginas diferentes do nosso site.

Mas, veja que, dentro do painel de código, ele começa a mudar.

Isso nos ajuda a organizar nosso código e saber em qual página estamos no momento.

Também temos a seção “Global” aqui na parte inferior.

Isso também mostra nosso “masterpage.js”.

Esse é o código que nos permite trabalhar com todo o nosso site, e não só em uma página específica.

Um bom exemplo é um cabeçalho fixo que queremos que nos siga quando rolamos de cima para baixo na página.

Ainda no lado esquerdo, temos a opção “Público e Back-end”.

Essa seção nos permite trabalhar com nosso código de back-end.

Veja que, quando eu clico em outros arquivos de código aqui ao lado, ele abre mais algumas abas ao lado do nosso código de front-end, apenas para nos ajudar a organizar um pouco mais.

Também temos um curso sobre back-end, o qual foca muito mais no “Público e Back-end”, então eu recomendo que você veja esse curso também.

Em seguida, temos um modo de buscar o código.

Como você vê aqui, eu já tenho algo escrito.

Basta descobrir em qual página posso encontrar o “wixData” que está sendo usado.

Eu uso isso às vezes, quando esqueço onde parei ou onde encontrar um código que criei, ou talvez o nome de uma função que não sei em qual página está.

É ótimo para os sites complexos que estou criando.

Aqui em cima, temos “Pacotes de código”, nosso “gerenciador de dados”, e é aqui que podemos armazenar todos os dados que queremos em nossos sites sem ter que ir a nenhum lugar externo.

Tê-lo internamente ajuda a aumentar a velocidade de nossos desenvolvedores e ajuda você a saber onde exatamente estão seus dados.

Há muitas outras ferramentas para você usar, como nossos conjuntos de dados, para que você possa conectar diferentes elementos da página ao banco de dados sem precisar escrever nenhum código.

As “Ferramentas do Desenvolvedor” estão um pouco além do escopo deste curso, mas vou falar um pouco sobre isso agora.

Temos um “Gerenciador de Versões” que permite que você libere diferentes porcentagens do seu site para os visitantes que o acessam.

Então, se eu quero que 50% dos meus usuários vejam algum tipo de alteração, posso gerenciar isso com o “Gerenciador de Versões”.

O “Gerenciador de Segredos” é outro espaço para armazenar todas as chaves de API ocultas e deixá-las ocultas ao público.

Também temos “Logs” e “Monitoramento”, para que você possa monitorar seu site e verificar se há diferentes erros que estão acontecendo.

A próxima opção que temos no menu lateral Velo é a “Ajuda Velo”.

A “Ajuda Velo” contém todos os recursos necessários para interagir com nossa comunidade e aprender sobre o Velo.

Temos nosso fórum, que lhe permite interagir com a comunidade e conversar.

E também temos a “Guia de API”.

A “Guia de API” é ótima e detalha todas as diferentes APIs que incorporamos ao Velo o front-end e back-end.

Existem até APIs que ajudam você a se conectar a serviços externos de terceiros, como nossa API “http-functions”.

A documentação apresenta ainda mais detalhes e fornece exemplos de como usar o Velo com todos os diferentes tipos de cenários.

Nesta aula, mostramos como usar o ambiente e, na próxima, vamos mostrar como codificar com o Velo e adicionar um mais de interatividade ao seu site.