Projeto Assistente: Aula 04 - Banco de Dados e Lógica

é muito bem pessoal agora que a gente já fez a nossa assistente aí reconhecer a nossa voz e também falar conosco né usando o Speech recognition e o texto Speech nessa aula nós vamos fazer com que isso fique salvo no banco de dados local gravado dentro da assistente para que a gente possa fazer consultas no banco de dados e como que ensinando ela né aliás frases que a gente quer tanto das perguntas como das respostas para que a gente possa ter aí armazenado esse entendimento da nossa assistente das coisas que a gente quer ensinar ela

né então nós vamos ver como isso vai funcionar aqui nessa aula então nós vamos fazer o seguinte nós vamos vir aqui na nossa página de memórias aqui memória pronto JS né maiores pontos até que é onde a gente tem aqui o responsável pelo que acontece na nossa rota aqui de memórias né gente está chamando aqui ou memórias. JS aqui de e vai fazer aqui todo o processo de banco de dados né então a gente vai fazer assim banco de dados local web SQL a tecnologia que nós vamos estar utilizando para armazenar os dados de forma

local é o chamado web SQL que é um tipo de banco de dados que fica armazenado no próprio navegador Beleza então para nós abrirmos esse banco para nós como que criarmos esse banco né nós fazemos a seguinte forma nós vamos criar aqui uma variável que eu vou chamar uma variável de de bebê que é de banco de dados e eu vou dar o comando Window e a gente vai usar um método aqui Open data-base dessa forma que Open data-base com o d maiúsculo certo Window Open dessa vez e aqui dentro a gente vai passar as

seguintes informações dentro desse método o primeiro parâmetro que você vai passar é um nome que você vai dar para o banco vou chamar de banco mesmo o segundo parâmetro a versão que esse banco vai ter tudo estranho Então vou colocar um ponto zero e o terceiro é o display é como o banco vai ser mostrado quando a gente tentar ver lá qual que é o nome dele eu vou chamar também de banco aqui tá então a gente usa esses três espaço esses três parâmetros aqui e um último parâmetro é o tamanho desse banco que a

gente vai querer usar né a gente pode fazer assim ó 25 e 60 anos 1 2 3 4 5 6 seria mais ou menos 25 milhões né isso aqui 25 milhões seria referente a bad trouxe a gente converter né 25 milhões de bytes em megabytes Então vamos ver aqui com bytes em megabytes então a gente por aqui ó 25 milhões de bikes vai ser igual a 25 megabytes beleza que é o tamanho máximo que comporta esse tipo de banco aqui Tá certo então nós estamos dizendo aqui que é para a gente criar esse banco Esse

comando aqui que que ele faz ele cria o banco se não existir ou abre o banco e existir certo então com o mesmo comando a gente cria ou abre esse banco de dados Então dessa forma aqui a gente colocou na nossa variável de bebê o nosso banquinho criado simples assim beleza agora que que a gente vai fazer a gente vai criar como se fosse uma transição uma transação com esse banco né Por exemplo quando você vai no banco literal Você precisa fazer uma transferência um depósito lá a gente chama esse de uma transação é fazer

algum tipo de movimentação nesse banco certo então quando a gente trabalha com esse banco ebs.web SPL todo tipo de ação que a gente precisa realizar dentro desse banco a gente chama uma transition ou uma transação você pode fazer a senhora de bebê Então a nossa variável responsável pelo nosso banco vai fazer uma transação uma transvection se escreve assim ó transvection beleza e aqui dentro a gente vai passar o seguinte são três parâmetros dentro de uma transaction certo você vai passar uma função responsável pela transição que vai ser feito e dois callbex o callback de erro

e um callback de sucesso certo então nós vamos fazer aqui ó na nossa transex a gente vai criar uma função chamada criar tabela certo vai seu nome do da função que a gente vai querer ser invocada aqui nessa nossa transmissão é que a gente vai ter aqui uma callback de erro erro mensagem a gente pode até fazer uma função direta aqui né com o chão e aqui erro o que que vai acontecer e aqui a gente pode dar Tem uma função de sucesso então a gente a fazer o quê que vai acontecer se for sucesso

isso daqui certo então gente pode até por aqui para ficar mais fácil da gente enxergar que isso aqui né dessa forma aqui beleza então o que a gente fez aqui a gente solicitou uma transação solicitamos uma transação para criar uma tabela no banco certo aqui é o callback de erro callback de erro e aqui é o callback se der certo né É engraçado porque esse padrão aqui é meio invertido de como geralmente era pessoal geralmente a gente tem o callback de sucesso primeiro e o dia em baixo mas nesse caso é assim mesmo tá pessoal

então callback e sucesso callback tempo Primeiro de erro depois o de sucesso Ok beleza então aqui no callback de erro você pode se tiver algum erro a gente pode pôr um ponto daí alugue. Alert um alerta que a gente vai dar na tela a gente pode dizer assim erro ao criar tabela: espaço e que a gente pedir para mostrar qual foi esse erro beleza então ele vai dar esse retorno para nós em caso de sucesso a gente pode dar um console. Logo não vai dar nenhuma mensagem que vai ser visível na tela só para a

gente saber lá no no console log né a gente pode colocar assim sucesso ao realizar transação a criar tabela Beleza então ok aqui a gente vai fazer então agora essa nossa função criar tabela aqui que é a primeira que tá sendo invocada tá vendo Então a gente solicitou para fazer uma transação que vai estar nessa função criar tabela Então vamos criar agora aqui ó função responsável por criar a tabela no nosso banco então a função a gente vai chamar de criar tabela que a função que tem aqui em cima né a gente pode fazer aqui

função criar tabela Opa o piac criar tabela o Inácio função é onde a gente vai dar os comandos aqui para a gente criar nossa tabelinha certo aqui a gente pode fazer aqui a passagem dos valores do banco a gente pode passar aqui uma o valor qualquer a gente pode fora assim DTX que é the transition executar como se fosse uma ar uma abreviatura aqui dizendo que a gente vai querer fazer a execução dessa transação que a gente fez aqui em cima Então a gente vai fazer assim DX Project execution é seria. Execute SQL com S

maiúsculo então aqui onde a gente efetivamente vai pedir para o nosso banco executar algum comando SQL que a gente vai passar então aqui eu vou passar o seguinte comando eu vou dar um cliente criar tabela Create table é legal você fazer tudo em letras maiúsculas como eu tô fazendo aqui né porque isso aqui é uma série de SQL então padrão legal de você usar quando for essas palavras-chave O que é você que é basicamente igual que a gente usa por exemplo numa SQL outros tipos de bancos baseado em SQL né então cliente table criar a

tabela se não existe então a gente faz isso not exist in e não criar uma tabela se ela não existir e aí a gente pode chamar essa tabela de memórias Então você vai ser o nome da tabela coloquei letras minúsculas porque esse é o nome da minha tabela que eu quero isso aqui o que tá em maiúsculo É o comando SQL então criar a tabela se não existir memórias e aqui a gente vai passar dentro de parênteses agora Quais que são os campos dessa nossa tabela então eu vou colocar aqui o primeiro campo vai ser

aí de eu vou dizer que ele é Inter e intra já é um número inteiro e ele vai ser a chave primária então e Mary Kay imagem certo vou colocar uma, aqui e o segundo vai ser a t a escrita pergunta escrita vai ser do tipo varchar que é texto de 255 caracteres certo a o próximo a próxima coluna da nossa tabela vai ser pergunta falada me esse daqui vai ser a pergunta falada vai ser também um texto aqui a gente pode fazer um teste de 255 pode ser um baixar também né text varchar é

basicamente a mesma coisa nível de caracteres aqui o tem o texto pode ser até um pouco maior né quando você coloca do texto Você pode até 65 mil caracteres né mas como o tamanho máximo é igual para os dois eu vou deixar abaixar em 1255 aqui certo aqui eu vou colocar mais uma coluna Então essa próxima coluna vai ser R de resposta tô com a resposta escrita vai ser um baixar de 255 também o e resposta falada vai ser também quem vai achar de 255 caracteres Ok beleza vamos ver o que que a gente fez

aqui vamos entender né a gente pediu aqui para primeiro criamos o nosso banco depois nós solicitamos com esse nosso banco uma transação mas o que a gente quer fazer dentro de Lima transition e a gente disse que a gente querer invocar essa função criar tabela no momento que começasse a transação E aí se der certo ele vai pode ser de um sucesso que eu realizar a transação criar tabela se der um erro ele vai dizer que não errou criar tabela aqui quando ele chama a função a gente pede para executar essa seguinte comando criar a

tabela se ela não existir Amado memórias dentro dessa tabela memórias a gente colocou passou os seguintes Campos as seguintes colunas que a gente vai ter um campo chamado aí dia que vai ser um tipo inteiro seja vai ser 11 a primária ele acrescenta esse número de forma automática depois nós temos uma coluna com o nome p e escrita que é de pergunta escrita e vai ser ali baixar um texto né Uma Estranha de 255 caracteres no máximo nós temos P falada que a pergunta falada né quer dizer aquilo que a gente é é porque ela

realmente vai está entendendo que a gente falou aqui a gente tem a resposta escrita que é o que vai aparecer na tela quando ela com a Lara e a resposta falada que é a voz que ela vai falar para nós aqui certo então criamos aí a nossa tabelinha aí memórias que aonde vão peças informações que a gente vai querer ter OK beleza então temos a tabela aí já feita agora o que que a gente precisa fazer é a gente inserir as informações dentro da tabela e a gente recuperar essas informações também a nossa tabela certo

beleza para a gente ver se isso aqui funciona o que que a gente vai fazer você pode abrir o terminal e dar um corte do valor Android né para compilar wep no seu celular novamente essas alterações que a gente fez não entra aí espera compilar e abrir o aplicativo aí no teu celular agora que já gerou aqui é o aplicativo que a gente vai precisar fazer é ver esse banco de dados de alguma forma só que acontece esse banco de dados ele tá aqui dentro do celular no aplicativo como é que a gente vai fazer

para enxergar as tabelas Enxergar se funcionou tudo isso aqui que a gente fez a gente vai precisar de bugar o nosso aplicativo rodando no celular quer dizer a gente vai ter que ter uma maneira de ver o funcionamento do nosso aplicativo com ele funcionando lá no Android do lá dentro do celular como que a gente vai fazer isso em você vai fazer o seguinte você vai abrir aí o Google Chrome Então você pode abrir o Google Chrome precisa ser este a cortar pessoal precisa ser o Google Chrome Abra o Google Chrome e você vai digitar

aqui na barra lá em cima Chrome Chrome os: barra barra presta bem atenção como se escreve Chrome né chrome2 pontos Babá e aí você vai escolher essa opção aqui ó Chrome inspect tá vendo ó de inspecionar então Chrome inspect olha essa opção aí tem que estar marcada essas opções ao para descobrir dispositivos USB descobrir é redes né algo E aí olha só que interessante o que que vai acontecer o próprio Google Chrome ele vai conseguir através do cabo USB que tá conectado com o celular e aquelas já nossas configurações que a gente fez nas aulas

passadas né desligar e o Android com o teu computador o teu computador reconhecer e tal que a gente fez na aula anterior ele viu que a gente tá usando uma webview da nossa assistente quer dizer para a gente rodar aqui no Google Chrome o que tá acontecendo lá no nosso aplicativo no celular Alberto assistente então agora a gente pode inspecionar o aplicativo que tá rodando lá no celular olha bom então a gente pode clicar aqui em esperto ele vai abrir uma janelinha para nós e olha só que interessante o que que vai acontecer aqui ele

vai mostrar para nós o que tá acontecendo lá no aplicativo aqui no Google Chrome olha só que interessante e lidar como se fosse aqui uma visão do que tá acontecendo ali no celular e o legal a gente pode estar observando aqui no console os retornos do que a gente tem aqui por exemplo por exemplo que a gente deu um console log né se der sucesso realizar uma transação ele vai mostrar lá no nosso console do Google Chrome aqui para nós o que aconteceu então a gente está inspecionando o aplicativo rodando no nosso celular que é

muito legal o que que a gente vai fazer para a gente acionar isso daqui né que é para criar um banco fazer a transação para criar a tabela e tudo mais a gente precisa estar na rota de memórias que é a rota que a gente está trabalhando aqui né então a gente precisa estar dentro dessa rota então quê que a gente e a gente vai primeiro entrar lá na rota então o que que eu vou fazer eu vou pegar aqui meu celular tocou o aplicativo rodando aqui ó a verdade Aline tá mostrando na tela exatamente

o que tá acontecendo aqui e eu vou clicar aqui para acessar memórias que a gente fez na aula passada acessar memórias a beleza Olha essa sua memórias E aí repara o que que aconteceu ao ele já me deu um retorno um retorno aqui no console dizendo assim ó sucesso ao realizar a transação criar tabela O Retorno que a gente colocou aqui nesse carro bequezinho ó Então quer dizer que foi feita a transition E aí que que acontece como que a gente faz para ver se o banco que a gente acabou de criar Ali você vai

fazer o seguinte aqui nas Abas do Google Chrome você vai ter uma opção aqui ó numa flechinha que você pode clicar e você vai ter uma opção que se chama application tá vendo tem contra aí essa opção aqui application se clica nessa creche aqui e application ele vai abrir aqui para nós uma série de coisas que a gente pode tá dando uma olhada e só esperar ele carregar aqui tá meio lentinha não apareceu para nós daí agora carregou e aqui a gente vai ter em uma dessas águas aqui da onde tá application a gente vai

ter opção aqui ó web SQL é só armazenamento Stories quer dizer armazenamento um banco né E a gente tem uma opção que se chama web SQL que é o banco que a gente está trabalhando você clique aqui para abrir Olha lá tem um banco que a gente criou que a gente batizou aqui né Meu display de banco mesmo então gente tem ele aqui esse a gente clica a gente vai ter a nossa tabela chamada memórias olha só que legal deixa eu só um pouquinho aqui ó para facilitar para gente está enxergando então se eu clico

aqui na tabela memórias olha só que que acontece ele já tem a tabela criada mas ele tá me dizendo aqui ó a tabela memórias está vazia tá vendo de memórias table Lamp néviton tá vazio a nossa tabela não tem nada show de bola assim a gente consegue como que ver o que a gente vai estar fazendo dentro do banco com o nosso aplicativo rodando no nosso celular aqui então isso aí vai ser muito bom para gente durante o processo aqui de desenvolvimento Tô vendo que está acontecendo em tempo em tempo real não porque a gente

vai ter que compilar para a gente ver né Mas a gente pode ir vendo realmente o que está acontecendo como por exemplo aqui no caso do com dava console né que deu para nós sucesso realizar a transação criar tabela criou para nós a tabela numa boa Ok beleza agora que que a gente vai ter que fazer então a só para aproveitar aqui para mostrar para vocês a gente tem aqui dentro da nossa página de memórias o lugar onde a gente adiciona a memória clicando lá naquele botãozinho adicionar lá embaixo Neto quando você clica lá vou

adicionar ele abre para nós aqui uma nova pergunta e a gente tem lá o título da pergunta Tem um botão lá de salvar o botãozinho de gravar uma mensagem e o botãozinho de cancelar que inclusive também encavalado não sei porque ele com o botão de gravar áudio né isso é uma coisa que às vezes acontecem já vou explicar para vocês tá e quando a gente está trabalhando com o Chrome inspect essa inspecionar o aplicativo rodando no celular e a gente vendo no Google Chrome ele acontece Às vezes alguns bugs de layout no teu aplicativo mas

isso só acontece quando você está inspecionando depois quando você roda normalmente ele não vai ter esse tipo de bug aí tá é só quando você está inspecionando mesmo que ele dá umas quebradas um pouco no layout Mas como é só um quebra galho para a gente ver o que tá acontecendo não tem nenhum problema não precisa sair apavorado tentando modificar e o layout do seu aplicativo Beleza então o que que a gente vai querer fazer né a gente vai querer que quando clique ali no nosso botãozinho de gravar áudio ele já escreveu lá o título

da pergunta na verdade a gente vai ter que digitar na parte de cima título da pergunta gravar o áudio aqui vai marcar o quê assistente entendeu E a gente vai ter que clicar nesse botão salvar quando clicar nesse botão salvar então o chave vai ser esse salvar verdinho ali é que a gente vai ter que E aí lá dentro da nossa tabela memórias as informações desses dois campinho Salina então ali e título da pergunta vai ser a pergunta escrita e o que assistente entendeu é a pergunta falada certo então esses dois Campinas que a gente

vai ter que salvar ali então vamos fazer isso agora vamos então encontrar lá no nosso na nossa rota aqui memórias né no HTML a gente tem aqui no norte FAB Button Leste que é o salvar que é esse botãozinho Verde aqui do Canto nós temos o botão Centralizado que que é o botão é da Fale então a gente vai ter que esse azulzinho e nós temos aqui o nosso botão Light a direita que é o nosso cancelar que é esse daqui né que o objetivo dele quando clica aqui no cancelar é fechar né ele fecha

o nosso poupaqui que a gente agora vamos então batizar esses os botões com alguns AIDS certo então o de salvar a gente pode chamar aqui ó vamos dar uma ID para ele de salvar pergunta certo então esse vai ser o agir Desse nosso FAB Button salvar pergunta podemos colocar também naquele nosso Centralizado que é isso aqui ó esse microfoninho que é Wide e é gravar Vamos fazer assim ó gravar pergunta certo então batizamos com dois AIDS a gente tem óleo de salvar pergunta que é o de salvar e o gravar pergunta que é para realmente

a gente gravar o que que é para ela falar certo então nós vamos fazer da seguinte forma aqui e a gente pode fazer aqui para cima você essa parte do banco de dado é bom a gente pode deixar aqui depois a gente vai acrescentando as informações que a gente precisa do banco né então vamos fazer aqui clicou em gravar gravar pergunta primeiro vamos fazer esse né que aquele cara clicou nesse botãozinho azul aqui do meio para ela escrever aqui nesse campinho o que que ela entendeu né então a gente vai fazer assim vamos fazer a

chamadinha Oi de novo ele acrescentou lá em cima hoje quais precisa pode fazer aqui a chamadinha do nosso Eyed gravar pergunta e o evento on Click o que quer para acontecer então quando clicou a gente vai ter aqui o retorno do que que aconteceu então ao clicar no gravar pergunta um clique que quer para acontecer a gente pode ir lá na nossa rota index e pegar lá o exemplo que a gente teve do Speech recognition que é para ela entender né O que que a gente vai falar então a gente pode pegar que do Speech

recognition a chover aqui quando é que termina baixo e não pode pegar toda essa farinha aqui do Speech recognition onde que ela Fecha aqui embaixo outros e depois a gente apaga o que a gente não precisa né e clicou no gravar respostas a gente vai a gente vai ter que pegar essas opções também aqui então vamo pegar tudo isso aqui na verdade né então embaixo control c ou Moana memórias em gravar pergunta control v e agora o que a gente vai fazer aqui ó é fazer o seguinte a gente vai precisar ver onde é que

está aquele nosso campinho que a gente quer aqui quando a pessoa clica aqui Fale o que é assistente entendeu escreva aqui então a gente vai ter que roupa vai ter que dar um título para esse campinho ali também então vamos lá em memórias pouco HTML e encontrar aquele campinho que vai tá aqui usar Shake onde é que ele tá o que 20 tem um texto escrito aí não é aqui é no poupaki né show achar onde é que tá esse popular e o papi papi resposta tá aqui e se for pap resposta ah ah não

é esse aqui é o pap perguntas que a gente vai querer usar por quatro perguntas tá porque a gente tem a esquerda que a gente tem a direita então eu coloquei no lugar errado pessoal Olha só que coisa eu coloquei no poupaki respostas aí diz lá não vai funcionar Então deixa eu tirar esses AIDS aqui o deletaram salvar pergunta e o gravar pergunta também não é nesse poupado tá colocando no Poupatempo errado que o passe resposta esse daqui pessoal é aquele que quando a gente deixa eu cancelar aqui ó eu cancelar aqui no aplicativo é

quando a gente clica em algum deixa eu ver como é que a gente fez eu não me lembro isso quando fica no primeiro aqui que a gente colocou né o a resposta da assistente então aquele salvar amarelinho e esse cancelar aqui então eu tava fazendo no lugar errado ali os AIDS a gente vai querer nesse pap da nova pergunta tá então tem que tomar cuidado isso aí para mim Se você não se confundir então no poupar pergunta que é esse daqui aí a gente tem aqui o botão salvar então vamos colocar aqui o aí de

agora no lugar certo né ó aí de salvar pergunta e ir lá no nosso Centralizado o Eyed gravar pergunta e agora sim então quando clicou lá no gravar Pergunta a gente vai chamar o nosso pudim the Speech recognition e começou a escutar ele vai fazer aqui um laço de repetição para tentar escutar o que que foi falado só que a gente vai ter que colocar isso dentro do nosso campinho ali o que é assistente entendeu Aí se campinho aqui ó pra gente tem aqui o que é assistente entendeu o que é esse campinho aqui que

a gente tem que pegar então que eu vou colocar dentro do campo desse Campo input um AD é Pera vou fazer assim né pergunta entendida pergunta entendida vou colocar esse aí aqui não sei se ele com o nome muito bom né pessoal eu não sou muito bom para dar um sides criativos aqui né Mas vamos deixar aqui pergunta entendido assim depois a gente precisa trocar a gente troca Então a gente vai lá na memória então que ele for escutado nosso Speech recognition a gente vai querer colocar aqui em pergunta entendida certo só para ele inserir

o texto ali dentro isso daqui a gente não vai precisar esses aqui para não entendeu o que tal a gente tava usando no outro esse aqui não vai ter necessidade deixa eu te ver um dia que termina esse aqui para gente eliminar não precisa terminar aqui como remover isso aqui pra gente precisa a única coisa fazer é colocar o que ela entendeu no input colocar aqui no input o chamado pergunta entendida Beleza se der algum erro e vai dar o erro aqui Ok vamos ver se isso aqui primeiro funcionou então eu vou rodar aqui né

Vamos dar um cordova Run Android rodar a no nosso aplicativo aí a essa alteração que a gente fez Beleza já rodou aqui no meu celular aí que que acontece aquele que você tava usando antes na no espectro do Chrome não vai funcionar mais você tem que fechar aquela janelinha vim aqui de novo lá no Chrome spec ele tem que esperar uns segundinhos depois que abrir o aplicativo de novo para ele carregar aqui novamente aí a versão que a gente rodou agora e aí você pode vir aqui no espectro para inspecionar certo você vem aqui no

esperto se ele vai abrir novamente aí você pode estar dando uma inspecionado e eu já vou aproveitar que eu vou Espero que ele espelha a tela também né para a gente ir vendo que tá acontecendo Então vamos lá de acessar memórias E aí sucesso realizar a transação de criar tabela nesse caso é ele deu esse retorno mais ele já tinha criado né então não tem problema vamos clicar aqui em adicionar e agora vamos ver se vai funcionar o botão que a gente fez aqui que o botão da pergunta né então eu vou colocar aqui no

título da pergunta isso aqui na verdade eu nem preciso preencher porque a gente só tava testando o botão aqui então vamos testar o botão que dá fala para ver se vai mostrar lá Oi qual é o seu nome e de algum erro não deu um tentar de novo Oi qual é o seu nome Qual é o seu nome e de algum alguma coisa errada vamos dar uma olhadinha aqui que a gente fez de errado aqui né a gente tem o gravar pergunta que ele como gravar Pergunta ele vai tentar colocar lá em pergunta entendida o

valor aqui ah tá pessoal é isso aqui é muito importante foi um vacilo meu mesmo olha só o que que acontece a gente tem aqui ó é a dentro aqui de do nosso campo pergunta entendido um campo do tipo input tá vendo esses campos do tipo input PSOL eles não são Campos é que a gente usa aqui o método HTML para colocar uma informação esse método HTML a gente usa em Campos de texto com parágrafo se tudo mais campos de tudo tipo input a gente sempre usa o véu é o velo e para colocar algum

valor aqui dentro né então o que que a gente pode fazer a gente pode colocar aqui ó em vez de htm a Band tal a gente pode colocar que simplesmente. Véu Qual o valor que a gente quer que esse nosso campo input receba né Então pergunta entendida. Zeu a gente pede para receber esse texto aqui vamos ter que rodar novamente aqui a nossa aplicação para ver essa alteração então córdova Android vamos deixar ele com Pilar e aí vamos testar ele novamente Beleza já fez aqui bom fechar aquele anterior vamos entrar aqui de novo no Chrome

inspect a gente tem que aguardar uns segundinhos ele recarregar aqui né as vezes se você não espera um pouquinho quando você abra você tá abrindo a versão antiga e aí dá problema né mas aqui acho que já foi vamos dar uma espec beleza Ele abriu vamos lá acessar memórias e entrou beleza vamos clicar em adicionar agora vamos fazer o teste para ver se vai funcionar o teste para ver se funciona E aí ó agora foi então repare aqui que aconteceu agora quando a gente clica no botão Zinho microfone a gente fala ele já marca para

nós para nós o que que assistente Entendeu Beleza então a gente pode colocar um título para ser Qual é a pergunta que a gente vai querer a gente saber o que a gente tem que falar né e em baixo o que ela entendeu o que é realmente o que é o gatilho para nossa assistente Tem algum tipo de resposta né tô fazendo outro teste para ver se deu certo Ah beleza então ele tá colocando no campo limpo Tiago fazendo outro teste para ver se deu certo então ele tá pegando certinho o que é assistente entendeu

Então nesse caso a gente faria assim né como é que funcionaria isso a gente colocaria aqui assim qual é o seu nome por exemplo Qual é o seu nome Essa seria a pergunta real que a gente vai fazer embaixo vai ficar como ela vai entender então Qual é o seu nome Oi ó tá vendo ele entendeu em qual é o seu nome eu poderia até e talvez repetir para ver se fica Aparecida Qual é o seu nome e de qualquer forma a versão final ficou assim tá vendo Então a gente agora teria clicar em salvar

para que ele salvasse essas informações aqui lá na nossa tabela memórias certo colocando lá qualquer a pergunta é escrita que no caso é a parte de cima que ali ocorre só não que a gente digitou embaixo a pergunta falada que é o que que é assistente entendeu ok então vamos fazer isso isso vai ser disparado quando clicar nesse botão salvar aqui né então a gente já deu o nome para ele aqui a gente batizou de a Cadê o nosso botãozinho aqui então da esquerda Salvar esse aqui a gente batizou ele disse salvar pergunta certo então

aqui no memórias e a gente pode fazer aqui ó E aí embaixo disso tudo a gente pode fazer assim clicou em salvar Pergunta tu clicou em salvar Pergunta a gente vai fazer aqui o seguinte a gente vai pedir para ele chamar aqui em salvar pergunta pelo ir né é engraçado que ele fica adicionando aqui esse rir aqui deixa eu tirar aqui vou somar o sal vai pergunta. Aqui ou clique e o que que a gente quer que aconteça então a função o que que vai acontecer se clicar no salvar Pergunta aí nessa parte aqui a

gente vai ter que pegar as informações dos campinhos e a gente vai ter que também colocar lá dentro do banco de dados essas informações né então a gente vai ter que também colocar um Eyed não só para o campinho pergunta entendida é mas a gente vai ter que fazer um campinho também para pergunta escrita né que é esse tampinha de cima título da pergunta então a gente vai colocar uma dia que a pergunta escrita Tá certo então a gente tem pergunta escrita e o pergunta entendida para gente pegar esses valores aqui então quando clicou em

salvar pergunta nós vamos fazer o seguinte podemos criar aqui uma variável chamada P escrita vai ser igual ao nosso Campinho a pergunta escrita que vai ser o ai Dina. Véu que a gente vai querer pegar o valor daquele campinho não estamos pegando e colocando atribuindo essa variável o valor do Campinho EA gente vai ter o p é falada e vai pegar aqui do pergunta entendida Beleza então quando clicou ele a gente tá primeira coisa pegando os valores que estão nesses campinhos input a gente tá recuperando os valores que foram digitados aqui dentro Ok beleza e

agora que eu vi que eu esqueci de deixar o meu mouse aqui de sua casa né o show ativar o meu programinha que faz Monza ficar destacado Agora vai ficar mais fácil de vocês enxergar aqui o meu mouse movimentos na tela ok então vamos ver recuperar esses valores estão vindo desses campinhos recuperamos aqui então recuperar os valores dos Campos input pegamos os valores a e agora vamos fazer aqui o seguinte vou fazer uma validação validação dos Campos não serem vazios né validação para os campos não serem vazios para gente não salvar nenhum tipo de informação

vazia A gente pode fazer assim se a pergunta escrita por igual igual a vazio ou a pergunta falada for embora vazio vazio não só assim né colocar duas "assim a gente quer Brasil então que a gente vai fazer a gente vai pedir para dar um up. Sai áudio. Alert vamos dar uma latinha na tela e dizendo assim por favor preencha todos os campos Tá certo e por favor preencha todos os campos se não quer dizer se aqui por diferente de vazio né quer dizer que tem alguma coisa nesses dois campinhos aí o que que a

gente vai querer que aconteça nós vamos invocar aqui uma transação daquele Nosso Banco Então a gente vai fazer assim beber. Translation vamos realizar uma transação novamente e qual transação que a gente vai querer eu vou fazer aqui um inserir o registro na verdade gente pode abrir a deixar só inserir e aqui a gente pode fazer aquelas funções linhas de callback né A primeira função Zinha é a de erro e a segunda função Zinha é ade sucesso certo e deu certo aqui não vou para o a linha aqui só para facilitar Vamos fazer assim o callback

de erro Se der algum problema então aqui a gente pode pedir para lhe mostrar qual foi o erro que a gente pode por um rap. Dar aula de ponto Alert o erro na transação inserir: e aqui a gente pediu para mostrar qualquer o erro e se der certo aqui nesse nosso callback Zinho se deu certo o callback de sucesso aqui a gente pode pedir para dar um console. Log tá dizendo aqui para nós assim sucesso ao realizar a transação de inserir Ah beleza então vamos recapitular clicou em salvar Pergunta a gente vai recuperar os valores

dos Campos input P escrita e falada pergunta escrita pergunta falada que são esses campinhos aqui estamos recuperando os valores dele tão fazendo uma validação se a pergunta escrita ou a pergunta a palavra for vazio a gente vai dar um alerta dizendo por favor preencher todos os campos se não quer dizer se elas forem diferentes de vazio quer dizer que tem alguma coisa nós estamos pedindo para fazer uma transação com o nosso banco de dados invocando aqui uma função chamada inserir que vai ser a função que vai ser realmente responsável por inserir EA que a gente

tem um callback de erro em um callback de sucesso certo agora que a gente vai fazer precisamos fazer essa função zinha de inserir então aqui fora do Élcio aqui já embaixo né Desse nosso el se a gente pode criar uma função chamada inserir aqui a gente vai pegar lá o transition Execute quer o nome da variável que a gente vai estar utilizando bom então a gente vai fazer um tx. Execute SQL É o comando que a gente quer para executar alguma coisa dentro do nosso banco e o que que a gente vai querer que Execute

é o seguinte a gente vai dar um comando SQL aqui ó insert inserir into inserir dentro de memórias que é o nome da nossa tabela E aí a gente vai fazer o seguinte a gente vai passar aqui dentro de parênteses primeiro Quais são as colunas que a gente quer inserir um valor e depois Quais são os valores propriamente ditos que a gente vai querer passar Então a gente vai fazer assim o nome da das colunas que a gente vai querer passar aqui ó de for ver lá no nosso banco aí gente criou o nome das

colunas ó a gente vai querer pegar a coluna B escrita e te falar dá certo a gente vai fazer assim i p o underline escrita o IP underline falada vai ser o nome das colunas que a gente quer como a gente não quer ter nenhum tipo de problema de misturar que as variáveis né com o mesmo nome das colunas então vou fazer o seguinte aqui nas variáveis eu vou chamar de pergunta escrita e aqui eu vou chamar de pergunta falada Tá pessoal só para a gente ter diferente um pouco ali das colunas porque pode ser

que der algum problema de a gente acabar embolando o nome de variável com nome de coluna E aí fica mais complicada a gente está trabalhando dessa forma então vou fazer aqui ó uso aqui de pergunta escrita e pergunta falada que fica mais fácil da gente ter essa distinção entre não é o nome da coluna da tabela e dos valores né então eu falei que eu quero inserir dentro da nossa tabela memórias aqui eu posso ir Quais são as colunas que eu quero e aqui eu vou colocar Quais são os valores Então faça assim velos Quais

são os valores e aqui eu tenho que passar quais é por isso que eu realmente quero colocar então aqui eu posso fazer da seguinte maneira eu posso colocar aqui "simples aí vou colocar a" duplas vou colocar agora A concatenação da minha variável então aqui eu vou colocar por exemplo pergunta escrita e dentro dos mais pergunta a escrita na verdade dá para fazer uma coisa que vai ficar um pouco melhor pessoal em vez de eu usar aqui ó "duplas olha só que que eu vou fazer vai ficar bem melhor dessa forma vou apagar esse aqui tudo

pagou tá em Execute skelita TX Execute SQL aí aqui dentro eu vou fazer uso do Temple Spring que seriam duas frases Então se dá um shift e vai lá no símbolo de assento né vai fazer assim duas frases então tem duas frases aqui tem que letim e aqui eu vou colocar o seguinte comando insert into memórias inserir dentro de memórias aí é só as colunas então escrita, P falada aí Vou colocar aqui os valores belos vai ser aí entre parentes e aqui dentro agora eu vou passar esses valores Olha só como é que eu vou

passar esses valores eu coloco "simples duas" simples assim e aqui dentro eu vou colocar qualquer a variável que eu quero passar o valor eu coloco aqui o símbolo de cifrão duas Chaves e aqui vou passar o valor que tá aqui em cima que vai ser o pergunta escrita a pergunta escrito aqui eu vou colocar uma, vou colocar mais duas "simples e aqui eu vou colocar o valor ó do pergunta falada eu vou fazer assim e colocar essas variáveis aqui beleza OK então quê que a gente fez aqui a gente deu um comandinho da seguinte forma

inserir dentro da nossa tabela memórias nas colunas b e escrita e falada os valores EA que a gente passou como uma string por isso a gente teve que colocar aqui essas "simples né porque esse aqui é um texto mais frio me passando Quais são os valores das variáveis que a gente recuperou lá em cima que a gente pegou dos Campos input que a gente tinha lá tem no nosso aplicativo que são esses campinhos aqui certo então a gente pediu para inserir lá dentro da nossa tabela então se a transação der certo aqui né o nosso

transex inserir funcionar ele vai inserir dentro da nossa tabela memórias esses valores que estão ali nos campinhos inclusive aqui no nosso callback de sucesso aqui do nosso transex inserida a gente poderia colocar aqui Talvez um post só para dizer né que foi inserido por e depois salvo com sucesso a gente pode pegar aqui um modelinho de Tati que a gente tem aqui na nossa index.hu JS Esse é um post Zinho desse aqui ó e não control c nós vamos colocar aqui no memórias aqui embaixo do console log e vamos fazer aqui o nome diferente vou

chamar de Tati Oi Tati salvar E aí Oi e aí a gente pode passar se os seguintes parâmetros aqui em ai com eu posso colocar o ícone que eu quero usar né então eu vou usar aqui um ícone Eclésia Vou colocar aqui com Amy Lee Amy Lee o contente sei que é um símbolo Zinho de disquete de salvar né vou colocar o ícone Zinho aqui beleza é uma vírgula no texto a gente vai dizer assim né salgo.pt salvou não precisa na verdade nem de no! Aqui e eu posso colocar aqui que a posição Desse nosso

Tati vai ser bem no centro da tela Então vou colocar seu position e vou passar aqui o valor é centralizar os estão sempre a Pode fechar depois dos 2.000 mil segundos ou seja depois de dois segundos ele vai fechar e aqui a gente tem que pedir para ele chamar que o Tati salvar ele abrir certo então se funcionar né ser inserir ele vai dar nesse callback sucesso da nossa transação esse retorno aí Dizendo que foi salvo beleza outra coisa que a gente pode fazer é esses nossos campinhos já ficarem vazios né então esse e esse

de baixo já ficarem vazios então a gente pode fazer o seguinte aqui o pergunta escrita. Véu a gente pode dizer que ele vai ficar vazio então vou fazer assim certeza vaziar os campos Então pergunta escrita. Velho a gente vai colocar assim vazio e o pergunta falada. Véu também vamos deixar ele vazio pergunta escrito eu pergunto entendido esvaziar os campos aqui a gente também pode fazer assim né tô croche para informar o usuário de que foi salvo com sucesso a beleza nós fazemos os campos e tal o show de bola né Inclusive a gente pode fazer

com que depois que faça isso então esse nosso pergunta escrita ele receba o foco também focar para que a pessoa possa digitar um próximo e tem que ter a focar no pergunta escrita né pergunta escrita. A gente pode usar o método. Focus aqui e para que ele possa focar né nesse primeiro campinho Então vamos fazer a recapitulação geral aquilo que a gente fez nessa parte clicou lá no salvar pergunta que é esse botãozinho Verde aqui primeira coisa ele vai recuperar os valores dos campinhos então ele foi lá vai pegar esse valor e esse valor aqui

vai recuperar vai verificar se tiver vazio ele vai dar um alerta dizendo a preencha todos os campos senão ele vai abrir uma transação com o banco de dados chamando uma função inserir que é para inserir certo ela vai ter um callback de erro Se der alguma coisa errada na hora de inserir ou um callback de sucesso mostrando o que que vai acontecer se inserir e essa função aqui embaixo inserir vai colocar lá dentro da nossa tabela memórias os valores dentro da coluna P escrita e falada que a gente pegou dos campinhos quando ele fez essa

inserção aqui né a gente deu um sucesso de callback na na hora da transition ele vai dar no console log sucesso realizar a transação vai dar um toque aqui dizendo que foi só o sucesso várias basear os campos e vai focar no primeiro campinho para que a gente possa começar de novo o ciclo né Beleza vamos ver se isso aqui funcionou vou mudar aqui um código Android compilar no nosso celular e ver se deu certo isso que a gente fez aqui beleza já rodou aqui a nossa aplicativo Vamos abrir vamos fechar essa janelinha aqui abrir

lá no nosso Chrome inspect ou inspecionar aqui beleza eu vou tirar esse branco aqui para facilitar parando ele não seus olhos né E aí nós temos aí a nossa Beta aberto eu vou virar application já deixar aqui para quando a gente acessar memórias a gente já tá verificando que que acontece eu vou acessar a primeira memórias né então vamos Acessar memória eu sou sucesso realizar transação de criar tabela beleza vamos lá na sabe application a gente tem aqui a nossa tabela memórias e e agora vamos tentar adicionar uma memória que tem uma pergunta né então

vou clicar aqui em adicionar eu vou gravar aqui e como fazer a senhora e isso é um teste vai ser a pergunta falada né e aqui eu vou querer vou clicar no microfone porque ela entendeu então isso é um teste beleza mesma coisa foi que ela entendeu Vou clicar aqui no botão salvar e quando clicar no botão salvar a gente tem que ver se realmente ele vai colocar aqui dentro da tabela cliquei no salvar Olá Salmo já deu o nosso cheirinho no centro da tela limpou os campinhos e já focou no primeiro campo certo vamos

lá agora dar uma olhada uma olhada aqui no console se ele deu a transação ao sucesso ou realizar a transação de inserir beleza vamos lá na aba application novamente e agora olha só que legal se a gente vem aqui em memória só a nossa tabelinha do banco Olha que show de bola a gente tem como ver que a tabela realmente Então a gente tem aqui Wide certo P escrita P falar a escrita e r falada Tá vendo Então a gente tem aqui o registro isso é um teste na pergunta escrita pergunta falado é igual porque

realmente os dois ficaram iguais né Vamos colocar mais uma para a gente ver se vai funcionar então aqui eu vou colocar sim qual é é a sua cor favorita como dizer que a gente vai fazer isso tá Qual é a sua cor favorita vamos gravar agora a gente fazendo a pergunta e qual é a sua cor favorita eu vou gravar mais uma vez para ver se vai ficar nesse mesmo padrão Qual é a sua cor favorita é isso então o final sempre ficou em qual é a sua cor favorita esse que ela entendeu Beleza não

tem problema importante é o que ela entendeu Realmente vamos clicar aqui no salvar o Salmo salvou você vai ver que aqui automaticamente ele não atualiza tabela tarde estava com a tabela aberta O que que você tem que fazer para atualizar você clica aqui no banco de novo e clica de novo aqui na na nossa tabelinha e aí ele vai ter o segundo registro lá qual é a sua cor favorita e a pergunta falar que é o que ela entendeu em qual é a sua cor favorita Ok tranquilo pessoal Funcionando aqui para nós por enquanto salvar

quem você vê que ele repete duas vezes Wide mas isso aí é porque o próprio sistema do Mc Kelly crie uma coluna e de forma automática a lenda que a gente usa lá do Eyed que a gente colocou de chave primária só que para a gente fazer as filtragens depois ele dá um bugue isinha a gente tenta usar o Haiti que já vem por padrão no Chrome Então vai ficar duplicado mesmo aqui vai ficar com duas colunas chamada saidinha mas não tem problema isso aqui é só para a gente ver no que tá acontecendo vida

que segue tá Não se preocupa com isso aqui não um OK se você precisar pagar o seu banco de dados pessoal Se você quiser eu eliminar o banco de dados aqui a e conversar com ele Zerado de novo você tem como fazer aqui direto pelo Chrome inspect você vai vir aqui nessa opção aqui ó Clear Store está vendo que tem aqui em cima e aí você pode colocar aqui ó Clear site da tá vendo ele já salvou aqui no web SL 20.5 Carvalho está vendo então se você colocar aqui ó Clear site data ele vai

limpar toda a aplicação aqui que você tá usando então se eu der um Clear site data você vai ver aqui que você entrar no banco de novo aqui olha não tem nem as tabelas mais tá vendo porque eu limpei tudo realmente Ok a princípio a gente pode fazer por aqui mas agora a gente vai fazer o seguinte aqui no próprio é é pra gente tem aqui essa parte aqui em cima que tem um símbolo Zinho do dados do banco de dados a gente vai um clique aqui a gente limpo e o nosso banco de dados

a gente zere As Memórias dela né E a gente vai ter que também a partir de agora listar essas memórias aqui que a gente acabou de salvar mostrando aqui certinho os valores para nós certo que tava o primeiro fazê-la entre aspas esquecer as coisas para gente ter uma forma de limpar o nosso banco fica mais fácil da gente fazer teste e também de listar aqui os itens que a gente foi salvando aqui das perguntas apreendidas certo eu vou fechar então aqui o nosso Chrome inspect Então vamos fazer o seguinte a onde a gente tem aqui

é memórias a gente tem lá em cima no nosso navbar de ter deixado aberto para facilitar na a gente vê mas tudo bem lá no navbar que a parte bom deixa eu abrir aqui de novo custa nada aí ó essa parte de cima navbar então aqui no cantinho navbar a gente tem esse ícone Zinho aqui do nosso banquinho né tô aqui que nós vamos fazer a gente vai encontrar onde ele tá E tá exatamente a aqui ó que essa Diva aqui ó White tá vendo e aqui a gente vai fazer o seguinte a gente vai

transformar essa Divino link também então vou fazer aqui um ar HF apontando para lugar nenhum Oi e eu vou fazer aqui ó só fazer aqui que isso aqui é um link e eu vou fazer assim eu vou colocar uma e dia aqui ó é o nome chamado apagar memórias Oi e aí a gente vai lá na nossa rota memórias e vamos fazer o em o eventinho aqui ó clicou clicou em apagar memórias então aqui a gente vai fazer o seguinte a gente vai fazer é a chamada do apagar memórias o ponto bom um clique que

que vai acontecer um chão a beleza e que é para acontecer quando fica aí apagar memórias aquele cada vez ele fica colocando esse recuerdo de 17 coisa chato aqui deitado vamos lá então clicou no apagar memórias e a gente vai querer fazer o seguinte a gente vai fazer aparecer um dar aula daqui um alertinha Opa ep é eu já me esqueci o qual que é o método Alert daí ali né a dar aula e alerte culpa fdl. Alert e vamos fazer uma pergunta assim tem certeza que quer apagar as memórias e esse primeiro parâmetro que

vai escrito dentro da janelinha certo o segundo parâmetro que você pode passar aqui é o título que vai aparecer então a gente pode colocar assim é em eu vou fazer assim uma tag strong ele aceita tags HTML certo eu falei assim confirmação a tomar tag strong ele vai dar o título confirmação tem certeza que quer apagar as memórias e aqui o terceiro parâmetro a gente vai fazer uma função de callback que é o que que vai acontecer se a pessoa disser que sim certo vamos fazer aqui uma função do que que vai acontecer se ela

disser que sim até vou colocar essa função aqui para baixo fica mais fácil da gente ver o que que vai acontecer então se ela disser que sim né que que ela quer apagar memórias então aqui a gente vai ter que fazer a gente apagar realmente o nosso banco ali apagar a nossa tabela Então nós vamos fazer um bebê. Transition para fazer uma transação aqui a gente vai chamar essa transação de apaga banco perto da sua nome da nossa função e aqui a gente vai ter lá os nossos callback sozinhos né Vamos fazer aqui uma function

a função e o que que acontece dar errado a função que que acontece se dá certo né ao só por aqui para ficar mais fácil bom então se der errado se deram errado a gente vai dizer assim né não é ponto daially. Alert o erro ao realizar realizar realizar transação [Música] vou apagar ó e aqui vamos colocar para ele mostrar o erro e aqui se der certo sucesso a gente pode colocar aqui para ele atualizar talvez a nossa rota né Por quê que acontece quando a gente apagar o banco a gente vai ter que a

nossa rota inicializar novamente para que ele possa puxar o listar que a gente ainda vai fazer mais para frente a gente pode fazer assim ep. Vídeos. Me ponto holter. Refresh fez Então esse é o método Zinho para gente pedir para ele fazer como se fosse uma atualizar essa rota que a gente tá aqui a rota de memórias até ele vai recarregar a página novamente beleza o ok então aqui a gente está enfocando aqui a transação para pagar o banco e agora a gente vai ter que fazer aqui essa função Zinha propriamente dita né de apagar

o nosso banquinho então aqui fora da onde a gente tem a nossa transação aqui ó mas ainda dentro da nossa função de callback aqui do nosso Daí ela me alerte as vamos fazer essa função linear funshion apaga banco e aqui dentro dela a gente vai fazer o seguinte a gente tem que colocar lá o TX né que é e o nosso transex o Executivo então peixes. Execute SQL E aí a gente vai dar o seguinte comando que a gente vai querer que faça a gente faz assim ó drop table As Memórias O que é deletar

ou né destruir ali fazer um drop table que é para jogar fora Nossa tabela memórias certo é isso que a gente vai fazer aqui então esse é o comando empresa escutar o segundo parâmetro Você pode passar aqui um Array vazio que é o retorno do que vai acontecer aqui pode deixar assim um Array vazio aí o próximo parâmetro aqui vai ser o callback de sucesso então vou fazer aqui a por aqui o não entra aqui fazer uma função de sucesso que que acontece se deu certo aqui a gente coloca uma vírgula Oi e um callback

de erro também função e aqui o callback de erro certo outro aqui deixa organizadinho nosso código um certo Tom apaga banco estão tentando executar isso aqui para jogar fora Nossa nossa tabela memória Se der certo a gente vai dar aqui um rap. Da aula de ponto Alerta dizendo assim vamos fazer até uma piadinha assim ó e nada mais faz sentido ó e aqui nós podemos colocar um título assim vamos colocar também que e memórias e apagadas E aí Ah beleza então ele vai dar esse alertinha para nós memórias apagadas nada mais faz sentido ela vai

dizer isso aqui e em caso de erro né a gente pode colocar assim colocar erro ep.de ali. Alert a falha ao apagar memórias E aí a gente pode seguir para mostrar qual foi o erro certo ok vamos fazer aquela recapitulada básica sempre importante na pessoal quando a gente está programando a gente fazer uma recapitulação da nossa lógica clicou no botão apagar memórias que é esse botãozinho aqui do campo ficou e que ele vai fazer lá e vai aparecer uma janelinha um dar aula de um alerta dizendo tem certeza que quer apagar as memórias que tem

que ter um ponto de interrogação e aqui o título confirmação aí a gente tem aqui Um callback do que que acontece se a pessoa clicar em ok uma pessoa clico em Ok ele vai inicializar uma transition com o banco chamando uma função apaga banco aqui a gente tem os callbacks se der certo se não der certo ó e aqui embaixo a gente tem a nossa função Zinha apaga banco vai fazer o comando drop table memórias para deletar essa nossa tabela e aqui também os callbacks vizinhos de sucesso ou Diego nesse caso aqui dentro do Execute

SQL né esses parâmetros está na ordem que normalmente a gente usa de callback comum que é primeira de sucesso e depois eu de erro isso daqui pessoal a gente sabe pela documentação tá do Web SQL que no caso usava primeiro erro depois sucesso é que é o contrário né primeiro sucesso o erro por padrão geralmente a primeiro sucesso depois o erro mas no caso específico the transition é dessa forma primeiro erro depois do Sucesso beleza OK vamos lá corda para Android vamos ver se isso aqui vai funcionar rodou vamos lá Abrir novamente no nosso Chrome

inspect vamos inspecionar aqui mas não deu tempo de ele ter carregar que meu rappi lá e inspecionar aí agora E aí e como acessar memórias o assessor criou o nosso banco não está dela memória está vazio vamos ter que adicionar alguns itens para a gente poder apagar né que arrumou adicionar e aqui teste o teste um dois três só um gravar teste123 em salvar o outro teste um teste aqui o outro teste o outro teste em salvar Beleza então salvei dois aqui vamos ver se eles aparece aqui em nosso banco vou clicar aqui de novo

na tabela memória estão lá os dois ó test123 Outro teste tal aqui realizou as transações inserir tudo certinho beleza agora vamos então a pagar o nosso banco né vamos ver se vai funcionar aqui então vamos clicar lá em cima no nosso símbolo Zinho do banco então lá no cantinho confirmação aí agora sim a tem certeza que quer apagar as memórias ok né a única opção que tem para o camarada é OK então eu vou dar um ok isso aqui não ficou muito legal né pessoal porque tipo assim se o cara clica para ver o que

quer aquela ali não tem opção de cancelar aqui né bom então a gente tem que mudar não deve ser um um alerta de tipo dar aula de alerte a gente vai ter que usar um outro tipo de dar aula e além de confirmação na verdade né Tá eu vou dar um ok para a gente ver se vai funcionar ele o que a gente fez né OK memórias apagadas nada mais faz sentido Ok e vamos dar uma olhadinha aqui primeiro no console que que ele mostrou para nós então ele deu sucesso realizar transação criar tabela tá

porque ele ele deu um refresh na nossa página né Mas o mais importante vamos ver se pagou a nossa tabela apagou a gente vem aqui a tabela memórias está vazia tão aparentemente deu certo né ou não tem que corrigir esse tipo aqui de confirmação não pode ser um diálogo do tipo Alert né pessoa tem que ser um outro tipo vamo mudar aqui então e a gente tem um tipo de Dai ali que se chama confirme que é de confirmação então dai alugue de confirmação vamos ver se vai ficar melhor assim vamos fazer o teste córdova

Android para gente ver você fica melhor com o de confirmação beleza pessoal só para gente ganhar tempo aqui no vídeo Já cortei na edição Eu já adicionei mais umas perguntas nova aqui né aqui a nossa tabelinha botei blablablá a outra coisa só para gente ver aqui se vai funcionar a questão do nosso Daí ela me de confirmação né então vou clicar lá em cima no ícone Zinho lá que é para apagar o banco aqui né ficar aqui agora sim ó confirmação tem certeza que quer apagar as memórias aí tem um ok e o cancel né

aí agora a pessoa tem opção de cancelar se ele clicar no cancelar não acontece nada beleza então clica lá e clicar no ok Aí sim agora ele vai apagar clicar aqui no Ok memórias apagadas nada mais faz sentido eu vou dar uma olhadinha aqui no banco clica aqui biola memórias estão vazias Beleza então a gente já tem como inserir dados dentro da tabela já tem como apagar a nossa tabela para que a gente possa entre "resetar para gente fazer mais testes né agora que que a gente vai fazer a gente vai fazer listar aqui ó

nesse nosso list viu os itens que a gente já salvou certo para pegar dinamicamente do nosso banco de dados os valores aqui então a gente vai fazer listar agora aqui para nós então para isso que que a gente vai precisar a gente vai precisar achar onde a gente tem aquela Nossa listinha o que vai estar aqui dentro da nossa memórias ponta HTML a gente tem aqui a nossa lista E aí tá lá embaixo do peixe no peixe contente que a gente tem apreendidos e tal aqui a gente tem a nossa lista cada L desses aqui

né pessoal ele é um item da lista tá vendo cada la-11 Esse é um item da lista o que a gente vai precisar então batizar esse nosso l e com AIDS então lista vou chamar de lista perguntas certo eu coloquei esse arde E aí quando inicializar a nossa rota de memórias aqui a gente vai precisar e seja puxada do nosso banco de dados e alimentar a nossa lista com os valores que tem dentro do nosso banco para isso a gente pode criar aqui ó até antes desses nossos eventinhos aqui de dos botões né que a

gente tem gravar pergunta tal a gente quer que o banco de dados né então depois aqui do que criou a tabela do banco de dados a gente pode criar aqui uma função Vamos fazer assim ó função para listar os itens do banco certo a gente vai criar uma função especial para fazer isso a gente vai chamar essa função é um som de listar estar memórias bom então aqui dentro do listar memórias que que a gente vai fazer a gente vai fazer uma transition que vai chamar uma força chamada selecionar tudo e aqui a gente vai

ter um callback de erro aquele padrãozinho dos das nossas Transitions né e um callback o sucesso é só pra facilitar aqui vamos pular as linhas aqui né Beleza então aqui é o Diego então quê que acontece de errado e esse aqui é o de sucesso então estar memórias vai fazer uma transition invocando uma função chamada selecionar tudo então se der eu vou a gente vai dar aqui um EP ponto da aula de ponto Alert dizendo assim erro ao a realizar transação selecionar Oi tudo e aqui a gente vai pedir para mostrar o erro se não

se der certo a gente vai dar um console. Log e dizendo assim sucesso ao realizar transação [Música] em selecionar tudo o OK agora aqui embaixo né dessa função listar memórias a gente vai fazer aqui essa função chamada selecionar tudo vamos fazer aqui função para selecionar tudo vou fazer posso fazer Essas funções function selecionar tudo nela a gente vai usar uma transex Execute uma TX e a gente vai fazer um tx. Execute SQL e aqui o comando que a gente vai dar para executar mais Kelly vai ser o dia que selecionar todos os registros do nosso

banco a gente pode fazer isso da seguinte forma a gente pode fazer acima de select o asterisco né selecionar tudo from da tabela memórias Oi e a gente pode pedir inclusive para fazer ordenar Order by ID ordenar pelo Wide chest Ok então esse aqui é o comando principal a gente vai ter aqui o segundo parâmetro você vai passar aqui um Array Vazio Dessa forma depois o próximo parâmetro vai ser uma um callback de sucesso porque o callback de sucesso Quanto é pular uma link para facilitar E aí tá certo aqui é o callback sucesso e

o outro vai ser o callback de erro certo então aqui fazer aqui um callback de erro no chão E aí eu vou colocar aqui então aqui e se der errado o que vou colocar o erro e que a gente pode pedir para dar um up ponto daí ela que ponto Alert erro ao puxar dados do banco... E aqui vamos pedir para mostrar o erro Ah beleza então aqui quando ele executar o selecionar tudo from memórias nesse callback callback sim de sucesso a gente vai ter que pegar aqui ó os resultados Então vou colocar sim resultados

eu posso chamar esse aqui de dados tá vai ser os dados que vão vir lá do nosso banco Inclusive só para gente ver se isso aqui vai funcionar eu posso fazer assim ó console. Log e pedir para ele mostrar para mim que vem aqui dentro desses dados aqui para gente ver o qual que vai ser o retorno aqui para nós beleza Oi ok e vamos então pedir para quando começar aqui o nosso Nossa rota memórias para ele invocar essa função aqui estar memórias certo então ele vai chamar o listar memórias vai fazer essa transvert um

pedido para selecionar tudo vai selecionar tudo lá da nossa tabela memórias e vai se der certo mostrar ali no console log que que tem dentro de dados vamos ver se isso aqui vai funcionar como rodar córdova Lan Android vamos ver se vai dar certo isso que a gente fez até agora beleza já rodou aqui vamos abrir no nosso Chrome inspect opa e esperar ele carregar Já chegou amor como acessar memória Ah então tá vazio olá ele na transvection querer retornou nada vazio né porque a gente não tem nenhum dado para ele estar aqui por isso

tá vendo esse vazio mas você pode ver que deu sucesso realizar a transação selecionar tudo ele tentou selecionar tudo na nossa tabela mas obviamente não tem nada lá então ele retornou aqui para nós o objeto vazio certo vamos então adicionar alguns itens para a gente ver o que que acontece né vamo lá adicionar alguma coisa Fala alguma coisa e vá fazer outra coisa e aqui e outra coisa Ah beleza então adiciona vamos lá no inserir vamos lá na application tá lá alguma coisa e outra coisa a e agora vamos fazer o seguinte vamos ver se

aqui na nossa rota quando a gente entrar na rota de novo que que vai acontecer se ele vai estar então eu vou voltar aqui voltei para minha principal Vou acessar memórias novamente para a gente ver se a gente consegue puxar esses dados ali que estão na nossa tabela né acessar memórias Ah beleza então ele a sessão memórias aqui nessa Kelly transition ele mostrou aqui para nós e chover e a transition em executivos que querem os argumentos o tanto que eu fiz de errado aqui pessoal deixa eu dar uma olhadinha aqui tá ah tá pessoal que

que acontece a aqui é o esqueci de passar são dois parâmetros na função de callback tá pessoal aqui é o primeiro parâmetro a gente tem que passar o TX e é o teste Execute que está sendo feita que o transoeste Execute e o segundo parâmetros são os dados tá isso é um padrão aqui quando a gente tá execução executando uma seleção de pegar alguma informação de dados tá eu teria que passar como segundo informação isso aqui vamos ver se agora vai funcionar fazer um teste aqui córdova Android desde Abril vamos lá de novo e tem

que carregar isso me abriu Bom vamos lá acessar a memória Ah entendeu Acessar memória entrou agora sim a pessoal então assim sua memórias a gente já tinha aqui ó alguns dados salvos no nosso banco né aqui no console a gente pediu para ele mostrar no console o que tá vindo de dados aqui da nossa seleção da tabela olha só que interessante Opa no lugar errado aqui no Chrome Opa Meu Deus do céu aí agora Deus então agora em dados a gente tá pegando os resultados realmente do segundo parâmetro que é esse sql-result-set-mapping aqui dentro a

gente tá pegando aqui ó Rose tá vendo a gente tem um item chamado Rose e dentro desse item chamado Rose a gente tem os dados olha só que legal que está retornando para nós então aqui os dados não é de um tal a gente tem um aí de 2 então a gente tem aqui Um ao rei né com um objeto com os valores estão vindo lá do nosso banco use ver a gente tem é uma tribo tinha chamado lente é para saber quantos quantas linhas a gente tem dentro do nosso das nossas Rolls né que

são os resultados que estão vindo lá do nosso banco Beleza então é importante a gente vê o que que vem aqui nesses dados né para gente poder manipular da na forma que a gente quiser né esses dados aqui então a gente tá pegando realmente os valores estão voltando para nós agora a gente vai ter que tratar esses valores aí então vamos fazer isso agora nós vamos fazer o seguinte aqui a gente já sabe quais são os lados que estão vindos aqui eu vou até comentar assim e agora nós vamos fazer o seguinte Primeiro vamos ver

quantas linhas vem do nosso banco então a gente pode fazer uma variável chamado ele nesse e vai ser igual ao que vai ser igual a dados. Rolls que é o nome daquele tem que a gente viu aqui ó os dados é o nome do nosso objeto em geral né a gente tem aqui Rose que tava até fichadinho se abre então Rose e dentro de Rose a gente tem as nossas informações mas dentro de Rose o que a gente vai querer pegar agora é o lanche que é quantas linhas a gente tem aqui por causa que

são duas né então a gente vai fazer assim dados. Os pontos lente lente e saber que se escreve assim certinho Olá É gth mesmo né então gth então estamos vendo quanto que tem quantas linhas que ele veio então a gente pode fazer uma seguinte validação aqui se as linhas forem 0 quer dizer não tem nenhuma linha do banco então a gente pode fazer assim if Linea igual igual a zero porque ele retorna um inteiro né então sozinha se for igual a zero ou melhor a gente pode fazer assim se as linhas forem maior maior quiser

né porque a gente vai querer que tenha pelo menos uma linha então se a linha formar quiser o que quer para acontecer aí aqui olha que que a gente vai fazer a gente vai colocar lá naquela parte dos apreendidos aqui o valor das Linhas então a gente na verdade vai ter que fazer aqui ó e memórias. HTML onde a gente tem aqui apreendida Oi gente vai querer aqui uma tag do tipo pode ser uma série B de The bold e aqui a gente vai colocar um Eyed para ser quantas conta eu vou que ter apreendidas

quantas apreendidas certo vou colocar aqui que é para fazer o seguinte o nosso e quantas apreendidas. HTML vai receber o valor de linhas para lhe mostrar quantas aprendidas ele ele tem certo então coloca alimentar o campo quantas apreendidas beleza alimentamos ali e agora que que a gente vai fazer a gente vai precisar percorrer esse nosso dados Rose aqui para que a gente possa inserir dentro da nossa listinha aqui e forma dinâmica os dados que vieram aqui do nosso banco que tá dentro desse arrozinho aqui então a gente pode fazer isso com o laço de repetição

for né então a gente pode fazer da seguinte forma por nós vamos colocar o índice começando em zero Oh e vamos fazer enquanto o índice for menor do que o número de linhas que a gente tem é para ele acrescentar e fazer o laço né um laço de repetição fora então a gente pode até colocar aqui né a percorrer todas as linhas do banco e a gente vai fazer o seguinte cada vez que ele vai percorrer a gente vai pegar aqui onde a gente tem a nossa lista que é esse ué lista perguntas Então vou

pegar esse aí dia aqui né Vamos colocar essa nossa lista lista perguntas e a gente vai pedir para adicionar Vamos fazer assim um ponto a pende para ele adicionar aqui dentro é um ele desses daqui que é um desses campinhos que nem a gente tem aqui né 1l desse daqui só que passando os valores dele aqui onde a gente tem aqui essas coisas escritas tipo texto escrito aí digital Mas vamos passar os valores de forma dinâmica então vamos fazer o seguinte eu vou recortar esse ali que a gente tem de exemplo aqui do nosso HTML

mesmo control-x recortei posso até Apagar que é aquele segundo ali que a gente tem aqui eu apaguei Beleza então deixei só o l mesmo e aqui ó eu vou usar duas casas tem que ter de streaming e vou colar aqui dentro o HTML dele ó colei Beleza então eu tô pedindo para dinamicamente o meu java script colocar lá os itens da lista certo bom então eu vou fazer da seguinte forma aqui ó aqui a gente tava usando o data poupapp né pessoal para abrir o papa e resposta né tá beleza isso pode a gente pode

deixar assim não vai ter problema nenhum agora o que a gente vai ter que fazer é onde a gente tinha lá por exemplo o primeiro item né deixa eu mostrar aqui para vocês Onde está em texto escrito a gente vai ter que pegar o valor do texto escrito que tá vindo do nosso banco aqui dos dados que a gente tá pegando então que que a gente faz a gente vai tirar aquilo tá escrito assim texto escrito de Título nós vamos apagar isso e aqui nós vamos usar aqui o valor que a gente vai pegar de

forma dinâmica do que tá vindo do nosso banco e vai ser o dados. Rolls item E aí colocar qual que é o número do item vou colocar o nosso indice do nosso laço de repetição e aí a gente vai ter que pegar. O nome do Camping que a gente quer que no caso aqui nosso vai ser underline falar a escrita né reescrita que é o nome da coluna que a gente tem aqui deixa eu achar eu te escrita certo para ele pegar esse valor Beleza vou copiar isso aqui no lugar aqui do Eyed eu vou

trocar aqui um beijo para escrito vou pegar Wide e no lugar onde a gente tem aqui como assistente entendeu eu vou colocar aqui p balada o Ok beleza vamos ver se isso aqui vai funcionar mudar aqui um córdova Android ver se ele vai puxar dinamicamente agora os valores do nosso banco beleza vamos ver o momento da Verdade né como acessar memória bom e deu pau na Kombi sorvete que deu aqui e quais not Fire e na linha 1 a ele deve ser inseridos aqui porcaria seria isso aqui na hora que eu fui colocar lá o

símbolo de cifrão né tá vamos lá de novo cordova Run Android agora vai vamos lá então agora sim vamos ver se vai dar certo acessar memórias O opa olha lá que legal pessoal então ele já deu aprendido as 2 e ele já listou para nós os itens que ele tá puxando Lá do banco Legal vamos adicionar um outro aqui para ver se vai dar certo quem é E qual é e o seu carro favorito Oi qual é o seu carro favorito Então vamos colocar aqui qual é o seu carro favorito e os clicar aqui em

salvar só vou fechar a tá ele não carregou pessoal porque a gente vai ter que pedir depois que salvar um seria um dado para ele acionar o listar memórias novamente para que ele possa puxar aqui no Então deixa eu fazer o seguinte eu vou voltar aqui para principal só para gente ver se ele vai puxar essa nova Acessar memória de acessar memórias a falar agora puxa lá o apreendidas Três beleza eu clicar nesse primeiro abriu aqui eu resposta clicar nesse segunda viu resposta bom beleza OK então tá puxando aí Por enquanto né isso daí para

nós tá beleza vamos fazer o seguinte lá onde a gente tem o inserir Exu achar onde é que a gente tem uma inserir aqui mais para baixo a gente tem que pedir depois que ele inserir para ele também ele estar memórias aqui ó fazer a chamada dessa função aqui né então aqui a gente tem gravado pergunta que gravou salvar pergunta aqui ó então gente seu sucesso aqui o sucesso realizar a transação talvez vase ou depois que esvaziou a gente vai ter que fazer aqui e ele estar memórias aí agora eu acho que vai funcionar porque

daí ele vai estar E aí vai aparecer para nós lá a memória lá dentro Vamos só ver se isso aqui vai funcionar então corda para Android acessar memórias oh beleza vamo adicionar oi haha oi haha e olha entenda que uma risada meu amor salvar só vamos fechar o papo para ver é um olha só que curioso pessoal que que aconteceu como a gente pediu para ele estar novamente e que aconteceu foi que ela adicionou os itens lá mas antes a gente teria que ter limpado né ali a nossa a nossa lista porque senão ele acrescentou

esses em cima dos outros que já tinha Então ficou um dois três depois um dois três quatro né aí isso aí dá um probleminha que realmente não fica legal então o que a gente precisa fazer lá no listar memórias aonde estar memórias aqui então antes da gente percorrer todas as linhas do banco e alimentar a gente tem que pegar lá o nosso lista perguntas que a nossa lista não tem as perguntas e fazer ela ficar Vazia em ti a gente usa esse método emitir aqui é para esvaziar a lista daí assim que esvaziar a lista

Aí ele pode fazer o laço de e para adicionar os itens novamente senão ele vai ficar repetindo ali um em cima do outro né Vamos lá de novo a beleza vamos lá acessar memórias como acessar memória E aí puxou os quatro que a gente tinha no banco né Vamos adicionar um outro quem é em alguma coisa hahaha alguma coisa hahaha a beleza salvar os fechar agora mas nosso poupapp ó agora ele adicionou lá na nossa lista alguma coisa hahaha Beleza então foi colocado aqui o nosso item tá listando para nós isso daqui né agora que

que acontece quando eu esvaziar esse banco vamos ver o que que acontece aqui ó a confirmação que apagar todas as memórias ok o apagado nada mais faz sentido só que daí fica estranha né Fica quando tá aqui assim nos apreendidas ali ó a nossa lista está vazia então não aparece nada e não aprendidas ficar tipo assim vazio ali né que a gente poderia fazer a gente poderia fazer a um tipo de dívida que só vai aparecer quando não tem nada então a gente pode fazer da seguinte maneira aqui ó onde a gente tem memórias a

gente pode achar aqui ó onde a gente tem a nossa lista de perguntas aqui a gente tem aqui o aprendidas e tal e a listinha né não tem apreendidos e aquela listinha a gente pode colocar isso aqui ó dentro de uma outra Advil vamos fazer com um amigo com a gente pode colocar o Eyed dela como sendo com memórias e quando tem memórias vai ser essa devia aqui que vai ser acionada certo então vamos fechar aqui embaixo para tudo ficar incorporado a aqui dentro tocou memórias vai mostrar aprendidas vai mostrar essa lista tal aqui beleza

e a gente pode fazer uma div aqui ó que a gente vai chamar vamos colocar um aí de aqui de sem memória e ó e aqui dentro dessa dibs em memórias a gente pode colocar aqui há um parágrafo simples alguma coisa assim que diga para pessoa que ela não tem nenhuma memória adicionada né eu vou colocar um parágrafo normal Vamos fazer assim é a gente pode até usar um blog estou aqui mesmo copiar isso aqui e colocar a seguinte forma aqui ó é e nenhuma a memória e apreendida até o momento e nenhuma memória apreendido

até o momento Beleza então a gente tem aqui os em memórias e com memórias é que a gente faz lá no nosso memórias quando a gente tem que prestar listar memórias a gente vai fazer aqui tal aqui a gente pode fazer da seguinte forma se for maior que zero vai fazer isso né ele vai nesse está Que tal você pode fazer na verdade assim se for igual igual a zero a gente vai pedir para acontecer alguma coisa senão E aí a gente pede para acontecer isso daqui que vai estar aqui embaixo certo já tinha lá

o fechamento Então vai dar certo aqui é o sininhos for igual a zero não tem nada a gente vai pedir para fazer o seguinte a gente vai pedir para que o nosso com memórias o ponto addclass nós vamos adicionar classe display no que é para ele desaparecer Tá certo Oi e o nosso sem memórias e vai remover a classe esplenom Então a gente vai começar aqui ó com a classe você memórias a gente vai começar lá e por isso aqui desaparecido com essa display display Não na verdade até dá para deixar as duas com display

None para não aparecer né Vamos fazer assim ó as duas começa oculta certas duas tão sem memórias e com memórias começa com display não então se as meninas for zero com memórias vai adicionar display no Onix no caso já vai ter né E no caso do sem memórias vai remover o display nós e o contrário né então se for maior que zero aqui ó mostrar com memórias e a lista Oi gente vai fazer assim como memórias a gente vai remover a classe display None que deixou culta e o sem memória se por acaso não tiver

ele aparecendo uma adicionar classe display Não beleza então dessa forma vamos ver o que que vai acontecer aqui eu vamos rodar novamente aqui ó do valor Android como inspecionar para ver acessar memórias o e de um erro de novo ai meu Deus mas que coisa chata que ele ele fica inserindo cada vez esse nosso Dom set aqui ó e fica me atrapalhando aí cada vez fica dando erro que vamos de novo corda valor Android tem que dar uma olhadinha ensino senhor também adicionará automaticamente isso aqui atrapalha bastante mas vamos lá como rodar e vamos ver

se vai funcionar sem e Serginho beleza vamos lá Acessar memória de acessar memórias o Olá aqui show de bola pessoal bem legal mesmo nenhuma memória apreendida até o momento Beleza então ele tá mostrando sem memórias aqui porque a gente não tem nenhuma né Agora vamos adicionar uma para gente ver se se vai dar certo né Colocar que adicionar fazer assim teste o teste Ah entendeu Fast Mas beleza salvar só vou fechar aqui ó apreendidas uma um agir um legal show de bola eu vou sair de novo da Rota Acessar memória já entrou já mostrou lá

o apreendidos beleza tá dando certo as nossas transações com o banco ali então tá ok pessoal tá funcionando por enquanto isso daí para nós né O que que a gente vai ter que fazer agora a gente vai ter que fazer quando a gente clicar aqui na pergunta que a gente quer por exemplo clicar aqui nessa primeira ele vai abrir aqui agora a parte da resposta da assistente que a gente vai querer que ela ver como essa aula já ficou bastante longa e ainda vai ter um trechinho aqui que a gente vai precisar fazer da resposta

dela ser salva lá né E também a gente vai precisar Opa eu fechar aqui pelo aplicativo e também a gente vai precisar fazer algum meio da gente poder editar né os itens que a gente tem aqui a gente deixa para última parte aqui desse nosso projeto Porque daí a gente acrescenta as respostas a questão de atualização de pergunta e resposta e aí a gente faz os testes finais para ver como que ficou a finalização da nossa é o que a gente já fez até agora eu vou deixar aqui na descrição também embaixo desse vídeo para

você pegar para você e acompanhando até esse trecho que a gente foi aqui na construção da assistente Beleza espero que você esteja gostando na próxima aula nós nos vemos no último na última aula dessa nossa série da assistente forte abraço e até a próxima valeu