As TECNOLOGIAS Usadas Na Minha ASSISTENTE (Bem Simples)

nesse vídeo eu quero mostrar para vocês aqui as tecnologias que eu utilizei na minha assistente que a gente mencionou no vídeo passado né oi para facilitar o nosso entendimento eu fiz aqui um pequeno rascunho aqui no web whiteboard né que é para a gente desenhar na tela e tal para ficar mais fácil da gente entender as tecnologias que a gente usou e como a gente pensou nesse projeto né como foi separar das camadas a parte visual e a parte lógica Eu sempre gosto de pensar dessa forma tá pessoal separando front-end vamos dizer assim a parte

de interação visual do Design da parte da lógica da programação do que você vai precisar para querer ter o sistema funcionar mesmo sempre gosto de fazer assim a parte visual nós usamos basicamente imagem HTML CSS java script junto com o Framework seven já vou mostrar cada um dessa cada uma dessas coisas aqui separado para vocês Tá mas só para a gente ter um apanhado geral Então como vocês podem ver aqui a parte do assistente que realmente chama atenção esse apelo visual né dela vai ser feito um pouco abstrato aqui eu achei que essa esse movimento

assim é fica uma coisa bem legal Às vezes até se você ficar reparando muito Parece até que forma um certo rosto ali dentro então eu achei que esse estilo essa pegada mais futurista mais abstrata e a trazer assim um conceito interessante para o projeto e eu encontrei isso aqui isso aqui na verdade pessoal nada mais é do que um GIF uma imagem animada procurando aqui no site do gleepy eu encontrei essa imagem que é a imagem que eu tô usando no projeto certo então não tem segredo é só uma imagem que foi colocada ali como

fundo do aplicativo aqui também é escuro né ele fica com esse efeito como se parecesse assim uma certa iluminação que sai dela né eu vou deixar na descrição esse link para vocês olharem ele tem vários outros modelos que poderiam ser usados olha só que que legal aqui pessoal quando eu tenho essa assistente Já faz um tempinho eu não sei dizer ao certo qual foi termo de busca que eu coloquei aqui ó mas aqui nas hashtags aparece assim ó loop neon geometria Lines Glow né então talvez com essas tags você encontraria também de qualquer jeito vou

deixar o link para vocês então a parte principal que quer a própria assistente a parte visual dela a gente usou simplesmente o um GIF aí para parte aqui de funcionamento interno dela né Por exemplo para a gente ter aqui o botão aqui embaixo também quando a gente fala alguma coisa aparece aqui um texto e tal né isso daqui eu usei o Framework serve então Framework Seven é o site é Framework seven.io ele é um Framework preparado para construir aplicativos com cara de aplicativo nativo então ele já vem com todos os componentes para que mesmo que

você utiliza a tecnologia do HTML CSS script Ela já tem uma cara de aplicativo para Android e IOS inclusive ele faz essa conversão automaticamente né se você se ele detecta que o sistema tá rodando no iOS ou no Android ele vai fazer ali com que os componentes visuais fiquem com a cara daquele sistema operacional que é muito legal então aqui né no na lista de componentes que ele tem ele tem por exemplo aqui o FAB o botão FAB que é o botão flutuante ó esses botões flutuantes que é o que eu utilizei aqui ó se

você usar para o falar é um botãozinho flutuante desse aqui claro que depois eu utilizei né Com CSS para ele ficar assim mais ou menos na pegada das mesmas coisas aqui do Design mas é eu usei aqui o Framework serve também uma outra coisa legal sobre o Framework Seven é a questão de rotas que ele trabalha né então ele tem assim a troca de páginas de uma forma que pareça realmente que você tá navegando entre páginas né então se você vê aqui por exemplo se eu abrir aqui a minha assistente quando eu peço para acessar

memória você vai ver que ele vai dar uma troca de uma transição de tela bem suave acessar memórias ó repara a transição de tela tá vendo a transição de tela E mesmo quando eu clico no voltar aqui ó ele tem um sistema de roteamento bem legal que faz esse feitinho bem interessante para dispositivos é bom né então eu usei aqui para parte estética vamos dizer assim tanto de roteamento entre páginas como também os componentes o Framework Seven para você entender ele é parecido com o Bootstrap que a gente já teve aqui no canal só que

focado em Componentes para dispositivos móveis tá para simular com que esses componentes sejam realmente nativos daquela linguagem Ok para parte lógica Então vamos dizer assim para parte de funcionamento interno que já envolveria ali a gravação da voz né ela falar salvar essas informações num banco de dados e tal nós estamos usando basicamente JavaScript Jr o chamado web SQL o lsql ele é um banco de dados que fica no cliente fica no navegador certo e ele trabalha com sistema de tabelas praticamente igual ali a qualquer tipo de banco de dados relacional como uma SQL outros tipos

de bancos que trabalham com SQL né então é bem legal porque o banco fica no lado cliente Ou seja é local não é um banco remoto o que faz com que fique salvo no próprio aparelho as tabelas para que a gente possa estar trabalhando para o reconhecimento da fala e tudo mais nós estamos usando aqui duas tecnologias muito interessantes que é o Speech to speech [Música] suporte aqui há vários idiomas incluindo o nosso que é o pt-br que é o português do Brasil e nós estamos usando também outra tecnologia que é o text to Speech

do Speech do Speed do próprio aparelho para fazer com que ela fale o que está escrito no texto né esse TTS ele é um recurso mais utilizado para deficientes visuais Praticamente todo o sistema já vem integrado com o sistema de TTS tá de transformar texto em voz para possa auxiliar por exemplo uma pessoa cega alguém que não possa estar acompanhando até o que tá acontecendo uma descrição em áudio do que tá acontecendo né então foi essa tecnologia que eu utilizei para que assistente fale conosco eu escrevo o que eu quero que ela fale para mim

beleza E aí para fazer a compilação quer dizer pegar tudo isso porque a gente tá usando linguagem web HTML CSS JavaScript aqui para construção do projeto para que tudo isso possa ser compilado de maneira Nativa para que ele vire realmente um aplicativo que pode ser instalado colocado nas lojas nós estamos usando o Apache cordova certo o Apache corda é uma tecnologia fantástica no qual são quase com Embaixador eu sou realmente muito fã eu tenho um curso dedicado só para aplicativos usando essa tecnologia depois se você quiser olhar também o curso é criar aplicativos.com e o

quarto ele funciona assim ele basicamente ele pega o HTML CSS Java Script o desenvolvimento que você faz normalmente para web e compila isso para Android para iOS gerando ali um APK um Ipa que possa ser realmente instalado no aparelho e o mais legal do Corda é que como diz aqui ó não suporta cenários offline ou seja ele vai rodar ali a sua aplicação mesmo sem internet Então não é um tipo de aplicativo que na verdade é um site disfarçado ele realmente gera um aplicativo nativo que vai usar a interface do HTML CSS já escrito de

maneira offline então a pessoa nem precisa de internet para o teu aplicativo funcionar e ele também esse aqui que é muito legal ele também tem acesso nativo as epi do dispositivo Ou seja você pode acessar câmera para bater foto gravar vídeo você pode usar gel localização né para saber posicionamento do usuário sabendo que tipo de rede a pessoa tá se ela tá no wi-fi no 4G Enfim tudo que você precisa para usar ali o aparelho né o sistema operacional ali do Android do iOS trabalhando em conjunto com a sua aplicação então para fazer a compilação

final do nosso sistema que dá assistente para Que ela possa virar um aplicativo que realmente tá aqui no meu celular eu usei o Córdoba certo inclusive esse Speech to Speed são plugins do Córdoba que eu utilizei tá você usa ali uma linha de comando basicamente para você colocar ele dentro do teu projeto E aí como não passe de mágica É só passar aqui o comando que você quer e ele vai executar para você então é tudo muito fácil de se fazer muito fácil de se utilizar explicando assim Pode parecer muito complexo pessoal mas realmente é

um projeto até simples de você tá fazendo de você tá criando se vocês acharam isso realmente interessante eu vou deixar aqui nesse vídeo uma meta de 150 likes se nós conseguimos alcançar essa meta de 150 likes eu vou fazer esse projeto passo a passo do zero junto com vocês aqui beleza combinado então capricha aí deixa o seu like compartilhe esse vídeo com outras pessoas que eu tenho certeza que esse projeto vai ser um aprendizado fantástico vai valer muito a pena e vai ser super legal nós fazermos juntos aqui no canal forte abraço e até a

próxima valeu