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

TL;DR

Посмотреть демо

Скачать кодовую базу

Знакомство с приложением

Здесь мы создаем приложение для электронной коммерции в Gatsby с помощью серверной части Cosmic JS. Мы сделаем некоторую навигацию на основе веб-сайта электронной коммерции, и в конце размещенный заказ будет сохранен в базе данных Cosmic JS. Cosmic JS предоставляет модуль npm для технологий JavaScript. Кроме того, он предоставляет конечные точки API, с помощью которых вы можете напрямую применять к нему операции CRUD. Здесь мы используем конечные точки API для хранения наших данных.

Требования

  • В вашей системе должен быть установлен Node.js, он необходим для запуска команд npm. Выберите его последнюю версию и установите в своей системе.
  • После node.js установите Gatsby CLI в вашей системе глобально. Вы можете найти его здесь: Gatsby CLI

Приступим!

Мы предполагали, что вы установили указанное выше программное обеспечение и интерфейс командной строки. Теперь выполните следующую команду, чтобы создать новое приложение Gatsby:

gatsby new Gatsby-Ecommerce

После успешного выполнения этой команды можно убедиться, что вы создали новое приложение Gatsby с именем «Gatsby-Ecommerce». Теперь, чтобы начать это, выполните следующую команду из терминала:

npm start

Он запустит ваше приложение и откроет порт: http: // localhost: 8000 /

Конфигурация с помощью Cosmic JS

Cosmic JS - это поставщик услуг два в одном, что означает, что он также предоставляет возможности базы данных и сервера. Итак, вам нужно сначала зарегистрироваться в Cosmic JS и создать новую корзину с любым именем, которое вы хотите. Здесь мы создали корзину с именем Gatsby Ecommerce. Теперь пора создать объектный тип, то есть к управлению данными. Создайте тип объекта с именем заказы. Все заказы будут храниться в этом объекте. Теперь нам нужно выполнить базовую настройку для этой базовой настройки на панели инструментов. Взгляните на скриншот ниже:

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

Теперь откройте свой проект Gatsby в любой среде IDE, здесь я использую Visual Basic Code. Теперь создайте папку с именем config в корне проекта и создайте новый файл с именем config.js внутри папки config и сохраните указанные выше идентификаторы и ключи в следующем формате:

Для вас важно правильно управлять своим проектом, поэтому взгляните на снимок экрана со структурой папок проекта:

Встроенный бакет

Вы также можете использовать встроенное ведро. Для этого вам необходимо импортировать встроенное ведро в свою учетную запись Cosmic JS. Здесь мы предоставляем вам наше ведро. Вам просто нужно выполнить следующие действия:

  1. Зайдите в наш репозиторий Git и скачайте файл bucket.json.
  2. Теперь перейдите в панель управления Cosmic JS и нажмите на основные настройки.
  3. Нажмите «Импорт / экспорт», затем нажмите «Добавить файл импорта» и импортируйте файл bucket.json.

Теперь все готово, мы можем перейти к реализации нашего приложения.

Домашняя страница

Теперь мы собираемся создать наше приложение, и главная страница - это домашняя страница. На этой странице мы покажем товары для покупок. Мы добавим несколько элементов, поскольку это приложение покажет вам только совместимость приложения электронной коммерции Gatsby с Cosmic JS. Расположение домашнего компонента: src/components/home.js

Проверьте код домашнего компонента, мы объясним его.

Этот компонент имеет состояние, а не компонент без состояния, как это обычно бывает с большинством компонентов Gatsby.

В этом компоненте мы показали три продукта, все из которых являются iPhone. Главное то, что изображения этих iPhone хранятся в папке и вызываются через другой компонент. В строке номер 91, 94 и 97 вы можете проверить, как они импортируются домой.

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

addToCart (): это управляемый событиями метод, который помещает продукт в массив, когда пользователь нажимает кнопку добавления в корзину.

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

Компонент для iPhone

Папка iPhone состоит из трех компонентов: iphone8.js, iphonex.js и iphonexs.js. Эти компоненты используются только для добавления изображений к другим компонентам. Мы использовали эти компоненты на домашней странице. Фактически, эти компоненты используют для этой цели , что делает загрузку изображений на веб-сайтах очень быстрой. Проверьте код одного компонента изображения: components/iPhones/iphone8.js

Компонент корзины

Когда пользователь добавляет продукты в корзину и нажимает кнопку S как Корзина, поток приложения переходит на другую страницу cart.js. Давайте проверим код этой страницы: src/pages/cart.js

Давайте объясним каждый метод cart.js:

getProducts (): с помощью этого метода мы получаем продукты, которые хранятся в корзине. Для тележки мы временно храним продукты в локальном хранилище. Это означает, что этот метод получает продукты из локального хранилища.

checkCart (): этот метод проверяет, какой продукт добавлен в корзину, что означает, что этот метод фильтрует продукты и вычисляет цену.

onSubmit (): это управляемый событиями метод, который собирает подробную информацию о заказе вместе с платежными данными пользователя и передает его методу placeOrder () в cosmicService.

Космическое обслуживание

Это единственная служба в этом приложении, которая обращается к Cosmic JS API и сохраняет данные в базе данных Cosmic JS. Проверьте код: src/services/cosmicService.js

В этой службе есть только один метод с именем placeOrder (), который принимает семь аргументов. Он отправляет почтовый запрос на сервер Cosmic JS для сохранения данных. Здесь мы предоставляем ключ доступа на запись для получения разрешения на запись в базе данных Cosmic JS. Это пример хранения информации в Cosmic JS; однако никогда не рекомендуется хранить данные кредитной карты в Cosmic JS.

Какие функции мы реализовали?

На данный момент мы реализовали полную функциональность на сервере разработки. Это означает, что мы можем использовать все функции приложения в режиме разработки. Поскольку это приложение Gatsby, созданное с помощью npm CLI, его можно развернуть на любом сервере, который позволяет развертывание из приложения node.js. Здесь мы развернули наше приложение на сервере Heroku.

Мы создали это приложение с помощью интерфейса командной строки Gatsby и использовали React.js, чтобы сделать некоторые компоненты с отслеживанием состояния. После использования этого приложения вы поймете силу Cosmic JS из-за его невероятной скорости.

Заключение

С помощью Cosmic JS мы можем создавать мощные приложения и можем использовать базу данных Cosmic JS для быстрой обработки данных. Здесь мы без проблем создали и настроили приложение Gatsby.js с Cosmic JS. Вам не нужно прилагать никаких дополнительных усилий для настройки и использования API Cosmic JS.

По любым вопросам или комментариям, связанным с созданием приложений на Cosmic JS, обращайтесь к нам в Twitter и присоединяйтесь к обсуждению на Slack.