marketplace demo

마켓플레이스 스타터 키트

이 Stelace 스타터 키트는 MIT 라이센스 조건에 따라 무료로 사용할 수 있습니다. 자유롭게 포크하거나 기여하거나 직접 만들어 보세요 ❤️.

---

이 스타터 키트는 오픈 소스 Stelace API 서버를 기반으로 사전 구성된 서버리스 배포를 통해 고성능 AirBnB와 유사한 마켓플레이스 프런트 엔드(Vue.js)를 제공합니다.

내용물

• 특징 ?
  • 기본적으로 빠르나요?
  • 통합
• 테스트
• 스택
• 시작하기
• 전개

라이브 데모

검색, 자동화, 실시간에 초점을 맞춘 플랫폼 템플릿도 제공됩니다.

스텔레이스는 무엇인가요?

Stelace API는 검색 중심 마켓플레이스부터 온라인 커뮤니티 앱에 이르기까지 웹 플랫폼을 위한 고급 검색, 자산 및 사용자 관리, 자동화 및 콘텐츠 전달 API를 제공합니다. Stelace 오픈 소스 마켓플레이스 백엔드를 사용하면 플랫폼을 독특하게 만드는 요소에 집중할 수 있습니다.

API 문서

---

특징 ?

• 자산 관리. 자산은 아파트, 주택, 자동차, 콘서트 등 무엇이든 될 수 있습니다.
• 관련성 과 동적 가용성을 기반으로 하는 강력하고 오타 허용 검색?
• 소셜 로그인 및 SSO를 포함한 사용자 인증
• 사용자 관리 및 평가
• 실시간 이벤트 및 메시징
• Stelace 작업 흐름을 이용한 자동화 ?
• 서버리스 기능을 사용한 맞춤형 결제 프로세스
• 헤드리스 CMS? Stelace 콘텐츠 API 사용
• 이미지 및 사용자 파일을 위한 글로벌 CDN
• i18n ? 그리고 전체 번역
• 접근성
• …
• Stelace API를 통해 훨씬 더 많은 기능 제공

기본적으로 빠르나요?

즉시 90개 이상의 PageSpeed ​​점수를 받으세요.

• Vue.js가 전체 SPA에 수분을 공급하여 가장 빠른 페이지 로드를 위해 사전 렌더링된 정적 페이지입니다.
• quasar.conf.js 의 최적화된 Webpack 구성을 사용한 코드 분할.
• WebP를 사용한 이미지 압축 및 AWS Lambda를 사용한 서버리스 크기 조정
• 리소스 미리 가져오기 및 미리 로드
• Quasar 덕분에 PWA 지원

이 키트는 PRPL 패턴을 따릅니다. 자세한 내용은 문서에 나와 있습니다.

통합

이러한 통합을 활용하여 플랫폼 실행을 더욱 빠르게 시작하세요.

• Netlify를 통한 자동화되고 지속적인 배포
• Netlify 기능 및 Stelace 워크플로를 사용한 스트라이프 결제
• 프로덕션 환경 디버깅을 위한 Sentry
• OpenStreetMap 제공자를 통한 지도 및 장소 검색
• 구글애널리틱스

테스트

• TestCafé를 사용한 엔드투엔드 크로스 브라우저 테스트
• CircleCI와의 지속적인 통합

스택

서버리스 JAMStack 아키텍처:

• Vue.js
• 퀘이사 프레임워크
• 백엔드로 Stelace API
• Stelace 헤드리스 CMS
• Stelace.js SDK
• 정적 사이트 및 람다 기능 배포를 위한 Netlify

도구화에는 Node.js >= 10.18이 사용됩니다.

시작하기

시작하려면 Stelace API 키가 필요합니다. 좋은 소식: Stelace는 오픈 소스이므로 자체 서버를 배포할 수 있습니다.

1. 이 저장소 복제

git clone https://github.com/stelace/marketplace-demo.git
cd marketplace-demo

2. node_modules 설치

 # using yarn instead of npm is recommended
yarn

Yarn이 설치되어 있지 않으면 다음 지침을 따르세요.

3. 개발 및 프로덕션을 위한 환경 파일을 만듭니다.

.env.example 복사하여 Stelace API 키로 채울 수 있습니다(서버 측 오픈 소스 프로젝트로 생성).

cp .env.example .env.development
# You may want to use live keys in this file
cp .env.example .env.production

다음 환경 변수를 채워야 합니다.

• STELACE_INSTANT_WEBSITE_URL
• Vue 앱에서 사용되는 STELACE_PUBLISHABLE_API_KEY ( pubk_ ...)
• 데이터 시드 스크립트에 사용되는 STELACE_SECRET_API_KEY ( seck_ ...)
• 기본 api.stelace.com 이 아닌 자체 서버를 사용하지 않는 한 STELACE_API_URL 비워 둘 수 있습니다.

지도, 결제 게이트웨이, 로깅 및 분석을 포함한 환경 변수에 대한 자세한 내용은 .env.example 을 참조하세요.

4. 종자 개발 데이터

yarn seed

5. 개발 서버 시작

quasar dev
# or, if you want to run Netlify functions with stripe payments as well:
yarn dev

프런트 엔드 구성 및 구성 요소에 대한 자세한 내용은 Quasar 문서를 참조하세요.

자체 호스팅 Stelace API 서버(오픈 소스 백엔드)를 사용하여 개발합니다.

이 프로젝트의 서버를 시작하기 전에 Stelace Core API 서버를 로컬에서 시작해야 합니다.

먼저 Stelace Core API에 필요한 서비스를 시작해야 합니다.

yarn docker:db

그런 다음 Instant 구성으로 데이터베이스를 초기화해야 합니다.

 cd /path/to/stelace-core
git checkout dev
yarn setup:instant

이 프로젝트의 환경 변수로 사용할 수 있도록 비밀 및 게시 가능한 API 키가 표시됩니다. 또한 STELACE_API_URL (http://127.0.0.1:API_PORT)과 같은 일부 환경 변수를 설정해야 합니다.

서버를 시작해보자.

yarn dev

stelace-server 프로젝트의 .env.example 을 참고하세요.

6. 브랜딩

styles.json.md에 문서화된 src/styles.json 에서 고유한 색상과 브랜딩으로 앱을 사용자 정의하세요.

전개

자세한 내용은 배포 문서 섹션을 참조하세요.