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

Один из вопросов, который мы часто получаем, когда разговариваем с разработчиками или руководителями инженеров о том, чем мы занимаемся, заключается в том, что именно представляет собой приложение Shopify и какие инструменты и технологии необходимы для его создания? Другой часто задаваемый вопрос: это проблема, если у меня нет опыта создания приложений Shopify?

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

Как приложение Shopify сравнивается с веб-приложением

Наша точка зрения на эту тему заключается в том, что приложение Shopify работает почти так же, как стандартное веб-приложение, но тесно связано с платформой Shopify через API. Это имеет несколько последствий:

• Для создания приложения Shopify вы можете использовать те же технологии, что и для веб-приложений. Вы не ограничены какой-то конкретной технологией (хотя использование какой-то конкретной технологии может облегчить вашу жизнь — мы вернемся к этому позже).
• Обычно вам нужно построить как бэкенд, так и внешний интерфейс.
• Вы несете ответственность за хостинг и работу приложения.
• Как только приложение будет одобрено Shopify, процесс выпуска также полностью находится под вашим контролем.

‍

С точки зрения продавца мы можем сказать, что Shopify — это программное обеспечение как услуга (SaaS), а также приложения Shopify. Это означает, что продавцу не нужно взаимодействовать с каким-либо кодом для установки вашего приложения.

Компоненты приложения Shopify

Мы выделяем три логических компонента, которые обычно имеет приложение Shopify:

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

Из этих трех последний не обязательно требуется. Это зависит от функциональности, которую вы хотите предоставить продавцам. Например, наше приложение Candy Rack состоит из всех трех компонентов, а Loyal — только из первых двух.

Администратор продавца

Администратор продавца — это панель инструментов, на которой продавец устанавливает и настраивает приложение. Shopify рекомендует обслуживать администратора продавца в интерфейсе Shopify (так называемое встроенное приложение). Это означает, что вы встраиваете приложение в администрацию Shopify с помощью iframe.

Встроенные приложения имеют несколько ограничений:

• Из-за того, как работает аутентификация, вы более или менее ограничены архитектурой одностраничного приложения (хотя возможны частичные обходные пути с помощью Turbolinks или Inertia.js).
• Может быть эффективно использовать React для написания внешнего интерфейса, поскольку есть библиотеки, предоставляемые Shopify: Библиотека пользовательского интерфейса Polaris гарантирует, что ваш UX совместим с остальной частью администратора Shopify, а App Bridge действует как интерфейсный мост, который предоставляет контекстные данные Shopify вашему приложению. работает в iframe.

Администрация продавца также является первой точкой соприкосновения между вашим приложением и продавцом, и это место, где обрабатывается процесс установки. Установка в основном означает получение разрешений на доступ к данным магазина продавца через OAuth.

Это также часть приложения, где вы имеете дело с выставлением счетов, если ваше приложение платное.

Обработка вебхуков

Веб-хуки — это то, как Shopify информирует ваше приложение о различных событиях, происходящих в магазинах, где он установлен: например, о создании нового заказа или обновлении продукта. Вы сами решаете, на какие события вы собираетесь подписаться.

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

‍

Приложение, ориентированное на клиента (пользовательский интерфейс магазина)

Если ваше приложение расширяет Shopify Storefront (что означает, что оно предоставляет новые функции для клиентов магазина), вам необходимо «вставить» его в витрину магазина. Для этого вам нужно сообщить Shopify через API, чтобы внедрить ваш ресурс JavaScript в передний магазин. Для этого есть два самых популярных метода: Script Tag и App Embed block. Существует также возможность напрямую расширить тему витрины некоторыми визуальными компонентами с помощью блоков приложений (также называемых разделами приложений).

Разработка клиентского приложения может оказаться самой сложной частью всего процесса. Обычно вы расширяете или даже переопределяете поведение фронтального хранилища по умолчанию. При этом вам нужно убедиться, что он работает с разными темами Shopify, с различными настройками магазина и таким образом, чтобы ничего не сломать в непредвиденной ситуации. Кроме того, всегда могут быть другие сторонние приложения, мешающие работе вашего приложения.

Пользовательский интерфейс Front store также является местом, где вы должны обратить внимание на производительность и размер вашего приложения.

Эволюция разработки приложений Shopify

Хотя я уже говорил вам, что создание приложения Shopify — это, по сути, разработка веб-приложений, на самом деле это утверждение верно лишь отчасти. В 2021 году Shopify представила концепцию расширений для оформления заказа. До этого было невозможно расширить функциональность кассы с помощью приложения Shopify. В этом аспекте опыт разработчика отличается от веб-приложения, поскольку он происходит в очень ограниченной среде (например, вы можете использовать только определенный набор предварительно подготовленных компонентов React), а процессы сборки и выпуска обрабатываются Shopify.

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

Стек технологий Digismoothie

‍

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

Вывод

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

Наконец, давайте вернемся к вопросу, заданному в начале. Является ли проблемой для инженера с опытом работы в веб-разработке присоединиться к команде, которая работает над приложениями Shopify? Я бы сказал точно нет. Если инженер хорошо разбирается в концепциях и технологиях, используемых в современной разработке веб-приложений, он может очень быстро приступить к делу. Знание экосистем Shopify и API будет приходить шаг за шагом.