{"id":806928,"date":"2020-06-10T10:48:07","date_gmt":"2020-06-10T10:48:07","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805464\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2022-03-04T16:42:23","slug":"magento-2-pwa-mobile-app-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/magento-2-pwa-mobile-app-user-manual\/","title":{"rendered":"Magento 2 PWA Mobile App – User Manual"},"content":{"rendered":"

<\/head><\/p>\n

1.0 Pr\u00e9sentation<\/h2>\n

\u00c9tant dans l’industrie du commerce \u00e9lectronique de d\u00e9tail, vous devez avoir rencontr\u00e9 le mot PWA (Progressive Web App). Si oui, vous devez \u00e9galement \u00eatre conscient de la capacit\u00e9 qu’ils offrent en tant qu’application d’achat. Dans le cas contraire, vous avez atterri au bon endroit. Avec la croissance constante de l’utilisation des applications d’achat (\u00e0 la fois natives et PWA), les magasins en ligne se tournent vers le d\u00e9veloppement d’applications mobiles PWA pour leurs entreprises. Le lancement d’une application Web progressive est une t\u00e2che assez simple et abordable de nos jours. KnowBand a lanc\u00e9 l’application mobile Magento 2 PWA, un outil complet sans code et automatis\u00e9 pour lancer une application Web progressive. En termes simples, chaque fois qu’un utilisateur ouvre l’URL de votre boutique sur le navigateur mobile, il re\u00e7oit un message d’invite “Ajouter \u00e0 l’\u00e9cran d’accueil”. L’application Web progressive Magento 2 sera ajout\u00e9e dans l’appareil de l’utilisateur comme n’importe quelle autre application et les achats en ligne peuvent \u00eatre effectu\u00e9s en d\u00e9placement.<\/p>\n

1.1 Voir l’application de d\u00e9monstration:<\/h3>\n

Explorez la d\u00e9mo Progressive Web App pour Magento 2 et jetez un coup d’\u0153il \u00e0 l’apparence et au fonctionnement de vos applications finales:<\/p>\n

URL de la boutique de d\u00e9monstration :\ufffd<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/manager\/<\/a>
\nURL de l’application PWA :\ufffd<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/pwa-app\/<\/a><\/p>\n

 <\/p>\n

[IMP] Remarques pour Magento 2 iOS PWA :<\/h4>\n

\ufffd> Les appareils iOS n’offrent aucune invite “Ajouter \u00e0 l’\u00e9cran d’accueil” int\u00e9gr\u00e9e. Les utilisateurs doivent ajouter manuellement l’application mobile Magento 2 PWA \u00e0 l’\u00e9cran d’accueil de l’iPhone ou de l’iPad. \ufffd> iOS ne prend pas en charge les notifications push Web. Les notifications push ne peuvent \u00eatre envoy\u00e9es \u00e0 l’appareil Android qu’\u00e0 partir du panneau d’administration de Magento 2 PWA Mobile App Builder.<\/p>\n

[NOUVELLE MISE \u00c0 JOUR] Magento 2\ufffdPWA prend en charge les langages RTL :<\/h4>\n

Le cr\u00e9ateur d’applications mobiles Magento 2 PWA prend d\u00e9sormais en charge toutes les langues du monde, y compris RTL (Right To Left). L’application mobile PWA pour Magento 2 peut avoir des langues comme l’arabe, l’h\u00e9breu, le persan, etc. Le propri\u00e9taire du magasin peut proposer toutes les langues du site Web sur l’application Web progressive et peut m\u00eame en ajouter de nouvelles.<\/p>\n

2.0 \u00c9crans du panneau d’administration:<\/h2>\n

Avec le backend convivial du panneau d’administration, l’administrateur du magasin peut configurer et personnaliser l’apparence, la convivialit\u00e9 et le fonctionnement de l’application mobile PWA. C’est juste une question de quelques clics et de bascules de souris pour apporter des modifications dans les applications Web progressives de Magento 2. Prenons un aper\u00e7u d\u00e9taill\u00e9 des \u00e9crans du panneau d’administration:<\/p>\n

Param\u00e8tres g\u00e9n\u00e9raux 2.1:<\/h3>\n

\"r\u00e9glages<\/p>\n

a) Activer l’extension:<\/strong>\ufffdActiver\ufffdle module Magento 2\ufffdPWA pour faire fonctionner l’application Web sur les smartphones des utilisateurs.<\/p>\n

b) Rediriger sur la page du panier lorsque Ajouter au panier:<\/strong>\ufffdActivez pour rediriger les utilisateurs vers le panier ou d\u00e9sactivez-les pour les garder sur l’\u00e9cran du produit.<\/p>\n

c) Description abr\u00e9g\u00e9e de l’affichage:<\/strong>\ufffdActiver pour ajouter et afficher une courte description sur l’\u00e9cran du produit de Progressive Web App.<\/p>\n

d) Activer le rapport du journal des demandes:<\/strong> Activez cet onglet pour activer le fichier journal sur l’application mobile PWA. Ce fichier journal peut \u00eatre utilis\u00e9 pour corriger tout comportement anormal de Progressive Web Application.<\/p>\n

e) Afficher l’aper\u00e7u de l’application:<\/strong> Activez pour ajouter un t\u00e9l\u00e9phone de pr\u00e9visualisation dans le panneau d’administration. Tous les changements de couleur, de police et d’\u00e9cran d’accueil seront affich\u00e9s dans un aper\u00e7u en temps r\u00e9el du t\u00e9l\u00e9phone.<\/p>\n

f) Activer la barre d’onglets:<\/strong> Ajoutez une barre d’onglets inf\u00e9rieure sur l’application mobile Magento 2 PWA.<\/p>\n

g) S\u00e9lectionner la mise en page pour la page d’accueil:<\/strong>\ufffdChoisissez les mises en page souhait\u00e9es parmi celles ajout\u00e9es et am\u00e9liorez l’apparence de l’application.<\/p>\n

\"Param\u00e8tres<\/p>\n

h) Image de l’ic\u00f4ne de l’application:<\/strong>\ufffdT\u00e9l\u00e9chargez vous-m\u00eame l’ic\u00f4ne de l’application Magento 2 PWA et modifiez-la \u00e9galement si n\u00e9cessaire.<\/p>\n

i) Nom de l’application PWA:<\/strong>\ufffdEntrez le nom de l’application Web progressive Magento 2.<\/p>\n

j) S\u00e9lectionnez la police pour l’application PWA:<\/strong>\ufffdChoisissez la police de votre application PWA pour Magento 2.<\/p>\n

k) Couleur du bouton de l’application:<\/strong> Choisissez la couleur du bouton pour votre application mobile PWA.<\/p>\n

l) Couleur du texte du bouton d’application:<\/strong> Choisissez la couleur du texte du bouton pour votre application Web progressive Magento 2.<\/p>\n

m) Couleur du th\u00e8me de l’application:<\/strong> Choisissez la couleur du th\u00e8me (en-t\u00eate) de votre application Web.<\/p>\n

n) Couleur d’arri\u00e8re-plan de l’application :<\/strong>Choisissez la couleur d’arri\u00e8re-plan de l’application Web progressive.<\/p>\n

o) Couleur d’arri\u00e8re-plan de l’\u00e9cran de d\u00e9marrage:<\/strong> Choisissez la bonne option de couleur pour l’arri\u00e8re-plan de l’\u00e9cran de d\u00e9marrage de l’application PWA.<\/p>\n

\"Param\u00e8tres<\/p>\n

p) M\u00e9thodes d’exp\u00e9dition d\u00e9sactiv\u00e9es<\/strong>: Choisissez les m\u00e9thodes d’exp\u00e9dition pour ne pas travailler dans l’application mobile Magento 2 PWA.<\/p>\n

q) Activer et t\u00e9l\u00e9charger le logo :<\/strong> Ajoutez l’image du logo de votre boutique \u00e0 afficher sur l’en-t\u00eate de l’application PWA Mobile.<\/p>\n

2.2 Param\u00e8tres des notifications push:<\/h3>\n

L’application Web progressive Magento 2 offre des notifications push illimit\u00e9es sur le march\u00e9 et fait la promotion des offres et des produits du magasin. L’administrateur du magasin recevra des notifications push \u00e0 vie sans frais suppl\u00e9mentaires.<\/p>\n

\"notifications<\/p>\n

Les diff\u00e9rents champs sous cet onglet de configuration n\u00e9cessitent la configuration d’un compte Firebase. Voici comment vous pouvez en d\u00e9finir un:<\/p>\n

Comment cr\u00e9er un compte Firebase?<\/strong><\/p>\n

\u00c9tape 1 :<\/strong> Connectez-vous \u00e0 Google Firebase<\/p>\n

\"firebase\"<\/p>\n

\u00c9tape 2 :<\/strong> Cr\u00e9er un nouveau projet Lorsque vous cliquez sur Ajouter un projet, la bo\u00eete de dialogue suivante appara\u00eet :<\/p>\n

\"cr\u00e9er-projet\"
\nLa cr\u00e9ation du projet prendra quelques secondes. Une fois le projet pr\u00eat, cliquez sur Continuer.<\/p>\n

\"continuer-projet\"<\/p>\n

\u00c9tape 3 :<\/strong> G\u00e9rer les param\u00e8tres du projet Une fois le projet cr\u00e9\u00e9, cliquez sur Param\u00e8tres du projet.<\/p>\n

\"param\u00e8tres<\/p>\n

\u00c9tape 4 :<\/strong> Acc\u00e9dez aux options d’authentification:<\/p>\n

\"authentification-options\"
\n\u00c9tape 5 :<\/strong> Rechercher des cl\u00e9s Firebase Dans les param\u00e8tres du projet, cliquez sur Param\u00e8tres de messagerie Cloud. De l\u00e0, vous pouvez directement obtenir la cl\u00e9 du serveur.<\/p>\n

\"cl\u00e9
\n\u00c9tape 6 :<\/strong> Ajoutez votre application Web \u00e0 Firebase<\/p>\n

\"application<\/p>\n

\"application<\/p>\n

\u00c9tape 7 :<\/strong> Obtenez d’autres d\u00e9tails li\u00e9s \u00e0 Firebase et collez-les dans le panneau d’administration du module PWA.<\/p>\n

\"d\u00e9tails<\/p>\n

\u00c9tape 8 :<\/strong> Obtenez la cl\u00e9 du serveur Firebase \u00e0 partir de l’onglet de messagerie cloud dans les param\u00e8tres:<\/p>\n

\"cl\u00e9<\/p>\n

\u00c9tape 9 :<\/strong> Ajoutez votre domaine dans authentification >> connexion.<\/p>\n

\"cl\u00e9<\/p>\n

\"cl\u00e9<\/p>\n

2.21 Notifications push automatis\u00e9es:<\/h4>\n

L’administrateur du magasin peut planifier l’envoi automatique de notifications dans les cas suivants:<\/p>\n

\"notifications-push-2\"<\/p>\n

a) Nouveaux param\u00e8tres de commande:<\/strong>Chaque fois qu’une nouvelle commande est pass\u00e9e \u00e0 partir de l’application mobile Magento 2 PWA.<\/p>\n

b) Param\u00e8tres de modification de l’\u00e9tat de la commande:<\/strong> Chaque fois que le statut de livraison d’une commande est modifi\u00e9 \/ mis \u00e0 jour.<\/p>\n

c) Param\u00e8tres du panier abandonn\u00e9:<\/strong> Chaque fois qu’un utilisateur laisse un produit dans le panier et abandonne Progressive Web App.<\/p>\n

2.22 Notification push manuelle:<\/h4>\n

\"envoyer-notification\"<\/p>\n

Comme indiqu\u00e9 dans l’instantan\u00e9 ci-dessus, l’administrateur du magasin peut personnaliser et envoyer des notifications push manuelles aux utilisateurs de l’application mobile PWA. Le message, l’image, la remise offerte, le lien de redirection peuvent \u00eatre ajout\u00e9s \/ modifi\u00e9s pour am\u00e9liorer l’efficacit\u00e9 de la notification et apporter plus de ventes.<\/p>\n

Mise en page de la page d\u2019accueil 2.3:<\/h3>\n

Le g\u00e9n\u00e9rateur d’applications mobiles Magento 2 PWA offre un panneau d’\u00e9dition DIY enti\u00e8rement personnalisable pour personnaliser et configurer l’apparence de l’application Web progressive. Diverses nouvelles mises en page peuvent \u00eatre ajout\u00e9es au panneau d’administration en fonction des festivals et des occasions \u00e0 venir.<\/p>\n

\"mise<\/p>\n

\"\u00e9cran-d'accueil-layout-3\"<\/p>\n

2.31 Principales cat\u00e9gories:<\/h4>\n

\"top-cat\u00e9gories\"<\/p>\n

2.32 Banni\u00e8re carr\u00e9e:<\/h4>\n

\"banni\u00e8re<\/p>\n

2.33 Banni\u00e8re coulissante:<\/h4>\n

\"banni\u00e8re<\/p>\n

2.34 Grille de banni\u00e8re:<\/h4>\n

\"banni\u00e8res<\/h4>\n

2.35 Banni\u00e8re du compte \u00e0 rebours<\/h4>\n

\"compte<\/p>\n

2.36 Produits carr\u00e9s:<\/h4>\n

\"produits<\/p>\n

2.37 Produits coulissants:<\/h4>\n

\"produits<\/p>\n

2.38 Produits de grille:<\/h4>\n

\"produits<\/p>\n

Comment obtenir les d\u00e9tails de l’application Facebook?<\/h3>\n

L’application Facebook peut \u00eatre cr\u00e9\u00e9e en suivant les \u00e9tapes ci-dessous: –<\/p>\n

\u00c9tape 1 :<\/strong>Aller \u00e0 l’URL donn\u00e9e: https:\/\/developers.facebook.com\/apps\/<\/p>\n

\u00c9tape 2 :<\/strong>Cliquez sur le bouton “Ajouter une nouvelle application”.<\/p>\n

\"add-new-app\"<\/a><\/p>\n

\u00c9tape 3 et 4:<\/strong>Entrez le nom de votre application et votre adresse e-mail, puis cliquez sur le bouton “Cr\u00e9er un identifiant d’application”.<\/p>\n

\"create-app-id\"<\/a><\/p>\n

\u00c9tape 5 et 6:<\/strong>Apr\u00e8s avoir cliqu\u00e9 sur Cr\u00e9er un identifiant d’application, vous devrez effectuer un contr\u00f4le de s\u00e9curit\u00e9 comme indiqu\u00e9:<\/p>\n

\"create-app-id\"<\/a><\/p>\n

\u00c9tape 7 :<\/strong>Cliquez sur l’onglet “Param\u00e8tres”.<\/p>\n

\"param\u00e8tre<\/a><\/p>\n

\u00c9tape 8-13:<\/strong>Deux options seront disponibles dans le menu d\u00e9roulant, Basique et Avanc\u00e9, cliquez sur “Basique”. Ensuite, entrez votre \u00abDomaine d’application\u00bb, \u00abEmail de contact\u00bb, \u00abURL de confidentialit\u00e9\u00bb, \u00abTermes et conditions\u00bb URL \u00bb,\u00ab Ajouter un logo \u00bb,\u00ab S\u00e9lectionner une cat\u00e9gorie \u00bbet cliquez sur le bouton\u00ab Enregistrer les modifications \u00bb. Domaines d’application: yourdomain.com est correct yourdomain.com\/store is incorrect www.domain.com is incorrect<\/p>\n

\"id-app-fb\"<\/a><\/p>\n

\u00c9tape 14 :<\/strong>Maintenant, cliquez sur “+ Ajouter une plate-forme”.<\/p>\n

\"ajouter-plate-forme\"<\/a>
\n\u00c9tape 15: <\/strong>Et s\u00e9lectionnez Site Web comme plate-forme.<\/p>\n

\"plate-forme<\/a><\/p>\n

\u00c9tape 16 :<\/strong>Maintenant, entrez l’URL de votre site.<\/p>\n

\"entrer-url-site-web\"<\/a>
\n\u00c9tape 17 et 18:<\/strong>Cliquez sur “Produits +” et s\u00e9lectionnez Connexion Facebook.<\/p>\n

\"Identifiant<\/a>
\n\u00c9tape 19 :<\/strong>S\u00e9lectionnez Web comme plate-forme pour l’application.<\/p>\n

\"plate-forme<\/a><\/p>\n

\u00c9tape 20 :<\/strong>“ Maintenant, cliquez sur Enregistrer.<\/p>\n

\"facebook-app-id\"<\/a>
\n\u00c9tape 21 et 22: <\/strong>Cliquez sur Param\u00e8tres et ajoutez un URI de redirection OAuth valide. URI de redirection OAuth valides: https:\/\/example.com\/pwa-app\/login<\/p>\n

\"URL<\/a><\/p>\n

\u00c9tape 23 et 24:<\/strong>Cliquez sur “Revue de l’application”. Et marquez \u00abRendre le nom de votre application public\u00bb sur Oui.<\/p>\n

\"examen<\/a>
\nDerni\u00e8re \u00e9tape:<\/strong>Copiez l’ID de l’application et le secret de l’application et collez-les dans les champs fournis dans le module.<\/p>\n

\"derni\u00e8re<\/a><\/p>\n

Comment obtenir les d\u00e9tails de l’application Google?<\/h3>\n