Как создать встраиваемое приложение Shopify с помощью VueJs, Tailwind CSS, NodeJs и Laravel

Создание приложения Shopify с помощью чего-либо вне React или Rails может быть пугающим; вы по большей части предоставлены сами себе. Поскольку я разобрался в этом со своей командой, используя VueJs: мы решили сделать шаблон с открытым исходным кодом.

Шаблон настолько гибкий, что вы можете использовать NodeJs или Laravel PHP в качестве бэкенда. А для тех, кто любит использовать и проповедовать евангелие Tailwind CSS…

Tailwind CSS уже установлен!

В этом посте мы расскажем вам о процессе установки.

Требования:

  • Партнерский аккаунт Shopify и магазин для разработки.
  • Вы установили NodeJs 14.13.1 или выше.
  • Установлен PHP и Composer для бэкенда PHP.
  • Установлен Npm.
  • Вы установили Git и можете использовать bash-терминал Git (важно для windows).

Процесс установки

Шаг 1
Установите пакет шаблона и создайте приложение Shopify Vue.

С помощью терминала установите ShopifyVue как глобальный пакет.

npm i -g shopifyvue
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Затем создайте приложение в терминале (в идеале Git bash на windows) с одним из двух доступных бэкенд-фреймворков.

shopifyvue create "MyShopifyApp" --backend nodejs
or
shopifyvue create "MyShopifyApp" --backend php
Войдите в полноэкранный режим Выйти из полноэкранного режима

Бэкенд NodeJS основан на этом шаблоне, а бэкенд PHP основан на этом шаблоне.

Перейдите в каталог вашего приложения и запустите его:

npm install

У вас должна быть файловая структура, похожая на эту:

Шаг 2
Нам понадобится туннель для соединения локального сервера с Shopify. Я рекомендую использовать Ngrok. Вы также можете использовать туннель Cloudflare или Local tunnel.
С помощью учетной записи Ngrok подключите агент к своей учетной записи, используя токен Auth из панели инструментов в терминале.

ngrok config add-authtoken TOKEN
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Затем запустите свой порт localhost.

Для NodeJS:

ngrok http http://localhost:8081/
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Для PHP:

ngrok http http://localhost:8000/
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Это сгенерирует для вас https URL ngrok.
Запишите URL, вы будете использовать его позже.

Шаг 3
Создайте приложение вручную из панели инструментов партнера.

В разделе App URL вставьте сгенерированный в шаге 2 Ngrok https URL, а в Allowed redirection заполните следующим образом:
Для NodeJS:

<Ngrok https url>/auth
<Ngrok https url>/auth/callback
<Ngrok https url>/auth/online
Войти в полноэкранный режим Выйти из полноэкранного режима

Для PHP:

<Ngrok https url>/authenticate
Войти в полноэкранный режим Выйдите из полноэкранного режима

Шаг 4
Теперь мы собираемся создать env-файл (вы можете отредактировать тот, который прилагается при установке). После создания приложения на панели инструментов партнера SHopify нажмите на него, чтобы получить ключи API. Скопируйте оба ключа API и секретный ключ API в ваш файл .env.


Для NodeJS:

SHOPIFY_API_KEY="api key"           
SHOPIFY_API_SECRET="api secret key" 
SCOPES=write_customers,write_draft_orders
SHOP="my-development-store.myshopify.com"                    
HOST="Ngrok https url"          
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Для PHP:

SHOPIFY_API_KEY=<your api key>
SHOPIFY_API_SECRET=<your secret key>
SHOPIFY_APPBRIDGE_ENABLED=true
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Сохраните файл и запустите ваш dev-сервер.
Для NodeJS

npm run serve:dev
Войдите в полноэкранный режим Выйти из полноэкранного режима

Для PHP

npm run dev
Войдите в полноэкранный режим Выйдите из полноэкранного режима

И запустите ваш PHP dev-сервер в новом терминале.

php artisan serve
Войти в полноэкранный режим Выйдите из полноэкранного режима

Обратите внимание, чтобы ваше PHP-приложение заработало, вам нужно будет настроить базу данных, задания, промежуточные модули и опубликовать конфигурации для пакета Laravel Shopify. Следуйте инструкциям на странице вики здесь.

Шаг 5
Это последний шаг.

Выберите магазин разработки из вашего приложения на панели инструментов партнера для установки вашего приложения. Убедитесь, что это тот же магазин, который вы указали в env-файле, если вы используете бэкенд NodeJS.


При прочих равных условиях у вас должно получиться изображение, похожее на приведенное выше.

Поздравляем! Вы готовы приступить к настройке вашего приложения.

PS: Этот пост предполагает предварительное знание VueJs, выбранного вами языка бэкенда NodeJs или Laravel PHP, Tailwind CSS (хотя его можно удалить через npm, чтобы приспособить желаемый синтаксис CSS) и умение работать с документацией Shopify в зависимости от того, что ваше приложение собирается делать.

Счастливого строительства!

Сообщите мне о своих мыслях в комментариях ниже.

Оцените статью
devanswers.ru
Добавить комментарий