WordPress 및 WooCommerce를 기반으로 진보적 인 웹 애플리케이션을 구축하고 싶으십니까? 방법은 다음과 같습니다 (코드 예제 포함)

WordPress 및 WooCommerce를 기반으로 진보적 인 웹 애플리케이션을 구축하고 싶으십니까? 방법은 다음과 같습니다 (코드 예제 포함)

WordPress 및 WooCommerce를 기반으로 진보적 인 웹 애플리케이션을 구축하고 싶으십니까? 방법은 다음과 같습니다 (코드 예제 포함)
СОДЕРЖАНИЕ
02 июня 2020

이미 알 수 있듯이이 게시물은 "많은" 하지만 매우 흥미로운 주제를 다루며 웹 사이트 및 / 또는 앱의 모바일 우선 경로를 따라갈 새로운 지점을 제시합니다..


우리가 부르는 것 "반응 형 웹 디자인" 게임에서이 단계에서 대부분의 개발자 / 웹 사이트 / 웹 도구는 이미 그 원칙을 완전히 통합했습니다. 하지만 그 최종 게임은 "모바일 친화적"? 아니면 시작일 뿐이야.

구글은 후자라고 생각한다. 그리고 진보적 인 웹 애플리케이션!

읽으려는 게시물이 Google의 다른 버전입니다. "개발실 내부" 이니셔티브 (이전 프로젝트가 있습니다). 그것은 Alexandra Anghel의 Appticles.com.

Alexandra를 입력하십시오 :

WordPress 및 WooCommerce의 진보적 인 웹 애플리케이션

프로그레시브 웹 앱 이해

PWA (Progressive Web Apps)는 최고의 웹과 최고의 앱을 결합한 경험입니다. 기본 앱 스토어 앱은 다음과 같은 기능을 통해 과거에 크게 인기를 얻었습니다. 푸시 알림, 오프라인 작업, 부드러운 애니메이션 및 전환, 홈 화면에로드 등.

모바일 웹 앱은 브라우저에서 작동하고 일부 기본 앱 기능을 웹에 가져 오려고 시도했지만 푸시 알림을 제공 할 수없는 JavaScript 애플리케이션입니다. 새로운 웹 API가 모바일에 도입되면서 Progressive Web Apps는 이제 격차를 좁혀 모바일 웹에서 완전한 앱과 같은 경험을 제공합니다..

구글 설명 있는 그대로 :

  • 신뢰성 – 즉시로드
  • 빠른 – 사용자 상호 작용에 빠르게 대응
  • 참여 – 기본 앱처럼 동작

이러한 점을 모두 달성하려면 Progressive Web App에 다음 기능이 있어야합니다.

  • 오프라인 또는 열악한 네트워크 조건에서 작업
  • 웹 앱 설치 배너 또는 홈 화면에 추가
  • 웹 푸시 알림을 사용하십시오. Web Push API가 도입되면서 브라우저가 닫혀 있어도 사용자에게 푸시 알림을 보낼 수 있습니다.
  • HTTPS 구현
  • 기본 애플리케이션과 유사하게 사용자 화면에 즉시로드되는 애플리케이션 쉘 (또는 앱 쉘) 아키텍처를 사용하십시오..

본질적으로 PWA는 JavaScript로 작성된 단일 페이지 응용 프로그램입니다. 오프라인 모드, 홈 화면에 추가 및 웹 푸시 알림은 모두 서비스 워커를 사용하여 구현됩니다..

프로그레시브 웹 앱과 반응 형 웹 디자인

프로그레시브 웹 애플리케이션을 반응 형 웹 디자인과 혼동해서는 안됩니다. 프로그레시브 웹 애플리케이션은 다양한 화면 크기에 적응할 수 있기 때문에 반응 형 기능이 있지만 고유 한 가치 제안은 앱과 유사한 기능입니다..

지난 몇 년간 RWD는 모바일 웹 솔루션을위한 솔루션이었습니다. 포레스터 작년의 보고서에 따르면 RWD가 포화 상태에 도달했으며 (디지털 경험 제작자의 87 %가이를 수용 함) 웹에서 웹과 같은 앱과 같은 경험을 선호하기위한 고객 기대의 변화가 눈앞에서 일어나고 있음을 확인했습니다..

PWA가 모바일 웹 사용자 참여를위한 솔루션입니까??

고품질 Progressive Web App을 구축하면 놀라운 이점을 얻을 수있어 사용자를 즐겁게하고 참여를 늘리며 전환을 증가시킬 수 있습니다. 프로그레시브 웹 앱을 사용하여 메트릭을 개선하는 데 성공한 회사, 특히 전자 상거래 업계의 몇 가지 사례가 있으며, 그 중 다수는 Google 개발자 웹 사이트에 표시.

  • 예를 들어 Alibaba.com은 PWA를 구축하여 빠르고 효과적이고 안정적인 모바일 웹 경험을 제공했습니다. 새로운 전략 76 % 증가 브라우저 간 총 전환 수 및 홈 화면에 추가에서 상호 작용 속도가 4 배 높음.
  • 다른 사용 사례에서 OLX는 홈 화면에 추가 및 푸시 알림을 사용하여 모바일 웹 사용자를 다시 참여시키기를 원했습니다. 그들 참여도 250 % 증가 다른 측정 항목도 개선되었습니다. 페이지가 대화식으로 전환 될 때까지 걸리는 시간이 23 % 감소하고 이탈률이 80 % 감소했습니다. 클릭률 (CTR)이 146 % 증가하면서 수익 창출도 개선되었습니다..

모바일 웹 앱이 진보적임을 어떻게 알 수 있습니까??

우선, 점진적으로 진행되는 것은 예 또는 아니요가 아니라 점수이며 Chrome 플러그인이라는 등대 이 점수를 측정하는 데 사용할 수 있습니다. 이 플러그인은 사용하기 쉽고 모든 PWA 기능이 포함 된 보고서를 생성합니다. 기본적으로 웹 앱이 완전히 진보하기 위해 변경해야 할 사항을 알려줍니다. WooCommerce PWA 알파 버전의 경우 Lighthouse에서 91 점을 기록했습니다..

등대

PWA를 구축하는 방법?

Google의 PWA 표준에는 Progressive Web Apps를 만들기위한 특정 기술이나 프레임 워크가 나와 있지 않습니다. 점검표를 따르는 한 아무 것도 될 수 있습니다.. 많은 PWA는 각도 JS 또는 반응, 현재 가장 인기있는 자바 스크립트 프레임 워크 인.

반응하다

AngularJS와 React는 다음과 같은 장점이 있습니다.

  • 앵귤러 / 이오니아 조합은 요즘 꽤 인기가 있습니다. Ionic은 원래 모바일 앱용으로 제작되었지만 프로그레시브 웹 애플리케이션 및 데스크탑 애플리케이션으로 확장 된 훌륭한 프레임 워크입니다..
  • 반응은 정말 직관적이며 이해하기 쉽습니다. 기본적으로 PWA 지원과 함께 제공되는 훌륭한 상용구, create-react-app의 이점이 있습니다..

이 둘 외에, VueJS 또한 인기를 얻고있다.

다음으로 WordPress 및 WooCommerce 위에 React로 구축 된 전자 상거래 애플리케이션의 일부 코드 샘플을 보게됩니다. REST API.

다음 기사에 관심이있을 수도 있습니다.

  • 최고의 Angular Admin 대시 보드 템플릿

WooCommerce REST API 이해

전자 상거래 애플리케이션을 구축 할 때 가장 먼저 필요한 것은 데이터를 검색 할 수있는 API입니다. 다행스럽게도 코어에 REST API를 포함 시키면 WordPress를 백엔드로 사용할 수있는 기회가 열렸습니다. 또한 전자 상거래 앱의 경우 REST API를 인기있는 WooCommerce 플러그인.

WooCommerce에는 NPM 패키지도 있습니다 (WooCommerce API)를 호출하지만 불행히도이 패키지에는 요청을 인증하기 위해 소비자 키와 소비자 비밀이 모두 필요합니다. 프론트 엔드 앱에서 컨슈머 시크릿을 사용하면 보안 문제가 발생합니다.

또한 WooCommerce 관리자 섹션에서 키를 생성 할 때 제품에 대한보기 액세스 및 주문에 대한 쓰기 액세스를 허용하는 것과 같이 경로 수준에서 권한을 지정할 수 없습니다..

따라서 WordPress 플러그인에서 제한된 API 엔드 포인트 세트에 액세스 할 수있는 프록시를 작성해야했습니다. 아래 예제에서 볼 수 있듯이 기본적으로 WooCommerce REST API PHP 래퍼를 사용했습니다.

코드보기 요점.

먼저 소비자 키와 비밀을 사용하여 WooCommerce 클라이언트를 초기화합니다. 두 번째 및 세 번째 방법은 products라는 사용자 정의 경로를 작성하고 WooCommerce API에서 제품 / 카테고리 엔드 포인트로 경로를 맵핑하는 것입니다..

이러한 방식으로 카테고리 및 제품 읽기에 대한 액세스를 허용 할 수 있지만 주문에 대한 작성 조작 만 허용 할 수 있습니다.

간단한 4 단계로 새로운 React 앱 만들기

API를 설정하면 React 애플리케이션 작업을 시작할 수 있습니다. 설치 후 NodeJSNPM 전 세계적으로 create-react-app 패키지를 사용하여 기본적으로 PWA를 지원하는 React JS 앱을 빠르게 생성 할 수 있습니다.

  1. 설치 NodeJS와 NPM 세계적으로
  2. 설치 반응 형 앱 만들기 상용구
    npm install create-react-app -g를 설치하십시오.
  3. 일으키다 새로운 반응 응용
    create-react-app 내 앱
  4. 신청 시작
    CD 내 앱 & npm 시작

아래는 create-react-app에 의해 생성 된 애플리케이션의 스크린 샷입니다. 필요한 모든 것이 있으므로 라이브 리로드를 포함하여 코딩을 시작할 수 있습니다.

샘플 반응 앱

새 앱을 시작할 때 명심해야 할 것이 몇 가지 있습니다.

1) 앱 파일 정리
앱을 가장 잘 구성하는 방법에 대한 몇 가지 유용한 자습서가 있습니다. 더 나은 확장 성을 제공하기 때문에 폴더 별 기능을 선호합니다. 당신은 찾을 수 있습니다 여기에 정말 좋은 설명.
2) 린더 및 코딩 표준
익숙하지 않으면 코딩 표준이 성 가실 수 있지만 이 단계를 건너 뛰지 마십시오. 사용되지 않는 종속성을 정리하고 구성 요소 레벨에서 데이터의 유효성이 올바르게 검증되도록합니다. 또한 코드를 자동으로 포맷하는 더 예쁜 편집기 플러그인을 설치하면 코딩 표준을 사용하는 것이 쉬워집니다. 표준 자체는 인기있는 것을 선호합니다 만든 사람 Airbnb.
3) 소형 부품
구성 요소 파일을 작게 유지하면 테스트 및 관리가 쉬워집니다. 단일 구성 요소에서 코드 작성을 시작할 수 있으며 일단 커지면 더 작은 구성 요소로 나눕니다. UI / UX 구성 요소의 경우 다음과 같이 React와 호환되는 여러 라이브러리가 있습니다. 머티리얼 UI, 시맨틱 UI 또는 부트 스트랩, 몇 가지 예를 들기 위해.

이 라이브러리에는 그리드, 메뉴, 카드, 버튼 등과 같은 기성품 구성 요소 세트가 포함되어 있습니다. 기본 시맨틱 UI 요소로 구축 된 전자 상거래 애플리케이션 인터페이스의 예는 다음과 같습니다.

카테고리 목록, 제품 목록 및 사이드 메뉴를 볼 수 있습니다. 코드를 자세히 살펴 보겠습니다. React를 사용하여 이러한 예제를 작성하는 것이 얼마나 쉬운 지 알게됩니다..

전자 상거래 앱 예

ReactJS로 다이빙

다음은 API에서 제품 카테고리 세트를 읽는 React 구성 요소입니다. 구성 요소의 상태는 빈 카테고리 목록으로 초기화됩니다. 렌더링하기 전에 React에 의해 자동으로 호출되는 componentWillMount 메소드에서 카테고리를 가져 오도록 요청하고 응답을받은 후 상태에 추가합니다.

코드보기 요점.

보시다시피, 카테고리를받을 때 render 메소드를 호출 할 필요가 없습니다. React는이를 처리하고 컴포넌트를 다시 렌더링합니다. render 메소드는 카테고리 데이터를 수신하고 다음과 같은 CategoriesList라는 다른 사용자 컴포넌트를 반환합니다.

코드보기 요점.

위의 구성 요소는 소품으로받는 카테고리 목록을 반복하고 CategoryCard라는 다른 사용자 정의 구성 요소를 호출하여 단일 카테고리 요소를 렌더링합니다..

이러한 모든 구성 요소는 소품을 전달하여 통신합니다. 기본 카테고리 구성 요소는 API를 호출하고 카테고리 목록을 카테고리 목록으로 전달합니다. 카테고리 목록은 카테고리의 세부 사항을 카테고리 카드로 전달합니다..

Redux를 사용하여 글로벌 앱 상태 관리

위의 접근 방식의 문제점은 때때로 우리는 장바구니에 추가 된 제품 목록과 같이 최상위 애플리케이션 레벨에서 관리해야하는 데이터가 있다는 것입니다. 제품 수는 헤더 표시 줄의 장바구니 아이콘에 표시되지만 결제 페이지에는 목록으로 표시됩니다..

부모 응용 프로그램 구성 요소에이 모든 데이터를 추가하면 더 큰 응용 프로그램에서 관리하기가 매우 어려워집니다. 여기가 같은 라이브러리 ReduxJ 명확히하기 위해 Redux는 모든 JavaScript 프레임 워크와 함께 사용할 수 있으며 React에만 국한되지 않습니다..

또한 Redux를 사용한다고해서 구성 요소 수준에서 상태 나 소품을 사용할 수 없다는 의미는 아닙니다. Redux는 애플리케이션 수준에서 의미가있는 데이터를 유지하는 데만 사용해야합니다..

카테고리에서 필요한 것과 비슷하지만 이번에는 Redux를 사용하여 API에서 제품을 읽고 목록으로 렌더링하는 방법을 살펴 보겠습니다. 먼저 주요 앱 구성 요소를 글로벌 스토어에 배치하여 Redux와 연결해야합니다.

코드보기 요점.

이 예제에서 글로벌 앱 스토어는 카테고리 목록과 제품 목록을 포함하며, Redux의 combineReducers 메소드를 사용하여 병합됩니다..

그런 다음 type 속성을 포함해야하는 객체를 반환하는 매우 간단한 함수 인 Redux 작업을 계속 정의합니다. JS는 비동기식이므로 요청이 전송 될 때 신호를 보내기위한 조치와 응답이 수신 될 때 신호를 보내기위한 조치가 필요합니다. 전체 앱은 이러한 작업이 언제 발생하는지 알게됩니다..

아래에는 fetchProducts라는 함수도 추가했습니다. 보시다시피이 기능은 다음과 같습니다.

  • 제품 요청 조치 발송,
  • 제품 검색을위한 API 호출,
  • 결과가 수신 될 때 receiveProducts 조치를 전달합니다..

코드보기 요점.

앱 상태를 수정하기 위해 소위 Redux를 추가합니다 "감속기". 감속기는 특정 동작을 수신하고 전역 상태의 일부 (이 경우 제품 목록)를 변경하는 기능 일뿐입니다..

이 리듀서는 제품 요청 요청을받을 때 아무 작업도하지 않으며 항상 현재 상태를 반환합니다. 제품 수신 조치의 경우 리듀서는 전달 된 데이터를 리턴합니다.이 경우 제품 목록이됩니다..

코드보기 요점.

작업을 마무리하기 위해 새로운 제품 구성 요소에서 이러한 작업과 감속기를 사용합니다..

코드보기 요점.

이 컴포넌트는 Redux의 connect 메소드로 래핑되고 componentWillMount 메소드에서 fetchProducts를 전달합니다. 또한 구성 요소에는 제품 목록이 포함되지만 제품 목록 구성 요소는 제품 데이터를 직접 수신하지 않습니다. 제품 목록 구성 요소가 Redux를 사용하여 글로벌 앱 상태에 직접 연결되어 있기 때문입니다..

이러한 방식으로 앱 스토어에서 직접 제품 데이터에 액세스하고 제품 목록을 반복하며 ProductCard 구성 요소를 사용하여 단일 제품 요소를 렌더링 할 수 있습니다..

코드보기 요점.

지금까지 데이터를 표시하는 방법에 대한 몇 가지 예를 보았지만 카트에 제품 추가와 같이 사용자 상호 작용을 추가하려는 경우에는?

이 경우 사용자가 "장바구니에 담기" 버튼을 누르면 전역 앱 상태를 수정하는 액션을 전달합니다. 카트 제품 수를 표시하는 헤더 표시 줄이 Redux와 연결됩니다. 응용 프로그램 장바구니에 저장된 제품 수를 계산하고 그에 따라 자체 업데이트됩니다..

장바구니에 추가 예

WordPress와 앱 연결

이것들은 모두 당신을 시작하기위한 기본 예이며, WordPress 와이 앱을 정확히 어떻게 연결할 수 있는지 궁금 할 것입니다..

우리는 하위 도메인에서 앱을 호스팅하여 API에 연결하거나 WordPress 테마로 사용할 수 있습니다. 즉 JavaScript / CSS 파일 만로드하는 index.php 파일로 매우 기본적인 테마를 만드는 것을 의미합니다. create-react-app 상용구에는 애플리케이션 빌드를 생성하는 명령이 포함되어 있으므로 프로덕션 파일을 즉시 가져올 수 있습니다.

코드보기 요점.

서비스 노동자를 사용하는 곳

오프라인 모드의 경우 사용자가 오프라인 일 때도 앱 셸을 표시하는 서비스 워커를 추가 할 수 있습니다. 서비스 워커는 브라우저에 자신을 등록하는 JavaScript 파일 일뿐입니다..

코드보기 요점.

네트워크 우선 또는 캐시 우선과 같이 오프라인 모드에 사용할 수있는 몇 가지 전략이 있으며 Google에서 이러한 전략을 읽을 수 있습니다 오프라인 요리 책.

응용 프로그램의 셸을 캐시하면 앱이 훨씬 빠르게로드되므로 네트워크에 연결되어 있어도 이점이 있습니다..

더 나아가 API에서 오는 데이터 캐싱을 시작하려는 경우 redux-persist와 같은 NPM 패키지를 사용하고 브라우저의 로컬 저장소에서 데이터를 저장 / 검색하도록 앱을 수정할 수 있습니다.

웹 푸시 알림의 경우 하나의 신호 무료 워드 프레스 플러그인. 이 플러그인은 반응 형 테마와도 작동하므로 즉시 확인해야합니다..

무엇 향후 계획?

당신은 할 수 있습니다 찾을 위의 WooCommerce PWA 데모 데모.

Google은 이미 베타 버전을 개발 중이며 로드맵의 일부입니다.

  • 오프라인 모드 기능 추가
  • 푸시 알림 추가
  • 결제 과정 마무리

자신의 필요에 따라 기여하거나 사용자 정의하려는 경우 전자 상거래 진보적 인 웹 애플리케이션의 알파 버전을 찾을 수 있습니다 GitHub에서.

PWA 데모

Progressive Web Apps와 모바일 WordPress 환경에서 이들이 가질 수있는 역할에 대해 어떻게 생각하십니까? 다음 프로젝트에서이 경로를 따르는 것을 고려하고 있습니까??

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃 및 프리젠 테이션.

저자 정보 : Alexandra Anghel은 공동 창립자이자 CTO입니다. Appticles.com – 진보적 인 웹 앱을 구축하기위한 플랫폼. 플랫폼의 확장으로 Appticles에는 WordPress 플러그인 (워드 프레스 모바일 팩)이 1 백만 다운로드를 돌파했습니다. Alexandra는 풀 스택 개발자입니다. 그녀는 Startupbootcamp (코펜하겐 / 덴마크)와 Prosper Women Accelerator (세인트루이스 / 미국)의 두 비즈니스 액셀러레이터에 참여했습니다. 2017 년 초, 그녀는 공동 창업자로 Codette에 합류했습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector