Искате ли да изградите прогресивни уеб приложения, базирани на WordPress и WooCommerce? Ето как (без примери за код)

Както вероятно вече можете да кажете, този пост е малко на "напреднал" страна, но той се занимава с тема, която е много интересна и представя нов клон за нас, който да следваме в целия този първи път за мобилни устройства за нашите уебсайтове и / или приложения.


Нещото, което наричаме "отзивчив уеб дизайн" е с нас известно време и на този етап от играта повечето разработчици / уебсайтове / уеб-инструменти вече са интегрирали изцяло принципите на нея. Но това е крайна игра на "удобна за мобилни устройства"? Или може би е само началото.

Е, Google смята, че това е последното. И ето Прогресивни уеб приложения!

Публикацията, която ще прочетете, е друго наше издание "вътре в къщата на Dev" инициатива (тук е предишната). Той беше съставен от Александра Ангел от Appticles.com.

Въведете Александра:

Прогресивни уеб приложения за WordPress и WooCommerce

Разбиране на прогресивни уеб приложения

Прогресивните уеб приложения (PWA) са опит, който съчетава най-доброто от мрежата и най-доброто от приложенията. Приложенията за собствени магазини за приложения са станали изключително популярни в миналото чрез функции като push известия, работа офлайн, плавни анимации и преходи, зареждане на началния екран и т.н..

Мобилните уеб приложения са JavaScript приложения, които работиха в браузъра и се опитаха да внесат някои от родните функции на приложенията в мрежата, но не успяхме да предоставим push известия например. С мобилното въвеждане на нови уеб API, Progressive Web Apps вече преодоляват пропастта, осигурявайки пълното подобно на приложението изживяване в мобилната мрежа.

Google ги описва като:

  • Надежден – Заредете се незабавно
  • Бърз – Бързо реагира на потребителските взаимодействия
  • привлекателен – Поведение като родно приложение

За да постигнете всички тези точки, прогресивно уеб приложение трябва да има следните възможности:

  • Работете офлайн или при лоши мрежови условия
  • Уеб приложение за инсталиране на банери или Добавяне на начален екран
  • Използвайте известия чрез уеб Push. С въвеждането на Web Push API вече можем да изпращаме Push Известия до нашите потребители, дори когато браузърът е затворен.
  • Внедрете HTTPS
  • Използвайте архитектура на приложения (или обвивка на приложението), която незабавно се зарежда на екраните на потребителите, подобно на родните приложения.

По същество PWA е приложение за единична страница, написано на JavaScript. Офлайн режим, Добавяне на начален екран и известия чрез Интернет Push се осъществяват с помощта на сервизни работници.

Прогресивни уеб приложения срещу отзивчив уеб дизайн

Прогресивните уеб приложения не трябва да се бъркат с отзивчивия уеб дизайн. Прогресивните уеб приложения имат отзивчиви възможности, защото могат да се адаптират към различни размери на екрана, но уникалното им предложение са функциите, които ги правят подобни на приложения.

През последните години RWD е идеалното решение за мобилни уеб решения, но a Forrester доклад от миналата година установи, че RWD е достигнал до насищане – 87% от производителите на дигитален опит го приемат – и че промяна в очакванията на клиентите да предпочитат подобен на приложения опит в мрежата се случва пред очите ни.

PWA са решение за ангажиране на мобилни потребители в мрежата?

Изграждането на висококачествено прогресивно уеб приложение има невероятни ползи, което улеснява удоволствието на потребителите, увеличаване на ангажираността и увеличаване на реализациите. Има няколко примера за компании, по-специално от индустрията за електронна търговия, които успешно използват Progressive Web Apps за подобряване на показателите си, много от тях са изброени на уебсайта за програмисти на Google.

  • Например Alibaba.com създаде PWA, което доведе до бързо, ефективно и надеждно мобилно изживяване в мрежата. Новата стратегия доведе до 76% увеличение общо реализации в браузъри и четири пъти по-висока степен на взаимодействие от Добавяне към начален екран.
  • В друг случай на използване, OLX искаше да ангажира отново потребителите на мобилни мрежи, като използва Добавяне на начален екран и Push Notifications. Те увеличена ангажираност с 250% и подобри и други показатели: времето, докато страницата стане интерактивна, спадна с 23%, със съответно 80% спад в процента на отпадане. Монетизацията също се подобри, като честотата на кликване (CTR) нараства с 146%.

Как да разберем, че мобилното уеб приложение е прогресивно?

На първо място, прогресивността е резултат, а не Да или Не, и има приставка за Chrome, наречена фар които можете да използвате за измерване на този резултат. Този плъгин е наистина лесен за използване и генерира отчет с всички PWA възможности, по принцип той ни дава информация какво трябва да променим, за да може уеб приложението да стане напълно прогресивно. За нашата алфа версия на WooCommerce PWA успяхме да постигнем 91 резултат на Фара.

фар

Как можем да изградим PWA?

Стандартът на PWA на Google не съдържа никаква конкретна технология или рамка за създаване на прогресивни уеб приложения. Може да бъде всичко, стига да се спазва контролния списък. Много PWAs са изградени с помощта Ъглова JS или реагирам, които са най-популярните рамки на JavaScript в момента.

реагирам

И AngularJS, и React имат своите предимства:

  • Ъгловата / йонийски комбинация е доста популярна в днешно време. Ionic е страхотна рамка, която първоначално е била създадена за мобилни приложения, но се е разширила до прогресивни уеб приложения и дори настолни приложения.
  • React е наистина интуитивен и лесен за разбиране. Той се възползва от страхотно котло, create-react-app, което по подразбиране се предлага с PWA поддръжка.

Освен тези две, VueJS също набира популярност.

След това ще видим някои образци на код от приложение за електронна търговия, създадено с React на върха на WordPress и WooCommerce REST API.

Може да се заинтересувате и от тези статии:

  • Най-добри ъглови шаблони на таблото за администратор

Запознаване с REST API на WooCommerce

Когато става въпрос за изграждане на приложение за електронна търговия, първото нещо, от което се нуждаем, е API, от който можем да извлечем данните. За щастие включването на REST API в ядрото отвори вратата за използване на WordPress като бекенд. В допълнение, за приложенията за електронна търговия можем да използваме REST API от популярна приставка за WooCommerce.

WooCommerce също има пакет NPM (API на WooCommerce) за извършване на обаждания в API, но за съжаление този пакет изисква както потребителския ключ, така и потребителската тайна, за да удостоверява заявките. Ще имаме проблем със сигурността, ако използваме потребителската тайна в приложение за интерфейс.

Също така, когато създавате ключове от администраторския раздел на WooCommerce, не е възможно да се определят разрешения на ниво маршрут, например да се разреши преглед на достъпа до продуктите и да се запише достъп за поръчки.

И така, трябваше да създадем прокси в нашия WordPress плъгин, който позволява достъп до ограничен набор от крайни точки на API. Като основа използвахме обвивката PHP на WooCommerce REST API, както можете да видите в примера по-долу:

Вижте кода на същност.

Първо инициализираме клиента на WooCommerce, използвайки потребителския ключ и тайна. Вторият и третият метод са създаване на персонализиран маршрут, наречен продукти и картографиране на маршрута до крайната точка на продуктите / категориите от API на WooCommerce.

По този начин можем да разрешим достъп до категории и продукти за четене, но разрешаваме само операцията за създаване на поръчка.

Създаване на ново приложение React в четири прости стъпки

След като настроим API, можем да започнем да работим върху нашето приложение React. След инсталирането NodeJS и NPM в световен мащаб можете да използвате пакета create-react-app за бързо генериране на приложение React JS, което по подразбиране има PWA поддръжка.

  1. Инсталирай NodeJS и NPM в световен мащаб
  2. Инсталирай създадете реагира приложенията стереотипния
    npm инсталирайте create-react-app -g
  3. Генериране ново приложение React
    Създай-реагирай-app my-app
  4. Стартирайте приложението
    CD моето приложение & npm старт

По-долу е екранна снимка на приложението, което се генерира от create-react-app, има всичко необходимо, така че можем да започнем кодиране, включително презареждане на живо:

приложение за примерна реакция

Трябва да имате предвид няколко неща, когато стартирате ново приложение:

1) Организиране на файлове с приложения
Има няколко добри уроци за това как да структурирате най-добре приложението. Предпочитам папки по функция, защото това позволява по-голяма мащабируемост. Можете да намерите наистина добро обяснение тук.
2) Линтери и стандарти за кодиране
Стандартите за кодиране могат да бъдат досадни, ако не сте свикнали с тях, но не пропускайте тази стъпка. Те помагат за изчистване на неизползваните зависимости и гарантират, че данните са правилно валидирани на ниво компонент. Освен това, ако инсталирате по-красив плъгин за редактор, който автоматично форматира вашия код, използването на стандарти за кодиране се превръща в лесно. Що се отнася до самия стандарт, предпочитам популярния създаден от Airbnb.
3) Малки компоненти
Запазването на файлове с компоненти е малко по-лесно за тестване и управление. Можете да започнете да пишете код в един компонент и след като стане по-голям, да го разделите на по-малък компонент. За компоненти на UI / UX има няколко библиотеки, които са съвместими с React, като например Материален потребителски интерфейс, Семантичен потребителски интерфейс или дори за първоначално зареждане, само за да дам няколко примера.

Тези библиотеки съдържат набор от готови компоненти, като мрежи, менюта, карти, бутони и т.н. Ето пример за интерфейс на приложение за електронна търговия, изграден с основни елементи Semantic UI:

Можете да видите списък с категории, списък с продукти и странично меню. Нека се потопим в кода – ще видите колко лесно е да използвате React за създаване на такъв пример.

примерно приложение за електронна търговия

Гмуркане в ReactJS

По-долу е компонент React, който чете набор от категории продукти от API. Състоянието на компонента се инициализира с празен списък от категории. В метода компонентWillMount, който автоматично се извиква от React преди рендериране, ние отправяме заявка за извличане на категориите и ги добавяме в състояние след получаване на отговора:

Вижте кода на същност.

Както можете да видите, не е необходимо да извикваме метода на изобразяване, когато категориите са получени, React се грижи за това за нас и рендерира компонента. Методът за изобразяване просто връща друг персонализиран компонент, наречен CategoriesList, който получава данните за категориите и изглежда така:

Вижте кода на същност.

Горният компонент повтаря списъка на категориите, които получава като опора и извиква друг персонализиран компонент, наречен CategoryCard, за да представи един елемент от категорията.

Всички тези компоненти комуникират чрез предаване на подпори между тях. Основният компонент Категории извиква API и изпраща списък с категории към CategoriesList, който от своя страна предава подробности за категорията в категориите карти.

Управление на глобалното състояние на приложението с помощта на Redux

Проблемът с горния подход е, че понякога имаме данни, които трябва да се управляват на най-горното ниво на приложение, например списък на продуктите, които бяха добавени в пазарската количка. Броят на продуктите е показан в иконата на кошницата от лентата на заглавието, но те също се показват като списък на страницата за плащане.

Ако добавим всички тези данни в компонента на родителското приложение, ще стане много трудно да се управлява при по-големи приложения. Това е мястото, където библиотеки като ReduxJs влезте. Само за да поясня, Redux може да се използва в комбинация с всяка JavaScript рамка, не е специфичен за React.

Освен това използването на Redux не означава, че не можем да използваме състояние или реквизити на ниво компонент. Redux трябва да се използва само за запазване на данни, което има смисъл на ниво приложение.

Нека да видим как можем да четем продукти от API и да ги представим в списък, подобно на това, което ни е необходимо с категории, но този път използвайки Redux. Първо, трябва да осъществим връзката с Redux, като увием основния ни компонент на приложението в глобален магазин:

Вижте кода на същност.

В този пример глобалният магазин за приложения ще съдържа списък от категории и списък с продукти, които са обединени заедно по метода на комбинирания редуктор от Redux.

След това продължаваме, като дефинираме Redux действията, които са много прости функции, които връщат обекти, които трябва да съдържат свойство тип. Тъй като JS е асинхронен, ще ни трябват две действия: едно за подаване на сигнал при изпращане на заявка и друго за сигнализиране, когато е получен отговор. Цялото приложение ще знае кога се извършват тези действия.

По-долу сме добавили и функция, наречена fetchProducts. Както можете да видите, тази функция:

  • изпраща действието на продуктите със заявка,
  • извиква API за извличане на продукти,
  • изпраща действието receProducts, когато се получи резултат.

Вижте кода на същност.

За да променим състоянието на приложението, ще добавим така наречения Redux "редуктор". Редукторът е просто функция, която слуша определени действия и променя част от глобалното състояние, в случая списъкът с продукти.

Този редуктор не прави нищо, когато получава действие на заявка за продукти, той винаги връща текущото състояние. За действието получаване на продукти редукторът връща данните, които са му предадени, в този случай това ще бъде списък с продукти.

Вижте кода на същност.

За да завършим нещата, използваме тези действия и редуктор в нов компонент Продукти.

Вижте кода на същност.

Този компонент е обвит в метода на свързване от Redux и просто изпраща fetchProducts в неговия метод компонентWillMount. Също така, компонентът включва списък с продукти, но както можете да видите, компонентът в списъка с продукти не получава директно данните за продуктите. Това е така, защото компонентът на списъка с продукти е пряко свързан с глобалното състояние на приложението, използвайки също Redux.

По този начин той може да осъществява достъп до данните за продуктите директно от магазина за приложения, да повтаря списъка с продукти и да използва компонент ProductCard, за да изобрази един продукт.

Вижте кода на същност.

Досега видяхме някои примери за това как да показваме данни, но какво става, ако искаме да добавим взаимодействие с потребителя, например добавяне на продукт в количката?

В този случай, когато потребителят кликне върху "Добави в кошницата" бутон, ще изпратим действие, което ще промени глобалното състояние на приложението. Заглавната лента, която показва броя продукти на количката, ще бъде свързана с Redux. Той ще отчита броя на продуктите, запазени в кошницата на приложението, и ще се актуализира съответно.

добавете в пример за количка

Свързване на приложението с WordPress

Това са всички основни примери, за да започнете и вероятно се чудите как точно можем да свържем това приложение с WordPress.

Е, можем да хостваме приложението в поддомейн и да го оставим да се свърже с API или можем да го използваме като тема на WordPress – което означава създаване на много основна тема с файл index.php, който просто ще зареди JavaScript / CSS файл. Кокетната плоча create-react-app включва команди за създаване на изграждането на приложението, така че можем веднага да получим производствените файлове.

Вижте кода на същност.

Къде да използваме сервизни работници

За офлайн режим можем да добавим сервизен работник, който ще показва обвивката на приложението дори когато потребителите са офлайн. Сервизният работник е само JavaScript файл, който се регистрира в браузъра.

Вижте кода на същност.

Има няколко стратегии, които можете да използвате за офлайн режим, като например първо мрежата или кеш, и можете да прочетете за тях в Google офлайн готварска книга.

Кеширането на черупката на приложението има предимства дори когато имаме мрежова връзка, защото приложението ще се зареди много по-бързо.

Ако искате да отидете още по-далеч и да започнете кеширане на данните, идващи от API, можете да използвате NPM пакети като redux-persist и да модифицирате приложението си, за да запазите / извлечете данни от локалното хранилище на браузъра.

За известия чрез натискане в мрежата препоръчваме да разгледате Един безплатен WordPress плъгин без сигнал. Този плъгин работи и с отзивчиви теми, така че определено трябва да го проверите веднага.

Какво следва?

Можеш намери демонстрация за горната WooCommerce PWA тук.

Вече работим върху бета версията и ето само част от нашата пътна карта:

  • Добавете възможности за офлайн режим
  • Добавете push известия
  • Финализирайте процеса на касата

Ако искате да го допринесете или персонализирате според собствените си нужди, можете да намерите алфа версията на прогресивното уеб приложение за електронна търговия. на GitHub.

PWA демонстрация

Какво мислите за прогресивните уеб приложения и ролята, която те могат да имат в пейзажа на мобилния WordPress? Обмисляте ли да следвате този път със следващия си проект?

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление и представяне от Карол К.

За автора: Александра Ангел е съосновател и CTO в Appticles.com – платформа за изграждане на прогресивни уеб приложения. Като разширение на платформата, Appticles има приставка за WordPress (WordPress Mobile Pack), която надмина 1М изтеглянията. Александра е разработчик на пълен стек. Участва в два бизнес ускорители – Startupbootcamp (Копенхаген / Дания) и Accelerator за жени Prosper (Сейнт Луис / САЩ). В началото на 2017 г. тя се присъединява към Codette като съосновател.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map