Создание веб-сайта электронной коммерции на основе React и GraphQL с использованием Pickbazar

На нескольких торговых площадках доступно множество шаблонов покупок. Но выбрать подходящий очень сложно. Сегодня мы поговорим о шаблоне для покупок или электронной коммерции под названием «PickBazar», разработанном RedQ Inc. Это новый шаблон, опубликованный на торговой площадке Envato.

Что такое React и почему мы должны его использовать?

React — это основанная на компонентах библиотека JavaScript для создания пользовательских интерфейсов, представленная Facebook. Это позволяет нам создавать инкапсулированные компоненты, которые управляют своим состоянием, а затем объединять их для создания сложных пользовательских интерфейсов. ReactJS — одна из широко используемых библиотек пользовательского интерфейса, которая помогает создавать красивые веб-приложения, требующие минимальных усилий и кодирования.

Что такое GraphQL и почему мы его внедряем?

GraphQL был разработан в 2012 году внутри Facebook, а затем публично выпущен в 2015 году. GraphQL — это язык запросов данных и манипулирования с открытым исходным кодом для API, а также среда выполнения для выполнения запросов с существующими данными. GraphQL поддерживает чтение, запись и подписку на изменения данных (обновления в реальном времени — чаще всего реализуются с помощью WebHooks). Серверы GraphQL доступны для нескольких языков. Это позволяет клиентам определять требуемую структуру данных, и такая же структура данных возвращается с сервера, поэтому предотвращается возврат чрезмерно больших объемов данных.

Кому будет полезен шаблон PickBazar?

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

Области преимуществ

Бакалея

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

Аптека

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

Доставка еды

Доставка еды — это прибыльный бизнес, если вы можете поддерживать его за счет смелого присутствия в Интернете; PickBazar здесь, чтобы помочь вам в этом аспекте. PickBazar имеет отличную систему управления доставкой и отслеживанием заказов. Таким образом, вы можете запустить свой бизнес по доставке еды с нуля с помощью шаблона PickBazar.

Книжный магазин

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

Некоторые функции обобщения

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

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

Создайте свой собственный сайт электронной коммерции с помощью шаблона React PickBazar

Самый быстрый шаблон электронной коммерции, созданный с использованием React, NextJS, TypeScript, GraphQL, Type-GraphQL и Styled-Components. Его легко использовать, и разработчики использовали GraphQL и type-GraphQL, вы можете очень легко построить свою схему. GraphQL Playground создает собственную документацию, и вашей команде разработчиков интерфейса понравится ее использовать. Создать интернет-магазин будет проще, чем когда-либо.

Если вы внедрите этот шаблон, то вы точно сможете увеличить свои продажи. Для бесперебойной работы и обработки большого объема данных о продажах и отслеживания заказов «PickBazar» будет наиболее важным выбором.

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

Зачем использовать шаблон покупок React PickBazar?

Разработано с использованием технологии Bleeding Edge для масштабируемого проекта.

Витрина

• Далее используются JS, React Apollo и GraphQL.
• Все компоненты написаны на TypeScript.
• Монорепозиторий поддерживается конфигурацией Lerna.
• Поддержка SSR для создания масштабируемых приложений.

Панель управления магазином

• Используются Create React App (CRA), React Apollo и GraphQL.
• Компоненты написаны на TypeScript и Base Web React UI Framework.
• Легко создавайте продукты в бэкэнде.
• React Hooks Form для обработки форм.

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

Создайте красивый коммерческий опыт, используя универсальную платформу Next.js, отображаемую на сервере. Он очень прост в использовании, RedQ Inc. использовала GraphQL и type-GraphQL.

Простая интеграция платежей с Stripe!

Stripe — лучшая программная платформа для ведения интернет-бизнеса. Stripe создает самые мощные и гибкие инструменты для интернет-торговли. RedQ Inc. интегрирует Stripe со своим шаблоном PickBazar.

Возможности шаблона React PickBazar

Передовые технологии

Next JS, React Apollo и GraphQL используются для создания сверхбыстрого проекта электронной коммерции.

Реагировать Аполлон

React Apollo позволяет вам получать данные с вашего сервера GraphQL и использовать их для создания сложных и реактивных пользовательских интерфейсов.

Высокая производительность

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

Встроенные компоненты

Компоненты написаны на TypeScript и Base Web React UI Framework. Компоненты понятны.

Готов к развертыванию

Разработчик RedQ Inc. сделал процесс развертывания чистым и простым. Вы можете развернуть шаблон с помощью Now.sh.

Элитная поддержка авторов

RedQ Inc. может гарантировать вам надлежащую поддержку Elite Author и более быстрый ответ на их продукты.

Начало работы и установка

Чтобы начать работу с шаблоном, вы должны следовать приведенной ниже процедуре. Сначала перейдите на PickBazar

каталог. Затем выполните приведенную ниже команду, чтобы начать работу с определенной частью.

// в каталоге pickbazar пряжа

Администратор

Для запуска части панели администратора с соответствующими данными API выполните приведенные ниже команды.

// для режима разработки запустите ниже команду yarn dev:admin

// для производственного режима запустите ниже команду yarn build: admin

Магазин

Настройте ключ Stripe API в файле /packages/shop/next.config.js. В разделе env установите STRIPE_PUBLIC_KEY на свой открытый ключ полосы.

Для запуска части магазина с соответствующим API выполните приведенные ниже команды.

// для режима разработки запустите ниже команду yarn dev:shop

// для производственного режима запустите ниже команду yarn build:shop

Если вы хотите протестировать администратора или магазин производственной сборки в локальной среде, выполните следующие команды.

Администратор

// сборка администратора для производства пряжи build: admin

// запускаем API магазина, который нужен для локального тестирования пряжи dev:API-admin

// запускаем администратора в производственной пряже serve:admin

Магазин

// строим цех по производству пряжи build:shop

// запускаем API магазина, который нужен для локального тестирования пряжи dev:api-shop

// запускаем магазин в производстве пряжи serve:shop

Структура папок и настройка

/packages/admin: в этой части все коды и функции, связанные с панелью администратора.

/packages/shop: Все коды и функции, связанные с магазином.

/packages/api : код, связанный с API, для раздела администратора и магазина.

Коды API, связанные с администратором, находятся в папке администратора.

коды, связанные с магазином, находятся в папке магазина.

Конфигурация и развертывание

сейчас.ш

Если вы хотите разместить шаблон в now.sh, выполните приведенную ниже команду.

API

• Перейдите к пакетам/API
• Теперь запустите команду ниже

в настоящее время

Администратор

• После развертывания API вы получите URL-адрес конечной точки API. Поместите этот URL в пакеты/admin/.env

REACT_APP_API_URL={поместите_ваш_api_url_здесь}/admin/graphql;

• Перейдите к пакетам/admin
• Теперь запустите команду ниже

в настоящее время

Магазин

• После развертывания API вы получите URL-адрес конечной точки API. Поместите этот URL в

  пакеты/магазин/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

API_URL: '{поместите_ваш_api_url_здесь.}/shop/graphql', },

• Перейти к пакетам/магазину

• Теперь запустите команду ниже

в настоящее время

Вывод

Вот мы и подошли к финальной точке этой статьи. Мы надеемся, что у вас есть представление о шаблоне покупок электронной коммерции PickBazar React GraphQL. Без каких-либо колебаний вы можете использовать этот шаблон покупок для своего магазина электронной коммерции. Большое спасибо за чтение этой статьи. Если вам действительно нравится эта статья, пожалуйста, оставьте комментарий в разделе комментариев или поставьте нам хорошую оценку. Это все на сегодня. Хорошо проведите этот день!

Купить шаблон

Подробнее: 10 лучших панелей администратора React Redux 2020