Projeto Assistente: Aula 02 - Criação do Projeto e das Telas

a fazer a verdade eu gostei mais dessa versão azul aí da Beta do que da minha versão Rosa da Alfa viu achei que ficou muito legal ficou muito bonito mesmo E aí é muito bem pessoal nessa aula nas ruas construir o front-end do nosso projeto da assistente nós vamos fazer ali as telas a parte visual e já colocar ela funcionando dentro do nosso celular né só a parte das telinhas a parte visual mesmo depois a gente vai fazer nas próximas aulas a parte lógico funcionamento interno aquela coisa toda mas a gente já vai deixar o

corpo dela por assim dizer já preparado vai ser muito legal bem interessante a sala nós vamos aprender vários conceitos importantes e bem interessantes do desenvolvimento de aplicativos então para nós começarmos o nosso projeto eu vou abrir que o nosso próprio de comando e eu vou acessar a pasta onde eu faço os meus projetos de aplicativos que na outra aula e eu criei uma pasta chamada aplicativos você pode entrar na pasta que você criou não CD É o comando para entrar numa pasta que no nosso terminal se: barra e vou entrar na minha pasta AZ O

que é a pasta que eu creio no seu: barra para fazer os meus projetinhos certo então entrei dentro aqui da pasta né quando sai aqui do seu usuário aparece o nome da pasta é porque você já assistiu ela vou dar um CLS aqui para limpar e agora vamos criar efetivamente o nosso projeto para isso nós vamos dar o comando forma ó cliente é o comando do corda para para que é um novo projeto tão a gente dá um corte de uma cliente o primeiro parâmetro que a gente passa é o nome da pasta do projeto

Nesse caso a gente vai chamar de assistente Beleza se você quiser fazer um nome composto você precisa usar sempre o traço certo nunca espaços em branco então por exemplo se eu fosse fazer assim ó Beta traço assistente que vai ser o nome da pasta do projeto eu tenho que fazer com traço assim eu não poderia fazer dessa forma que a senhora espaço Assistente porque senão na linha de comando ele entende que isso aqui é um próximo comando que eu tô não bom então eu vou fazer assim peca Assistente vai seu nome da pasta do meu

projeto então o primeiro parâmetro o nome da pasta do projeto o segundo parâmetro que você vai passar aqui é um identificador único para o projeto todo aplicativo Android mesmo os aplicativos aí oeste também eles precisam ter como se fosse um código que é só daquele aplicativo um identificador Wide né e as lojas uso esses identificadores para ter sempre aplicativos únicos então só para mostrar para você ou se você entrar aqui no Google digitar assim Google Play não entra lá no site do Google Play no Play Store e entrar em algum aplicativo aqui aleatório vou pegar

que isso aqui do robô Roblox por exemplo né se você olhar aqui em cima não RL você vai perceber que ele tem aqui ó é a editar vendo aí dia igual a com ponto robloxs. Cliente está vendo isso daqui é o identificador desse aplicativo nenhum o o motivo dentro da loja vai poder ter esse mesmo identificador e Esse identificador ele sempre tem o padrão de site ao contrário por assim dizer ela com ponto robloxs. Cliente não quer dizer que você precisa ter um site tá é só um padrão como você vai colocar o nome do

identificador projeto Beleza então vamos ter que criar aqui também o identificador para o nosso projeto então aqui eu vou fazer assim o br.com.br esta ponto assistente beleza isso aqui você pode dar o identificador que você quiser contanto que não seja repetido se você porque querer colocar na loja da Google Play ele precisa ser um identificador único que nenhum outro aplicativo já tenha utilizado Tá mas isso aqui não precisa se preocupar Porque qualquer coisa Futuramente você pode estar modificando isso aqui de uma forma bem simples bem fácil no as configurações do teu projeto Então tá o

segundo parâmetro então é o identificador do projeto e o último parâmetro é o nome do aplicativo o nome que vai aparecer lá no celular escrito mesmo certo e nesse caso eu sempre recomendo quando você tiver nomes compostos a usar "duplas para indicar que é o nome composto por exemplo assim o colocar" duplas Bessa assistente" duplas como são palavras compostas duas palavras que vão formar o nome do aplicativo Eu tenho que colocar dentro das "duplas porque senão a linha de comando não vai entender se eu fizesse sem as" grupos assim dessa forma ele só entender esse

o primeiro comando Beta e esse assistente seria como se fosse um outro comando tá entendendo Então você tem que fazer usando as aspas duplas para não ter nenhum tipo de problema Ok então só recapitulando para a gente entender aprender o comando inicial de criação do projeto córdova cliente o primeiro parâmetro é o nome da pasta do projeto segundo parâmetro o identificador do projeto e o terceiro parâmetro é o nome do aplicativo em si Vamos dar um enter Olá aqui é o projeto para nós falar quando ele volta já aqui para o nome da pasta quer

dizer que o projeto foi criado tudo certinho para a gente Acessar agora passa desse projeto porque nós estamos na pasta aplicativos a gente vai dar um CD aí no caso eu vou fazer Beta traço assistente que é o nome da pasta que eu quero acessar que a passa que a gente frio no projeto aqui em cima e aí beleza a gente já entrou dentro da pasta ali Beto assistente beleza é um CLS aqui para limpar então e aí agora nós vamos adicionar a plataforma Android que vai ser a plataforma que a gente vai querer tá

trabalhando aqui nesse projeto então vou fazer assim córdova clash War The Last four add Android tá tão córdova platform add Android Córdoba espaço platform espaço add espaço Android isso eu quero dizer assim para o código corda voltar adicionar e a plataforma Android no meu projeto beleza e aí eu posso dar um entra e ele vai adicionar a plataforma android dentro do nosso projeto só a gente acordar que ele fazer adição aí da plataforma android no projeto beleza adicionada a plataforma android tá tudo já preparada que inicialização do projeto concordo lá na linha de comando então

vou fazer o seguinte agora eu vou dar um Celeste para limpar isso aqui vou dar um comando chamado Cold Espaço Pontos Se você dá Cold espaço ponto dá um ente você vai estar abrindo esse projeto no vs code olha só que legal de uma forma bem mais rápida aqui para abrir o projeto tão de um enter é que Cold espaço ponto e aí ele já vai ter aberta que o nosso o PS Cold a pasta que para nós interessa aqui dentro do projeto do córdova de um aplicativo que a gente vai estar trabalhando é essa

daqui tá pessoal a pasta www porque dentro da pasta www que ficam os arquivos que realmente vão ser os arquivos que a gente vai estar usando para criar o nosso aplicativo essa pasta que plexiformes não de modo isso tudo que tiver aqui fora não interessa para nós só que é só por corda utilizar para ele montar o nosso aplicativo depois quando a gente for realizar a bild agora a parte de construção realmente o dia a gente vai colocar lá o HTML CSS JavaScript para montar a nossa aplicação fica dentro da www beleza Inclusive a gente

pode entrar aqui na nossa index.hu ml que é a página inicial que já vem com projetinho do córdova a gente pode vir aqui embaixo e dá um Gol Live para gente abrir o live-server dessa página E aí vai abrir ali o projetinho do corda para que inicialmente vem dessa forma que como E aí beleza já rodando se você quiser ver isso funcionando no seu celular você vai pegar aquele caminho que tá ali em cima tá vendo que tem um caminho aqui 127.0. 0.12.5 500 que a porta que a gente está utilizando o que que você

vai fazer você vai colocar aqui ó antes no lugar desse 127.0 1.0.1 o IP da máquina que tá rodando live-server no seu celular dessa forma você vai conseguir abrir o projetinho no celular e você pode acompanhar em tempo real as modificações que a gente for fazendo no código certo para você saber qual que é o IP dessa máquina que que você pode fazer você pode abrir prompt de comando né é e ou lá no vs code ou no prompt de comando normal do Windows e daqui um IP config lhe E aí ele vai apontar aqui

para você o endereço e pv4 tá vendo esse número aqui é o número de IP do seu computador E aí o live-server aí aqui no seu Google Chrome você vai colocar aquele endereço que eu coloquei a 192 168. Zero. 128 no meu caso você usa aí o que for do seu tá e a porta no caso aqui 5500 seu que cair aqui ó para entrar ele vai abrir assim é você vai entrar cessará www Oi e aí beleza ele tá no seu celular esperando lá o que a gente tem lá no computador daí dessa forma

você em tempo real pode vendo as alterações que você for fazer no seu código direto no seu celular o que Vai facilitar bastante aí o processo de desenvolvimento no nosso caso eu vou deixar aqui e restaurada aqui no cantinho o meu navegador e vou deixar o veste Cold aberto aqui nesse canto para a gente ir ver em tempo real as alterações que a gente faz aqui desse lado acho puxar minha cara para cá Aí dessa forma vocês estão acompanhando o vídeo podem ver as alterações aqui direto no navegador mas aí se você tem no seu

celular fazendo procedimento que eu te mostrei agora a pouco vai ficar bem mais fácil Beleza agora a gente vai instalar o frame work servem o nosso projeto foi morto Seven ele vai ser responsável pela parte de componentes visuais a roteamento né as nossas telinhas tudo que a gente vai precisar usar de efeito visual aí para aparecer um o usa o Framework Seven certo então para a gente usar ele aqui no vs code a gente vai fazer o seguinte Ah deixou só por enquanto a gente não vai olhar aqui a documentação vou deixar ali restaurar de

Enki e aqui no vs code vou dar um contro "simples para abrir o meu terminal e aqui eu vou fazer o seguinte eu vou instalar o Seven via npm então você pode fazer assim ó npm espaço em estol espaço framework7 a sofrer porque a gente fala sempre morto serve mas é free works at né espaço - - save que é para gente instalar ele aqui no nosso projetinho Vamos dar um entra e aguardar ele fazer a instalação beleza ele já vai ter colocado o tremor que servem aqui dentro da nossa pasta node-modules certo só que

a gente vai extrair aqui de dentro da novo de módulos o arquivo Java Script o arquivo CSS que vai ser as únicas coisas que se precisar realmente do tremor que servem para trabalhar Então olha só que que você vai fazer você vai abrir aqui a sua pasta no de modos vai encontrar aqui a pasta Framework Seven ó e aqui você vai copiar primeiro você vai encontrar aqui ó Primor 7 Seven bundle. JS que é esse daqui deixa eu só ver se não é um desses outros aqui e esse aqui ó a banda um ponto JS

tem que tomar cuidado tá pessoal porque a gente quer pegar não o ponto médio a gente quer pegar esse daqui ó bando o ponto JS você vai copiar control c vou entrar lá no meu projeto na www vou aqui na minha pasta JS vou criar uma nova pasta aqui chamada Live que vai ser de bibliotecas que a gente vai tá usando e dentro dessa pasta Lib eu vou colar aqui o meu crê morte Seven banda o ponto JS OK agora eu vou lá no novo de módulos de novo vou achar lá Primor que serve e

vou copiar aqui ó esse daqui ó frame work serve entrasse o bando. CSS que é o arquivo CSS dele vou fazer um controle você copiem vou lá no meu projetinho na minha pasta CSS www dentro eu vou colar aqui free morte Seven bando. CSS beleza o ok reduzir isso aqui fechar esses arquivos aqui que ficou aberto posso Minimizar que meu novo de modo eles era só isso que eu precisava extrair realmente aqui dentro da nossa www ok e agora que que a gente vai fazer isso fechar esse aqui também abre a nossa index.hr ml e

a gente vai precisar ir em realizar o nosso projeto do Primor serve para a gente fazer isso a gente pode vir aqui no site do tremor que servem entrar aqui na documentação Docs e aqui a gente vai fazer o seguinte a gente vai entrar aqui ó onde diz é phtml layout tá vendo aqui é pra HTML layout a gente tem aqui o modelo de uma página HTML para inicialização do foi morto serve então eu vou copiar todo esse código aqui com o trouxe vou vir aqui no meu projeto na minha index.hu ml posso até tirar

aqui agora esse terminal dando um contra o "simples aqui o show chiclete aqui em baixo vou dar um controlar para selecionar todo o meu conteúdo daqui da minha index.hu ml vou deletar e vou dar um control V aqui nesse modelo que a gente pegou ali do site do tremor que serve e vou dar um contra o Oeste um salvar beleza e a gente vem aqui a gente vai ver que por enquanto aqui não aconteceu nada nenhuma alteração ainda aqui no nosso live-server certo é a gente inclusive vai ter que inicializar ele novamente daqui a pouco

porque acho que deu uma luzinha aqui tá tranquilo vamos colocar agora aqui nas referências do nosso arquivo index. HTML o caminho para os nossos Java scripts né então vou colocar aqui ó a nossa pasta JS Lib primework Seven bundle. JS e aqui a gente vai ter que fazer aqui uma uma nova pasta lá na documentação do firmar que serve um novo arquivo que aprendiz realizar Nossa aplicação aqui você vem na documentação initializ'e EP ó e vai copiar esse aqui debaixo esse conteúdo aqui debaixo que é para inicialização no seu ep tá já vem com os

comandinhos do seu morte serve para inicializar aplicação de um com trouxe aqui dentro da minha pasta JS eu vou criar uma nova um novo arquivo chamado luta e vai ser responsável pelas nossas rotas roteamento e eu vou colar que a inicialização do frame work servem aqui beleza que eu posso trocar para o nome da aplicação de Beta o Beta ou deixa Beta assistente aqui a gente pode colocar o identificador que a gente colocou aqui é eu não me lembro como que a gente fez acho que foi se Beta assistente que foi dessa forma né br.com.br

assistente se você não lembrar você pode entrar nessa que config. X ml aqui ó e aqui ele vai mostrar qual que é o identificadora do seu projeto que inclusive você pode mudar aqui depois Se for necessário mas era esse mesmo aberta assistente É esse daqui Beleza o arquivo ou ter. JS pessoal ele é o arquivo responsável pelas rotas pelas páginas de um projeto usando foi morto serve certo depois a gente vai ver isso aqui na parte de navegação mas é muito parecido com até Como funciona o Express é se você assistiu às aulas de node.js

É bem parecido esse conceito aqui derrotas do fêmur que serve a gente já vai ver como funciona Daqui um pouquinho Beleza então aqui agora a gente vai ter que colocar lá na nossa index.hu ml o caminho para esse nosso rutter. JS Então vamos colocar o CRC JS holter. JS para gente apontar a beleza agora a gente vai ter que apontar o CSS aqui do nosso Primor que serve então aqui em cima onde a gente tem as referências do CSS eu vou colocar aqui a pasta CSS e a gente vai colocar o premorto Seven bando. CSS

e aqui embaixo a gente pode fazer um customizado que vai ser um arquivo CSS que a gente vai colocar que é das nossas próprias customizações né pode ser até essa index.hu CSS que já vem para o padrão aqui ó só que aqui a gente vai apagar todo o conteúdo que ela já venha Vamos dar um controle a delete contra o Oeste só para a gente ter aqui um arquivo zeradinho para nós beleza OK vamos ver então se aqui vai rodar para nós o nosso a nossa inicialização os parar aqui a nossa porta aqui do live-server

e dá um Gol Live de novo Oi e aí beleza ele tá rodando aqui a inicialização do Primor que servem dessa forma você vê que ele cria um navbar aqui em cima né um conteúdo da página as barras de navegação aqui bem no estilo de um up mesmo né bem legal é como que ele funciona aqui o tremor que serve os componentes fica igualzinho de Android agora vamos começar a especificamente construir a nossa aplicação certa primeira coisa que você precisa entender um pouco é sobre como é a estrutura é HTML do projeto usando os primórdios

é vem então ele funciona assim a div principal do projeto é uma div cujo agir e ep essa é a nossa div principal do aplicativo usando foi morto serve aí a gente tem uma viu viu Man que é uma div onde vai ficar o conteúdo de Todo projeto a página que é usando aqui um atributo das a name uma classe page que há para dizer se especifica que a gente está trabalhando e aqui os componentes que a gente vai estar usando a gente tem aqui Um navbar um bota um tubarão 11 page-content que a div

principal de onde vai ficar o conteúdo do nosso ep então só para você ver o que que é cada coisa aqui no HTML aqui mostrando visualmente né esse essa parte aqui onde está escrito ao em São F é esse navbar aqui certo deixou só restaura aqui é esse navbar aqui essa parte de cima Esse bota um tubarão aqui ó é essa barra aqui embaixo e esse peixe contente é o conteúdo do miolo da página aqui do nosso projeto certo então tudo que fica no miolo a gente coloca dentro do peixe contente tudo que é fora

deste miolo a gente vai colocar antes dessa diviac certo só para você entender um pouquinho a estrutura HTML aqui do foi morto serve então o que que a gente vai fazer primeiro de tudo aqui na nossa index.hu é mas já vamos fazer com que o nosso corpo da página nosso baile ele fica escuro E para isso a gente pode fazer assim background colocar que vai ser Black seu dão contra o Oeste para salvar por enquanto não aconteceu nada eu posso dar aqui um importante e ainda não aconteceu nada deixa eu ver seu referência aqui no

projeto index.hu CSS beleza Tá referencial daqui até posso te colocar no título Beta assistente a beleza aqui não é no baile tá pessoal tô fazendo besteira aqui a gente vai querer colocar ó é no peixe contente tá vendo o conteúdo da página que a gente quer que fica escuro Então posso usar aqui por exemplo. Beijo contente que é o nome da classe aqui do conteúdo e dá um salvar ó aí já ficou escuro aqui o fundo certo Acho que nem precisa aqui do importa já ficou escuro aqui para nós o conteúdo da nossa página eu

vou usar que um recurso do CSS que é muito legal pessoal que se chama Rute quer para a gente criar variáveis CSS eu faço assim: Ruth aqui dentro eu posso criar como se fosse variáveis que eu posso usar em todo o escopo do meu CSS então por exemplo eu vou fazer aqui ó uma variável chamada é black e vai ter o seguinte valor que ele vai ter o valor Black é certo então quando eu colocar essa variável eu vou dizer que eu vou querer tá usando essa cor e no no lugar onde a gente teria

essa cor agora a gente faz assim ovar abre parentes e coloca traço traço Black dessa forma a gente tá fazendo a mesma coisa a gente está dizendo que a gente quer usar esse valor porque quando a gente precisar futuramente por exemplo mudar as cores da nossa aplicação a gente só que em cima eh troca o padrão de cor que a gente quer que isso vai se aplicar em todo o restante que tiver usando àquela variável o que fica bem prático para gente está trabalhando Beleza eu vou fazer também uma variável chamada primário que vai ser

a cor primária do nosso projeto aqui eu vou fazer um azul só vou fazer assim Blue e eu posso inclusive pegar um tom de azul aqui que eu vou querer mais clarinho eu vou querer pegar aqui um tom é de um azul mais claro pode ser isso daqui a gente pode fazer um secundário e vai ser um Deep Pink uma cor secundária a gente pode fazer aqui um sucesso vai ser um verde Green a gente pode fazer um ordem que é um tom de amarelo Então vou usar aqui o gold a gente pode fazer um

danger que vai ser aqui um head certo então a gente tem um padrão de cores aqui do nosso aplicativo as cores que nós vamos estar usando no nosso aplicativo não fica muito prático quando você cria essas variáveis aqui para você usar em todo o restante da sua aplicação beleza vamos vamos agora organizar isso aqui então é esse nosso navbar aqui em cima a gente pode fazer da seguinte forma então a gente pode mudar que o título para Beta vai ser o nome do nosso aplicativo e aqui no nosso navbar begê que é uma das determina

acordo navbar a gente pode fazer assim ó o aparece.na vi o PEC a navbar BG E aí e a gente pode colocar aqui o background dele vai ser o nosso vai Black E aí o Olá já ficou escuro também na verdade a gente poderia fazer assim ó tá vendo que a gente está repetindo aqui duas vezes a mesma coisa então se a gente podia simplificar isso criando só uma classe que seja assim ó BG Black eu vou criar que vai ter esse background em vez da gente usar essas classes aqui a gente usa beijei Black

onde a gente quiser que aplique o background escuro Olha só como vai ficar bem mais inteligente eu acho que a gente colocar seu BG Black Olha lá que legal já ficou é bem show de bola esse daqui né E aqui no peixe contente eu vou colocar o BG Black também ó já aplicou o escuro para nós ali a gente pode fazer também o texto que a gente quer padrão a cor que a gente vai querer que seja o testei eu vou fazer o teste ser primário que é o texto primário vou querer que usa esse

padrão de corpo de malha aqui então vou fazer essa cola vá ó e vou usar aqui o primarily on bom então tem a cor de texto primário toque eu posso colocar no meu pai tô aqui ó deixes ter traço Primar Oi e aí já ficou azul ali o meu texto que eu vou fazer a mesma coisa aqui no conteúdo do nosso page-content só pra gente ver como vai ficar deixa esse ter primário e aí todo o conteúdo aqui dentro do Miolo vai ficar dessa cor e se bota um tubarão aqui que a gente tem a

gente pode arrancar fora então a gente pode pegar aqui ó selecionar todo bota um tubar o e remover ele beleza já não tem mais o nosso botauto bar ou lá embaixo agora a gente vai querer com que esse nosso navbar fique centralizada aqui né esse nosso título aqui ó essa nossa classe Pai tô aqui ó fique Centralizado para isso a gente pode fazer o seguinte a gente pode criar uma classe que chamada justify e é contente em ter que a gente vai passar o atributo justify-content-center que é um atributo relacionado ao display do tipo Flex

né do fluxbox e a gente vai passar essa classe aqui no navbar Inner que é o responsável pelo conteúdo do nosso navbar vou fazer assim justify-content-center para passar aquela classe e aí já vai ficar alinhado ao centro que o texto Se você usasse aquelas text-center não ia funcionar tá porque o nave barino era aqui ele é do tipo de display Flex E aí se você colocar o text-center ele não vai para o meio de jeito nenhum se eu tenho que usar o justify-content beleza OK vamos tirar o conteúdo agora aqui da nossa div page-content que

é um miolo aqui na nossa aplicação e vamos colocar aqui a imagem que a gente vai querer que seja da nossa assistente que vai aparecer aqui no meio né então para isso eu vou entrar aqui nessa página onde a gente tem os gifs dos Assis e o link vai estar aí em baixo do vídeo para você pegar né e eu vou estar em vez de usando aquele mesmo que a gente usou é É que eu usei para mim assistente Alpha né como a gente está querendo aqui aberta eu vou usar que o outro né que

seja aqui então de azul eu vou pegar esse daqui ó que é esse Big Blue aqui eu achei bem legal bem bonito mesmo e eu vou fazer o seguinte clicar com o botão direito aqui em cima dessa imagem salvar imagem como aqui dentro do projeto da Beta Assistente vai entrar no www.mg e aqui eu vou salvar que como Beta. Gif Beta. Gif e salvei aqui essa imagem Beleza agora aqui no nosso código deixa eu vou tá aqui e aqui no nosso código aqui dentro do nosso peixe contente eu vou fazer o seguinte vou colocar uma

tag MG de imagem src vamos apontar para nossa passei MG vamos pegar Beta. Gif e choramos olha só que bonito que ficou essa nossa assistente aqui beleza pessoal olhando aqui no meu celular eu vi que ficou muito grande esse tamanho de imagem dentro do celular até que no navegador não parece que ficou grande mas olhando aqui diretamente no celular talvez você venda em tempo real no seu celular também eu já vi que ficou grande então quê que eu vou fazer vou colocar aqui um Style diretamente na imagem mesmo vou colocar um CSS inline e vou

dizer que o tamanho máximo dessa imagem o Max o Edith dela vai ser de 350 px-350 pixels E aí já ficou aqui ó o menorzinho pouco assistente só que tá agora bem para o canto nós vamos alinhar ela ao centro para alinhar o centro que a gente pode usar com uma imagem mesmo aqui uma propriedade que é o text traço Aline traços em ter que é uma classe do Framework serve para o alinhamento de texto ao centro e vou dar um salvar e aí beleza já ficou ali a nossa assistente bem no meio da nossa

tela beleza OK então a gente já tem aqui a nossa imagenzinha O que que a gente vai querer fazer agora é a área onde vai ter o texto escrito né onde vai quando ela fala parece o texto e aqui embaixo o Fábio Button que é para gente clicar para a gente falar com ela dá uma entrada de voz aqui então vou fazer o seguinte eu vou querer aqui um parágrafo fazer super Lauren né você faz um p sinal de maior Lauren e dá um interesse achar um atalho do veste Cold para e o papelório e

Inter para ele colocar aqui um texto aleatório aqui tá vendo ó um texto qualquer só para gente ver o conteúdo do texto aqui a gente pode colocar isso inclusive dentro de uma div vou fazer uma div com a classe Block que é uma diva especial do Framework servem só para deixar tudo um pouco com pedem assim ó ó tá vendo fica ela como se fosse centralizada em bloco dessa forma fica um pouco mais alinhada que a partir do texto Então é aqui que vai aparecer o texto do que a nossa assistente falar beleza e vamos

colocar aquele botão flutuante que vai ficar aqui embaixo que a pessoa vai clicar para falar esse botão flutuante se a gente entrar lá no site do free amor disser vem deixa eu colocar minha cara para cá a gente tem aqui na nos componentes da documentação o chamado floating Action Button ou Fábio botão Fábio certo esse botão Fabi o botãozinho flutuante que faz esse efeitinho é que fica por cima de tudo deixou mostrar aqui para você só acha aqui ó é esse tipo de Botão assim aquele fica inclusive por cima do que tiver dentro do peixe

content on e a gente vai querer pegar esse daqui ó que é o bem Centralizado em baixo que é o que a gente quer e a gente pode procurar ele aqui nos exemplos tá vendo tá escrito cliente aqui que a gente pode descer procurar ele aqui e vai estar aqui ó na documentação O exemplo dele aqui o botão cliente aqui só que é todo o conteúdo que a gente tem que pegar que a desde aqui em cima dessa Jimmy cuja classe é Fábio e Fábio extended padre Center botton e aqui no caso ele tá usando

color.red que a cor do botão vermelho aqui então vou copiar todo esse conjunto que nesse botãozinho não control c para copiar só para evitar a fadiga né e vamos lá no nosso projetinho deixa eu fechar esse aqui Oh e vamos aqui é antes do peixe contente o peixe contente é o miolo da nossa página que onde está a aplicação não tipo com a minha cara que pro lado de novo page-content ao miolo da aplicação todo componente fica fora do miolo da nossa aplicação a gente tem que colocar que antes da dívida o peixe contente então

no caso navbar que essa parte de cima aqui né fica fora e o Fábio Button também a gente precisa colocar fora do peixe contente então também vou colocar aqui vou até colocar um comentário aqui para a gente saber que é Fábio Button E aí olha lá que legal já apareceu o nosso botãozinho lá embaixo ok Aqui nós vamos fazer então os olhos utilização Desse nosso botão primeiro é nós vamos tirar esses ícones que estão aqui ó que esses ícones aqui não servem Oh e vamos colocar o nosso próprio ícone do material design icons eu vou

entrar lá no site do material design icons e vou adicionar esse conjunto aqui de Conheci no nosso projeto vou ver aqui no botão download copiar que a URL dele aqui online mesmo né vou vir aqui e acima da onde a gente tem a nossa index pontos SS que a nossa nossa CSS customizado e aqui eu vou colar que o padrão de ícones do material-design-icon só que antes eu vou colocar o https que nunca Vê junto: beleza da CBN dele aqui então tá colocado aqui o padrão de ícones do material design icons agora que que a

gente vai fazer nós vamos colocar aqui no ícone Zinho de um microfone né porque aqui ó esse botão ó ele a gente vai querer que ter um ícone de microfone e escrito falar que é onde o pessoal vai clicar para poder estar falando então aqui o nosso FAB Button a gente vai colocar aqui fora aqui dentro dessa desse nosso link mais fora dessa classe aqui Fabi text que é o texto que a gente pode inclusive escrever só falar O que é o texto escrito falar aqui fora a gente vai colocar o ícone Então a gente

vai fazer assim ir só essa MBI MBI microfone microfone com ph que é o ícone de microfone do material design icons né já vai ficar um microfoninho lá para você saber se você pode vir aqui no search procurar você pode escrever microfone e aí já vai ter aqui várias opções até microfone outline tal aqui tem um microfone que é o que a gente acabou usando né então a gente coloca lmdi que material-design-icons m d i o nome do ícone que a gente quer nesse caso é microfone beleza ok tá ficando bem legal bem show de

bola que o nosso projetinho pelo menos a nossa tela inicial aqui já tá bem legal né Vamos utilizar esse nosso botãozinho a gente pode fazer assim a nossa index pontos SS Vamos criar aqui um btn a primary traço outline que vai ser o nosso botão principal de cor azul tá usando a o padrão de cor primária aqui para gente pode fazer assim a gente pode fazer que o background dele vai ser Black vamos usar que o black vai ser escuro e a a borda dele vai ser de um Pixel Gun Pixel sólida e a cor

vai ser a cor primária que vai ser o azulzinho o Ok vamos colocar aqui então no nosso Fabi botão só tirar aqui esse color.red e colocar aqui o btn traço outline trás ou melhor primário né que Mari trás outline que é esse botãozinho a ficou bizarríssimo acho que a gente colocou no lugar errado esse btn-primary utilyne não tem que ficar aqui no nosso Fábio ele tem que ficar aqui no nosso link you E ai beleza é só que não funcionou vamos ver que que a gente precisa acho que eu preciso dizer que é importante essa

regra do fundo sei escuro aí ó ficou show de bola se colocar um importante aqui no background ele vai forçar que a cor do botão fique de acordo com que a gente colocou aqui a borda ficou azulzinho certinho tem um botão aqui falar mas eu vou querer que a cor também do texto ali o Collor também seja a da cor primária que ele Jupiá ó e aqui a gente também vai ter que colocar um importante também para lhe obedecer beleza colocasse em cima Nós criamos aí o nosso btn-primary outline a gente pode fazer várias as

variações de de botões né já aproveitar que a gente já fez aqui ó a gente pode colocar o secundary e aqui vai ser o secundário e para a gente pegar a o outro padrão de couro aqui né sucesso warning danger gente já pode deixar preparada que esses padrões ó então a gente pode fazer success success o que vai ser successos s a warning on a warning warning Oi e o denger denger denger e dengue dessa forma a gente já tem os conjuntos de cores de botões que a gente vai estar usando no padrões no padrão

de cores que a gente tá usando nesse projeto em si Beleza agora pessoal que que a gente vai fazer a gente vai querer aquele efeitinho de que o texto está sendo digitado aqui dentro tá vendo aqui o tempo tá parado mas a gente quer que quando clique nesse botão falar é apareça na nossa Assistente como se ela tivesse digitando ou falando de um jeito digitado aqui esse nosso conteúdo certo então a gente pode fazer o seguinte aqui na nossa index.hu ml onde a gente tem aqui esse parágrafo a gente pode colocar um ai dele e

eu vou colocar aqui de resposta o nome desse colocar um identificador chamado resposta nesse nosso parado tranquilo a gente vai usar aqui ó uma biblioteca do Java Script eu vou entrar aqui no no Google que chama iPad JS você digita assim ó tá aí pede com y JS vai entrar nesse primeiro link do Big Ramy que é desse rapaz aqui chamado net bold ter né que ele criou aqui esse typeahead.js tá JS uma biblioteca que faz aqui a questão de digitação seu clicar aqui no Live demo você vai ver o que que ele faz lá

tá vendo esse peitinho aqui como se fosse digitado e ele é bem simples de usar se eu só passo aqui o que que você quer que ele digite e ele vai digitar para você você pode especificar é tempo como que ele vai funcionar intervalo de tempo é bem legal é esse essa bibliotequinha aqui então quê que a gente vai fazer aquele tem o link da CDN que você pode tô copiando mas eu vou estar baixando isso aqui no nosso projeto Então vou copiar aqui ó o endereço de URL da CBN vou dar um control c

aqui vou abrir uma nova aba e vou dar um Control é só para abrir esse arquivo aqui no meu navegador uma vez aberta Então esse arquivo aqui no meu navegador eu vou dar um contra o s que para salvar esse arquivo e vou salvar aqui dentro do nosso projeto dentro da pasta JS Lib e aqui só para tirar esse arroba aqui ó que ele tem depois o arroba tá vendo que tem aqui a versão Vou tirar isso aqui só vou deixar assim Ah tá e pede JS e vou dar um salvar aqui dentro da nossa

pasta Lib beleza salvei agora aqui na nossa index a gente vai referenciar aqui antes do nosso holter. JS então vou fazer da seguinte forma vamos copiar essa linha aqui eu vou colocar aqui é assim vamos fazer um comentário typed.js E aí ó e aqui a gente só vai apontar então para Nossa pasta Lib e dentro da pasta Lib a gente vai pegar o type.js aqui referenciamos então a sua bibliotequinha do Thai perder JS aqui no nosso projeto OK agora vamos fazer o seguinte vamos rodar aqui o nosso typeahead.js ele tem um exemplo aqui deixa eu

ver se qualquer exemplo que é o melhor esses empreende como que a gente pode tá usando Thai perdi no próprio Beach Run a gente tem aqui você vai fazer a chamada the new Taipei City vai passar Qual que é o elemento que a gente quer que faça o efeito E aí o texto que a gente quer que aconteça né então a gente pode fazer assim ó é só para gente fazer um teste aqui embaixo a gente pode copiar esse daqui você [Música] e aqui embaixo de tudo isso é que a gente pode criar um script

java script colocar aqui e aqui no elemento a gente só vai contar que qual que é o nosso parágrafo da resposta que é esse resposta aqui eu vou fazer joguinho da velha resposta quero pegar pela ide e vamos ver lá como é que ficou no projeto Oi ó viu que ele escreveu ali é só atualizar aqui de novo tá pagando conteúdo e escrever um outro conteúdo então se eu tirar aqui e esse nosso texto que a gente colocou de Lara Y Vamos ver que que ele faz ela escreveu duas coisas viu Legal então aqui a

gente pode fazer alguns algumas estilizações aqui né eu vou colocar assim ó Ah e só um teste isso é um teste de texto e são teste de texto de escreveu duas coisas ali então quanto mais você colocar dentro desse areia aqui é os textos que ele vai tá falando Então nesse caso aqui o segundo vai ser vazio né porque a gente vai querer que ele fale depois eles vazem e a gente vai querer que a tenha um intervalo de tempo aqui na documentação se a gente olhar aqui na documentação para você colocar o intervalo de

tempo você precisa colocar esse sinal aqui ó que é tipo um acento circunflexo e o tempo que você quer mil Então né Eu por exemplo assim colocar aqui um acento circunflexo Meu deixa eu ver se tem que ter espaço e eu acho que ele vai ficar tipo mais devagar ele espera um segundo E aí ele apaga beleza e a gente vai querer também que esse cursor aqui seja desativado para desativar o cursor é deixa eu ver aqui nessa documentação não mostra e chover aqui em cima Aqui também tem o tempo a typespeed é o tempo

que ele digita tá vendo que ele tá digitando muito rápido assim eu dar uma atualizada aqui ó a digitação tá muito rápida a gente pode fazer mais devagarzinho Então vou colocar aqui ó esse parâmetro que o time Speed ou 40 eu vou ver como é que fica se de ficar aí vai ficar mais devagarzinho tá vendo aí que ele tinha dele beleza e a gente eu vou querer tirar esse curso hora aqui então para tirar esse curso ele deixa eu ver aqui na documentação a gente tem aqui ó viu fodox que é para ver a

documentação e aqui vai ter a lista de parâmetros que a gente pode usar né a gente pode procurar aqui e chover aqui showcursor aí ó esse aqui que eu vou querer desativar então que eu não quero mostrar o cursor então showcursor Aqui tá dizendo que é boleano quer dizer se ele é molhando ou É tu ou é falso né quer dizer é verdadeiro ou falso o senhor colocar o acho showcursor como falso ele já vai desativar estou fazer um teste aqui o show cursor fals e vamos ver se funciona aqui olá aí funcionou ele tirou

o curso e ele apaga Olha que show de bola Vamos ver de novo cliquei e só um teste de texto e já desapareceu o texto que legal né pessoal bem show de bola mesmo inclusive aqui na documentação Pelo que eu vi aqui ó tem um evento que a gente pode usar que se chama oncomplete ó é bom compre tá vendo bom então eventinho o que acontece quando tiver completado a vamos dizer a fala como se fosse um callback né então Imagino que a gente possa fazer assim da seguinte forma esse smartflex pense que eu vou

tirar não precisa ele já vem default encontro né aqui bom complete a chover quando tiver completado eu vou fazer o seguinte vou tentar fazer aqui uma função Fusion self o que quer para acontecer quando tiver completado aqui a fala né É tem um recurso aqui do Framework Seven que se chama deixa eu colocar minha cara que tu lado que se chama Tati que é um recurso bem legalzinho de mensagem na tela para informar quando alguma coisa aconteceu vou procurar que o Tati aqui ó só para vocês verem Tati faz isso daqui ó tá vendo G1

E olha que legal o antigo um callback Zinho né então eu posso usar aqui um post é um botton fica legal aqui ó que aparece aqui embaixo só pra gente dizer que encerrou o evento né no caso a fala que ela teria falado Não deixa eu procurar aqui onde é que tá na documentação é post botton que esse primeiro que a gente quer usar a gente precisa aqui tenta usando o wi-fi verdade só isso aqui que a gente precisa copiar primeiro esse conteúdo aqui do touch botton que vai criar o componente Vamos colocar aqui dentro

de um convite ou componente então Tati boto aqui a gente vai usar em vez de F7 a gente vai usar ep esse ep tá vindo da onde a gente está vindo aqui da nossa do nosso hooker. JS a gente tem aqui uma variável chamada ep que aonde inicializa todos os componentes do freio morto serve Então a gente vai chamar aqui esse Apple é esse ep Vamos criar um Tati e aqui a gente vai colocar no texto assim ó e fala concluída com sucesso só para a gente ter um callback Zinho aqui de que ele concluiu

a fala no processo do Thai perder depois disso aqui quando a gente for fazer a lógica a gente vai organizar todo tudo daqui é só para gente ir fazendo as telas e deixar tudo prontinho tá EA que a gente precisa inicializar esse componente usando o Taty bota o pen que é o nome é que a da variável que a gente criou aqui né eu vou pedir para ele abrir beleza vamos ver se vai funcionar e olha lá que massinha pessoal que legal vou só para você ver de novo aqui ó como é que ficou olha

que massa vou clicar aqui para atualizar Então isso é um teste de texto quando ele encerrou olá fala concluída com sucesso ele fez um toque aqui para nós mostrando o resultado isso é um teste de texto e fala concluída com sucesso show de bola né pessoal muito legal mesmo então ela é isso aí que a gente queria né já tá meio preparado aqui o texto que a gente queria que ele mostrar as fala concluída com sucesso Vamos agora para próxima tela que a gente vai querer que a tela onde ela vai vai ter as memórias

dela né onde a gente vai poder acessar memórias Então como que a gente vai fazer uma próxima página e ele poder Navegar para uma uma próxima pajem então vou fazer o seguinte eu vou copiar essa minha página index control c control V vou renomear ela aqui clicar com o botão direito renomear ou F2 aqui né vou chamar de memórias memórias. HTML nessa página que memórias. HTML que que a gente vai fazer aqui primeiro aqui na no nome da página onde a gente tem o da também a gente vai mudar Oi amor está e aqui só

para a gente saber no nosso navbar eu também vou trocar para memória só para a gente saber que essa outra página e aqui o restante eu vou apagar aqui o conteúdo da página page-content aqui ó eu vou apagar o conteúdo dessa page-content da página memórias Vamos acessar a página memórias agora nessa etapa Inicial onde a gente está querendo só o front-end na nossa aplicação clicando aqui na imagem clicando aqui na nossa assistente Tá então vamos fazer isso então aqui na minha index.hr ml eu vou achar ali onde ele tem a minha imagem e aqui na

minha imagem eu vou fazer assim o link vou fazer filmar HF Oi e eu vou querer que ele me mande para a página memórias ó deixa eu colocar aqui então essa imagem dentro desse link Oi e aí a gente vai fazer o seguinte a gente vai querer que aponte a gente para página memórias para fazer isso a gente vai entrar aqui no holter que é os nossos roteamentos de página do nosso aplicação nós vamos criar uma nova rota aqui a gente vai copiar esse objeto aqui a gente tem uma rede de rotas e a gente

vai copiar o objeto aqui que é as rotas vou colocar mais um aqui e aqui eu vou batizar o pet o nome da minha volta de memórias e aqui eu vou apontar Qual é o arquivo responsável por essa rota aqui no caso vai ser memórias. HTML que a página que a gente criou certo então que eu acabei de criar dentro do meu projeto uma nova rota agora lá no meu link na index.hu ml eu posso pedir para ele acessar aqui usando as barras memórias então Usei uma barra antes de uma barra depois porque aqui na

minha no meu roteamento ó eu usei esse padrão de Pet aqui ó coloquei chamando batizei de memórias aqui como Pet essa URL memórias que eu quero acessar beleza um ok aqui eu também preciso colocar uma classe chamada link só para dizer para o Primor que servem que isso aqui é um link para ele poder fazer ali a função de roteamento aí olha só que que vai fazer vou clicar aqui na minha assistente eu cliquei ele me jogou para minha página de memórias Olha lá que legal show de bola né pessoal só atualizar ele volta para

minha página inicial ele sempre inicializa na página aqui da nossa assistente Clique em cima da assistente me jogou para a página de memórias Vamos então agora organizar que essa página de memórias então para isso vou fazer o seguinte primeiro essa parte de cima que eu navbar eu vou querer que tenha opção de voltar aqui para página anterior né então vou lá na documentação do foi morto Seven vou procurar aqui nessa lestinho você procura aqui por navbar aqui navbar e eu vou querer pegar um navbar padrão acho aqui que é o que tem algo a esquerda

Oi e a direita tá vou copiar esse primeirinho que tem aqui mesmo na documentação vou vir aqui no meu projeto lá na minha página memórias E aqui onde eu tenho meu nome não navbar o segundo ele está esse e vou colocar esse navbar aqui por padrão se eu entrar lá beleza ele fica assim dessa forma para ele ficar escura vou ter que colocar o BG black que aquela Nossa classe que a gente criou ó e vou ter que colocar aqui que as cores do texto né são Deixa eu só ver aqui como é que a

gente fez aqui no nosso o BG Black aqui a gente vai ter que usar o texto esteve primário né aqui dentro dos itens aqui left right top rate E aí já ficou azulzinho no padrão que a gente vai querer tá trabalhando beleza esquerda o centro e à direita para ele não ficar tão grudadinho nas bordas eu posso usar aqui no meu lef1 pedem leque uma classe do Framework servem só para ele afastar um pouquinho e ficar um pouco afastado aqui tá vendo dessa forma aqui eu faço um pouquinho aqui também no predinho útil eu vou

usar aqui um pede Light No Light ele afastar um pouquinho da direita tem que clicar aqui só para ele afastar um pouco aqui beleza e aqui a gente vai fazer o seguinte onde está escrito leve que a gente vai trocar aqui por um ícone de flecha então vou fazer assim um e-class e colocar o material design icons mdm de Arrow um traço left him o olá para ficar uma flecha de voltar aqui e vamos colocar aqui no meio escrito assim memórias então eu vou fazer assim vou colocar um ícone também de cérebro aqui ó mdm

de brene e só que eu já sei de cabeça essa pessoa mais se você não sabe o que que você faz se entrar lá no site do material design icons vem aqui na lista e digita não é cérebro em inglês é bem olá ele já vai mostrar aqui modelos de ícones que você pode usar a da Flecha Arrow e digita aqui ó ele já vai mostrar para você os padrões de flash você pode tá usando beleza é que eu já sei de cabeça aqui porque a gente vai tá usando é outra coisa que cada vez

que a gente faz uma alteração aqui né no nosso projeto que que acontece ele joga ele começa na página inicial a gente tem que clicar para ele então entrar na nossa página de memórias né para agente facilitar que ele já vai direto para nossa página de e o que que a gente pode fazer gente pode vir aqui na nossa rota a gente pode colocar aqui ó na nossa página inicial que na verdade aqui é indexa que tá usando about que alto padrão né que a nossa index.hu ml a gente pode colocar aqui um parâmetro do

próprio Framework servem com o evento quando a página inicial liso isso achar que é o Roots que vem na documentação do fêmur que servem Roots e aqui a gente tem um eventinho que é um aqui ó tá vendo ele tem até um exemplo ou dois pontos e se abre um objeto aí tem um evento chamado peemite que é o que que acontece quando há a página inicializa a gente pode fazer da seguinte forma aqui ó um dois pontos abre o objeto que a gente vai fazer peixe e neith: chover aqui como é que na documentação

pedir neste função aqui vou copiar para evitar fadiga o que que é para acontecer quando a página inicializar ó e aqui a gente vai poder dizer que a gente quer que ele joga gente lá para nossa página de memórias né então quê que a gente pode fazer aqui a gente vai pedir para ele jogar a gente da seguinte forma a gente pode dar um comando para ele mandar a gente para uma página específica que a gente vai fazer CIEP. Vios ponto nem ponto vou ter. Navigate E aí aqui dentro a gente vai passar Qual que

é a rota que a gente tá que enviei no caso a gente vai mandar para nossa Rota e memórias certo isso aqui tá na documentação lá do foi morto Seven tá então quê que eu tô dizendo aqui para o meu amor disser vem aqui eu quero que quando a página index que a minha página me segue e Inicial inicialize quando eu tiver esse evento de inicialização que ele me joga para a página de memórias tá para que a gente não precisa ficar cada vez clicando aqui na nossa imagem da Nossa Assistente vou dar um salvar

aqui e não funcionou acho que a gente tem que colocar um padrão de tempo aqui um set time-out só para a gente ir poder colocar a um tempinho porque se lê Colocar assim direto não vai aos set time-out e chover aqui o padrão que ele tem aqui ó esse set time-out que é um cronômetro né vamos dizer assim padrão de que é para acontecer em determinada quantidade de tempo que eu vou colocar em 500 ml segundos eu vou pedir para ele me jogar lá para a página de memórias deixa eu ver se ele vai funcionar

aqui não funcionou tá Beleza não tem problema deixa eu tirar esse aqui vamos por enquanto deixar quieto esse daqui não tem problema a gente clica aqui na nossa assistente aí ela já vai para lá não tem problema mostrando para vocês aí como é que é realidade do desenvolvimento da pessoal então aqui em memórias nós vamos colocar aqui então depois do ícone e ali do cérebro Vamos colocar sim memórias e ele vai ficar aqui e à direita a gente vai colocar aqui um ícone e-class mdm dei data-base que vai ser um ícone de banco de dados

porque a gente vai clicar nesse ícone para afagar é que a memória da nossa assistente quando clicar nesse ícone Zinho aqui beleza OK agora que a gente criou aqui o nosso navbar aqui embaixo essa parte aqui é do Fábio Button a gente vai colocar assim adicionar EA tradicional na memória aqui a gente vai colocar um plus que é o ícone demais né Vamos adicionar para clicar aqui para adicionar uma memória aqui nós vamos colocar um sushi bar que é uma barra de busca a gente pode vir aqui na frente porque servem procurar aqui um search

bar uma Shark Sushi Bar the search bar e aqui a gente vai ter os exemplis e tal né pode pegar esse normal aqui que é o primeiro search bar mesmo normal que ao control seco copiar ela que vamos vir aqui no nosso projeto então aqui onde a gente tem a debaixo do nosso lado e barc na página de memórias e vamos colocar aqui o surge ser sushi bar que a barra de busca o colar aqui o nosso Sushi Bar vamos ver como é que tá ficando ó ficar assim o nosso Sushi Bar vamos estilizar ele

aqui né então a gente pode usar aqui no nosso input aqui a gente vai colocar no placeholder procurar a procurar e aqui a gente pode colocar a classe BG Black não funcionou a classe beige Black Eu acho que a gente vai ter que fazer especificamente uma classe preço input vou chamar aqui de input busca vou colocar essa classe aqui olha Cut busca e aqui na nossa index pontos SS vamos fazer aqui um input traço busca para lá aqui no nosso encontro e busca a gente vai fazer assim background Vamos colocar aqui como centro Black isso

aqui vamos fazer que é importante a beleza e já ficou escuro vamos fazer que a cor dele cola vai ser o primário aqui né o tomate os ele fica Vamos colocar tão importante também a TIM aí ó onde digitar fica assim dessa forma beleza é a gente pode colocar que o placeholder dele também vai ser dessa cor então a gente faz assim né input busca Oi gente coloca assim: placeholder e na verdade é: assim placeholder e que a gente vai colocar que a cor vai ser azul background não precisa tão lá procurar quando digitar aqui

beleza fica dessa forma aqui é Ficou bem legal bem bonitinho a gente pode colocar uma linha aqui embaixo Aqui desce na Vivara a gente pode criar aqui uma classe o que eu vou chamar assim de border-bottom primary é uma borda embaixo primária que eu vou fazer border-bottom 1px Solid a cor vai ser a cor primária aqui no ar primário Oh e vamos aplicar no nosso navbar aqui e essa nossa borda aqui ó border-bottom imagem e É isso aí colocou uma linhazinha ali ó vai ficar bem legal essa divisória azinha para nós Ok beleza colocamos o

nosso search bar aqui o que a gente vai fazer agora é a gente poder voltar para página anterior né eu esqueci de fazer inclusive aqui nesse nosso link aqui né É nesse nosso na sua flecha de voltar então e que eu vou fazer eu vou trocar aqui em vez de usar uma div eu vou usar aquela com você no link vou colocar o HF dela apontando para joguinho da velha lugar nenhum e olha só que fácil de trabalhar aqui com o freio motor veb né uma vez que eu tornei isso aqui um link eu posso

colocar uma classe que se chama Beck que é de voltar nesse link E aí ele já vai voltar para volta anterior quando eu clico aqui quando eu clicar aqui no link olha só que que vai acontecer eu apliquei aqui ele voltou para rota anterior que legal o show de bola né que só ficou bem legal ó é só que aqui o voltar ele ficou ele ficou assim com a cor de link né show colocar aqui e o TXT primário também no a fazer assim ah ah o ponto TXT primary e a gente vai colocar que

a cor vai ser essa daqui também que importa né para ele também ficar com a por padrão ele tava com azul mais escurinha aqui agora ele vai ficar com azul certinho beleza tá ficando bem bonito né o nosso projetinho aqui tá ficando bem legal mesmo que que prepara memórias voltei ó navegação entre páginas e ver como fica um deslocamento suave entre uma página em outra bem legal mesmo agora vamos colocar aqui o conteúdo e abrir também as opções aqui de adicionar né o título a resposta e também a eles são aqui da lista Beleza então

vamos fazer assim na aqui memórias E aí gente tem o nosso page-content vamos fazer aqui uma div com a classe o Blocks aqui a gente pode usar uma outra classe que se chama boa Block Tito deixa eu ver aqui na documentação do foi morto Seven O que é Block content Block e aqui a gente tem aqui Um item que se chama Blokton esse aqui ó que é um bloco de título né só para mostrar para você aqui ó é tipo assim um título Zinho que fica mais centralizada aqui mas com certo Pede cada lado né

então vou colocar aqui Blokton aqui eu vou colocar assim apreendidas as duas por exemplo que vai ser aquele onde vai mostrar a quantidade de memórias apreendidas aqui é essa que você que vai ter que usar o TXT primária acho que aqui direto não sei se vai funcionar só no peixe contente apreendidas beleza só não vou colocar isso alinhado ao center centro vou tirar um text-align-center beleza apreendidas e vamos colocar agora uma lista né aqui a lista você vai achar na documentação do Primor servem aqui onde tem assim list viu Tá vendo dentro da Lich viu

aqui nós vamos usar vai ser um modelo específico Aqui tem vários exemplos que você pode ver na documentação na a gente vai usar essa daqui o que vai ser a meio é seria essa daqui que é para simular como se fosse assim uma lista de cards vizinhos de e-mail né basicamente para e-mail aqui é para Android como é que fica é basicamente assim essa que meio é então a gente pode vir aqui nos exemplos pegar aqui o trecho do código Onde está aquela parte do meio wep aqui né a gente pode procurar aqui dia que

tá aqui o meio tá vendo Então essa essa devia aqui cuja classe é lixo mídia list eu vou copiar aqui ó e vou copiar essa devia é só 1 l e eu vou copiar 1l que é um desses itens da lista certo vou copiar até aqui onde fecha o ele porque daí depois eu fecho o l fecha Diva E aí eu já tenho a lista já montada de Um item só então aqui eu posso colocar aqui embaixo do apreendidas control V Olá aqui eu só vou fechar então ao L que ficou faltando eadvila que ficou

faltando contra O S E aí eu já tenho um item de lista colocado aqui e os outros itens vai ser réplicas desse primeiro que a gente já vai estar alterando agora então tá assim por enquanto aqui a nossa lista né então vamos fazer amor de o nosso Intex pontos SS a gente vai fazer o seguinte o nosso ele nós vamos fazer que o background dele vai ser é levar Black beleza as cores ficaram azuis Alina e chover aqui o item Extra que não apareceu deixa eu ver se eu colocar o texto esteve primária que se

ele já vai aparecer e não apareceu né a pouquinho a gente já muda esse daqui então aqui a gente vai colocar assim é vamos colocar chiclass mdm de pense o que é um lapisinho fechar que o ícone aqui texto escrito de o título bom então aqui teste teste no texto né texto escrito de título aqui a gente pode inclusive deixar esse aqui em que esse aqui vai ser o título da fala que a gente vai ensinar ela né então vou colocar aqui uma fonte ó eu vou criar uma classe chamada fw Gold que é para

deixar e eu vou colocar aqui com o fonte O leite vai ser bold que vai ser um e aqui é a gente pode colocar essa classe aqui nesse ai tão título a gente vai colocar fw faça o molde que é para ficar é só não ficou deixa eu colocar que isso aqui vai ser importante aí agora ficou certinho em baixo é o que a gente gravou a fala né então a gente vai fazer assim a esse item-text aqui nem tá parecendo a gente pode arrancar lhe fora o item subtítulo a gente vai colocar aqui a

Express MDL de microfone com ph ó e aqui é o que falamos para assistente bom então em cima é o título escrito né gente vai escrever literalmente o qual que é a frase que a gente quer e em baixa como que é assistente entendeu na verdade aqui embaixo é como assistente entendeu né e como a assistente entendeu-se que na verdade nem precisaria colocar é mais para gente ter uma referência mesmo né do que que ela entendeu e aqui a gente vai colocar nessa parte aqui onde a gente tem e é esse horário Zinho a gente

vai usar um componente do tremor que servem que é o bad o bad é como se fosse assim uns isso daqui ó esses ícone Zinho saque o que aparece dessa forma eu vou pegar o primeiro aqui pegar um que ele tem de exemplo kebede que você e Queta com coruja color só passar o propriedade de cola não sei se vai ficar bom Aqui onde tem esse horário eu vou colocar aqui nenhum em ter tá pessoal não deletei Advil só tenho é ter só para ficar mais organizado aqui o nosso ódio deixa eu ver aqui como

é que tá ficando e olha já apareceu o nosso pezinho lá aqui a gente pode colocar color Blue a cor azul até ficar legal esse tom para ser um pouquinho diferente aqui a gente pode colocar um pede left e um pede White só para a gente colocar um pouquinho mais de preenchimento na esquerda na direita assim ó e aí a gente vai passar aqui qual que vai ser o Eyed então aqui aí de dois pontos um tô conforme a gente vai fazendo depois dinamicamente as memórias e que vai mostrar qual que é o auge da

memória Então esse aqui é o aí um certo E aí beleza tá feita a nossa lista que a gente para replicar Mais Um item na lista é cada LD Esse é um item da lista então se eu copiar que esse ali e colar aqui dentro do Hélio né ó eu vou estar adicionando Mais Um item na lista então eu vou colocar agora aqui de dois nesse aqui pois só que tudo vai ser dinâmico né pessoal aí de 2 e aqui eu vou colocar assim há no texto escrito outra coisa Qualquer digitar e outra coisa Qualquer

digitada beleza e aqui no que a entendeu também vou colocar isso aí outra coisa Qualquer digitar a beleza olha só que bonito que tá ficando nosso projeto né pessoal tá ficando muito legal mesmo agora que a gente vai querer é que esse nosso search bar ele realmente funciona quer dizer conforme que a gente digita aqui ele faça a filtragem das memórias que vão aparecer aqui embaixo na lista como que a gente faz isso ouvindo aqui na nossa documentação no foi morto seven a gente pode procurar aqui o sushi bar ó e aqui dentro da documentação

do search bar Se você descer lá embaixo vai ter um exemplo de inicialização desse componente aqui ó trade search bar tá vendo a gente vai copiar esse daqui essa parte aqui de inicialização do search bar tem que cuidar para não pegar até aqui essa parte de baixo que diz respeito a esse peixe nit aqui que ele está inicializando que a gente vai usar uma outra coisa aqui no nosso projeto vou copiar e olha só que que eu vou fazer show restaurar minha aqui na nossas rotas a gente tem que o evento de peixe nit Oi

Ane Shopping error on eu comprei genital só conferir isso é assim mesmo e você vai colocar aqui dentro do peixe nite.do memórias aqui tá vendo Então a gente vai fazer o seguinte deixa eu colar isso aqui por enquanto aqui se search bar eu vou pegar esse um beijo e Neide que a gente já fez no outro vou colocar logo depois aqui da nossa URL e aqui dentro do peixe nit quer dizer quando inicializou a página memórias é que a gente vai inicializar que esse nosso search bar tão deixou cortar aqui e dentro aqui do peixe

nit a gente vai fazer a inicialização Desse nosso search bar Ah beleza então aqui a gente vai ter que colocar Qual que é o elemento que é o search bar Então a gente tem aqui dentro de memórias se você for olhar o nosso campinho input lá do search bar a mancha aqui onde é que ele tá e a gente tem essa classe no formulário Sushi Bar então aqui a gente está apontando que é esse é o elemento de busca que eu só vou trocar para ep não F7 tá é preciso chamar cliente e aqui é

qual que é o container que vai ser buscado no nosso caso é uma lista mesmo list que ele tá aqui no nosso page content list e aqui qual que é o elemento que vai ser o determinante para se entrar nesse caso ele vai procurar no item chamado e tentar Tom que é aqui é o título de cada um dos itens da nossa lista que a gente tem um item Tito aqui então vai ser isso que ele vai filtrar beleza então a gente inicializou aqui na nossa rota nosso search bar agora é só que que acontece

quando a gente entra aqui ele vai fazer a filtragem pelo que tá aqui em cima então se eu por exemplo digitar aqui ó vou digitar escrito qualquer que não tem nessa frase de cima qualquer e ele já filtrou aqui por qualquer se eu trocar o apagar e Colocar assim é texto né que só tem nesse de cima texto ele já me fez a filtragem então qualquer palavra que tiver aqui nesse título de cima agora o meu search bar vai fazer a filtragem dentro da minha lista pelo A então Tito Qual que é o item que

ele tem que mostrar aqui para mim beleza agora vamos para a última parte aqui da criação da nossa parte visual do nosso front-end que quando a gente clicar aqui nesse botão adicionar ele abriu uma telinha extra para nós que no foi morto segue se chama polpa para a gente poder é colocar as entradas dos dados que a gente vai receber aqui na nossa parte de memórias certo então o que que a gente vai fazer Entra lá no Playboy que servem a gente vai procurar aqui na documentação por pop aqui embaixo Opa beleza e aqui em

pó papo e a gente vai pegar esse componente já prontinha para nós só para mostrar para O Tempo Pato ele abre assim ó tá vendo ó como se fosse uma tela adicional dentro da nossa própria página Então dentro da própria página Você tem uma outra página por assim dizer e né tá bem bem tranquilo em de usar esse daqui como que funciona aquele tem os exemplo só você vai pegar aqui deixa eu ver na documentação aqui ele tem um mais completinho é o exemplo mais completa aqui ó quer com rolagem tudo mais que esse povo

papelzinho aqui de exemplo com a control papo multilinks aqui né eu vou copiar esse exemplo aqui control c ouvir aqui no nosso projeto na página memórias e esse poupapp a gente também coloca ele pessoal fora que da nossa divido page-content tá o papo tem que ficar fora do peixe contente porque ele é uma página é esse que vai haver então aqui fora do peixe contente eu vou criar aqui um fofa Fi respostas e o melhor o pacto perguntas que é onde a gente vai adicionar as perguntas que vão ficar nosso projeto e vou colar aqui

esse exemplo que eles vêm com os... Esses... Você pode tirar Ah e só para gente batizar aqui com o nome Ó ele tem que ir para o papo está escrito mar e por papo tá vendo a gente vai trocar para poupapp pergunta então eu vou tirar se for papo e vou colocar para o pap pergunta certo e pergunte para a gente invocar esse papo ele se aberto aqui na documentação tem um exemplo você tem que usar que o data por papo apontando a classe e aqui a gente tem que ter uma classe também chamado por

PAC Open né então vou pegar esse data para o pap aqui control c vou virar onde eu vou vir aqui onde a gente tem o nosso botão Fabi aqui embaixo do adicionaram então aqui em memórias vou achar aqui o meio ocupado e botão aqui onde a gente tem esse nosso link do Fábio Button eu vou colocar aqui o data por quatro apontando para o parque pergunta tu vai para o parto pergunta e aqui na classe eu tenho que colocar aqui a propriedade que o a classe for prep um traço open Oi e aí olha só

que que vai acontecer quando eu clicar aqui no adicionar o abrir o polpa beleza um rock legal tô ele abre uma tela adicional esse tipo de tela de polpa pessoal quando tem dispositivo de tamanho maior como causa da tela inteira do computador ó ele fica só centralizada aqui ó por isso que se chama polpa que realmente uma janelinha que abre só no meio aqui do projeto mas no caso de dispositivos móveis que é o caso que a gente está fazendo para celular né ela vai tomar toda a extensão da tela como se fosse uma página

a mais tá só para você entender o funcionamento deste componente visual aqui então aqui dentro do nosso por pato e nós vamos fazer o seguinte nós temos aqui dentro desse pô para o nosso navbar o nosso navbar a gente pode colocar aqui o que ele vai ter né o e é beijo Black Então já ficou escuro aqui o Tyson dele a gente pode colocar o teste primário Oi ó dessa forma aqui o Close lá que ao fechar a gente pode usar aqui um ícone de fechar picolés a gente pode colocar assim MBI MBI Close que

eu acho que áudio fechar Close circo quer em circo é o ícone Zinho eu ver aqui como é que tá ficando adicionar o lá para a gente poder fechar o nosso popa show de bola né é que não tá escrito por papo e a gente vai colocar assim Nova pergunta a nova pergunta e aqui a gente vai colocar aqui o conteúdo das entradas aqui do das perguntas que a gente vai falar né na verdade a gente vai ter um botãozinho aqui para gente gravar a pergunta e aí ele vai ficar aqui o título e qualquer

a pergunta gravada só para a gente ter a visualização dela aqui certo então é aqui no page-content nós vamos colocar aqui também um beijo Black E aí vai ficar tudo escuro nosso papo e vamos colocar aqui dois campinhos input né para isso a gente vai lá na documentação do fêmur que serve aqui na nossa listinha a gente pode procurar aqui ó input form input e a gente vai querer pegar um campo input aqui ó sendo na documentação O que é isso aqui ó o layout stacked levels tá vendo que fica tipo como se fosse um

lá belzinho na parte de cima e embaixo o campo input que a gente vai querer tar digitando as informações então a gente pode procurar aqui na lista por fully outfitted levels pode procurar aqui aqui ó full layout Stephanie levels então aqui eu vou copiar a minha lista ou l e 1l depois eu vou fechar sua Suelen essa lista essa dívida né Para a gente poder ter só um e trenzinho 10 porque aquele vem com um monte de itens na lista a gente não precisa copiar tudo isso daqui né então eu vou vir aqui onde a

gente tem o nosso peixe contente do nosso o pato bom então não confunda com o peixe contente da página memória a gente tá usando o peixe contente aqui da do nosso papo vou colar aqui só vou fechar aqui então a u l que fechar 6 div aqui da lista beleza salvei já ficou organizado a gente voltar lá vamos ver como é que ficou aqui por enquanto não tá aparecendo porque a gente vai ter que fazer aqui as alterações no nosso CSS né pessoal é aqui também tem o item mídia e xô tirar esse aqui que

é que eu acho que não vai precisar deixa eu colocar aqui então só a propriedade TXT primário a gente ver se já fica azulzinho aqui ó a gente vê se a gente já enxerga não foi eu acho que talvez a gente tem que colocar esse texto esteve primário aqui ó com você não importa ele não tá com uma importante para a gente aí definir que ele tem que aparecer aqui azulzinho certo então beleza deixa de se afirmar e ficou aqui Oi como é que vai ser o título da pergunta aqui a gente pode colocar aqui

também vai ser um fw Gold para deixar título da pergunta que ele está dando esse espaçamento Zinho aqui pessoal aqui eu tenho um campo input só que ele não tá aparecendo mas ele tá ali tem esse espaçamento sozinho aqui e esse espaçamento Zinho aqui por causa desse item mídia que Tecnicamente era para colocar aqui na documentação aos um ícone alguma coisa assim só que a gente não vai estar usando isso então vou tirar essa dívida que tem mídia ET não precisa E aí o e beleza vamos ver como é que tá ficando aqui é adicionar

título da pergunta beleza que a gente vai fazer o seguinte a gente pode colocar aqui esse nosso campo input ele pode ter as mesmas propriedades daquele nosso campo input lá do input busca que a gente quer que seja tudo azul né a gente pode usar aqui e esse campo input O que é classe A o input busca na verdade em Cut busca não vai ficar legal como o nome de classe né pessoal que não vai ficar muito legal esse nome então vou trocar aqui em vez de input busca e como pode chamar de input a

custódia customizado certo vamos usar esse nome aqui porque daí fica um nome Mais padronizado você não vai aparecer aqui é de busca e aqui no caso não é uma busca né vou usar que incute custon bom então vamos ver como é que tá ficando aqui a pouco para tem que trocar aqui agora em políticos estão aqui no nosso ser também né show acha aqui aqui ela incute busca tem que ser input custon a beleza adicionar Oi e aí seu nome aqui no caso não é seu nome é que é para digitar alguma coisa né mas

é Cadê pergunta no placeholder Digite o título da pergunta e adicionar Digite o título da pergunta e aqui Inclusive a gente pode colocar uma bordinha daquela que a gente já até fez aqui eu acho que uma propriedade border-bottom primary como colocar também nesse Campo input que eu acho que vai ficar bem jóia a lei como é que vai ficar Oi Ana deixa eu ver se esse que tá o corpo como sendo importante aí ó vai ficar uma linha Zinho assim ó fica bem bem legal aqui o nosso campinho parte dessa forma Digite o título da

pergunta e vamos fazer mais um campinho aqui a gente pode fazer mais um ele vai ser mais um tempinho aqui vai ser a o que a assistente entendeu o que é assistente entendeu aqui no placeholder gente não precisa colocar nada na verdade eu acho que não é legal colocar placeholder aqui nenhum desses dois tá pessoal que então eu vou tirar placeholder desse de cima para deixar ele vazio Zinho acho que não fica muito legal não ó título da pergunta o que é assistente Entendeu Beleza é dessa forma que fica legal assim título da pergunta que

assistente entendeu E aqui vamos colocar os nossos botõezinhos Fabi aqui dentro né então vamos fazer da seguinte forma aqui a gente vai pegar aqui é o nosso Fabi a gente tem da página que ele vai adicionar vou copiar ele de modelo e dentro agora presta atenção do Pato dentro do peixe contente do Papi eu vou colocar esse botão Fabi aqui antes do fechamento da onde tem o peixe contente porque dessa forma a gente está colocando o Fábio Button dentro do conteúdo da página do pop certo então aqui onde tem o fechamento Vou colocar aqui embaixo

um FAB Button o que dentro do pátio adicionar nesse caso aqui eu vou fazer assim vai ser e o ícone do microfone que a gente vai colocar aqui dentro desse Fabi text aqui ó vou colocar aqui no microfone porque vai ser ali onde a gente vai clicar para gravar o áudio da pergunta que a gente vai fazer para assistente certo e aqui a gente pode tirar esse data para o Papa Pergunta a gente pode tirar esse papo Open também que a gente estava usando antes o Olá ficou o ícone Zinho que redondinho da do nosso

botãozinho de onde a gente vai digitar para quando a gente falar ele vai escrever aqui nesse campinho aqui né O que é assistente entendeu E a que a gente vai ter que ter um botão salvar e um botão cancelar Então esse é o Fábio Button Centralizado centralizar como que a gente sabe que ele está Centralizado porque a gente tá usando a extensão até a classe A Fabi Center botão Centralizado em baixo certo então a gente pode fazer uma cópia Desse nosso Fabi aqui o e colocar antes Aqui ó FAB Button esquerda left vamos fazer FAB

Button left aqui a gente só troca que em vez de Center você troca left então quero esquerda e embaixo left Bottom Coloca essa classe se eu entrar aqui ó lá no nosso por papel aí já colocou um outro aqui e aí a gente pode fazer o seguinte aqui a gente vai trocar esse btn-primary Por btn-success que é aquele botão verdinho que a gente já fez aqui em cima no CSS a gente já tinha antecipado aqui criado todos os padrões de Botão a gente fez o btn sucesso você entrar aqui ó ó já ficou lá um

botão verdinho aqui é a única coisa que eu vou fazer o seguinte eu vou colocar o ícone aqui fora do nosso Fabi text aqui que essa nossa Dib vou colocar que o ícone e eu vou usar um ícone aqui de salvar deixa eu ver aqui no material desenhar e como eu vou colocar aqui sem vídeo chover um disquete Zinho desses aqui ó contente save é o nome do ícone B a escola Oi aqui é content classf save ó e aqui no texto Vamos colocar salvar o Olá beleza show de bola salvar aí o botão aqui

no meio para ser onde a gente vai clicar para falar e um botão cancelar então que vai ser um Fábio Button a direita certo FAB Button rite ficou aqui para ver Button White ó e aqui Fabi lite-on e aqui vai ser btn-danger ó e aqui o cancelar deixa eu ver como é que é o ícone de cancelar cancel a cancela cancel mesmo aí só que coincidência hein meu amigo AMD II cancel ó e aqui cancelar Tá certo vamos ver aqui como é que ficou nosso poupapp tão salvar botando para gravar o áudio e o botão

de cancelar aqui nesse cancelar a gente tem que colocar o mesmo efeito aqui desse de fechar o nosso próprio para isso a gente pode subir aqui em cima onde a gente tem a ler aquele que fechou é só colocar essa classe a pouco a Close tá vendo Bem simples vamos colocar aqui então no nosso Fábio botão da direita a classe aqui ó Opa Close E aí olha que que acontece quando clicar aqui no cancelar aqui no canto ele também fecha o papel a beleza bem show de bola esse daqui né e agora vamos fazer a

última tela então que a tela que a gente vai querer quando clique no item que já tá sol ele abre para a gente editar né que basicamente vai ser um pouco papo igual esse outro aqui que a gente tem só que vai ser o papo de resposta né então o que que eu vou fazer aqui ó eu vou achar onde eu tenho meu pacto pergunta Vou recolher ele aqui clicando no ladinho aqui ó eu recolho todo o conteúdo tá vendo ó da árvore dele porque ele é bem compridão certo vou copiar ele assim ou control

c vou vir aqui embaixo e vou dar um control V então Criei um outro por papo e só que esse aqui vai ser o Pou papi editar respostas e esse é o pap respostas que é o que que é para nossa assistente responder na verdade né então quê que é para assistente responder então que eu vou colocar o papo resposta ó e aqui se for pap resposta a gente vai querer que ele seja aberto quando clicar no item da lista aqui né então aqui a gente tinha aqui ó o data poupapp no nosso Fabi boto

aqui da dicionário eu vou colocar um igual esse só que na lista que a gente tem aqui ó vou colocar nesse primeiro item da lista só tá eu vou colocar aqui na tampa o pap ponta no tráfico Up resposta e eu vou colocar aqui a classe o papel Open up Open que é para dizer que é para abrir esse outro o papo e esse papo resposta o hospital ele aqui o título dele vai ser a resposta da assistente com uma ver lá como é que vai ficar clicar nesse primeiro item Abril que a resposta da

assistente E aí a gente só vai substituir aqui escrito aqui é resposta escrita O que é o que vai ser escrito e embaixo vai ser resposta falada a resposta falada vou ver aqui é uma pergunta tal clique aqui resposta da assistente resposta escrita a resposta falada aqui a gente vai substituir esse ícone aqui ó do microfone por um ícone a deixa eu ver aqui onde a gente tem os nossos Fábio saque Centralizado por um ícone chamado aqui em vez de microfone Bull Horn que é aquele Megafone né porque quando a gente clicar nesse ícone a

gente vai querer ver como que é que ela vai falar né vou salvar aqui eu fiquei aqui não entendo ali história e se conectar Megafone né E aqui esse salvar a gente pode trocar a cor dele para em vez de bebê tem sucesso vou usar warning aqui só para a gente saber que está numa página diferente que a página de respostas Assistente onde fica aqui cancelar fechou beleza pessoal é isso daí então vamos ver como é que ficou aqui né vamos ver tudo que a gente fez aqui nesse nosso front-end ficou bem bonito Então a

gente tem a página inicial que é onde tem a nossa assistente a gente fez o teste Zinho para que ele tem esse efeitinho de fala aqui né conforme ela for falando a gente fez também a página aqui de seria depois eu quando a gente clicar aqui no falar né o acessar memórias então quando clicar na acessar memórias ele vai vir para essa página aqui quando a pessoa falar disparar esse evento aqui tem a listinha das coisas que vão ficar salvos a gente já deixou os componentes montados nosso search bar tá funcionando aqui em pó digitado

ele já fez a busca ali aí a gente tem aqui para adicionar ele abre um pouco papo para a gente colocar os itens de entrada que os botões em salvar e tal e também a resposta né que a gente vai querer porque esse aqui é a pergunta que a gente fez e aqui quando a gente Clica com vai ser a resposta que a gente quer que a assistente de é um Pou papi de resposta da nossa assistente Ficou muito legal ficou muito bonita falar bem a verdade eu gostei mais dessa versão azul aí da Beta

do que da minha versão Rosa da Alfa viu achei que ficou muito legal ficou muito bonito mesmo Espero que você tenha gostado dessa aula é só um pouquinho mais longa mas realmente a gente fez do zero absoluto tudo que a gente precisava de componente visual aqui e nas próximas aulas nós continuamos aqui com esse projeto incrível forte abraço e até a próxima valeu