Tout ce que vous devez savoir sur le studio Magento PWA

Les applications Web progressives, ou PWA, gagnent de plus en plus en popularité en raison de la fonctionnalité mise à jour. Grâce à une technologie de pointe, il améliore l'expérience client et apporte plus de revenus à l'entreprise. Par conséquent, de nombreuses entreprises ont appliqué cette plate-forme pour les magasins en ligne afin d'utiliser l'avantage de PWA. En particulier, de nombreuses entreprises choisissent des applications Web progressives sur Magento. Ensuite, nous vous donnerons une liste de contrôle détaillée sur le studio Magento PWA pour vous aider à vous y habituer davantage.

Un aperçu du studio PWA

Qu'est-ce qu'une application Web progressive ?

Une application Web progressive ressemble à une application native, mais fonctionne directement dans les navigateurs mobiles. Il n'est pas nécessaire de télécharger quoi que ce soit depuis un App Store. À la place, les clients bénéficient instantanément d'une expérience similaire à celle d'une application dans leur navigateur.

Fonctionnalité de l'application Web progressive

La capacité de travail hors ligne : Service workers – la technologie est responsable de cette fonctionnalité. Ainsi, cela permet à l'application de stocker des éléments hors ligne et de gérer de manière flexible les requêtes réseau pour les récupérer. En conséquence, cela conduit à minimiser la quantité de données que nous devons utiliser pour exécuter l'application.

Découverte et installation facile : Une PWA est un site Web avec quelques extras qui peuvent être découverts via des moteurs de recherche classiques comme Google ou Bing. Par conséquent, les utilisateurs n'ont pas besoin de télécharger quoi que ce soit à partir des magasins d'applications. L'installation d'une PWA est vraiment simple, elle se fait en arrière-plan lors de la première visite.

Utilisation des fonctionnalités du téléphone : les PWA ont de nombreuses possibilités d'accéder aux fonctionnalités de l'appareil sur Android et un peu moins sur iOS. L'utilisation d'appareils photo, de GPS ou de lecteurs d'empreintes digitales à la manière d'une application enrichit l'expérience de l'utilisateur.

Mises à jour automatiques : une PWA permet aux éditeurs d'implémenter des correctifs immédiatement. De plus, cela leur permet de garder le contrôle total du contenu. Les clients utilisent toujours la version la plus récente de l'application.

Sécurité : en utilisant le protocole HTTPS, les données sont sécurisées grâce au cryptage, et donc plus difficiles à intercepter et à modifier. De plus, les utilisateurs perçoivent le HTTPS comme un gage de sécurité et de fiabilité des éditeurs. Et Google donne des points supplémentaires dans le classement de recherche pour son utilisation.

Sensation d'application : l'idée derrière les PWA est de trouver un moyen de connecter la meilleure expérience possible à une application similaire à la nature ouverte du Web.

Un aperçu de Magento PWA Studio

L'origine de Magento PWA Studio

Magento a publié un ensemble d'outils pour tous les marchands qui exploitent des magasins en ligne. Magento PWA Studio est le nom de cet ensemble d'outils. Cela permettra aux détaillants en ligne d'économiser beaucoup de temps et d'argent pour développer des applications natives pour tous les différents systèmes d'exploitation.

Grâce aux outils de conception de sites Web de type application Magento, les marchands en ligne peuvent augmenter leur taux de conversion mobile. C'est le résultat de l'amélioration de l'expérience cross-canal pour les clients. De plus, Magento PWA lui permet de se comporter comme une application native pour une meilleure expérience utilisateur.

Les commerçants peuvent tirer parti d'une architecture frontale ultra-rapide et d'API Web ouvertes. Cela aide à transformer leurs magasins en ce qui devient rapidement la nouvelle norme.

Pack de construction PWA

Le Buildpack contient les bibliothèques et outils de développement et de construction essentiels pour créer un front-end et une PWA ultra-rapides. Il vous permet d'organiser votre environnement local pour le développement de PWA.

Vitrine PWA

PWA Storefront, également connu sous le nom de Venia Storefront, est une PWA de preuve de concept construite avec les outils Peregrine et le PWA Buildpack. Lorsque vous découvrez Magento PWA Studio et ce qu'il peut réaliser, la vitrine affiche des exemples de pages de catégories et de détails sur les produits.

Pèlerin

Le projet Peregrine de Magento, comme indiqué précédemment, contient un ensemble d'outils et de composants d'interface utilisateur pour créer une PWA Magento. Les composants peuvent être combinés, étendus et mélangés pour créer des magasins Magento 2 PWA uniques.

Certaines fonctionnalités exceptionnelles de Magento PWA Studio

ReactJS – ReactJS fonctionne très bien et offre une excellente expérience d'achat et de développement.

Alternative à l'écran d'accueil - Magento PWA fournit un magasin qui peut être téléchargé sur l'écran d'accueil. Il ressemblera et fonctionnera comme une application native

Fonctionne hors ligne - Les applications Web PWA peuvent fonctionner à la fois hors ligne et en ligne.

Back-End solide - Le backend interne robuste de Magento offre une expérience utilisateur fluide avec peu de problèmes.

L'avantage lors de l'utilisation de Magento PWA Studio

Outils de développement complets

Magento Studio fournit aux PWA des outils de développement à la pointe de la technologie et comprenant une documentation complète. Les utilisateurs peuvent rapidement organiser leurs propres environnements de développement PWA locaux avec eux.

Installation facile

La configuration des PWA à partir du backend est simple avec Magento Studio. Pour démarrer l'application avec succès, les utilisateurs doivent insérer l'URL de l'instance Magento dans le fichier.env. Ensuite, vous allez cloner un référentiel et exécuter une commande. Il était évident dès le départ que la facilité de développement était un objectif prioritaire.

GraphQL

Étant donné que GraphQL utilise la récupération de données déclarative, les PWA développées avec Magento Studio n'ont pratiquement aucune surrécupération des requêtes. Ensuite, il est mieux en mesure d'accueillir plusieurs utilisateurs provenant de diverses sources.

Soutien communautaire

Magento est une plate-forme de commerce électronique bien connue, qui a donné lieu à une grande communauté mondiale d'utilisateurs et de collaborateurs Magento PWA.

L'architecture et le framework du studio Magento PWA

Le studio est très simple à configurer et à utiliser pour éviter que des erreurs ne se produisent au début du processus de développement de l'application. Les développeurs sont immédiatement avertis lorsque quelque chose n'est pas correctement organisé. Cela permet de gagner du temps lorsqu'il s'agit de découvrir et de réparer des bogues lorsque le programme est presque terminé.

Les constructeurs du studio Magento PWA sont prêts à l'emploi

Il n'est pas nécessaire d'installer le générateur et de passer du temps à personnaliser et à configurer l'environnement. Tout fonctionne immédiatement avec Magento PWA Studio après l'installation. Tout est mis en place et prêt à partir.

Les éléments préfabriqués sont adaptables

PWA Studio comprend un grand nombre de parties de site Web terminées et prêtes à l'emploi. Lors de la création de votre site Web, vous pouvez utiliser tout ou partie des éléments dans n'importe quelle combinaison. À ce stade, les éléments préparés peuvent être utilisés exactement tels quels. Même les pièces préfabriquées peuvent être modifiées pour répondre aux besoins du développeur ou du consommateur.

Routage et mise en cache parfaitement simples

Les fonctionnalités de routage et de mise en cache de Magento PWA Studio sont d'autres grandes qualités. Le routage et la mise en cache sont effectués de la même manière qu'ils l'ont toujours été, sans aucun changement. Si vous adoptez la technique conventionnelle de routage et de mise en cache de Magento, vous n'aurez cependant besoin d'aucune participation au routage et à la mise en cache.

Magento PWA Studio et les inconvénients que vous devrez surmonter

Plate-forme unique

Si vous souhaitez posséder Magento Studio, vous avez besoin que chaque magasin fonctionne sur Magento 2.3 et les versions plus récentes. Bien qu'il ne soit pas nécessaire de s'inquiéter de la compatibilité, c'est assez limité.

Manque de compatibilité

En ce qui concerne la compatibilité, la fonctionnalité GraphicQL de Magento Studios la rend inappropriée avec les versions précédentes.

Problèmes de prise en charge iOS

Magento ne prend pas en charge les notifications iOS PWA et ne fonctionnera pas avec les appareils iOS qui ne sont pas connectés à Internet.

Problèmes de validation

Lors de la création de nouveaux comptes clients, des problèmes de validation peuvent survenir. Cela est particulièrement vrai pour les utilisateurs iOS lors de la configuration d'un mot de passe. Une notification ne peut pas être délivrée si le mot de passe choisi ne répond pas aux exigences de mot de passe.

Comment installer Magento PWA Studio (avec la version 2

Étape 1 : Installez la dernière version de Magento

Pour installer Magento PWA Studio, vous devez d'abord avoir une version Magento 2.3.x installée. Vous ne pouvez pas installer Magento PWA Studio Project (2.3) sans lui, car aucune autre version de Magento ne le prend en charge.

Étape 2 : Installer NodeJS

Après cela, vous devrez installer NodeJS (version >=10.14.1). Si vous n'êtes pas familier avec la technique, utilisez la commande ci-dessous. (Ceci est uniquement pour les utilisateurs de Linux.)

sudo apt-get install nodejs

Tout d'abord, vous devez vérifier la version de Node : node -v

Ensuite, passez en revue la version de NPM : npm -v

Si la version que vous avez installée est plus ancienne que celle indiquée ci-dessus, utilisez la commande ci-dessous pour mettre à niveau vers la version la plus récente et la plus stable du nœud.

sudo npm cache propre -f

sudo npm install -gn

sudo n stable

Étape 3 : Installez et exécutez Node JS

Après l'installation et l'exécution de NodeJS, vous devrez installer Yarn (Yarn >=1.13.0 ). Exécutez la commande suivante pour l'installation de Yarn. (Applicable uniquement pour le système d'exploitation Linux).

sudo npm installer fil -g

Vérifiez maintenant la version du fil :

fil -v

Étape 4:

Maintenant que Yarn est installé, clonez le référentiel PWA dans votre répertoire de développement.

clone git : https://github.com/magento-research/pwa-studio.git

Étape 5 :

Suite à cette étape, installez les dépendances du projet en exécutant la commande suivante.

installation de fil

Étape 6 : Créer le fichier .env

Pour créer le fichier .env, exécutez la commande suivante à partir du répertoire racine PWA-

(Pour le thème Venia, vous pouvez utiliser le Magento que vous avez installé ou le Magento 2.3.1 par défaut. Ici, nous utilisons la valeur par défaut.)

MAGENTO_BACKEND_URL = "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/" fil buildpack créer-env-file packages/venia-concept

Vous pouvez également créer le fichier .env et définir votre valeur personnalisée MAGENTO_BACKEND_URL à l'aide de la commande suivante :

MAGENTO_BACKEND_URL=”https://YOUR_MAGENTO_BACKEND_URL/” pack de création de fils create-env-file packages/venia-concept

Étape 7 : Installez le certificat SSL

Installez le certificat SSL lorsque PWA s'exécute sur un chemin sécurisé. Vous pouvez exécuter la commande create-custom-origin pour générer un certificat SSL :

pack de construction de fils créer des packages d'origine personnalisés / venia-concept

Étape 8 : Installer les exemples de données Venia

Vous pouvez également installer les données Venia Sample, un script bash est déjà disponible sur packages/venia-concept/deployVeniaSampleData.sh

bash deployVeniaSampleData.sh

Pour installer des exemples de données dans Magento, exécutez les commandes suivantes :

configuration bin/magento : mise à niveau

indexeur bin/magento : réindexer

Construisez tous les artefacts pour votre thème maintenant en exécutant-

construction de fils

Démarrez le serveur en exécutant l'une des commandes suivantes selon vos besoins, à partir du répertoire racine de votre projet PWA.

Pour le developpement-

montre de course de fil: venia

Pour exécuter le développeur complet PWA Studio

montre de course de fil: tout

Pour la construction d'artefacts et l'exécution du studio PWA à la mise en scène-

étape de construction de fil et de fil: venia

PWA a maintenant été installé avec succès. Lorsque vous exécutez les commandes mentionnées ci-dessus, vous verrez l'URL où la PWA fonctionne. Ensuite, il vous indiquera si l'installation a réussi ou non

Conclusion

Nous vous expliquons cet article en espérant que : vous avez un aperçu de Magento pwa studio. Avec de nombreuses fonctionnalités étonnantes, il vaut vraiment la peine de se lancer pour augmenter votre boutique en ligne. Par conséquent, votre entreprise peut répondre à la demande des clients et offre davantage d'opportunités de développement dans l'environnement Internet. Cependant, si vous êtes encore confus au sujet de cette technologie, Magesolution est prêt à être un partenaire pour aider votre entreprise. Avec de nombreuses expériences dans ce domaine, nous sommes confiants de fournir le meilleur service : Développement d'applications Web progressives Magento. Par conséquent, si vous avez des questions, contactez-nous pour avoir plus d'informations.