Funcionamiento del curso

Objetivo

Es importante establecer que este no es un curso expositivo. Su objetivo es enseñar a los participantes sobre el Store Framework de VTEX IO a partir de actividades prácticas. Por lo tanto, para que sea posible avanzar, es necesario que se invierta un poco de su tiempo y dedicación.

Al comienzo del curso usted recibió un repositorio con código mínimo y queremos que, al completar todas las tareas, lo haya transformado en una tienda completa y funcional.

Introducción

El curso está dividido en etapas. Al comienzo de cada etapa, usted recibirá instrucciones iniciales, como ya recibió en esta y en la anterior. Debe leer todo el contenido presentado y recibirá, al final, una pequeña actividad.

Para que sus respuestas se envíen, siga los siguientes pasos:

1. Abrir una nueva ventana de VSCode.
2. Ejecute Ctrl + Shift + P (Cmd + Shift + P).
3. Digite git clone .

4. Digite el nombre del repositorio como https://github.com/pascal1989/store-framework .
5. Confirme y seleccione el lugar donde desea descargar el repositorio.
6. Haga clic en Open en la notificación que se abre en la esquina inferior derecha.

7. Abra la página de instalación de nuestro robot de pruebas y haga clic en Configure.
   • ⚠️ Note que este bot es diferente del bot de GitHub Learning Lab. Este es responsable de analizar la respuesta en cada etapa del curso.
8. Seleccione Only selected repositories, haga clic en Select repositories y digite store-framework .
9. Haga clic en pascal1989/store-framework y haga clic en Install.

Enviando sus respuestas

Cuando haya terminado de leer todo el contenido y de realizar la actividad propuesta, debe enviar su respuesta siguiendo los pasos que se indican a continuación:

1. Haga clic en Source Control, en el menú lateral de VSCode.

2. Haga clic en + en la sección de CHANGES.

3. Escriba algún mensaje que represente su alteración. Por ejemplo:

4. Haga clic en ✓ (Commit).

5. Haga clic en la esquina inferior izquierda.

6. Cuando aparezca una nueva ventana, coloque el nombre del Branch que se le dio al comienzo del texto y haga clic en
   + Create new branch...

7. Para finalizar, haga clic en la nube en la esquina inferior izquierda:

Cuando termine de hacer el flujo completo, nuestro robot responderá si logró o no acertar la respuesta que esperábamos. Si es así, obtendrá una respuesta como:

En seguida, recibirá otra respuesta que le indicará los siguientes pasos:

Si está familiarizado con el git, todo este flujo equivale a crear un branch con un nombre predefinido, hacer commit de los cambios y dar push.

Intentándolo nuevamente

A lo largo del curso, es posible que no pueda completar la actividad correctamente en el primer intento. Si esto sucede, recibirá un mensaje de feedback que le indicará cuál fue el porqué de la falla:

Usted puede enviar tantas respuestas como quiera, basta rehacer todo el proceso explicado en la sección anterior.
⚠️ En el ítem 6 no será necesario rehacer todo, ya que el branch del step ya ha sido creado. En el ítem 7, en vez de ver una nube, usted verá algunas flechas, basta hacer clic en estas para reenviar:

Progreso del curso

En cualquier momento del curso, usted puede acompañar su progreso volviendo a la página de inicio. En esta, se indicarán todos los steps que ya completó y un botón para que vuelva al step desde donde lo dejó:

No olvide enlazar

En todo momento, al abrir el terminal VSCode, puede ejecutar un vtex link y acompañar la evolución de su proyecto en https://{workspace}--{conta}.myvtex.com . Asegúrese de que visualmente la solución es equiparable con lo que se presentó y que no se haya producido ningún error en el enlace.

⚠️ Cuidado ⚠️

No cree issues y PRs durante el flujo del curso, ya que esto puede interferir en su funcionamiento.

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

Para continuar haga clic en Close issue

Hello, World!

✨ Branch: richtext

Introducción

Comencemos nuestra jornada a través del clásico "Hello, World!". Para crear algo como esto, necesitamos conocer los bloques del Store Framework y usar uno que nos permita crear textos. Este bloque se llama Rich Text.

Rich Text

Rich Text es solo una de las decenas de bloques disponibles en el Store Framework. Es un bloque que parece simple, pero que permite una serie de personalizaciones para crear textos. Para empezar, todo el texto escrito en Rich Text soporta el lenguaje Markdown, esto hace con que la estilización del texto sea mucho más fácil.

Revisando la documentación del bloque es posible encontrar la especificación técnica. Una de las secciones presentes es la de Blocks API en la que puede ver la lista completa de propiedades (props) que posee el Rich Text. Las propiedades son el principal punto de personalización de un bloque, son las que garantizan que un mismo bloque pueda verse y comportarse de manera completamente diferente, dependiendo de cómo esté configurado.

Comenzando

Comencemos, entonces, a personalizar el home page. En su tema es posible encontrar un archivo llamado home.jsonc en la carpeta /store/blocks . En este archivo se determina la organización de los bloques que se desea utilizar. El lenguaje para la composición del layout es simple y está basado en JSON.

En home.jsonc se ve un bloque que es estándar en todos los temas: store.home . Este bloque determina los bloques hijos que se mostrarán en el home page.

{
  "store.home": {
    "blocks": []
  }
  ...
}

Entonces, vamos a usar el Rich Text en su cuerpo:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  }
  ...
}

De esta forma, el store.home ahora sabe que necesitará renderizar un Rich Text. Sin embargo, aún no hemos especificado cómo se ve este Rich Text. Para esto, necesitamos hacer una definición de bloque.

Definición de bloques

La definición de bloques se debe hacer siempre fuera de cualquier otro bloque, en el nivel de la raíz del archivo JSON.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Aquí el bloque está siendo usado dentro de otro
    ]
  },
  "rich-text": { <----- Aquí está en la raíz
  }
}

En la definición es posible determinar el comportamiento y aspecto de un bloque. Para esto, deben usarse puntos de personalización, comenzaremos usando las props del Rich Text:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {

    }
  }
}

Consulte nuevamente la documentación del Rich Text y definamos, entonces, las props que usaremos para personalizarlo.

Queremos hacer un simple "Hello, World!", examinando las props vemos una que se llama: text (Text written in markdown language to be displayed). Esta es, entonces, la prop que determinará cuál texto será exhibido.

Incluyendo esta prop tenemos, entonces:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "Hello, World!"
    }
  }
}

Revisando la documentación del Markdown vemos que para dejarlo en cursiva basta colocar * antes y después del texto:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*"
    }
  }
}

Para centrarlo, podemos agregar la prop textPosition y atribuirle el valor CENTER:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*",
      "textPosition": "CENTER"
    }
  }
}

Actividad

Defina un Rich Text en su home y cree un texto "Hello, World!" en negrita y alineado a la derecha.

ℹ️ Recuerde acceder a la documentación del Rich Text si tiene alguna duda durante la actividad.

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

Store Framework 101

Antes de comenzar a poner manos a la obra, veamos algunos conceptos importantes a los que se hará referencia de forma recurrente a partir de ahora.

Introducción

Store Framework es una herramienta commerce low-code de construcción de frentes de tienda únicas y personalizadas.

El flujo de construcción es mediante la personalización de un tema que se puede trabajar en diferentes workspaces sin impactar el ambiente de producción.

Tema

Un tema es, esencialmente, un arreglo de bloques y sus posiciones. En este se definen todas las personalizaciones, posiciones y estilos de cada uno de los bloques que lo componen. También es posible declarar nuevas páginas en un tema que, en el futuro, pueden representar páginas institucionales o landing pages promocionales (día de la madre, black friday, cyber monday). El resultado final de un tema y el contenido que lo compone es el frente de una tienda.

Bloques

Los bloques son la abstracción mínima en el Store Framework. Estos declaran pequeñas piezas que componen el layout de una tienda. Por más simples que parezcan, los bloques tienen un alto poder de personalización, lo que permite que sea posible alcanzar diseños complejos. Hay cuatro niveles de personalización para los bloques:

• Estilo semántico (styles).
• Propiedades (props).
• Clases css (handles).
• Hijos (children).

Workspaces

Ambientes de trabajo protegidos que representan una copia muy cercana a lo que existe en producción, permitiendo la evolución de los temas sin afectar nada en la tienda.

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

Para continuar, haga clic en Close Issue

Configuraciones básicas

Introducción

Antes de comenzar a poner manos a la obra y aprender más sobre el Store Framework de VTEX IO, usted debe realizar algunas configuraciones básicas, como:

• Instalar Git.
• Instalar Toolbelt.
• Hacer login en una cuenta VTEX.
• Crear un workspace de desarrollo.
• Enlazar sus archivos locales con la plataforma.

A continuación, consulte el procedimiento para cada una de estas configuraciones:

Instalando Git

Instale Git en su computadora accediendo al siguiente enlace y seleccionando el software usado por su computadora (Windows, MAC o Linux):

https://git-scm.com/downloads

Instalando Toolbelt

Toolbelt es la herramienta de línea de comando de VTEX IO. Este le permite realizar cualquier actividad en la plataforma, como crear un nuevo workspace de desarrollo, iniciar sesión en una cuenta VTEX, desarrollar nuevas apps, gestionar las ya existentes, etc.

Dado que Toolbelt es el que establece la comunicación entre el desarrollador y la plataforma, usted lo necesitará para lograr realizar todas las actividades propuestas durante el curso de Store Framework.

1. Instale Node.js. Si la computadora que usted está usando es MAC, instale también Yarn.
2. Ejecute el comando npm i -g vtex en su terminal si usted está trabajando de un Windows y yarn global add vtex en MAC.

Usted puede ejecutar el comando vtex-v (Windows) o vtex (MAC) para confirmar si la instalación de Toolbelt ocurrió como se esperaba.

Con la instalación concluida, su próximo paso debe ser iniciar sesión en una cuenta VTEX.

Iniciando sesión

1. Ejecute el comando vtex login contaVTEX en su terminal, reemplazando contaVTEX con el nombre real de la cuenta en la que desea trabajar. Por ejemplo, vtex login appliancetheme .

2. Una vez que haya iniciado sesión, ejecute el comando vtex whoami para confirmar en qué cuenta y workspace usted está.

Workspaces no son más que espacios de trabajo. En la plataforma VTEX IO, las cuentas tienen tres tipos principales de workspaces: master, de producción y desarrollo.

El siguiente paso hará que se cree un workspace de desarrollo para usted, permitiendo que las configuraciones realizadas en las actividades del curso no cambien la versión pública final de la tienda.

Creando un workspace de desarrollo

1. Ejecute vtex use nome-do-workspace, reemplazando nome-do-workspace con el nombre deseado. Por ejemplo, vtex use devworkspace .

Visualizando su workspace

Una vez creado su workspace, podrá acceder a este desde el enlace https://{workspace}--{cuenta}.myvtex.com, reemplazando {workspace} y {cuenta} con el workspace creado anteriormente y el nombre de la cuenta, respectivamente. Por ejemplo, https://devworkspace--appliancetheme.myvtex.com

Enlazando sus archivos locales

Al ejecutar vtex link a partir de la carpeta donde están los archivos de su tema, estos pasarán a ser automáticamente sincronizados con la plataforma de VTEX IO. Esto significa que cualquier alteración que usted haya realizado y guardado será reflejada en el workspace y en la cuenta en que usted esté conectado, y podrá visualizarse a través de la dirección descrita anteriormente.

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

Con todas las configuraciones básicas completadas, ¡usted está listo para comenzar el curso!

Para continuar, haga clic en Close Issue