게츠비, 스니프카트, 플로티크와 전자상거래 사이트를 구축하다

시세가 어려워 많은 기업들이 판매를 인터넷으로 옮기려고 시도하고 있다.따라서 이번에는 스니프카트, 프로티크, 게츠비와 전자상거래를 구축하는 것을 깊이 있게 연구할 것이다.
새로운 Flotiq 계정부터 콘텐츠 형식 정의를 구축하여Gatsbystarter와 연결하고 마지막에 Heroku를 사용하여 실시간 배치할 것입니다.
다음과 같은 혜택을 받으실 수 있습니다.

간단하고 아름다우며 기능이 완비된 전자상거래 사이트로 당신의 제품을 가지고 인터넷에서 실시간으로 운행합니다.

필요한 사항:

Flotiq계좌(무료),

Snipcart 계정(무료 테스트), 등록here

노드.js 및 NPM 설치

This repository

Heroku 계정(무료), 접속하고 싶으면.

시작합시다!

Flotiq 계정 준비

이 특정한 프로젝트에 대해 우리는 Flotiq를 사용하여 제품에 대한 정보, 이름, 가격 등을 저장할 것이다.
몇 가지 간단한 절차가 있는데, 완성 시간은 1분을 초과해서는 안 된다.

계정 등록, 30초

가장 먼저 필요한 것은 무료 Flotiq 계정register a free account in Flotiq이다.지불할 필요 없이 신용카드 없이 Github 계정이나 이메일로 연결하면 됩니다.

컨텐츠 유형 정의 작성, 30초

가장 관건적인 단계는 플로티q가 시스템에 어떤 데이터를 저장하고 싶은지 알려줘야 한다는 것이다.내용 유형과 그 속성의 이름은 무엇입니까?
네가 처음 로그인했을 때, 그것은 매우 비어 있을 것이다.내용이 없어요. 아무것도 없어요.Type definitions 화면으로 이동합니다.

여기서 간단한 템플릿 내용 유형 목록을 찾을 수 있습니다. 만약 시간이 촉박하다면, 이것은 좋은 시작입니다.Product를 클릭한 다음Save을 클릭합니다.당신은 어떤 변화도 하지 않고 이 프로젝트를 시작하고 실행할 수 있습니다!

컨텐츠 만들기, 2분

이 프로젝트가 역할을 발휘하기 위해서 너는 반드시 몇 개의 제품을 만들어야 한다.왼쪽 사이드바에서 클릭 Content→ Products 단추를 누릅니다.

제품 세부 정보를 입력합니다.

당신은 당신의 사진을 올리거나 우리가 경외할 만한 Unsplash 통합 - 미디어 라이브러리에 있는 Add new Product object 옵션 카드로 직접 들어가 수천 개의 아름다운 사진을 조회할 수 있습니다.

마지막으로 Stock photos 을 클릭합니다.
상기 절차를 반복하여 당신이 원하는 제품을 선택하세요.

Hint: If you'd like to programmatically import hundreds or thousands of products, instead of typing them by hand - you can use Flotiq's batch endpoints in your API. Read more about batch content creation in Flotiq.

당신의 개츠비 계획을 시작합니다. 2분.

이 점을 매우 간단하게 하기 위해 우리는 플로티q와 통합하여 제품의 데이터 원본으로 삼는Gatsbystarter를 준비했다.이 항목을 설정하고 의존 항목을 설치하고 웹 사이트를 즉시 시작할 것입니다.

클론 재구매

클론 저장소 시작:

git clone https://github.com/flotiq/gatsby-starter-products

Flotiq 구성

그런 다음 저장소의 루트 폴더에 Save button 라는 파일을 만듭니다.이 파일은 Flotiq 및 Snipcart 구성을 저장합니다..env 파일에 다음을 넣습니다.

GATSBY_FLOTIQ_BASE_URL="https://api.flotiq.com"
FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"

인터페이스의 사용자 프로필 섹션에서 Flotiq API 키를 찾을 수 있습니다.

Caution: We strongly recommend that you create a scoped API key (read more about API access), but for development, you can use the default Read Only key provided in the interface.

그것이 효과가 있는지 확인하세요!

이렇게 간단해.가셔도 될 것 같습니다.NPM 종속성 설치 및 개츠비 프로젝트 시작:

npm install
gatsby develop

당신은 지금 .env에서 당신의 가게를 볼 수 있을 것입니다.

온라인 판매 시작

네, 이렇게 간단해요.
너는 거의 판매를 시작할 준비가 되어 있다.마지막 부분은 Snipcart를 올바르게 구성하는 것입니다.

Snipcart 구성

Snipcart로 이동하여 계정에서 공용 API 키를 검색합니다.

이 키를 http://localhost:8000 파일에 넣으면 다음과 같이 됩니다.

GATSBY_FLOTIQ_BASE_URL="https://api.flotiq.com"
FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"
SNIPCART_API_KEY="YOUR SNIPCART KEY"

.env로 개츠비를 다시 시작합니다.
다음은 장바구니에 물건을 넣으면 볼 수 있는 내용입니다.

체크 아웃 단계를 완료하면 최종 화면이 표시됩니다.

하지만 로컬 시스템에서 주문하려고 하면 다음과 같은 결과가 발생합니다.

따라서 만약 당신이 통합을 완전히 테스트하고 싶다면, 이 사이트를 온라인에 올릴 때가 되었습니다!

Heroku 생방송 사이트 사용, 2분

그것을 매우 간단하게 하기 위해서, 우리는 당신의 프로젝트를 즉시 인터넷에 발표할 수 있는 단추를 준비했습니다.
버튼을 누르세요!

일단 Heroku에 로그인하면 (무료 계정을 사용할 수 있습니다) 프로젝트에 도메인을 선택해야 합니다.우리는 gatsby develop를 사용했다.

입력 필드에서 파일의 세부 정보 복사 snipcart-flotiq
그리고 클릭.env.1, 2분만 더 지나면 너의 응용 프로그램이 출시될 것이다.

!!! 암시
만약 당신이 자신의 도메인 이름으로 이 프로젝트를 진행하고 싶다면, Cloudflare와 this hack가 제공하는 멋지고 무료 서비스를 사용하여 무료 Heroku 계정에 사용자 정의 도메인을 추가할 수 있습니다.통상적으로, 헤로쿠에서는 대가를 치러야 하지만, 헤헤, 시간은 어렵다.

Snipcart에서 도메인 이름 제공

배포가 완료될 때까지 Snipcart 프로필 페이지로 이동하여 도메인 이름을 구성합니다.

검증 결과

결과당신은 이미 주문에 성공했습니다!

너는 곧 Snipcart에서 그것을 볼 수 있을 것이다.

결론

Flotiq, Snipcart,Gatsby가 제공하는 도구와 템플릿 덕분에 코드가 필요 없는 전자상거래 플랫폼을 구축하고 배치하는 데 성공했습니다.전자상거래를 시작하기 전에 고려해야 할 중요한 일이 많지만 기술적으로 필요한 원가와 정력을 최소화하는 좋은 방법이다.
여전히. - 어떻게 일하는 건지 알려줘!

This article was originally published as a Flotiq Deep Dive Start selling online with Snipcart, Flotiq, Gatsby and Heroku