wix app tutorial

Учебное пособие: создайте свое первое приложение Wix на вашей машине

В этом уроке мы рассмотрим, как создать приложение WIX, которое взаимодействует с платформой WIX, которую вы сможете отправить на рынок приложений Wix, где владельцы сайтов Wix могут развернуть его на своих сайтах.

1. Настройте приложение в учетной записи разработчиков WIX

A. Войдите в систему (или зарегистрируйтесь) для разработчиков WIX.

Б. Нажмите

Вы должны получить этот экран:

C. Перейдите в Workspace> OAuth и скопируйте свой App ID и App Secret Key . Они вам понадобятся позже.

2. Настройка приложения для получения входящих HTTPS подключений

Поскольку большинство машин разработчиков не открыты для входящего соединения и не имеют сертификатов HTTPS, мы опишем процесс с использованием NGROK . (Если вы размещаете свое приложение на сервере без этих ограничений, вы можете пропустить этот шаг.)

Установить и запустить Ngrok

Примечание. Запустите HTTP -туннель в порту, которое придает ваше приложение (по умолчанию 3000). Вы должны получить что -то вроде этого:

Не закрывайте процесс NGROK - вам понадобится, он работает для всего процесса.

3. Установите URL -адреса приложения

A. Перейдите в рабочее пространство> Oauth B. В Redirect URL url url: https://<12345678>.ngrok.io/login c. в App URL enter: https://<12345678>.ngrok.io/signup
Не забудьте заменить '12345678' на ** вашу строку ngrok, которую вы получили выше. например:

D. Нажмите Сохранить.

4. Зарегистрируйте свое заявление, чтобы получить первый веб -крюк

A. Перейдите в Workspace> Webhooks и добавьте новый WebHook.

B. Выберите категорию Wix_Developers и событие app_provisioned_webhook.

C. Установите URL обратного вызова Webhook на https: // <12345678> .ngrok.io/webhook-callback.

Не забудьте заменить '12345678' на ** вашу строку ngrok, которую вы получили выше.

D. Нажмите Сохранить. Теперь вы должны увидеть свой открытый ключ в нижней части экрана. Скопируйте свой Public key . Вам понадобится позже.

5. Создайте и запустите приложение

A. Скачать и установить NPM

B. клонировать применение образца Wix к вашей машине

C. В файле config.js (в папке src ) :

• Найдите и замените APP_ID на значение, которое вы скопировали из разработчиков WIX:
• Найдите и замените public_key на значение, которое вы скопировали с разработчиков Wix:

D. В файле creditys.js (в папке src ) Найти и заменить APP_SECRET на значение, которое вы скопировали из разработчиков WIX:

E. Запустите свое приложение

• Просмотрите клонированное применение образца
• Запустите npm install
• Запустите npm build
• Запустите npm start

Вы должны получить что -то вроде этого:

Отличная работа! Теперь пришло время убедиться, что ваше приложение работает, как и ожидалось.

6. Проверьте свое приложение

A. Нажмите на Test Your App

B. Выберите сайт и нажмите Test Your App

C. Когда будет предложено, нажмите Add To Site :

D. Предоставьте согласие на приложение на сбор данных, нажав Allow and Install :

E. Вы должны получить печать в браузер с идентификатором приложения и идентификатором экземпляра сайта:

Поздравляю, все готово!

Теперь вы можете добавить свою логику приложения и другие API WIX.