Evlop에는 강력한 노코드 블록 세트가 포함되어 있습니다. 특정 기능이 필요할 때는 직접 커스텀 블록을 추가할 수 있습니다. 기술 수준과 사용 사례에 맞는 방식을 선택하세요: 앱 내부에서 실행되는 React Native 블록 또는 HTML, CSS, JS, Tailwind, Liquid로 만든 HTML 블록을 WebView에 렌더링하는 방식.
1) React Native로 커스텀 블록 만들기
What it is
React Native 블록은 네이티브 앱의 일부이며, 부드러운 UI, 제스처, 애니메이션, 오프라인 동작 및 기기 기능에 최적화되어 있습니다.
What you can use
@evlop/native-component을 사용해 일관된 UI 프리미티브 제공@evlop/shopify를 통해 제품, 컬렉션, 카트, 메타필드, 메타오브젝트, 고객 등 스토어 데이터를 접근- 커스텀 블록 에디터의
package.json에 명시된 모든 npm 패키지를 임포트하여 사용 가능
When to choose this
- 고성능이 필요하거나 복잡한 인터랙션을 구현할 때
- 네이티브 네비게이션 및 기기 API를 활용하고 싶을 때
- 데이터를 캐시하거나 불안정한 네트워크를 처리해야 할 때
Practical tips
- 블록 설정을 간단하고 직렬화 가능하게 유지하세요
- 번들 크기를 관리하기 위해 종속성을 선택적으로 사용하세요
- 홈, 제품, 컬렉션 화면에서 테스트하세요
- 접근성, 로딩 및 빈 상태를 검증하세요
2) HTML로 맞춤 블록 만들기
무엇인지
HTML 블록은 WebView 내부에서 실행됩니다. 빠른 반복을 위해 HTML, CSS, JS, Tailwind, Liquid로 구축하세요.
데이터 및 제한
- Liquid를 사용하여 활성 제품 또는 컬렉션과 같은 Shopify 컨텍스트에 접근하세요
- 고객 정보는 이 컨텍스트에서 사용할 수 없습니다
네비게이션
- Evlop 웹 브리지에서는 일치하는 앱 화면이 있을 경우 일반
<a href>링크를 네이티브 네비게이션으로 업그레이드합니다
언제 선택할지
- 자주 변경되는 마케팅 또는 편집 콘텐츠
- 제품 또는 컬렉션 상세 정보를 표시하는 가벼운 위젯
- Tailwind와 간단한 JavaScript를 선호하는 팀
실용적인 팁
- Tailwind 유틸리티로 모바일 퍼스트 디자인을 하세요
- 스크립트를 가볍게 유지하고 무거운 프레임워크는 피하세요
- 표준 앵커를 사용하여 웹 브리지가 네이티브 라우팅을 할 수 있게 하세요
- 대비, 간격, 로드 시간을 확인하세요
정리
커스텀 블록으로 바퀴를 다시 발명하지 않고도 스토어에 맞게 앱을 맞춤 설정하세요. 성능과 깊은 통합이 필요하면 React Native를, 빠른 제작과 콘텐츠 중심 위젯에는 HTML을 선택하세요.