frontend sdk
vu
Klevu의 새로운 SDK를 사용하면 AI 제품 발견의 힘을 무엇이든 끌어들일 수 있습니다.
기존 웹 사이트, 단일 페이지 응용 프로그램 (SPA), PWA (Progressive Web App), 모바일 앱, 캠페인 웹 사이트, 매장 내 키오스크, 우주선…
개발자에게 더 간단하고 혁신이 더 빠릅니다.
다음은 다른 프로젝트에 대한 링크입니다.
Klevu SDK는 전자 상거래 상점에 스마트 검색, 카테고리 판매 및 권장 솔루션을 제공합니다. Klevu는 고객에게 최고의 제품 탐색 경험을 쉽게 만들 수 있습니다.
Klevu는 이미 대부분의 사용자에게 적합한 JavaScript 라이브러리를 구현하기 쉬운 간단한 구현 라이브러리를 가지고 있으므로이 라이브러리는 누구에게 적합합니까?
Klevu SDK는 다음과 같은 TypeScript로 작성되었습니다.
이 라이브러리는 React 및 VUE와 같은 모든 주요 프론트 엔드 라이브러리를 지원합니다. 그러나이 SDK는 Klevu 스마트 검색, 카테고리 상품 및 권장 사항을 원하는 방식으로 플러그인하는 기능을 제공합니다. Klevu의 핵심에서 AI를 유도하는 제품 클릭, 검색 및 구매의 이벤트 추적을 포함합니다.
PWA는 사용자에게 기본 앱과 동등한 경험을 제공하도록 설계되었습니다. Klevu SDK를 사용하면 Klevu AI의 힘을 PWA로 가져올 수도 있습니다.
SSR & SSG는 NextJS 및 NUXTJS와 같은 가장 인기있는 프론트 엔드 프레임 워크에서 빠르게 표준 기능이되고 있습니다. Klevu SDK를 사용하면 페이지로드되기 전에 검색 결과, 카테고리 페이지 및 권장 사항을 요청하여 상점의 SEO와 사용자의 경험을 모두 늘릴 수 있습니다.
Klevu SDK는 개발자에게 표시하는 방식을 최대한 활용하고 사용자가 제품 카탈로그와 상호 작용할 수 있도록합니다. 프로젝트에 SDK 라이브러리를 추가하면 브랜드에 완벽하게 맞는 Trully 독특한 사용자 경험을 만드는 데 필요한 모든 빌딩 블록이 있습니다.
우리는이 SDK에 포함 된 React 예제에 많은 기능을 포장했습니다. 다음은 많은 기능과 작업 예제를 찾을 수있는 곳입니다. 예제에 구현 된 내용에 대한 자세한 내용은 다음을 클릭 할 수 있습니다.
| 특징 | 설명 | 예 |
|---|---|---|
| 빠른 검색 | 텍스트 필드에 입력 할 때 검색 결과를 표시하는 데 사용되는 예제. | QuickSearch.tsx |
| 검색 결과 방문 페이지 | 예제 URL에 전달 된 키워드를 기반으로 검색 결과를 표시합니다. | SearchResultPage.tsx |
| 카테고리 내비게이션 | 카테고리/컬렉션의 제품 표시 예. | CategoryPage.tsx |
| 단일 제품 검색 | 검색을 사용하여 단일 제품에 대한 데이터를 쿼리하는 예입니다. | ProductPage.tsx |
| 필터 | 제품 측면을 기반으로 제품을 좁히기위한 필터의 예. | SearchResultPage.tsx CategoryPage.tsx |
| 더 많은 결과를로드하십시오 | 더 많은 제품을 요청하기 위해 더 많은 버튼의 예. | SearchResultPage.tsx |
분석은 Klevu가 사용자에게 최상의 결과를 제공하기 위해 사용하는 머신 러닝을 유도합니다.
| 특징 | 설명 | 예 |
|---|---|---|
| searchEvent | 검색 한 내용을 추적하십시오. | QuickSearch.tsx |
| 제품 검색 클릭 이벤트 | 검색 결과에서 클릭 한 제품을 추적하십시오. | SearchResultPage.tsx |
| 카테고리 내비게이션 제품 클릭 이벤트 | 카테고리 페이지에서 클릭 한 제품을 추적하십시오. | CategoryPage.tsx |
| 구매/구매 이벤트 | 구매 한 제품을 추적하십시오. | CheckoutPage.tsx |
| 특징 | 설명 | 예 |
|---|---|---|
| 클레부 상인 센터 권장 사항 | KMC 내에서 생성 된 권장 사항을 추가하십시오. 1 | HomePage.tsx CategoryPage.tsx ProductPage.tsx |
| 비슷한 제품 | ProductPage.tsx |
| 특징 | 설명 | 예 |
|---|---|---|
| 개인화 | 수정자를 추가하여 Klevufetch 검색에 개인화를 쉽게 추가하십시오. | HomePage.tsx |
| 특징 | 설명 | 예 |
|---|---|---|
| Klevukmcsettings | Klevu Merchant Center 설정을 브라우저의 로컬 스토리지에로드하십시오. | index.tsx |
Node.js 및 NPM은 시작하기 전에 시스템에 설치해야합니다. 개발을 시작하기 전에 한 번 수행해야합니다.
빌드 및 테스트 @klevu/core 실행하려면 먼저 packages/klevu-core 로 이동해야합니다.
시작하기 전에 npm install 로 모든 패키지를 설치해야합니다.
npm run build @klevu/core 의 프로덕션 버전을 만듭니다. 실행할 때마다 깨끗한 빌드를합니다.
실제로 릴리스하려면 CI/CD 스크립트 utils/release-klevu-core.js 가 있습니다. Node.js를 사용하여 실행하십시오.
NPM 실행 빌드 : 시계
build:watch Runs Build in Watch 모드 재건축 애플리케이션이 변경 될 때마다. 깨끗한 빌드를 수행하지는 않지만 점진적으로 빌드되며 릴리스에 필요한 모든 트릭을 수행하지는 않습니다. 코어를 변경 해야하는 @klevu/ui 와 같은 다른 패키지를 개발하면서 라이브러리를 변경하려면 좋습니다.
NPM 실행 QOC
이것은 코드 품질이 충분하다는 것을 확인합니다. Github에 의해 자동으로 실행됩니다.
NPM 실행 테스트
핵심 테스트 스위트를 실행합니다. 건물이 필요하지 않습니다. 모든 것이 완벽하게 작동하는 것을 보려면 가끔씩 테스트를 개발하고 실행하는 것이 가능할 수 있습니다. Github에 의해 자동으로 실행됩니다.
@klevu/ui 빌딩을 시작하려면 먼저 packages/klevu-ui 폴더로 이동하여 npm install 수행해야합니다. 빌드 작업을 올바르게 만들려면 packages/klevu-ui-react 및 packages/klevu-ui-vue 에도 npm install 실행해야합니다.
React 및 VUE 패키지에는 다른 변경 사항이 필요하지 않습니다. 그들의 컨텐츠는 klevu-ui 프로젝트에 의해 자동으로 생성됩니다.
npm run build @klevu/ui 의 분산 버전을 만듭니다. 그러나 적절한 버전을 만들고 세 개의 UI 라이브러리를 모두 릴리스하기 위해 utils/update-klevu-ui.js 에는 CI/CD 노드 스크립트가 있습니다.
구성 요소를 개발하고 테스트하는 가장 쉬운 방법은 스토리 북을 실행하는 것입니다. 이를 위해 UI 프로젝트 빌드를보고 스토리 북을 실행해야합니다.
NPM 실행 빌드 : 시계
그리고 별도의 창에서
NPM 실행 스토리 북
이것은 개발 환경을 열어야합니다.
생성 구성 요소를 만들려면 명령을 사용할 수 있습니다.
NPM 런 생성
깨끗한 코드를 생성하기 위해 ESLint 및 Prettier 확장 장치를 설치하는 것이 좋습니다.
Klevu의 판매자 센터를 사용하면 추가 된 페이지의 컨텍스트를 고려하여 특정 용도에 대한 권장 사항을 작성할 수 있습니다. ↩
