Pickbazar를 사용하여 React 및 GraphQL 기반 전자 상거래 웹 사이트 구축

게시 됨: 2022-10-18

여러 마켓플레이스에서 사용할 수 있는 쇼핑 템플릿이 많이 있습니다. 그러나 올바른 것을 선택하는 것은 매우 어렵습니다. 오늘 우리는 RedQ Inc.에서 개발한 "PickBazar"라는 쇼핑 또는 전자 상거래 템플릿에 대해 이야기할 것입니다. Envato 시장에 게시된 새로운 템플릿입니다.

카트 배너

React는 무엇이며 왜 사용해야 합니까?

React는 사용자 인터페이스를 생성하기 위한 구성 요소 기반 JavaScript 라이브러리이며 Facebook에서 도입했습니다. 이를 통해 상태를 관리하는 캡슐화된 구성 요소를 만든 다음 이를 구성하여 복잡한 UI를 만들 수 있습니다. ReactJS는 최소한의 노력과 코딩이 필요한 아름다운 웹 애플리케이션의 생성을 지원하는 널리 사용되는 UI 라이브러리 중 하나입니다.

GraphQL이란 무엇이며 왜 구현합니까?

GraphQL은 2015년에 공개되기 전에 Facebook에서 내부적으로 2012년에 개발되었습니다. GraphQL은 오픈 소스 데이터 쿼리 및 API용 조작 언어이며 기존 데이터로 쿼리를 수행하기 위한 런타임입니다. GraphQL은 읽기, 쓰기 및 데이터 변경 사항 구독을 지원합니다(실시간 업데이트 – 가장 일반적으로 WebHook을 사용하여 구현됨). 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 Technology로 개발되었습니다.

가게 앞

shop front

  • 다음으로 JS, React Apollo 및 GraphQL을 사용합니다.
  • 모든 구성 요소는 TypeScript로 작성되었습니다.
  • Lerna 구성에서 지원되는 Monorepo.
  • 확장성이 뛰어난 앱 구축을 위한 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 템플릿 기능

최첨단 기술

다음 JS, React Apollo 및 GraphQL은 초고속 전자 상거래 프로젝트를 구축하는 데 사용됩니다.

반응 아폴로

React Apollo를 사용하면 GraphQL 서버에서 데이터를 가져와 복잡하고 반응적인 UI를 구축하는 데 사용할 수 있습니다.

빠른 성능

더 작은 빌드 크기, 더 빠른 개발 컴파일 및 기타 수십 가지 개선 사항에 최적화되었습니다.

내장 구성 요소

컴포넌트는 TypeScript와 Base Web React UI Framework로 작성되었습니다. 구성품은 이해하기 쉽습니다.

배포 준비

개발자 RedQ Inc.는 배포 프로세스를 깔끔하고 간단하게 만들었습니다. Now.sh를 사용하여 템플릿을 배포할 수 있습니다.

엘리트 작가 지원

RedQ Inc.는 적절한 Elite Author 지원과 제품에 대한 더 빠른 응답을 보장할 수 있습니다.

시작하기 및 설치

템플릿을 시작하려면 아래 절차를 따라야 합니다. 먼저 PickBazar로 이동합니다.

예배 규칙서. 그런 다음 특정 부분을 시작하려면 아래 명령을 실행하십시오.

// pickbazar 디렉토리에서 원사

관리자

해당 API 데이터로 관리 대시보드 부분을 시작하려면 아래 명령을 실행하십시오.

// 개발 모드의 경우 아래 명령 yarn dev:admin 실행

// 프로덕션 모드의 경우 아래 명령 yarn build: admin에서 실행

가게

/packages/shop/next.config.js에서 Stripe API 키를 구성합니다. env 섹션에서 STRIPE_PUBLIC_KEY를 스트라이프 공개 키로 설정합니다.

해당 API로 상점 부분을 시작하려면 아래 명령을 실행하십시오.

// 개발 모드의 경우 아래 명령 yarn dev:shop 실행

// 프로덕션 모드의 경우 다음 명령을 실행합니다. yarn build:shop

프로덕션 빌드 관리자를 테스트하거나 로컬 환경에서 쇼핑하려면 아래 명령을 실행하세요.

관리자

// 프로덕션용 관리자 빌드 yarn build: admin

// 로컬 테스트에 필요한 shop API 실행 yarn dev:API-admin

// 프로덕션에서 관리자를 시작합니다. yarn serve:admin

가게

// 생산을 위한 샵 구축 yarn build:shop

// 로컬 테스트에 필요한 shop API 실행 yarn dev:api-shop

// 프로덕션에서 시작하기 yarn serve:shop

폴더 구조 및 사용자 정의

/packages/admin: 이 부분에는 모든 관리 대시보드 관련 코딩 및 기능이 있습니다.

/packages/shop: 상점과 관련된 모든 코딩 및 기능.

/packages/api : 관리자 및 상점 섹션 모두에 대한 API 관련 코드입니다.

admin 관련 API 코드는 admin 폴더에 있습니다.

상점 관련 코드는 상점 폴더에 있습니다.

구성 및 배포

지금.sh

now.sh에서 템플릿을 호스팅하려면 아래 명령을 따르십시오.

API

  • 패키지/API로 이동
  • 이제 아래 명령을 실행하십시오.

지금

관리자

  • API를 배포하면 API 엔드포인트 URL을 얻을 수 있습니다. 해당 URL을 packages/admin/.env에 넣으십시오.

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

  • 패키지/관리자로 이동
  • 이제 아래 명령을 실행하십시오.

지금

가게

  • API를 배포하면 API 엔드포인트 URL을 얻을 수 있습니다. 해당 URL을

    패키지/상점/next.config.js

환경: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

API_URL: '{put_your_api_url_here.}/shop/graphql', },

  • 패키지/샵으로 이동

  • 이제 아래 명령을 실행하십시오.

지금

결론

이제 우리는 이 글의 종점에 이르렀습니다. PickBazar 반응 GraphQL 전자 상거래 쇼핑 템플릿에 대한 아이디어가 있기를 바랍니다. 망설임 없이 이 쇼핑 템플릿을 전자 상거래 상점에 사용할 수 있습니다. 이 기사를 읽어 주셔서 대단히 감사합니다. 이 기사가 정말 마음에 든다면 댓글 섹션에 댓글을 남기거나 좋은 평가를 주세요. 오늘은 여기까지입니다. 아름다운 하루 되세요!

템플릿 구매

더 읽어보기: 2020년 최고의 React Redux 관리자 대시보드 10개