프로그레시브 웹 앱 또는 PWA는 최신 기능으로 인해 점점 더 많은 인기를 얻고 있습니다.최첨단 기술 덕분에 고객 경험이 향상되고 비즈니스에 더 많은 수익이 발생합니다.따라서 많은 기업들이 PWA의 장점을 활용하기 위해 이 플랫폼을 온라인 상점에 적용했습니다.특히 많은 기업이 Magento에서 프로그레시브 웹 앱을 선택합니다.그러면 더욱 익숙해질 수 있도록 Magento PWA studio에 대한 자세한 체크리스트를 알려드리겠습니다.
PWA 스튜디오 개요
프로그레시브 웹 앱이란 무엇입니까?
프로그레시브 웹 앱은 기본 앱처럼 보이고 느껴지지만 모바일 브라우저에서 직접 작동합니다.App Store에서 아무것도 다운로드할 필요가 없습니다.고객은 대신 브라우저에서 앱과 같은 경험을 즉시 얻을 수 있습니다.
프로그레시브 웹 앱의 기능
오프라인 작업 기능:서비스 작업자 – 해당 기능을 담당하는 기술입니다.따라서 앱이 물건을 오프라인으로 저장하고 검색을 위한 네트워크 요청을 유연하게 관리할 수 있습니다.결과적으로 앱을 실행하는 데 필요한 데이터 양을 최소화하게 됩니다.
검색 가능성 및 쉬운 설치:PWA는 Google 또는 Bing과 같은 일반 검색 엔진을 통해 검색할 수 있는 몇 가지 추가 기능이 있는 웹사이트입니다.따라서 사용자는 앱 스토어에서 아무것도 다운로드할 필요가 없습니다.PWA의 설치는 정말 쉽습니다. 처음 방문하는 동안 백그라운드에서 발생합니다.
전화 기능의 사용:PWA는 Android에서 장치 기능에 액세스할 수 있는 가능성이 많고 iOS에서는 약간 적습니다.앱과 같은 방식으로 카메라, GPS 또는 지문 스캐너를 사용하면 사용자 경험이 풍부해집니다.
자동 업데이트:PWA를 사용하면 게시자가 즉시 패치를 구현할 수 있습니다.또한 콘텐츠를 완전히 제어할 수 있습니다.고객은 항상 최신 버전의 애플리케이션을 사용합니다.
안전성:HTTPS 프로토콜을 사용하면 암호화되어 데이터가 안전하므로 가로채기 및 변경하기가 더 어렵습니다.또한 사용자는 HTTPS를 게시자의 안전과 신뢰성을 보장하는 것으로 인식합니다.그리고 구글은 검색 순위에서 이를 활용한 가산점을 준다.
앱과 같은 느낌:PWA의 전체 아이디어는 웹의 개방형 특성을 통해 가능한 최고의 경험을 앱과 유사한 경험에 연결하는 방법을 찾는 것입니다.
Magento PWA Studio 개요
마젠토 PWA 스튜디오의 기원
Magento는 온라인 상점을 운영하는 모든 판매자를 위한 도구 세트를 출시했습니다.Magento PWA Studio는 이 도구 세트의 이름입니다.온라인 소매업체는 다양한 운영 체제용 기본 앱을 개발하는 데 많은 시간과 비용을 절약할 수 있습니다.
앱과 같은 웹사이트 Magento를 디자인하는 도구 덕분에 온라인 판매자는 모바일 전환율을 높일 수 있습니다.이는 고객을 위한 교차 채널 경험을 개선한 결과입니다.게다가 Magento PWA를 사용하면 더 나은 사용자 경험을 위해 기본 앱처럼 작동할 수 있습니다.
판매자는 초고속 프론트엔드 아키텍처와 개방형 웹 API를 활용할 수 있습니다.그것은 그들의 상점을 새로운 규범으로 빠르게 변모시키는 데 도움이 됩니다.
PWA 빌드팩
Buildpack에는 번개처럼 빠른 프론트 엔드 및 PWA를 만들기 위한 필수 개발 및 빌드 라이브러리 및 도구가 포함되어 있습니다.PWA 개발을 위해 로컬 환경을 조정할 수 있습니다.
PWA 스토어프론트
Venia Storefront라고도 하는 PWA Storefront는 Peregrine 도구와 PWA Buildpack으로 구축된 개념 증명 PWA입니다.Magento PWA Studio 및 이를 통해 얻을 수 있는 것에 대해 학습할 때 상점 전면에 카테고리 페이지 샘플 및 제품 세부 정보가 표시됩니다.
남자 이름
이전에 언급했듯이 Magento의 Peregrine 프로젝트에는 Magento PWA를 생성하기 위한 도구 및 UI 구성 요소 세트가 포함되어 있습니다.구성 요소를 결합, 확장 및 혼합하여 고유한 Magento 2 PWA 저장소를 만들 수 있습니다.
Magento PWA Studio의 몇 가지 뛰어난 기능
ReactJS – ReactJS는 성능이 매우 뛰어나며 뛰어난 쇼핑 및 개발자 경험을 제공합니다.
홈 화면 대안 – Magento PWA는 홈 화면에서 다운로드할 수 있는 스토어를 제공합니다.기본 앱처럼 보이고 작동합니다.
오프라인으로 작동 – PWA 웹 앱은 오프라인과 온라인 모두에서 작동할 수 있습니다.
강력한 백엔드 – Magento의 강력한 사내 백엔드는 몇 가지 문제로 원활한 사용자 경험을 제공합니다.
Magento PWA Studio를 사용할 때의 이점
포괄적인 개발 도구
Magento Studio는 최첨단이며 철저한 문서를 포함하는 PWA 개발 도구를 제공합니다.사용자는 자신의 로컬 PWA 개발 환경을 신속하게 조정할 수 있습니다.
쉬운 설정
Magento Studio를 사용하면 백엔드에서 PWA를 설정하는 것이 간단합니다.애플리케이션을 성공적으로 시작하려면 사용자가 .env 파일에 Magento 인스턴스 URL을 삽입해야 합니다.그런 다음 저장소를 복제하고 명령을 실행합니다.개발의 용이성이 최우선 목표라는 것은 처음부터 분명했습니다.
그래프QL
GraphQL은 선언적 데이터 가져오기를 사용하기 때문에 Magento Studio로 개발된 PWA는 쿼리를 거의 가져오지 않습니다 . 그러면 다양한 소스의 여러 사용자를 더 잘 수용할 수 있습니다.
커뮤니티 지원
Magento는 잘 알려진 전자 상거래 플랫폼으로, Magento PWA 사용자 및 공동 작업자로 구성된 대규모 글로벌 커뮤니티가 되었습니다.
Magento PWA 스튜디오의 아키텍처 및 프레임워크
스튜디오는 앱 개발 프로세스 초기에 발생하는 실수를 피하기 위해 설정 및 사용이 정말 간단합니다.개발자는 무언가가 제대로 정렬되지 않을 때 즉시 경고를 받습니다.이렇게 하면 프로그램이 거의 완료될 때 버그를 발견하고 복구하는 시간을 절약할 수 있습니다.
Magento PWA 스튜디오의 빌더가 사용할 준비가 되었습니다.
빌더를 설치하고 환경을 사용자 정의하고 설정하는 데 시간을 할애할 필요가 없습니다.모든 것이 설치 후 Magento PWA Studio에서 즉시 작동합니다.모든 것이 준비되었고 갈 준비가 되었습니다.
미리 만들어진 요소는 조정 가능합니다.
PWA Studio에는 완성되고 바로 사용할 수 있는 웹사이트 파트가 많이 포함되어 있습니다.웹 사이트를 만들 때 요소의 일부 또는 전체를 조합하여 사용할 수 있습니다.이때 준비된 요소를 그대로 사용할 수 있습니다.미리 만들어진 조각이라도 개발자나 소비자의 요구에 맞게 수정할 수 있습니다.
완벽하게 간단한 라우팅 및 캐싱
Magento PWA Studio의 라우팅 및 캐싱 기능은 추가적인 훌륭한 품질입니다.라우팅 및 캐싱은 변경 없이 항상 수행된 것과 동일한 방식으로 수행됩니다.그러나 기존의 Magento 라우팅 및 캐싱 기술을 채택하면 라우팅 및 캐싱에 참여할 필요가 없습니다.
Magento PWA Studio와 극복해야 할 단점
단일 플랫폼
Magento Studio를 소유하려면 Magento 2.3 이상 빌드에서 실행할 각 스토어가 필요합니다.호환성에 대해 걱정할 필요는 없지만 상당히 제한적입니다.
호환성 부족
호환성과 관련하여 Magento Studios의 GraphicQL 기능은 이전 버전과 부적절하게 렌더링합니다.
iOS 지원 문제
Magento는 iOS PWA 알림을 지원하지 않으며 인터넷에 연결되지 않은 iOS 기기에서는 작동하지 않습니다.
검증 문제
새 고객 계정을 만들 때 유효성 검사 문제가 발생할 수 있습니다.이것은 암호를 설정할 때 iOS 사용자에게 특히 해당됩니다.선택한 비밀번호가 비밀번호 요구 사항을 충족하지 않으면 알림을 전달할 수 없습니다.
Magento PWA Studio 설치 방법(버전 2 포함)
1단계: 최신 Magento 버전 설치
Magento PWA Studio를 설치하려면 먼저 Magento 2.3.x 버전이 설치되어 있어야 합니다.다른 Magento 버전이 지원하지 않기 때문에 Magento PWA Studio Project(2.3) 없이는 설치할 수 없습니다.
2단계: NodeJS 설치
그런 다음 NodeJS(버전 >=10.14.1)를 설치해야 합니다.이 기술에 익숙하지 않은 경우 아래 나열된 명령을 사용하십시오.(이것은 Linux 사용자에게만 해당됩니다.)
sudo apt-get install nodejs
먼저 Node 버전을 확인해야 합니다.
node -v
그런 다음 NPM 버전을 검토합니다.
npm -v
설치한 버전이 위에 표시된 버전보다 오래된 경우 아래 명령을 사용하여 가장 최신의 안정적인 노드 버전으로 업그레이드하십시오.
sudo npm cache clean -f
sudo npm install -gn
sudo n stable
3단계: Node JS 설치 및 실행
NodeJS를 설치하고 실행하려면 Yarn(Yarn >=1.13.0)을 설치해야 합니다.Yarn 설치를 위해 다음 명령을 실행합니다.(Linux OS에만 해당).
sudo npm install yarn -g
이제 원사 버전을 확인하십시오.
yarn -v
4단계:
이제 Yarn이 설치되었으므로 PWA 저장소를 개발 디렉토리에 복제합니다.
5단계:
이 단계에 이어 다음 명령을 실행하여 프로젝트 종속성을 설치합니다.
yarn install
6단계: .env 파일 만들기
.env 파일을 생성하려면 PWA 루트 디렉터리에서 다음 명령을 실행합니다.
(테마 Venia의 경우 사용자가 설치한 Magento 또는 기본 Magento 2.3.1을 사용할 수 있습니다. 여기서는 기본값을 사용합니다.)
다음 명령을 사용하여 .env 파일을 만들고 사용자 지정 MAGENTO_BACKEND_URL 값을 설정할 수도 있습니다.
7단계: SSL 인증서 설치
PWA가 보안 경로에서 실행될 때 SSL 인증서를 설치합니다. SSL 인증서를 생성하기 위해 create-custom-origin 명령을 실행할 수 있습니다.
8단계: Venia 샘플 데이터 설치
Venia 샘플 데이터를 설치할 수도 있습니다. 이미 사용 가능한 bash 스크립트가 있습니다.
Magento에 샘플 데이터를 설치하려면 다음 명령을 실행하십시오.
지금 실행하여 테마에 대한 모든 아티팩트를 빌드하십시오.
yarn run build
필요에 따라 PWA 프로젝트의 루트 디렉터리에서 다음 명령을 실행하여 서버를 시작합니다.
개발 측면에서 -
전체 개발자 PWA Studio 실행 을 목표로
아티팩트를 구축하고 PWA 스튜디오를 스테이징으로 실행하기 위해-
이제 PWA가 성공적으로 설치되었습니다.위에서 언급한 명령을 실행하면 PWA가 작동하는 URL이 표시됩니다.그런 다음 설치가 성공했는지 여부를 나타냅니다.
결론
Magento PWA 스튜디오에 대한 개요가 있다는 희망을 가지고 이 기사를 안내합니다 . 놀라운 기능이 많이 있으므로 온라인 상점을 늘리기 위해 뛰어들 가치가 있습니다. 따라서 귀하의 비즈니스는 고객의 요구를 충족시키고 인터넷 환경에서 더 많은 발전 기회를 가져올 수 있습니다. 그러나 이 기술에 대해 여전히 혼란스럽다면 Magesolution이 귀하의 비즈니스를 지원하는 파트너가 될 의향이 있습니다. 이 분야에서의 많은 경험을 바탕으로 우리는 최고의 서비스인 Magento Progressive Web Application Development를 제공할 자신이 있습니다.따라서 질문이 있는 경우 당사에 문의하여 더 많은 정보를 얻으십시오.
