Как создать свое первое приложение Shopify

1656568819 kak sozdat svoe pervoe prilozhenie shopify

Игорь Петров

1*5rTl2RMivof-SHDDYPsN6A

Зачем создавать приложение Shopify?

Я всегда был в восторге от того, как развивается рынок электронной коммерции, и делал разные попытки погрузиться в этот мир. Приблизительно пять лет назад мы с партнером создали веб-сайт электронной коммерции, который продавал и доставлял цветы, мягкую игрушку и открытку, упакованную вместе в подарок. Это была попытка проверки идеи, и мы не восприняли ее всерьез. Так скоро кончилось.

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

Но за это время мы разработали множество веб-сайтов электронной коммерции для клиентов нашего агентства. Большинство из этих веб-сайтов создано с помощью Ruby on Rails и конкретно Шпрее. И это направление было успешным — мы узнали много нового о разработке веб-сайтов электронной коммерции и типовых проблемах разработки (а также проблем маркетинга, доставки и различных бизнес-проблем).

В этом году я работаю с новым партнером, у которого был хороший опыт работы Shopify платформа. Мы много общались и пришли к идее разработать a Shopify приложение. Эта платформа быстро растет и на рынке существует большой спрос на расширение возможностей платформы.

Создание продукта, а не разработка по заказу для кого-то, также было увлекательным для меня. Эти две вещи — электронная коммерция и разработка продуктов — естественно объединились в идею a Shopify приложение.

Понимание сложности создания приложений

Итак, вы придумали идею своей программы. Теперь вам нужно решить, будет ли ваше приложение взаимодействовать с витринами продавцов, расширяя шаблоны или вводя некоторые сценарии. Или, возможно, вам нужно работать с некоторым сторонним API и интегрировать его в свое приложение или расширить a Shopify админ.

Каждая часть может быть достаточно сложной. Итак, если вам просто нужно что-то сделать из Shopify сохранять данные и выводить что-либо в разделе администратора, вы имеете дело с 1 типом или 1 точкой сложности. Если вам нужно работать с внешними API и все еще есть какой-то раздел в Администраторе, у вас есть 2 точки сложности. И так дальше.

Начните разработку с шаблона

Что ж, мы видим, что наша программа достаточно сложная (хотя для клиентов она выглядит легкой). Поскольку мы договорились об идее программы и инициале MVPя начал исследовать и нашел это Shopify имеет отличный shopify_app Рубиновый драгоценный камень.

Это достаточно крутой материал, который экономит вам много времени: он создает для вас Shopify фреймворк программы без необходимости настройки OAuth протекать вручную. Другие вещи, на которые следует обратить внимание:

  • Сгенерированная модель магазина
  • Простая регистрация вебхуков и тегов сценариев
  • Подходы к аутентификации
  • Проверка прокси-сервера приложения (для настройки витрины магазина)

Я запустил пустое приложение через минуты, а не через часы.

Далее я исследовал, как подойти к интерфейсу администратора в вашем приложении. я это узнал Shopify упрощает эту задачу для вас благодаря мощности их рамки дизайна Shopify Polaris.

Polaris это React.js библиотека компонентов, и это рекомендуемый способ расширения Shopify Админ раздел. Ваше приложение будет выглядеть как родной Shopify приложение с разделами администратора, например «Продукты» или «Заказ» (Shopify Наверное, тоже использует его.

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

Расширение Shopify Admin

После успешной установки Shopify Polaris в проект с помощью Webpacker или пряжа, вы сможете продолжить Shopify Админ раздел.

Для страницы приветствия (такую, которую продавцы увидят после установки программы без настроенных данных), выполните следующие действия.

get ‘/welcome’ => ‘home#index’
  • Создать Рельсы контроллер:
class HomeController < BaseAuthenticatedController def index endend
  • Добавьте шаблон просмотра, который просто воспроизводит Отреагировать компонент с помощью react-rails драгоценный камень:
# home/index.html.erb<%= react_component("Welcome", {  apiKey: ShopifyApp.configuration.api_key,  shopOrigin: " @shop_session&.url }",  debug: Rails.env.development?,  forceRedirect: !Rails.env.development? && !Rails.env.test?}) %>
  • Создать Отреагировать компонент, который предоставляет некоторые Shopify Polaris компоненты (например EmptyStateнапример).

Первый шаг вполне понятен всем, кто когда-либо работал Ruby on Rails. Второй шаг также должен быть, за исключением того факта, что вам нужно унаследовать свои контролеры администратора ShopifyApp::AuthenticatedController поэтому каждый запрос будет авторизован. Я создал подкласс для всех будущих классов контролеров администратора.

1*2BYWJpAZHNIzSgtICBCQFA

Третий шаг касается визуализации. Я установил react-rails драгоценный камень, который поставляется с великолепным react_component ассистента, и я добавил визуализацию витального компонента, передавая все нужные характеристики. Для встроенных программ (расширенных Shopify Админ) нужно хотя бы пройти apiKey и shopOrigin возможности использования встроенных компонентов Shopify Polaris. Эти встроенные компоненты просто Отреагировать обертки вокруг Shopify Встроенный пакет SDK для приложений.

И, наконец, я написал а Welcome компонент и поместили его в app/javascript/components папка согласно config/webpacker.yml.

1*HL9JrMwbbqMo_i81DxJmMw

Заметьте, что я вытащил некоторый шаблон, например определение shopOrigin и apiKey свойства, в BasePage компонент, который будет являться родительским компонентом для каждой страницы программы. InfluencifyApp является компонентом, воспроизводящим Polaris AppProvider компонент, Pageвнутри него и любые дети из {this.props.children} внутри Page.

С помощью этой настройки я создал другие компоненты InfluencifyApp как корневой компонент для каждой страницы программы.

Настройка витрины магазина

Есть хороший вариант Shopify что позволяет настроить витрины продавца: метки сценария. Это файлы JavaScript, которые будут введены в шаблон витрины.

Вы можете легко зарегистрировать их с помощью shopify_app драгоценный камень. Вот как я зарегистрировал сценарий для программы Influenceify (по адресу config/initializers/shopify_app.rb):

# to include asset_url helperinclude ActionView::Helpers::AssetUrlHelper...config.scripttags = [    {event: 'onload', src: -> (domain) { asset_url('influencify.js', host: ENV['APP_DOMAIN']) } }]

Обратите внимание, что ваши сценарии должны быть общедоступны для всех продавцов в любом из ваших развертываний. Я имею в виду, что с точки зрения Rails, вы не должны иметь дайджест в названии файла вашего сценария, например influencify-dd432js....js но вместо этого поместите скомпилированную версию в a public папку или загрузите в CDN.

Второй вариант состоит в том, что вы можете иметь целые страницы или части страниц, обслуживаемых вашим приложением. То есть, если вам нужно что-то отобразить или получить некоторые данные из введенного сценария, вы можете зарегистрировать, какие URL-адреса для продавцов будет обслуживать ваше приложение. Эта функция известна как прокси сервер программы. Опять же, реализовать это в вашем приложении гораздо легче с помощью shopify_app драгоценный камень – просто придерживайтесь их пособий.

Тестирование

Тестирование а Shopify приложение может быть немного сложным, но он знаком каждому, кто когда-либо работал с посторонними API и тестировал с помощью таких инструментов, как localtunnel или ngrok. Поэтому каждый раз, когда вы собираетесь тестировать свою программу, просто запускайте свой любимый инструмент туннелирования и обновляйте поле «URL-адреса перенаправления в белом списке» на странице настроек программы с помощью URL-адреса обратного вызова аутентификации, которая выглядит так: https://myapp.localtunnel.me/auth/shopify/callback.

Чтобы проверить конечные точки прокси-серверов приложений на настройку витрины магазина, вам также нужно обновить эту настройку URL-адреса в разделе «Расширение».

Конечно, для тестирования программы вам также нужен магазин тестовой разработки.

Развертывание

В развертывании нет ничего особенного, поскольку это обычное явление Ruby on Rails приложение. Я развернул свою программу на Героку платформа с Puma и Сидекик процессов, указанных через Procfile

Кроме того, вам нужно установить переменные среды, которые вы собираетесь использовать в своей программе ENV['SOMETHING'].

Еще одна вещь, на которую стоит обратить внимание: я добавил a Node.js buildpack, поскольку возникли проблемы со сборкой из-за Webpack:

git:(master) heroku buildpacks     === influencify Buildpack URLs1.  https://github.com/heroku/heroku-buildpack-nodejs

Идя дальше

Ну, как видите, создание программы так, как это рекомендовано Shopify включает много разных шагов, и это может оказаться сложной задачей для неопытного разработчика.

Конечно, создание программы – это только верхушка айсберга. Следующие шаги Shopify Предприятие по разработке приложений создает хорошие промо-материалы, посылает их в App Store, маркетинг и службу поддержки/разработки клиентов после его одобрения.

Если вам понравился этот пост, нажмите, пожалуйста чтобы распространить информацию.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *