[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:07.66,0:00:09.54,Default,,0000,0000,0000,,Você está comprando\Num produto na Amazon
Dialogue: 0,0:00:09.54,0:00:10.88,Default,,0000,0000,0000,,e, ao finalizar essa compra,
Dialogue: 0,0:00:10.88,0:00:13.12,Default,,0000,0000,0000,,esse produto\Nvai para a separação.
Dialogue: 0,0:00:13.12,0:00:15.03,Default,,0000,0000,0000,,Enquanto ele está\Nem separação,
Dialogue: 0,0:00:15.03,0:00:20.03,Default,,0000,0000,0000,,você pode comprar outros produtos\Ne realizar outros pedidos.
Dialogue: 0,0:00:20.03,0:00:24.50,Default,,0000,0000,0000,,Isso é uma visão de usuário.\NE como desenvolvedor?
Dialogue: 0,0:00:24.50,0:00:26.32,Default,,0000,0000,0000,,No modo desenvolvedor,
Dialogue: 0,0:00:26.32,0:00:30.23,Default,,0000,0000,0000,,utilizamos duas sintaxes\Nmuito poderosas:
Dialogue: 0,0:00:30.23,0:00:32.38,Default,,0000,0000,0000,,o "async" e o "await".
Dialogue: 0,0:00:32.38,0:00:34.46,Default,,0000,0000,0000,,Pensando no exemplo\Nda Amazon,
Dialogue: 0,0:00:34.46,0:00:38.40,Default,,0000,0000,0000,,o "async" é quando\Nvocê finaliza o pedido.
Dialogue: 0,0:00:38.40,0:00:43.38,Default,,0000,0000,0000,,Já o "await" é a espera\Nda separação desse pedido.
Dialogue: 0,0:00:43.38,0:00:46.31,Default,,0000,0000,0000,,Enquanto isso,\Nvocê pode comprar outras coisas,
Dialogue: 0,0:00:46.31,0:00:48.73,Default,,0000,0000,0000,,pode colocar\Noutros produtos no carrinho
Dialogue: 0,0:00:48.73,0:00:50.78,Default,,0000,0000,0000,,e até mesmo comprar\No mesmo produto,
Dialogue: 0,0:00:50.78,0:00:54.95,Default,,0000,0000,0000,,sem atrapalhar o pedido\Nque já está em andamento.
Dialogue: 0,0:00:54.95,0:01:00.13,Default,,0000,0000,0000,,Isso é uma forma de esperar\Noutras requisições serem executadas.
Dialogue: 0,0:01:00.13,0:01:03.86,Default,,0000,0000,0000,,Vamos colocar em prática\Nos conceitos de "async" e "await".
Dialogue: 0,0:01:03.86,0:01:08.16,Default,,0000,0000,0000,,Nesse exemplo,\Nvamos aplicar uma lista
Dialogue: 0,0:01:08.16,0:01:11.74,Default,,0000,0000,0000,,na qual eu consigo\Ntrazer clientes inativos
Dialogue: 0,0:01:11.74,0:01:14.35,Default,,0000,0000,0000,,e quando foi a última\Ncompra que eles fizeram.
Dialogue: 0,0:01:14.35,0:01:15.44,Default,,0000,0000,0000,,Vamos ao código?
Dialogue: 0,0:01:15.44,0:01:17.15,Default,,0000,0000,0000,,Na estrutura do código,
Dialogue: 0,0:01:17.15,0:01:21.17,Default,,0000,0000,0000,,temos aqui o nosso HTML\Nchamando o script,
Dialogue: 0,0:01:21.17,0:01:26.87,Default,,0000,0000,0000,,temos aqui o código do script\Njá pronto que está no seu material,
Dialogue: 0,0:01:26.87,0:01:32.18,Default,,0000,0000,0000,,e um arquivo novo,\Nque é um JSON,
Dialogue: 0,0:01:32.18,0:01:36.23,Default,,0000,0000,0000,,com os dados dos clientes\Nque eu preciso trazer,
Dialogue: 0,0:01:36.23,0:01:40.51,Default,,0000,0000,0000,,que estão inativos,\Ne quando foi a última compra deles.
Dialogue: 0,0:01:40.51,0:01:44.53,Default,,0000,0000,0000,,Vou explicar linha por linha\Npara que vocês possam entender.
Dialogue: 0,0:01:44.53,0:01:46.68,Default,,0000,0000,0000,,Bem, vamos começar \Npelo script.
Dialogue: 0,0:01:46.68,0:01:51.46,Default,,0000,0000,0000,,Primeiro, é criada\Numa função "listaDados",
Dialogue: 0,0:01:51.46,0:01:56.75,Default,,0000,0000,0000,,mas, antes, eu coloco\Na palavra "async",
Dialogue: 0,0:01:56.75,0:02:02.19,Default,,0000,0000,0000,,porque esta função vai executar\Nde forma assíncrona.
Dialogue: 0,0:02:02.19,0:02:07.09,Default,,0000,0000,0000,,Com isso, quando essa função\Ncomeçar a ser executada,
Dialogue: 0,0:02:07.09,0:02:11.70,Default,,0000,0000,0000,,ela não terá problema \Nem executar outras operações.
Dialogue: 0,0:02:11.70,0:02:14.50,Default,,0000,0000,0000,,Na segunda linha nós temos a requisição,
Dialogue: 0,0:02:14.50,0:02:17.88,Default,,0000,0000,0000,,Então, por exemplo: criei uma\Nvariável chamada "response",
Dialogue: 0,0:02:17.88,0:02:23.07,Default,,0000,0000,0000,,que vai ter a outra palavra\Nchamada "await".
Dialogue: 0,0:02:23.07,0:02:26.16,Default,,0000,0000,0000,,Nesse caso aqui,\Nele vai esperar.
Dialogue: 0,0:02:26.16,0:02:27.56,Default,,0000,0000,0000,,Esperar o quê?
Dialogue: 0,0:02:27.56,0:02:33.65,Default,,0000,0000,0000,,Esse método "fetch" que vai\Naté o arquivo "dados.json",
Dialogue: 0,0:02:33.65,0:02:36.83,Default,,0000,0000,0000,,que é exatamente\Nesse arquivo aqui.
Dialogue: 0,0:02:36.83,0:02:40.91,Default,,0000,0000,0000,,Aqui também poderia ser\Numa requisição HTTP
Dialogue: 0,0:02:40.91,0:02:43.60,Default,,0000,0000,0000,,como placeholder,
Dialogue: 0,0:02:43.60,0:02:46.63,Default,,0000,0000,0000,,que está no material de vocês\Ncomo requisição.
Dialogue: 0,0:02:46.63,0:02:49.32,Default,,0000,0000,0000,,Aqui, eu estou dando exemplo\Ncomo arquivo, por que?
Dialogue: 0,0:02:49.32,0:02:55.51,Default,,0000,0000,0000,,O "async" lê arquivos ou requisições HTTP.
Dialogue: 0,0:02:55.51,0:02:58.98,Default,,0000,0000,0000,,No material de vocês já tem\Num exemplo como requisição,
Dialogue: 0,0:02:58.98,0:03:03.94,Default,,0000,0000,0000,,e aqui estou fazendo um exemplo\Nprático lendo um arquivo.
Dialogue: 0,0:03:03.94,0:03:07.90,Default,,0000,0000,0000,,Então, nesse exemplo,\No "await" vai esperar
Dialogue: 0,0:03:07.90,0:03:16.55,Default,,0000,0000,0000,,o "fetch" ir até o "dados.json"\Nler todos esses dados aqui.
Dialogue: 0,0:03:16.55,0:03:20.33,Default,,0000,0000,0000,,Ele traz, joga dentro\Ndessa variável aqui
Dialogue: 0,0:03:20.33,0:03:22.23,Default,,0000,0000,0000,,que eu estou criando,\Nchamada "dados",
Dialogue: 0,0:03:22.23,0:03:25.77,Default,,0000,0000,0000,,Então esse response\Npercebem que esses pontos
Dialogue: 0,0:03:26.17,0:03:30.94,Default,,0000,0000,0000,,recebe o arquivo dados e vou colocar\Ndentro de uma variável chamada dados,
Dialogue: 0,0:03:31.28,0:03:35.41,Default,,0000,0000,0000,,porque a web ela só consegue ler arquivo.
Dialogue: 0,0:03:35.41,0:03:38.98,Default,,0000,0000,0000,,Jeison\NEntão, tudo o que nós temos aqui por trás
Dialogue: 0,0:03:38.98,0:03:43.12,Default,,0000,0000,0000,,do que o seu navegador pode entender\Né aqui o diz.
Dialogue: 0,0:03:43.99,0:03:46.83,Default,,0000,0000,0000,,Então, nessa função\Neu fui lá, peguei os dados
Dialogue: 0,0:03:46.83,0:03:49.83,Default,,0000,0000,0000,,e joguei\Ndentro de uma variável chamada Dados.
Dialogue: 0,0:03:49.96,0:03:51.90,Default,,0000,0000,0000,,Ok, e vou retornar esses dados.
Dialogue: 0,0:03:51.90,0:03:55.07,Default,,0000,0000,0000,,Vou retornar tudo o que estiver\Ndentro desse arquivinho aqui.
Dialogue: 0,0:03:55.87,0:03:56.87,Default,,0000,0000,0000,,Ótimo.
Dialogue: 0,0:03:56.87,0:04:01.64,Default,,0000,0000,0000,,Para isso acontecer\Neu tenho que fazer uma promessa.
Dialogue: 0,0:04:01.81,0:04:06.41,Default,,0000,0000,0000,,Chamamos isso de pro mais,\Nque é uma promessa e uma garantia
Dialogue: 0,0:04:06.61,0:04:10.95,Default,,0000,0000,0000,,de que se os dados forem lidos\Ncorretamente, vai dar certo.
Dialogue: 0,0:04:10.95,0:04:14.15,Default,,0000,0000,0000,,Vai mostrar tudo bonitinho,\Nsenão ele vai apresentar um erro.
Dialogue: 0,0:04:14.45,0:04:15.49,Default,,0000,0000,0000,,Então vamos lá.
Dialogue: 0,0:04:15.49,0:04:18.16,Default,,0000,0000,0000,,Eu trago aqui a minha lista de dados,
Dialogue: 0,0:04:18.16,0:04:21.69,Default,,0000,0000,0000,,que é o nome da minha função, e aí aqui\Neu coloco o ponto B.
Dialogue: 0,0:04:21.93,0:04:27.10,Default,,0000,0000,0000,,Então dados aqui contém\Ntodos aqueles arquivos lá
Dialogue: 0,0:04:28.27,0:04:30.00,Default,,0000,0000,0000,,dados, faço um
Dialogue: 0,0:04:30.00,0:04:33.00,Default,,0000,0000,0000,,console log e apresento todos os dados\Naqui na minha tela.
Dialogue: 0,0:04:33.74,0:04:38.18,Default,,0000,0000,0000,,Se não acontecer isso,\Nele vai me trazer uma mensagem de erro.
Dialogue: 0,0:04:38.18,0:04:42.68,Default,,0000,0000,0000,,Ou seja, se os dados tiverem corrompidos\Nou não estiverem no formato correto,
Dialogue: 0,0:04:43.08,0:04:47.19,Default,,0000,0000,0000,,ele já vai entrar aqui nesse get\Ne vai apresentar como erro.
Dialogue: 0,0:04:47.75,0:04:50.19,Default,,0000,0000,0000,,Esse é um exemplo de criar
Dialogue: 0,0:04:50.19,0:04:53.19,Default,,0000,0000,0000,,uma função com assim, que ao invés
Dialogue: 0,0:04:53.79,0:04:56.80,Default,,0000,0000,0000,,é o que vai acontecer\Nquando ele tiver com esse erro,
Dialogue: 0,0:04:56.96,0:04:59.96,Default,,0000,0000,0000,,ele vai fazer o erro bonitinho,\Nsem problemas
Dialogue: 0,0:05:00.20,0:05:02.77,Default,,0000,0000,0000,,de travar a sua página.
Dialogue: 0,0:05:02.77,0:05:05.77,Default,,0000,0000,0000,,Num modo síncrono, ele travava a página.
Dialogue: 0,0:05:05.87,0:05:09.98,Default,,0000,0000,0000,,Se deu erro, ele vai travar a página,\Nvai deixar você sair dela.
Dialogue: 0,0:05:09.98,0:05:15.21,Default,,0000,0000,0000,,Como nós estamos falando de um assíncrono,\Neu consigo manipular a minha página,
Dialogue: 0,0:05:15.65,0:05:19.72,Default,,0000,0000,0000,,limpar ou resetar\Ne iniciar minha função novamente.
Dialogue: 0,0:05:20.12,0:05:21.59,Default,,0000,0000,0000,,Então vamos lá.
Dialogue: 0,0:05:21.59,0:05:25.02,Default,,0000,0000,0000,,Bem pessoal,\Npercebam que aqui ele deu um erro.
Dialogue: 0,0:05:25.02,0:05:28.66,Default,,0000,0000,0000,,Ele está falando que não pode acessar\No dados A pode ser inicializado,
Dialogue: 0,0:05:29.86,0:05:30.23,Default,,0000,0000,0000,,então ele já
Dialogue: 0,0:05:30.23,0:05:33.23,Default,,0000,0000,0000,,entrou no cacete direto,\Njá é um exemplo do erro,
Dialogue: 0,0:05:33.40,0:05:38.50,Default,,0000,0000,0000,,mas isso não fez com que a minha aplicação\Nparasse, travasse.
Dialogue: 0,0:05:38.94,0:05:40.04,Default,,0000,0000,0000,,O erro está aqui.
Dialogue: 0,0:05:40.04,0:05:44.21,Default,,0000,0000,0000,,É que eu não estou passando\Ndentro de aspas simples
Dialogue: 0,0:05:45.61,0:05:49.78,Default,,0000,0000,0000,,agora ele me trouxe os dados do cliente.
Dialogue: 0,0:05:50.78,0:05:53.79,Default,,0000,0000,0000,,A última compra dele é se ele está ativo\Nou não.
Dialogue: 0,0:05:54.22,0:05:57.99,Default,,0000,0000,0000,,False Ele está inativo, ele está ativo.
Dialogue: 0,0:05:58.39,0:06:00.43,Default,,0000,0000,0000,,Então nós temos aqui
Dialogue: 0,0:06:00.43,0:06:03.50,Default,,0000,0000,0000,,dois clientes\Nativos e três clientes inativos.
Dialogue: 0,0:06:03.50,0:06:07.70,Default,,0000,0000,0000,,E olha as datas que eles fizeram\Na última compra, por exemplo.
Dialogue: 0,0:06:07.70,0:06:10.70,Default,,0000,0000,0000,,Isso aqui desde dois 2020.
Dialogue: 0,0:06:10.80,0:06:14.44,Default,,0000,0000,0000,,Isso ajuda\Nvocê a poder depois criar uma outra função
Dialogue: 0,0:06:14.74,0:06:18.01,Default,,0000,0000,0000,,que manda e mensagem para esses clientes\Npara que eles possam
Dialogue: 0,0:06:19.04,0:06:20.78,Default,,0000,0000,0000,,voltar a comprar.
Dialogue: 0,0:06:20.78,0:06:22.31,Default,,0000,0000,0000,,Esse é um exemplo.
Dialogue: 0,0:06:22.31,0:06:23.72,Default,,0000,0000,0000,,É assim que a gente.
Dialogue: 0,0:06:23.72,0:06:27.89,Default,,0000,0000,0000,,Agora que você já sabe os conceitos de\Nassim que eu convido você a ter
Dialogue: 0,0:06:27.89,0:06:31.49,Default,,0000,0000,0000,,um olhar de usuário e ao mesmo tempo de
Dialogue: 0,0:06:31.49,0:06:34.66,Default,,0000,0000,0000,,deve trazendo o seu mundo real.
Dialogue: 0,0:06:35.29,0:06:36.90,Default,,0000,0000,0000,,Ao olhar um aplicativo
Dialogue: 0,0:06:37.93,0:06:39.10,Default,,0000,0000,0000,,para o código aonde
Dialogue: 0,0:06:39.10,0:06:43.10,Default,,0000,0000,0000,,está o\NAO e aonde está o, assim como aplicá lo.