Fala, pessoal. Beleza? Vamos falar um pouco eh da parte de front end ali, né?
Eh, do componente. O componente aqui no na parte de repositório da da Solvas, a gente tem lá vários projetos, tem o EDV Souvas, onde tá o o os principais projetos ali da empresa, né? o ASP, o COR, eh, tem o de API, que é o que a gente depois vai ver sobre API, e tem um de front, que é onde, eh, está o componente do Fed.
Tem uma pasta lá, Sol Web Component, e dentro tem lá o feit, tá vendo? Fed. E aqui tá o fonte, tá vendo?
Eh, e aí eu vou abrir aqui, eu a gente vai precisar clonar, né, para poder desenvolver nele. Eu vou abrir aqui o projeto, acho que já tem ele aberto aqui. Então, abrindo no VS Code.
Eh, e o projeto ele tá aqui. abrir a pasta lá que tá o projeto, já caiu aqui. Tô na na branchmaster.
E aí, como que tá estruturado o o projeto, né? Ele ele, na verdade, como eu falei, ele é desenvolvido em lit. Eh, deixa eu abrir aqui o site para mostrar.
Eh, é lit. É o framework, tá vendo? E aqui a gente tem toda a parte de documentação, de renderização, como é que ele faz, tá vendo?
Como é que como é que funciona o código, a parte de estilos? Então tem tem toda as informações aqui para desenvolver. Ele é muito parecido ali com Angula, né?
tem muita coisa de ângulo nessa na estrutura dele, mas aqui fica toda a parte de documentação. Mas que que interessa que a gente aqui para nós? Eh, ele tem aqui nessa parte de de sece fica cada componente ali que a gente desenvolve, né?
Então, quando você olha a estrutura do feed, eh, a gente vai perceber que, eh, deixa eu abrir, deixa eu abrir um, um date de que aqui pra gente ver quando a gente abre o deixa abrir um componente para vocês entenderem que eu tô falando. aqui um registro qualquer. Quando a gente fala aqui do feed, eh, a gente vai ver que cada item desse daqui é um componente ali dentro do dentro do da aplicação, né?
Quando você vê aqui, ó, essa Svas Feedor, é essa parte aqui, ó, do editor de fato, tá vendo? Então aqui você tem a parte das ações, eh, os attachments, a parte do texto em si que digita. Então você vê que aqui esse componente ele é ele é cheio de outros componentes dentro.
Por exemplo, se a gente abrir o editor, que é o principal, que é essa caixa aqui, você vai ver que lá dentro a gente tem, por exemplo, o editor, ele tem a chamada, ó, do Solv editor teste. Tá vendo? Na hora de renderizar, a gente vai perceber que ele vai chamar esse cara.
Tá vendo, ó? Aqui ele tá chamando componente, tá vendo? Então, ele você vai criando componente para cada item e estruturando ali, ó.
Quando a gente fala de Solva feed, a gente tá falando da estrutura geral, né? E aí tem o SVA feed item, que é cada item desse aqui, ó. cada atualização dessa, eh, essas respostas, cada item desse daqui é esse solva-se eh feed item, tá vendo?
Então, a estrutura é basicamente essa aqui. Você tem a parte do sece, eh, tem os DTOs lá para fazer requisição de API. Então, aqui de dentro, eh, ele ele acaba fazendo as requisições lá paraa API para buscar os dados.
Quando a gente abre aqui, por exemplo, eu abrir aqui um F12 pra gente ver o que que tá trafegando aqui. Você repara que quando você abre aqui o o car o registro, eh, ele faz várias requisições. Botar aqui F.
Ele faz várias requisições. Aqui ele tá perguntando quantos itens tem de feed, tá vendo? Então ele bate lá na PI, nessa rota aqui, retorna que tem quatro feeds.
Tá vendo aqui? Esse search eh paginado, ele vai trazer esses itens aqui, tá vendo, ó? Ó, aí ele trouxe aqui os dois elementos, tal.
E quando eu clico na resposta, ele faz um uma nova requisição para trazer outros elementos, né? Então, basicamente essa estrutura aqui é a que tá desenhada aqui no componente. Eu não vou entrar detalhe a detalhe porque seria muito complexo, mas é mais para dar uma visão de como tá estruturado o código, né?
Como acessar de fato e para executar também, porque eu tive uma certa dificuldade para executar. Vou levantar aqui a minha imagem para eu poder mostrar vocês aqui como executo. Na pasta do feed tem esse to run aqui que é uma colinha na verdade de como executar ali o a aplicação, entendeu?
Então, na verdade, você vai fazer o seguinte, você aqui na na parte aqui do do terminal, executar esse comando aqui, tá vendo? ele vai startar a aplicação, porque na verdade o que tem aqui dentro é o seguinte, a gente tem esse sece aqui que é o quando você faz essa operação, ele na verdade ele gera o JavaScript, que é o que a gente tinha falado. E aqui a gente tem uma parte que tem um HTML.
Esse índex HTML aqui é uma implementação do componente. É como se a gente tivesse implementando lá dentro do Solv. Então aqui, ó, tá vendo, ó?
Solva-se feed. Aqui, na verdade, você tá implementando o uso do feed. Deixa eu aí vou abrir um outro terminal e vou executar um segundo comando, que é esse NPN run Service.
Quando eu executo o npm run service, você vê que eu tenho dois terminal, um tá aqui e o outro tá aqui. Ele sobe, é esse cara na porta 8. 000, tá vendo?
Então, se eu pegar aqui no browser e abrindo a porta sumiu, ó, o componente já tá lá, tá vendo? Deixa ó, o componente tá lá. Ele tá dando problema por quê?
Porque e eu não setei as variáveis de local host, então ele não tá aqui. Eu tenho QA e não tenho local host. No caso, se eu fizer assim, se eu vi aqui, eh, vou fazer aqui uma modificação rapidinho, só pra gente poder testar.
Se eu vim aqui local host isso aqui no no login de eu vim botando no local host em todos os itens. Eu matei o cook do que. Então, o seu refresh aqui, ele vai pedir para mim logar [Música] novamente.
E aqui, se eu abrir local host, ele vai me jogar na página principal lá do do que eu vou dar um. Ó, já buscou o total de comentário, tá vendo? Então aqui é o seguinte, eu tô executando aqui, conforme eu vou, qualquer coisa que eu modifique aqui no componente, ele já vai refletir nessa execução aqui.
Então eu consigo testar. Você vê que aqui ele tá trazendo 646 itens porque ele tá pegando todos os itens lá do banco de QA, entendeu? Então eu consigo daqui reagir, fazer tudo, tudo de acordo.
Mas aqui eu tô logado no caso, como administrador, né? Eh, então aqui eu consigo fazer reload do feed. Tá vendo?
Esses comandos que tem aqui em cima já eram comandos que eh é são testes que foram feitos para testar aqui, ó. Por exemplo, esse image modal aqui é para abrir algum tipo de imagem. Então, acaba, ó, aqui é para você abrir um feed num modal, tá vendo, ó?
É uma forma de testar o componente, tá vendo? de executar ali o componente no dia a dia. Então, eh como eu falei aqui, a gente tá executando, então já é possível fazer o desenvolvimento, eh, fazer ali a implementação, né?
E e por último, eh, hum, aqui, tá? Beleza? Então aqui a gente já consegue fazer essa parte build aqui.
Quando você faz o build da aplicação, como eu tinha falado, ele gera esse JS aqui, tá vendo? Que é o, deixa eu cancelar aqui a execução. Só cancelar aqui, ó.
Cancelei. Aí eu já não consigo. Eh, ele matou o o o serviço lá, né?
Tá? Eh, então aqui a gente tem um, esse Solv feed eh, JS que ele cria, é o arquivo resultado desse dessa operação. Para poder buildar ele, a gente tem lá o outro comando, tá vendo?
Doc build. Quando executa ele, ele gera aquele arquivo, esse arquivo aqui. E aí, como que a gente faz para implementar?
Na verdade, a gente vem aqui na pasta build, tá vendo? pega o feed, esse esse solva esse feed. E aí eu vou lá na pasta, por exemplo, do eh do Solva eh core.
Aqui tem uma pasta eh view share wwotjs. E aí tem uma pasta aqui de web component fit, você vê que tem o JS aqui, tá vendo? Então esse JS aqui, aí você copia para cá, gera uma nova brand da dessa do core, né?
Gera nova brand, atualiza o feed, pronto, ele as modificações que foram feitas ali, elas já vão sendo implementada lá no no Sol, entendeu? Então assim, essa daqui é a estrutura do feed. Eh, o resto teria que entrar aqui no código, entender como como foi estruturado, mas é dessa forma que funciona.
Conhecendo esses comandos para executar, conhecendo a documentação do lad. Eh, ah, uma coisa que é importante também é, por exemplo, você baixou os fontes, é necessário você fazer o npm. Você precisa estar com npm.
Eu tô com a versão aqui 614, precisa ter o node também instalado, né? E aí quando você dá o NPN e i ele vai ele vai baixar todos os pacotes e instalar, inclusive o ladit, né? Se a gente vir aqui no package, quer ver?
no package JSON, você vê que aqui ele tem o lead na versão acho que 2. 0 aqui, Lit 2. 0.
E aí quando você faz o NPN install ele baixa todos esses pacotes aqui e aí a aplicação aí depois você só executa os comandos e e a aplicação abre. Então assim, é basicamente isso, né? Não tem muito muito mais o que falar.
O resto é mais conhecer o código, beleza? Espero que tenha sido útil aí.
