Vous voulez créer des applications Web progressives basées sur WordPress et WooCommerce? Voici comment (avec des exemples de code)

Vous voulez créer des applications Web progressives basées sur WordPress et WooCommerce? Voici comment (avec des exemples de code)

Vous voulez créer des applications Web progressives basées sur WordPress et WooCommerce? Voici comment (avec des exemples de code)
СОДЕРЖАНИЕ
02 июня 2020

Comme vous pouvez probablement déjà le dire, cet article est un peu "Avancée" côté, mais il aborde un sujet qui est très intéressant et présente une nouvelle branche que nous devons suivre sur l’ensemble de cette voie d’abord mobile pour nos sites Web et / ou applications.


La chose que nous appelons "site Web adaptatif" est avec nous depuis un certain temps, et à ce stade du jeu, la plupart des développeurs / sites web / outils web en ont déjà pleinement intégré les principes. Mais est-ce la fin du jeu de "adapté aux mobiles"? Ou peut-être que ce n’est que le début.

Eh bien, Google pense que c’est le dernier. Et à venir Progressive Web Apps!

Le message que vous vous apprêtez à lire est une autre édition de notre "à l’intérieur de la maison de développement" (voici la précédente). Il a été élaboré par Alexandra Anghel de Apparticles.com.

Entrez Alexandra:

Applications Web progressives sur WordPress et WooCommerce

Comprendre les applications Web progressives

Les applications Web progressives (PWA) sont des expériences qui combinent le meilleur du Web et le meilleur des applications. Les applications natives de l’App Store sont devenues extrêmement populaires par le passé grâce à des fonctionnalités telles que notifications push, travail hors ligne, animations et transitions fluides, chargement sur l’écran d’accueil, etc..

Les applications Web mobiles sont des applications JavaScript qui fonctionnaient dans le navigateur et tentaient d’apporter certaines des fonctionnalités des applications natives sur le Web, mais n’étaient pas en mesure de fournir des notifications push par exemple. Avec l’introduction mobile de nouvelles API Web, les applications Web progressives comblent maintenant l’écart, offrant une expérience complète semblable à une application sur le Web mobile..

Google les décrit comme étant:

  • Fiable – Charger instantanément
  • Vite – Répondez rapidement aux interactions des utilisateurs
  • Engageant – Se comporter comme une application native

Pour atteindre tous ces points, une application Web progressive doit avoir les capacités suivantes:

  • Travailler hors ligne ou dans de mauvaises conditions de réseau
  • Bannières d’installation d’applications Web ou ajout à l’écran d’accueil
  • Utilisez les notifications Web Push. Avec l’introduction de l’API Web Push, nous pouvons désormais envoyer des notifications push à nos utilisateurs, même lorsque le navigateur est fermé.
  • Implémenter HTTPS
  • Utiliser une architecture de shell d’application (ou shell d’application) qui se charge instantanément sur les écrans des utilisateurs, similaire aux applications natives.

En substance, une PWA est une application à page unique écrite en JavaScript. Le mode hors ligne, les notifications Ajouter à l’écran d’accueil et Web Push sont tous implémentés à l’aide de techniciens de service.

Applications Web progressives et conception Web réactive

Les applications Web progressives ne doivent pas être confondues avec la conception Web réactive. Les applications Web progressives ont des capacités réactives car elles peuvent s’adapter à différentes tailles d’écran, mais leur proposition de valeur unique sont les fonctionnalités qui les rendent semblables à des applications.

Au cours des dernières années, RWD a été la solution incontournable pour les solutions Web mobiles, mais Forrester un rapport de l’année dernière a identifié que RWD a atteint la saturation – 87% des créateurs d’expérience numérique l’adoptent – et qu’un changement dans les attentes des clients pour préférer des expériences de type application sur le Web se déroule sous nos yeux.

Les PWA sont-ils la solution pour impliquer les utilisateurs Web mobiles?

La création d’une application Web progressive de haute qualité présente des avantages incroyables, ce qui facilite la satisfaction des utilisateurs, la croissance de l’engagement et l’augmentation des conversions. Il existe plusieurs exemples d’entreprises, en particulier de l’industrie du commerce électronique, qui ont utilisé avec succès des applications Web progressives pour améliorer leurs statistiques, beaucoup d’entre elles sont répertoriées sur le site Web des développeurs de Google..

  • Par exemple, Alibaba.com a construit une PWA qui a conduit à une expérience Web mobile rapide, efficace et fiable. La nouvelle stratégie a réalisé une augmentation de 76% du nombre total de conversions entre les navigateurs et un taux d’interaction quatre fois plus élevé de Ajouter à l’écran d’accueil.
  • Dans un autre cas d’utilisation, OLX souhaitait réengager les utilisateurs Web mobiles en utilisant Ajouter à l’écran d’accueil et Notifications push. Ils engagement accru de 250% et également amélioré d’autres paramètres: le temps nécessaire pour que la page devienne interactive a diminué de 23%, avec une baisse correspondante de 80% des taux de rebond. La monétisation s’est également améliorée, le taux de clics (CTR) augmentant de 146%.

Comment savons-nous qu’une application web mobile est progressive?

Tout d’abord, être progressif est un score, pas un oui ou un non, et il y a un plugin Chrome appelé Phare que vous pouvez utiliser pour mesurer ce score. Ce plugin est vraiment facile à utiliser et génère un rapport avec toutes les capacités PWA, en gros il nous permet de savoir ce que nous devons changer pour qu’une application web devienne pleinement progressive. Pour notre version alpha de la WooCommerce PWA, nous avons réussi à atteindre un score de 91 sur Lighthouse.

Phare

Comment pouvons-nous construire un PWA?

La norme PWA de Google ne répertorie aucune technologie ni aucun cadre particulier pour créer des applications Web progressives. Cela peut être n’importe quoi tant que la liste de contrôle est respectée. De nombreux PWA sont construits en utilisant JS angulaire ou Réagir, qui sont les frameworks JavaScript les plus populaires en ce moment.

réagir

AngularJS et React ont tous deux leurs avantages:

  • L’angulaire / Ionique combinaison est assez populaire de nos jours. Ionic est un excellent framework qui a été initialement conçu pour les applications mobiles, mais s’est étendu aux applications Web progressives et même aux applications de bureau.
  • React est vraiment intuitif et facile à comprendre. Il bénéficie d’une excellente plate-forme, create-react-app, qui vient avec le support PWA par défaut.

Outre ces deux, VueJS gagne également en popularité.

Ensuite, nous allons voir des exemples de code à partir d’une application de commerce électronique construite avec React au-dessus de WordPress et WooCommerce API REST.

Vous pouvez également être intéressé par ces articles:

  • Meilleurs modèles de tableau de bord d’administration angulaire

Comprendre l’API REST WooCommerce

Lorsqu’il s’agit de créer une application de commerce électronique, la première chose dont nous avons besoin est une API à partir de laquelle nous pouvons récupérer les données. Heureusement, l’inclusion de l’API REST dans le noyau a ouvert la porte à l’utilisation de WordPress comme backend. De plus, pour les applications de commerce électronique, nous pouvons utiliser l’API REST du plugin WooCommerce populaire.

WooCommerce dispose également d’un package NPM (API WooCommerce) pour effectuer des appels API, mais malheureusement, ce package nécessite à la fois la clé du consommateur et le secret du consommateur pour authentifier les demandes. Nous aurions un problème de sécurité si nous utilisions le secret du consommateur dans une application frontale.

De plus, lors de la création de clés à partir de la section d’administration de WooCommerce, il n’est pas possible de spécifier des autorisations au niveau de l’itinéraire, par exemple en autorisant l’accès à la vue pour les produits et l’accès en écriture pour les commandes..

Nous avons donc dû créer un proxy dans notre plugin WordPress, qui permet d’accéder à un ensemble restreint de points de terminaison API. Comme base, nous avons utilisé le wrapper PHP de l’API REST WooCommerce, comme vous pouvez le voir dans l’exemple ci-dessous:

Voir le code sur Essentiel.

Nous initialisons d’abord le client WooCommerce à l’aide de la clé et du secret du consommateur. Les deuxième et troisième méthodes créent un itinéraire personnalisé appelé produits et mappent cet itinéraire vers le point de terminaison produits / catégories à partir de l’API WooCommerce.

De cette façon, nous pouvons autoriser l’accès à la lecture des catégories et des produits, mais autoriser uniquement l’opération de création pour une commande.

Créer une nouvelle application React en quatre étapes simples

Une fois que nous avons configuré l’API, nous pouvons commencer à travailler sur notre application React. Après l’installation NodeJS et NPM globalement, vous pouvez utiliser le package create-react-app pour générer rapidement une application React JS prenant en charge PWA par défaut.

  1. Installer NodeJS et NPM globalement
  2. Installer créer-réagir-app passe-partout
    npm install create-react-app -g
  3. produire nouvelle application React
    créer-réagir-app my-app
  4. Lancer l’application
    cd my-app & npm start

Voici une capture d’écran de l’application générée par create-react-app, elle contient tout ce dont nous avons besoin, afin que nous puissions commencer à coder, y compris le rechargement en direct:

exemple d'application react

Il y a quelques éléments à garder à l’esprit lors du démarrage d’une nouvelle application:

1) Organisation des fichiers d’application
Il existe plusieurs bons didacticiels sur la meilleure façon de structurer l’application. Je préfère les dossiers par fonctionnalité, car cela permet une meilleure évolutivité. Vous pouvez trouver un vraiment bonne explication ici.
2) Linters et normes de codage
Les normes de codage peuvent être gênantes si vous n’y êtes pas habitué, mais Ne passez pas cette étape. Ils aident à nettoyer les dépendances inutilisées et s’assurent que les données sont correctement validées au niveau des composants. De plus, si vous installez un plugin d’éditeur plus joli qui formate automatiquement votre code, l’utilisation des normes de codage devient un jeu d’enfant. Quant au standard lui-même, je préfère le populaire créé par Airbnb.
3) Petits composants
Garder les fichiers des composants petits les rend plus faciles à tester et à gérer. Vous pouvez commencer à écrire du code dans un seul composant et, une fois qu’il est plus grand, le diviser en plus petit composant. Pour les composants UI / UX, il existe plusieurs bibliothèques compatibles avec React, telles que Interface utilisateur, UI sémantique ou même Amorcer, juste pour donner quelques exemples.

Ces bibliothèques contiennent un ensemble de composants prêts à l’emploi, tels que des grilles, des menus, des cartes, des boutons, etc. Voici un exemple d’une interface d’application de commerce électronique construite avec des éléments d’interface utilisateur sémantique de base:

Vous pouvez voir une liste de catégories, une liste de produits et un menu latéral. Plongeons-nous dans le code – vous verrez à quel point il est facile d’utiliser React pour créer un tel exemple.

exemple d'application e-commerce

Plonger dans ReactJS

Vous trouverez ci-dessous un composant React qui lit un ensemble de catégories de produits à partir de l’API. L’état du composant est initialisé avec une liste vide de catégories. Dans la méthode componentWillMount qui est automatiquement appelée par React avant le rendu, nous faisons une demande pour récupérer les catégories et nous les ajoutons à l’état après avoir reçu la réponse:

Voir le code sur Essentiel.

Comme vous pouvez le voir, nous n’avons pas besoin d’appeler la méthode de rendu lorsque les catégories sont reçues, React s’en charge pour nous et restitue le composant. La méthode de rendu renvoie simplement un autre composant personnalisé appelé CategoriesList qui reçoit les données des catégories et ressemble à ceci:

Voir le code sur Essentiel.

Le composant ci-dessus parcourt la liste des catégories qu’il reçoit comme accessoire et appelle un autre composant personnalisé appelé CategoryCard pour rendre un élément de catégorie unique.

Tous ces composants communiquent en passant des accessoires entre eux. Le composant Catégories principal appelle l’API et transmet une liste de catégories à CategoriesList, qui à son tour transmet les détails d’une catégorie aux fiches de catégorie.

Gestion de l’état global de l’application à l’aide de Redux

Le problème avec l’approche ci-dessus est que parfois nous avons des données qui doivent être gérées au niveau de l’application supérieure, par exemple une liste de produits qui ont été ajoutés au panier. Le nombre de produits est affiché dans l’icône du panier de la barre d’en-tête, mais ceux-ci sont également affichés sous forme de liste sur la page de paiement.

Si nous ajoutons toutes ces données dans le composant d’application parent, il deviendra très difficile à gérer sur des applications plus grandes. C’est là que des bibliothèques telles que ReduxJs juste pour clarifier, Redux peut être utilisé en combinaison avec n’importe quel framework JavaScript, il n’est pas spécifique à React.

De plus, l’utilisation de Redux ne signifie pas que nous ne pouvons pas utiliser l’état ou les accessoires au niveau du composant. Redux ne doit être utilisé que pour conserver des données qui ont du sens au niveau de l’application.

Voyons comment nous pouvons lire les produits de l’API et les afficher dans une liste, similaire à ce dont nous avons besoin avec les catégories, mais cette fois en utilisant Redux. Tout d’abord, nous devons établir la connexion avec Redux en encapsulant notre composant principal d’application dans un magasin global:

Voir le code sur Essentiel.

Dans cet exemple, la boutique d’applications globale contiendra une liste de catégories et une liste de produits, qui sont fusionnés en utilisant la méthode combineReducers de Redux.

Ensuite, nous continuons en définissant les actions Redux, qui sont des fonctions très simples qui renvoient des objets qui doivent contenir une propriété type. Étant donné que JS est asynchrone, nous aurons besoin de deux actions: l’une pour signaler lorsqu’une demande est envoyée et l’autre pour signaler lorsqu’une réponse est reçue. L’application entière saura quand ces actions auront lieu.

Ci-dessous, nous avons également ajouté une fonction appelée fetchProducts. Comme vous pouvez le voir, cette fonction:

  • envoie l’action de demande de produits,
  • appelle l’API pour récupérer des produits,
  • envoie l’action receiveProducts lorsqu’un résultat est reçu.

Voir le code sur Essentiel.

Pour modifier l’état de l’application, nous allons ajouter un soi-disant Redux "réducteur". Le réducteur est juste une fonction qui écoute des actions particulières et modifie une partie de l’état global, dans ce cas la liste des produits.

Ce réducteur ne fait rien lors de la réception d’une action de demande de produits, il renvoie toujours l’état actuel. Pour l’action recevoir des produits, le réducteur renvoie les données qui lui sont transmises, dans ce cas ce sera une liste de produits.

Voir le code sur Essentiel.

Pour conclure, nous utilisons ces actions et ce réducteur dans un nouveau composant Produits.

Voir le code sur Essentiel.

Ce composant est encapsulé dans la méthode connect de Redux et distribue simplement fetchProducts dans sa méthode componentWillMount. En outre, le composant comprend une liste de produits, mais comme vous pouvez le voir, le composant de liste de produits ne reçoit pas directement les données sur les produits. En effet, le composant de liste de produits est directement lié à l’état global de l’application, en utilisant également Redux.

De cette façon, il peut accéder aux données des produits directement depuis l’App Store, parcourir la liste des produits et utiliser un composant ProductCard pour restituer un seul élément du produit.

Voir le code sur Essentiel.

Jusqu’à présent, nous avons vu quelques exemples sur la façon d’afficher les données, mais que faire si nous voulions ajouter une interaction utilisateur, par exemple, ajouter un produit au panier?

Dans ce cas, lorsque l’utilisateur clique sur le "Ajouter au chariot" , nous enverrons une action qui modifiera l’état global de l’application. La barre d’en-tête, qui affiche le nombre de produits du panier, sera connectée à Redux. Il comptera le nombre de produits enregistrés dans le panier de l’application et se mettra à jour en conséquence.

ajouter au panier exemple

Lier l’application avec WordPress

Ce sont tous des exemples de base pour vous aider à démarrer, et vous vous demandez probablement comment nous pouvons exactement associer cette application à WordPress.

Eh bien, nous pouvons héberger l’application sur un sous-domaine et la laisser se connecter à l’API, ou nous pouvons l’utiliser comme thème WordPress – ce qui signifie créer un thème très basique avec un fichier index.php qui ne fera que charger un fichier JavaScript / CSS. Le passe-partout create-react-app comprend des commandes pour créer la construction de l’application, afin que nous puissions obtenir les fichiers de production immédiatement.

Voir le code sur Essentiel.

Où utiliser les travailleurs des services

Pour le mode hors ligne, nous pouvons ajouter un travailleur de service qui affichera le shell de l’application même lorsque les utilisateurs sont hors ligne. Le technicien de service n’est qu’un fichier JavaScript qui s’enregistre dans le navigateur.

Voir le code sur Essentiel.

Il existe plusieurs stratégies que vous pouvez utiliser pour le mode hors connexion, telles que le réseau en premier ou le cache en premier, et vous pouvez en lire plus sur Google livre de cuisine hors ligne.

La mise en cache du shell de l’application présente des avantages même lorsque nous avons une connexion réseau, car l’application se chargera beaucoup plus rapidement.

Si vous voulez aller encore plus loin et commencer à mettre en cache les données provenant de l’API, vous pouvez utiliser des packages NPM comme redux-persist et modifier votre application pour enregistrer / récupérer des données à partir du stockage local du navigateur.

Pour les notifications push Web, nous vous recommandons de consulter le Plugin WordPress sans signal. Ce plugin fonctionne également avec des thèmes réactifs, vous devriez donc le vérifier immédiatement.

Et après?

Vous pouvez trouvez le démo pour le PWA WooCommerce ci-dessus ici.

Nous travaillons déjà sur la version bêta et voici juste une partie de notre feuille de route:

  • Ajouter des capacités en mode hors ligne
  • Ajouter des notifications push
  • Finalisez le processus de paiement

Si vous souhaitez contribuer ou le personnaliser selon vos propres besoins, vous pouvez trouver la version alpha de l’application web progressive e-commerce sur GitHub.

Démo PWA

Que pensez-vous des Progressive Web Apps et du rôle qu’elles peuvent avoir dans le paysage WordPress mobile? Envisagez-vous de suivre cette voie avec votre prochain projet?

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page et présentation par Karol K.

À propos de l’auteur: Alexandra Anghel est co-fondatrice et CTO à Apparticles.com – une plateforme de création d’applications web progressives. En tant qu’extension de la plateforme, Apparticles dispose d’un plugin WordPress (Pack Mobile WordPress) qui a dépassé 1 million de téléchargements. Alexandra est un développeur de pile complète. Elle a participé à deux accélérateurs d’entreprises – Startupbootcamp (Copenhague / Danemark) et Prosper Women Accelerator (Saint Louis / États-Unis). Début 2017, elle rejoint Codette en tant que co-fondatrice.

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