Projeto Assistente: Aula 05 - Conclusão do Projeto

Muito bem pessoal Chegamos aqui a nossa aula final do projeto da assistente a nossa aula de número 5 e nessa aula nós vamos concluir aí o processo de aprendizado vamos dizer assim da nossa assistente nós vamos ver como é que vai ficar o resultado final desse projetinho e também conversar no final sobre algumas ideias coisas que poderiam ser implementadas coisas que a gente poderia estar fazendo para tornar esse projeto Da assistente ainda mais legal e quem sabe você que tá aí do outro lado pegar esse projetinho para melhorar ele fazer mais coisas brincar vai ser

bem divertido a gente aprender programação juntos nessa aula nós vamos aprender aqui eventos de controle do banco de dados que faz parte do cru de websql nós vamos ver como atualizar uma tabela e deletar um registro nós vamos aprender também um conceito bem interessante que é pegar dados de um banco de dados e Salvar essa informação atrelado a um componente HTML Então a gente tem informações vamos dizer dos registros do banco atrelado ao HTML da nossa página dessa forma fica mais fácil da gente poder manipular esses dados de forma livre nós vamos entender um pouco

sobre esse conceito usando o atributo data de um de uma tag HTML vai ser muito legal a gente ver sobre isso daí nessa aula então sempre tem muito aprendizado sempre tem muita coisa legal nessas Aulas aqui mais longas né mais raiz vamos dizer assim programação na mão na massa mas é aí que a gente aprende de verdade juntos é o que ficou faltando então da última aula para nós começarmos aqui sem mais delongas é na parte aqui do nosso banco de dados a gente salvar a resposta escrita e a resposta falada né a gente já

tá salvando aqui a pergunta escrita é a pergunta falada agora a gente precisa salvar a resposta escrita e a resposta falada aqui no nosso Projeto a gente também já tá listando né do nosso banco puxando informações e mostrando aqui numa listinha que já tá dinâmica outra coisa que eu queria consertar com vocês pessoal é aqui ó quando você clica em adicionar né a gente tem ali o botão do cancelar que tá meio encavalado tá meio por cima ali dos outros né E também quando a gente clica no item da lista ele abre aqui o pop-up

da resposta da assistente também aquele cancelar ali também encavalado para a Gente resolver isso é bem simples então a gente já pode fazer isso antes da gente começar efetivamente a parte ali do banco de dados a gente pode ir na nossa memória esse ponto HTML E aqui onde a gente tem né a gente tem o pop-up da resposta e o pop-up aqui ó pop resposta e o pop-up pergunta né então aqui no pop-up Pergunta a gente pode procurar aqui onde a gente tem o Fabi botão que ficar à direita Fabi botão Light né e aqui

a gente pode só tirar Esse ar do final vamos tirar o ar do cancelar E aí a gente já vai ver que já resolve esse problema porque daí cancel mais o ícone que a gente tem aqui dá mais ou menos a mesma quantidade de caracteres do salvar ó cancel tá vendo ó Seria a mesma quantidade de caracteres aqui então vai dar certinho vai ficar na tela bem bem bonitinho Então vamos fazer isso aqui no Fabi Button White do pop-up perguntas e vamos fazer isso também no Pop-up respostas aqui embaixo vamos achar aqui o nosso pop-up

resposta que tem o Fábio botão à direita dele nós vamos tirar também o ar do Cancelar E aí beleza já tá resolvido Essa questão aí do Cancelar Vamos ver como é que isso ficou então aqui eu vou rodar novamente corda valor Android E aí eu vou abrir aqui no celular para vocês verem como é que ficou Beleza eu vou fechar esse meu espectro que tava aberta aqui vou entrar no Google Chrome como eu Já ensinei na Aula passada você vai lá Chrome três pontos//inspect né e a gente na aula passada caso você chegou direto nessa

aula passada a gente viu como a gente faz para debugar direto no aplicativo rodando no celular usando o Google Chrome né então a gente vai inspecionar aqui e aqui ele vai abrir para nós como que a gente vê ali o celular e a gente pode ver aqui no console também aqui o banco de dados websql aqui funcionando para nós então Eu vou dar um acessar memórias acessar memórias aí ele entrou listou os itens do banco lá beleza aí se a gente clicar agora aqui no adicionar você vai ver que o cancela fica bem bonitinho ali

ó fica bem joia né E quando clica no item da lista também cancela lá ó fica bem bonitinho já não fica mais encavalado já resolve aquele probleminha Beleza então tá esse probleminha estético está resolvido e se vocês estão Escutando Minha voz meio fanha meio bizarra porque me deu uma gripe esses dias até fiquei sem gravar conteúdo aí porque tava com uma gripe muito forte e agora tô com esse essa linda voz fanha aí que vocês estão escutando esse vídeo mas vamos fazer então a parte prática aqui da nossa aplicação agora salvando a resposta escrita e

a resposta falada aqui no nosso banco então o que que a gente vai precisar fazer quando clicar num desses itens da lista a gente Precisa que no nosso pop aqui ó ele já abra Qual que é o ID da resposta porque aqui a gente tá pegando Qual é o ID da pergunta certo a resposta ela vai estar na mesma linha do registro no banco aqui ó tá na mesma linha então quando a gente clica no item da lista a gente precisa recuperar informação de qual que é o ID que a gente tá pegando da pergunta

para que a gente puxe já a resposta escrita é a resposta falada e mostra aqui certo se já existe uma Resposta escrita uma resposta falada aqui vai aparecer essa informação e aí a gente pode trocar alterar o que a gente quiser se não tiver nada não tem problema vai aparecer vazio aqui de qualquer jeito quando a gente clica no botão salvar o que ele vai estar fazendo é pegar qual que é o ID do registro da pergunta que a gente fez e salvando a resposta aqui no nosso banco de dados usando o update né que

é o nosso a nossa Carrie com o banco para fazer uma Atualização da nossa tabela Ok então mais ou menos esse o fluxo que a gente vai precisar fazer para a gente poder recuperar essa informação de qual que é o ID aqui ó que a gente tá pegando da lista a gente vai usar um método que é pegar a informação do banco de dados e incorporar essa informação na lista mesmo no HTML embutido dentro do HTML é uma técnica que a gente usa para poder manipular as informações de uma forma mais fácil Olha só como

isso funciona a Gente tem aqui no nosso memórias.js lá o trecho de código que é responsável por fazer a montagem aqui da nossa listinha certo ela está sendo injetada aqui dentro do nosso lista perguntas que é aqui na nossa memória esse ponto HTML né aqui é a parte onde a gente tem a listinha o l onde a gente tá injetando os Lis que são cada linha da nossa lista então aqui a gente pode fazer o seguinte a gente pode colocar aqui ó dentro do Nosso da nossa tag a que é o nosso link que a

nossa tag principal aqui a gente pode colocar um atributo que se chama data então você pode colocar um atributo chamada data traço alguma coisa então data e o nome então você pode colocar o nome da coluna igual do banco por exemplo data e de eu coloco aqui data id e aqui eu vou passar ó de forma dinâmica para mim pegar qual que é o valor do Edir usando aqui o dados ponto Rose ponto item ponto ID certo que tá vindo Do nosso laço de repetição aqui que tá montando a nossa lista Então dessa forma eu

passei Qual que é o ID da minha pergunta no componente HTML você já vai entender isso aqui melhor Vamos colocar aqui também um outro Opa acabei apagando ali sem querer vamos fazer um outro aqui ó que vai ser data a gente pode fazer data P escrita então data escrita vai ser a pergunta escrita certo então eu posso pegar aqui o valor também dos dados da pergunta escrita aqui e pedir Para ele colocar aqui dentro do data P escrita OK aí a gente também pode fazer um outro aqui que é o data P falada dessa forma

a gente vai pegar qualquer os dados da pergunta falada o que que são esses dados aqui pessoal que que são essas informações que a gente tá pegando aqui são os dados que estão aqui na nossa tabela a gente tem as colunas da tabela perscrita foi falada é escrita é falado que é o que a gente tá recuperando escrita falada esse dados é O nosso objeto que contém todos os dados vindos do nosso banco Rose é a linha e aqui a gente tá especificando Qual item qual linha que a gente quer né é a coluna A

gente viu isso na aula passada onde a gente fez a montagem aqui dessa estrutura dinâmica caso você não tenha assistido e veja a aula passada então a gente pegou aqui então qual que é a data prescrita data perf fala aqui eu vou colocar um outro atributo aqui que vai ser o data R escrita que é a resposta Escrita aqui eu posso copiar que esse exemplo só trocar ali com a coluna no final então eu posso colocar assim R escrita né e aqui eu posso fazer mais uma cópia aqui desse uma cópia aqui desse data Deixa

eu fazer aqui então data traço r falada e aqui a gente vai colocar o dado que é para a gente pegar que vai ser o r Falado né falada aqui ó R falada beleza e falada Beleza então o que que isso aqui tá fazendo pessoal a gente tá colocando os dados do banco diretamente incorporado no nosso link com o atributo data onde vai ter a informação se a gente rodar Isso aqui vai ficar mais fácil de você ver como é que isso venha vou dar um corda Android E aí vou mostrar para você direto no

aparelho ali como é que funciona inspecionando então rodando aqui no nosso aplicativo se a Gente for lá em elementos para a gente ver que a hierarquia dos elementos da nossa tela aqui né a gente pode buscar aqui dentro de da de app que é o nosso app do frameworks dentro da Rota memórias aqui a gente pode procurar aqui o peixe contente que o conteúdo da página aqui a gente tem a nossa com memórias aqui a gente tem a nossa lista então abrindo aqui A Hierarquia do nosso 60 ml Aqui nós temos a lista que é

o l e Aqui nós temos os Lis que são criados dinamicamente pelo nosso java script olha só que interessante isso daqui pessoal dentro do próprio link que a gente tem aqui onde tem ali Cada Um item da nossa lista dentro do link a gente tem os valores que estão sendo recuperados então ó a gente tem o data aí de um data P escrita teste datap falada Fast que é o que ela entendeu o r escrita tá vindo como nu quer dizer não tem nada é nulo e o data é falado tá vindo como nu também

nulo Porque não tem nada porque exatamente se a gente for lá no nosso banco de dados ó a p escrita é teste é para falar de teste é reescrita não tem nada é falada não tem nada então essas informações elas estão incorporadas no nosso HTML e Isso facilita bastante para a gente fazer as manipulações que a gente vai fazer agora certo Olha então você vê que dinamicamente ele já vai colocando os dados aqui as informações dentro do próprio HTML aqui certo agora Olha aqui Que a gente vai fazer então a gente vai fazer abaixo aqui

da onde a gente tem esse laço de repetição for onde termina o nosso laço de repetição que fez a montagem aqui da nossa listinha aqui a gente vai fazer um eventinho do que que acontece se clicar no item desse da lista para a gente usar de seletor a gente não vai usar por um ID a gente vai usar como seletor a classe aqui desse nosso link aqui desse nosso a que é a classe aqui e tem link certo porque pela Classe A gente consegue pegar especificamente um elemento então vou fazer assim ponto e tem link

que é a classe que a gente quer ponto ou um clique o que que aconteceu quando clicar no item da lista e aqui a gente vai fazer uma function né um callback do que que acontece quando clicar então quando eu clicar no item desses da lista aqui deixou só sair desse modo aqui que tava deixa eu abrir Aqui deixar o banco né porque senão fica selecionado aqui fica ruim de ver então o que que eu quero fazer quando clique no item desse da lista eu preciso recuperar qualquer oidias informações que tem aqui e alimentar aqui

dentro da nossa rotina aqui não da nova pergunta dentro da Rota da resposta né quando eu clico em cima a resposta da assistente aqui em cima eu quero mostrar qual que é o ID que eu peguei da pergunta que eu tô capturando E se já tiver alguma coisa salva já aparecer aqui senão ele vai começar vazio e a gente pode salvar para atualizar é isso que a gente vai querer fazer então Eu vou recuperar essas informações que estão dentro agora aqui do meu link Então olha aqui que eu vou fazer eu vou fazer uma variável

chamada ID é de item podemos fazer assim ó aí de item cui maiúsculo para fazer um Camel Case Aí de item e eu vou fazer o seguinte eu vou fazer diz quer dizer o que foi clicado o item que foi clicado este diz em inglês quer dizer Este esse que foi clicado eu quero recuperar o atributo data traço aí de olha só que fácil pessoal então eu tô atribuindo uma variável ai de item que eu quero pegar desse item que foi clicado o atributo data e de dessa forma eu vou recuperar essa informação que tá

no meu elemento HTML então acabei de pegar aqui qual que É o ID certo então clicou vou fazer assim vamos colocar aqui clicou num item da lista recuperar informações deste item da lista então a gente pegou o ID do item nós vamos fazer uma outra variável que pode ser item pergunta escrita e a gente vai pegar aqui o atributo qual data P escrita que é o atributo que a gente colocou aqui ó data prescrito que tá pegando Qual é a pergunta escrita certo e aí a gente vai colocando todas as informações que a gente quer

recuperar Então vou colocar item pergunta falada aqui vai ser p falada aqui a gente tem item resposta escrita Então vai ser R escrita e vamos pegar mais o item resposta falada então data R falada Então olha só que interessante o que que a gente fez com Isso aqui simples cliquei no item da lista aqui eu vou estar pegando do meu código Qual que é o ID desse item qualquer pergunta escrita pergunta falar da resposta escrita e resposta falada que eu já peguei do banco e salvei dentro do meu elemento HTML agora eu vou precisar alimentar

lá o meu pop-up resposta com essas informações então lá no meu pop-up resposta Olha aqui que eu vou fazer aqui onde a gente tem deixa eu achar aqui o pop-up resposta Eu vou querer fazer ó deixa eu mostrar para vocês aqui em cima deixa eu entrar no pop-up resposta para mostrar aqui em cima eu vou querer que mostre Qual que é o ID dessa resposta certo então eu vou colocar aqui um badzinho que é aquele símbolo aqui ó desse azulzinho que nem esse aqui ó eu vou querer colocar um desse ali dentro também então eu

vou até pegar aqui ó do nosso memória JS onde a gente tem montando que aqui tem um exemplo lindo Um Bad ó esse spam aqui tá vendo eu vou pegar esse pãozinho aqui copiar control c vou lá no meu memórias.html aqui onde a gente começa o nosso peixe contente dentro do pop-up resposta eu vou colar esse nosso spam e aqui eu só vou tirar essa informação aqui já escrito que não tem nada a ver tá deixando o spam vazio e eu vou batizar ele com aidi aqui ó que eu vou chamar de ID do item

assim tá aí dito você pode colocar o Nome que quiser né você sabe que eu não sou muito criativo com a e diz aqui o importante é que o ID seja sempre único você usar um ID que você não usou anteriormente inventa uns nome meio diferente aí só para você poder ter um aí de único para esse elemento certo então eu vou querer alimentar primeiramente esse nosso spam que se chama aí de do item com a dica a gente está pegando do item da lista então lá no nosso clique eu vou pedir para fazer O

seguinte alimentar o ID do pop resposta então eu posso fazer assim né o nosso elemento aqui do item ponto HTML porque ele é um spam então um spam método para a gente injetar alguma coisa dentro dele é ponto HTML a gente vai colocar o que o ID item que é o ID que a gente já recuperou no Clique Então a gente vai alimentar dinâmicamente com O que a gente clicar ele vai alimentar dinamicamente o nosso pop-up resposta certo Nós também vamos fazer aqui uma seguinte validação a gente vai precisar verificar o que que tem no

resposta escrito não resposta falada então a gente pode fazer assim se o item resposta escrita for igual anulo ou é Ou a gente pode fazer assim dois duas barras aqui dessa forma que quer dizer ou tá que essa essas duas barras Você faz assim segurando shift e a tecla de barra que fica do lado geralmente da letra Z aí no seu teclado aí você faz essas barras em pé certo mas você pode escrever aqui também orc também funciona né aqui deixa eu ver o que que ele tá falando esperava tal vamos fazer assim ou dessa

forma Então se o item resposta escrita for nulo Ou a gente pode fazer agora uma string aqui ó e tem resposta escrita for nulo assim como uma string Aí que quer para acontecer a gente vai pedir para focar no campinho se for nulo campinho de escrita Vamos pedir para focar nele deixa eu ver qual que é o nosso campinho pute aqui ó lá do nosso pop-up esse campinho aqui a resposta escrita se ele já tem alguma aí dia então ele não tem então eu posso colocar aqui batizar ele com ID vou chamar ele de input

underline R escrita e eu vou colocar também um nome aqui Para o input R falada que é o de baixo certo batizei com esses nomes aí então se não tem nada se é nulo não vem nada do nosso banco no nosso elemento a gente na verdade a gente pode fazer assim ó diferente de nulo e aqui a gente pode fazer e item resposta diferente de nulo assim se for diferente de nulo né a gente vai querer que alimente o nosso campinho lá que a gente acabou de criar que é o nosso aí Dia que input

é reescrita a gente vai querer alimentar ele com o seguinte valor com o valor do item resposta escrito que a gente pegou aqui em cima certo se a resposta resposta não for nula alimentar o campo então a gente só vai fazer isso se não for nula tá Porque daí a gente alimenta se não ele Não vai fazer nenhum tipo de alimentação aqui aqui a gente tem que pegar o resposta falada também fazer a mesma coisa só mudar aqui que é o r escrita para o r falada e aqui a gente vai pedir para ele alimentar

com o item resposta falado certo ok E aí a gente vai pedir para focar agora no primeiro item que é esse primeiro campinho input aqui ó a gente vai pedir para ele já dar o foco ali para a gente já poder começar a escrever Então a gente pode pegar aqui o nosso input é reescrita. Focus que é um método para a gente já focar nesse Campinho certo então aqui vamos focar no campinho beleza vamos recapitular o que a gente fez até agora porque às vezes assim explicando Chico teco dá uma fritada né quando o nosso

aplicativo gera a nossa lista puxando do banco de dados ele tá salvando esses dados no próprio componente do elemento HTML que é esse link aqui que tem as informações da Ataíde data prescrita data per falada é reescrita erre falado esse item ele tem uma classe chamada item link então o que que é isso aí é cada um desses itens da lista que aparecem aqui ó aí a gente tá fazendo que quando clica no item desses da lista então a gente fez aqui ó a chamadinha aqui embaixo ó clicou no item da lista item link ou

clique que que é para acontecer Ele tá recuperando esses valores que estavam ali no meu elemento HTML então eu tô Pegando pelo atributo data E de data e escrita bem falada é escrita é falar e tô atribuindo a essas variáveis que eu criei aqui aí eu tô alimentando o meu pop que é o pop-up que abre quando a gente clica no item então cliquei no item da lista ele vai abrir esse pop-up pegar essas informações que estão ali no elemento e vou alimentar isso daqui aqui em cima vai ter o ID então de forma dinâmica

que ele vai pegar ali do elemento da lista e se tiver uma Resposta escrita uma resposta falada ele já vai mostrar elas aqui certo se não tiver nada ele vai ficar vazio e só vai começar aqui como que se fosse clicado assim ó em Foco o primeiro item da lista para a gente já começar a digitar alguma coisa OK basicamente é isso que a gente tá fazendo aqui até agora tranquilo então vamos ver se isso aqui vai rodar vou fechar esse meu espectro que eu tô fazendo aqui vamos dar um corda Android Rodar novamente a

nossa aplicação e ver se essa implementação que a gente fez vai funcionar Beleza então vamos rodar de novo aqui no nosso expert esperar ele carregar aqui que não carregou Agora sim carregou e vamos ver se funcionar essa nossa implementação né então vamos lá acessar memórias aí beleza o que a gente vai querer então é clicar no item da lista e quando clicar no item da lista ele tem que mostrar para nós lá no pop-up resposta Já Qual que é o ID de acordo com o item que a gente clicou eu vou clicar no primeiro aqui

ó ele já mostrou um né que é o valor do id que a gente tem ali do primeiro a gente pode dar uma melhorada nisso escrever aí dia ali também ele ficou meio desalinhado Ficou ali no canto a gente já resolve isso mas o ponto é que ele tem que pegar esse dinâmicamente eu vou clicar no dois aqui para vocês ver ó já mostrou o dois lá tá vendo Então ele Tá puxando essa informação dinamicamente aqui ó veio os campos vazios porque na validação ele viu que veio nulo então a gente pode escrever alguma coisa

se tivesse alguma coisa lá no nosso banco de dados a gente poderia daí já aparecer escrito aqui ele vai alimentar dinamicamente com essa informação mas daqui a pouco isso aí já acontece a gente já vai ver isso funcionando vamos dar uma melhoradinha nesse daqui ó ele ficou meio aqui nessa esse nosso Bad Aqui não ficou muito legal então a gente pode fazer da seguinte forma aqui quando a gente alimenta o nosso spam a gente pode colocar assim ó aí de dois pontos espaço e aqui pedir para mostrar mais qual que é o número do id

né só para escrever aí de certinho ali só o número fica meio esquisito e aqui ó a gente onde colocou esse nosso spanzindo aí dia aqui ó dentro do peixe contente tá vendo que tem o spank aí de do item a gente pode fazer uma dívida Com a classe Block um bloquinho só para ele ficar contido dentro então vou recortar aqui esse põe colocar ali dentro Ctrl x coloquei aqui dentro do nosso bloquinho aí ele já vai ficar mais alinhado certo beleza agora que que a gente vai querer fazer pessoal a gente vai querer que

quando a gente digite aqui né a resposta escrita a gente digitou alguma informação ali dentro quando a gente clica fora disso dali fora desse campinho qualquer lugar Clicou fora dele tirou o foco desse campinho a gente vai querer que Clone o que a gente escreveu nesse de cima no de baixo para a resposta falada e que a gente possa clicar ali naquele botãozinho que tem aqui que é esse botãozinho de um megafone né para ela falar para a gente ver como ela fala Lembrando que esse pop-up resposta da assistente É o que é assistente vai

responder ao nosso comando então na resposta escrita o que vai aparecer lá Na tela na parte Inicial escrita e no resposta falada é o que ela vai falar realmente né a gente tem que escrever ao pé da letra O que a gente quer que ela fale certo então vamos fazer isso agora então vou fazer o seguinte quando a gente saía aqui então do nosso campinho é nosso input é escrita que é esse emputzinho aqui aqui em cima e putierre escrita quando sair dele quando perdeu o foco a gente vai querer que Clone o que tem

dentro Dele para o outro campinho de baixo como que a gente faz isso aqui embaixo então dá desse evento aqui do clique do item a gente pode fazer o seguinte saiu do foco do campo R input R escrita então a gente faz da seguinte forma a gente vai fazer um eventinho assim a gente faz o campinho R input R escrita uma rede do nosso campinho ponto on e a gente usa o método aqui ó on Blur quer dizer o que que acontece Quando ele perde o foco quando sai desse campinho Então vamos fazer assim foi

um show que a gente quer que aconteça a gente vai querer que o nosso input R escrita ponto véu valor dele vai receber o valor do nosso input R escrita aqui é o falada né falada nosso impulti R falada vai receber o valor aqui do nosso input é reescrita.veu certo então o que que eu fiz aqui quando sair do foco do campo e putierre escrita Eu quero que ele pegue o valor que tá ali dentro e coloque lá dentro do Campinho de baixo é basicamente isso que eu tô fazendo certo e aí que que eu

já vou querer que aconteça eu já vou querer que assim que ele faça isso que ele é coloque ali no campinho de baixo qual que é o mesmo do que tá no camping de cima que a nossa assistente fale eu não sei se isso é prático também porque às vezes mais atrapalha do que ajuda né Então na verdade eu acho que eu não vou Fazer isso não eu vou deixar ali só para quando a pessoa clicar no botãozinho mesmo aqui ó para que ela fale porque senão vira meio que uma bagunça né Tá ok vamos

lá no nosso botãozinho sabe aqui que a gente tem que é esse símbolozinho do megafone E aí a gente coloca aqui um aí dia é btn falar resposta então btn falar resposta beleza Vai ser o nome desse Fábio Button aqui então no btn falar resposta quando clicar vamos fazer o eventinho aqui então abaixo que do saiu do foco do input aqui embaixo a gente vai fazer também esse ventinho aqui de clicou no botão para assistente falar que é o nosso btn falar resposta então a gente pode até para evitar fadiga que copiar aqui ó o

reventinho de clique né ô preguiça Danada A gente só pode fazer os fechamentos aqui certinho só trocar o id então Vamos colocar aqui clicou no btn falar resposta que aquele botãozinho da farinha a gente vai querer que ela fale para ela falar nós vamos usar aquele recurso do TTS que é o teste do Speed que tá aqui na nossa index.js a gente tem um exemplinho aqui da chamadinha dele né desse métodozinho então a gente vai copiar esse método do TTS speak Vamos só ver onde é que ele fecha aqui certinho deixa eu ver onde é

que é o fechamento é aqui vou copiar ele todo control c dá o comandinho para ela falar alguma coisa então primeiro antes da gente botar esse comando para ela falar já vou colar ele aqui né vou deixar ele aqui Deixa eu só ajeitar aqui a alimentação tal tá ok o que que a gente vai querer a gente vai precisar recuperar o que tá Dentro aqui do nosso input R falada certo o valor ali então a gente pode ver aqui ó vai poder criar uma variável aqui Vamos colocar aqui recuperar o valor do input R falado

Então vou pegar aqui e dizer se chamar isso aqui de fala vamos chamar de fala e vou colocar aqui que eu quero pegar o valor do que tá aqui no input R falada que é o nosso campinho input de baixo certo então atribuindo uma variável chamada fala e aqui no Speak Eu só vou pedir para ela dizer essa fala só coloca essa variável Opa coloca aqui ó fala dessa forma Beleza então tô pedindo para ela falar isso aqui no na função de callback de sucesso Se der certo a gente não precisa pedir para mostrar um

typed aqui nem nada do tipo então a gente pode apagar esse daqui ó não precisa disso daqui a gente pode só colocar aqui um console console logo assistente falou só assim só para a Gente saber que falou e se der algum erro o errozinho Beleza então clicou lá no nosso botãozinho do Megafone aqui ele vai ela vai pegar o valor desse campinho de baixo e vai falar para nós o que que ela como que ela vai estar falando certo vamos ver se isso aqui funcionou Então vou fechar esse espectro aqui fechei vamos rodar de novo

corda corda Android e vamos ver no celular lá novamente Beleza já fez a instalação aqui então vou inspecionar ele aqui já tá aqui Funcionando para nós e vamos fazer o teste aqui acessar memórias aí beleza acessou o que que a gente tem que fazer quando clicar no item da lista ele tem que mostrar o ID lá no nosso pop-up certo então vou clicar aqui cliquei Ó lá beleza mostrou aí dia agora ficou bem bonitinho né Vamos clicar no segundo item para a gente ver se dá certo também clique no segundo ó lá beleza daí a

gente pode fazer o seguinte a gente vai escrever aqui alguma coisa ó Teste de resposta da assistente assistente quando a gente clicar então no camping de baixo ele já vai ter que copiar o de cima para baixo ó que legal cliquei no de baixo como eu fiz o evento de bler saída de cima ele Já copiou de cima embaixo porque a resposta escrita a gente imagina que a resposta falada vai ser basicamente a mesma coisa né aí agora vamos clicar aqui no símbolozinho aqui que a gente tem do Megafone para Ver como que ela fala

né Deixa eu não sei se eu tô com o celular com som aumentado mas vamos ver se vocês vão escutar aí teste de resposta da assistente deu para ouvir deixa eu aumentar aqui o volume do meu celular tá no máximo aqui vamos de novo vou clicar lá em cima do botãozinho de megafone teste de resposta da assistente Então dessa forma você tem um retorno sonoro de como que ela vai estar falando então Aqui na resposta falada que é o campinho de baixo você pode colocar como você quer que ela fale pode ser totalmente diferente do

que vai aparecer escrito por exemplo a gente pode colocar assim ó o professor Dimitri é bonitão por exemplo é isso a gente clica ali o Professor beleza e aí não você vai ver que não fica 100% perfeita a maneira como ela fala Então Às vezes você tem que escrever meio que literalmente aqui nessa linha de baixo né Como você quer que ela fala por exemplo o meu nome Dimitri ela fala de Mitre né então se você colocar um acento por exemplo ali no i ó do Meio deixa eu tentar ver se eu consigo aqui ó

colocar um acento agudo ó aí quando eu peço para ela falar ela e bonitão reparou a diferença aí ó ela fala mais com acento ação né isso daqui da resposta falada de baixo não vai Aparecer o que vai aparecer escrito é o de cima Então você capricha na parte escrita no input de cima que é o que vai aparecer lá na telinha no input de baixo é só para você ouvir como ela vai estar falando e aqui você pode escrever literalmente Como você quer que ela fale ok show de bola né pessoal muito legal mesmo

agora que que a gente precisa fazer a gente precisa fazer que quando clique no botão Amarelo aqui salvar que essa informação seja salva aqui na nossa Tabelinha para que fique aqui salvo né a resposta escrita é a resposta falada Ok então vamos fazer isso agora primeiro não então o nosso botão aqui salvar ele precisa ganhar um ID para ele né então vamos lá na nossa na nossa página de memórias.html ou manchar o botão de salvar que é esse aqui ó nosso FAB botou um left e aqui a gente pode dar um ID salvar respostas vou

chamar assim salvar respostas o nome do id Ok vamos Continuar então abaixo aqui da onde a gente tem esse último evento de clique que a gente fez do botão falar resposta aqui embaixo nós vamos fazer o do salvar resposta só para evitar a fadiga eu vou copiar esse daqui vou colar aqui embaixo só trocar aqui qual que é o ID para o ID salvar respostas aqui clicou no botão para salvar as respostas certo então clicou no botão para salvar as respostas eu vou primeiro tirar esse TTS Aqui que eu não vou querer né que eu

tava só copiei do outro então esse aqui eu não preciso fazer o seguinte quando clicou então no botão salvar as respostas a gente vai recuperar o valor do input R falada mas a gente precisa também recuperar o valor do input do R escrita então eu vou colocar assim escrita falada só para ficar no mesmo contexto Então essa vai ser R escrita e essa R falando beleza então estou colocando Aqui nessas variáveis os valores que estão vindo desses campinhos ou novamente Estou recuperando essa informação aqui e agora eu tenho que salvar essa informação Então a primeira

coisa que a gente vai ter que fazer aqui é uma transação com o nosso banco então vou fazer um DB trans Action e aqui eu vou dizer que eu quero fazer uma transação de atualizar tabela certo vai ser essa a transação Que a gente vai fazer então como a gente já viu o nosso primeiro callback é uma função de erro que a gente sempre tem e o nosso segundo callback é uma função de sucesso o que que acontece se der certo né É meio invertido aqui é os callbacks no caso aqui desse tipo de trabalho

com banco websql né então aqui é o que desce se der certo se der errado então vamos fazer uma transação atualizar tabela o que que acontece se der certo o que que acontece se der Errado se der certo a gente pode colocar aqui um ao melhor errado né porque a gente tem que colocar o erro a gente pode dar um console ponto log aqui Colocar assim erro ao atualizar tabela dois pontos espaço aqui Vamos pedir para ele mostrar o erro aliás aqui pode até ser um app ponto dayalog ponto alerta para gente dar uma janelinha

de alerta mesmo para a gente saber que teve um erro né eu ao atualizar a tabela e se der certo aqui a Gente pode dar um console log ponto dizendo assim né que é sucesso ao atualizar a tabela Ok E aí aqui então a gente está chamando a nossa função atualizar tabela que vai fazer isso tô aqui embaixo a gente vai colocar aqui uma function chamada atualizar tabela a gente vai colocar o TX que é o trans Action Execute né que a gente vai querer fazer então a gente vai fazer assim TX ponto Execute SQL

para a gente dar o Comandinho que a gente quer executar dentro da nossa tabela e aqui a gente vai passar o comandinho SQL né então como a gente teve por exemplo aqui já antes ó ou de selecionar né Por exemplo a gente já teve de selecionar o de criar tabelas então da mesma forma a gente vai criar agora um para atualizar e é o mesmo padrão que a gente usa com o SQL convencional Deixa eu só achar aqui que eu me perdi onde a gente tá no código Poxa aqui aqui então a gente pode fazer

da seguinte forma update que é atualizar aí a gente tem que colocar o nome da nossa tabela o nome da nossa tabela aqui é memórias então atualizar memórias aí a gente passa as colunas que a gente quer atualizar então a gente coloca assim 7 aí a gente coloca o nome da coluna então o nome da nossa coluna ali é escrita e r falada então 7 R escrita é igual e aqui a gente vai passar ó dentro De aspas simples porque a gente tá usando aspas duplas aqui do lado de fora Qual que é o valor

que a gente quer colocar aqui dentro então aqui dentro do R escrita a gente vai pegar o valor que tá aqui na nossa variável escrita tá vendo Então a gente passa duas aspas simples que é para dizer que isso é uma streaming agora a gente para poder concatenar a nossa variável aqui a gente pode colocar aspas duplas duas aspas duplas aqui coloca Dentro mais dois mais assim e aqui dentro a variável beleza ok aqui ó depois da aspas simples a gente continua aqui colocando uma vírgula e qual que é o próximo item do nosso banco

então a gente é reescrita e aqui a gente vai querer a r falada agora vai ser igual coloca duas aspas simples duas aspas duplas e agora a gente concatena aqui com a nossa variável que tá aqui em cima que é a falada certo vamos colocar aqui mas [Música] mais falada E aí depois é que dá aspas simples agora que vem o pulo do gato a gente vai dizer que a gente quer atualizar a coluna escrita a coluna falada onde o air onde o ID seja igual e agora aqui a gente tem que passar Qual que

é o ID nesse caso a gente acabou não recuperando aqui o ID né pessoal nós não tivemos a recuperação desse aí dia aqui deixa eu ver se a gente recuperou ele é dentro do deixa eu ver aqui do salvar Respostas a gente não salvou né a gente pode fazer isso da seguinte forma que aqui a gente pegou aí de do item quando a gente clicou no item da lista tá vendo a gente pode salvar esse ID aqui no local Story que é um tipo de armazenamento local que vai poder ser usado lá depois então a

gente pode fazer assim ó local Stories ponto sete item a gente batiza com uma chave que eu vou chamar de aí de item e aqui a gente Coloca uma vírgula e coloca qual que é o valor nesse caso é aí de item então salvei essa chavezinha que vai ficar salvo no armazenamento local também do celular mas só uma chave específica que eu coloquei a gente pode usar o local start para fazer isso e aqui ó no nosso quando clica no salvar respostas aqui a gente pode recuperar o ID aqui então vou fazer assim recuperar o

ID aí a gente faz assim uma variável chamada aí mesmo que a gente pode chamar E a gente vai usar o local Stories agora Gatti tem que pegar o item e a gente só vai passar qual é a chave que a gente quer recuperar que é o id e tem aqui certo Beleza então agora a gente já tem qual que é o id e aqui a gente pode pedir no final para mostrar aqui né que a gente quer atualizar a nossa tabela memórias a coluna é reescrita R falada onde o ID for aqui vou colocar

aspas duplas também com catená com o ID Que a gente recuperou ali de cima OK beleza então esse é o nosso commandinho aqui então a gente fez aqui uma trans Action quando clicou no botão salvar resposta vamos ver aqui o resumo do que a gente fez na nossa loja clicando o botão salvar ele vai recuperar o ID Vai pegar qual que é a resposta escrita vai pegar qualquer resposta falada vai iniciar uma transação com o nosso banco de dados vamos fazer assim iniciar transação Um banco de dados certo e aí vai chamar aqui o atualizar

tabela vai fazer um tx Execute para executar aqui atualizar a nossa tabela memórias na coluna escrita é escrita colocar o valor que tá vindo lá do nosso campinho no R falada também o valor que tá vindo do nosso campinho onde o ID foi uma dica a gente passou certo ok é isso E aí a gente pode dar algum tipo de de retorno aqui né Depois que fez tudo isso ó para ele zerar os nossos campinhos mas Primeiro vamos ver se isso aqui funcionou tá pessoal então vou salvar Vamos dar um corda Android ver se isso

aqui deu certo acessar memórias [Música] aí acessou Beleza vou clicar aqui no primeiro item então no primeiro item da lista cliquei quando eu cliquei olha uma coisa interessante que agora a gente fez lembra que a gente usou o local storge lá quando você vem aqui em local Stories você vai ver Aquele salvou uma chave chamada ai de item com o valor 2 tá vendo se eu voltar lá na lista e clicar no segundo olha só o que que vai acontecer ali ó cliquei no segundo ó trocou aí de item para dois aqui tá vendo Então

antes estava no 1 né agora foi para o 2 então isso aqui é legal porque a gente tem armazenado Qual foi a chave que foi clicado usando o local Stories de um outro recurso que também a gente aprendeu aqui nessa aula então vamos fazer o seguinte vamos Colocar aqui salvar uma resposta vamos salvar no um aqui deixou em um aqui no 1 a resposta escrita eu vou colocar assim legal isso é um teste de resposta vou clicar no de baixo Vamos pedir para ela falar Beleza então eu vou clicar agora no salvar e vamos descobrir

se deu certo cliquei aqui no salvar ele aparentemente não deu nenhum retorno A gente pode ir lá no console ver o que que ele diz aqui para nós sucesso ao atualizar a tabela ele já deu esse retorninho aqui é aquela assistente falou as outras coisas que a gente pediu para ele mostrar para nós agora se a gente voltar lá no nosso banquinho Olha lá que legal ele já salvou aqui o nosso resposta escrita e também o nosso resposta falada então tá salvo essa informação inclusive se a gente fechar voltar agora aqui para tela inicial por

Exemplo e agora a gente acessar a memória acessar memórias acessar memórias aí finalmente conseguiu entender o que eu tava falando então agora se eu clicar no item da lista ele já tem que me mostrar para mim preenchendo os campinhos que a gente fez isso antes né então cliquei Ó ele já vem preenchido com que a gente já tem salvo ali se eu trocar qualquer coisa aqui por exemplo legal isso é um teste de resposta É atualizada clicar aqui no campinho de baixo para ele atualizar legal isso é um teste de atualizada é um teste de

atualizada beleza tem problema cliquei no salvar ele não tá me dando nenhum tipo de retorno porque eu não pedi para dar nenhum tipo de retorno mesmo tá pessoal Mas se a gente agora vir aqui clicar no banco e clicar nas memórias novamente ó lá legal e são teste de atualizada então ele atualizou Aqui o nosso registrinho Ok então Independente se eu trocar aqui as informações Ele sempre vai estar salvando essa última que a gente clicar no botão salvar então a gente pode agora simplesmente dar uma melhorada aqui uma garibada vamos dizer assim né nesse nesse

nosso salvar aqui para dar algum tipo de retorno de salvamento né então nós vamos fazer da seguinte forma aqui depois então que fez a nossa transexionzinho fez a nossa função de Atualizar a tabela a gente pode usar um post né até posso pegar aqui ó de um touchzinho que a gente tinha aqui ó de salvamento né acho que a gente tinha um touch que a gente usou aqui na nossa rota de memórias mesmo né Deixa eu ver aqui ó eu me lembro que a gente fez um aqui é um touch salvar tá vendo vou copiar

esse touch salvar aqui e vou usar também ele aqui a gente poderia até fazer uma coisa mais Inteligente né pessoal aqui embaixo a gente poderia fazer uma função olha só o que que eu vou fazer vou fazer aqui uma função chamado post salvar e aqui dentro eu vou pedir para ele acionar esse touchzinho aqui salvar beleza touch de salvar dessa forma toda vez que a gente precisar desse touch a gente só chama essa função olha só que legal então aqui ó onde a gente teria esse touch salvar Aqui aqui dentro né A gente só faz

assim a gente deixa eu tirar esse touch salvar só vou fazer assim então te salvar chamei aqui todo lugar que a gente precisar a gente chama isso aqui fica bem mais prático né Vamos colocar aqui também depois de atualizar a tabela atualizou a nossa tabela a gente vai colocar o nosso touch salvar aqui e a gente pode zerar os nossos campinhos aqui ó então nosso campo input resposta Escrita a gente pode zerar ele então a gente colocar o valor Zerado e o nosso campinho resposta falado mas também vamos ver ele deixar ele zeradinho e a

gente pode fechar o nosso pop-up de resposta a gente já vai fechar ele né porque já deu o salvamento da resposta para fechar um pop-up você faz assim App deixa eu acho que ele Acrescenta alguma coisa lá em cima ó eu não queria esse daqui não deixa eu voltar aqui deixa eu Ver se ele colocou alguma coisa lá em cima não então para você fechar um Pop você vai fazer o seguinte deixa eu só achar aqui que eu agora não tô mais me localizando aqui cadê eu perdi aqui a gente faz assim app ponto pop

Close e aqui a gente passa Qual que é o pop-up que a gente quer fechar no caso é o nosso pop-up resposta né pop resposta aqui eu tô passando Qual é A classe como seletor né para fechar o nosso pop-up certo então esse é o método Zinho para fechar então só vamos comentar aqui touch para dar aviso de que salvou zerar os campinhos fechar o pop-up tá resposta agora a gente vai dar um retorno mais visual para o nosso usuário que deu certo vamos ver se funciona isso aqui vou dar um corda do Android já

vou fechar esse aqui que a gente já tinha Aberto e vamos ver se vai dar certo essa esse nosso retornei para o usuário acessar memórias beleza cessou vamos clicar no item 2 para a gente colocar alguma coisa aqui então vou falar assim muito bom isso é uma resposta aleatória muito bom isso é uma resposta aleatória vamos ver tem uma resposta aleatória muito bem então vou clicar aqui no salvar e vamos ver se vai dar certo os efeitinhos que a Gente queria cliquei no salvar ó lá salvo fechou o nosso pop-up beleza tá fechado vamos ver

se aqui no nosso banco ele atualizou atualizou tá lá salvo o nosso console lá sucesso atualizar a tabela show de bola e vamos clicar por exemplo no item um para ver se ele mostra o primeiro item legal isso é um teste de atualizada Beleza então ele mostrou aqui do item os dados vamos clicar no item dois vou fechar aqui ó vou clicar no item 2 para a gente ver se Ele vai pegar Ah quando a gente clicou no item dois ó ele não mudou os itens aqui dos nossos campinhos ele pegou o mesmo do de

cima tá vendo Ah então a gente precisa modificar isso daí ó quando clicar no item da lista ele tem que alimentar com os dados se não for nulo né tem que alimentar com os dados Então deixa eu ver aqui ó O que que a gente tá fazendo de errado Vamos ver aqui clicou no item da lista ele vai pegar o data R escrita deixa eu ver se só se ficou certo no dentro do elemento que HTML se tá certo os dados que estão vindo lá do nosso banco aqui nas nossas memórias ó vamos ver que

o nosso peixe contente tá aqui com memórias a nossa lista perguntas vamos ver um e o 2 aqui outro item olha só ele tá vindo como sendo nula Ah olha só que que acontece pessoal muito Interessante isso daqui muito interessante mesmo quando a gente salva uma informação no nosso banco ela tá sendo salva lá no banco Beleza a gente viu que salvou aqui na tabela só que o que que acontece essa nossa lista aqui ó que tá já no aplicativo montada ela não está sendo montada ela não foi atualizada certo ela ainda tá com os

valores antigos e no valor antigo ela tinha salvo que o nosso resposta escritório anula e a nossa resposta Falar da era nulo então a gente precisa no momento que a gente for ele clicar no salvar aqui no nosso pop-up resposta Opa cliquei errado né cliquei no item aqui quando a gente clicar nesse botão salvar do nosso pop de resposta a gente precisa invocar a função para atualizar novamente a nossa lista certo isso a gente vai precisar fazer isso dá para fazer da seguinte forma tem duas formas de a gente fazer isso a gente pode É

chamar aqui onde a gente faz a listagem deixa eu ver qual que é a função que faz listar memórias aqui ó listar memória está vendo a gente pode chamar essa função que ela vai fazer a listagem aqui então a gente pode vir aqui onde a gente tem item link clicou na verdade é nos salvar né btn E falar resposta salvar respostas então no final de tudo isso daqui ó depois que ele fecha aqui até o pop-up da resposta aliás antes disso a gente já Poderia colocar aqui ó para ele estar memórias para ele atualizar atualizar

o meu Deus do céu não tô conseguindo mais escrever atualizar a lista Aí touch para dar aviso que salvou E aí zerar os campinhos etc Ok então vamos ver agora se vai dar certo isso daqui para nós eu vou dar um corda Android e vamos ver se isso vai funcionar eu vou até adicionar um registro novo para a gente ver se Isso dá certo acessar memórias Beleza então os dois itens ali vou adicionar um outro item vamos fazer uma coisa um pouco mais séria aqui né ali tá só teste ou Twitter Vamos fazer alguma coisa

assim mais legal qual é o seu carro favorito [Música] então vamos gravar aqui o que que a gente vai falar clicando no microfoninho Qual é o seu carro favorito ela entendeu em qual é o seu carro favorito não tem problema né vou até repetir de novo qual é o seu carro favorito beleza vamos salvar salvou salve beleza vamos fechar aqui então tem os três itens lá e eu até tenho que dar uma olhadinha para ver se esse terceiro item ele já vai vir com os dados ali que eu não me lembro como a gente fez

deixa eu ver aqui memórias Vamos achar que eu perdi contente com memórias a nossa lista lista de perguntas vamos ver o item 3 aqui Beleza já tá vindo aqui zeradinho tá vendo é reescrita nula e r falada nula Então tá vindo Zerado Vamos ver se agora ele vai atualizar conforme a gente colocar uma resposta aqui então clica aqui em colocar uma resposta meu carro favorito é o Fusca Olha só vamos clicar aqui no de baixo meu carro favorito a Fusca Vamos ver como que ela vai falar meu carro favorito vamos salvar para ver e daí

vamos reparar se vai atualizar aqui esse esse nosso item da lista aqui né vou clicar aqui em salvar salvei deu salvo aqui beleza a gente vê o que Ele montou a lista de novo aqui se a gente for ver na lista agora ó tá no nosso data P falada da terra escrito da terra falada Tá vindo Sem nenhuma informação aqui ó Parece que deu algum problema deixa eu ver se deu algum erro aqui sucesso ao atualizar tabela sucesso ao realizar transação selecionar tudo deixa eu ver aqui ele não salvou no banco corretamente aqui ó pessoal

ele não salvou na nas tabelas nas colunas aqui o item né Porque será que ele não salvou vamos ter que investigar esse Probleminha aí não salvou o item ali deixa eu ver se ele pegou a chave tava com a chave 3 a chave 3 tá aqui no local Stories e curioso né ele não fez o salvamento Talvez ele não tem efeito salvamento Porque a gente já pediu para listar para atualizar a lista que antes né Vamos deixar então esse aqui por último aqui embaixo para ver se vai fazer diferença Então por último ele atualiza a

lista né vamos Fazer mais um testezinho para ver se isso vai fazer diferença ou não vamos ver se vai dar certo aqui né acessar memórias Então qual é o seu carro favorito a pergunta Tá ali vou clicar para usar essa pergunta meu carro favorito é o Fusca Favorito pela Fusca vou clicar aqui em salvar para a gente ver se vai dar certo salvo beleza vamos clicar aqui no banco Para ver agora ele salvou meu carro favorito é o Fusca beleza tá mostrando aqui né se a gente clicar nele meu carro favorito é o Fusca beleza

vamos clicar no segundo resposta aleatória primeiro legal isso é um teste de atualizada Ok vamos colocar um item novo porque eu tô suspeitando que talvez o problema né esteja acontecendo somente e quando a gente adiciona o item novo e aí o motivo a Gente ainda vai ter que descobrir mas vamos fazer um teste para ver se vai dar certo eu vou adicionar aqui Qual é a sua idade então Qual é a sua idade Vou salvar beleza salvou tem lá o item né E tem quatro deixa até dar mais uma olhada mais uma vez para a

gente dar uma olhada se nesse item montado tão vindo as Informações certinhas aqui né vamos ver aqui na lista e tem quatro aqui então a gente tá pegando data aí de data prescrita data P falada da terra escrita nula da terra falada nula Beleza então vamos clicar aqui e colocar uma resposta olha só que bizarro pessoal eu cliquei aqui na resposta e ele já veio com uma resposta do legal e são teste de atualizada que era a última que a gente tinha clicado certo então só para a gente garantir aqui a gente vai precisar Também

fazer uma coisa já vou fazer isso agora antes que a gente esqueça zerar os campinhos empute assim que a gente clica no item da lista independente dele puxar ou não depois esses dados Então a primeira coisa que fazer antes de qualquer coisa é zerar os campinhos input para a gente não ter esse tipo de bizarrice aí né Porque aqui só se ele for nulo que ele tá alimentando né diferente de nulo que ele Tá alimentando aqui os campinhos certo você vem vazio ele vai aparecer o que tinha antes beleza na próxima rodada você já vai

funcionar Mas vamos fazer o teste aqui para ver se vai dar certo Deixa eu só apagar esses que estão aqui porque o ID em cima em teoria Tá certo né Deixa eu ver aqui na aba aplication A nosso local storge ó ele já tá selecionado e tem quatro certinho vamos ver aqui esse tem quatro Então qual é a sua idade eu não sei ao certo então vou Clicar no de baixo vou pedir para ela falar aqui eu não sei ao certo beleza vamos clicar em salvar para ver se vai dar certo agora né salvar salvo

beleza vamos ver se atualizou o nosso banco aqui e aí não atualizou o nosso banco isso que eu tô achando engraçado pessoal quando a gente faz um novo ele não tá atualizando aqui embaixo Fazendo a nossa atualização da nossa tabela quando é um algo novo que a gente fez deixa eu ver o Que que pode ser clicamos no item da lista clicou nos salvar respostas vai atualizar tabela aqui deixa eu ver aqui que que a gente está fazendo recuperando o ID pegando o input resposta escrita e resposta falada transacionando com o nosso banco então vamos

tentar fazer uma coisa diferente aqui pessoal em vez da gente dar um listar memórias aqui para atualizar a lista a gente pode pedir para atualizar A página inteirinha atualizar a página que dessa forma eu acho que fica mais 100% sem problemas né a gente já usou o commandinho para atualizar a página aqui mais para cima vamos achar aqui que eu me lembro que a gente já usou esse recurso aqui deixa eu achar aqui onde a gente fez eu atualizar a página é esse aqui ó Happy views Men holter refresh page né então vamos fazer isso

aqui também então clicou aqui em Aqui atualizar a página Vamos pedir para ele atualizar aqui então clicou no botão para salvar Vamos pedir para ele atualizar página para ver se vai dar certo isso daqui vamos ver se vai funcionar de novo vamos rodar aqui corda valor Android vamos fazer esse teste aí vamos lá então né Vamos tentar ver se vai dar certo acessar memórias beleza vamos adicionar um novo item Primeiro vamos ver qual é a sua idade né Eu vou colocar aqui novamente eu não eu não sei salvar beleza de um salvo Vamos ver se

agora ficou certo aqui nas nossas memórias aqui ficou certo vamos criar um novo então vou adicionar conte uma piada né o clássico conte uma piada beleza Vamos colocar agora é hahaha vamos ver se ela dá uma risadinha ou só fazer hahaha para ver se ela vai Teria que fazer assim ó vamos ver bizarro né pessoal vamos ver se deu certo aqui no banco pelo menos a pergunta Tá aqui vamos salvar cliquei no salvar vamos ver se deu certo salvo vamos ver aqui no banco e por algum motivo Ele não salvou também mas que porcaria hein

pessoal que porcaria deixa eu ver aqui que que talvez tá dando errado é pepviews Hooter Flash page eu acho que Quando a gente salva a pergunta gravar pergunta deixa eu ver se a gente tá em algum momento a salvar pergunta se a gente tá fazendo alguma algum listar nesse ponto aqui eu tô achando que o problema ele está na memórias aqui ó listar memórias eu vou pedir então para em vez de ele estar memórias aqui na nossa linha 238 eu vou pedir para ele dar um refresh na página que daí faz a mesma coisa né

quando se Atualiza a página ele Obrigatoriamente lista novamente então atualizar a página para ver se vai dar certo o último testezinho se não der certo essa parte aqui a gente continua é o que a gente precisa fazer e depois no final a gente tenta ver o que que a gente pode resolver disso daqui beleza são as coisas que acontecem no desenvolvimento estão mostrando para vocês a realidade aqui de fazer um projeto na prática construindo junto com vocês isso aqui Que é interessante porque é o tipo de coisa que é um conteúdo que você não acha

na internet pessoal o pessoal não mostra os erros o pessoal não mostra as dificuldades os problemas é que é um projetinho que a gente tá fazendo para diversão mas no dia disso também acontece com a gente né então é legal até a gente ter esses probleminhas para a gente ir mostrando aí o que que a gente pode fazer para resolver né acessar memórias [Música] Vamos colocar mais alguma coisa aqui adicionar funciona por favor funciona por favor ah eu tô escrevendo aqui eu tenho que falar né funciona por favor funciona por favor vamos salvar salvo beleza

vamos fechar aqui funciona por favor apareceu lá o aí de 6 vamos ver se salvou no nosso banco Funciona por favor vamos clicar aqui resposta escrita vou funcionar agora clicando de baixo vão funcionar agora eu espero que sim né Vamos clicar aqui no salvar para ver clicamos no salvar deu salvo vamos ver se salvou no nosso banco aqui aí agora salvou Finalmente deu certo né então acho que tinha que refrescar a nossa página vou ali no conte uma piada também salvar porque antes não tinha salvo ficou um buraco aqui né Conte uma Piada rá rá

eu tô rindo à toa hahaha eu tô rindo à toa vamos ver Mas que coisa mais linda vamos dar um salvar Vamos ver se agora só vou aqui vamos no nosso banquinho e ver ah tô rindo à toa aí beleza tô rindo à toa mesmo porque funcionou essa desgraça que já tá ficando nervoso aqui que não tava indo né ok pessoal então Teoricamente aqui a gente já tá com o sistema de fazer a pergunta e salvar a resposta inclusive atualizar a resposta se a Gente precisar porque é só você clicar ali trocar o que tá

escrito então na mesma pancada a gente já salva e já atualiza tudo a mesma coisa certo a gente tem lá o botãozinho lá em cima também para limpar o nosso banquinho né aqui na verdade ficou até uma bagunça aqui em cima nesse nosso na nossa lista de um monte de teste né mas antes ainda de apagar o nosso banquinho a gente vai precisar fazer o seguinte a gente vai precisar que quando Clique em cima de um Item da tela da lista e segure esse item aqui ó então tipo assim vamos no teste eu vou clicar

e ficar com clique segurado em cima desse item da lista entendeu o clique segurado o nome desse evento de quando a gente coloca um clique segurado no item no Framework Seven se chama Tap Hold é para a gente poder fazer com que um elemento seja acionado quando clique é mais longo um clique simples ele vai abrir o pop-up que foi o que a gente Colocou nele agora se a gente segurar o clique em cima do item um pouco mais longo ele vai fazer uma outra evento E aí a gente vai dizer que quando segurar o

clique em cima desse item aqui a gente segurar o item um pouco mais longo aí a gente vai abrir o pop-upzinho para a gente poder fazer o deletar para a gente excluir esse registro certo vai perguntar você quer deletar esse item da lista e tal para a gente poder deletar Um item da lista específico Beleza então vamos fazer isso ou deletar e também um outro detalhe né pessoal a gente tem que também atualizar a pergunta porque aqui a gente criou a pergunta adicionou uma pergunta mas o atualizar a pergunta a gente não tem nenhum momento

Então se de repente eu fiz aqui meio errado aqui é o a minha pergunta que eu quero fazer salvar eu não tenho jeito de atualizar né então a gente pode fazer que quando segura o clique no item da lista ele vai abrir Uma janelinha perguntando assim o que você quer fazer aí a gente pode colocar atualizar pergunta ou deletar item E aí conforme que a pessoa escolhe a gente vai fazer que aquilo aconteça beleza Então vamos fazer isso para a gente finalizar aqui a nossa Assistente vai ficar filé vai ficar bem legal vai valer a

pena todo esse esforço que a gente está fazendo aqui para criar junto e desenvolver junto essa assistente Então vamos lá então a primeira coisa que a Gente tem que fazer lá na nossa holter.js que é onde a gente tem aqui as chamadinhas do aplicativo para o Primor que serve e tal a gente vai passar um outro parâmetro aqui depois onde a gente tem aqui o painel que o pai na sua IPTU Apesar de que a gente não tá usando aí o painel né nesse nosso aplicativo a gente pode passar aqui um outro parâmetro que se

chama assim ó touch você põe assim touch 2 pontos aí você abre aqui o objeto e escreve tep Road com H Maiúsculo assim até Up Road como true Então você tá ativando aqui a opção do tep Road que é o touch que é quando você clica e segura ele vai acionar algum evento certo e aí olha só que que a gente vai fazer então eu coloquei aqui tem que colocar uma vírgula depois aqui do touch né também tem que colocar uma vírgula seguindo o mesmo padrão dos outros aqui senão dá errado agora a gente vai

fazer o seguinte aqui na nossa rota de Memórias a gente pode fazer o seguinte a gente pode fazer isso até lá embaixo a gente pode fazer assim quando segurar o clique na verdade não pode ser aqui embaixo não tem que ser aqui logo abaixo da onde a gente faz a montagem da lista deixa eu achar aqui onde a gente tem a nossa montagem da lista que a nossa lista dinâmica Então tem que ser feita aqui dentro então tá aqui a nossa montagem da lista então Aqui embaixo a gente tem clicou no item da lista beleza

Fecha aqui aqui eu vou fazer assim ó clicou clicou e Segurou o clique E aí a gente vai fazer o mesmo que a gente tem aqui do item link é um clique é basicamente a mesma coisa eu vou copiar todo esse nosso evento aqui vou colar aqui embaixo clicou e Segurou o clique só que olha que interessante aqui no evento Então Item link que é um item da lista ou aqui você não vai usar o One click aqui você vai fazer o evento chamado tep Road certo então no item no item link que é um

item da lista Quando eu fizer um tephold quando eu segurar o dedo em cima do item o que que eu quero que aconteça certo então eu posso apagar aqui esses horários Campus imput você quer não preciso recuperar os itens da lista até Acho interessante eu vou deixar aqui isso por Enquanto esses do de baixo aqui eu vou apagar tudo isso aqui que a gente não precisa até aqui o foco no campinho beleza até aqui pagar então recuperar os itens da lista não tem problema isso a gente pode até acabar usando então só para a gente

não ter que apagar vou deixar assim por enquanto certo mas eu vou querer que faça o seguinte eu vou querer que crie aqui uma janelinha especial um dayalogo com opções para a Gente escolher que é a opção de editar a pergunta ou de deletar o item Então como que a gente pode fazer isso você pode fazer um eventinho que chamado assim app.day alugue ponto cliente certo esse método aqui na sequência você pode fazer o ponto Open que já é para ele abrir e aqui dentro do cliente a gente vai passar os parâmetros que a gente

quer que tenha dentro desse nosso dayalog aqui que é a dayalog é aquela janelinha que aparece certo então aqui dentro eu Vou colocar os seguintes parâmetros o primeiro parâmetro que nós vamos passar aqui é o parâmetro title então aqui é o título que vai aparecer na nossa janelinha né então eu vou colocar aqui ó é o seguinte título selecione uma opção Beleza então esse vai ser o primeiro parâmetro o segundo parâmetro que nós vamos passar é o texto que vai vir no miolo da janela então teste aqui eu vou colocar assim escolha uma das opções

né Então na verdade aqui no Titan fica Melhor a gente colocar assim opções escolha uma das opções abaixo dois pontos e agora a gente vai criar os botões que vão aparecer nessa janelinha então a gente pode por os parâmetros aqui buttons dentro desse botão se a gente cria um arrai né então com colchetes aqui e dentro desse Areia a gente vai fazer aqui os nossos botõezinhos primeiro conjunto de Botão então eu faço aqui um objeto e aqui eu passo os parâmetros Então olha como é Que fica boa Tom os dois pontos abrir e fechei colchetes

e aqui abrir fechei Chaves e aqui eu vou passar os parâmetros desse primeiro botão que vai ter na nossa janelinha o texto dele vai ser atualizar Pergunta a gente pode colocar que a cor desse botão vai ser Blue a gente pode colocar assim azul né Blue e aqui a gente pode colocar o evento de um clique o que que vai acontecer quando ele for clicado então ou um clique a Gente pode fazer uma função funcho o que que acontece se clicar nesse botão aqui agora a gente pode pegar copiar essa chavinha aqui e colocar mais

um botão então aqui eu vou colocar uma vírgula e colocar mais um outro botão aqui esse outro botão é deletar esta memória deletar essa memória inclusive aqui a gente pode colocar no início né um ícone MDI MDI delete que é uma lixeirinha Do material design icons botar o íconezinho de deletar né então a gente tem a opção de atualizar pergunta o que que acontece se clicar e aqui no deletar essa memória Vamos colocar rede aqui para ver se dá certo né então quando clicar no botão atualizar Pergunta a gente vai ter que fazer algum mecanismo

para a gente poder atualizar ela e aqui no deletar essa deletar essa memória a gente vai ter que fazer um mecanismo para poder deletar vamos ver Se funciona isso até agora para vocês verem que a gente fez Vamos dar um corda no Android ver isso rodando acessar memórias Beleza então todos os nossos dados aqui vamos clicar e segurar o clique no primeiro item aqui eu vou clicar e segurar ó que legal então quando eu clico e seguro ele me dá aqui as opções A escolha é uma das opções abaixo Então a gente tem aqui o

atualizar e o deletar né na verdade Assim não ficou muito legal né porque ficou meio assim que não dá para ver o que tá escrito a gente pode tentar colocar um terceiro botão porque quando a gente coloca três botões aí ele fica com uma lista mais em pé assim e aí dá certo eu acho que tem um parâmetro que a gente usa que que é para ele ficar com os botões em pé vertical né É mas vamos colocar também um terceiro botão aqui que é de Cancelar Para a gente deixar uma opção de cancelar que

a gente não colocou nenhuma opção de cancelar né então vou copiar aqui ó colocar mais um botão Vou colocar aqui o botãozinho então aqui cancelar Vamos colocar aqui a cor vai ser Grey que é cinza né E aí aqui ó depois desse Away eu olhei ali na documentação só para a gente não perder tempo tá pessoal a gente já vai direto aqui ó você pode colocar parâmetro vertical buttons com b maiúsculo e determinar que isso é truque Daí ele vai colocar os botões em pé assim dessa forma vai ficar bem melhor né então agora a

gente tem um botãozinho cancelar também vamos rodar só para ver como é que isso ficou então acessar a memórias Então vamos clicar e segurar nesse primeiro item aqui cliquei e segurei ó lá aí sim ó show de bola então escolha uma das opções abaixo atualizar pergunta deletar essa memória e o cancelar cliquei aqui no cancelar ele fecha Porque não acontece nada né então Segurei o item tem a opção de atualizar pergunta deletar memória né aqui no atualizar Pergunta a gente poderia também para seguir o mesmo padrão do de baixo colocar um íconezinho nele né para

ficar mais bonito mas enfim funcionou é esse é o dayout quando a gente cria ele com esse padrãozinho que a gente fez aqui né de criação do Indaial que você vê que legal como frameworkswagen te dá uma opção de você realmente construir da Forma que você quiser seu aplicativo então eu criei a minha janelinha com os títulos com os botões que eu quero que apareça né bem legal mesmo e agora a gente vai fazer então o que que acontece quando realmente clicar nesses botões aqui então eu só vou colocar um ícone também nesse outro aqui

da atualizar a pergunta colocar um aqui de refresh que é de atualizar só para ficar melhor né Então beleza vamos primeiro começar com o deletar a memória porque daí fica mais Fácil depois a gente faz o atualizar pergunta tá então no deletar memória quando clicar aqui no evento de deletar essa memória a gente pode aparecer um dayalogo de novo um app da elog que é de confirmação e aqui a gente pode dizer assim ó Tem certeza que quer deletar a memória a memória dois pontos ou dois pontos aqui aí a gente pode passar assim aqui

em cima a gente recuperou o ID do item E também qual que é a pergunta Escrita né então a gente pode pegar aqui o ID do item E também o item pergunta escrita olha só que legal vai dar para recuperar essa informação aqui embaixo então tem certeza que quer deletar a memória aí eu vou colocar assim em ao strong aquele aceita HTML tá então vou colocar assim strong daí vou concatenar aqui com a nossa variável que do id então vou fazer assim o ID espaço Qual é o id e aqui eu vou colocar também E

a pergunta escrita dois pontos Vamos fazer assim aí de dois pontos e a pergunta escrita qual que ela é então aqui a gente vai concatenar aqui com a mais a item pergunta escrita que a gente tem ali em cima a gente recuperou tem certeza que quer deletar a memória a gente tá mostrando qual que é o ID Qual que é a pergunta escrita aqui a gente vai fazer Fechar o strong né que é o ali e aqui ponto de interrogação que é uma pergunta e aqui a gente pode fazer qual que vai ser o título

desse daí áure de confirmação então a gente pode colocar assim também é confirmação tudo maiúsculo confirmação beleza e aqui por último a gente pode fazer um callback do que que vai acontecer se a pessoa der a confirmação né Se ela disser que sim mesmo que ela quer deletar então se ela se tiver um Callback de sim né a gente vai fazer uma função aqui de Call Back se ela quer realmente que delete aí a gente vai chamar uma função que a gente vai chamar de deletar memória beleza vou chamar uma função chamada deletar memória esse

deletar memória a gente ainda não fez então vamos criar lá embaixo essa função eu vou criar aqui embaixo a function chamada deletar memória nessa função deletar memória que que a Gente vai fazer a gente vai fazer um DB ponto transexion nessa translection a gente vai chamar a função deletar aqui a gente vai ter aqui o Call Back e o que que acontece é erro aqui o callback do que que acontece se der certo aqui vamos fazer aqui né só ajeitar aqui para ficar mais fácil da gente enxergar então aqui o erro aqui a gente pode

dar um app ponto da ponto alerte erro ao deletar item é que ele vai mostrar qual que foi O erro e aqui se der certo a gente vai dar um console.log sucesso ao deletar item da tabela Ok aquele tá invocando uma outra função chamada deletar então a gente pode fazer aqui ó essa nossa função deletar função deletar vamos pegar aqui um trans Action TX Então a gente vai fazer um tx é ponto Execute SQL e aqui a gente vai dar o comandinho para a gente executar Alguma ação na nossa tabela do banco aí a gente

vai fazer o seguinte comandinho delete delete from memórias que é o nome da nossa tabela né deletar da memórias onde o ID onde o ID for igual e aqui a gente tem que passar Qual que é o ID que a gente quer né a gente vai precisar recuperar esse aí de pegando do local Stories quando a gente faz o eventinho lá de tep Road a gente também tá pegando e salvando deixa eu achar aqui ó vamos achar aqui onde a gente tem o nosso top Que beleza ó quando a gente faz o Trap Hold ele

tá pegando do item Qual que é o data aí de deles salvando no local storge né a gente vai ter que recuperar esse valor aqui também lá no Nossa função de deletar para gente saber qual que é o ID que a gente quer deletar então aqui dentro a gente vai fazer assim vai aí de vai ser igual local Stories a gente vai fazer um get item para pegar qualquer a chave do item que a gente quer deletar e aqui a gente pode Passar assim que a gente quer com cateternar né com esse ai dia aqui

então olha só como é que fica né eu tô começando com aspas Simples então aqui ó quando eu vou passar uma string eu tenho que usar aspas duplas aí coloca uma aspas simples só para dizer que fechou até aqui o que a gente escreveu fiz uma concatenação no JavaScript para colocar essa variável aqui dentro coloquei aspas simples de novo para dizer que eu quero mais um texto aspas duplas só para Fechar e aspas simples novamente para fechar todo esse valor aqui de dentro certo Às vezes tem que cuidar porque a gente pode se conf aqui

com aspas simples e aspas duplas aqui na colocação de concatenação de palavras né Beleza então a gente tá mandando ele deletar o delete da nossa tabela memórias o ID aqui que a gente quer né feito isso então o que que a gente vai querer que aconteça né se ele fez a que o commandinho da gente deletar a gente Pode pedir para novamente dar uma atualizar a página né então a gente pode pegar aqui um refresh page e se der certo né a gente pode fazer dentro do callback de deletar memória que se der certo para

ele atualizar a página para a gente ver se vai dar certo esse daqui ok beleza pessoal então vamos ver se vai dar certo aqui a nossa opção de deletar o nosso item da nossa tabela vamos rodar esse aqui corta o valor Android Acessar memórias Ok vamos deletar esse primeiro aqui o nosso teste né então vamos selecionar ele selecionei segurei opções escolhe uma das opções abaixo Então vamos escolher a opção deletar essa memória vamos clicar aqui para ver o que que acontece confirmação show de bola tem certeza que quer deletar a memória aí de um e

pergunta escrita teste beleza é isso que a gente queria para a gente saber O que que a gente quer deletar eu tenho opção de cancelar e Ok eu vou dar um ok para a gente ver se vai sumir do nosso banco de dados vou dar um OK Opa já assumiu o item da nossa lista aqui se a gente for ali no nosso banco vamos ver atualizei aqui beleza removeu o nosso registro legal show de bola funcionou e é importante destacar pessoal que cada dia é sempre único então quando Eu deleto o aí de um ele

vai começar do 2 para frente Isso é Normal tá porque a gente não pode ter aí de repetido então para garantir isso quando você apaga o registro aquele registro não é mais utilizado então se eu apagar se o 5 vamos fazer lá o apagar o cinco Conte uma piada vamos ver ó selecionei deletar essa memória tem certeza OK removeu Beleza já tá dois três quatro e seis vamos ver aqui no nosso banquinho ó lá removeu aquele tem lá muito legal estamos conseguindo deletar Um item individual agora da Nossa lista legal e aí o que a

gente precisa fazer agora pessoal é quando a gente selecionar aqui Um item e clica Vou atualizar pergunta por enquanto não acontece nada quando eu clico na atualizar Pergunta ele só fecha porque a gente não colocou nenhum tipo de evento O que que a gente vai querer fazer quando faça isso clicou em atualizar Pergunta ele vai ter que abrir o nosso pop-up aqui de pergunta certo e a gente pode Trocar o nosso botão lá embaixo tá vendo que é um salvar Verde a gente pode trocar ele por um salvar laranja por exemplo ou atualizar é alguma

coisa assim e a gente já preenche esses campinhos aqui ó título da pergunta eu quero assistente entendeu a gente já preenche com o que a gente tem salvo do banco certo para que a pessoa possa trocar o que ela quiser quando ela clicar em salvar aí a gente vai querer que atualize na nossa tabela Ali essa informação Beleza quando a pessoa clicar no cancelar lá embaixo a gente tem que resetar tudo né esse aqui é o nosso pop-up ele tem que voltar como era antes Todo resetado certinho Então na verdade a gente pode fechar o

pop-up né quando clicar no cancelar Pode pedir para fechar o pop-up atualizar a página porque daí ela já volta Zerado com o botão original certinho né vamos fazer isso aí então para a gente concluir essa etapa aí também né então quando clicar Aqui na atualizar pergunta olha só que que a gente vai fazer a gente vai fazer o seguinte a gente vai ter um botão oculto aqui na nossa memórias lá no nosso pop-up resposta ou melhor nosso pop-up pergunta aqui ó a gente tem o nosso Fabi Button left que fica à esquerda que é o

salvar perguntas certo eu vou fazer um outra uma cópia dele aqui embaixo um outro botão FAB desse só que eu vou fazer esse seu culto então eu vou colocar aqui ó display None Eu vou colocar aqui que ele não vai aparecer normalmente Tá eu vou chamar esse daqui eu vou chamar esse aqui com aid de chamado Fabi atualizar certo e aqui no de cima eu vou colocar com AIDS salvar então a gente tem o salvar que é o original e a gente tem o atualizar que é da atualização e aqui eu vou fazer assim atualizar

o ID desse botão vai ser atualizar pergunta beleza e eu vou até mudar aqui qual que é a cor dele Eu vou colocar em vez de Sucesso outline eu vou colocar aqui o infoot Line que seria um azulzinho para a gente só saber que ele é diferente porque eu salvar aqui de cima é é verde né E esse aqui vai ser azulzinho a gente pode até trocar aqui qual que é o nosso ícone eu posso colocar aqui o refresh para a gente saber que é o atualizar então o que que acontece quando a gente clicar

no botão atualizar Pergunta a gente vai querer que o nosso aqui sabe Salvar nosso Fábio salvar ele desapareça então eu vou colocar add Class display None que é para ele ficar desaparecido vou adicionar essa classe eu acho que ele colocou lá em cima o Don 7 percebi isso naquela hora ali né mas que coisa sempre faz isso né então o nosso botão salvar desaparecer o botão salvar vamos fazer aparecer o nosso botão aparecer O botão de atualizar então o nosso Fabi atualizar aqui ó Então a gente vai remover a classe display None e movec Class

display novo para que Ele apareça aquele botão lá certo aí lá nos campos imput que a gente tem ó a gente tem pergunta entendida e o pergunta escrita então nosso campo input pergunta escrita a gente pode fazer o seguinte deixa eu copiar esse aqui vou colocar aqui o campo de pergunta escrita deixa eu pegar aqui pergunta escrita Que é o valor que a gente vai querer que ele receba vai ser o valor que a gente recuperou aqui ó do item pergunta escrita Então vamos fazer assim alimentar os campos do pop-up e aqui a gente vai

colocar também o pergunta entendida vai ser aqui o item pergunta falado Então alimentamos os campinhos e agora vamos pedir para abrir o pop-up então a Gente pode fazer assim abrir o pop-up de pergunta a gente faz assim app ponto Open E aí aqui a gente pede para abrir o nosso pop pergunta beleza vamos ver se isso aqui funcionou vamos rodar aqui então vamos dar um código de Android ver se isso aqui deu certo acessar memórias beleza acessamos memórias Então vamos lá selecionar por exemplo Qual é o seu Carro favorito segurei aqui em cima escolha uma

das opções vou escolher atualizar pergunta olá que legal então ele abriu o pop certinho para nós e ele fez ali ó preenchimento dos Campos com que a gente já tem saldo do banco alcical Favorito Qual o seu carro favorito quero que ela entendia e ele trocou o botãozinho lá ficou um botão salvar Azul ali né daquela forma ali como tá ali embaixo a gente na verdade não ficou legal esse Botãozinho azul né mas enfim funcionou aqui agora que que a gente tem que fazer nesse botão atualizar aqui que a gente tem aqui embaixo a gente

vai ter que fazer uma função de atualização do nosso banco desse item que foi o item por último clicado né o nosso último note clicado então a gente pode fazer isso vamos colocar aqui então fazer essa função aqui só deixa eu ajeitar eu não gostei como é que ficou esse botão Deixa eu achar aqui o nosso pop Fábio botão left Salvar arquivo Vou colocar aqui aqui é o Fábio esse atualizar né atualizar esse aqui é o salvar eu não gostei como é que ficou aqui né esse infoot Line não ficou legal eu não me lembro

se a gente fez um CSS separado para ele aqui ó a gente tinha feito né aqui um CSS especial das cores primárias ou não né a gente fez aqui as cores ali legal então a gente pode fazer o warning Né warn outline Beleza então vou trocar aqui eu não me lembrava mais que a gente tinha feito essas classes né então vamos fazer assim warn outline e aqui a gente pode colocar assim seis letras que cabe aqui então atua Deixa eu fazer assim update em inglês que daí fica um dois três quatro cinco seis mesmo a

quantidade de letras que tem aqui aí não quebra o nosso layout aqui embaixo né vou deixar assim update para atualizar Beleza então quando clicar em atualizar Pergunta a gente vai ter que fazer aqui um eventinho para ele atualizar realmente né então clicou na atualizar Pergunta a gente pode usar basicamente a mesma coisa aqui ó do salvar respostas é praticamente igual né Deixa eu achar aqui onde a gente tinha clicou para salvar respostas então a gente pode copiar isso aqui control c E aqui embaixo nós vamos colocar esse daqui vamos baixar lá embaixo ter memória tá

o touch salvar aqui embaixo eu vou fazer assim clicou para atualizar a pergunta então aqui a gente vai ter que só alterar que as informações né então clicou para atualizar a pergunta aqui o ID vai ter que ser o atualizar pergunta que é o nome do botão que vai ser o clique então clicou ele vai pegar qual Que é o ID do local Stories de Beleza então aqui é a pergunta escrita vai a gente vai pegar do Campinho pergunta escrita pergunta escrita e pergunta falada os campinhos aqui se chamam né Deixa eu ver aqui pergunta

escrita e aqui o outro campinho eu pergunta entendida então a gente está recuperando os valores vai fazer uma transexion de atualizar tabela aqui atualizar tabela Pergunta vou mudar aqui o nome atualizar tabela pergunta só para mudar o nome da função atualizar aqui onde a gente tem aqui a nossa P escrita que é da pergunta escrita vai receber aqui o valor da variável pergunta escrita e a nossa P falada vai receber o valor aqui da pergunta falada basicamente igualzinho mesma coisa né pessoal que a gente tinha aqui onde o ID for o ID que a gente

está recuperando lá do nosso local storge Beleza se der certo aqui atualizar tabela ele vai dar um touch salvar aí a gente precisa aqui zerar esses campinhos então vamos zerar esses campinhos aqui pergunta escrita pergunta vamos fechar o pop-up de pergunta e vai atualizar a página beleza é isso aí teoria tá Prontinho vamos ver lá como é que vai se vai funcionar isso aí vamos dar um corda Android para nós acessar memórias Beleza entrou aqui vamos tentar atualizar esse outro item aqui então vou segurar em cima dele atualizar pergunta Abril outro item a lá apareceu

o botão update que é para atualizar show de bola então vou fazer assim outro item atualizado e aqui outro ele tem vamos fazer outro item atualizado beleza trocou ali eu fiz aí o microfone para digitar para ser mais rápido eu vou clicar aqui em update para ver se vai Atualizar salvo Beleza já apareceu para nós na lista aqui outro item atualizado vamos ver se atualizou a nossa tabelinha aqui tem que atualizar só a pergunta escrita e a pergunta falada vamos ver aqui então Ó lá outro item atualizado outro item atualizado beleza funcionou legal então tá

o processo completo aí a gente adiciona deixa eu clicar no adicionar para ver se ele funciona voltou lá o botão de salvar Normal beleza A única coisa que a gente vai ter que fazer pessoal é o seguinte ó que a gente vai ter que corrigir agora né se você por exemplo clica aqui segura por exemplo nesse segundo item vou clicar em atualizar Pergunta ele trocou meu botão para update lá embaixo tá vendo só que se eu clicar aqui no cancelar ele vai fechar o meu pop-up né Então fechou o meu pop-up agora se eu clicar

lá no adicionar lá embaixo a hora que que vai acontecer ele já vai vir com esse Botãozinho do update já com as coisas escritas ali né então eu preciso fazer que quando clique nesse botão cancelar ou no x1 que a gente tem lá em cima que ele reset vamos dizer aqui a nossa página né dá para resetar mais fácil a gente pode simplesmente fechar o pop-up e não refresh na página né só que a gente precisa dar aqui um aí de para esse cancelar e um ID para esse fechar ali para a gente poder ter

certeza de que vai estar fechando né então a gente Pode fazer o seguinte vamos lá onde a gente tem esse cancelar que tá aqui ó cancel eu vou dar uma classe para ele Ó para ficar mais fácil quando clicar aqui em cancel Então vou dar uma classe aqui para cancel por que que eu vou fazer isso porque independente Onde tiver essa classe cancel que a pessoa clicar vai acontecer a mesma função o disparo vai ser com a mesma classe Então vou chamar aqui de cancel tá E onde a gente tem o xizinho do pop-up que

fica aqui ó quer ver a gente tem aqui no nave bar aqui ó ao xizinho Close que eu vou chamar de cancel também chamei de cancel que ir lá nas minhas rotas o que que eu vou fazer eu vou fazer que quando clicar quando clicar nessa classe cancel então clique então qualquer lugar que tiver esse cancer o que que vai acontecer essa classezinha cancel aí eu vou pedir para ele fazer ele fechar o pop-up Pergunta e ele atualizar a página que daí volta do zero de novo não tem todo trabalho né de ficar trocando os

botões aquela coisa toda eles só fecha pop-up e atualiza a página de novo ok beleza aí isso aí já resolve aquele nosso probleminha vamos ver se funciona o Android acessar memórias E agora deu um erro aqui deixa eu ver o que que aconteceu Ah beleza ele adicionou lá aquele Requeire do Don 7 de novo Olha que beleza só para me atrapalhar vamos rodar de novo aqui acessar memórias aí beleza estou para nós vamos clicar aqui no Qual a sua idade selecionar ela atualizar Pergunta aí Abriu lá o nosso update trocou e tal então vou clicar

aqui no cancelo e vamos ver se vai dar certo né Ele tem que fechar o meu pop-up pergunta e tem que atualizar a página novamente porque se eu clicar para Atualizar ele não vai ter problema nenhum cancelar Beleza vou clicar em adicionar ó lá já voltou zeradinho show de bola funcionou se eu clicar lá no x também ele faz a mesma coisa deu tudo certo aqui para nós então é isso pessoal já tá feito cru de completar isso aí para nós né de todos de adicionar os itens de atualizar de colocar resposta e tal agora

a gente precisa fazer a nossa assistente buscar no banco de dados né a informação Conforme a gente for falar na página inicial aqui ó clicando falar ela tem que ver se aquilo lá tem ela conhece aquela pergunta que a gente fez e ela responder interagir com a gente Com base no conteúdo que a gente tem aqui dentro da nossa tabelinha Então vamos fazer isso vamos fazer assistente falar de acordo com o conteúdo que a gente salvou que a gente ensinou ela né para facilitar os nossos trabalhos o que que eu vou estar fazendo eu vou

pegar todo Esse conteúdo que a gente tem dentro da nossa tabela memórias e eu vou sintetizar tudo isso dentro de um único Array onde vai estar todas essas informações Então vão ser várias linhas vários Arrais com um objeto contendo lá a pergunta escrita falada resposta escrita e falada para que a gente tenha vamos dizer assim todo o nosso banco dentro de um único Away dessa forma quando a gente for falar com ela aqui ela pode percorrer esse Away para Verificar o que tem ali de informação e a gente não precisar necessariamente ficar consultando o banco

de dados o tempo todo a gente já tem sempre salvo esse banco aqui de uma forma mais simplificada você já vai ver como isso funciona então vamos pegar todo esse conteúdo aqui e transformar isso tudo num item só eu vou chamar um chamado banco e vou salvar aqui dentro do nosso local Stories essa informação olha só que interessante Então aqui no nosso Memórias lá onde a gente tem a opção de listar aqui a gente tem a listagem do do nosso banco né onde ele percorre lá todas as informações do banco para listar os itens que

vem lá do banco então aqui olha o que que eu vou fazer antes do meu laço for eu vou criar uma variável que eu vou chamar aqui de banco e essa variável vai ser uma Rei vazio então começa vazio aí em cada laço de repetição que a gente tem aqui olha só o que que eu vou pedir Para fazer então vou colocar assim adicionar dentro do Array banco os dados e aqui eu vou fazer o seguinte eu vou fazer o meu banco ponto push que é um métodozinho para a gente colocar um item dentro de

um Array de uma lista né então o que que eu vou colocar dentro desse push eu vou abrir aqui um objeto certo e aqui dentro eu vou passar o que que eu quero de atributos que seja salvo então eu vou salvar exatamente os mesmos atributos que a gente tem aqui ó da Nossa tabela então pesquisa ter falado é reescrita erre falada então vou fazer assim P escrita vai ser igual igual não dois pontos e aqui a gente vai pegar aqui ó dados Rose itens e a gente vai pegar o dado lá da nossa tabela então

aqui eu vou pegar o p escrita também vírgula vamos pegar agora o p falada ter falado e vamos pegar aqui perf falado vamos pegar agora o r escrita e colocar aqui o r escrita E vamos pegar o r falada e colocar aqui o r falar então o que que a gente tá fazendo né quando ele vai montar a nossa listinha dos itens ali que ele vai listar a gente tá pegando colocando dentro de um arranque começa Antes de a gente fazer ali a listagem né ela percorrer a nossa lista começa vazio então ele vai no

primeiro na primeira linha ele vai lá e vai pegar e colocar dentro desse areia esses dados que estão no banco e ele vai Ficar fazendo isso alimentando essa nossa variável chamada banco no final de tudo isso olha o que que a gente vai fazer nós vamos salvar isso daqui essa variável a gente vai fazer da seguinte forma local Stories Ponto 7 item e a gente vai colocar aqui a chave chamada banco e a gente vai salvar esse banco para a gente fazer isso a gente Primeiro vai ter que fazer aqui um Jason string para transformar

esse ar aí num texto né numa string para a gente poder salvar Ela então eu vou salvar aqui a minha variável que na verdade é um banco olha só que legal vou colocar aqui ó salvar todo o banco no local storge então depois de terminar esse laço de repetição for todo o nosso banquinho todos esses itens da tabela aqui vão estar colocados no único Array como se todo banco tivesse condensado no lugar só legal bem interessante e a gente pode inclusive verificar né depois ali na nossa Aplicação se deu certo isso daí ou não vamos

já rodar isso aqui ó para a gente ver o que que vai acontecer Vamos dar um corda no Android e ver como que isso vai funcionar beleza Vamos acessar memórias aqui então primeiro a gente entra aqui no local Stories ó a gente vê que não tem nada só tem aqui o ID item certo que foi o último que a gente clicou Eu vou acessar memórias quando a gente acessar memórias e ele listar os itens do banco ele já vai ter que criar lá dentro do Local storge nosso banquinho condensado Então vamos ver aqui ó acessar

memórias assessor Beleza então aqui abriu a tabelinha do banco tá tudo certinho agora se a gente for lá no local Stories e entrar aqui ó a gente vai ter lá uma chave chamada banco olha só que interessante e dentro dessa chave banco olha só que legal a gente tem todas as listas dos itens que a gente tem lá na nossa tabela por linhas o 0123 com os Itens aqui pé escrita ter falado né e assim por diante a gente pode abrir aqui tem todos os dados Então a gente tem como se fosse todo o nosso

banco dentro dessa chave que a gente batizou inclusive com o mesmo nome né banco aqui para ficar mais fácil agora olha só o que que nós vamos fazer lá na nossa página index que é onde fica a nossa assistente assim que a nossa rota index Abrir né a rota index é aquela rota onde aparece a nossa assistente aqui se a Gente não voltar aqui ó é essa rota aqui né então aqui na assim que começar a rota index a gente vai tentar recuperar esse o valor desse banco de dados que a gente tem ali então

a gente vai fazer assim ó se nós podemos fazer assim se o local Stories ponto get item que a gente vai tentar pegar um item o nome do item que a gente vai tentar pegar é o banco né se o nosso local Story de get item banco for diferente de nulo e o nosso local storge Banco aqui for diferente de vazio se ele for diferente de nulo de vazio O que que a gente quer que aconteça certo então o que que é um banco diferente de nulo e um banco diferente de vazio quer dizer um

banco que existe então se esse banco Existe Nós vamos fazer o seguinte nós vamos criar aqui uma variável Global por isso a gente não vai colocar antes Vargem nem Conte a gente só vai colocar o nome porque isso ela vai funcionar em Qualquer parte do escopo da minha página Então a gente vai fazer uma variável Global Então vou escrever aqui ó banco é igual e aí eu vou recuperar o valor que a gente tem aqui dentro do nosso local Stories de banco tá isso aqui é um texto Então eu preciso converter isso aqui de volta

no Huawei no objeto ali né então eu vou fazer da seguinte forma Jason ponto parça que é o método para a gente converter DJ são Para um objeto né quer dizer um texto de exceção para objeto e Aqui eu vou converter o nosso local Stories e tem banco então eu coloquei dentro de uma variável Global chamada banco o nosso banco quer dizer todos os dados que a gente tem dentro dele e aí a gente pode até fazer aqui uma outra variável Tem banco Tem banco é igual a true Beleza tem banco se não vamos fazer

assim se não a gente vai fazer assim tem banco vai ser igual a falsa quer dizer não tem um banco e a gente inclusive pode dar Aqui um console ponto log dizendo não tem um banco de dados ainda ok Beleza então vamos ver o que que vai acontecer agora quando a gente clicar para falar com ela né então clicou para falar com ela onde é que tá aqui o evento speech para percorrer esse a nossa Whey aqui a gente vai percorrer a nossa variável o banco e aqui a gente vai ter o índice e o

item do nosso banco então aqui agora Dentro desse laço de percorrer o nosso arei quer dizer ele vai percorrer cada um desses itens que vai entrar no primeiro vai entrar no segundo e assim por diante vai entrando nesse nosso banco a gente vai fazer a seguinte verificação podemos fazer assim verificar se a pergunta entendida é igual a pergunta Então o que ela entendeu do clique do botão ali a gente vai verificar se ela é Igual ao que a gente salvou lá no nosso banco então a gente faz assim se a nossa variável pergunta que é

essa variável que a gente tem aqui em cima né que é o que ela entendeu que ela escutou se a variável pergunta for igual a gente pode colocar aqui o nosso item ponto e aí a gente vai pegar um item dentro desse nosso banco que vai ser o p falada aqui ó B falada certo e tem P underline falada então se a pergunta for igual a o item P- falada a gente tem que fazer ela falar aqui o esquema de fala é o nosso TTS speak aqui tá vendo para que isso fique mais prático para

que cada vez a gente não tem que ficar a gente colocar esse TTS speak aqui e tal porque fica meio lento que a gente viu nas outras aulas ali também que ela fala um pouco atrasado olha só o que que a gente vai fazer que legal a gente vai criar lá embaixo de tudo isso aqui uma Função uma funca chamada falar e essa função falar a gente vai passar aqui os seguintes parâmetros Qual é a resposta escrita que ela tem que dar Qual que é a resposta falada que ela tem que dar e aqui também

a gente vai colocar um terceiro parâmetro que é para Qual rota ela tem que ir beleza vamos fazer assim então aqui dentro dessa função Olha que que a gente vai fazer vamos recortar esse TTS speak aqui você deixa eu ver onde é que ele fecha Ele fecha aqui embaixo vou recortar ele Vou colocar aqui dentro do nosso falar Então a gente vai fazer o seguinte quando a gente manda falar a gente vai passar esses parâmetros Qual a resposta escrita Qual é a resposta falada e qual é a rota então aqui nesse primeiro parâmetro aqui é

qual que é a resposta é falada né então a gente vai colocar aqui R falada que é o que que ela vai falar aqui no nosso typed a gente tem que colocar aqui ó no que vai escrever Qual Que é a resposta escrita então vou fazer assim ó R underline escrita Mais e aí a gente deixa aqui aquele símbolo de circunflexo mil que é para dar um atraso de um segundo aqui na hora da escrita certo beleza vamos fazer assim outra coisa nós vamos tirar esse typer aqui de dentro da função de callback da fala

nós vamos tirar ele daqui ó e colocar ele fora que daí ele executa bem mais rápido então aqui dentro ainda da função falar antes Do fechamento dela nós vamos pedir para ele fazer o tapete com a resposta escrita aqui beleza e aqui dentro do callback de sucesso do falar a gente pode colocar assim com silicolog e a gente pode escrever assim a assistente falou dois pontos espaço e aqui a gente pode dizer qual foi a resposta escrita que ela falou só para a gente ter pintado no nosso console legal então a gente criou agora pessoal

olha só que legal isso aqui que interessante a gente Acabou de criar uma função de fala então a gente agora para fazer ela falar basta chamar essa função de fala e passar os parâmetros Então a gente vai fazer fala Falar no caso né Nossa função falar e aqui a gente vai passar o primeiro item que a gente vai passar vai ser o item resposta escrita que é o primeiro parâmetro que a gente fez lá no nosso na nossa função a resposta escrita e resposta falada e rota certo Então beleza o segundo e o segundo parâmetro

vai ser o item ponto resposta falada e o terceiro vai ser Qual é a rota que a gente quer enviar nesse caso aqui a gente não tem nenhuma rota tá então a gente vai passar falsa aqui que é para a gente dizer que não tem nenhuma rota Beleza daqui a pouco a gente já vai estar trabalhando com essa questão de rotas também quando a gente mudar que as questões dos Comandos nativos certo então fazendo isso pessoal que a gente Fez aqui Teoricamente já é para ela entender o que a gente falar buscando lá no banco

de dados certo então só recapitulando que a gente fez aqui agora nesse nesses momentos finais aqui a gente cria uma variável chamada banco onde a gente colocou todos os dados do banco dentro e salvou no local storge lá na página da nossa assistente a gente recuperou esse valor uma variável Global chamada banco quando a pessoa clica aqui para para falar Alguma coisa quando ela dá um start Listen do speech acessar memórias então a gente fez aqui qual é o seu carro favorito Qual é a sua idade né funciona por favor gente no modo desespero ali

então eu vou tentar fazer aqui ó Qual é o seu carro favorito beleza vamos voltar aqui vamos ver se ela vai entender deixar até aqui no console para a gente ver se vai printar alguma coisa Qual é o seu carro favorito olha só que maneiro pessoal funcionou e ainda que printou para nós a assistente falou o meu carro favorito é o Fusca sensacional Qual é a sua idade eu não sei olha como ela Responde rapidinho tá vendo pessoal quase não tem delay na fala dela no que a gente pergunta para ela falar por que que

quase não dá esse delay Porque a gente já tá com todo o nosso banco de dados condensado aqui Nesse nosso local Stories então é muito rápido para ele pegar a partir de uma base de um dia de som aqui de um texto Tá vendo muito mais rápido do que se ele fizesse a consulta no ebsql ele não vai usar Hanna vai usar quase nada aqui para fazer essa consulta então fica bem rapidinho mesmo muito legal né Deixa eu ver uma outra pergunta que a gente tinha ali funciona por favor vamos ver vamos ver aqui ó

Funciona por favor funcionar legal pessoal deu certo show de bola né então ela já tá entendendo aqui o que a gente tá ensinando para ela e agora por último Então a gente vai fazer uma automatização uma melhoria aqui dos nossos comandos que já vem de fábrica né porque antes a gente tava fazendo assim para cada comando que a gente queria entre aspas ensinar ela de fábrica a gente fazer assim If pergunta for igual a acessar memórias faz isso e pergunta for dá para fazer assim dá para fazer desse jeito mas talvez esse não seja um

jeito tão elegante tão prático da gente estar fazendo você ficar fazendo na verdade é que fica um pouco esquisito isso olha o que que a gente vai fazer pessoal a gente vai fazer uma coisa bem interessante nós vamos criar um arquivo separado com os comandos que a gente quer então a gente vai ter isso separado E aqui dentro ele vai verificar se não tiver buscado aqui não tiver encontrado dentro do banco é o que é para ela falar ela vai tentar ver um comando ver se bate com algum comando que a gente já tem pronto

se não tiver nenhum comando pronto nem nada a gente pode até tentar ver se a gente fala que ela não entendeu ou alguma coisa do tipo assim certo mas vamos fazer isso agora então para a gente melhorar essa questão aqui dos Comandos internos dela então aqui dentro Da minha pasta JS eu vou criar um novo arquivo que eu vou chamar de comandos ponto JS dentro aqui de comandos.js eu vou criar uma variável Global também por isso que eu não tô colocando warney olet nem conste tá porque quando a gente coloca só o nome da palavra

assim ela fica Global ela funciona no escopo de toda a aplicação então eu vou dar aqui um comandos é igual vou abrir aqui um Array e dentro desse Away cada item da lista De comandos vai ser um objeto assim ó certo então dentro desse objeto eu vou passar aqui alguns parâmetros que eu vou criar o primeiro é a entrada Então qual que é a entrada de fala do comando então aqui eu vou colocar a primeira acessar memórias certo esse vai ser a entrada aí eu vou dizer qual que vai ser o retorno escrito então o

retorno escrito vai ser assim agora ela vai até dar uma resposta sim senhor ela vai dizer retorno escrito o retorno falado Vai ser também sim Senhor e a gente vai passar aqui também um outro parâmetro chamado rota que é para gente dizer para Qual rota a gente quer que ela vá nesse caso eu vou colocar aqui que eu quero que ela vá para a rota memórias certo que a nossa rota onde a gente tem as nossas memórias Beleza então Acabei de criar um comando esse daqui é um padrão de um comando a gente acabou de

criar um commandinho se eu Quiser dar um outro comando eu copio um bloquinho desse coloca uma vírgula aqui para separar um do outro e coloca outro comando então aqui eu posso dar um outro Comando por exemplo a gente tinha ali né nos nossos exemplos deixa eu ver aqui ó Qual é o seu nome então vou copiar aqui Qual é o seu nome Vou colocar aqui nos comandos Qual é o seu nome e vou pedir para ela falar assim retorno escrito meu nome é Beta E aqui no falado eu vou fazer assim meu nome é Beta

beleza e aqui na rota eu não vou querer que ela vá para a rota nenhuma então eu vou dizer que é falso certo então não tem rota nenhuma é falso beleza Vamos deixar esses dois comandinhos por enquanto aqui dessa forma agora olha que legal o que que a gente vai fazer lá na nossa index a gente pode aqui importar aqui em cima esses nossos comandos Então vamos deixar assim assim que a rota index começar vamos fazer assim importar importar comandos para importar comandos a gente pode usar aqui o mesmo que a gente tem lá na

nossas Hooter aqui que é o get script eu vou pegar aqui e vou importar aqui os comandos ó gatscript então aqui eu vou colocar pasta JS e aqui vou pedir para ele importar o comandos ponto JS Beleza quando a gente faz essa importação a gente Automaticamente já vai ter essa variável Global chamada comandos aqui porque a gente fez a importação Beleza então importamos os comandos e aqui é verificar se tem o banco no local no Stories OK agora aqui embaixo onde a gente tem aqui onde a gente tinha verificar se um comando existe ou não

se tem um comando a gente vai apagar isso aqui e a gente pode fazer assim verificar se tem comando e agora como que a gente vai Verificar Esse comando fazendo basicamente a mesma coisa que a gente fez aqui com banco a gente vai percorrer Só que nesse caso percorrer aqui a nossa lista de comandos certo então a gente vai fazer assim a verificar se teu comando a gente vai fazer um it esse it vai percorrer o comandos da onde que vem esse comandos vem daqui ó comandos tá bom vai percorrer vai pegar o item e

aqui a gente vai verificar se a pergunta que ela entendeu do que a gente clicou No botão bate com o item a gente vai fazer item entrada e tem entrado se bater com o item entrada olha só o que que a gente vai fazer a gente vai pedir para ela falar que na resposta escrita O Retorno escrito a gente fez aqui ó retorno escrito na resposta falada a gente vai pedir para dar o retorno falado e aqui na rota a gente vai colocar o Item rota a gente vai passar esse parâmetro e tem rota Beleza

então a gente passou um terceiro parâmetro lá embaixo onde a gente tem a nossa função de falar que a gente recebe aqui o item Rota na função de sucesso depois que ela falou alguma coisa a gente pode verificar se tem a rota então se tiver rota que foi passado aqui como terceiro parâmetro a gente vai pedir para fazer o quê A gente vai pedir para ele enviar a Gente para rota específica né no caso aqui a gente até apagou que é aquele comandinho de enviar para uma rota né que é o ep views Men holter

navigate que eu já editei botei mais rapidinho aqui para a gente não perder tanto tempo procurando essa informação né então navigate é para gente Navegar só que aqui em vez de a gente dizer especificamente Qual é a rota a gente vai pedir para fazer isso de forma Dinâmica passando aqui qual é a rota que foi passado como terceiro parâmetro da nossa função falar legal então dessa forma a gente especifica aqui ó na nossa no nosso arquivo em comandos Qual que é a entrada o que que ela vai escrever o que que ela vai falar e

para Qual rota ela pode nos enviar Olha só que interessante que legal tudo organizadinho aqui vamos ver se isso vai funcionar então a gente colocou acessar memórias e seu nome aqui né vamos ver se Isso vai dar certo vamos rodar aqui o nosso projeto Então vamos lá o momento da Verdade né acessar memórias olha só que legal pessoal assistente Falou sim senhor deu sucesso a sua memórias e beleza deu certinho aqui para nós vamos ver outro teste Qual é o seu nome legal então ali agora a gente pode acrescentar quantos comandos a gente quiser é

só a gente adicionar aqui mais Item a nossa lista legal dessa forma quanto mais comandos a gente colocar mas a gente consegue fazer ela ficar mais automatizada já com coisas já pré-prontas né e vamos dizer assim ó que a gente quisesse também tem um tipo de ação que é disparado por um comando de entrada mas uma ação personalizada tipo assim como se fosse um algo especial que ela pode fazer com o comando para que dentro desse algo especial você ainda tem a liberdade de Colocar mais ainda dentro dele o que você quiser olha só que

interessante o que dá para fazer a gente poderia criar mais um parâmetro aqui ó chamado especial que vai ser assim ou falso ou vai passar uma função Então vou colocar aqui ó especial como sendo falso também certo agora eu vou criar Mais Um item aqui vou colocar uma vírgula e vou fazer aqui Um item assim por exemplo vamos chamar de enviar E-mail vamos supor que eu quisesse falar assim para minha assistente enviar e-mail e aí a minha assistente enviar seu e-mail para alguma pessoa disparasse uma ação fizesse o que eu quisesse podia ir para um

servidor acessar uma pi e fazer o que eu quisesse fazer então eu vou pedir para quando derem enviar e-mail eu vou dizer assim para quem gostaria de enviar para quem gostaria de enviar e aqui falado para quem gostaria de enviar e Aqui olha que interessante no especial a gente pode criar agora aqui uma função uma função que é o que que vai acontecer quando acionar esse modo especial e aqui no especial a gente poderia fazer o que a gente absolutamente quisesse fazer só para a gente exemplificar eu vou fazer assim um app ponto da real

ponto Alerta só para dar um alertinha na tela uma janelinha dizendo assim disparou o evento Tá mas é só simbólico para você saber que você pode criar o que você Quiser aqui dentro beleza aí olha só que que nós vamos fazer aqui quando ele tá verificando os itens aqui dos Comandos ó verificar se tem comando quando ele vê se tem uma entrada uma pergunta igual uma entrada a gente vai verificar se tem agora se tem o especial ó item especial a gente tá verificando se tem porque toda vez que não tiver ele vai ter que

estar como falso aqui e o if ele só funciona quando tiver Alguma coisa que não retorne falso que for Então se tem uma função ele vai retornar aqui esse eventinho Então se deu certo aqui se tem o especial a gente vai pedir para dar um item ponto especial e vai pedir para chamar esse método agora se não se não tem o item especial é porque é para ele falar normalmente tá é uma fala comum então verificar se a pergunta entendida é igual a pergunta falada Se tiver Comando Especial executar o Comando Especial se não se

não falar se não apenas falar normalmente Legal vamos ver se isso aqui vai funcionar Então vamos ver se vai dar certo momento da Verdade né acessar memórias Isso aqui só para a gente ver uma coisa aleatória né para criar uma uma certa expectativa vamos ver o especial que é o enviar e-mail né vamos ver enviar e-mail Olá disparou o evento tá vendo olha só que legal que show de bola esse daqui né disparou o evento ela não falou nada pessoal porque a gente não mandou ela fazer nada no especial lá né então eu deveria ter

feito aqui ó quer ver ó vamos dar uma olhada aqui nos comandos Aqui dentro do especial eu ainda posso pedir para ela fazer assim ó falar antes de disparar aqui eu vou pedir para ela falar então para quem gostaria de enviar Deixa eu só ver se o primeiro é o escrito depois o falado sempre me confundo aqui primeira escrito depois falar né então a gente vai pedir para ela falar isso aqui ó vou passar diretamente aqui vou pedir para ela falar isso daqui e o terceiro parâmetro é para Qual rota A gente quer que vá

a gente vai mandar falso Beleza então dentro do próprio especial aqui eu pedi para ela falar depois ela vai disparar o evento do Alerta eu disparei vamos ver então se isso aqui vai dar certo então vamos lá o momento da Verdade né Enviar e-mail para quem gostaria de enviar Olá disparou o evento e ela falou para quem gostaria de enviar Beleza então isso aqui é só um exemplo do que a gente Poderia estar fazendo né pessoal é vamos dizer assim as opções são ilimitadas do que você poderia estar criando ou estar incrementando nela por exemplo

ideias do que você poderia fazer não enviar e-mail abrir uma janelinha ou você mesmo falar e pedir para ela enviar o e-mail para fulano de tal qual é o título Ah o título é tal Ah qual que é o texto texto é tal posso enviar sim ou enviar alguma coisa assim você faz ali a lista de comandos Vai fazendo a sequência de retórica e tal talvez você poderia mudar até as cor dos botões conforme o nível de retórica que você tá fazendo aqui do botão falar e aí e para uma API por exemplo no arquivo

PHP que você tenha no servidor e usar um PHP mayler para enviar um e-mail realmente para pessoa outra coisa que você poderia fazer é colocar dentro dela um sisteminha de gel localização por exemplo e falar onde eu estou aí ela pega já localização Latitude Longitude Vai numa P externa para verificar o ponto e ela falar você está na rua tal no tal lugar e assim por diante encontre um restaurante perto de mim aí ela vai faz uma busca tá entendendo você pode fazer coisas ilimitadas outra coisa que você pode fazer o córdova ele tem suporte

por exemplo a o Arduino a essas placas que você pode fazer placa wi-fi usando o Arduino coisas do tipo Então imagina que sensacional que você poderia fazer conecta a tua assistente numa Placa Arduino wi-fi dá um comando de entrada Envia essa informação para Arduino e o Arduino faz alguma coisa automatizada na tua casa igual a Alexa igual essas assistentes que fazem casa que trabalha em casas inteligentes então por exemplo clica ali Ligar máquina de lavar se eu tenho uma máquina de lavar Smart que é controlada por um Arduino wi-fi por exemplo Ligar máquina de lavar

tô Assistente vai lá e liga claro já existe isso no mercado mas você tá Criando você pode programar ela do jeito que você quiser você pode ter uma imaginação bonita aí do que você pode estar fazendo legal muito show de bolas possibilidades então você pode pensar em incrementar essa assistente lembrando que em todas as aulas eu tô deixando embaixo aí o link do projeto completinho para você baixar então do jeito como a gente fez aqui vai estar o projeto aí embaixo para baixar Você pode baixar modificar fazer o que você bem entender Com ele tá

agora se você for usar isso de forma comercial alguma coisa assim pelo menos indica o nosso canal coloca uma referência nossa né porque nós somos os criadores é que originais da Nossa Beta assistente beleza vamos fazer então uma verificação Geral de como ficou a nossa Assistente vamos ver como é que ficou ela então vamos primeiro acessar memórias e vamos fazer ela ficar esquecida né Vamos zerar ela aqui então acessar memórias Vamos zerar ela aqui então clicando lá em cima do Banking de dados lá né cliquei tenho certeza que quer apagar as memórias Ok memórias apagadas

nada mais faz sentido até quero ver que que acontece aqui ó na nossa no nosso banco aqui no local storge Olha ainda continua com as memórias antigas ó a gente precisaria também alterar isso aqui né para quando a gente apagar ele também zerar o nosso local Stories aqui do banco certo então Eu já vou fazer isso agora a gente faz depois ali para a gente concluir Tá bom a gente faz depois é já depois de fazer os testes vamos adicionar aqui uma memória então vamos fazer aqui uma pergunta para ela Qual é a sua cor

favorita vamos dar entrada clicando no microfoninho Qual é a sua cor favorita Qual é a sua cor favorita beleza é sempre bom você repetir umas duas vezes porque às vezes você fala Muito rápido e tal né para você ter certeza ali vou dar um salvar salvou vou fechar aqui tá lá listado vamos clicar para colocar uma resposta dentro então a resposta vai ser minha cor favorita é o azul vou clicar aqui na linha de baixo para ele copiar e vou clicar aqui no microfone no microfone não no Megafone para ela falar minha cor favorita é

o azul beleza E vamos dar um salvar aqui beleza salvou Então tá colocada essa informação aqui né Vamos adicionar mais uma outra coisa Quem vai ganhar a copa a pergunta vai ser assim Quem vai ganhar a copa salvar Vamos colocar aqui Quem vai ganhar a copa não sei não Acompanho futebol aí vamos clicar aqui embaixo não sei não acompanha o futebol que braba não sei não acompanha o futebol beleza vamos clicar aqui em salvar salvei então tem duas aqui que a gente colocou só para a gente exemplificar né vamos ver se ela vai entender agora

então lá na nossa página inicial Qual é a sua cor favorita Qual é a sua cor favorita Quem vai ganhar a copa não sei se ela tá entendendo aqui Qual é a sua cor favorita Qual é a sua cor favorita seria interessante a gente também ver aqui né pessoal no console o que que ela tá entendendo porque agora deu uma bugadinha aqui né não funcionou é eu acho também que tem um detalhe quando a gente clica no voltar para vir para página inicial ele não tá atualizando a página para pegar o banco mais atual Isso

a gente pode fazer aqui na nossa rota memórias ó onde a gente tem o nosso nave bar aqui em cima a gente teria uma rota chamada uma classe chamada Beck que é para voltar só que quando a gente usa essa essa classe back ele volta só da memória que ele tá guardado ali não vai realmente atualizar essa página novamente então a gente tira isso daqui e vai pedir para ele para index quando clicar no voltar lá na nossa rota memórias aí ele vai pegar qualquer um Banco né a gente pode fazer aqui também dentro de

memórias ou melhor no index para a gente saber o que ela entendeu aqui a gente pedir só para dar no console console.log pedir para mostrar o que tem pergunta aqui para a gente ver o que que ela entendeu para a gente tem um retorno que ela entendeu vou fazer assim ela entendeu dois pontos então vamos fazer assim ela entendeu dois pontos e aí vão com Cateter mais com a pergunta que que é o que ela entendeu certo então vamos rodar aqui para ver se isso vai dar certo então vamos lá né para os momentos de

tensão Quem vai ganhar a copa Olá aqui que ela entendeu ela entendeu Quem vai ganhar a copa foi isso que a gente falou é qual é a sua cor favorita e Quem vai ganhar a copa tá Quem vai ganhar a copa e o que que ela entendeu Quem vai ganhar a copa era Para ela ter falado né tá Qual é a sua cor favorita minha cor favorita é o azul Beleza se ela entendeu deixa eu ver aqui que a palavra foi meio a frase talvez foi meio estranha Quem vai ganhar a copa Quem vai ganhar

a copa Quem vai ganhar a copa Quem vai ganhar a copa aí ó pessoal aí um outro detalhezinho de precisão dela ela entendeu Quem vai Ganhar a copa tudo minúsculo porque é tudo minúsculo que a gente fez do lowrcase lá na nossas perguntas do que ela entende né só que aqui no banco que foi salvo repara aqui como é que foi salvo Quem vai ganhar a copa com o q maiúsculo Então na hora da gente salvar essa informação também no nosso banco de dados a gente tem que garantir que tudo se esteja sempre minúsculo para

a gente ter certeza de que não vai dar problema Né então a gente pode também corrigir esse probleminha é primeiro a gente pode ir lá na nossas memórias quando a gente apaga né vamos achar lá onde a gente fez para pagar tudo aqui ó pagar memórias tem certeza que quer apagar memórias quando ele faz aqui a transexion para pagar o banco né nada mais faz sentido e tal aqui a gente já pode apagar aqui também fazendo assim o nosso local Stories local Stories Remove item para remover o item o item que a gente vai remover

vai ser o banco dessa forma a gente deleta uma chave tá então dessa forma apagar apagar o banco do local Stories Beleza já resolvemos isso aqui e também na hora de salvar agora uma memória né de vamos pegar aqui quando ele vai salvar pergunta eu pergunto a escrita pergunta falada aqui a gente pode colocar ó tu lá o Arcade case para deixar minúsculo né para a gente ter a certeza de que vai ser salvo minúsculo essa informação quando a gente salvar a pergunta certo e também na hora de salvar a resposta a gente também vai

ter que fazer isso então aqui a gente tem vamos achar que dá resposta salvar respostas Então a gente vai colocar aqui também o tulular case para deixar tudo minúsculo E aí beleza eu atualizar também ó vou ver onde a gente fez o nosso atualizar pagar memórias deletar atualizar pergunta que a gente também vai colocar o arcase aqui dessa forma a gente resolve esse problema das letras maiúsculas ou minúsculas tá pessoal Beleza então é isso eu acho que é praticamente a finalização do nosso projeto vamos ver se vai dar certo vou adicionar mais aqui alguns itens

vamos deixar ela meio esquecida e vamos Adicionar mais algumas coisas aqui para ela aprender e aí a gente concluiu esse projetinho longo né pessoal foi um projeto realmente que a minha lembrança de quando eu fiz é que era bem simples que eu fiz rapidinho mas na verdade explicando e fazendo junto aqui acaba ficando bem mais longo né do que o normal mas tá bom foi bem Interessante foi bem legal né tenho certeza que para quem tá querendo aprender de verdade isso é um tipo de Conteúdo que você não acha em qualquer lugar né vamos rodar

então vamos lá acessar memórias vamos apagar a memória dela aqui fazer que nem o pessoal do MIB né quando mostra aquela canetinha que apaga vamos apagar a memória dela dá um ok aqui olá que legal As Memórias foram apagadas a gente também apagou o banco aqui do local storge isso foi resolvido nada mais faz sentido é verdade vamos adicionar aqui Então Qual é a sua cor favorita Qual é a sua cor favorita salvar Qual é o seu animal favorito vou fazer assim qual é o seu animal favorito Qual é o seu animal favorito Olha que

estranho pessoal não tá pegando aqui Qual é seu animal favorito É uma bugada que nervosa deixa eu ver aqui Qual é o seu animal favorito é de algum problema ali Qual é o seu animal favorito esses bugzinhos a gente precisa ir corrigindo ao longo do tempo né pessoal deixa eu salvar aqui beleza salvei vamos ver se apareceu no nosso banco os dois ó tudo minúsculo bonitinho Agora sim deu certinho vamos Lá para nossa página inicial e agora vamos ver se ela vai entender Qual é a sua cor favorita eu falei meio esquisito pode ver que

no que ela entendeu aqui ó ela não entendeu certinho Qual é a sua cor favorita em vale de options ó Houve um erro interessante Qual é a sua cor favorita Qual é a sua cor favorita deu algum problema aqui para variar só para a gente não poder encerrar Qual é o Seu animal favorito Então tá vamos tentar esse daí Qual é o seu animal favorito engraçado em vários options error invade options deixa eu ver aqui no nosso banco de dados como é que ficou isso daqui hum olha que engraçado ele não tá com as respostas

salvas aqui por algum motivo não salvou as respostas acessar memórias sim senhor Como salvar aqui a gente não esqueceu de colocar as respostas eu não me lembro a gente só fez a pergunta eu acho que sim pessoal acho que a gente só tinha feito as perguntas o tipo Teco já não tá mais funcionando mais mesmo né então tá então vamos fazer a resposta qual é essa cor favorita minha cor favorita é o azul meu Deus do céu tá esquecendo de colocar a resposta favorita é o azul beleza vamos pôr na segunda aqui qual é o

seu animal Favorito é os coelhinhos Agora sim tinha esquecido de colocar as respostas aqui olha só que tonto pessoal Agora sim apareceu aqui as respostas ou ver lá no nosso banco aqui tá com as respostas aqui também ó aí Aí complica né Se ela não sabe as respostas como é que ela vai responder foi até interessante que a gente vê que dá um erro de entrada inválida ali né bem curioso deixa eu limpar tudo isso aqui ó fazer um Clear só para a gente ver Melhor qual é a sua cor favorita Qual é a sua

cor favorita Agora sim Qual é o seu animal favorito beleza funcionou Então pessoal 100% aí a nossa assistente né a gente tem também os comandos especiais Qual é o seu nome Isso já é algo que a gente deu de comando nativo para ela ela não aprendeu né a gente também pode dar aqui a comandos especiais por exemplo a gente Criou enviar e-mail né Enviar e-mail para quem gostaria de enviar mods para o evento e ela falou enfim 100% que completa a nossa assistente a criatividade agora o limite para o que você pode criar se você

tiver interesse e aprender mais profundamente aí sobre aplicativos essas coisas que a gente usou e tal aprender coisas a respeito de aplicativos tem aí também para você dar uma olhadinha no meu curso online de desenvolvimento de aplicativos beleza aí Embaixo na descrição tá o projetinho para você baixar Espero que você tenha gostado dessa série Espero que você tenha aprendido muita coisa legal um forte abraço e até a próxima