Путеводитель по электронной коммерции JAMSTACK в Южной Африке.
Несколько недель назад я заинтересовался электронной коммерцией и решил создать интернет-магазин. Первоначально я планировал создать магазин с использованием «классической» архитектуры, которая включает в себя создание базы данных, серверной части API и веб-интерфейса, но после небольшого исследования я узнал, что JAMSTACK — это новая блестящая игрушка, которую все крутые дети используют в эти дни, так что это то, с чем я пошел.
Сложность с JAMSTACK в Южной Африке (ЮАР) заключается в том, что многие из платежных шлюзов, перечисленных в обучающих материалах и статьях в Интернете, не обрабатывают платежи за пределами Европы. Это ставит перед разработчиком SA сложную задачу объединения платежных шлюзов, которые принимают платежи в SA, с другими API, которые делают возможным создание интернет-магазина JAMSTACK. Это руководство написано с целью помочь вам пройти эту часть и предоставить общую архитектуру, которой вы можете следовать при создании интернет-магазина с использованием JAMSTACK в SA.
Что такое ДЖЕМСТАК?
Слово JAMSTACK означает стек API-интерфейсов Javascript и разметки. Это архитектура, разработанная для того, чтобы сделать Интернет быстрее, безопаснее и проще в масштабировании. Идея состоит в том, чтобы использовать инструменты сборки для преобразования разметки в статически отображаемые ресурсы внешнего интерфейса веб-сайта, которые могут быть доставлены с использованием сети доставки контента (CDN). Затем сайты дополняются возможностями управления данными с использованием Javascript и API. Это делает их быстрыми, безопасными и масштабируемыми. Подробнее о JAMSTACK можно прочитать здесь. JAMSTACK позволяет разработчикам создавать полнофункциональный магазин электронной коммерции без необходимости настраивать базу данных или сервер. Не нужно беспокоиться о безопасности и управлении пользователями и масштабировании сайта при увеличении нагрузки. Просто создайте интерфейс, а все остальное за вас сделают широкодоступные веб-API. Добро пожаловать в будущее!
Как использовать JAMSTACK для электронной коммерции?
Чтобы создать сайт электронной коммерции, вам нужно как минимум несколько вещей.
- Способ хранения и извлечения вашего каталога и инвентаря (API).
- Способ обработки платежей (API).
- Веб-сайт, на котором люди могут покупать предметы из вашего инвентаря (разметка и Javascript).
- CDN для размещения вашего сайта (API).
Кроме того, вы, вероятно, захотите использовать некоторые инструменты, чтобы сделать процесс разработки более приятным. Некоторые инструменты, которые вы, возможно, захотите рассмотреть, включают:
- Git и Github для контроля версий вашего сайта.
- Генератор статических сайтов, чтобы вам не приходилось писать весь HTML и CSS вручную.
- Интерфейс командной строки (CLI), который позволяет запускать сервер разработки, обслуживающий ваш статический веб-сайт локально.
Общая архитектура заключается в том, что у вас будет источник данных, в котором размещены все динамические данные, обеспечивающие работу вашего магазина. Затем вы будете использовать API для доступа к этим данным, а затем сгенерируете статические активы внешнего интерфейса магазина во время сборки. Затем статически отображаемый сайт развертывается в CDN, где пользователи могут получить к нему доступ через браузер. Затем сайт может в дальнейшем использовать API для получения дополнительных данных и/или предоставления дополнительных функций, таких как обработка платежей.
Выбор бойцов JAMSTACK в ЮАР
Сила JAMSTACK исходит из множества API и инструментов, которые вы можете использовать для создания веб-сайта. Я экспериментировал со многими различными API и платежными шлюзами, чтобы создать свой магазин электронной коммерции, и, наконец, остановился на приведенном ниже стеке.
Каталог и инвентарь
Для управления каталогом и инвентарем я использовал javascript-библиотеку Commerce JS. Эта библиотека предоставляет мощный сервер безголовой коммерции, а также API-интерфейсы, которые позволяют вам управлять своим инвентарем, создавать систему корзины, собирать заказы и отправлять уведомления по электронной почте. Он также поставляется с интуитивно понятным пользовательским интерфейсом панели инструментов, где вы можете увидеть визуальное представление запасов, заказов, а также некоторую статистику. Commerce JS также позволяет вам настраивать хуки для программного перестроения и повторного развертывания вашего магазина на основе определенных событий, таких как изменение цен, изменения в каталоге, добавление промокодов и т. д. Это действительно универсальная библиотека для управления вашим интернет-магазином. .
Единственный недостаток, который Commerce JS имеет для пользователей и разработчиков SA, заключается в том, что он не поставляется с предварительно настроенным платежным шлюзом, который может обрабатывать платежи в SA. К счастью, они предоставляют вариант оплаты вручную. Это позволяет вам создать заказ в Commerce JS, обработать платеж с использованием выбранного вами способа оплаты, а затем пометить заказ как выполненный в Commerce JS с помощью API.
Платежный шлюз
Существует ряд шлюзов онлайн-платежей, которые вы можете использовать в ЮАР. В список входят такие шлюзы, как payfast, paygate и ozow, но я остановился на yoco. Меня больше всего впечатлила программа yoco из-за ее отличной документации, благодаря которой интегрировать ее на ваш веб-сайт несложно. Все, что вам нужно сделать, это включить скрипт, вставить немного Javascript и поместить кнопку в форму. Процесс действительно не может быть проще! Как только форма добавлена на вашу страницу, вы можете настроить ее так, чтобы она выглядела и работала так, как вы хотите, с помощью CSS и Javascript. Еще одним большим преимуществом yoco является то, что процесс оплаты полностью основан на API. Это означает, что нет необходимости перенаправлять страницы, что очень важно, поскольку позволяет пользователю пройти весь процесс оплаты, не покидая ваш сайт. Огромный плюс для пользовательского опыта!
Инструменты сборки
Я использовал генератор статических сайтов, а также Git и Github для контроля версий. В наши дни существует столько же генераторов статических сайтов, сколько звезд на небе. С их исчерпывающим списком вы можете ознакомиться здесь. Я остановился на Eleventy. Я выбрал его, потому что он прост в использовании и позволяет мне использовать мой любимый язык шаблонов Pug для написания разметки вместе с препроцессором CSS SASS для написания моей таблицы стилей. Еще один инструмент сборки, о котором стоит упомянуть, — это Netlify CLI, который позволил мне легко протестировать и развернуть веб-сайт.
Развертывание
CDN, с которым я работал, называется Netlify. Я выбрал Netlify из-за его обширной и простой в использовании документации и множества полезных функций. Функция, которую я нашел наиболее полезной, — это бесшовная интеграция с Github, которая позволяет мне запускать сборку/развертывание, просто отправляя последний код в мой репозиторий Github. Это действительно не легче, чем это! Netlify также поставляется с функцией бессерверной функции, которая необходима, поскольку мне нужно было хранить секретные ключи и вызывать API-интерфейсы с сервера для обработки платежей и сбора заказов. Netlify также позволяет вам настроить URL-адрес сборки, который вы можете вызывать для программного запуска повторного развертывания. Это становится важным в статически отображаемом магазине, поскольку каталог и инвентарь постоянно меняются.
Вывод
JAMSTACK больше не является какой-то мечтой разработчиков SA в далеком будущем. Он здесь и готов к использованию! Никогда не было более мощного, дешевого и надежного способа быстрой разработки и развертывания интернет-магазинов. Я надеюсь, что эта статья развеяла путаницу, которая иногда возникает в связи с тем, какие технологии вы можете использовать, чтобы воспользоваться преимуществами этой архитектуры, если вы являетесь разработчиком в Южной Африке и хотите запустить свой следующий интернет-магазин с помощью JAMSTACK. Посмотрите демо-версию интернет-магазина, которую я создал с помощью JAMSTACK, здесь.
—
Какой у вас стек технологий JAMSTACK для создания интернет-магазинов в ЮАР? Дайте знать в комментариях😋
