The template repository for the Store Framework course on Learning Lab.
clauherediaz / store-framework Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://lab.github.com/vtex-trainings/store-framework-espanol
Home Page: https://lab.github.com/vtex-trainings/store-framework-espanol
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 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.
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.
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"
}
}
}
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.
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.
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.
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.
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.
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:
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.
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏
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:
A continuación, consulte el procedimiento para cada una de estas configuraciones:
Instale Git en su computadora accediendo al siguiente enlace y seleccionando el software usado por su computadora (Windows, MAC o Linux):
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.
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.
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
.
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.
vtex use nome-do-workspace
, reemplazando nome-do-workspace
con el nombre deseado. Por ejemplo, vtex use devworkspace
.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
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.
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏
Con todas las configuraciones básicas completadas, ¡usted está listo para comenzar el curso!
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.
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:
git clone
.https://github.com/clauherediaz/store-framework
.Open
en la notificación que se abre en la esquina inferior derecha.store-framework
.clauherediaz/store-framework
y haga clic en Install.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:
Source Control
, en el menú lateral de VSCode.+
en la sección de CHANGES.✓
(Commit).+ Create new branch...
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.
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 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ó:
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.
No cree issues y PRs durante el flujo del curso, ya que esto puede interferir en su funcionamiento.
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.