Introducci贸n a Gatsby

1

驴Por qu茅 Gatsby? Seguridad y Velocidad

2

驴Qu茅 es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuraci贸n de ESLint

Fundamentos de Gatsby

7

Presentaci贸n y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicaci贸n

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

驴C贸mo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalaci贸n y configuraci贸n de plugins

17

Im谩genes como fuente de datos

18

Plugins de transformaci贸n

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducci贸n a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en l铆nea

23

Productos en React

Generando p谩ginas program谩ticamente

24

Creando p谩ginas en funci贸n de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producci贸n

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Agregando productos a nuestra tienda en l铆nea

22/33
Recursos

Para usar Stripe desde nuestra aplicaci贸n con gatsby necesitamos instalar los siguientes plugins:

npm i gatsby-source-stripe gatsby-plugin-stripe

Adem谩s, la librer铆a dotenv nos permitir谩 acceder a nuestras variables de entorno para usar a las llaves privadas de Stripe:

npm i dotenv

Luego de esto debemos a帽adir los plugins al archivo gatsby-config.js:

// gatsby-config.js
require('donetv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: { /* ... */ },
  plugins: [
    /* ... */
    `gatsby-plugin-stripe`,
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: [`Sku`],
        secretKey: process.env.STRIPE_SK,
      },
    }
    /* ... */
  ],
};

De esta forma tendremos disponibles los productos de Stripe desde el servidor de GraphQL en Gatsby:

# localhost:8000/__graphql

query {
  allStripeSku {
    edges {
      node {
        id
        price
        product {
          name
          metadata {
            description
            wear
            img
          }
        }
      }
    }
  }
}

Aportes 22

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para los que tienen problemas con el allStripeSku. Revisando lo compartido por otros compa帽eros llegu茅 a la siguiente soluci贸n:

En el archivo gatsby-config.js cambiar

objects: [`Sku`],

por

objects: [`Price`],

y el querry de graphql queda as铆

query{
  allStripePrice{
    edges{
      node{
        id
        unit_amount
        product{
          name
          metadata{
            img
            description
            wear
          }      
        }
      }
    }
  }
}

donde unit_amount es el precio del producto

隆C贸mo me gustar铆a que existiera una tienda de Stickers de Platzi!

Todas mis quincenas se ir铆an all谩.

Como no existe hay que estudiar mucho para aprobar las carreras 馃挭馃殌

En este momento la propiedad allStripeSku no se toma en el query, esto es debido a que seg煤n la documentaci贸n de Stripe a los productos solo se les puede crear un Sku cuando son de tipo good, por defecto, Stripe los crea de tipo service:

Esto significa que hay que empezar haciendo que los productos sean de tipo good, lo que no es posible (o al menos no encontre la forma) por medio del dashboard de Stripe, la soluci贸n que encontre a esto fue utilizar el CLI de Stripe el cual permite crear los productos especificando cada una de sus propiedades entre ellas el tipo:

**Es importante colocar el falg -d con el valor que aparece en la imag茅n, ya que sin el atributo name Stripe no permite crear los Sku **

De esta forma se crea el producto y en el dashboard ya es visible un apartado para crear los Sku y poder accesar al allStripeSku en GraphQL.

Esta parte me pareci贸 bastante interesante. El curso me est谩 gustando mucho.
.
Al ser la primera vez que estoy haciendo algo con GatsbyJS a煤n no comprendo del todo el flujo de desarrollo de una aplicaci贸n de este tipo, para que pueda iniciar un proyecto yo solo.

Con los productos que se crean el dashboard de stripe no se puede utilizar el allStrypeSku, esto es porque estos productos se crean de tipo service, para poder utilizar allStrypeSku se deben crear la productos de tipo good.

La soluci贸n que encontr茅 fue instalar el stripe CLI en mi maquina ,en este enlace muestra como instalar. https://stripe.com/docs/stripe-cli

Luego de instalar ejecuto el comando

stripe login

con el inicio sesi贸n
luego podemos crear un producto desde la terminal

stripe products create --name="stiker" --type="good" -d "attributes[0]"=name 

No coloco m谩s valores porque puedo completar estos valores regresando al dashboard de stripe y completo los valores del productos (precio, imagen, metadata etc.)

En el archivo gatsby-config.js agrego una l铆nea, en la configuraci贸n del plugin

{
      resolve:`gatsby-source-stripe`,
      options:{
        objects: ['Sku','Product'],
        secretKey: process.env.STRIPE_SK,
        downloadFiles: true,
      },
    }

Vuelvo a ejecutar el c贸digo de GraphQL y ya se muestran los productos Sku o tambi茅n puedo utilizar el allStripeProduct que tambi茅n me muestra algunas de las propiedades del producto.

Considero que esta soluci贸n es c贸mo hacer un poco de trampa y no s茅 si es la correcta pero me funciono.

Guia rapida para crear los productos con SKU en Windows

Vayan a la documentaci贸n CLI https://stripe.com/docs/stripe-cli

Bajen el archivo, descompriman lo, y p贸nganlo en el directorio de su preferencia.
Por ejemplo: Yo lo puse en el directorio del proyecto.

Para llamarlo, la misma consola te dice que es

.\stripe

entonces ya pueden hacer login:

.\stripe login
  • Aseg煤rense de tener su sesi贸n de stripe abierta, la del navegador.
    Lean, bien todo, les va a dar una frase, y solo tienen que dar ENTER para que se abra el navegador, y revise su sesi贸n en stripe para vincular el CLI con su cuenta. Listo funciona como magia, ahora ya pueden usar el CLI

Pueden usar el comando que dio otro compa帽ero para crear el producto:

.\stripe products create --name="Sudadera Platzi" --type="good" -d "attributes[0]"=name

Pero tiene truco, as铆 no funciona 贸 al menos a mi no me funciono, me funciono as铆:

.\stripe products create --name="Sudadera Platzi" --type="good" -d"attributes[0]"=name

Si, el -d pegado -d"attributtes"...

Listo ya crearon un producto, ya puede tener SKU, pueden ir al dashboard de stripe, crearle un SKU **Recomendado

O crearlo en consola con algo as铆:

.\stripe skus create --name="Gold Special" --price=1500 --currency=usd -d"inventory[type]"=finite -d"inventory[quantity]"=500 --product=prod_HPMZEBiNddCUVb

En la parte final, --product=ID_DE_SU_PRODUCTO, lo copian de su dashboard de stripe.

Si lo crean desde consola, en la parte del SKU les aparecera un boton en gris/deshabilitado que dice 鈥榰sar con checkout鈥, para que aparezca habilitado, ahi les dice que no permite productos finitos solo cambien:

.\stripe skus create --name="Gold Special" --price=1500 --currency=usd -d"inventory[type]"=infinite --product=prod_HPMZEBiNddCUVb

Igual, al final --product=ID_DEL_PRODUCTO_QUE_QUIEREN_GANE_EL_SKU

Bueno, llegaste al final, ya deberias de haber podido crear un producto desde consola, agregarle el SKU, correr el stripe-cli en Windows, pero seguramente aun no sabes como hacer que Gatsby te tome los Sku que tienes en tu cuenta, no, yo tampoco pude, funciono todo menos eso鈥 tambi茅n

  • Revise la documentaci贸n del plugin y agregue 鈥楶roduct鈥 a object, y no funciono. object: [鈥楶roduct鈥, 鈥楽ku鈥橾
  • Intente Sku en la configuraci贸n en mayusculas y minisculas.
  • Cambie la SK por PK y no funciono.

Tomar茅 la soluci贸n r谩pida de cambiar en gatsby-config.js

objects: ["Sku"],

por

objects: ["Price"],

con este query se obtiene la informaci贸pn necesaria

query GET_ALL_STRIPE_PRICE{
  allStripePrice {
    edges {
      node {
        id
        product {
          name
          metadata {
            description
            wear
            img
          }
        }
        unit_amount
      }
    }
  }
}

Si se quieren ahorrar los console.log para ver si estan llegando los datos al componente recomiendo instalar la extension de react

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Y listo 馃槃

Tienen un typo en los recursos **dotenv **dotnev

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

a Alguien m谩s le arroja este error ?


 ERROR #11321  PLUGIN

"gatsby-source-stripe" threw an error while running the sourceNodes lifecycle:

No Stripe secret key found in gatsby-config

  30 |   } = actions;
  31 |   checkForStripeObjects(objects);
> 32 |   checkForSecretKey(secretKey);
     |   ^
  33 |   const stripe = new Stripe(secretKey, {
  34 |     appInfo: {
  35 |       name: "Gatsby.js Stripe Source Plugin",

File: node_modules/gatsby-source-stripe/gatsby-node.js:32:3



  Error: No Stripe secret key found in gatsby-config

tuve problemas con el archivo .env, nisiquiera me salia el icono al crearlo. para resolverlo lo que hice fue hacerlo un archivo de js

.env.development.js

y en las config de gatsby lo llame de igual forma:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}.js` 
})

espero les funcione igual si tienen el mismo error que yo 馃槂

Agregando productos a nuestra tienda en l铆nea

Para usar Stripe desde nuestra aplicaci贸n con gatsby necesitamos instalar los siguientes plugins: npm i gatsby-source-stripe gatsby-plugin-stripe

Como tambi茅n usaremos las claves del archivo .env, necesitamos instalar npm i dotenv

gatsby-config.js:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`
})

module.exports = {
  siteMetadata: {
    title: `Platziswag`,
    description: `El mejor swag de Platzi disponible para ti`,
    author: `@MiguelAngelRe28`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-stripe`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: [`Price`],
        secretKey: process.env.STRIPE_SK,
      }
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: 'src/utils/typography.js',
      }
    }
  ],
}

query:

query {
  allStripePrice {
    edges {
      node {
        id
        unit_amount
        product {
          name
          metadata {
            img
            description
            wear
          }
        }
      }
    }
  }
}

Encontre y solucione el error de SKU espero les pueda servir de algo.
Aunque los productos con sku se hacen a traves de la consola, asi que lo mejor es cambiar a objects: [鈥榩rice鈥橾.
Instale esta dependencia
npm i @stripe/stripe.js

source-stripe
{
resolve: gatsby-source-stripe,
options: {
objects: [鈥楶rice鈥橾,
secretKey: process.env.GATSBY_STRIPE_SECRET_KEY,
downloadFiles: false,
}
Agregue otro archivo en utils = stripe.js

  • This is a singleton to ensure we only instantiate Stripe once.
    */
    import { loadStripe } from 鈥淍stripe/stripe-js鈥

let stripePromise
const getStripe = () => {
if (!stripePromise) {
stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY)
}
return stripePromise
}

export default getStripe

Y por utimo .env.production y .env.development lleban esto
GATSBY_STRIPE_SECRET_KEY=tu_key_aca
GATSBY_STRIPE_PUBLISHABLE_KEY=tu_key_aca

Reiniciar el servidor y todo bien

Pregunta: 驴Si antes del proceso de compra quisiera, por ejemplo, hacer un m贸dulo para cotizar los productos (es decir, saber el precio antes de comprarlos como en un proceso de cotizaci贸n o contrataci贸n) puedo hacerlo desde mi propio c贸digo o desde un servicio de estos?

No entiendo porque en los tutoriales no tienen problemas con el allStripeSku

Alguien me puede ayudar con este error que no me permite avanzar.

Que grande es la comunidad de Platzi. Siempre hay h茅roes sin capa 馃挌

odio los errores de c贸digo son de lo peor

(鈺扳枴掳锛夆暞锔 鈹烩攣鈹

no funciona el allStripeSku

allStripeSku no lo toma en el Query. Alguien me puede ayudar con alguna solucion?

Existe alg煤n plugin de gatsby como alternativa a Stripe?

Tengan cuidado con la Confg que dejaron en la descripci贸n, tiene un typo

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

Ya intente varias veces en object![](url)
Primero Sku, luego cambie a los que me suger铆a en la consola, se que a unos les funciona con Price pero no entiendo este problema