wix app tutorial

Tutoriel: créez votre première application WIX sur votre machine

Dans ce tutoriel, nous examinons comment créer une application WIX qui interagit avec la plate-forme WIX que vous pourrez soumettre au marché des applications WIX, où les propriétaires de sites WIX peuvent le déployer sur leurs sites.

1. Configurez votre application dans un compte de développeurs WIX

A. Connectez-vous (ou inscrivez-vous) aux développeurs WIX.

B. cliquez

Vous devriez obtenir cet écran:

C. Accédez à Workspace> OAuth et copiez votre App ID et App Secret Key . Vous en aurez besoin plus tard.

2. Configurez l'application pour recevoir des connexions HTTPS entrantes

Étant donné que la plupart des machines de développeurs ne sont pas ouvertes pour la connexion entrante et n'ont pas de certificats HTTPS, nous décrirons le processus à l'aide de Ngrok . (Si vous hébergez votre application sur un serveur sans ces restrictions, vous pouvez ignorer cette étape.)

Installer et exécuter ngrok

Remarque: Démarrez un tunnel HTTP sur le port sur lequel votre application écoute (par défaut est 3000) Vous devriez obtenir quelque chose comme ceci:

Ne fermez pas le processus NGROK - vous en aurez besoin en cours d'exécution pour l'ensemble du processus.

3. Configurez vos URL d'application

A. Accédez à Workspace> OAuth B. Dans Redirect URL App URL : https://<12345678>.ngrok.io/login https://<12345678>.ngrok.io/signup
N'oubliez pas de remplacer '12345678' par ** votre chaîne ngrok que vous avez obtenu au-dessus. Par exemple:

D. Cliquez sur Enregistrer.

4. Enregistrez votre demande pour recevoir votre premier webhook

A. Accédez à Workspace> WebHooks et ajoutez un nouveau webhook.

B. Sélectionnez la catégorie WIX_DEVELOPERS et l'événement APP_PROVISEED_WEBHOOK.

C. Configurez l'URL de rappel WebHook sur https: // <12345678> .ngrok.io / webhook-calallback.

N'oubliez pas de remplacer '12345678' par ** votre chaîne ngrok que vous avez obtenu au-dessus.

D. Cliquez sur Enregistrer. Vous devriez maintenant voir votre clé publique en bas de l'écran. Copiez votre Public key . Vous en aurez besoin plus tard.

5. Créez et exécutez votre application

A. Télécharger et installer NPM

B. Clone l'exemple de l'application WIX à votre machine

C. Dans le fichier config.js (dans le dossier src ) :

• Trouvez et remplacez l'APP_ID par la valeur que vous avez copiée auprès des développeurs WIX:
• Trouvez et remplacez le public_key par la valeur que vous avez copiée des développeurs WIX:

D. Dans le fichier des informations d'identification.js (dans le dossier src ), trouvez et remplacez l'APP_SECRET par la valeur que vous avez copiée des développeurs WIX:

E. Exécutez votre application

• Parcourez l'application de l'échantillon cloné
• Exécuter npm install
• Exécuter npm build
• Exécuter npm start

Vous devriez obtenir quelque chose comme ceci:

Bien joué! Il est maintenant temps de vous assurer que votre application fonctionne comme prévu.

6. Testez votre application

A. Cliquez sur Test Your App

B. Sélectionnez un site et cliquez sur Test Your App

C. Lorsque vous êtes invité, cliquez sur Add To Site :

D. fournir un consentement à l'application pour collecter des données en cliquant sur Allow and Install :

E. Vous devriez obtenir une impression dans le navigateur avec votre identifiant d'application et votre ID d'instance de site:

Félicitations, vous avez terminé!

Vous pouvez maintenant ajouter votre logique d'application et d'autres API WIX.