게이츠비 사례 연구: 온라인 채팅 시장

LiveChat는 상업 정보 플랫폼으로 회사와 그 사이트 방문자 및 기타 통신 채널을 통해 연락하는 고객(가능성)이 의사소통을 할 수 있도록 한다.
플랫폼이 특정 회사의 개인 수요에 적응하도록 우리는 사용자에게 170여 개의 응용 프로그램, 통합과 확장을 제공했다.그들은 시장에서 그것들을 찾을 수 있으며, 우리의 사이트와 응용 프로그램에서 모두 찾을 수 있다.
얼마 전에 우리는 그것을 개츠비에게 이식했다.우리의 전단 개발자 중 한 명인 Jakub Sikora는 JAMStack Wrocław에 가서 이 과정을 토론했다.
이야기는 다음과 같다.

과거는 어땠는지

우선 public Marketplace과in-app Marketplace(LiveChataccount이 과거에 같은 원본 코드를 가지고 있었다는 것을 알아야 한다. 보기에도 마찬가지다.우리 제품의 LiveChat 에이전트 응용 프로그램과 LiveChat 공공 사이트가 끊임없이 발전하고 있지만 외관도 변화하고 있다.어느 정도 코드를 깔끔하게 유지하기 위해서 우리는 더 이상 CSS 공격을 할 수 없다.

우리가 직면한 도전

따라서 다음과 같은 문제가 발생합니다.
1. 어떻게 코드 라이브러리에서 두 버전의 Marketplace에 하나의 구성 요소를 보존합니까?
우리는 버전의 구성 요소를 실현하고 그것을 한 위치에 보존하기를 바란다.이 두 버전은 모두 이 구성 요소를 사용할 수 있다.
2. 각 버전에 대해 어떻게 다른 스타일을 사용합니까?
시장 버전은 디자인에 있어서 다소 다르다.그것들은 서로 다른 글꼴과 색깔을 가지고 있다.
3. 버전에 따라 일부 구성 요소를 표시하고 숨기는 방법은 무엇입니까?
응용 프로그램 내 버전의 Marketplace는 머리글이나 꼬리말이 필요하지 않습니다.LiveChat 프록시 응용 프로그램의 컨텐트를 사용합니다.다른 한편, 공공 시장은 이 두 가지 구성 요소를 필요로 하지만 왼쪽 사이드바는 이미 유행이 지났다.

개츠비가 이 프로젝트에 뭘 가져왔는지

우리는 반드시 제공해야 할 해결 방안을 고려하기 시작했다 Gatsby.사실이 증명하듯이 그들은 서로 다른 시각적 버전을 가진 코드 라이브러리를 유지하기 위해 구축themes의 개념을 가지고 있다.
이 해결 방안은 우리에게 매우 적합하다.우리는 공공 시장에 사용할 기본 테마를 만들고 구성 요소 음영을 사용하여 응용 프로그램의 시장 버전을 만들 수 있다.
어셈블리 섀도우
이것은 게이츠비documentation의 어셈블리 섀도우에 대한 설명입니다.

"이 기능은 사용자가 웹 패키지에 포함된 src 디렉터리의 파일을 자신의 실행으로 대체할 수 있도록 합니다."

실천에서의 의미를 이해하기 위해서, 우리의 코드 라이브러리의 예시를 고려해 보십시오.AppListVertical 구성 요소는 두 가지 버전이 있는데 각각 응용 프로그램과 공공 시장의 응용 프로그램을 열거했다.다음은 공공 시장 구성 요소 버전입니다.packages/marketplace-base/src/components/AppListVertical.js

...

const AppListVertical = ({
  apps,
  className,
}) => {
  return (
    <div className={className}>
      {apps.map(app => (
        ...
      ))}
    </div>
  )
}

export default AppListVertical

아이템 주의className.어셈블리 섀도우를 사용하여 스타일을 덮어쓰는 것이 좋습니다.
다음은 같은 구성 요소가 있지만 응용 프로그램의 버전에 덮어씁니다.in-app/src/marketplace-base/components/AppListVertical.js

...
// Import the base component
import AppListVertical from 'marketplace-base/src/components/AppListVertical'

// Some styles overrides
const updatedAppsWrapperCss = css`
  @media (min-width: 500px) and (max-width: 720px) {
    grid-template-columns: repeat(3, 124px);
  }
  @media (min-width: 720px) and (max-width: 830px) {
    grid-template-columns: repeat(4, 124px);
  }
  @media (min-width: 830px) and (max-width: 959px) {
    grid-template-columns: repeat(5, 124px);
  }
`

export default props => (
  <AppListVertical css={updatedAppsWrapperCss} {...props} />
)

이것은 단지 구성 요소의 그림자를 통해 실현할 수 있는 미리보기일 뿐입니다.당신은 본문 말미의 "추천 참고 자료"부분에서 더 많은 예시를 찾을 수 있습니다.

지금 많이 좋아졌어요.

우리는 간단하다고 믿는다.이러한 방법은 대부분의 구성 요소를 한 위치에 저장하고 두 버전의 Marketplace에서 필요로 하는 구성 요소만 덮어쓸 수 있게 한다.지금까지는 구성 요소를 언급했지만 CSS, 상수 등을 덮어쓸 수도 있습니다. 대부분의 경우 한 가지만 변경하면 됩니다. 이 구성 요소는 두 시장 버전에 적용되기 때문에 복사 붙여넣기가 필요하지 않습니다.
오늘의 시장
이것은 두 버전의 Marketplace의 오늘 모습입니다.

응용 프로그램 내 버전 Marketplace

시장의 공공 버전

개발자 커뮤니티에 가입

개발자로서 당신은 우리의 개발자 계획에 가입하여 시장 생태계의 일부분이 될 수 있습니다.응용 프로그램에 대한 생각이 생기면 Developer Console 등록하고 구축하세요.준비가 다 된 후에 심사를 위해 응용 프로그램을 제출합니다.우리 팀은 이에 대해 평가를 진행할 것입니다. 만약 쌍방이 모두 만족한다면 당신의 응용 프로그램은 우리 시장에서 공개될 것입니다.
너는 응용 프로그램의 화폐화를 결정할 수 있다.만약 당신들이 응용 프로그램이 비용을 지불해야 한다고 생각한다면, 개발자 컨트롤러에서 당신들의 가격 결정 모델을 선택할 수 있습니다.당신의 응용 프로그램도 무료일 수 있습니다. 이것도 괜찮습니다.
문의 사항이 있으면 as[email protected]에 문의하십시오.
권장 리소스
JAMstack presentation
Developer Program
Public Marketplace
How to monetize apps
App Review process