[Desenvolvimento][Interno] Explicação Frontend

Aí inseria ela novamente operação Olá tudo bem eu vou mostrar aqui o todo o código fonte do catálogo mobile na parte frontend Eu vou tentar ser bem vou tentar ser bem breve aqui mas vou mostrar todo o código fonte Então não sei quanto tempo vai levar eu imagino que no máximo uns 30 minutos tá então primeiramente o catálogo mobile ele é um gerador de catálogo em PDF Então o nosso cliente ele vai ter os produtos dele lá Vai ter o cadastro de produtos vai ter o cadastro de clientes vendedores etc E quando ele entrar lá

ele vai colocar em gerar PDF e vai gerar um PDF como tá aqui no no nosso site Então a essência do sistema é esse né então falando de frontend a primeira coisa que eu acho importante é a gente vê a interface do front end com o back end né então a gente usa uma API de integração então a gente usa o conceito né de API Rest Deixa eu só colocar na tela aqui Vamos Ver Pode ser isso daqui Então a gente usa esse conceito aqui de API R Basicamente o front vai consumir ali né a

API que vai tá lá no nosso servidor o backend Então quem tá fazendo fronte com essa parte do backend vice-versa Essa PEST a melhor forma de você testar ela é usando aqui o Postman Então a gente disponibiliza esse Postman aí do catálogo É esse Postman aqui ele começa sempre com o login e com o ambiente Então aqui você escolhe o Ambiente Geralmente você vai estar escolhendo o ambiente de dev Aqui eu tô fazendo uma consulta então deixa eu ver se eu consigo abrir uma outra tela aqui Então a gente coloca lá deixa eu só voltar

aqui para um ambiente que eu tava senão ele vai me atrapalhar Bom então aqui eu coloco no ambiente de dev Esse dev ele precisa est configurado certinho nos environments ali Então aqui ó ambiente de dev URL esse daqui ó http 2./D.catalogmobile do catálogo mobile Então a gente sempre usa eh esse ambiente end deve para fazer os testes E basicamente é isso E então vamos lá Então aqui nas collections do catálogo eu começo sempre no login Então eu vou fazer um login com uma conta de deve Eh rodar um send aqui Ele deu o erro na

credencial Eu tenho as contas de dev elas vão ficar lá no Azana Então aqui no Azana ali no ele tá aqui em back end mas ele tem Ali ó usuários e banco de dados Quando a gente entra aqui aí a gente tem a lista ali de contas de dev A gente vai ver se vai ter em outro em outro projeto ali mas basicamente você vai ter um um login com as contas de dev Por que que a gente separa essas contas de dev porque cada conta de dev vai estar associada ou algum RP que a

gente integra Então o catálogo mobile a gente faz integrações com outros RPs Então aqui tem Bling tag Plus Esses RP são deixa eu mostrar aqui eles são sistemas que o nosso cliente usa para cadastrar seus produtos Não sei se vai dar para mostrar aqui mas esse blink é um RP que o cliente vai lá cadastra os produtos dele então aperta um botão isso vem direto pro catálogo facilita bastante aí a vida do nosso cliente Bom então tem várias contas deve Deixa eu entrar aqui nessa conta do do Bling Vou fazer o login aí Vou colocar

a senha Geralmente uso essa senha aqui É WN23 nessas contas de déficit Então eu fiz o login aí a API ela vai retornar ali um token e dados do usuário Para que que é importante saber isso na hora que você tiver fazendo uma nova tela ou na hora que você tiver fazendo uma tela e precisa saber se tem alguma informação você vai ver qual é a consulta Uma outra forma boa de fazer isso é você vai entrar lá dev.catalogem mobile que é o ambiente que vai est sempre no servidor de desenvolvimento Vai fazer login aqui

Eu já fiz login O que que eu gosto de fazer eu gosto de vir aqui em mais opções e opções do desenvolvedor do Google Chrome E aí eu venho aqui em network Aí aqui em network deixa eu atualizar a minha tela aqui porque aqui atualizei ele a tela Ele vai recarregar né vai fazer todas as chamadas da P E aqui em network ele vai me dar ali se eu for aqui só fet barra XR HR ele vai me dar todas as chamadas Então essa tela chamou todos essas pontos em API Então aqui vamos ver a

API essa daqui Então eu venho aqui em headers e vejo qual que foi a solicitação Então ele chamou lá dev/p1/users né ele pediu usuário edí ele teve a resposta e trouxe ali o usuário de dois Então usuário de dois o admin aqui as informações dele Eu gosto bastante de fazer isso porque daí eu consigo saber eh exatamente quais são os dados que a PI tá me dando naquela tela Eu acho o jeito mais fácil de fazer Então aqui ele também pediu a lista de categorias Então aqui em específico se eu for em headers ó ele

pediu limitado a 30 e a página um aí only super igual a false Então se a gente for ver ele vai ter pedido aqui limitado a 30 então no máximo 30 Só que aqui nesse cliente aqui nessa conta teste eu tenho quatro categorias né senão ia aparecer aqui embaixo uma listinha para você adicionar Eu vou Entrar no sistema de produção A gente também tem uma conta de teste em produção que a gente usa Putz mas esse aqui tem pouco produto Eu vou entrar n um cliente que a gente eh seguindo dá suporte pros clientes Vamos

ver se eu tenho aqui alguma conta de cliente faço A FA não tá utilizando mais Quando o cliente para de utilizar a conta espira ali Vamos ver se eu acho um cliente aqui E como a que tá dando mais suporte Aí achei um cliente aqui Aí ele tem bastante categoria ó Então ele tem 100 categorias Então ele pediu aqui 30 e aí retornou ali uma uma lista né e esse componente aqui em específico ele é bem antigo Eh os nossos clientes eles pedem pra gente na visão do cliente final que a gente tem a visão

do cliente é admin né e tem a visão do cliente final e do cliente vendedor Então na visão do cliente eles Sempre pedem pra gente não ter isso daqui para ser uma coisa contínua Então é o que a gente também quer fazer Mas basicamente é o que eu quero mostrar é um por partes aqui porque senão vai a gente vai demorar muito Então aqui eu consigo ver fazer os testes na PI Então se você tiver fazendo uma nova tela que ainda não chama essa PI você pode usar aqui o Postman Aí o Postman ali o

desenvolvedor backend pode te ajudar a montar ou geralmente ele já dá montados Aqui pra gente Então todas as chamadas ali montadas Basicamente a chamada no catálogo Deixa eu pegar uma chamada comum aqui como get categories aqui por exemplo ó Então ele vai pegar as categorias da empresa e passa o ID da empresa E geralmente as chamadas elas vão ter um header com a autorização Aí tem o token É baseado nesse token que ele vai descobrir qual que é o usuário que tá fazendo aquela aquela chamada Então aqui ele tá listando as categorias Eu posso vir

em lá preview e eu consigo ver a lista de categorias que ele tá listando Aqui já dá para ter também uma noção do modelo de dados do catálogo Então aqui a gente tá vendo ali categoria subcategoria No catálogo a gente tem dois níveis de categoria uma categoria pai uma categoria filho E quando é categoria pai ele se esse SMAS category fica um Quando é filho ele fica zero E quando é filho ele tem uma referência pro pai Basicamente não vou Entrar tão a fundo disso porque é meu meu objetivo aqui mostrar o código fonte Então

eu gosto de começar assim né então de trás para frente fazendo como se fosse uma engenharia reversa vendo aqui o código fonte e vendo ali no nas opções avançadas na opção de network as chamadas que foram feitas para API Então essa é a primeira parte aí de como fuçar e como entender ali a estrutura do catálogo né aí dá para entrar em todas as as telas Aqui Então a gente tem uma tela de produtos onde o cliente vai cadastrar produto Quando a gente entra no produto a gente tem uma tela para editar esse produto Ele

vai poder fazer as edições ali do produto Em pedidos a gente tem uma lista de pedidos Quando a gente aperta em baixar ele vai no backend vai puxar o arquivo e daí vai jogar aqui no frontende Ó aí ele lista ali um Excel Eh essa tela aqui quando eu tô com o developer aberto do Google eu não sei Por mas ele estraga aqui o meu layout Então eu fechei aquela tela do developer do Google ele já voltou meu layout normal Então aqui eu consigo ver os pedidos Quando eu entro como admin eu consigo listar os

pedidos Quando eu entro os vendedores quando eu entro como vendedor ele não vai mostrar isso aqui vai mostrar só os meus pedidos como vendedor Aí eu tenho essa tela de gerar PDF é uma das telas é a tela mais complexa do sistema Eh esse código aqui ele todo feito em JavaScript e ele precisaria de uma modularização Eu venho fazendo isso Esse PDF Pro ele já tá um pouco modularizado Então a gente tem uma tela onde o usuário vai selecionar as prédefinições Aí selecionou uma série de questões aqui E aí quando ele aperta gerar PDF ele

vai gerar um catálogo em PDF Esse esse catálogo é gerado no frontend não no backend Então muitas vezes ele é bem demorado Tem muitas Melhorias aqui que a gente quer fazer Uma delas é mostrar pro usuário uma como se fosse um mostrar para ele ah carregando suas categorias carregando seus arquivos carregando suas fotos carregando categoria tal pro cara ficar olhando assim e se acalmar A outra delas é ter prédefinições aqui e essa tela ser uma tela mais avançada assim ter uma prédefinição mais fácil com as opções pré-definidas para que fique mais fácil ali essa essa

criação Ela é uma tela bem Bem robusta assim E a gente tem a tela de usuários onde o usuário ele vai cadastrar ali seus usuários E aí eu comecei a colocar aqui esses avisos nas telas Aqui é tipo uma forma de facilitar o nosso usuário mesmo conseguir configurar o sistema dele Então isso é algo que a gente também quer fazer mais Em todas as telas tem uma instrução que só aparece quando precisa algo ser feito Então aqui ó esse usuário ele não cadastrou ainda no menu sua empresa essa Informação então ele precisa cadastrar Aí essa

é uma instrução aí que eu queria quero colocar em outras telas também Quando a gente vai da em sua empresa aí tem uma série de configurações da empresa É uma tela um pouco esquisita assim mas ela é mais funcional que a Iex não é tão boa Eh então aqui eu teria que colocar aqui usuário público do catálogo teria que colocar cliente e aqui o prefixo Como eu tô em Dev em dev iss aqui não funciona então não adianta muito Mas quando eu tô em produção isso aqui funciona bem Então em produção nessa conta aqui que

eu tô aqui em produção ó Por aqui sua empresa eu vou ver o link público ó CCK Armas Aí se eu copiar isso daqui eu abro numa aba anônima e colo Aí ele vai a abrir a visão do cliente Esse específico aqui ele vem de armas É acho que é o cliente mais diferente que a gente tem Aí ele vem aqui vestuário para Armas Aí tem boné camiseta bem bem estranho mas tem cliente de tudo assim não é o nosso perfil normal de cliente mas é uma conta que dá para usar aqui de teste Então

aqui essa é a visão do cliente final Então o cliente final ele consegue navegar nos produtos consegue entrar e consegue fazer um pedido ó Consegue visualizar as fotos Isso aqui que o pessoal quer quer que aperte aqui essa foto fique maior essa coisa uma coisa Que é muito pedida Essa descrição se ela for a partir de um tamanho ele oculto automático E aí você tem que apertar Eh você pode ir mais aqui finalizar pedido E em finalizar pedido ele vai pedir umas informações básicas que ficam salvas pro cliente Aí quando você for enviar aí vai

ter enviado o pedido de fato né então essa é a visão do cliente Eh esse ponto aqui ó quando eu vou em em categorias ela lista todas as categorias mas quando eu for em produtos essa tela aqui que o Pessoal reclama muito ó que eles gostariam que fosse contínuo Então eu quero dar uma opção pro cara ter opção de ser assim porque venda mais técnica é legal que seja assim sabe o cliente ele lembrar lá pela página 10 pela página 11 E quando é uma um diferente o tipo de vendo aí eles gostariam de tirar

isso daqui que ele seja aquela rolagem automática Então isso é algo provavelmente que vai entrar como uma feature Eu escolhi um cliente meio meio Zoado aqui para para fazer a demonstração mas eu vou pegar um outro cliente aqui Agcado Os novos não Aqui ó Atacado Isso aqui é um cliente mais padrão mesmo que nosso E a gente vende muito para cliente de informática Aí aqui são produtos mais comuns aqui Aquele cliente de armas é bem estranho porque ele tem uma loja de armas e a esposa tem uma loja de produto natural É uma coisa meio

meio esquisita Eh então aqui mesmo exemplo só que Outros outra linha de produtos Então se eu for aqui em categorias vai listar as categorias do cliente Se eu entro no no produto esse aqui tá usando um nível só de categoria Aquele outro que eu mostrei tá usando dois níveis Tinha categoria e subcategorias Aqui só tem categoria e produto O catálogo não permite você colocar produto dentro de uma categoria pai Ela tem que tá sendo uma categoria filho Bom e aqui tem a pesquisa que é o que o pessoal quer aumentar aqui essa Tela Eh basicamente

é isso daqui Então vamos lá por apresentei o sistema como um todo né aqui o menu sua empresa Aí aqui existe um menu de integração Excel onde a pessoa exporta o arquivo Excel edita no computador dela e insere novamente Aqui o front diz aqui é bem simples mas aqui é algo que provavelmente no futuro a gente pode fazer uma nova tela aqui para se tiver erro no Excel a gente mostrar aqui mas isso não é tanta prioridade E a gente Tem o menu integrações Essa tela a gente mexe bastante porque a gente sempre tá adicionando

integrações ó Então cada integração nova que a gente adiciona aqui lá no frontend a gente faz alguma personalização Por exemplo aqui ó ome forem adicionar ele pede token esse filtro sank Se eu forem adicionar ele vai pedir mais coisa ó Você pede usuário senha token Então a gente faz uma uma pequena customização para para lançar isso daqui Depois a gente pode até parametrizar Seria interessante que tivesse um lugar só um arquivo que a gente editasse e automaticamente ele já viesse para cá Na verdade tem isso é no banco de dados que a gente coloca só

que no banco de dados a gente coloca tipo ah esse aqui é o ID do sistema Blink é o dois Aí no frontend aqui ó se for dois então muda as coisas Só que tá bom também Isso aqui funciona bem não é um grande problema mas a ideia é que a gente lote aqui de de sistemas Aqui a cada mês a gente integre um sistema novo porque isso gera muito resultado aí pra gente Bom então eu apresentei eh fiz um overview geral aí de sistema agora eu vou entrar no código fonte de fato Bom continuando

aqui então agora vamos entrar no código fonte de fato Eh o nosso código fonte ele fica armazenizado no gitab que é como se fosse um GitHub só que ele é não sei ele é gratuito a gente usa há muitos anos E coisas importantes aqui ó a gente vai Ter o o branch O branchmaster é sempre o que tá em produção ou seja quando a gente entrar lá em sistema Catalogmobile isso aqui vai ser sempre o o branchmaster sair desse cliente aqui porque não gosto muito desse desse produto E o brand que a gente usa de

desenvolvimento é esse Dev Angular 2 Tem outros brands aqui Eh quando a gente vai fazer uma uma feature e muito grande assim que vai demorar eh um pouco mais por exemplo aqui mãos e Mentes a gente cria um brand novo Então se você for fazer uma feature nova é meio grande assim que não vai ser tipo comitor e pronto aí aí dá para criar novos brints Mas a ideia é que sempre que terminar voltar para esse deb angular aqui pra gente manter ele sempre uma linha principal assim do código Como vai ter só eu e

você mexendo ou eu e você e mais uma outra pessoa não vai ter muita gente mexendo então a gente não deixa tão complexos aqui não Eh bom basicamente eh se eu preciso só colocar esse esse código aí na tua máquina Eu uso o Gitlab que é uma ferramenta que ajuda bastante Eh tá só na no no errado aqui É aqui ó Catálogo angular né não sei se tava mostrando certo ali Só ver se eu tava mostrando certo aqui Por lab é tá um certo Sim Bom então é o catálogo Angular né agora aqui dá para

ver certinho ó Tá vendo que quando eu vou criar uma função maior aí sim eu coloco eu crio aqui porque daí tem outros bugs que eu vou corrigindo em paralelo né bom então basicamente é isso É quando a gente entra no código fonte aqui eu uso o WebStore né acho acho prático E eu tava usando até a IA dele aqui mas eu parei de usar Bom então mostrar um pouco sobre a Estrutura do código né a primeira coisa é a questão dos environments Aqui a gente vai ter o environment de produção um local quando você

tiver programando na tua máquina agora não lembro se ele vai chamar esse ponto S ou ponto local Vamos descobrir então aqui ó na AP URL eu uso a local porque eu também faço backend Então no teu caso você vai usar é a remota né a remota é deve Eu usava o IP Mas não precisa Catálogo aqui deve Catálogo não vai Só testar ver se tá tá certo aqui A gente não usa https no dev mas no na produção a gente usa https Então aqui então vírgula aqui Então aqui eu vou dar um um run Se

a gente olhar o run agora não lembro onde é que é a configuração do run Não é no TS config nem no package né acho que é aqui Bom vou dar um run Vou ver o código que Ele executa ó Então ele dá um NPN runá Acho que não é nenhum desses desses outros daqui ó Ah tá Eu tenho como configurar né o run aqui em editurs Ó qual o comando isso daqui eh tinha vezes que eu usava esse outro aqui ó onde eu colocava aqui o host do IP da minha da minha máquina aqui

Eu podia testar no celular também Isso ajuda bastante porque aí você consegue ter aberto no celular e toda vez que você dá Um save no no computador ele ele atualiza no celular aqui Então eu usava bastante isso daqui Bom primeira questão se o código bastante antigo então ele é o Angular 2 então ele tá bem defasado Eh e aqui estão as dependências dele A gente tem um sério problema hoje em atualizar essas dependências Então a ideia é não atualizar Isso daqui dá tipo muita dor de cabeça porque você se você colocar por exemplo qualquer coisa

aqui que não seja para Angular do ele vai Quebrar e daí vai dar um causo assim Então se eu preciso muito de uma de uma dependência eu pesquiso dependências de 8 anos atrás ou pesquiso dependências que sejam compatíveis com Angular 2 Então por exemplo aqui ó essa é a nossa principal dependência JSFPDF Então até abrir ele aqui Quando a gente olha esse esse cara aqui ó a gente vai olhar ele no GitHub ele é super atualizado ó Então tá na versão 3.0 Aí a gente tá usando qual Versão ali 2.3 Então não é tão antiga

mas é antiga Por quê porque essas versões novas não vão funcionar no código angular antigo tá então essa é a primeira questão Eh o ideal fosse a gente conseguindo fazer atualizações porque a gente usa coisas mais novas aqui Então assim se você for conseguindo fazer atualizações e o código ficar estável ótimo mas não é o que eu recomendo Eu acho que faz mais sentido a gente a fazer em paralelo assim em Tentativas de atualização para não travar aí o o desenvolvimento sabe a ideia é que a gente precisa resolver os bugs do que tem hoje

e criar uma versão paralela com melhorias Mas a versão que ele tá usando ó 2 pon alguma coisa ó ela é não é tão antiga assim ó 2.2.3 ó 2021 Então não é tão antiga Eh mas só para avisar que tem que ter cuidado nessas atualizações aqui Então tudo aqui Angular 2 ó NG2 Então uma dica assim é ah precisa usar uma biblioteca nova Procura para Angular 2 vai ver bibliotecas de 7 8 anos atrás Então é é meio meio ruim mas é como é um código legado a gente ainda não atualizou Na hora que

a gente fala assim: "Ah vamos atualizar" Aí vai ficar bem mais fácil Então dito isso né cuidado dos environments ali as bibliotecas Aí você só dá um run e aí ele vai rodar o código fonte aí no teu computador Deixa eu abrir aqui em local host Vai ficar fácil Deixa eu jogar em Assim que ficar mais fácil Então aqui basicamente ele abriu Eh aqui não tá aparecendo nada Talvez ele esteja deslogado talvez eu tenha colocado a a API errada ali Então eu venho em developer tools ali como eu mostrei vou só conferir aqui em network

o que que foi Eu preciso atualizar a tela Ahim vai ficar fácil Então aqui em network eu vou eu consigo ter uma visão bem melhor do erro que tá dando Ele ficou em vermelho Se eu for aqui em Response é não sei se ele não tá logado Deixa eu ver Vamos sair Aí vou fazer um login só que eu acho que ele não tava logado ali então vou fazer com aquela conta ali que eu tava acho que era [email protected] se eu não me engano que é W123 Pronto Bom então era isso ele tava deslogado ali

Então aqui ele puxou ali tudo no que tava naquela conta ali Eh como eu falei Ele tá quebrando porque eu tô com o network aberto o developer aqui aberto Só fechar aqui e abrir Não sei porque isso é algo que a gente poder resolver também Então aqui a gente abre mesma coisa que eu tava mostrando ali só que a diferença é que eu tô usando o banco de dados dev então eu posso editar eu posso alterar eu posso mexer o que for aqui É sempre bom a gente ter essas contas de teste bem bem com

os clientes usam sabe porque Quanto mais realista for melhor Bom então agora vamos para código fonte Já mostrei como é que como é que tá organizado ali os environments né bom então a gente tem uma separação ali né na nas nossas nas nossas classes aqui Então a gente tem essa classe approcado dentro dessa mob E aqui esses outros aqui ó muitos deles eram exemplos que vieram no template Então aí eu gosto de de conseguir ver esses exemplos até Puxar algumas coisas ali Eu consigo ver tudo que tem nesse template tudo que já tá meio que

pronto eu posso usar assim Ali tem drag and drop layouts etc Tem uma forma de você visualizar ali Eu vou até já mostrar aqui que eu só veio nos meus bookmarks aqui Vou mostrar como é que faz para ver aqui ó Pronto Então aqui ó Então tem algumas telas ali que tavam no template e não foram tiradas por algum Motivo e a gente consegue essas telas por aqui ó Então a gente tem esse materials a gente consegue ver os botões ali que a gente pode utilizar e tem esse materials card e uma série de outras

telas aqui ó que a gente consegue ver ó Esse aqui é uma coisa bem legal da gente usar nas categorias subcategorias ó Aí tem os radons os tubares que a gente pode usar listas vários modelos de lista aqui Opa grid modelos de grid também A gente tem esse modelinho aqui em cima que que é essas tabs aqui que eu vou querer usar pra gente fazer configurações mais avançadas assim para tipo deixar várias tabs ficar mais fácil pro cliente para poder organizar ali aquelas telas bem sua empresa assim que tá bem grande a gente separar aqui

esses progress aqui as tabs que eu comentei ó Seria interessante a gente começar a usar essas tabs principalmente nessa Tela aqui sua empresa ela tem muita coisa ó Era legal colocar em tabs Ah switch tool tip Esse tool tip a gente usa acho que bastante Esse aqui ó que mostra esse Se for aqui em deixa eu ver acho que gerar PDF ver se tem tip aqui Não tem mas os novos eu fui colocando talvez em deixa eu ver integrações Configurar aqui ó Essas tool tips eu queria colocar em tudo assim Isso aqui ajuda muito muito

mesmo Vai colocar em tudo que fosse possível Ah menus Aqui dá pra gente meio que pegar alguns modelinhos de menus Sliders Sliders A gente pode pensar no na geração de PDF sabe esses sliders e snack bar A gente usa muito esse snack bar aqui quando para ter avisos Eu gosto bastante É dialogue Dialog a gente usa bastante também Já vou mostrar radios tá sei lá isso aqui é meio inútil Auto complete Isso é uma coisa que seria muito legal a gente Implementar pro cliente na hora que ele tá pesquisando alguma coisa Exige backend claro mas

mas tem ali Então e tem essa listinha aqui E como é que eu fiz para para achar essa lista aí eu fui no nas rotas né do Angular Então se a gente for aqui ó a gente tem os arquivos de rota em app rooting e a gente tem ali as rotas ó Então tem uma rota eu acho que foi daqui que eu peguei ó Aí fui pegando essas rotas aqui Boa tarde Como posso ajudar Isso deixa eu ver Mob routing Aí esse mob routing aí só as rotas de fato das telas novas Acho que não

tem nada antigo aqui Então aqui é só o roteamento né que vai mostrar ali eh os componentes Então se a gente for aqui em My Company aí se a gente for aqui vai ter ele em A é difícil acho que My Company Pronto Aí quando a gente entra em My Company My Company é aquela tela ali sua empresa né então esta tela aqui sua empresa Aí ele vai ter o HTML que é de Fato o HTML que a gente edita né no modelo do Angular 2 Eh a classe onde a gente vai editar as coisas

de fato é o ponto type Então se a gente for aqui em pony scpt ele vai aqui de fato né que a gente vai colocar as funções Aí ele tem o constructor que quando você cria né ele vai fazer vai chegar e aí tem oit que é quando a tela abre e aí tem as configurações o formulário Eh basicamente seria essas as informações E a gente tem o ponto scss Que é o CSS de fato É e aí a gente tem aqui essa separação né de quando for celular pra gente fazer algo que funciona funciona

no celular também Bom coisas importantes a gente mostrar aqui sobre a nossa estrutura Chamadas de API elas são sempre dentro de um service Então a gente pode achar aqui os services que estão aqui ó Consigo dar zoom na tela não Enfim Então se a gente for olhar aqui os services a gente vai ter ali aqui a gente tá Em o do My Company né então eu já vou descobrir aqui qual que é o service que ele usa Se eu for aqui no constructor ele vai ter todos os services usados Então ele vai usar o user

service que provavelmente é para procurar qual que é o usuário que tá logado Ele vai usar o company service que é para editar né então se a gente for aqui company service vamos ver como que ele tá sendo usado ó get compr details para ver os detalhes da empresa Depois que ele Recebe a resposta ele vai dar um preencher valores Então preencher valores Aí se a gente olhar aqui diz ponto fi vales ele vai preencher ali os valores do formulário Então aqui a gente consegue também navegar nessa estrutura né e agora vamos olhar como é

que são os services porque são é o que mais a gente edita né então se a gente for aqui no service do company service mesmo eu vou mostrar ele Aqui Então vamos ver qual que é a estrutura aqui de um de um service né eh basicamente aqui eles ele vai ter ali a o formato né da chamada da API que pra gente ver a gente vai sempre usar o o Postman que estará em algum lugar aqui da das minhas telas mas foi aquele postman que eu mostrei E aí ele vai ter as funções aqui Então

por exemplo aqui get all no pagination é basicamente pegar todas as companies né é isso daqui eu acho que a Gente não tá usando mas é quando a gente tinha uma conta de super administrador que conseguia ver todas as empresas que estavam listados ali no catálogo Eh get all sellers todos os vendedores de uma company específica ó porque ele passa o ID da company aqui e assim por diante Então ele vai ter ali todas as funções aqui as funções que ele salva Então geralmente para salvar alguma coisa ele monta um monta o formulário né então

aqui eu faço ali Monto o formulário e aí passo ali para eu dou um http post aqui dentro desse formato Então é bem simples ali essa estrutura Então a gente tem essa separação MVC bem bem organizada Então a gente tem para tudo eh todas as questões aqui dos services A gente tem algumas telas novas que eu coloquei fora desse módulo MOB que aí a gente vai ter a tela de pedidos Essa tela de pedidos eu não mostrei mas eu vou mostrar aqui porque ela é uma tela bem ela bem interessante O nosso cliente ele tem

duas formas de visualizar e fazer os pedidos dele naquela tela que eu tinha mostrado no começo do vídeo e nessa outra tela aqui Deixa eu mostrar aqui Ag aqui Então ela tem essa tela padrão que eu mostrei aqui que vem por padrão e a gente tem uma outra tela quando a gente entra aqui em barra pedido Opa coloquei errado barrapedos Ah essa conta não tá ativa ou não deixa eu Ver essa conta pedidos Ela não tá ativa e aí ele não deixa ele redireciona tá precisav conta que tenho pedidos ativos Eu acho que tem uma

aqui que eu gosto É acho que é LC Bom eu acho que sim Vamos ver então Mostra ali as categorias do cliente aqui Essa é a tela de barra pedidos ó Ela é uma tela é para vendas um pouco mais técnicas assim mas você mostra todos os produtos numa tela só Todos não né ele Lista os produtos assim e aí você consegue ir adicionando assim um a um Fica bem prático assim pro cliente Deixa eu até tirar um print aqui e mandar para pra IND Tem uma customização que a gente quer fazer nessa tela aqui

que é o usuário poder escolher quantos produtos cabem na página Tá vendo que ali cobro do que eu dei um aqui para fazer isso eu só diminuí o zoom mas seria legal a gente permitir que o usuário selecione assim Ah quero ver tantos produtos O próprio usuário mesmo cliente apertar aqui em cima que eu acho que isso daqui ia ajudar bastante assim Então essa é a tela pedidos é uma tela uma das telas mais novas Então a gente consegue ter um pouco mais de liberdade né na hora de de trabalhar nela Deixa eu só enviar

esse print aqui paraa Ing Aquele Pronto Então essa tela barra pedidos Então essa tela aqui ela está aqui ó pedidos Aí você tem O HTML dela que é o que que mostra a tela e você tem o ponto TS que aí vai carregar os elementos vai cuidar da tela em específico Essa tela ela tem a possibilidade de tags Aí o cara pode selecionar ele vai filtrar só as tags daquele produto Mas só uma tela eh diferente que tem ali E eu acho que seria isso assim os pontos mais importantes ali do do sistema sabe eh

não tem não é tão complexo assim Eh Os desafios são realmente a gente resolver os bugs e no próximo momento a gente fazer a um upgrade Ah tá Agora lembrei Uma tela bem importante que eu preciso mostrar que aí eu preciso explicar como ela funciona é a tela de geração de catálogo porque é a tela principal assim do sistema Se não tivesse nada só tivesse ela eh o sistema ainda existiria Então ela tá aqui em mob E aqui ó essa tela aqui catálog Bom o que que a gente tem que fazer nessa tela A gente

tem que na prática criar novos modelos de PDF para serem gerados Então o meu objetivo assim deixa eu aqui em gerar PDF o meu objetivo é que a gente tivesse assim lá 20 modelos vamos começar aos poucos tá a gente tivesse três modelos mas eles fossem bem diferentes usar selecionasse qual modelo ele quer apertasse gerar e aquilo já gerasse um PDF para ele Hoje na prática a gente tem esse PDF Pro que a gente usa Esses outros dois São antigos então eu nem mexo mais neles Mas a gente tem o PDF Pro Então o PDF

Pro eh eu vou gerar aqui um catálogo só para mostrar Quando eu venho gerar catálogo ele vai gerar no próprio frontend Ah já gerou já mostrou aqui Aí o PDF Pro então ele vai ter basicamente essa barra aqui em cima Ele vai colocar o nome da empresa aqui em cima e ele vai colocar a categoria aqui do lado Então a gente tem essa visualização aí mostra o produto Eh o que que seria legal é legal A gente ter tipo uns três modelos assim que mudasse a parte de cima que mudasse o o conteúdo aqui do

produto mas eh minha visão é a gente conseguir criar uma coisa que a gente sei lá jogasse no chat deptisse o nosso código fonte assim ó Esse é o modelo que que a gente quer e aí o nosso COD fonte já meio que pudesse fazer assim porque hoje ele é muito manual Eu vou mostrar ele aqui e aí eu vou mostrar com bastante detalhe porque Ele é uma tela bem principal Vamos lá Então essa sendo uma das células mais importantes do catálogo é onde eu vou mais aprofundar aqui um pouquinho para facilitar o entendimento Então

a gente tem aquela visualização ali que eu mostrei E aí quando a gente muda aqui a gente tem uma outra aqui ó que é mostrar categorias contínuo Em vez de ser um por página que é como eu mostrei ali esse aqui é um por página Então ele vai mostrar um produto e uma categoria Por página na prática né então ele vai puxar todos os produtos dessa categoria Só que tá vendo o que acontece ele fica vazio se o cara não tem produto aqui Então isso que nem se falaram isso E a gente fez uma outra

versão que você pode colocar um por página aqui Muda ó Ele joga junto eh vai colocando a próxima categoria aqui Uma coisa que a gente queria muito fazer também é em vez de mostrar essa barra esse fundo aqui esse quadrado esse quadrado aqui ele vai Ficar com a cor do cliente Então OK É esse par de cima aqui também Essa cor aqui também Eh inclusive a gente tem um logitmo que ele calcula assim tipo se aqui tem que ser branco ou preto baseado nessa cor de fundo Ele pega o contraste assim tem ali nessa classe

por isso que ela é mais importante que no catálogo A gente queria colocar aqui uma imagem da categoria a própria foto porque toda Categoria no catálogo se a gente for aqui em categorias ó o cliente ele pode colocar uma imagem da categoria Então a gente queria colocar essa imagem aqui também ia ficar uma coisa bem legal assim pro pro cliente Mas enfim esse é outro formato aqui de mostrar A gente tem variações do formato e essas variações aqui Caraca eu perco as coisas aqui Ah tá Eh outras variações que é o layout Então tenho o

layout 2 por2 3 por2 que Muda quantos produtos por página então vou gerar aqui também para mostrar Como tem bem produto não tem foto ele é bem rápido Ó aqui ele muda E aqui em específico eh o que acontece eu tenho um if ali dentro que ele vê se o se a tele se isso aqui é mais retangular e da muda um pouco assim a posição É tudo muito hardod fazendo tem que olhando tem que ir fazendo tem que olhando Então toda vez que tiver mexendo nessa configuração Aí tem que testar os outros também Vamos

dizer que você mexeu num tamanho aqui Aí você tem que testar para ver se tá funcionando nos outros nos outros modelos Tipo aqui 3x3 Eh mas em geral ele vai funcionar bem assim E que mais ah outras configurações mais simples aqui como mostrar borda essa borda azul aqui tem como tirar não é tão uma modificação tão grande Eh a gente tem uma modificação que é um pouquinho mais complexa que é Variação Eh o produto ele pode ter variação então você pode ter tipo uma camiseta M G GG Aí você tem como mostrar eh apenas o

produto principal Aí o que que vai acontecer ele vai mostrar tipo a camiseta e daí aqui ele vai escrever GG Então esse aqui eu acho que é o mais utilizado Mas você também pode colocar apenas as variações que daí não vai mostrar o produto pai você vai mostrar os produtos filho Então vai mostrar a camiseta G a camiseta GG aqui Do lado Eh apenas o produto principal que foi que eu mostrei tudo e variação Então vai mostrar o produto pai e do lado como se fossem produtos mesmos os produtos filho Aí tem essas outras que

são um pouquinho mais chatinhas assim que é agrupar por variação um Então por exemplo se o produto tem camiseta ela tem cor e tamanho Aí eu quero agrupar por cor Então variação um Ah quero agrupar por tamanho Variação dois Então eh é um Pouquinho mais complexo aqui mas ele não vai mudar o muito layout só vai mudar tipo a quantidade de produtos que mostra aqui Quantidade de produtos para é um filtro que a gente colocou para quando o cara tá testando ele coloca pouco e depois quando é aquilo mesmo ele coloca todos pessoal reclama muito

desse filtro aqui mas é só para não consumir tanto recurso ali do catálogo e também para facilitar tipo ah eu quero só ver como fica não vou colocar todos os produtos Coloco só um 30 exporto porque quanto mais produto mais vai demorar para baixar os produtos e carregar assim por diante A gente tem alguns outros campos aqui mas não são tão relevantes Isso daqui é fonte dos nomes Aqui a gente deixa automático mas a gente permite que o cliente selecione Ah eu achei que ficou muito pequeno Colocar 20 Vai ficar bem exagerado aqui mas eu

vou gerar catálogo só para mostrar Ó ele ficou super exagerado mas ele muda Essa fonte aqui Os clientes queriam poder mudar também outras fontes então seria interessante a gente colocar Isso aqui acontece às vezes o cara quer fazer um pequeno ajuste assim sabe que a gente deixa o automático ele bom mas ele quer fazer um pequeno ajuste e aí ele ele usa Aqui obviamente falhou mas o cliente vai testando aqui Toda vez que eu gerar um catálogo isso aqui fica salvo na minha no meu computador digamos assim Ele fica salvo até pra gente ver ó

A gente vai aqui em more tools developer tools e a gente vem aqui em application e a gente vê aqui no local storage ó No local storage ele tem salva aquelas configurações ali por exemplo show border ah é true Show código no pro true E assim por diante Ó o texto no contato tudo fica salvo porque a ideia é que o cliente ele faça isso e e a próxima vez que ele entrar já já salva aqui Uma coisa que a gente pode Fazer no futuro é salvar isso na na conta do cliente lá na na

nuvem digamos assim na API porque tá acontecendo de ter clientes que t várias contas Então isso é uma coisa que a gente podia meio que saber tipo ó porque se eu apertar em sair aqui até vou fazer isso para ver ó ele vai apagar as prédefinições A gente faz isso por padrão até para ó então ele apagou Se a gente for aqui não tem mais nada no local store Então isso é uma coisa que a Gente poderia fazer tipo a pré-definição ela ser salvar na nuvem quando você logar ele puxar as pré definições Isso é

algo que seria interessante ajudaria bastante ax Bom mas na tela de PDF vou mostrar o código fonte de fato Assim aqui tem outras questões aqui que é pode adicionar uma capa Isso aqui também eu quero poder colocar várias capas e a gente vai desenvolvendo capas e vai jogando para cá Só que essas capas tm uma particularidade ó Essa capa ela ela Coloca aqui esse botão de WhatsApp Então não é só uma capa é uma capa e um código fonte da capa sabe porque vou colocar aqui Black Friday ó Tá aqui Não tinha visto tinha selecionado

porque nos outros quando você seleciona ele marca mas aqui ele só marca aqui embaixo Bom eh se eu colocar capa e colocar em gerar aquela capa em específico olha que legal que fica Agora não vi se baixou ou não Aí tá É coloca essa cl Black Friday Aqui ele Coloca o nome da empresa ó E aqui ele coloca o WhatsApp da empresa Então ele é uma capa junto com um pouquinho de customização Então isso que eu queria fazer assim eu queria ter meio que um arquivo onde eu definisse eh tipo eu queria ter um construtor

de capas sabe pra gente construir capas e deixar elas prontas pro cliente Então por exemplo ah uma capa que aqui vai ser sei lá o nome da empresa e o endereço da empresa Uma outra capa vai ser assim e Assim por diante Eu não quero deixar que o cliente faça isso mas eu queria que a gente pudesse fazer sabe então isso ajudaria muito assim gente pensar nessa modularização aqui Bom então a gente tem capa e seguindo esse mesmo conceito aqui tem algumas configurações que ele faz Seguindo o mesmo conceito a gente vai ter o sumário

que é bem interessante que ele vai criar um sumário e esse sumário é Dinâmico E aqui a gente tem capa final que é basicamente são imagens só que a gente coloca E aqui a gente tem capas de conteúdo Ah tá Capa de conteúdo é só tipo umas páginas depois da capa E aqui as capas de categoria que o pessoal tem usado muito Você pode colocar uma imagem aqui e daí ela vai colocar essa imagem como se fosse uma página antes de cada categoria Eh mas é só a capa mesmo que ela é um pouco mais

Rebuscada digamos assim Bom então vamos entrar em código fonte de fato que acho que é a parte mais importante Bom o código fonte dessa tela ela tá dividida em duas partes A primeira é o código fonte da tela que ela tá em catálogo Component ela vai representar Pera aí que eu preciso mostrar a tela aqui Pronto Então ela vai representar essa tela aqui Eh no Começo eu tinha esses outros modelos aqui de PDF ó padrão e tabloide Eles até funcionam hoje Eh e por que eu tô explicando isso porque esses modelos aqui ó cadê ó

ele mostra um exemplo aqui Eh ele tá dentro dessa desse catálogo aqui Então esses dois últimos modelos ele tá aqui dentro Ou seja esse aqui vai ficar um código gigantesco ó A gente puxar aqui tá tipo muito grande porque ele tá puxando isso daí Mas assim a gente não deve mexer Nesses caras aqui ó nesse tabloide e nesse padrão Deixa eu ver o padrão Ó o padrão ele mostra assim ó Porque eu usava uma ferramenta diferente Basicamente eu pegava eu gerava um HTML na própria tela e quando eu apertava em gerar ele ele transformava esse

HTML no PDF E aí como as coisas foram avançando aí eu criei esse PDF Pro que é essa classe aqui ó new tabloid Então aí eu já consigo modularizar as coisas Então eu tenho Esse new tabloid aí Esse New Tabloid ele tá bem mais organizado ele tá muito grande Então isso que eu também queria trabalhar essa modularização refator um pouco esse código ele tá muito grande mas o conceito dele é mais claro Então eu tenho sete products então eu dou New Tabloid New Tabloid Products lá daquela outra classe eh faço as configurações aqui ó E

aqui eu tenho aqui essa função ó generate catálog background Então ele Vai gerar o catálogo em background então ele tá mais organizado assim tá mais modularizado é mais fácil de trabalhar Então a ideia é que a gente organize um pouco essa isso daqui porque até para pedir ajuda pro chat GPT fica difícil porque por exemplo aqui eu vou mostrar quantos quantas linhas tem ó cara tem tipo 2700 linhas então é um código muito grande ele fica um pouco difícil assim de trabalhar Ideal que a gente conseguisse modularizar sabe eh Como modularizar como ah a gente

pode fazer um service só para fazer essa parte aqui É um service que a gente peça ah me gere o o o header Há um service que gereoter porque daí dentro do service eu posso ir lá e criar tipo vários footers vários headers Então ah me gere o header Qual header ah header tal Então isso aqui ajudaria bastante assim a gente a modularizar eh essa essas classes aqui Então só para deixar claro new tablod é O que a gente mexe hoje catálogue é a tela Então ignorar esses outros esses outros modelos aqui de catálogo a

gente não usa mais não precisa da manutenção não precisa mexer neles O que a gente mexe é esse PDF Pro Então a gente precisa avaliar justamente essa questão de modularizar as coisas Eh por exemplo o que a gente poderia começar a molarizar agora modularizar o sumário tá por quê porque o sumário provavelmente ele é tão complexo que daria para ter um Service só de sumário Vamos ver como é que tá funcionando o sumário ó Sumário Caraca Bom vamos ver aqui Bom então só para fazer um mostrar rapidamente assim por cima como é que funciona ali

a geração de catálogo mas basicamente a gente usa a biblioteca JSPDF Então isso é um ponto bem importante Quando a gente olha aqui no pack de Jon a gente usa essa versão específica aqui do JSPDF Então quer perguntar um negócio para GPT fala que é No 2.3.1 tá então se a gente abrir aqui também a gente pode abrir JSPDF na tela aqui ó no 2.3.1 publicado há 4 anos atrás né tinha visto acho que é 2020 2021 Então ele mostra a documentação desse cara aqui Ah será que dá para fazer tal coisa é só olhar

a documentação dessa versão aqui Ele na internet também tem alguns uns códigos De exemplo Não sei se é aqui ó Tem destaque Overflow Mas ele tem uma tela aqui que é são exemplos Aí fica bem legal de ver assim todos os os exemplos Ah eu acho que eu coloquei aqui mesmo no código fonte aqui Deixa eu dar um só salvar para voltar Exemplos https aqui ó Não deixa eu ir lá em cima Como é uma coisa que eu usava muito eu coloquei em algum local aqui Um um link com os exemplos Bom a verdade que

eu não achei aqui os exemplos dessa versão mas a gente tem aqui um live uma live demo Eh qual que é o ruim dissoquiqu que a gente tá pegando a versão que não é que a gente tá usando Então tem coisas que não vão funcionar na nossa versão Então muitas coisas a gente tem que eh ver se realmente a versão que a gente usa funciona Mas aqui dá para ter uma boa noção assim do que que dá para fazer com Essa com essa ferramenta aqui Então é tudo muito manual Então por exemplo quero adicionar imagem

ó ele coloca lá adicionar imagem aí coloca ali imagem Quero adicionar texto eu posso mexer no texto aqui ó carro aqui ele já já girou mas tá vendo que ele não cuida por exemplo não é tipo o canva que já tá tudo pronto ó Então aqui a gente tem que fazer tipo aqui na prática eu teria que definir um tamanho máximo para esse texto Aí se chegasse no tamanho máximo Eu decidiria ah não reduzir a fonte ou jogar em duas linhas Só que é tudo muito manual assim por isso que não é tão simples é

bem complexa essa essa parte ali Mas esse exemplo aqui ele eu achei ele dentro né da o NPN do JSPDF em live demo Serve para aprender a usar a ferramenta tá tipo dá para ter uma boa noção assim ó string splitting que é aquilo que eu falei ó de como quebrar ali as strings aqui Bom ele tá quebrando manualmente Aqui pelo jeito mas geralmente a gente vai fazer um algoritmo para ver se chegou até o final Aí sim quebrar Vamos ver Vai lá Test colors Aqui muda a cor do texto Eh bom aqui são as

coisas básicas que dá para usar para testar tá mas então é importante sempre no chat aptando quando a gente conversa com ele dá para falar tô na 2.3.1 e aí ele consegue eh entender Eu já eu sei que existe algum documento uma documentação Da 2.3.1 só não achei agora para fazer o vídeo mas existe Eh o que que eu faço às vezes quando eu tô com muita dificuldade aí eu venho aqui no código ó eu abro esse código no Git e aqui ó GitHub Aí no Git eu consigo vir aqui ó e escolher qual que

é a versão que eu quero usar tá não vou saber fazer isso agora nesse exato momento mas eu consigo selecionar talvez pelo Release E aí eu consigo ver o código fonte daquela versão 2.3.1 talvez Eu não lembro se é aqui onde que é mas você consegue tipo ver aquela versão e se tiver alguma dúvida mais profunda o chatpt ele consegue ver isso Então por isso que você consegue conversar com o chatpt sobre o código fonte e falar que é 2.3.1 Mas então dito isso e esse código fonte ele vai funcionar basicamente Assim Então eu separei

assim por etapas ali ó Então por exemplo ali ó Vamos pegar aqui por etapas ó Vai ficar bem bacana de tu explicar ADD product Bom então ele tem uma função que é adicionar os produtos da categoria Ele passa o nome da categoria ele passa a lista de produtos É modo contínuo sim ou não beleza Então aqui o que que ele vai fazer então ele vai verificar por exemplo eh vai Iniciar a linha numa posição Então aqui ele tá pegando a o espaçamento horizontal mais o espaçamento do do header ali O que que eu gosto de

fazer eu gosto de imprimir e desenhar realmente essas coisas assim mas basicamente aqui ó ele tá pegando X Então ele tá pegando eh esse espaçamento aqui esse espaçamento aqui Então ele vai pegar daqui até aqui Então esse é o Header rate então a altura do header Então ele vai pegar aqui até aqui E daí ele deu um mais ali ó no spacing Esse spacing é um tamanho pequenininho Então esse spacing ele pegou aqui e daí ele deu mais aqui Então ele tá começando bem aqui ó nessa altura Y né e e aqui em X ele

só pega o with it spacing que é basicamente esse spacing que não vai dar para ver mas aqui dá para ver ó Então esse space aqui Então em X ele começa aqui e em Y ele começa Aqui Então ele vai começar mais ou menos aqui Não sei se dá para ver aí o meu meu mouse Então beleza Então toda a categoria toda página vai começar aqui Aqui eu sei que ele vai adicionar uma página porque não sei ele ainda não adicionou Vamos ver aqui Ele faz alguns cálculos Eu não vou entrar exatamente em cada cálculo

eu só vou mostrar o conceito geral assim Então aqui ele vê o número de colunas Ele faz um cálculo ali para ver o número de colunas Aí aqui ele pega o nome da categoria e se não for modo contínuo ele vai adicionar aquela prepage category que basicamente é aquilo que eu mostrei ali que são essas páginas aqui ó que são as que a gente chama de prepage Vou mostrar aqui o que que seria esse prepage Só fazer aqui só para poder voltar aí no prepage basicamente o que que ele vai adicionar eh se tiver uma

página não então procura ver se tem essa Página de fato na lista de páginas Aí se tem ele vai adicionar uma página nova Eh nessa página nova cadê aqui ad pages Tá bom Aí tem uma função aqui add pages E aí nessa de pages ele vai ver aqui eh aqui basicamente é isso que eu queria mostrar ó Ele vai mostrar adicionar uma imagem Então ele adiciona uma baita imagem desse tamanho começa na posição 0 zer e esse aqui é o tamanho da imagem que é basicamente o tamanho do A4 Aí ele basicamente é isso que

ele usa para adicionar uma imagem Então é bem simples essa essa adição aqui de imagem tá e aqui eu não lembro exatamente o que ele tá Ah tá Para adicionar uma foto a gente teve que colocar esse negócio aqui que ele coloca tipo um ah um texto ele mexe no RL da foto só para não dar pau no navegador ali Então ele só coloca um número aleatório no final da foto e aí a gente passa o link da Foto aqui ó o link da foto E aí ele baixa essa foto e coloca ali Então basicamente

isso seria o adicionar prepages Mas se a gente der sequência dá pra gente ter uma ordem meio que cronológica assim Então aqui e é a primeira linha que eu tô adicionando Se sim aí ele vai adicionar o footer e o header Aí o footer a gente tem lá a função do footer Aí tem ah qual que é o tipo do footer que eu vou adicionar isso que eu falei Que daria para para começar a separar assim os footers Ó eu já comecei a criar um novo um novo layout Ah agora sim ó Eu já comecei

a fazer isso de separar Agora o que eu tô vendo ó o summary ele já tá em outro service e esse footer aqui ele já tá em outro em outro service também Então a gente tem um outro footer que eu não mostrei que é esse footer PJ Neplina E esse footer quando a gente vai em layout e coloca aqui modo Max Isso aqui seria legal Em vez de estar aqui tem outro lugar Mas enfim se eu for gerar um catálogo em modo max pera aí não vi se gerou ou se deu pau Acho que tá

gerando não sei Ah quando eu tenho dúvida eu só vou em no no no console aqui para ver se ele tá gerando ou se não tá Pode volar agora Sim Tá Eu acho que tá com pau esse modo max aqui no Pode baixar e tabela Aí para ver qual que é o pau eu só venho Aqui em console né e aí vejo ali se mostra ali ó Aqui tá o erro ó Eh tá dando que tá um um PNG e corrupted aqui então sei lá poderia ir mais a fundo aqui mas eu acho que pode

ser a logotipo que tá zoada Isso acontece muito Se o cara tá com a logotipo zoada ele dá esse pau Eu acho que é logotipo tá então vamos pôr uma logotipo só de teste aqui Colocar esse logotipo aqui de teste ó Eu peguei um Aqui A gente tem esse algoritmo também ó que permite ele já lê tipo as as cores principais da foto e já diz pro cara ah eu quero usar a cor primária e secundária ali Então ficou bem legal isso aqui Deixa eu salvar Salvou Agora quando voltar a gerar PDF tá vendo que

aqui em cima ele já mudou essa cor dessa barra aqui quando for gerar catálogo em PDF ele tá no modo agora Sim era logotipo mesmo Eu vou abrir dois ó Aí esse sem Preço E aí a gente pergunta você quer ó esse esse footer aqui é diferente ó Tá vendo a gente fez um footer diferente que mostra uma outra logotipo Eh opa quando eu apertei ele foi para algum link ali Mas enfim esse footer eu já tô usando um outro service aqui ó Então já comecei a modularizar como eu falei que que a gente queria

fazer ó Então ele passa lá ó adicionar footer Aí ele passa o documento atual aí passa o que precisa passar ali Enfim Aí se eu entrar lá em adoter aí ele tá organizado Tipo ó esse aqui é o código adicional footer isso aqui é o código adicional header Vamos ver o que mais que tem Poxa isso aqui ficou bem legal Faz tempo que eu fiz mas eu já fiz nesse conceito assim modularizado ó Aí qual que é a grande vantagem disso se eu precisar pedir ajuda pro chat ept ó são 600 linhas Então a gente

precisa é urgente fazer isso sabe começar a separar os modelos de de fullter header Em services separados aqui Isso vai nos ajudar muito assim na no código Mas enfim Então aqui a gente tava seguindo a ordem cronológica né ele tá adicionando footer Aí ele ou vai adicionar esse footer novo e aí já dá um return ou ele vai adicionar o footer digamos o mais antigo que aí tá todo ele aqui Uma coisa que a gente poderia fazer era já tirar esse footer aqui e já colocar num outro num outro arquivo Já ia eh ficar bem

mais clean né Então aqui é o código do footer Como é que ele coloca o footer né então ele vai fazer bem manual como eu já expliquei mas basicamente primeiro ele vai sei lá colocar esse fundo esse vai colocar um retângulo dessa cor Uhum Eh depois ele vai colocar esses retângulozinhos dessa cor Aí ele vai colocar o texto aqui o texto mais embaixo Aqui ele coloca um link em cima Então ele vai fazer um manual eh tudo passo a passo aqui Cadê bom vai fazendo isso ó Então aqui Ele tá colocando uma imagem Ah qual

imagem aqui é o logotipo do Facebook Aqui não apareceu porque o cliente acho que não tava configurado Ó se o nome do Facebook for vazio não for vazio ele coloca um face Então aqui vamos a gente pode testar isso aqui assim se eu for em sua empresa aí ele tem essa configuração lá Cadê facebook Aí vou colocar aqui teste Aqui teria que ser um link né ah tá Não Fiz confusão Quando eu vou gerar catálogo PDF ele tem aqui ó Cadê ué Ah tá Se eu tô no modo max ele some mas deixa eu colocar

no modo 3x3 Aí ele vai abrir aqui ó Abriu ó Facebook Aí o nome do Facebook lá meu face Aí eu poderia colocar um link aqui Eh eu confundi com sua empresa porque se eu tiver configurado sua Empresa ele já puxa automático Aqui eu vou gerar catálogo agora Ele vai gerar um catálogo lá no Facebook ó Então ele colocou o ícone do Facebook colocou meu face e colocou o link Então isso está exatamente nessa tela aqui ó Se o ad face for true primeiro ele coloca a imagem Então esse X e Y eu tenho meio

que parametrizado aqui Eh XY colocou ele pegou o logo dentro do barra Assets/images/book Isso aqui estará por aqui que assets ó E facebook.png aqui ó esse asset aqui e pegou exatamente esse asset aqui Então eh aí ele colocou o link que é o para ficar clicado né colocou o link Aí tem a posição basicamente vai sempre ter tipo o que que você quer fazer o X o Y e o XY que começa e XY que termina Ele coloca Geralmente tudo com retângulo Aí ele colocou o texto ó Como é que ele colocou o texto doc

Aí colocou o name Facebook Aí aqui deve ser o X inicial ó Aqui deve ser o Y inicial E aí o texto ele não ele não coloca como retângulo Aí eu coloco a line para ficar à esquerda e o max Então eu tenho uma uma largura máxima que ele pode pôr Na prática ele vai ficar assim E geralmente quando eu tô desenvolvendo eu coloco tipo uns retângulos assim de uma cor para conseguir visualmente ver Deve ter aqui Se eu colocar um debug deve dar para eu ver aqui ó Aqui ó Eu tenho um aqui Eu

tenho aqui essas classes ó Debug xy Tá falso Eu vou colocar true só para te mostrar Salvei Quando eu salvo ele ele leva tipo alguns segundinhos mas ele já regera a página aqui A não ser que eu tenha feito alguma coisa Ele tá gerando Geral Pronto ele já autoriza automático a página aqui Então eu vou gerar um catálogo só para mostrar Aí como ele tá o com aquele debug xy Eu fiz de uma forma que eu conseguisse ver as coisas ó Então eu fiz ele coloca lá aqui o debug specs Eu desenho um quadrado para

ver Eu acho que é só isso na verdade Ó aqui fica melhor ó para ver todos os X os Ys Eles são na prática em centímetros Então eu gosto de fazer eu gosto de imprimir uma folha e pegar uma uma régua e vendo isso daí Bom então voltando ali o código fonte então a gente tem essa Essa possibilidade aí de usar esses debugs Então ele vai adicionar lá né o footer aí depois adiciona o header Aí depois eh se for o modo contínuo aí ele vai tomar um caminho É se não for o modo contínuo

vai tomar outro caminho Então basicamente é isso Na hora que terminou diz que legal quando terminou uma página então ele verifica aqui se não tem dar que case aqui se X Bom não lembro de cabeça mas basicamente ele vai Ver se tipo dá para adionar mais um produto ou não Se não der ele vai criar uma nova página em algum lugar vai ter isso aqui ó Aqui então é se não for o modo contínuo ele sempre vai adicionar uma nova página né no começo das categorias Então ele adiciona uma nova página ele reseta lá o

XY ó Reseta o XY Eh que mais aqui ele tá adicionando uma categoria como produto E aqui é de fato ele entra na Parte que ele vai começar a imprimir os produtos ali na página Então se o produto layout for um aí ele vai fazer isso Então ele tem vários layouts né de produto E isso aqui que eu digo que a gente poderia já estar separado assim porque eu não lembro Vamos ver Producto layout Aí vamos ver quando é que muda Bom eu não eu não lembro e não tenho documentado qual que é cada product

layout aqui mas basicamente ali ele ele Vai tomar uma ação conforme seja o layout ali do produto Eu não lembro de de cabeça ali qual é mas então basicamente ali ele vai adicionar os produtos aqui de prod Vamos ir para adicionar o produto só pra gente finalizar aqui Adicionar produto categoria aqui onde a gente tava Aí chega o momento que ele vai adicionar os produtos né vamos descendo Cadê aqui Então ele vai fazer um vai varrer Todos os produtos e vai ir adicionar os produtos né então no adicionar o produto aí eu consegui já separar

ficar mais claro aqui pra gente Então ele vai primeiro adicionar ele vai ver né as a largura do produto baseado no que ele já calculou previamente porque quando eu seleciono lá qualquer 3x3 4x4 ele tem uma hora que ele calcula qual que é a largura do produto Então quer ver vou só mostrar aqui Mas isso antes de adicionar né primeiro ele aqui ó Então aqui ó ele Calcula os spacings ó lá no começo Então ele vai ver qual que é a largura do produto Aí ele calcula ali ó conforme o número de linhas e assim

por diante Então depois que já tem isso é só realmente preencher É então ol lá ele vai lá Então primeiro ele vai adicionar a imagem do produto então ele vai chamar essa função adicionar foto Aí no adicionar foto ele enfim adiciona foto ele faz algumas redimensionamentos ali etc Eh depois ele vai adicionar o título Aí no adicionar título aí tem aquelas questões que eu preciso verificar qual que é a maior largura do título Eh se a imagem for ampliada o título tem que ser um pouquinho mais para cima Então é uma coisa bem manual assim

É mas enfim faz uma vez só a gente usa várias vezes né se as fotos forem mais quadradas ou mais retangulares eu mexo nisso aqui Então tudo eu fui fazendo e ajustando eh para chegar no que a gente Tem hoje assim Então é por isso que o Canva é um negócio tão assim que o Canva é tudo automático pra gente né o catálogo a gente tem que fazer manual mas como eu falei essa é tipo a principal classe ali do catálogo que a gente tem que investir bastante Bom então daí ele adiciona o título adiciona

o preço adiciona a frase de destaque que é uma opção ali que eu não mostrei mas que tem adiciona o código é então cada um ele vai ter é o seu formato ali para Adicionar Então basicamente é isso assim esse é um uma classe bem bem grande assim que a gente tem que fazer essa modularização mas que eh tem tudo ali que a gente precisa para fazer Eh dá para começar na classe que tá mais organizada que é aquele modelo PJ Neblina ali que eu mostrei que é este modelo aqui ó no Max Max Então

o modelo Max ele vai estar aqui em layout PJ Neblina Dá para começar nele porque ele já vai tá bem Mais organizado ó Vai começar testando nele Mais ou menos organizado mas é que foi o último que eu fiz Então eu fui pegando os aprendizados E a gente tem o server aqui que é algo que tava com bug também que tem que ser mexido mas o basicamente esse é o código fonte Aqui eh outras dicas de de desenvolvimento é usar esses console log ajuda muito muito mesmo Só teria que colocar um if debug pra gente

não ficar colocando esse console em Produção Esse aqui tá em produção mas fica meio zoado Então aqui eu recomendo bastante usar esses esses debugs aqui para conseguir ter uma noção no modelo de dados Eh outra coisa que eu faço bastante é usar né o o aquela opção desenvolvedor aqui E aí eu sempre printo aqui no console aqui os arrays para eu ter uma Noção do que que tem dentro dele o que que informações que eu tenho como eu mexo nessas informações Então isso aqui ajuda bastante Então essa aí é a o overview aí dessa funcionalidade

de geração de PDF tem uma funcionalidade bastante grande E a última que eu vou mostrar é a respeito dos pedidos e do carrinho de compras que eu acho também é uma funçãozinha que precisa de revisão e também um pouco complexa Bom agora pra gente fechar de Vez esse overview aí sobre o código fonte ele ficou bastante longo Achei que ia levar meia hora mas realmente é muita coisa E uma outra coisa que eu queria mostrar é a respeito do carrinho de pedidos Então o nosso cliente ele tem a possibilidade dele do cliente dele entrar ou

do vendedor dele entrar O que que muda basicamente o vendedor ele vai aparecer vai aparecer uma opção de oferecer desconto e a gente quer que no vendedor ele possa pesquisar o cliente Mais fácil e assim por diante Então eu vou montar aqui vou entrar aqui com o login do vendedor Eu não lembro exatamente a senha mas deve ser aquela padrão Então eu venho aqui em sair Aí eu vou usar o login do vendedor Deve ser qw né não é então vamos ver se tem alguma senha salva aqui que não salve Bom não sei assim que

que eu faço você entra como ah você entra como o adminuários Aí eu vou mudar essa senha aqui Deve ser um um essa senha Aposto Quer ver como eu entrei com https ele reclamou É só tirar 1 2 3 4 É era um Mas enfim esse aqui é a visão do vendedor E aí o vendedor ele vai ter acesso a um carrinho assim como o cliente Eh então eu vou lá eu vou ver que produtos meu cliente quer eu vou adicionar um carrinho eu vou em finalizar Pedido Aí eu tenho esse objeto de carrinho Então

assim e essa classe aqui do carrinho ela está eu mexi aqui Depois eu tenho que limpar porque eu tava só demonstrando Mas essa do carrinho ela vai tá ele tem um service aqui Order service Eu acho que esse daqui não esse order service são os pedidos Vamos entrar aqui em shopping cart aqui ó Shopping card service Aí ele tem esse service que aí ele vai cuidar De pegar o carrinho de adicionar produto tirar produto Então está dentro aqui deste service aqui essa questão do carrinho porque ele basicamente vai ser responsável por calcular o total né

do pedido Então deixa eu colocar dois itens aqui só para facilitar esse tênis Ó esse é um produto que tem variação então a gente tem que tomar um certo cuidado Por exemplo eu vou adicionar o item do tamanho 22 da cor preto Aí ele já muda ali e eu vou colocar em mais Quando eu Coloco em mais ele vai listando ali todos os itens que eu adicionei Então se eu quiser colocar dois da cor preto ah mas eu quero 21 Eu seleciono aqui Vamos colocar o 41 Aí eu coloco aqui mais Ah eu quero o

da cor verde Mais vamos colocar ó Agora eu quero editar Eu aperto aqui e eu diminuí É tá feio assim porque eu tô com o modo developer aberto Deixa eu fechar Deixa eu fechar aqui Não sei se tava aberto antes de dar Um shift Bom eu dei um shift aqui O esperado é que ele recarregue ali o carrinho Então se eu entrar no produto ó ele puxou todo o histórico de itens que tava aqui Eu acho que ele é feio assim mesmo Mas enfim Então para eu editar eu tenho que entrar aqui ó ele muda

para aquele produto e eu vou editar Quando eu tô finalizando o pedido eu listo aqui ó cada item como que é na prática é né na prática cada produto filho ele é um produto lá no catálogo Então o pessoal Tá pedindo pra gente ter um botão de remover aqui Eh só tem que tomar mais cuidado Se eu apertar remover o filho vai ter remover o filho Se eu apertar aqui ó e ele tá meio ruim essa essa X mas basicamente ele procurou o produto ele não abriu Em geral ele abriria aqui o produto Então ele

tá meio ruim essa esse comportamento assim como enfim como a gente deu prioridade para as coisas A gente tá meio zoado esse comportamento Aqui A gente precisaria melhorar esse X aqui sim para ficar uma coisa mais tipo no carrinho e o cara poder apertar aqui e já abriu o item dele Então a gente precisaria ver como é que faz isso Bom mas o que eu queria mostrar do carrinho era isso Então eu monto esse carrinho aqui e a única coisa que ele faz aqui é ter esse subtotal O que que precisa urgente fazer que nessa

tela do carrinho a gente toda vez que sei se lá o cara entrasse ou a cada 10 minutos 5 Minutos eu não sei que ele atualizasse os preços porque acontece muito Se eu pegar isso aqui e abrir semana que vem o preço disso aqui lá no catálogo vai est diferente mas o preço aqui ele se manteve Então já tivemos várias reclamações assim Então precisaria ter uma política de toda vez que eu apertar aqui em finalizar pedido ele fazer um refresh Eu acho que poderia ser assim não precisa Toda vez que for aqui em finalizar ele

fazer um refresh Só que o Problema é essa tela aqui ela teria que vencer sabe se eu entrei nessa tela aqui sei lá ontem precisa ter uma validade que a validade teria que ser tipo um dia assim não para remover os produtos mas sim para atualizar os preços dos produtos Isso a gente precisa fazer urgente Enfim daí ele chega no carrinho aqui eh o vendedor ele mostra a opção de de dar desconto Eu não sei porque que não está aparecendo aqui mas haveria uma tela Aqui um botão aqui para você dar desconto Não sei se

isso está parametrizado não sei o que aconteceu Deixa eu até conferir se esse usuário é realmente vendedor né então é é vendedor Eu achei estranho porque era para aparecer aqui desconto Eu acho que agora tem uma configuração de desconto máximo que o cliente pode dar Então talvez seja o caso Eu não sei exatamente mas enfim Is aqui é a tela do Carrinho E o que importa pra gente é essa esse service aqui A gente vai ter o o shopping o componente né ele tem esse daqui e ele também tem o acho que é order details

não shopping cart E aí tem aqui ó finish card que é aquela tela que eu tô E aí me perdi tudo aqui Bom esse é o finish card e esse é o shopping card Dá para ver aqui por cima Então tem algumas melhorias pra gente fazer não é tão complexo mas é só Gostaria de de colocar esse ponto de ter atenção desse produto variação Eh não são todos clientes que t mas quando tiver ele tem que tratar um pouco tá vendo que tá ruim porque provavelmente é variação Você pegar um produto sem variação no carrinho

forem pedidos Nossa tá muito estranha essa Ah agora ele mudou pra minha conta do admin Nossa que coisa esquisita Não tá certo Toma conta do vendedor Sumiu aqui O botão de carrinho Que coisa esquisita Mas enfim vamos lá Se eu tiver vendo os produtos aí eu posso finalizar pedido aqui e ver o carrinho De fato esse produto não é variação Então quando eu apertar ó aí ele abre Tá vendo então tem esse pequeno bug assim que se é o produto com variação ele não tá abrindo essa tela mas senão ele abre A gente tem que

tomar um certo cuidado assim quando vai editar essas coisas porque pode impactar outras Então por exemplo vou dar um exemplo aqui uma cliente nossa vi vitrine aqui ó Ah eles tem que arrumar esse esse S S SH deles Mas esse aqui é um cliente nosso ó que ele roda no nosso sistema e ele tem uma coisa que é diferente ó Então ele mostra ali os produtos Só que a gente fez uma customização para eles que a gente colocou o que a gente chama de entidade aqui Eh nesse caso é tipo o artesão que Faz esse

produto mas a gente pode colocar o fabricante que faz esse produto E aí a gente tem a tela essa tela de todos os as entidades que a gente chama tá aqui é artesão Mas a minha ideia é que a gente possa pôr fabricante aí enfim Só que o que que eu queria mostrar se eu entrar em Regiane ele mostra a tela da entidade que é a tela pode ser do fabricante do artesão pode ser da marca tipo todos os produtos dessa marca mas a gente não tá usando Isso muito tá a gente só tá usando

com esse cliente E quando eu entro nesse produto ó ele o que que ele fez ó ele pesquisou o produto e ele abriu o produto Então eu digo que só tem que tomar um cuidado na hora que for mexer do carrinho para não afetar esses outros aqui que já estão funcionando sabe então então seria isso Eh esse esse código específico ele vai tá lá na tela do produto né então se eu Entrar aqui em products eu acho que é product list aqui Eh é nessa nessa nessa tela E aí ele tem um if aqui ó

tipo e searching product Então ele meio que tem uma noção de quando ele tá procurando o produto aqui e ele tem noção de quando tá procurando o produto mas ele foi enviado de outra tela Então é é um pouquinho chato entender um pouco essa lógica assim Eu confesso que não me bato muito bem com essa lógica mas só tem que tomar Esse cuidado assim nessa tela aqui com essa pesquisa porque você pode estar pesquisando quer ver ó você pode estar pesquisando aqui Quando você pesquisar ele tem que procurar no catálogo inteiro Se eu pesquisar um

produto e qual que é a lógica se eu não me engano eu fiz assim se eu pesquisar isso daqui ele abre o primeiro resultado Então eu fiz meio que tipo um uma gambiarra Deixa eu colocar um oi Aqui ó Ó é isso mesmo Ele procurei oi Ele ele abre o primeiro resultado Ele decide que quer abrir e abre Eu fiz isso porque justamente a gente precisava fazer essa função aqui de achar os produtos do cliente e eu jogo aqui e o primeiro resultado vai dar sempre o produto Aí funcionou Tá vendo esse esse não tem

outros resultados mas se for uma pesquisa semelhante que nem aquele que eu tava mostrando aqui Reg Fux ele vai encontrar Outras coisas parecidas ó E daí tá no próximo ali A gente falou pro cliente que sei lá que é assim Então são são alguns pequenos detalhes assim que eu tô tentando só mostrar assim para para facilitar um pouco ali o desenvolvimento Então basicamente seria isso Eh tem bastante coisa né mas deu para fazer um um overview geral ali A gente tem essa tela sobre nós que é uma tela que a gente tá começando a utilizar

Eh tem uma série de coisas novas aí que A gente quer fazer e mas isso a gente vê com o tempo Tá bem valeu muito obrigado