wix app tutorial

Tutorial: Crie seu primeiro aplicativo WIX em sua máquina

Neste tutorial, analisamos como criar um aplicativo WIX que interaja com a plataforma WIX que você poderá enviar ao mercado de aplicativos Wix, onde os proprietários do site WIX podem implantá -lo em seus sites.

1. Configure seu aplicativo em uma conta Wix Developers

A. Faça login (ou inscreva -se) para os desenvolvedores do WIX.

B. Clique em

Você deve obter esta tela:

C. Vá para o espaço de trabalho> OAuth e copie seu App ID e App Secret Key . Você precisará deles mais tarde.

2. Configure o aplicativo para receber conexões HTTPS de entrada

Como a maioria da máquina de desenvolvedores não está aberta para conexão de entrada e não possui certificados HTTPS, descreveremos o processo usando o NGROK . (Se você estiver hospedando seu aplicativo em um servidor sem essas restrições, poderá pular esta etapa.)

Instale e execute o NGrok

Nota: Inicie um túnel HTTP na porta em que seu aplicativo está ouvindo (o padrão é 3000) Você deve obter algo assim:

Não feche o processo NGROK - você precisará dele em execução para todo o processo.

3. Configure os URLs de seu aplicativo

A. Vá para Workspace> OAuth B. Em Redirect URL Digite: https://<12345678>.ngrok.io/login C. no App URL Enter: https://<12345678>.ngrok.io/signup
Lembre -se de substituir '12345678' por ** sua string ngrok que você tem acima. por exemplo:

D. Clique em Salvar.

4. Registre seu aplicativo para receber seu primeiro webhook

A. Vá para Workspace> Webhooks e adicione um novo webhook.

B. Selecione a categoria WIX_Developers e o evento app_provisioned_webhook.

C. Configure o URL de retorno de chamada webhook para https: // <12345678> .ngrok.io/webhook-callback.

Lembre -se de substituir '12345678' por ** sua string ngrok que você tem acima.

D. Clique em Salvar. Agora você deve ver sua chave pública na parte inferior da tela. Copie sua Public key . Você precisará disso mais tarde.

5. Crie e execute seu aplicativo

A. Download e instale o NPM

B. Clone o aplicativo de amostra WIX para sua máquina

C. no arquivo config.js (na pasta src ) :

• Encontre e substitua o app_id pelo valor que você copiou dos desenvolvedores do WIX:
• Encontre e substitua o Public_key pelo valor que você copiou dos desenvolvedores do WIX:

D. No src credenciais.

E. Execute seu aplicativo

• Navegue até o aplicativo de amostra clonada
• Execute npm install
• Execute npm build
• Execute npm start

Você deve conseguir algo assim:

Bom trabalho! Agora é hora de garantir que seu aplicativo funcione conforme o esperado.

6. Teste seu aplicativo

A. Clique em Test Your App

B. Selecione um site e clique em Test Your App

C. Quando solicitado, clique em Add To Site :

D. Forneça consentimento para o aplicativo coletar dados clicando em Allow and Install :

E. Você deve levar uma impressão no navegador com o ID do aplicativo e o ID da instância do site:

Parabéns, você terminou!

Agora você pode adicionar sua lógica de aplicativo e outras APIs WIX.