Это не будет исчерпывающим руководством, так как многие из них уже существуют, для которых я приведу ссылки ниже. Вместо этого это скорее начальный обзор архитектуры и объяснение того, как выглядит полная производственная реализация магазина электронной коммерции на Jamstack.

Эта статья основана на моем опыте создания полностью автоматизированного фотомагазина по адресу https://www.tabitraveler.com.

Гэтсби и CMS

Базовая технология, используемая для этого веб-сайта, — GatsbyJs, поэтому с нее мы и начнем. Вы можете ознакомиться с моей предыдущей статьей для получения более подробной информации о gatsby и генераторах статических сайтов (SSG). Поскольку это построено на SSG, имеет смысл создавать страницы элементов только с использованием уценки. У меня, по сути, просто метаданные о заголовке, изображении, а затем массив объектов с подробной информацией о продукте, такой как SKU (идентификаторы продукта) и цена. Поскольку мне не особо нужна полная сложная CMS, которая, кажется, все в моде и довольно сбивает с толку, когда вы оглядываетесь на JAMstack, вместо этого я выбираю недооцененную CMS netlify. Это похоже на большинство других CMS в том смысле, что он предоставляет отличный пользовательский интерфейс для взаимодействия с вашей смоделированной уценкой и JSON, но, в отличие от других вариантов, файлы хранятся в Github. Немного об этом позже.

Полоса

Итак, теперь у нас есть сгенерированная страница товара, но как пользователь покупает продукт. Нужна ли нам страница оформления заказа и сложный бэкенд? Нет, полоска в помощь. Stripe Checkout — это фантастическая платежная форма, использующая безопасный простой API-интерфейс Stripe, а также предварительно созданный размещенный пользовательский интерфейс, предоставляющий пользователям чистый, простой и безопасный способ оплаты.

Stripe работает по модели ценообразования с оплатой по мере использования, поэтому за каждую транзакцию взимается процентная комиссия. Это делает его идеальным для запуска небольшой идеи, поскольку ежемесячная плата не взимается. Также из того, что я могу сказать, процент относительно небольшой и очень конкурентоспособный. Это зависит от вашего местоположения, а также от местоположения вашего клиента, но, похоже, колеблется от 1,4% до 3% с комиссией 20 пенсов за транзакцию. А если вы студент, ситуация становится еще лучше: со студенческим пакетом github вы получаете 0 комиссий за транзакцию на свои первые 1000 долларов обработанного дохода. В дополнение к оформлению заказа вы получаете доступ к простой в использовании панели инструментов Stripe, которая дает вам аналитику и контроль над вашим бизнесом. Отсюда вы также можете получить доступ к настройкам разработчика и получить тестовые ключи для использования во время разработки, что является ключевой функцией для сквозного тестирования вашей системы.

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

Сетевые функции

Хотя Stripe checkout позиционируется как хостинг Stripe (это неправда), это относится только к пользовательскому интерфейсу формы и всей фактической обработке платежей, как и ожидается от Stripe. К сожалению, нам по-прежнему нужен бэкэнд, чтобы обеспечить правильный расчет цен для создания сеанса оформления заказа. Итак, где мы размещаем серверную часть? Очевидно, что существует множество (посмотрите, что я там сделал) облачных платформ, и если вы достаточно сумасшедший, вы даже можете настроить свой собственный сервер. Тем не менее, вы, вероятно, уже используете netlify (если нет, то вам, вероятно, следует). Так что функции Netlify — отличный, практически бесплатный вариант. Пока у вас меньше 125 000 запросов в месяц, вы можете использовать их бесплатно, а затем они автоматически масштабируются. Функции Netlify на самом деле представляют собой просто приятную обертку для бессерверных вычислений AWS lambda, но они обеспечивают ключевые функции и преимущества для этого варианта использования.

Все, что нужно для начала работы с функциями, — это папка с именем «функции», затем файл js, экспортирующий функцию, а netlify позаботится обо всем остальном. Эти функции выбираются автоматически, а из кода конечные точки генерируются после имени файла, позволяя пользовательскому интерфейсу или другим бэкэндам вызывать их для запуска вашего кода, и все это из одной маленькой папки в том же репо, что и ваш веб-сайт. Для меня это означает функцию под названием «покупка», основной целью которой является создание сеанса проверки с полосой для пользователя. Однако должно произойти еще немного. Поскольку мы не можем доверять данным, поступающим от клиента, мы можем только принять выбор пользователя, такой как предмет, который он хочет, и его местоположение. Это означает, что нам нужно пересчитать цену и доставку на стороне клиента, чтобы ни один нахальный человек не смог купить вещи за 0,01 фунта стерлингов. Так что нам как-то нужен доступ к исходному документу с указанием установленных цен, в данном случае уценки. Поскольку я использую netlify cms, этот файл находится в Github, и к нему можно получить доступ через прекрасный API GitHub, а затем проанализировать информацию о ценах для расчета. Кроме того, служба печати, которую я использую для своих продуктов, имеет API для заказа, который я могу использовать для полной автоматизации процесса продажи, от нажатия пользователем кнопки покупки до доставки продукта без моей ручной обработки чего-либо. И поэтому я также создаю черновик заказа в функции и скрываю его идентификатор в метаданных сеанса оформления заказа.

На этом все можно закончить, если вы согласны выполнять заказы вручную. При создании сеанса вы можете просто указать URL-адрес успеха, чтобы сообщить пользователю, что все прошло успешно, и поблагодарить его. Однако, если вы хотите вызвать больше кода после завершения покупки, это тоже возможно. С чередованием вы можете использовать веб-перехватчики для вызова дополнительной конечной точки при запуске события, такого как checkout.session.completed. Для меня это означает еще одну функцию netlify под названием «handlePurchase» в папке functions. На этот раз он получает данные завершенного объекта сеанса и снова вызывает API печати, чтобы заполнить все детали заказа, заполненные в форме оформления заказа. Затем заказ отправляется, и все идет хорошо, и клиент получает свою печать через несколько дней.

Безопасность и надежность

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

Еще один бесценный инструмент (не спонсор) — часовой. Sentry — это программное обеспечение для отслеживания ошибок, которое может отправить вам электронное письмо в тот момент, когда в вашей системе возникают какие-либо ошибки, а также предоставить важные данные для отладки, такие как трассировка стека, а также действия клиента и метаданные, такие как версия браузера и т. д. Все это выполняется с помощью простого обертка библиотеки npm, поэтому при возникновении ошибки он пингует часового, чтобы сообщить об этом. У меня это настроено как в моем внешнем интерфейсе, так и в обеих внутренних функциях. Реализация, к которой я пришел для узла, не очень величественна, так как мне пришлось обернуть всю функцию в большой try-catch, однако, поскольку он маленький, это не проблема и выполняет свою функцию. Гораздо элегантнее, поскольку он просто инициируется на корневом уровне. На базовом уровне разработчика эта услуга бесплатна и имеет очень разумные квоты.

Деловая сторона

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

Я обнаружил, что доставка является одной из самых сложных частей реализации, поскольку я отправляю по всему миру, а API печати, к сожалению, не справляется с этим за меня. Хотя моя окончательная реализация все еще довольно сложна для больших продуктов в рамке, я нашел лучший вариант для небольших предметов — бесплатную доставку. Это может означать незначительное повышение цены, но упрощает большинство заказов и может помочь превратить потенциальных клиентов в покупателей.

Хотя вы, безусловно, можете создать быстрый сайт, интегрироваться с API для службы прямой доставки и даже никогда не увидеть продукт, который вы продаете, я бы настоятельно не советовал этого делать. Если вы продаете продукт, вы должны, по крайней мере, быть достаточно уверены в процессе и качестве, чтобы сделать это самостоятельно. Что касается меня, я просмотрел несколько типов бумаги и отпечатков, прежде чем решил выставить что-либо на продажу. затем, когда я был готов, я купил полную распечатку, чтобы провести собственный контроль качества, повесить на стену, а также сделать настоящие фотографии продукта, а не просто отфотошопленные версии для сайта.

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

Вывод

JAMstack продолжает удивлять меня тем, насколько полезным и универсальным может быть стек даже для приложений электронной коммерции. Если я что-то пропустил или у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной. Было очень весело создавать такой магазин, и я доволен архитектурой, которую я получил.

Полезные ссылки

Если вы хотите увидеть больше моих статей и быть в курсе, пожалуйста, посетите мой веб-сайт и подпишитесь на мой список рассылки, спасибо



Росс Нейлсон | Веб-разработчик
Привет! Я внештатный веб-разработчик, специализирующийся на высококачественных сложных веб-решениях для малого и среднего международного бизнеса…www.rossneilson.dev