ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ Magento PWA studio

Progressive Web App หรือ กปภ. ได้รับความนิยมเพิ่มขึ้นเรื่อย ๆ เนื่องจากคุณสมบัติที่ทันสมัย ต้องขอบคุณเทคโนโลยีล้ำสมัยที่ช่วยยกระดับประสบการณ์ของลูกค้าและนำรายได้มาสู่ธุรกิจมากขึ้น ดังนั้นบริษัทจำนวนมากจึงใช้แพลตฟอร์มนี้สำหรับร้านค้าออนไลน์เพื่อใช้ประโยชน์จากการประปาส่วนภูมิภาค โดยเฉพาะอย่างยิ่ง ธุรกิจจำนวนมากเลือกเว็บแอปแบบโปรเกรสซีฟบนวีโอไอพี จากนั้นเราจะให้รายการตรวจสอบโดยละเอียดเกี่ยวกับ Magento PWA studio เพื่อช่วยให้คุณคุ้นเคยกับมันมากขึ้น

ภาพรวมของ กปภ. สตูดิโอ

Progressive Web App คืออะไร?

เว็บแอปแบบโปรเกรสซีฟมีลักษณะและให้ความรู้สึกเหมือนเป็นแอปที่มาพร้อมเครื่อง แต่ทำงานโดยตรงในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ไม่จำเป็นต้องดาวน์โหลดอะไรจาก App Store ลูกค้าจะได้รับประสบการณ์เหมือนแอปทันทีในเบราว์เซอร์แทน

คุณสมบัติของ Progressive Web App

ความสามารถในการทำงานแบบออฟไลน์: พนักงานบริการ – เทคโนโลยีรับผิดชอบคุณสมบัตินั้น ดังนั้นจึงอนุญาตให้แอปจัดเก็บสิ่งต่าง ๆ แบบออฟไลน์และจัดการคำขอเครือข่ายเพื่อดึงข้อมูลเหล่านั้นได้อย่างยืดหยุ่น ด้วยเหตุนี้ จึงนำไปสู่การลดปริมาณข้อมูลที่เราต้องใช้เพื่อเรียกใช้แอป

การค้นพบได้และติดตั้งง่าย: PWA คือเว็บไซต์ที่มีความพิเศษบางอย่างที่สามารถค้นพบได้ผ่านเครื่องมือค้นหาทั่วไป เช่น Google หรือ Bing ดังนั้น ผู้ใช้จึงไม่จำเป็นต้องดาวน์โหลดอะไรจากร้านแอพ การติดตั้ง กปภ. ทำได้ง่ายมาก โดยจะติดตั้งอยู่เบื้องหลังในระหว่างการเยี่ยมชมครั้งแรก

การใช้คุณสมบัติโทรศัพท์: PWA มีความเป็นไปได้มากมายในการเข้าถึงคุณสมบัติของอุปกรณ์บน Android และน้อยกว่าใน iOS การใช้กล้อง GPS หรือเครื่องสแกนลายนิ้วมือในลักษณะที่คล้ายกับแอปช่วยเพิ่มประสบการณ์ของผู้ใช้

การอัปเดตอัตโนมัติ: การประปาส่วนภูมิภาคอนุญาตให้ผู้เผยแพร่ใช้โปรแกรมแก้ไขได้ทันที นอกจากนี้ยังช่วยให้ควบคุมเนื้อหาได้อย่างเต็มที่ ลูกค้าใช้แอปพลิเคชันเวอร์ชันล่าสุดเสมอ

ความปลอดภัย: ด้วยการใช้โปรโตคอล HTTPS ข้อมูลจะปลอดภัยเนื่องจากการเข้ารหัส ทำให้ยากต่อการสกัดกั้นและเปลี่ยนแปลง นอกจากนี้ ผู้ใช้มองว่า HTTPS เป็นการรับประกันความปลอดภัยและความน่าเชื่อถือของผู้เผยแพร่ และ Google ให้คะแนนเพิ่มเติมในการจัดอันดับการค้นหาสำหรับการใช้งาน

ความรู้สึกเหมือนแอป: แนวคิดทั้งหมดที่อยู่เบื้องหลังการประปาส่วนภูมิภาคคือการหาวิธีเชื่อมต่อประสบการณ์ที่ดีที่สุดกับประสบการณ์ที่เหมือนแอปที่มีลักษณะเปิดกว้างของเว็บ

โครงร่างของ Magento PWA Studio

ที่มาของ Magento PWA Studio

Magento ได้เปิดตัวชุดเครื่องมือสำหรับผู้ค้าทุกรายที่ดำเนินการร้านค้าออนไลน์ Magento PWA Studio เป็นชื่อของชุดเครื่องมือนี้ จะช่วยประหยัดเวลาและเงินของผู้ค้าปลีกออนไลน์ในการพัฒนาแอพพื้นฐานสำหรับระบบปฏิบัติการที่แตกต่างกันทั้งหมด

เนื่องจากเครื่องมือในการออกแบบเว็บไซต์ที่คล้ายกับแอปวีโอไอพี ผู้ค้าออนไลน์จึงสามารถเพิ่มอัตราการแปลงบนอุปกรณ์เคลื่อนที่ได้ เป็นผลมาจากการปรับปรุงประสบการณ์ข้ามช่องทางสำหรับลูกค้า นอกจากนี้ Magento PWA ยังช่วยให้ทำงานเหมือนแอปที่มาพร้อมเครื่องเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น

ผู้ค้าสามารถใช้สถาปัตยกรรม front-end ที่รวดเร็วและ API เว็บแบบเปิดได้ ช่วยเปลี่ยนร้านค้าของพวกเขาให้กลายเป็นบรรทัดฐานใหม่อย่างรวดเร็ว

PWA Buildpack

Buildpack ประกอบด้วยการพัฒนาและสร้างไลบรารีและเครื่องมือที่จำเป็นสำหรับการสร้าง front-end และ PWA ที่รวดเร็วปานสายฟ้า ช่วยให้คุณสามารถจัดสภาพแวดล้อมในพื้นที่ของคุณสำหรับการพัฒนาการประปาส่วนภูมิภาค

หน้าร้าน กปภ.

PWA Storefront หรือที่รู้จักในชื่อ Venia Storefront เป็น PWA ที่พิสูจน์แนวคิดที่สร้างขึ้นด้วยเครื่องมือ Peregrine และ PWA Buildpack เมื่อเรียนรู้เกี่ยวกับ Magento PWA Studio และสิ่งที่ทำได้ หน้าร้านจะแสดงตัวอย่างหน้าหมวดหมู่และรายละเอียดผลิตภัณฑ์

เพเรกริน

โปรเจ็กต์ Peregrine ของ Magento มีชุดเครื่องมือและส่วนประกอบ UI สำหรับสร้าง Magento PWA ส่วนประกอบสามารถรวม ขยาย และผสมเพื่อสร้างร้านค้า Magento 2 PWA ที่ไม่ซ้ำใคร

คุณลักษณะเด่นบางประการของ Magento PWA Studio

ReactJS – ReactJS ทำงานได้ดีมากและมอบประสบการณ์การช็อปปิ้งและนักพัฒนาที่ยอดเยี่ยม

ทางเลือกของหน้าจอหลัก – Magento PWA มีร้านค้าซึ่งสามารถดาวน์โหลดได้จากหน้าจอหลัก มันจะมีลักษณะและทำงานเป็นแอพที่มาพร้อมเครื่อง

ทำงานแบบออฟไลน์ – เว็บแอป PWA ทำงานได้ทั้งออฟไลน์และออนไลน์

แบ็คเอนด์ที่แข็งแกร่ง – แบ็กเอนด์ภายในที่แข็งแกร่งของ Magento มอบประสบการณ์การใช้งานที่ราบรื่นแก่ผู้ใช้โดยไม่มีปัญหาเล็กน้อย

ข้อได้เปรียบเมื่อใช้ Magento PWA Studio

เครื่องมือการพัฒนาที่ครอบคลุม

Magento Studio มอบเครื่องมือในการพัฒนา PWA ที่ทันสมัยและมีเอกสารประกอบอย่างละเอียด ผู้ใช้สามารถจัดเตรียมสภาพแวดล้อมการพัฒนา PWA ในพื้นที่ของตนเองได้อย่างรวดเร็ว

ติดตั้งง่าย

การตั้งค่า PWA จากแบ็กเอนด์นั้นง่ายดายด้วย Magento Studio ในการเริ่มต้นแอปพลิเคชันให้สำเร็จ ผู้ใช้ต้องแทรก URL อินสแตนซ์ Magento ในไฟล์ .env จากนั้นคุณจะโคลนที่เก็บและเรียกใช้คำสั่ง เห็นได้ชัดตั้งแต่เริ่มต้นว่าความง่ายในการพัฒนาเป็นเป้าหมายสูงสุด

GraphQL

เนื่องจาก GraphQL ใช้การดึงข้อมูลที่เปิดเผย PWAs ที่พัฒนาด้วย Magento Studio จึงแทบไม่มีการดึงข้อความค้นหามากเกินไป จากนั้นจะสามารถรองรับผู้ใช้หลายคนจากแหล่งต่างๆ ได้ดีขึ้น

การสนับสนุนชุมชน

Magento เป็นแพลตฟอร์มอีคอมเมิร์ซที่มีชื่อเสียง ซึ่งส่งผลให้มีชุมชนผู้ใช้ Magento PWA และผู้ทำงานร่วมกันทั่วโลกจำนวนมาก

สถาปัตยกรรมและเฟรมเวิร์กของ Magento PWA studio

สตูดิโอตั้งค่าและใช้งานได้ง่ายมาก เพื่อหลีกเลี่ยงข้อผิดพลาดที่จะเกิดขึ้นตั้งแต่เนิ่นๆ ในกระบวนการพัฒนาแอป นักพัฒนาจะได้รับคำเตือนทันทีเมื่อมีบางอย่างไม่ถูกต้อง ซึ่งช่วยประหยัดเวลาในการค้นหาและซ่อมแซมจุดบกพร่องเมื่อโปรแกรมใกล้จะเสร็จสมบูรณ์

ผู้สร้างสตูดิโอ Magento PWA พร้อมใช้งานแล้ว

ไม่จำเป็นต้องติดตั้งตัวสร้างและใช้เวลาในการปรับแต่งและตั้งค่าสภาพแวดล้อม ทุกอย่างใช้งานได้ทันทีด้วย Magento PWA Studio หลังการติดตั้ง ทุกอย่างพร้อมและพร้อมที่จะไป

องค์ประกอบที่สร้างไว้ล่วงหน้าสามารถปรับได้

PWA Studio มีชิ้นส่วนเว็บไซต์สำเร็จรูปและพร้อมใช้งานจำนวนมาก เมื่อสร้างเว็บไซต์ของคุณ คุณสามารถใช้องค์ประกอบใดๆ หรือทั้งหมดรวมกันก็ได้ ณ จุดนี้ องค์ประกอบที่เตรียมไว้สามารถใช้ได้ตามที่เป็นอยู่ แม้แต่ชิ้นงานที่ทำไว้ล่วงหน้าก็สามารถปรับเปลี่ยนได้ตามความต้องการของผู้พัฒนาหรือผู้บริโภค

การกำหนดเส้นทางและการแคชที่ง่ายดายอย่างสมบูรณ์แบบ

คุณสมบัติการกำหนดเส้นทางและการแคชของ Magento PWA Studio เป็นคุณสมบัติที่ยอดเยี่ยมเพิ่มเติม การกำหนดเส้นทางและการแคชทำได้ในลักษณะเดียวกับที่เคยทำมา โดยไม่มีการเปลี่ยนแปลง หากคุณใช้เทคนิคการกำหนดเส้นทางและแคชของ Magento แบบเดิม คุณไม่จำเป็นต้องมีส่วนร่วมในการกำหนดเส้นทางและการแคช

Magento PWA Studio และข้อเสียที่คุณต้องเอาชนะ

แพลตฟอร์มเดียว

หากคุณต้องการเป็นเจ้าของ Magento Studio คุณต้องให้แต่ละร้านทำงานบน Magento 2.3 และบิลด์ที่ใหม่กว่า แม้ว่าไม่จำเป็นต้องกังวลเกี่ยวกับความเข้ากันได้ แต่ก็มีข้อจำกัดค่อนข้างมาก

ขาดความเข้ากันได้

เมื่อพูดถึงความเข้ากันได้ ฟีเจอร์ GraphicQL ของ Magento Studios แสดงผลไม่เหมาะสมกับเวอร์ชันก่อนหน้า

ปัญหาการสนับสนุน iOS

Magento ไม่รองรับการแจ้งเตือน iOS PWA และจะไม่ทำงานกับอุปกรณ์ iOS ที่ไม่ได้เชื่อมต่อกับอินเทอร์เน็ต

ปัญหาการตรวจสอบ

เมื่อสร้างบัญชีลูกค้าใหม่ ข้อกังวลในการตรวจสอบอาจเกิดขึ้นได้ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ iOS เมื่อตั้งค่ารหัสผ่าน ไม่สามารถส่งการแจ้งเตือนได้หากรหัสผ่านที่เลือกไม่เป็นไปตามข้อกำหนดของรหัสผ่าน

วิธีการติดตั้ง Magento PWA Studio (ด้วยเวอร์ชัน 2

ขั้นตอนที่ 1: ติดตั้ง Magento เวอร์ชันล่าสุด

ในการติดตั้ง Magento PWA Studio คุณต้องติดตั้งเวอร์ชัน Magento 2.3.x ก่อน คุณไม่สามารถติดตั้ง Magento PWA Studio Project(2.3) ได้หากไม่มีมัน เนื่องจากไม่มี Magento เวอร์ชันอื่นรองรับ

ขั้นตอนที่ 2: ติดตั้ง NodeJS

หลังจากนั้น คุณจะต้องติดตั้ง NodeJS (เวอร์ชัน >=10.14.1) หากคุณไม่คุ้นเคยกับเทคนิคนี้ ให้ใช้คำสั่งด้านล่าง (สำหรับผู้ใช้ Linux เท่านั้น)

sudo apt-get ติดตั้ง nodejs

ก่อนอื่น คุณต้องตรวจสอบ Node version : node -v

จากนั้น ตรวจสอบเวอร์ชัน NPM: npm -v

หากเวอร์ชันที่คุณติดตั้งเก่ากว่าที่แสดงด้านบน ให้ใช้คำสั่งด้านล่างเพื่ออัปเกรดโหนดเวอร์ชันล่าสุดและเสถียร

sudo npm cache clean -f

sudo npm ติดตั้ง -gn

sudo n เสถียร

ขั้นตอนที่ 3: ติดตั้งและเรียกใช้ Node JS

หลังการติดตั้งและรัน NodeJS คุณจะต้องติดตั้ง Yarn (Yarn >=1.13.0 ) เรียกใช้คำสั่งต่อไปนี้สำหรับการติดตั้ง Yarn (ใช้ได้กับระบบปฏิบัติการ Linux เท่านั้น)

sudo npm ติดตั้งเส้นด้าย -g

ตอนนี้ตรวจสอบรุ่นเส้นด้าย:

เส้นด้าย -v

ขั้นตอนที่ 4:

เมื่อติดตั้ง Yarn แล้ว ให้โคลนที่เก็บ PWA ไปยังไดเร็กทอรีการพัฒนาของคุณ

โคลน git: https://github.com/magento-research/pwa-studio.git

ขั้นตอนที่ 5:

ต่อจากขั้นตอนนี้ ให้ติดตั้งการพึ่งพาโปรเจ็กต์โดยรันคำสั่งต่อไปนี้

ติดตั้งเส้นด้าย

ขั้นตอนที่ 6: สร้างไฟล์ .env

สำหรับการสร้างไฟล์ .env ให้รันคำสั่งที่ตามมาจากไดเร็กทอรีรูท PWA-

(สำหรับธีม Venia คุณสามารถใช้ Magento ที่คุณติดตั้งหรือ Magento 2.3.1 ที่เป็นค่าเริ่มต้นได้ ที่นี่เราใช้ค่าเริ่มต้น)

MAGENTO_BACKEND_URL=”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/” เส้นด้าย buildpack create-env-file packages/venia-concept

คุณยังสามารถสร้างไฟล์ .env และตั้งค่า MAGENTO_BACKEND_URL แบบกำหนดเองของคุณได้โดยใช้คำสั่งต่อไปนี้:

MAGENTO_BACKEND_URL=”https://YOUR_MAGENTO_BACKEND_URL/” เส้นด้าย buildpack create-env-file packages/venia-concept

ขั้นตอนที่ 7: ติดตั้งใบรับรอง SSL

ติดตั้งใบรับรอง SSL ในขณะที่ PWA ทำงานบนเส้นทางที่ปลอดภัย คุณสามารถเรียกใช้คำสั่ง create-custom-origin เพื่อสร้างใบรับรอง SSL:

เส้นด้าย buildpack create-custom-origin แพ็คเกจ / venia-concept

ขั้นตอนที่ 8: ติดตั้งข้อมูลตัวอย่าง Venia

คุณยังสามารถติดตั้งข้อมูล Venia Sample ซึ่งมี bash script อยู่แล้วที่ package/venia-concept/deployVeniaSampleData.sh

bash ปรับใช้VeniaSampleData.sh

ในการติดตั้งข้อมูลตัวอย่างใน Magento ให้รันคำสั่งต่อไปนี้:

bin/magento การติดตั้ง:อัพเกรด

ตัวสร้างดัชนี bin/magento:reindex

สร้างสิ่งประดิษฐ์ทั้งหมดสำหรับธีมของคุณตอนนี้โดยเรียกใช้-

เส้นด้ายวิ่งสร้าง

เริ่มต้นเซิร์ฟเวอร์โดยเรียกใช้คำสั่งใดๆ ต่อไปนี้ตามที่คุณต้องการ จากไดเร็กทอรีรากของโปรเจ็กต์ PWA

เพื่อการพัฒนา-

นาฬิกาวิ่งเส้นด้าย:venia

สำหรับนักพัฒนา PWA Studio . เต็มรูปแบบ

นาฬิกาวิ่งเส้นด้าย:ทั้งหมด

สำหรับการสร้างสิ่งประดิษฐ์และดำเนินการสตูดิโอ กปภ. เพื่อจัดทำ-

เส้นด้ายวิ่งสร้าง && เวทีวิ่งเส้นด้าย:venia

ติดตั้ง กปภ. เรียบร้อยแล้ว เมื่อคุณเรียกใช้คำสั่งที่กล่าวถึงข้างต้น คุณจะเห็น URL ที่ กปปส. ดำเนินการอยู่ จากนั้นจะระบุว่าการติดตั้งสำเร็จหรือไม่

บทสรุป

เราแนะนำคุณตลอดบทความนี้ด้วยความหวังว่า: คุณมีภาพรวมของ Magento pwa studio ด้วยคุณสมบัติที่น่าทึ่งมากมาย จึงคุ้มค่าที่จะเพิ่มร้านค้าออนไลน์ของคุณ ดังนั้นธุรกิจของคุณจึงสามารถตอบสนองความต้องการของลูกค้าและนำโอกาสมาพัฒนาในสภาพแวดล้อมอินเทอร์เน็ตได้มากขึ้น อย่างไรก็ตาม หากคุณยังสับสนเกี่ยวกับเทคโนโลยีนี้ Magesolution ยินดีที่จะเป็นพันธมิตรเพื่อช่วยเหลือธุรกิจของคุณ ด้วยประสบการณ์มากมายในด้านนี้ เราจึงมั่นใจที่จะให้บริการที่ดีที่สุด: Magento Progressive Web Application Development ดังนั้น หากคุณมีคำถามใดๆ โปรดติดต่อเราเพื่อขอข้อมูลเพิ่มเติม