Crie facilmente um aplicativo da Web com o código Wix

Creați cu ușurință o aplicație web cu codul Wix
⏱️ 8 min read

Este é um artigo patrocinado e foi possibilitado pelo Wix. O conteúdo e as opiniões reais são da opinião exclusiva do autor, que mantém a independência editorial, mesmo quando uma postagem é patrocinada.

Quando se trata de criar um site, se você for um desenvolvedor, pode usar a abordagem DIY e codificar e hospedar tudo sozinho. Se você é um usuário final / consumidor como a maioria de nós, pode usar um software construtor de sites para criar belos sites com apenas alguns cliques.

Wix pertence a este último, pois é um construtor de sites que permite criar belos sites gratuitos com apenas alguns cliques do mouse. Mas com a introdução de Código Wix, ele confundiu os limites entre fazer você mesmo e usar um construtor de sites. Agora você pode fazer ambos.

Se você estiver construindo um aplicativo da web ou site dinâmico, terá que usar jargões técnicos complicados, como bancos de dados, formulários e javascripts para construir um site interativo. A maioria dos construtores de sites não fornece essas ferramentas, pois isso adiciona toneladas de complicações ao aplicativo.

O Código Wix adiciona essas coisas às suas ferramentas de construção web existentes sem complicações. Oferece diversos templates para você construir e gerenciar seus bancos de dados, formulários e também permite adicionar código javascript ao seu site. O melhor de tudo é que você pode usar o recurso de páginas dinâmicas para preencher rapidamente o conteúdo do banco de dados, tornando-o mais como um Sistema de Gerenciamento de Conteúdo do que um construtor de sites.

No exemplo abaixo, criaremos um blog simples de Facilitar a Tecnologia e adicionar recursos dinâmicos a partir do Código Wix.

Configurando um novo site com Wix

Supondo que você seja novo no Wix, você pode começar por inscrever-se para uma conta no Wix. Depois de criar uma conta, você será solicitado a criar seu site.

Em seguida, ele solicitará que você selecione o tipo de site que deseja criar. Como estou replicando um blog Make Tech Easyier, selecionei a opção “Blog”.

A próxima tela perguntará como você deseja criar seu site.

wix-create-website

O Wix ADI usa inteligência artificial para criar um site automaticamente para você. Se você preferir ir manualmente, selecione o método Editor Wix. (Para acessar o Código Wix, você deve usar o último. Se você escolheu Wix ADI, ainda pode mudar para o modo Editor mais tarde.)

Para este exemplo, usei o Editor Wix, pois queria ter controle total sobre a aparência do site. A partir daí, você pode começar com um modelo. (Há milhares deles.)

wix-editor-template-page

Para mantê-lo simples, comecei com um modelo em branco com um layout clássico. A imagem a seguir é o que parece.

wix-code-mte-layout

Acessando o Código Wix

Para acessar o Código Wix, vá em “Ferramentas” e marque a opção “Ferramentas do desenvolvedor”.

Agora você verá uma nova coluna “Estrutura do site”. É aqui que você pode acessar todos os recursos do Código Wix.

coluna-estrutura-site-wix

Criação de bancos de dados para armazenar mensagens

Um dos grandes recursos do Código Wix é a função Banco de Dados que permite criar bancos de dados (também conhecido como Coleção) e armazenar dados nele. Para um blog, precisaremos criar um banco de dados para armazenar todas as nossas postagens. Na seção Banco de dados, clique em “Adicionar nova coleção”. Dê um nome à sua coleção e especifique sua finalidade. Existem vários tipos de banco de dados que você pode escolher, desde conteúdo gerado pelo usuário, envio de membros, dados privados, etc.

wix-new-collection

Depois que a coleção é criada, você pode começar a adicionar campos e dados a ela.

wix-add-collection-fields

O que criamos é um banco de dados de Postagens contendo o título, conteúdo, data de publicação e vários aspectos de uma postagem de blog. Em seguida, precisamos preencher o conteúdo do banco de dados no site principal.

Páginas Dinâmicas

As páginas dinâmicas são mais como uma página de modelo onde você pode criar um design e conectá-lo ao banco de dados, e preencherá automaticamente todos os itens em seu banco de dados para a página inicial sob seus próprios URLs. Por exemplo, temos seis postagens no banco de dados. Com uma única página dinâmica, podemos fazer com que exiba todas as postagens do site principal. Isso economiza o esforço de criar manualmente uma única página para cada postagem. Existem dois tipos principais de páginas dinâmicas no Código Wix – uma é para exibir um único item, enquanto a outra é para Categoria (uma coleção de itens semelhantes em uma lista).

Veja a seguir como criar páginas dinâmicas e vinculá-las ao site.

1. Na barra de ferramentas flutuante, clique no primeiro ícone e selecione “Páginas dinâmicas”. Clique no botão “Adicionar ao site”.

wix-code-add-dynamic-page

2. Selecione “Página de item” no pop-up.

wix-code-dynamic-item-page

3. Na URL, selecione o campo (no banco de dados) que deseja usar para a URL. Neste caso, defino o “título” como o URL.

wix-code-dynamic-pages-url

4. Em seguida, projete a página e adicione campos do banco de dados. Com cada elemento que você arrasta para a página, você pode clicar no botão “Conectar aos dados” para vinculá-lo ao campo do banco de dados. Por exemplo, arrastei um elemento “Cabeçalho 1” para a página e vinculei-o ao campo “Título” no banco de dados de Postagens.

wix-code-dynamic-page-link-data

E fiz o mesmo para a imagem em destaque, conteúdo da postagem, etc.

wix-code-dynamic-page-design

5. Assim que terminar o design, você pode visualizá-lo e ver como fica no front end.

wix-code-preview

6. A próxima etapa é vincular a página dinâmica da página inicial. Carregue a página inicial e adicione um widget Repetidor da seção “Listas e grades”. Conecte o widget ao banco de dados de Postagens e vincule cada elemento do widget aos campos do banco de dados. Na seção “O link se conecta a”, role para baixo e selecione “Postagens” na seção Páginas dinâmicas.

wix-code-link-dynamic-page

É isso aí.

wix-code-home-page-preview

O que você pode ver é que criamos apenas uma página dinâmica, e ela irá gerar automaticamente todas as páginas para cada item no banco de dados. Você pode fazer a mesma coisa para adicionar uma página dinâmica de categoria também.

Adicionar javascript às páginas

Se você for um codificador javascript experiente, poderá adicionar javascript a cada recurso adicional em cada página. Por exemplo, se você adicionou um formulário de usuário à sua página, pode usar javascript para validar o campo do formulário antes do envio.

Nota: para adicionar o código javascript a uma página, vá para qualquer página (ou a página onde deseja que o código apareça) e clique no botão “Código da página” na parte inferior do código. Uma janela aparecerá, e você pode adicionar seu código lá.

wix-code-page-code

1. Criamos um formulário simples que coletará o nome, o sobrenome e o endereço de e-mail do usuário. Neste formulário, queremos validar o endereço de e-mail e garantir que o campo “Confirmar e-mail” seja igual ao campo “E-mail”.

2. Adicione o seguinte código à seção “Código da página”:

Isso validará o endereço de e-mail e mostrará a mensagem de erro se o e-mail for inválido.

wix-code-javascript-validation

Há muito que você pode fazer com Javascript. Confira o exemplos aqui Para maiores informações.

APIs externas

Esta é a única etapa em que pode ficar mais complicado. O código Wix agora se integra com API externa, para que você possa se conectar facilmente a serviços de terceiros como Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier, etc. Não vou entrar em detalhes aqui, mas se você estiver interessado, você pode verificar o Documentação API.

Conclusão

Se você não for tecnicamente experiente ou um desenvolvedor, construir seu próprio site pode ser uma tarefa tediosa. O Wix fez um bom trabalho em tornar a criação de um site uma brisa. Com o Código Wix, ele vai um pouco mais além e oferece bastante controle sobre o seu site. Agora você tem acesso a ferramentas complicadas de desenvolvedor web e controle completo de como seu site deve funcionar, tudo feito com um simples clique, arraste e solte, sem a necessidade de experiência em codificação.

Parabéns ao Wix por criar uma ferramenta tão fácil de usar que resolverá muitos problemas.

Experimente o Código Wix e diga-nos o que você acha dele.

Código Wix

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Você pode gostar...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x