jamstack ecommerce example
1.0.0
Dado que las páginas accedidas por el sitio web los visitantes no se generan dinámicamente cuando se solicitan, sino previamente generadas y sirvieron como archivos HTML estáticos, el proceso de implementar nuevas funciones y contenido se ve un poco diferente a las de las aplicaciones web "tradicionales".
Desarrollo local: el desarrollo de nuevas características se puede hacer localmente.
Nuxt.js viene con herramientas muy efectivas para admitir una excelente experiencia de desarrollador como un servidor de desarrollo con reemplazo de módulo caliente y recarga en vivo.
El contenido para productos se almacena en el repositorio Git junto con el código fuente, para que los desarrolladores puedan hacer uso de datos reales de productos durante la implementación y las pruebas.
Los puntos finales de la API deben robarse utilizando algún servidor simulado, por ejemplo, Wiremock o MockServer, para trabajar independientemente de sistemas externos reales. Para la autenticación de Connect OpenID, considere configurar KeyCloak localmente.
Nota: Este proyecto de ejemplo no incluye ningún servidor simulado.
Contenido previo a la recolección: cada vez que los datos de productos nuevos o actualizados deben publicarse en el sitio web, los archivos JSON de contenido prefabricados deben actualizarse en el repositorio GIT antes de generar una nueva versión de archivos HTML estáticos.
El script de contenido de Node.js especial se conectará a Salesforce y obtendrá los datos más recientes a través de la API REST de Salesforce. Los archivos JSON de contenido se actualizan en consecuencia y pueden comprometerse con el repositorio GIT.
Depende completamente de usted donde y cuándo se ejecuta este script. Por ejemplo, puede ejecutarse como una acción de GitHub o en un proceso CI en Travis CI.
Nota: Salesforce es solo un ejemplo de una fuente de datos potencial para adquirir contenido. Los archivos de contenido también se pueden crear a partir de cualquier otra fuente de datos.
Publicación de archivos HTML estáticos: cada compromiso en el repositorio de Git representa un cierto estado de implementación y contenido del sitio web que puede publicarse.
El proceso de compilación transforma el código fuente en fragmentos optimizados y genera los archivos HTML estáticos calculando todas las rutas accesibles para los componentes de la página implementados y los archivos de contenido prefabricados.
Finalmente, todos los archivos de sitio web generados se pueden publicar en cualquier servidor web o red de entrega de contenido, por ejemplo, Netlify.
Nota: El proceso de compilación también puede aprovechar las solicitudes de API para cargar contenido que no se almacena en archivos de contenido en el repositorio GIT.
Mejora dinámica a través de API: los visitantes reciben archivos HTML estáticos al cargar el sitio web en el navegador. Esto es extremadamente rápido porque nada necesita generarse dinámicamente en el servidor.
Una vez que la página web ha cargado la dinámica JavaScript, se inicia y mejora la página con características dinámicas. Esto puede ser características como el carrito de compras o mostrar contenido personalizado de usuario.
Los datos dinámicos se pueden obtener enviando solicitudes API desde el navegador. Los visitantes pueden autenticarse utilizando protocolos estándar como OAuth 2.0 y OpenID Connect para permitir que el sitio web presente contenido individual.
¿Por qué? Habilita el inicio de sesión con un usuario real del cliente en la comunidad Lightning.
Se requiere este paso si planea usar el script de actualización de contenido y si desea configurar el inicio de sesión automático en la comunidad Lightning cuando los usuarios inician sesión en el sitio web.
¿Por qué? Agrega la "categoría de producto" de objeto personalizado a su organización de Salesforce e instala un campo personalizado en el objeto Product2 para permitirle definir la categoría A que pertenece el producto. También instala un componente web Lightning que se utilizará en una página de comunidad de sesión de sesión especial que registrará automáticamente al usuario.
Descargue e instale Salesforce CLI.
Abra una terminal en el directorio salesforce .
Conecte Salesforce CLI a su Salesforce Org.
sfdx force:auth:web:login -a MyOrg -sImplemente el proyecto SFDX en su Salesforce Org.
sfdx force:source:deploy -p force-app¿Por qué? Permite que el servidor API y el script de contenido se conecten a Salesforce con un usuario técnico específico que permite el control de acceso individual.
¿Por qué? Se requiere mostrar la página de inicio de sesión durante el flujo de autenticación de OpenID Connect.
Si desea configurar el inicio de sesión automático para los usuarios de la comunidad cuando cierran sesión en el sitio web, realice estos pasos adicionales:
¿Por qué? Se requiere para la autenticación de OpenID Connect para los visitantes del sitio web y permite que el servidor API y el script de contenido se conecten a Salesforce de manera segura.
Este paso es opcional porque el repositorio GIT ya contiene algunos productos y categorías de ejemplo para la demostración.
Debe tener algunos registros para el objeto Product2 en su organización de Salesforce que están activas y tener entradas de libros de precios en algún libro de precios utilizado para la actualización de contenido.
También puede crear algunas categorías de productos y asignarlas a sus productos.
Nota: El script requiere que los metadatos de Salesforce se implementen en su organización.
Abra un terminal en las content-scripts del directorio.
Establezca las siguientes variables de entorno.
| Nombre | Descripción |
|---|---|
| Salesforce_instance_url | URL base de la instancia de Salesforce (patrón https://xx##.salesforce.com ) |
| Salesforce_api_version | Versión de la API de Salesforce para usar |
| Salesforce_token_endpoint | Punto final de token OAuth 2.0 de la instancia de Salesforce |
| Salesforce_client_id | Clave del consumidor de la aplicación conectada (copiada antes desde la vista de la aplicación) |
| Salesforce_client_secret | Secreto del consumidor de la aplicación conectada (copiada antes desde la vista de la aplicación) |
| Salesforce_Username | Nombre de usuario del usuario de integración |
| Salesforce_password | Contraseña del usuario de integración + token de seguridad (simplemente concatene los dos) |
| Salesforce_price_book_name | Opcional. Libro de precios para usar. Valor predeterminado: "Libro de precios estándar" |
Ejemplo:
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 Consejo: puede colocar estas asignaciones variables en un archivo llamado .env en los content-scripts de directorio para el desarrollo y las pruebas.
Instale las dependencias Node.js.
yarn install Ejecute el script para actualizar los archivos JSON de categorías y productos en el content del directorio.
yarn start Abra una terminal en la api del directorio.
Establezca las siguientes variables de entorno.
| Nombre | Descripción |
|---|---|
| PUERTO | Puerto de servidor local para escuchar. Valor predeterminado: 3000 |
| Salesforce_instance_url | URL base de la instancia de Salesforce (patrón https://xx##.salesforce.com ) |
| Salesforce_api_version | Versión de la API de Salesforce para usar |
| Salesforce_token_endpoint | Punto final de token OAuth 2.0 de la instancia de Salesforce (no de la comunidad) |
| Salesforce_jwks_endpoint | OpenID Connect JSON Web Key Set Punto final de la comunidad de Lightning de Salesforce |
| Salesforce_issuer_url | URL del emisor incluida en el token de identificación emitido por Salesforce |
| Salesforce_client_id | Clave del consumidor de la aplicación conectada (copiada antes desde la vista de la aplicación) |
| Salesforce_client_secret | Secreto del consumidor de la aplicación conectada (copiada antes desde la vista de la aplicación) |
| Salesforce_Username | Nombre de usuario del usuario de integración |
| Salesforce_password | Contraseña del usuario de integración + token de seguridad (simplemente concatora los dos) |
| Salesforce_price_book_name | Opcional. Libro de precios para usar. Valor predeterminado: "Libro de precios estándar" |
| Security_cors_origin | URL base de la aplicación web se permite acceder al servidor. |
Ejemplo:
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 Consejo: puede colocar estas tareas variables en un archivo llamado .env en la api de directorio para el desarrollo y las pruebas.
Instale las dependencias Node.js.
yarn installEjecute el servidor.
yarn startAbra un terminal en el directorio de la raíz del proyecto.
Establezca las siguientes variables de entorno.
| Nombre | Descripción |
|---|---|
| Api_url | URL base del servidor API |
| Logrout_url | Opcional. URL de la página de cierre de sesión de la comunidad de Lightning de Salesforce |
| OAUTH2_AUTHORIZE_Endpoint | Punto final de autorización de OAuth 2.0 de la comunidad de Lightning de Salesforce |
| OAUTH2_USERINFO_Endpoint | Punto final de información del usuario del servidor API |
| Oauth2_client_id | Clave del consumidor de la aplicación conectada (copiada antes desde la vista de la aplicación) |
| OAUTH2_SCOPES | OAUTH 2.0 SCOPES para solicitar durante la autenticación, separado por comas |
Ejemplo:
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 Consejo: puede colocar estas tareas variables en un archivo llamado .env en el directorio raíz del proyecto para el desarrollo y las pruebas.
Nota: Si no se proporciona la variable LOGOUT_URL los usuarios se redirigirán a la página de inicio de sesión del sitio web inmediatamente sin ida y vuelta externa.
Instale las dependencias Node.js.
yarn installOungue el servidor de desarrollo que ofrece recarga en vivo ...
yarn dev ... o genere primero los archivos HTML estáticos y luego sirva estos archivos desde el directorio dist .
yarn generate
yarn startAbra su navegador en http: // localhost: 3000
Licencia de MIT
