Guia completo para customizar o Izing.IO com a sua marca e paleta de cores

[Música] Fala galera beleza Pedrinho da Nasa aqui especialista em automação e marketing e no vídeo especial de hoje nós vamos explorar a solução do e onde eu vou trazer considerações aqui para vocês de como tá manipulando o front-end dessa solução para você que me acompanha que eu vou deixar meu muito obrigado para você que está chegando hoje quero dizer que você é muito bem-vindo e muito bem-vindo ao canal da comunidade zdg como de costume preparou passo a passo né vou deixar as informações na página de apoio só que antes de continuar eu vou pedir seu

like seu compartilhamento que você se inscreva no canal e marque o Sininho de Jingle Bell para receber todas as notificações e deixa um comentário para mim embaixo desse vídeo dizendo qual solução você gostaria que eu construísse para você aqui no canal das energia pessoal a gente já explorou a instalação do local realmente né trouxe aí dois vídeos para vocês ali rodando com docker Inclusive eu tô rodando no meu Windows aqui é né os bancos né o reptil redisel docker tá bem tudo na minha careta aqui né E hoje nós vamos manipular aqui o front-end né

Nós vamos aí fazer algumas alterações de ícones de textos tá Para que você tenha aí um embasamento para fazer as alterações no Quasar né Ele utiliza aqui uma tecnologia chamada vu né que é um Framework aí de JavaScript né integrado né leve né mas bem interessante né com algumas peculiaridades aí em relação ao react né que ali o frontiene do A Ticket onde essa solução foi baseada para quem não conhece é uma solução aí que foi criada pelos né Ele é um desenvolvedor brasileiro tá bem inclusive Não é esse aqui que eu quero quero agora

provavelmente trocou o nome acho que ele trocou o nome tá mas asings né é uma solução aí né multi canais multi atendimento né Tem interface também para Insta Face telegram né você pode fazer essas conexões a gente a gente explorou aí apenas né do app de mensagens também mas basicamente instalações já fez não vou passar pela instalação novamente se quiser aprender como instalar tem aqui no canal instalação local na comunidades ele já tem instalações VPS tem instalador facilitado lá para você só colocar os né frontback interface de mim inclusive ele tem uma interface multitanet né

lá dentro a gente manipula essa interface né ela não está terminada né mas como é um acesso a banco de dados você consegue estar manipulando ela para ela a gente trabalhar ela não espécie de multi Tenente a gente vai trabalhar hoje no aqui na pastinha do front-end né então primeira coisa está mais Zing Aí localmente e vamos ali pular o voo né Assim que você faz lá a build né com Quasar né a build dele é com Quasar ele vai ficar dando essa mensagem porque eu tô desconectado tá tô sem conexão aqui né E tem

cálculos que já estão aqui na no meu banco de dados beleza ele vai ficar dando Às vezes a mensagem checagem ali no back só desconsiderar eu acho que eu tenho que estar mostrando agora né tem atendimento aqui tá bem deixa eu abrir aqui ó tem vários atendimentos tá beleza vamos ver se ele tá rodando aqui só um momento que ele perdeu a conexão rapidamente Vamos ser conectar beleza reconectei aqui rapidamente né de um restart ali computador tá apanhando coitado Mas vamos lá basicamente assim que você faz a Build do Quasar né com o Quasar essa

tecnologia que é em voo né ele cria para gente dentro do front-endi a pasta do surf onde tem os componentes do front-end tá para quem já trabalhou a ticket né A solução é bem baseada no A Ticket né inclusive as pastas são semelhantes né então a gente tem lá por exemplo layout né a pasta layout também layout né que trabalha essas informações aqui do layout principal né onde a gente pode por exemplo alterar esse íconezinho aqui ó é só a gente encontrar ele temos aqui trocar o menu então quero trocar ali a palavra menu que

tá aparecendo menuzinho né salvou ele compila ali para gente vamos ver se é esse objeto menos Zinho tá vendo menuzinho né então vocês vão ver que eu vou o que que ele é ele tem aqui na cabeça dele o template né E aí que logo abaixo do template assim que ele fecha ele vem eu já script tá bem é bem parecido ali com react tá é com o script que vai rodar vai trabalhar os componentes ali do template tá bem aí temos lá reder quero trocar a cor do header né então você pode trocar a

classe dele aqui tá bem tem aqui as informações do botão denso round né volta né então todas essas classes aqui né você pode estar trabalhando dentro como se fosse aqui o classes de react htmlzão né Você pode tá trabalhando aqui tá bem trocar por exemplo quero trocar aqui o ícone né Doutor bar né tô usando esse aqui ó vou botar um s só só vocês vão ver que eles vão sumir né Beleza não existe então que você pode fazer dentro da pasta lá Public onde tá você pode jogar um ícone seu vamos jogar um ícone

lá vamos pegar aqui alguma coisa dentro local no meu computador vamos ver se ele vai vai reconhecer vamos pegar aqui [Música] um íconezinho aqui por exemplo esse pretinho aqui nada a ver é chamar e com ícones edg vamos ver se ele vai se ele vai reconhecer se pede uma nova Build vamos ver se compile traz para gente aqui Ah beleza trouxe né não tá no formato correto né você trazendo formato correto beleza entrou ali tá bem aqui mais tempo aqui no menlist aqui ó notificações isso que aparece notificações em breve tá vendo esse papel aqui

então você pode trocar aqui ó no teu chip né avatarzinho Tá então todas as essas questões aqui por exemplo do mei do vô né aqui da do menu principal você vai trocar ali nessa opção que eu te passei né no usuário estou barzinho do usuário né que mais tem interessante aqui Dark mode tem até um Deck modzinho aqui é o Dark mude aqui embaixo né beleza tá até meio doidão meu Dark motion beleza calma coraçãozinho tá aí vamos pegar aqui por exemplo uma página né Estou trabalhando ali o mei né do layouts Vamos pegar uma

page aqui vamos pegar uma page Qual peixe nós vamos pegar aqui vamos pegar peixe de contatos desde contatos né vamos trazer aqui ó contatos tá ainda os contatos ainda que vou pegar aqui alguma coisa que a gente queira alterar como encontrar aqui nome só que tem nome ali para a gente alterar nome colunas tá tem aqui as colunas do voo então estamos aqui ó deixa eu ver se aqui ou lá no outro nome Label aqui ó beleza contato Motel do voo né Então temos o leigo ali então esse aqui é o neoplace holder dele tá

bem que a gente pode estar tá configurando informações adicionais para adicionar então esse aqui é o modal provavelmente tá então esse objeto de modal tá bem ele é o que aparece aqui quando a gente vai pôr no adicionar tá bem E aqui o Windows vou em si né é a aqui embaixo Nossa tabelinha que nós estamos trabalhando a mudar o Zinho né que a gente estava falando aqui do contato modal né então mudar o Zinho dá tonalidade de contato número né informações adicionais que aparece aqui ó informações adicionais e DG Vamos jogar aqui vamos compilar

e vamos ver o que ele vai trazer você desde já compilou aqui os edg tá vendo Então aqui você pode alterar o modal né então você tem todos os componentes né do Index voo né Vamos sair aqui ó vamos lá ver onde que ele tá chamando o nome nomes e DG vamos ver se ele vai trabalhar aqui ó vamos dizer né já trouxe Então se vai fazer né não sei por onde começar para fazer uma alteração né Aí você vai lá quero alterar um negócio aqui na tela de usuários Tá mas na page user né

Vamos na page usuários tá até em português aí ele tem lá modal do usuário né é mudar o da fila que o usuário vai trabalhar né e tem aqui o index em si né que é como se fosse um JS com react ou index voo aqui né Eu quero trocar o filas tá filas Então essa Opa só você vir contra o f buscar o filas tá ele vai trazer para você a palavra filas vamos achar ela aqui ó filas o labelphilas certo então se altera lá filas edg start aqui Opa escrevi não cara tudo bem

filas alterou aqui para gente sem dados disponíveis vamos ver onde que tá isso aqui se esse aqui é dessa página mesmo ou isso aqui é um rodapézinho de algum modal sem dados disponíveis para os cara aqui tá não tá aparecendo ali como é que a gente pode buscar buscar aqui ó sem dados disponíveis provavelmente é um retorno sem dados aqui ainda Que isso tem dados aqui assim dashboard ele tá vendo esse dashboard ele tá conectando ah ele tá maluco assim porque Nossa eu tô conectado com o número aqui gente deixa eu desconectar esse trem aí

que tá respondendo geral deve ter respondido um tanto de gente deixa eu ver tranquilo por isso que apareceu o contato eu não tava entendendo ele reconectou no meu número é para vocês verem eu fiz essa conexão aqui acho que foi no início de dezembro que eu tava manipulando a solução e ela permanece ativa então É bem interessante né relação aí da versão do multi dispositivos né mas basicamente é isso né quero trocar uma coisa que eu não tô encontrando onde ela está por exemplo quero trocar a palavra horário de atendimento como é que eu busco

ela aqui no projeto Então você tá no teu visual estúdio aqui ó aqui na parte explorar né Passa aperta contra o shift F ele vai aparecer um surf para você você põe que horário de atendimento ele vai dar para você todos os locais onde tem horário de atendimento tem lá no meio layout né Aí você volta aqui ó temos lá o horário de atendimento na página horário de atendimento Edge por exemplo podemos colocar né que trouxe para gente e nós temos também o outro que nós abrimos aqui ó que é o horário de atendimento que

é aqui do lado o horário de atendimento do coração horário para vocês verem vamos ver se ele já vai entender isso aqui trazer para gente tá vendo e aí aqui ele tem qual que é o caption Né que é o título de horário tá bem a Rute names aqui você não muda não que isso aqui é para onde a página que ele vai água criar uma nova página ali sei lá qualquer coisa que você for criar né você tem que fazer o root dele mesmo esquema lá você vai jogar as rotas todas né então se

for criar novas pastas leva as páginas Você vai precisar criar novas rotas e chamar isso aí nas páginas também então tem todo um processo de construção aqui da engenharia né do projeto né aqui é mais que temos aqui de interessante nós podemos explorar basicamente é isso né pessoal deixa eu ver aqui Ah legal eu tenho aqui que estamos lá no meio lá layout né tem aqui o ícone né então você pode estar trocando os ícones né então MDI você procura os ícones MDI na web lá e vai mudando né material design aí com eu acho

Procura lá MDI na calend and clock vamos buscar material design icons Você pode buscar dentro da biblioteca né que ele utiliza lá você pode buscar outros ícones tá do material Aikon né e trocando Será que são esses mdis aqui [Música] mdmdi vamos buscar aqui vamos colocar um outro de fax Será que ele já vai chamar vamos ver já trocou MD fax Tá bem então vai lá no design icons tá e você pode colocar qualquer um daí botar aqui no etiquetas botar um burrinho etiqueta apareceu burrinho tá então ali os material design ai quando você vai

utilizar para tá alterando tá os ícones da solução Beleza então alterar ícones alterar imagens alterar descrição escrito dentro da página é só você navegando ali pelas páginas na página pelas pastas tá do front-end né que estão ali principalmente na pasta cerce né criada após o Build do Quasar né você vai manipular os códigos voo ali para tá customizando a solução de acordo com a sua necessidade até porque durante a licença você mentir né onde você pode né comercializar distribuir modificar a vontade né com as limitações de garantia e habilite que é a responsabilidade né confiança

né quer dizer isso aqui beleza contanto que você né Deixa lá o aviso da copyright né da licença deixa ali embaixo né já tá morta a cocota beleza forte abraço beijo no coração de todos fiquem com Deus qualquer dúvida é só chamar tamo junto pedreiro da Nasa até a próxima