WordPress və WooCommerce əsasında mütərəqqi veb tətbiqləri qurmaq istəyirsiniz? Budur (w / Kod Nümunələri)

WordPress və WooCommerce əsasında mütərəqqi veb tətbiqləri qurmaq istəyirsiniz? Budur (w / Kod Nümunələri)

WordPress və WooCommerce əsasında mütərəqqi veb tətbiqləri qurmaq istəyirsiniz? Budur (w / Kod Nümunələri)
СОДЕРЖАНИЕ
02 июня 2020

Yəqin ki, artıq deyə biləcəyiniz kimi, bu yazı bir az üstündür "qabaqcıl" yan, lakin çox maraqlı bir mövzu həll edir və veb saytlarımız və / və ya tətbiqlərimiz üçün bu mobil ilk yola davam etməyimiz üçün yeni bir filial təqdim edir..


Dediyimiz şey "cavab verən veb dizayn" bir müddətdir ki, bizimlədir və oyunun bu mərhələsində əksər inkişaf etdiricilər / saytlar / veb-alətlər artıq onun prinsiplərini tam şəkildə birləşdirdilər. Ancaq bu son oyun "mobil dostluq"? Və ya bəlkə yalnız başlanğıcdır.

Yaxşı, Google bunun sonuncu olduğunu düşünür. Gələcəkdə Proqressiv Veb Tətbiqləri!

Oxumaq istədiyiniz yazı bizim başqa bir nəşrimizdir "dev evinin içərisində" təşəbbüs (burada birincisi). Bu Alexandra Anghel tərəfindən birlikdə edildi Appticles.com.

Alexandra’ya daxil olun:

WordPress və WooCommerce-də Proqressiv Veb Tətbiqləri

Proqressiv Veb Tətbiqlərini başa düşmək

Proqressiv Veb Tətbiqləri (PWA), vebin ən yaxşısını və tətbiqlərin ən yaxşısını birləşdirən təcrübələrdir. Native app store apps kimi xüsusiyyətlər vasitəsilə keçmişdə olduqca populyarlaşdı təkan bildirişləri, oflayn işləmək, hamar animasiya və keçid, ev ekranına yükləmə və s.

Mobil Veb Tətbiqləri brauzerdə işləyən və bəzi yerli tətbiqetmələri vebə gətirməyə çalışan JavaScript tətbiqetmələridir, lakin məsələn push bildirişlərini verə bilmədilər. Yeni Web API-lərin mobil tətbiqi ilə Progressive Web Apps artıq boşluğu bağlayır, mobil veb-də tətbiqə bənzər bir təcrübə təmin edir..

Google onları təsvir edir kimi:

  • Etibarlı – Dərhal yükləyin
  • Tez – Tez istifadəçi qarşılıqlı cavab
  • Nişanlanmaq – Doğma tətbiq kimi davranmaq

Bu nöqtələrin hamısını vurmaq üçün Proqressiv Veb Tətbiqi aşağıdakı imkanlara malik olmalıdır:

  • Oflayn və ya zəif şəbəkə şəraitində işləyin
  • Veb App Bannerlər qoyun və ya Ev ekranına əlavə edin
  • Web Push bildirişlərindən istifadə edin. Web Push API tətbiqi ilə, indi brauzer bağlandıqda da istifadəçilərimizə Push bildirişləri göndərə bilərik.
  • HTTPS tətbiq edin
  • Doğma tətbiqlərə bənzər istifadəçilərin ekranlarına dərhal yükləyən bir tətbiq qabığı (və ya tətbiq qabığı) memarlığından istifadə edin.

Əslində PWA, JavaScript-də yazılmış vahid səhifə tətbiqidir. Offline rejimi, Ev ekranına əlavə et və Veb Push bildirişləri hamısı xidmət işçilərindən istifadə etməklə həyata keçirilir.

Proqressiv Veb Tətbiqləri və cavabdeh Veb Dizayn

Proqressiv Veb Tətbiqləri Veb Veb Dizaynı ilə qarışdırılmamalıdır. Proqressiv Veb Tətbiqləri müxtəlif ekran ölçülərinə uyğunlaşa bildikləri üçün cavab qabiliyyətinə malikdir, amma onların bənzərsiz dəyər təklifi, onları tətbiq kimi edən xüsusiyyətlərdir.

Son illərdə, RWD mobil veb həllər üçün həll yolu oldu, lakin Forrester Keçən ilki hesabat, RWD-nin doyma səviyyəsinə çatdığını – rəqəmsal təcrübə istehsalçılarının 87% -i bunu qəbul etdiyini və vebdə tətbiqetmələrə bənzər təcrübələrə üstünlük vermək üçün müştəri gözləntilərində bir dəyişiklik gözümüzün önündə baş verdiyini müəyyən etdi..

PWAs mobil veb istifadəçilərini cəlb etmək üçün bir həlldir?

Yüksək keyfiyyətli Proqressiv Veb Tətbiqinin inanılmaz faydaları var, istifadəçiləri sevindirməyi, nişanlanmağı və danışıqları artırmağı asanlaşdırır. Metrikləri yaxşılaşdırmaq üçün Progressive Web Apps-ı uğurla istifadə edən bir neçə şirkət, xüsusən e-ticarət sənayesi nümunələri var, onlardan bir çoxu Google İnkişaf Etdiricilərinin saytında yer almışdır.

  • Məsələn, Alibaba.com sürətli, effektiv və etibarlı mobil veb təcrübəsinə səbəb olan bir PWA qurdu. Yeni strategiya 76% artım təslim etdi brauzerlər arasında ümumi dönüşümdə və Əlavə etdən Ev ekranına dörd qat daha yüksək qarşılıqlı əlaqə.
  • Başqa bir istifadə vəziyyətində, OLX, Əlavə etmə və Push bildirişlərindən istifadə edərək mobil veb istifadəçilərini yenidən cəlb etmək istədi. Onlar nişan 250% artdı və digər ölçüləri də yaxşılaşdırdı: səhifənin interaktiv olma müddəti 23% azaldı və sıçrayış nisbətləri 80% azaldı. Pul qazanma dərəcəsi (CTR) 146% artmaqla da yaxşılaşmışdır.

Mobil veb tətbiqetmənin mütərəqqi olduğunu necə bilirik??

Əvvəla, mütərəqqi olmaq bir Bəli və ya Xeyr deyil, bir hesabdır və deyilən bir Chrome plugin var Mayak bu hesabı ölçmək üçün istifadə edə biləcəyinizi. Bu plugin istifadəsi həqiqətən asandır və bütün PWA imkanları ilə bir hesabat yaradır, əsasən veb saytın tam mütərəqqi olması üçün nəyimizi dəyişdirməli olduğumuzu bildirməyə imkan verir. WooCommerce PWA-nın alfa versiyası üçün Lighthouse-a 91 bal vurmağı bacardıq.

Mayak

PWA necə qura bilərik?

Google’nın PWA standartında Progressive Veb Tətbiqləri yaratmaq üçün hər hansı bir texnologiya və ya çərçivə yoxdur. Yoxlama siyahısına əməl edildiyi müddətcə bir şey ola bilər. Bir çox PWA istifadə edərək tikilir Bucaqlı JS və ya Reaksiya verin, hazırda ən populyar JavaScript çərçivələridir.

reaksiya verin

Həm AngularJS, həm də React üstünlükləri var:

  • Bucaqlı / İonik birləşməsi bu gün olduqca məşhurdur. İonik, əvvəlcə mobil tətbiqetmələr üçün qurulmuş, lakin Progressive Web Apps və hətta masaüstü tətbiqetmələrə qədər genişlənmiş əla bir çərçivədir.
  • Reaksiya həqiqətən intuitivdir və anlamaq asandır. Varsayılan olaraq PWA dəstəyi ilə təmin olunan böyük bir qazan qazanından, yaratmaq-reaksiya tətbiqetməsindən faydalanır.

Bu ikisindən başqa, VueJS də populyarlıq qazanır.

Sonra, WordPress və WooCommerce-in üstündə React ilə qurulmuş bir elektron ticarət tətbiqindən bəzi kod nümunələrini görəcəyik. REST API.

Bu yazılarla da maraqlana bilərsiniz:

  • Ən yaxşı bucaqlı idarəetmə paneli şablonları

WooCommerce REST API-ni anlamaq

Elektron ticarət tətbiqi qurmağa gəldikdə, lazım olan ilk şey məlumatı əldə edə biləcəyimiz bir API-dir. Xoşbəxtlikdən, REST API-nin nüvəyə daxil edilməsi WordPress-in arxa plan kimi istifadə edilməsinə qapı açdı. Bundan əlavə, e-ticarət tətbiqləri üçün REST API-dən istifadə edə bilərik populyar WooCommerce plugin.

WooCommerce də NPM paketinə malikdir (WooCommerce API) API zəngləri etmək üçün, lakin təəssüf ki, bu paket istəkləri təsdiqləmək üçün həm istehlak açarı, həm də istehlakçı sirri tələb edir. Bir önlük tətbiqində istehlakçı sirrindən istifadə etsək təhlükəsizlik məsələmiz olacaq.

Ayrıca, WooCommerce idarəetmə bölməsindən açarlar yaratdıqda, marşrut səviyyəsində icazələri təyin etmək mümkün deyil, məsələn məhsullara baxmaq və sifariş üçün giriş yazmaq imkanı verir.

Beləliklə, WordPress plaginimizdə məhdud bir API dəsti nöqtəsinə giriş imkanı verən bir proksi yaratmalı olduq. Baza olaraq, WooCommerce REST API PHP sarımından istifadə etdik, aşağıdakı nümunədə gördüyünüz kimi:

Kodu bax Gist.

İstehlak açarı və gizli istifadə edərək əvvəlcə WooCommerce müştərisini işə salırıq. İkinci və üçüncü metodlar məhsulları adlandırılan xüsusi bir marşrut yaratmaq və məhsullar / kateqoriyalara WooCommerce API-dən son nöqtəni göstərən xəritə yaratmaqdır..

Bu şəkildə oxu kateqoriyalarına və məhsullarına giriş əldə edə bilərik, ancaq sifariş üçün yalnız yaradılan əməliyyata icazə verə bilərik.

Dörd sadə addımda yeni reaksiya tətbiqini yaratmaq

API qurduqdan sonra React tətbiqetməmizdə işə başlaya bilərik. Quraşdırıldıqdan sonra NodeJSNPM qlobal olaraq, default olaraq PWA dəstəyi olan React JS tətbiqetməsini tez bir zamanda yaratmaq üçün reaksiya yaratmaq proqramı istifadə edə bilərsiniz.

  1. Yüklemek NodeJS və NPM qlobal olaraq
  2. Yüklemek yaratmaq-reaksiya-app qazanxana
    npm quraşdırma-reaksiya-app -g quraşdırın
  3. Yarat yeni React tətbiqi
    yaratmaq-reaksiya-app mənim-app
  4. Tətbiqə başlayın
    cd my-app & npm başlanğıc

Aşağıda yaratmaq-reaksiya-app tərəfindən yaradılan tətbiqin bir görüntüsüdür, ehtiyac duyduğumuz hər şey var, buna görə canlı yenidən yükləmə daxil olmaqla kodlaşdırmaya başlaya bilərik

nümunə reaksiya tətbiqi

Yeni bir tətbiqə başladıqda yadda saxlamaq lazım olan bir neçə şey var:

1) Tətbiq sənədlərinin təşkili
Tətbiqin ən yaxşı quruluşu barədə bir neçə yaxşı dərs var. Qovluqları öz-özünə seçirəm, çünki daha yaxşı genişlənməyə imkan verir. A tapa bilərsiniz həqiqətən yaxşı izah burada.
2) Linters və kodlaşdırma standartları
Kodlaşdırma standartları onlara öyrəşməsəniz əsəbi ola bilər, amma bu addımı atmayın. Istifadə edilməmiş bağlantıları təmizləməyə kömək edir və məlumatların komponent səviyyəsində düzgün təsdiqləndiyinə əmin olurlar. Bundan əlavə, kodunuzu avtomatik olaraq formatlayan daha yaxşı bir redaktor plaginini quraşdırarsanız, kodlaşdırma standartlarından istifadə edərək külək olur. Standartın özünə gəlincə, populyar olanı üstün tuturam Airbnb tərəfindən yaradılmışdır.
3) Kiçik komponentlər
Komponentlər fayllarının kiçik olması onları sınamağı və idarə etməyi asanlaşdırır. Kodu bir komponentdə yazmağa başlaya bilərsiniz və böyüdükdən sonra onu daha kiçik hissəyə bölün. UI / UX komponentləri üçün React ilə uyğun bir neçə kitabxana var, məsələn UI materialı, Semantik UI və ya hətta Çəkmə, bir neçə misal göstərmək üçün.

Bu kitabxanalarda ızgaralar, menyular, kartlar, düymələr və sair kimi hazır komponentlər dəsti var. Əsas Semantik UI elementləri ilə qurulmuş bir elektron ticarət tətbiqi interfeysinə bir nümunə:

Kategoriyaların siyahısını, məhsulların siyahısını və yan menyunu görə bilərsiniz. Kodun içinə girək – belə bir nümunə yaratmaq üçün React istifadə etməyin nə qədər asan olduğunu görəcəksiniz.

nümunə e-ticarət tətbiqi

ReactJS-ə dalış

Aşağıda, API-dən bir sıra məhsul kateqoriyalarını oxuyan Reaktiv bir komponentdir. Komponentin vəziyyəti boş kateqoriyalar siyahısı ilə başlanır. Göstərmədən əvvəl React tərəfindən avtomatik olaraq adlandırılan komponentWillMount metodunda kateqoriyanı almaq istəyi verir və cavab aldıqdan sonra dövlətə əlavə edirik:

Kodu bax Gist.

Gördüyünüz kimi, kateqoriyalar qəbul edildikdə göstərmə metoduna zəng etmək lazım deyil, React bizim üçün qayğı göstərir və komponenti yenidən təqdim edir. Göstərmə metodu, kateqoriyalar məlumatlarını qəbul edən və bu kimi görünən başqa bir xüsusi komponenti CategoriesList adlandırır:

Kodu bax Gist.

Yuxarıda göstərilən komponent bir sürüşmə şəklində aldığı kateqoriyalar siyahısı üzərində təkrarlanır və vahid kateqoriya elementini göstərmək üçün KateqoriyaCard adlı başqa bir xüsusi komponenti çağırır..

Bütün bu komponentlər aralarında rekvizit ötürərək əlaqə qurur. Əsas kateqoriyalar komponenti API-ni çağırır və kateqoriyaların siyahısını kateqoriyalar siyahısına keçirir və bu da öz növbəsində bir kateqoriya təfərrüatlarını Kateqoriya Kartlarına ötürür..

Redux istifadə edərək qlobal tətbiq vəziyyətini idarə etmək

Yuxarıda göstərilən yanaşma ilə problem, bəzən əlimizdə ən yüksək tətbiq səviyyəsində idarə olunması lazım olan məlumatlar var, məsələn, alış-veriş səbətinə əlavə olunan məhsulların siyahısı. Məhsulların sayı başlıq çubuğundan alış-veriş səbətinin nişanında göstərilir, lakin bunlar da yoxlanış səhifəsində siyahı şəklində göstərilir.

Bütün bu məlumatları ana tətbiq komponentinə əlavə etsək, daha böyük tətbiqlərdə idarə etmək çox çətin olacaq. Kimi kitabxanaların olduğu yerdir ReduxJs daxil olun. Sadəcə aydınlaşdırmaq üçün Redux-un hər hansı bir JavaScript çərçivəsi ilə birlikdə istifadə oluna bilər, reaksiya üçün xüsusi deyil.

Ayrıca, Redux-dan istifadə o demək deyil ki, komponent səviyyəsində dövlət və ya rekvizitlərdən istifadə edə bilmərik. Redux yalnız tətbiq səviyyəsində mənalı olan məlumatların saxlanması üçün istifadə edilməlidir.

Görün, API-dən məhsulları necə oxuya biləcəyimizi və kateqoriyalara ehtiyacımız olanlara bənzər bir siyahıda göstərə bilək, amma bu dəfə Redux-dan istifadə edək. Birincisi, əsas tətbiq komponentimizi qlobal bir mağazaya qataraq Redux ilə əlaqə yaratmalıyıq:

Kodu bax Gist.

Bu nümunədə, qlobal tətbiqlər mağazasında kateqoriyaların siyahısı və Redux-dan “CombReducers” metodu ilə birlikdə birləşdirilmiş məhsulların siyahısı olacaqdır..

Daha sonra, tip bir xüsusiyyətə sahib olmalı olan obyektləri geri qaytaran çox sadə funksiyaları olan Redux hərəkətlərini təyin etməyə davam edirik. JS asinxron olduğundan, iki hərəkətə ehtiyac duyacağıq: biri sorğu göndərildikdə siqnal vermək üçün, digəri cavab alındıqda siqnal vermək üçün. Bütün hərəkətlər bu hərəkətlərin nə vaxt baş verəcəyini biləcək.

Aşağıda, həmçinin fetchProducts adlı bir funksiya əlavə etdik. Gördüyünüz kimi, bu funksiya:

  • tələb məhsulları göndərir,
  • məhsulları almaq üçün API çağırır,
  • bir nəticə alındıqda ReceProducts hərəkətini göndərir.

Kodu bax Gist.

Tətbiq vəziyyətini dəyişdirmək üçün Redux adlı bir ad əlavə edəcəyik "reduktor". Dəyişdirici yalnız müəyyən hərəkətləri dinləyən və qlobal vəziyyətin bir hissəsini dəyişdirən bir funksiyadır, bu halda məhsulların siyahısı.

Bu redüktör bir sorğu məhsulları qəbul edərkən heç bir şey etmir, həmişə mövcud vəziyyətini qaytarır. Alınan məhsulların hərəkəti üçün reduktor ona ötürülən məlumatları qaytarır, bu halda məhsulların siyahısı olacaqdır.

Kodu bax Gist.

Şeyi bağlamaq üçün bu məhsullardan və yeni məhsullar komponentində reduktordan istifadə edirik.

Kodu bax Gist.

Bu komponent Redux-dan qoşulma metoduna bükülmüşdür və yalnız fetchProducts-ı öz komponentiWillMount metodu ilə göndərir. Ayrıca, tərkib hissəsi məhsullar siyahısına daxildir, ancaq gördüyünüz kimi məhsullar siyahısı komponentləri birbaşa məhsul məlumatlarını almır. Məhsul siyahısının komponenti Redux-u da istifadə edərək qlobal tətbiqetmə vəziyyəti ilə birbaşa bağlıdır.

Bu yolla məhsullar məlumatlarını birbaşa tətbiqetmə mağazasından əldə edə bilər, məhsullar siyahısında təkrarlaya bilər və vahid məhsul elementi göstərmək üçün ProductCard komponentindən istifadə edə bilər..

Kodu bax Gist.

İndiyə qədər məlumatların necə göstəriləcəyinə dair bəzi nümunələr gördük, ancaq istifadəçi qarşılıqlı əlaqəsini əlavə etmək istəsək, məsələn, məhsulu səbətə əlavə etmək?

Bu vəziyyətdə istifadəçi tıkladığında "Səbətə əlavə edin" düyməsini basaraq, qlobal tətbiq vəziyyətini dəyişdirəcək bir hərəkət göndərəcəyik. Səbət məhsullarının sayını göstərən başlıq çubuğu Redux ilə birləşdiriləcəkdir. Tətbiqin səbətində saxlanan məhsulların sayını hesablayır və özünü yeniləyir.

səbət nümunəsinə əlavə edin

Tətbiqi WordPress ilə əlaqələndirmək

Bunların hamısı işə başlamaq üçün əsas nümunələrdir və ehtimal ki, bu proqramı WordPress ilə necə bağlaya biləcəyimizi düşünürsünüz.

Yaxşı, bir alt domendə tətbiqetməyə sahib ola bilərik və onu API-yə bağlamağa icazə verə bilərik və ya onu bir WordPress mövzusu kimi istifadə edə bilərik – sadəcə bir JavaScript / CSS sənədini yükləyəcək bir index.php faylı ilə çox təməl bir mövzu yaratmaq deməkdir. Yaratmaq-reaksiya tətbiq etmə şablonu tətbiqin qurulmasını yaratmaq üçün əmrləri ehtiva edir, buna görə istehsal sənədlərini dərhal əldə edə bilərik.

Kodu bax Gist.

Xidmət işçilərinin harada istifadə edəcəyi

Oflayn rejimdə istifadəçilər offline olduqda da tətbiq qabığını göstərəcək bir xidmət işçisi əlavə edə bilərik. Xidmət işçisi yalnız brauzerdə özünü qeyd edən bir JavaScript sənədidir.

Kodu bax Gist.

Offline rejimi üçün istifadə edə biləcəyiniz bir neçə strategiya var, məsələn əvvəl şəbəkə və ya əvvəldən önbelleğe, bu barədə Google-da oxuya bilərsiniz. oflayn kitabça.

Tətbiqin qabığını koplaşdırmaq, şəbəkə bağlantımız olanda da faydaları var, çünki tətbiq daha sürətli yüklənəcəkdir.

Daha da irəli getmək və API-dən gələn məlumatların önbelleğine başlamaq istəyirsinizsə, redux-persist kimi NPM paketlərindən istifadə edə və brauzerinizin yerli yaddaşından məlumatları çıxartmaq üçün tətbiqinizi dəyişdirə bilərsiniz..

Veb push bildirişləri üçün nəzərdən keçirməyi məsləhət görürük Bir Siqnal pulsuz WordPress plugin. Bu plugin həssas mövzularla da işləyir, buna görə mütləq dərhal yoxlanmalısınız.

Sonrakı?

Bacararsan tapmaq yuxarıda göstərilən WooCommerce PWA üçün demo.

Biz artıq beta versiyası üzərində işləyirik və burada yol xəritəmizin yalnız bir hissəsi var:

  • Offline rejimi imkanlarını əlavə edin
  • Təkan bildirişləri əlavə edin
  • Yoxlama prosesini yekunlaşdırın

Töhfə vermək və ya öz ehtiyaclarınız üçün dəyişdirmək istəyirsinizsə, e-ticarətdə mütərəqqi veb tətbiqinin alfa versiyasını tapa bilərsiniz GitHub-da.

PWA demo

Proqressiv Veb Tətbiqləri və mobil WordPress mənzərəsindəki rolu barədə nə düşünürsünüz? Növbəti layihənizlə bu yolu izləməyi düşünürsünüz?

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Layihə və təqdimat Karol K.

Müəllif haqqında: Alexandra Anghel həmtəsisçi və CTO şirkətidir Appticles.com – Mütərəqqi veb tətbiqləri yaratmaq üçün bir platforma. Platformanın bir uzantısı olaraq Appticles bir WordPress plugin (WordPress Mobil Paket) 1M yükləmələri üstələmişdir. Alexandra tam yığım hazırlayıcısıdır. İki iş sürətləndiricisində iştirak etdi – Startupbootcamp (Copenhagen / Danimarka) və Prosper Women Accelerator (Sent-Luis / ABŞ). 2017-ci ilin əvvəlində Codette-yə həmtəsisçi olaraq qatıldı.

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