wix app tutorial

Tutorial: cree su primera aplicación WIX en su máquina

En este tutorial, repasamos cómo crear una aplicación WIX que interactúe con la plataforma WIX que puede enviar al mercado de aplicaciones WIX, donde los propietarios de sitios WIX pueden implementarla en sus sitios.

1. Configure su aplicación en una cuenta de desarrolladores de WIX

A. Inicie sesión (o regístrese) a los desarrolladores de WIX.

B. Haga clic en

Deberías obtener esta pantalla:

C. Vaya al espacio de trabajo> OAuth y copie App ID y App Secret Key . Los necesitarás más tarde.

2. Configure la aplicación para recibir conexiones HTTPS entrantes

Dado que la mayoría de los desarrolladores no están abiertas para la conexión entrante y no tienen certificados HTTPS, describiremos el proceso utilizando NGROK . (Si está alojando su aplicación en un servidor sin estas restricciones, puede omitir este paso).

Instalar y ejecutar ngrok

Nota: Inicie un túnel HTTP en el puerto en el que está escuchando su aplicación (predeterminado es 3000), debe obtener algo como esto:

No cierre el proceso NGROK : lo necesitará en ejecución para todo el proceso.

3. Configure las URL de su aplicación

A. Vaya al espacio de trabajo> Oauth B. En Redirect URL Ingrese: https://<12345678>.ngrok.io/login C. En App URL Ingrese: https://<12345678>.ngrok.io/signup
Recuerde reemplazar '12345678' con ** su cadena ngrok que obtuvo arriba. Por ejemplo:

D. Haga clic en Guardar.

4. Registre su solicitud para recibir su primer webhook

A. Vaya a Workspace> Webhooks y agregue un nuevo webhook.

B. Seleccione la categoría WIX_Developers y el evento APP_Provisioned_Webhook.

C. Configure la URL de devolución de llamada webhook en https: // <12345678> .ngrok.io/webhook-callback.

Recuerde reemplazar '12345678' con ** su cadena ngrok que obtuvo arriba.

D. Haga clic en Guardar. Ahora debería ver su clave pública en la parte inferior de la pantalla. Copie su Public key . Lo necesitarás más tarde.

5. Crea y ejecuta tu aplicación

A. Descargar e instalar NPM

B. Clon la aplicación de muestra WIX a su máquina

C. en el archivo config.js (en la carpeta src ) :

• Busque y reemplace el APP_ID con el valor que copió de los desarrolladores de WIX:
• Busque y reemplace el public_key con el valor que copió de los desarrolladores de WIX:

D. En el archivo credencials.js (en la carpeta src ) busque y reemplace el APP_SECRET con el valor que copió de los desarrolladores de WIX:

E. Ejecute su aplicación

• Navegar a la aplicación de muestra clonada
• Ejecutar npm install
• Ejecutar npm build
• Ejecutar npm start

Deberías obtener algo como esto:

¡Bien hecho! Ahora es el momento de asegurarse de que su aplicación funcione como se esperaba.

6. Pruebe su aplicación

A. Haga clic Test Your App

B. Seleccione un sitio y haga clic en Test Your App

C. Cuando se le solicite, haga clic en Add To Site :

D. Proporcione consentimiento para que la aplicación recopile datos haciendo clic en Allow and Install :

E. Debe obtener una impresión en el navegador con su ID de aplicación y su ID de instancia de sitio:

¡Felicidades, ya!

Ahora puede agregar la lógica de su aplicación y otras API WIX.