Giter Club home page Giter Club logo

teatime's Introduction

Proyecto para practicar Salesforce en el equipo de Teco

Este proyecto tiene como objetivo poner en practica conocimiento que vamos aprendiendo sobre como desarrollar en Salesforce

Modo de Trabajo

Vamos a usar el concepto de Source Drive Development.

Basicamente lo que decimos es que nuestro "source of truth", fuente de verdad del codigo, estara en Github.

Cada uno que quiera desarrollar algo debera hacer un clone del repo, crear una scracth org, es decir una instancia efimera de desarrollo, donde podra probar y testear, y cuando este listo hara el pull request de la funcionalidad nueva.

Crear una DevHub

Primero de todo les pedimos que cada uno tenga su DevHub, si aun no tienen uno pueden:

  1. Crear una cuenta developer que no expira nunca. Formulario Si necesitan una guia paso a paso

  2. Crear una cuenta Omni Studio Trial que expira a los 180 dias.Formulario

Una vez que tengan hagan un login en el browser y configuren:

  1. Setear que la password no expire.
  2. Poner la Org como DevHub

Instalar Salesforce CLI

Saleforce CLI es la herramienta de linea de comando que nos permite subir codigo a nuestra scracth, y bajar de la misma distinto metadatos que son creados dentro de la UI de SF.

Bajar el CLI

Cualquier cosa consultar la guia de instalacion

Conenctarse al DevHub

Ahora que tienen el cli y el devhub, tenemos que autenticarnos a fin de el cli puedan conectarse al devhun y crear scratch orgs.

Con el siguiente comando nos autenticamos y a su vez lo seteamos a este devhub como default (-d). Si no lo ponemos default, ya sea porque tenemos otros DevHubs, al crear una scratch tendriamos que decirle desde que devhub la tiene que crear.

sf org login web -d -a myhuborg

si no funciona el login web, esto puede pasar en algunos windows, pueden usar el flujo de device

sf org login device -d -a myhuborg

Hacer el clone del repo

Antes de bajar el Repo localmente fijense que tengan git en su compu. Sino pueden instalar Github Desktop o bien usar por linea de comandos instalando Git

En su directorio de trabajo hagan un clone del repo

git clone https://github.com/sebastianclaros/teatime.git

cd teatime

Crear una scratch org

En la carpeta scripts/automation hay una serie de scripts que automatizan las tareas antes de empezar a desarrollar un requerimiento. Ver mas sobre scripts de automatizacion

Sino pueden hacerlo paso a paso manualmente. Vayan al directorio de teatime, y ahi con la linea de comandos va a ser crear la scracth desde nuestro DevHub

sf org create scratch --set-default --definition-file=config/project-scratch-def.json --duration-days=7 --alias=prueba

Ahora subimos el codigo

sf project deploy start

Asignamos Permisos

sf org assign permset --name=adminCatalogo

Subimos datos

sf data tree import --plan=data/plan.json

Abrimos la organizacion de desarrollo en el browser

sf open org

sino lo abre (pasa en algunos windows) se puede ejecutar asi, copian la url y la pegan en el browser

sf open org -r

Si hay error al abrir la org, hay que hacer login con user y pass. Para eso, resetear password de la scratch org con el comando

 sf org generate password --target-org <username-or-alias>

Instalar Visual Studio

Como herramienta de desarrollo usaremos VS Code.

Si no lo tienen instalado sigan trailhead o busquen en confluence la guia Visual Studio Code

Les dejo algunas extensiones utiles:

  1. Salesforce Extension Pack
  2. Salesforce Extension Pack Expanded
  3. Salesforce CLI Integration
  4. Replay Debugger
  5. Apex PMD

Ahora desde la carpeta de teatime abran el VSCode

code

Manejo de Proyecto

Desarrollar

Antes de desarrollar una story tenemos que preparar el entorno. Lo primero es bajar lo que esta en la branch remota y crear una nueva branch desde ahi para hacer el codigo nuevo. Despues tenemos que crear una scracth org con el codigo, los datos y la asignacion de permisos, a fin de poder desarrollar y testear nuestro requerimiento

Para simplificar creamos un script que hace todo esto !

./scripts/scratch/create.sh <referencia>

Si el desarrollo del requerimiento termino entonces se puede correr

./scripts/scratch/close.sh 

Documentacion

Usamos la libreria de Docusaurus, y agregamos una carpeta en scripts/docs para automatizar o sincronizar con la metadata.

Para correr la documentacion localmente:

yarn doc:start

Para ver la documentacion online

teatime's People

Contributors

chiappeh avatar elianashim avatar fedebati avatar mgcalderonteco avatar pablo-andersen avatar sebastianclaros avatar

Stargazers

 avatar

Watchers

 avatar  avatar

teatime's Issues

[filtros] Opciones para customizar la App

Los componentes podrian tener propiedades para que el admin pueda armar una experiencia customizada.

  • Al crear un filtro el componente podria o no ocultarse (configurable)
  • Al quitar un filtro deberia volver a visualizarse (y podria limpiar el filtro o no configurable)
  • Algunos componentes podrian ya tener valores fijos, ejemplo el Catalogo

Ejemplo al poner un rango de precios podria automaticamente ocultarse el componente, y al quitarlo que vuelva a aparecer ( algo similar a lo que uno usa en Mercado Libre), esto permite no estar scroleando para buscar el componente, y si el orden esta bien pensando, va quedando como una secuencia de preungtas.

Image

[import data] agregar al data precios de lista

El JSON que importa datos no trae precios.

Hay que crear una lista de precios standard, y podria tb crearse alguna lista mas.

Y despues poner un price a cada producto por c/u de las listas

[productDetail] Armar una mas generica

Ver como se agregam campos, y secciones

Estos campos deben viajar a la getProducts.

Desacoplar el product Detail para que se pueda ver en escritorio en 3er columna, en tablet en la 2da

actualizar Readme

  • Actualizar los comandos de SF en el Readme
  • Actualizar la ceracion de la scracth para que tome ingles por default
  • Agregar tabs de contact y account a la app

evolucion del product filter

  • Dividir los filtros en subcomponentes
  • soportar una api para customizar los filtros
    Cada componente tiene que emitir un evento con el array de terms
    El productFilter toma estos datos y los manda

Caso 1: Agregar un filtro nuevo
Caso 2: Modiicar un filtro
Caso 3: Eliminar un filtro

Caso 4: Combinacion de varios filtros

[config scratch] Debugging de LWC en consola - Session Settings

Deshabilitar Lightning Web Security para que permita hacer debug del código JS desde la consola de chrome.
Si está habilitado, todos los console.log generados por los LWC salen asociados a un mismo archivo "aura_prod.js" haciendo imposible saber de cuál componente proviene ese log, y abrirlo para debugear.

Ejemplo:


Se propone destildar la checkbox (colocar en false) para que los logs salgan asociados a sus respectivos archivos JS:


Resultado:

Abriendo el archivo asociado al log:

productShowFilter

recibe filter que es un json y cuando borra un item emite un evento onchange emite el filter completo

El formato del json es una array de terms, donde cada term es un objeto asi:
{ "label", "", "field", "", "value", "", "operator": "" }

Image

Image

adaptar la getProducts para recibir un json

ver si recibe un string (serializado) vs un objeto

el Json de filter deberia una lista de terminos, donde cada termino tiene 3 propiedades, dos mandatorias field, y value, y optativa operator (por omision es =)

Ejemplo simple:
[ {"field": "field1", "value": "value1"} ]

Ejemplo complejo:
[ {"field": "field1", "value": "value1", "operator", ">"}, {"field": "field1", "value": "value2", "operator", "<"}, {"field": "field2", "value": "value3"} ]

Image

productGrid

La product Grid o guilla de producto tiene que ser similar a la grilla de ebike. Por cada producto tiene que mostrar la productCard y pasarle los datos

Image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.