jamstack ecommerce example
1.0.0
Étant donné que les pages accessibles par le site Web, les visiteurs ne sont pas générés dynamiquement lorsqu'ils sont demandés mais pré-générés et servis de fichiers HTML statiques, le processus de déploiement de nouvelles fonctionnalités et de contenu semble un peu différent de celui des applications Web "traditionnelles".
Développement local: le développement de nouvelles fonctionnalités peut être effectué localement.
Nuxt.js est livré avec des outils très efficaces pour prendre en charge une excellente expérience de développeur comme un serveur de développement avec remplacement de module chaud et rechargement en direct.
Le contenu des produits est stocké dans le référentiel GIT aux côtés du code source, afin que les développeurs puissent utiliser des données de produit réelles pendant la mise en œuvre et les tests.
Les points de terminaison de l'API doivent être soumis à un serveur simulé, par exemple, par exemple, un simulateur moqueur, afin de travailler indépendamment à partir de systèmes externes réels. Pour l'authentification OpenID Connect, envisagez de configurer KeyCloak localement.
Remarque: Cet exemple de projet n'inclut aucun serveur simulé.
Contenu pré-frappe: chaque fois que des données de produit neuves ou mises à jour doivent être publiées sur le site Web, les fichiers JSON de contenu pré-frisés doivent être mis à jour dans le référentiel GIT avant que une nouvelle version des fichiers HTML statique ne soit générée.
Le script de contenu Node.js spécial se connectera à Salesforce et récupérera les données les plus récentes via l'API Salesforce REST. Les fichiers JSON de contenu sont mis à jour en conséquence et peuvent être engagés dans le référentiel GIT.
C'est entièrement à vous où et quand ce script est exécuté. Par exemple, il peut fonctionner en tant qu'action GitHub ou dans un processus CI sur Travis CI.
Remarque: Salesforce n'est qu'un exemple d'une source de données potentielle pour acquérir du contenu. Les fichiers de contenu peuvent également être créés à partir de toute autre source de données.
Publication de fichiers HTML statiques: chaque engagement du référentiel GIT représente un certain état d'implémentation et de contenu du site Web qui peut potentiellement être publié.
Le processus de construction transforme le code source en morceaux optimisés et génère les fichiers HTML statiques en informant tous les routes accessibles pour les composants de la page implémentés et les fichiers de contenu pré-gravés.
Enfin, tous les fichiers de site Web générés peuvent être publiés sur n'importe quel serveur Web ou réseau de livraison de contenu, par exemple Netlify.
Remarque: Le processus de construction peut également tirer parti des demandes d'API pour charger du contenu qui n'est pas stockée dans les fichiers de contenu dans le référentiel GIT.
Amélioration dynamique via API: les visiteurs sont servis de fichiers HTML statiques lors du chargement du site Web dans le navigateur. Ceci est extrêmement rapide car rien n'a besoin de généré dynamiquement sur le serveur.
Une fois que la page Web a chargé le JavaScript dynamique entre en jeu et améliore la page avec des fonctionnalités dynamiques. Il peut s'agir de fonctionnalités comme le panier d'achat ou d'affichage du contenu utilisateur personnalisé.
Les données dynamiques peuvent être récupérées en envoyant des demandes d'API du navigateur. Les visiteurs peuvent s'authentifier à l'aide de protocoles standard comme OAuth 2.0 et OpenID Connect pour permettre au site Web de présenter du contenu individuel.
Pourquoi? Il permet la connexion avec un véritable utilisateur client dans la communauté Lightning.
Cette étape est requise si vous prévoyez d'utiliser le script de mise à jour du contenu et si vous souhaitez configurer la déconnexion automatique dans la communauté Lightning lorsque les utilisateurs se connectent au site Web.
Pourquoi? Il ajoute l'objet personnalisé "Catégorie de produit" à votre org Salesforce et installe un champ personnalisé sur l'objet Product2 pour vous permettre de définir la catégorie à laquelle appartient le produit. Il installe également un composant Web Lightning pour être utilisé sur une page de communauté de déconnexion spéciale qui enregistrera automatiquement l'utilisateur.
Téléchargez et installez Salesforce CLI.
Ouvrez un terminal dans le répertoire salesforce .
Connectez Salesforce CLI à votre org Salesforce.
sfdx force:auth:web:login -a MyOrg -sDéployez le projet SFDX sur votre org Salesforce.
sfdx force:source:deploy -p force-appPourquoi? Il permet au serveur API et au script de contenu de se connecter à Salesforce avec un utilisateur technique spécifique qui permet un contrôle d'accès individuel.
Pourquoi? Il est nécessaire d'afficher la page de connexion pendant le flux d'authentification OpenID Connect.
Si vous souhaitez configurer la déconnexion automatique pour les utilisateurs de la communauté lorsqu'ils se connectent sur le site Web, effectuez ces étapes supplémentaires:
Pourquoi? Il est nécessaire pour l'authentification OpenID Connect pour les visiteurs du site Web et permet au serveur API et au script de contenu de se connecter à Salesforce de manière sécurisée.
Cette étape est facultative car le référentiel GIT contient déjà quelques exemples de produits et catégories pour la démonstration.
Vous devriez avoir des enregistrements pour l'objet Product2 dans votre organisation Salesforce qui sont actifs et avoir des entrées de prix de prix dans un livre de prix utilisé pour la mise à jour du contenu.
Vous pouvez également créer certaines catégories de produits et les attribuer à vos produits.
Remarque: Le script nécessite le déploiement des métadonnées Salesforce dans votre organisation.
Ouvrez un terminal dans le répertoire content-scripts .
Définissez les variables d'environnement suivantes.
| Nom | Description |
|---|---|
| Salesforce_instance_url | URL de base de l'instance Salesforce (modèle https://xx##.salesforce.com ) |
| Salesforce_api_version | Version de l'API Salesforce à utiliser |
| Salesforce_token_endpoint | Point final OAuth 2.0 de l'instance Salesforce |
| Salesforce_Client_id | Clé de consommation de l'application connectée (copiée avant à partir de l'application View) |
| Salesforce_Client_secret | Secret des consommateurs de l'application connectée (copiée avant de l'application View) |
| Salesforce_Username | Nom d'utilisateur de l'utilisateur d'intégration |
| Salesforce_password | Mot de passe du jeton d'intégration User + Security (concaténer simplement les deux) |
| Salesforce_price_book_name | Facultatif. Livre de prix à utiliser. Par défaut: "Book de prix standard" |
Exemple:
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n CONSEIL: Vous pouvez mettre ces affectations de variables dans un fichier appelé .env dans les répertoires content-scripts pour le développement et les tests.
Installez les dépendances Node.js.
yarn install Exécutez le script pour mettre à jour les catégories et produits les fichiers JSON dans le content du répertoire.
yarn start Ouvrez un terminal dans l' api du répertoire.
Définissez les variables d'environnement suivantes.
| Nom | Description |
|---|---|
| PORT | Port de serveur local pour écouter. Par défaut: 3000 |
| Salesforce_instance_url | URL de base de l'instance Salesforce (modèle https://xx##.salesforce.com ) |
| Salesforce_api_version | Version de l'API Salesforce à utiliser |
| Salesforce_token_endpoint | Point final OAuth 2.0 Token de l'instance Salesforce (pas communautaire) |
| Salesforce_jwks_endpoint | OpenID Connect JSON Web Key Set Point de terminaison de la communauté Salesforce Lightning |
| Salesforce_issuer_url | URL de l'émetteur incluse dans le jeton ID émis par Salesforce |
| Salesforce_Client_id | Clé de consommation de l'application connectée (copiée avant à partir de l'application View) |
| Salesforce_Client_secret | Secret des consommateurs de l'application connectée (copiée avant de l'application View) |
| Salesforce_Username | Nom d'utilisateur de l'utilisateur d'intégration |
| Salesforce_password | Mot de passe de l'intégration User + Token Security (Concat simplement les deux) |
| Salesforce_price_book_name | Facultatif. Livre de prix à utiliser. Par défaut: "Book de prix standard" |
| SECURECT_CORS_ORIGIN | L'URL de base de l'application Web autorisée à accéder au serveur. |
Exemple:
PORT=4000
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n
SECURITY_CORS_ORIGIN=http://localhost:3000 Astuce: vous pouvez mettre ces affectations variables dans un fichier appelé .env dans l' api du répertoire pour le développement et les tests.
Installez les dépendances Node.js.
yarn installExécutez le serveur.
yarn startOuvrez un terminal dans le répertoire racine du projet.
Définissez les variables d'environnement suivantes.
| Nom | Description |
|---|---|
| Api_url | URL de base du serveur API |
| Logout_url | Facultatif. URL de la page de déconnexion de la communauté Salesforce Lightning |
| Oauth2_authorize_endpoint | Point final d'autorisation OAuth 2.0 de la communauté Salesforce Lightning |
| Oauth2_userinfo_endpoint | Point de terminaison des informations utilisateur du serveur API |
| Oauth2_client_id | Clé de consommation de l'application connectée (copiée avant à partir de l'application View) |
| Oauth2_scopes | OAuth 2.0 Scopes à demander lors de l'authentification, séparée par les virgules |
Exemple:
API_URL=http://localhost:4000
LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
OAUTH2_CLIENT_ID=3MVG9...ru7XA
OAUTH2_SCOPES=openid,id Astuce: vous pouvez mettre ces affectations variables dans un fichier appelé .env dans le répertoire racine du projet pour le développement et les tests.
Remarque: Si la variable LOGOUT_URL n'est pas fournie, les utilisateurs seront redirigées vers la page de déconnexion du site Web immédiatement sans aller-retour externe.
Installez les dépendances Node.js.
yarn installSoit lancer le serveur de développement qui offre un rechargement en direct ...
yarn dev ... ou générer d'abord les fichiers HTML statiques, puis servir ces fichiers à partir du répertoire dist .
yarn generate
yarn startOuvrez votre navigateur sur http: // localhost: 3000
Licence MIT
