Aprenda sem servidor e AWS enquanto cria um aplicativo completo com React

1. Bem-vindo e introdução: Olá, e bem-vindo a este curso de compartilhamento de habilidades sobre como criar um aplicativo Fullstack React usando a AWS em modo sem servidor como backend. Neste projeto, aprenderemos como configurar nossa conta da AWS em servidor sem servidor. Em seguida, vamos implantar a API do Office e, em seguida, criar um novo endpoint de API, que nos permite enviar e-mails usando o serviço de e-mail simples da Amazon. Em seguida, vamos construir um front-end reagir, que nos permite inserir os detalhes que precisamos usar React hook e state, e depois enviar essa solicitação para nossa API para que nós recebamos esse e-mail. Ao final deste curso, você terá aprendido a criar um lambda API Gateway, que atua como um endpoint, permitindo que você crie facilmente APIs, saberá como interagir com o AWS SDK, que permite que você interaja com outros serviços, como o serviço de e-mail simples. Você também saberá como conectar seu aplicativo front-end React a essa API de back-end e ter a API de back-end implantada tudo usando sem servidor. Então, por que não entramos e damos uma olhada no primeiro vídeo? 2. Como configurar sua conta AWS: Neste vídeo, vamos configurar nossa conta da AWS. Se você já tem uma conta da AWS nas quais você pode fazer login, então você pode pular esta etapa e ir direto para o próximo vídeo. Então, precisamos procurar pela AWS e, em seguida, clicar no link superior. Para Amazon Web Services. Você vai pousar em uma de suas páginas de destino. E precisamos olhar para a parte superior para criar uma conta da AWS. Aqui, precisamos inserir nosso endereço de e-mail, uma senha, confirmar essa senha e dar um nome a essa conta. Então, eu vou chamar essas contas de curso da AWS. Uma vez nesta página, você pode escolher uma conta profissional ou pessoal. Eu vou usar uma conta pessoal e eu recomendo que você faça isso a menos que você tenha certeza de que você vai usar isso como uma conta de negócios. Dentro aqui, você precisa adicionar um número de telefone que você é contatos pertencem, em seguida, caber em seu país, endereço e código postal. A última coisa que você precisa fazer é ler os termos e condições e, em seguida, marcar essa caixa. Com tudo isso feito, você pode clicar em criar conta e continuar. Agora você pode acessar sua página de informações de pagamento. A maneira como a AWS funciona é que ela tem oito níveis gratuitos do peso que nossa AWS funciona é que é um serviço de pagamento por uso. Então, se você criar uma API e houver solicitações feitas para a API, você pagará apenas pelo número de solicitações feitas. São pequenas, pequenas quantias de dinheiro. E você também recebe um nível gratuito. Isso significa que todos os meses você tem um número definido de solicitações de API, um número definido de Lambda, uma quantidade definida de dínamo que você pode usar gratuitamente antes mesmo de pagar por qualquer coisa. Se você seguir este curso, então você será capaz de encaixar tudo o que você faz. Pesar sobre o elemento de nível gratuito, então você vai realmente ser cobrado qualquer coisa. Infelizmente, isso significa que precisamos inserir um cartão de crédito ou débito. Assim que ultrapassarmos esse limite. A Amazon poderia faturar automaticamente. Por exemplo, tenho corrido oito. Pedimos uns anos. Eu tenho uma grande perda de projetos e minha conta mensal chega a cerca de US $1,35. Então, estas são pequenas, pequenas quantias de dinheiro. E você sempre pode voltar e excluir coisas para que você não seja mais cobrado por elas. Depois de preencher seu número de cartão e usar seu endereço, você também pode adicionar um novo endereço se precisar. Você precisa clicar, verificar e adicionar. Depois de introduzir os dados do seu automóvel, irá aceder a esta página onde lhe será pedido que confirme a sua identidade. Você pode fazer isso via mensagem de texto ou fazendo uma chamada. Certifique-se de selecionar o país correto. Introduza o seu número de telefone, introduza o código de verificação de segurança na parte inferior da página e, em seguida, clique em Enviar um SMS. Em seguida, você receberá essa mensagem. E você terá que inseri-lo em sua tela para confirmar que esse é o seu telefone. Então insira seu código aqui e clique em Verificar código, e ele estará pronto para preencher essa configuração. Agora podemos escolher o nosso plano de apoio. Eu vou com uma diversão grátis. Mas se você quiser suporte extra e respostas mais rápidas para suas consultas de suporte com a AWS, você pode optar por uma empresa, um plano de desenvolvedor. E se você já é um negócio estabelecido e sabe que quer suporte premium, então você pode selecionar o plano de negócios. Por enquanto, vou escolher o plano básico. E isso é tudo concluído. Às vezes, leva um pouco de tempo para criar sua conta da AWS. Mas você sempre pode tentar clicar no botão de login no console e, em seguida, digitar seu endereço de e-mail e senha. Se você voltar a esse assunto mais tarde e precisar fazer login em sua conta, pesquise pela AWS. E em vez de clicar em criar uma conta da AWS, clique no menu suspenso da minha conta e selecione Console de gerenciamento da AWS. Quando clicarmos sobre isso, ele nos levará a uma página de login. Precisamos selecionar o usuário root. Podemos então colar em nosso endereço de e-mail e senha. E entraremos em nossa conta da AWS. Aqui dentro. Podemos então continuar com o resto deste curso. Como nossa conta da AWS foi criada. 3. Como configurar o Serverless para trabalhar com a AWS: Então, a primeira coisa que precisamos fazer para que tudo isso funcione é precisamos configurar um usuário. Então, isso é sem servidor, pode fazer alterações em nossa conta da AWS. A maneira como fazemos isso é fazer login em nossa conta da AWS. E então clicamos na caixa de pesquisa e procuramos o que eu sou, que é gerenciamento de acesso de identidade. Quando clicarmos aqui, vamos chegar a uma página onde há um monte de detalhes diferentes. Existem grupos e usuários e funções e políticas. Mas para isso, tudo o que precisamos fazer é clicar em usos à esquerda e adicionar um novo usuário. Aqui podemos definir o nome do usuário. Vou chamar esse compartilhamento de habilidades de usuário sem servidor. E aqui no tipo de conta queremos selecionar o acesso programático. Isso significa que poderemos usar o AWS SDK e a CLI para acessar nossa conta por meio desse usuário, que é como funciona sem servidor. Em seguida, estamos dando permissões. E vamos passar para Anexar políticas existentes diretamente. E porque queremos ser capazes de fazer muitas coisas diferentes, como criar buckets do S3, criar uma API, bem como lambdas. Queremos selecionar o acesso de administrador. Nós a seguir, vamos para as etiquetas a seguir. E se você precisar, você pode adicionar algumas tags. E isso marcará o usuário para que você saiba o que esse usuário tem feito. Finalmente, podemos entrar em revisão e estamos apenas dizendo que temos o compartilhamento de habilidades usuário sem servidor com acesso programático. Além disso, eles têm uma política gerenciada de acesso de administrador. Então, podemos clicar em criar usuário. Isso agora vai criar nosso usuário aqui. E certifique-se de que não fecha esta tela porque precisamos desses detalhes. Então agora temos essa configuração. Podemos ir ao nosso computador e abrir um terminal. Em nosso terminal, precisamos realmente obter configuração sem servidor em nosso computador. A maneira que fazemos isso é executar npm install menos g porque é um pacote instalado globalmente e sem servidor. Agora, se você não obteve nó e NPM instalado, e eu vou estar ligando e nas notas desta lição como você pode instalá-los. Mas se você tiver, isso deve funcionar imediatamente. Isso leva um pouco de tempo para configurar, então eu vou voltar para você assim que tudo tiver sido configurado. Agora que a lei terminou de configurar, podemos usar essa CLI sem servidor para configurar as credenciais para o usuário que acabamos de criar. A maneira que fazemos isso é em nosso terminal, nós digitamos credenciais de configuração sem servidor. E essas são credenciais para a AWS. Então, o provedor é a AWS. E também queremos dizer que estamos criando essas credenciais em um perfil. Então traço, perfil de traço. E haverá usuário sem servidor Compartilhamento de habilidades. A próxima coisa que precisamos adicionar a isso são as credenciais. Então precisamos Dutch dash k e, em seguida, voltar para nossa conta da AWS, onde podemos copiar nossa chave de acesso e colá-la aqui. Assim como a chave. Precisamos também adicionar traço faz segredos. E mais uma vez, vá para o nosso código. E agora vamos selecionar nosso botão de show aqui, copiando o segredo. E é isso que vamos colar nesse valor secreto. Então, acabei de copiar isso. Vou entrar aqui e colar isso ali e apertar Enter. O que isso vai fazer é configurar essas credenciais que possamos usá-las no futuro. É tudo o que temos de fazer para esta lição. E no próximo vídeo, vamos estar olhando para configurar nosso repositório e criar nossa primeira API. 4. Como implantar nossa primeira API: No último vídeo, configuramos nosso usuário sem servidor. Então neste vídeo vamos usar esse usuário para criar nossa primeira API. Então o que precisamos fazer para começar é criar uma pasta para este projeto. Vou fazer isso executando o MKDIR, que é criar um diretório e chamá-lo curso de e-mail de compartilhamento de habilidades. E eu vou mudar o diretório para o curso de e-mail do traço de compartilhamento de habilidades. Então, agora que estou aqui, o que podemos fazer é criar nossa pasta api. Novamente, usaremos a CLI sem servidor. Então vamos chamá-lo de uma função de criações sem servidor. E vamos usar os modelos têm traço, traço, modelos, AWS, js de nó de traço e, em seguida, o caminho em que queremos instalar isso. Então traço, traço caminho. E o caminho para isso será a API de traço de e-mail de compartilhamento de habilidade. Então, agora que criamos esse projeto de API, vamos entrar em código VS, dar uma olhada no código e, em seguida, implantar nossa primeira API. Então, se entrarmos em uma janela de código visual, se você clicar em Abrir pasta e encontrar o curso de email de compartilhamento de habilidades e clicar em abrir. Então, no momento, podemos ver isso tem uma pasta de API e decretar. Ele tem um 100.json e um YAML sem servidor. Então, em nosso YAML sem servidor, Este é o lugar onde estamos configurando o que nosso pacote sem servidor fará quando implantá-lo. Tem um serviço. E diz que estamos usando a AWS. E nó 12. Há muitos comentários aqui sobre recursos extras que você pode usar. Mas vamos ignorá-los por enquanto. E podemos olhar direto para cima as funções. Dentro desta função, ele diz que há uma função hello e o manipulador é um manipulador. Olá. Se olharmos para o manipulador ab.js, ele exporta uma função chamada Olá, e que leva um evento que retorna algum JSON. Então a última coisa que precisamos fazer é voltar para o nosso YAML sem servidor. E vamos transformar essa função em uma API. A maneira que fazemos isso é dizer que este manipulador também tem eventos. E um desses eventos é HTTP. E o que isso vai fazer é que isso vai funcionar. Um gateway de API, onde podemos então usar isso para acessar esse lambda através de uma API. As premissas que precisamos para isso, Ei, configuração TTP é um caminho. E eu vou dizer que o caminho para isso é apenas Olá traço texto. Podemos verificar se é um get ou um post definindo o método. E neste caso vai ser um método get. E, finalmente, temos um recurso chamado causa, que é permitir ou não permitir que a API seja feita uma solicitação de um URL diferente. E neste caso, queremos definir isso como verdadeiro para que possamos acessar isso do nosso aplicativo web no futuro. Se salvarmos isso, temos um último pedaço de configuração que precisamos fazer. Lá em cima no provedor. Temos de dizer como vamos lançar isto. E vamos implantar isso com um perfil. E o perfil é o que fizemos anteriormente dentro do nosso terminal, que é o nosso usuário sem servidor de compartilhamento de habilidades. E isso é apenas dizer sem servidor qual conjunto de credenciais usar. Também podemos adicionar em uma região. E eu vou fazer isso e definir aquilo para a Irlanda. Mas você pode configurá-lo para onde quer que seja a região mais próxima que você. Então, para mim, a Irlanda é a UE, West dash 1. E se eu salvar isso, temos tudo o que precisamos. Agora podemos abrir o nosso terminal. E dentro de nosso terminal, podemos CD em nossa pasta api. E uma vez que estamos nessa pasta, podemos executar a implantação do SLS. E o que este comando vai fazer é olhar para este YAML sem servidor treinar quais recursos e quais sistemas precisam de construção, obter o código e implantar tudo isso na conta usando nosso novo usuário sem servidor de compartilhamento de habilidades. Isso leva um pouco de tempo para fazer, mas eu vou voltar para você quando NIH terminar. Agora que terminou a implantação, Podemos ver que temos uma função de Olá, que é o que esperaríamos, porque não temos uma função de Olá. E nós também temos um ponto final API, que tem um caminho que é Olá traço teste no final. Esse primeiro bit é gerado aleatoriamente como parte da implantação do gateway de API. E é isso que vamos testar em um minuto. Antes de fazer isso, vamos voltar para o nosso console da AWS novamente. E inerente, vamos clicar em serviços no topo e procurar lambda. Se entrarmos aqui, agora podemos ver que realmente temos API def hello lambda, e que foi implantado há apenas dois minutos. Então, de volta ao nosso código, vamos copiar este URL que temos aqui. E nós vamos para o nosso navegador e colar isso em uma nova guia. Quando atinge essa API, recebemos uma mensagem de ir versão sem servidor 1, sua função executada com sucesso e, em seguida, uma entrada. Em nosso código. Se realmente temos um olhar para o manipulador ab.js, Temos uma mensagem e uma entrada, e é isso que estamos retornando a partir desta função. Isso mostra que este ponto final de API está acionando essa função e retornando esses dados. Embora isso seja muito legal, o que vamos fazer no próximo vídeo é alterado o código dentro da nossa API que possamos enviar um e-mail da nossa API para nossas contas de clientes. 5. Como criar nossa API de e-mail de envio de email': No último vídeo, tivemos um apenas para implantar nosso primeiro lambda e nossa primeira API e testá-lo que ele estava funcionando. Neste vídeo, vamos criar um endpoint de API para enviar e-mails aos nossos clientes. E para começar com o que vamos fazer é um pouco de limpeza dentro deste arquivo YAML excedente. O que vamos fazer é apagar tudo. O que é comentado para reduzir a quantidade de desordem neste arquivo para que possamos remover tudo. Então ficamos com apenas o provedor de serviços e as funções. Então tudo o resto pode salvar isso. E temos um arquivo muito mais limpo. Agora, para começar a criar esta nova API, precisamos criar um novo manipulador. Então definido dentro da nossa API, vamos criar um novo arquivo e chamá-lo enviar email dot JS. Dentro deste arquivo, precisamos criar nosso código para o nosso lambda. Então, a maneira que você cria um lambda é você diz que manipulador de pontos de exportação é igual uma função de evento assíncrono. Então isso está dizendo que estamos criando uma função assíncrona que leva o parâmetro de eventos. E então é aqui que processamos isso. evento tão honesto. Sabemos que vamos passar o endereço para o qual estamos enviando, o endereço para o qual estamos enviando de um assunto e algum texto. Então vamos extrair isso do corpo do evento. A maneira como o API Gateway funciona é que stringify é o corpo que ele envia para o nosso lambda. Portanto, também precisamos possuir stringify isso. Então nós vamos dizer que const colchetes para destruir os valores de, podemos dizer de assunto e texto é igual a corpo de ponto de evento JSON.parse. Agora a lei está feita. Precisamos verificar se todos esses valores existem porque existe a possibilidade de que alguém enviou uma solicitação para esta API, mas não passou todos os dados. Então, se você vai copiar tudo isso e colá-los, só para tornar o meu trabalho um pouco mais fácil. Então, se não há um dois ou não há um de, ou não há um assunto, ou não há um texto. Então retornaremos uma resposta 400. E em vez de gravar o JSON exato aqui, o que eu vou fazer é criar uma nova função chamada sublinhado 400. E isso vai tomar um objeto como parâmetro. E ele vai ter uma mensagem nele. Neste caso, eu vou dizer parâmetro ausente no corpo da solicitação. E agora precisamos fazer este 400 funcionar. Então, na parte inferior do arquivo, vamos dizer que Const sublinhado 400 vai ser uma função como essa. E vai assumir o corpo. Então, neste caso, o corpo vai ser uma mensagem. E agora precisamos configurar alguns parâmetros. Então isso vai retornar um objeto com cabeçalhos e com um código de status. E finalmente com um corpo. Então, neste caso, o código de status é 400. Então podemos colocar o número de 409. O corpo. A maneira que precisamos retornar isso é que precisamos retornar uma string dos dados. Então isso vai ser JSON dot stringify, passar no corpo. E, finalmente, precisamos definir alguns cabeçalhos. Portanto, há três cabeçalhos que precisamos configurar para que isso funcione. Esses são o tipo de conteúdo com um T maiúsculo e que vai ser Application barra JSon, que diz a resposta que estamos enviando de volta algum JSON. Precisamos de acesso, controle, permitir métodos. E isso é apenas dizer o que os resorts solicitantes, se estamos autorizados a fazer um post get ou qualquer coisa assim. E, por enquanto, vamos com a estrela. E o segundo é o controle de acesso permitir origens. Alguém vai copiar isto e mudar os métodos para a origem. E novamente, deixe-o como estrela. Então é assim que nós, este é o objeto JSON que precisamos retornar toda vez que respondemos a um API Gateway solicitações para um lambda. E podemos mudar o código de status e o corpo dependendo do tipo de respostas. Se voltarmos ao nosso conteúdo, podemos agora continuar com o processo. Agora que temos esses detalhes, o que podemos fazer é usá-los para criar os parâmetros. Que usamos para passar para o serviço de e-mail simples da Amazon. Então const, os parâmetros de e-mail são iguais a um objeto. O primeiro é um destino. Isso é um objeto com uma matriz de dois endereços. E esse array só terá um item, que é o e-mail para o qual estamos enviando isso, além de ter um destino. Também temos uma mensagem. Essa mensagem tem um corpo. O corpo, no nosso caso, vai ser tributado. E esse campo de texto tem o valor de dados do texto, bem como um corpo. Também precisamos de um assunto. O sujeito tem um campo de dados do sujeito que passamos. Isso pode parecer um pouco complicado, mas com o Amazon SES, ele permite controles muito melhores, como enviar diferentes variantes do corpo, dependendo do que os dispositivos que o cliente está lendo. A última coisa que precisamos configurar é a fonte. E é daqui que vamos enviá-lo. No nosso caso, isso é de. Então, esse é o nosso e-mail parâmetros toda configuração. Então agora podemos começar a olhar para enviar este e-mail. Vamos usar um ensaio S, que é o serviço de e-mail simples. E porque isso é assíncrono e estaremos usando um peso. Vamos embrulhar isto tudo numa tentativa de captura. E isso significa apenas que se algo der errado na chamada SES, então seremos capazes de detectar esse erro. Então o que precisamos fazer agora é esperar SES dot enviar e-mail passando em nossos parâmetros EML. E, em seguida, para ter certeza de que é uma promessa, adicionamos dot promise no final, que é algo que você pode fazer com muitos dos serviços da AWS. Se isto for bem sucedido, então vai continuar dentro deste bloqueio de tentativa. E vamos voltar e sublinhar 200 desta vez. E isso não precisa de parâmetros. Então, agora temos que fazer 200. E fazemos isso copiando a função 400. E então precisamos mudar o 400 é 28200. Não temos um corpo nisso, então podemos nos livrar disso. O corpo aqui em baixo vai ser apenas string vazia e, em seguida, mudar o código de status para 200. Podemos salvar isso. E depois voltar ao nosso código. Então isto é o que vai acontecer se for um pedido bem sucedido. O que vai acontecer se for um pedido mal sucedido, vai cair nesta captura. E é sempre bom fazer logout de seus erros na consola. Portanto, o erro de log do ponto do console, enviando e-mail. E, em seguida, a mensagem de erro. Além disso, também precisamos devolver um 400. Então retorne sublinhado 400. E isso vai ter uma mensagem de incapaz de enviar o e-mail. Agora podemos salvar isso. E alguns de vocês podem ter notado que usamos o SES, mas não o definimos. Então dy está absolutamente certo. E o que precisamos fazer é rolar até o topo do nosso arquivo. E antes de exportar nosso manipulador, precisamos dizer que const AWS equivale a exigir o AWS SDK. E agora que temos o SDK, podemos criar uma nova instância do cliente de serviço de e-mail simples. Então const SES é igual a nova AWS, pontos, SES, e salve isso. E agora temos todo o código que precisamos aqui para enviar um e-mail para um cliente do nosso endereço. Então agora a última coisa que precisamos fazer é entrar em nosso arquivo YAML sem servidor, encontrar funções R e adicionar uma nova função. Então precisamos ir para o mesmo nível que o “olá”. E eu tive que mandar um e-mail. Também precisamos de montar um encarregado. E o nosso encarregado é a arte. Enviar manipulador de pontos de e-mail. Então é o nome do arquivo ponto que você exportou. Então, no nosso caso, envie um manipulador de pontos de e-mail. Também temos eventos. E isso vai parecer muito parecido com o acima, onde temos HTTP. Isto vai ter um caminho. E desta vez o caminho vai ser enviar e-mail. Então vamos ter um método. Mas desta vez, em vez de termos lacunas como fizemos no topo, queremos ser capazes de postar dados. Então estamos indo para um posto. E a última coisa que precisamos fazer é definida como true para que possamos acessar isso de outra URL. Se salvarmos tudo isso, agora adicionamos nossa função à nossa API. E temos uma última coisa que precisamos fazer. Portanto, por padrão, tudo na Amazon tem a quantidade mínima de permissões possível para fazer seu trabalho. Então, como agora estamos usando o SES da Amazon, precisamos dar a esses lambdas de API e um pouco de permissão extra. Fazemos isso indo até um provedor e adicionando uma declaração extra, que é declarações de função IM. Esta declaração aqui, vai ter um efeito que vai ser permitido, o que significa que estamos permitindo que estes lambdas para fazer algo extra, bem como uma permissão. Nós também temos uma ação. E estas serão uma série de coisas que estamos permitindo que esses lambdas façam. No nosso caso, que é estrela cólon SES, que diz que estamos permitindo que o SES faça qualquer coisa para estes lambdas. A última coisa que precisamos fazer é adicionar um recurso. E no nosso caso, isso vai ser uma série de estrelas dizendo que foram permitidos em qualquer um dos endereços de e-mail que temos armazenado. Se salvarmos isso, agora temos nossas permissões são adicionadas para nossa API. E nós temos nossa nova configuração de endpoint de API. Se voltarmos ao nosso terminal e executarmos o SLS, implante mais uma vez. O que vai acontecer é que agora ele vai adicionar esse endpoint extra e esse lambda extra à nossa implantação e dar-lhes as permissões de que eles precisam. Demora um pouco, mas depois vamos testar como funciona. E um passo a mais que precisamos fazer para que tudo funcione. Então, agora que terminou a implantação, Podemos ver que temos duas funções e temos dois pontos finais. Um é um get e outro é um post, que é exatamente o que esperamos. Antes de testarmos isso, enviar e-mail, precisamos voltar ao nosso console da AWS e procurar um serviço de e-mail simples. Este é o serviço que estamos usando para enviar e-mails. E antes de podermos enviar e-mails, precisamos provar que estamos enviando de uma conta que possuímos. Fazemos isso indo para endereços de e-mail e verificamos um novo endereço de e-mail. Aqui, você pode inserir seu próprio endereço de e-mail. Estou feliz de mina, como algumas artes, codificação completa, ponto IO e clique verificar este endereço de e-mail. Então, agora me enviaram um e-mail. Então eu preciso ir para a minha caixa de entrada e clicar no Eu verifiquei este e-mail e eu entrarei em contato com você em apenas um segundo. Então eu verifiquei isso agora e atualizei. E eu posso ver que meu marido de e-mail confirmou, o que significa que agora eu tenho permissão para enviar e-mails de ou para este endereço de e-mail. Então eu vou apenas copiar isso. E agora o que precisamos fazer é testar nosso envio de e-mail e apontar. A forma como fazemos isso é porque este é um pedido de correio. Não podemos simplesmente colocar o URL no navegador. Mas há uma ferramenta muito legal chamada mulher do correio. Então, se você procurar por post mulher dot IO, ele abre este navegador onde você pode digitar sua URL. Alterado o método. Então, um get ou um post ou um put, e, em seguida, adiciona alguns dados também. Então aqui nós, precisamos verificar se é um post. E então precisamos obter nossa URL de nossa implantação e acrescenta isso aqui. Então precisamos obter este URL, que é o nosso post de e-mail de envio e colá-lo aqui. A última coisa que precisamos fazer é ir e ligar a entrada bruta, o que nos permite passar um corpo. Como você pode se lembrar, precisamos de quatro parâmetros. Precisamos de dois endereços. Então o que eu vou fazer é colar os dois nisso. Eu também preciso de um. E, por enquanto, use o mesmo endereço de e-mail para envio de e para. Mas no próximo vídeo, o que vamos fazer é adicionar lá para que você possa enviá-lo para qualquer endereço que você gosta. Precisamos também de acrescentar um assunto. E eu vou colocar o assunto como meu e-mail de teste. E, finalmente, a última coisa que precisamos é do texto. E esse texto vai ser string. Algo ao longo das linhas deste é um e-mail enviado através da minha API. Se apertarmos agora enviar, o que vai acontecer? Vai fazer o pedido. E vemos que temos uma resposta de 200. Isso significa que provavelmente fizemos com sucesso a chamada de API e obtivemos de volta essa resposta. Agora vou saltar para os meus e-mails para podermos ver como é isso. Agora estou na minha conta de e-mail. Eu posso ver que eu tenho um e-mail com o assunto de Eu escrevi errado, mas meu e-mail de teste, Eu enviei o e-mail de alguns para resumir codificação completa. E este é o conteúdo da mensagem. Isso só mostra que nosso e-mail está funcionando e que agora podemos acessar essa API para enviar um e-mail para o nosso endereço de e-mail. No próximo vídeo, o que vamos fazer é entrar no SES e fazer um aplicativo para verificar nossa conta de e-mail para que possamos enviar e-mails para qualquer endereço de e-mail que gostamos de nossos endereços de e-mail verificados. Então, quando tivermos feito isso, ele nos permitirá enviar para qualquer cliente que entramos em nozes para caixa de endereço de e-mail. 6. Como sair do modo de sandbox (opcional): No último vídeo, configuramos nossa API de e-mail, endpoint e lambda, não testados para que possamos enviar um e-mail de e para o nosso endereço de e-mail verificado. Neste vídeo, o que vamos fazer é configurá-lo para que possamos enviar e-mails de nossos endereços de e-mail verificados para o e-mail que quisermos. Para fazer isso, precisamos voltar ao serviço de e-mail simples. Poderíamos procurar aqui, ou podemos listar são visitados serviços sob apenas clicado no serviço de e-mail simples. Aqui dentro. Se clicarmos em estatísticas descendentes, podemos ver que estamos tendo contas em oito modo sandbox. Isso significa que só podemos enviar de e para endereços de e-mail que são verificados. Então só podemos enviar de ou para. Alguns não são codificação completa, Das IO. Isso não é ótimo, porque não vale muito a pena enviar um e-mail para si mesmo. Então, se voltarmos aqui, podemos solicitar oito limites de envio aumentados. Isso nos levará a uma nova guia onde vamos para o suporte da Amazon. E queremos fazer um lemma de serviço, aumentar e aumentar os limites de envio para SES. Aqui podemos inserir alguns detalhes, como sua fita de correspondência, o URL do seu site e detalhes como você só enviará e-mails para pessoas que optaram por participar. Encaixar todos esses detalhes é muito importante, mesmo que eles digam que são opcionais. Porque a Amazon não permite que você verifique sua conta e saia do modo sandbox. Se você não contou a eles como isso vai funcionar. Isso é para protegê-los para que você não esteja enviando e-mails para pessoas que não querem receber e-mails de você. Então certifique-se de que você caiu tudo isso. E então você pode ir até aqui e selecionar a região. Então, para mim, é uma ilha EUR. E queremos selecionar a cota de envio diária. E você pode definir isso para um número. Vou com 1000, que significa que posso enviar 1000 e-mails por dia. E então é isso. Desde que você tenha preenchido estes são honestamente com o URL do seu site, quem você vai enviá-lo. Então, se, digamos, tem um site que seu cliente inseriu seu e-mail dizendo que deseja receber atualizações e como você processará se houver reclamações. E um bom detalhe para isso provavelmente está indo e dizendo, eu vou excluí-los da lista de e-mail para que eles não recebam nenhum e-mail futuro. Depois de ter feito tudo isso, você pode adicionar um pouco de uma descrição, se quiser, e, em seguida, clicar em Enviar. Isso permitirá que você faça essa solicitação e envie e-mails para vários clientes, não apenas os dois endereços de e-mail verificados. Às vezes, a Amazon não permite que você faça isso, mas todo esse projeto ainda funciona se você não tiver verificado isso. No próximo vídeo, o que vamos fazer é dar uma olhada na construção nosso React up para que tenhamos um front-end para lidar com a criação desses e-mails. 7. Como criar nosso aplicativo React: No último vídeo, demos uma olhada na configuração do Amazon SES para sair do modo sandbox. Se já fez isso, o cara é ótimo. Mas se não o fizerem, continuaremos e seremos capazes de fazer tudo o que precisamos para ser capazes de fazer. Então, neste vídeo, vamos estar configurando nosso React up. Então, se você voltar para o nosso código e podemos fechar ambos os arquivos e em nosso terminal, mas atualmente na API. Então precisamos de CD em nossa rota, que tem o curso de email de compartilhamento de habilidades. Aqui, precisamos instalar um React up. Então, a maneira como fazemos isso é usando Create React up. Se você ainda não usou Criar Reagir antes, então você pode acessar o Google e procurar o aplicativo Criar Reagir. E você poderá ver o pacote de instalação aqui. Então, começando com Criar Reagir. E você pode seguir este Guia de Início Rápido para obter a configuração. Então, de volta ao nosso código, podemos usar n px, criar traço, reagir traço até nos permitir criar um novo reator para cima. E então nós vamos estar chamando isso para cima. Isto vai criar uma nova pasta nas raízes deste repo. E então vai instalar todos os pacotes necessários, arquivos e dependências que precisamos para executar o nosso React up. Isso leva um pouco de tempo para configurar, então eu vou voltar para você quando isso estiver feito. Então, agora que terminou a instalação, Podemos ver que ele está nos dizendo que podemos executar Yarn, começar a iniciar nossas reage acima. Mas primeiro vamos dar uma olhada no código UPC que é dado. Isto é dado como uma pasta pública e uma pasta de origem. E a primeira coisa que vamos olhar é app.js. Então aqui podemos ver que temos uma imagem, uma tag p, tag de parágrafo, um link dizendo aprender, reagir. O que vamos fazer é apagar um pouco disto. Então exclua a parte superior e substitua por um H. E Hum, vamos chamá-lo de meu aplicativo de e-mail. E, em seguida, fora do nosso cabeçalho, vamos adicionar uma nova string. E isso vai ser apenas um contêiner de e-mail. Se salvarmos isso, agora podemos entrar em nosso terminal e podemos ir CD em nosso aplicativo. E agora que estamos em cima, podemos executar MPM start, que vai começar nosso React up. Como você pode ver, é aberta uma nova guia onde eu vou reagir vai ser carregado. Leva um pouco de tempo para conseguir a configuração. E lá vamos nós. Temos o padrão Reagir com o nosso, meu e-mail até conteúdo. E, em seguida, bem na parte inferior, ele diz recipiente de e-mail. O que vamos fazer é fazer melhor com CSS para mudar isso em torno um percevejo no nosso código. A primeira coisa que vamos fazer é mudar o E. Vamos mudar o logotipo que estamos carregando. No momento estamos carregando logo ponto SVG. Mas o que eu vou fazer é adicionar o logotipo completo de codificação. Então eu vou arrastar isso para aqui. E lá temos o logotipo para codificação completa. Em nosso app.js. O que podemos fazer é mudar de onde estamos importando o logotipo e mudar para codificação completa. Logotipo ponto PNG. E isso é apenas arrastar isso um pouco para fora. Então, sim, é codificação completa, logótipo ponto PNG. Se guardarmos isso e voltarmos aqui, podemos ver que o logotipo mudou, então ainda somos robôs, mas o estilo ainda não está certo. Então aqui podemos ir para o nosso ponto AP CSS e mudar algumas coisas. A primeira coisa que queremos mudar é tornar o logotipo um pouco menor. Então mude-o de 40 os homens para dez V min. Nós também pode excluir esta seção de mídia como isso é o que está fazendo com que o aplicativo para girar. E parece um pouco louco. Agora precisamos encontrar o cabeçalho do nosso aplicativo. Então vamos mudar a min-altura de 100 para cinco. E vamos nos livrar dessa direção de coluna. Vamos deixar um centro de itens de linha e justificar o Centro de conteúdo e tudo o resto. Então, se economizarmos lotes, voltamos ao nosso código. Agora podemos ver que temos o nosso logotipo e, em seguida, o título do aplicativo. Isto parece muito mais limpo. Agora o que podemos fazer é que podemos realmente definir esta área de conteúdo de e-mail para que tenhamos mais do que apenas um campo de texto e possamos inserir um endereço de e-mail, um assunto, e o texto que queremos enviar, e então realmente enviá-los . Então é isso que vamos fazer no próximo vídeo. 8. Como criar nossa componente de formulário de e-mail: No último vídeo, chegamos a um ponto em que tivemos um personalizado reagir com nosso logotipo e nosso título com apenas uma sequência de contêiner de e-mail. E neste vídeo, o que vamos fazer é atualizar este contêiner de e-mail para ser um novo componente e, em seguida, adicionar as caixas de entrada para o endereço til, bem como um assunto e o conteúdo do e-mail. Se entrarmos em nosso código, o que queremos fazer é substituir esse texto por um componente. Então o que precisamos fazer é ir para serras e criar um novo arquivo e chamar este novo recipiente de e-mail arquivo dot js X. Aqui, o que podemos fazer é primeiro precisamos importar Reagir de Reagir como este é um componente Reagir. E então precisamos declarar a função como normalmente faríamos. Então Comcast recipiente de e-mail é uma função. E essa função retorna div com uma classe de recipiente de e-mail. Dentro dessa div, ainda queremos o texto do recipiente de e-mail. E a última coisa que precisamos fazer neste arquivo é salvo na parte inferior, exportar contêiner de e-mail padrão. Se salvarmos isso, agora podemos voltar para o nosso app.js. E aqui temos o texto para recipiente de e-mail. Podemos excluir isso e adicionar um novo componente chamado recipiente de e-mail como esse. E quando eu fiz isso, ele importou automaticamente os componentes funcionais do contêiner de e-mail do contêiner de barra ponto. Se salvarmos isto, podemos olhar para o nosso cinto. E ainda diz contêiner de e-mail. Mas desta vez está a tirá-lo daquele componente. Então agora o que podemos fazer é voltar para esse componente e atualizá-lo para ter os campos que queremos. Então aqui, o que nós também vamos estar fazendo é que vamos estar usando um pacote chamado material UI. Isso é ótimo como um nos permite muito facilmente fazer componentes de boa aparência. Então eu vou fazer é eu vou bater este mais em um terminal para criar um segundo terminal. E aqui eu vou executar npm instalar traço, traço salvar material. UI Dash. Encaminhar barra chamada. Agora, enquanto PSI está em execução, o que podemos fazer é começar a usar alguns desses componentes. Então, em vez de dizer contêiner de e-mail, o que queremos fazer é adicionar um grupo para agrupar tudo isso juntos. Então o que eu vou fazer é criar um elemento chamado papel. E esses elementos de papel que precisamos importar de UI material. Então, o papel de importação de adiciona material UI barra núcleo. Dentro deste papel, queremos adicionar um formulário. E não precisamos da ação no telefone. Então, dentro do formulário, queremos adiar os campos. A primeira coisa que precisamos é de um campo de texto. E este campo de texto vai ter alguns atributos nele. O primeiro atributo que vamos ter nele é um ID. E esse ID será o endereço de e-mail de destino. E assim como esse id também vai ter um rótulo. E esse rótulo vai ser o que queremos exibir logo acima dessa entrada. No nosso caso, esta vai ser a versão agradável, por isso é o endereço de e-mail de destino. Agora, quando salvamos este arquivo, precisamos primeiro importar nosso campo de texto. Então, podemos adicionar isso como outra importação para a nossa chamada de interface do usuário material. Salvando de novo, isso agora funcionou. Para que possa passar para o nosso código. E vemos que temos o endereço de e-mail. E é aí que uma caixa de texto que podemos inserir coisas. Isso é ótimo, mas agora precisamos adicionar mais alguns campos. Assim, além de ter um campo de texto para o endereço de e-mail, queremos outro campo de texto, que será e-mail, desculpe, ID é igual ao assunto do e-mail com um rótulo de assunto do e-mail. E um terceiro, que será um campo de texto com um ID de conteúdo de e-mail e um rótulo de e-mail. Conteúdo também. A última coisa que queremos é adicionar um botão na parte inferior. Então o que podemos fazer é dizer que temos um, outro botão. E vamos fazer um pouco de estilo nisso. Então, vamos dizer que vai haver uma variante. E isso só diz a esses componentes materiais da interface do usuário, que tipo de Boston queríamos ser. E vamos dizer que é um componente contido. Também podemos definir a cor. E neste caso, vamos com as primárias. E depois feche isso. E dentro deste botão nós vamos enviá-lo, ter um SMS de enviar e-mail. Se salvarmos tudo isso, precisamos importar nossa Boston, pois ainda não fizemos isso. Então, entre em nossa chamada de interface do usuário material e salve-o para que isso seja construído com sucesso. Agora podemos ir para o nosso aplicativo e ver que temos três caixas de entrada sob o botão. Mas o layout disso não é ótimo. Então o que vamos fazer é voltar ao nosso código e adicionar um pouco de estilo. Em nossa fonte, cria um novo arquivo e chama esse arquivo. contêiner de e-mail ensinou CSS. E aqui, podemos adicionar algumas coisas. A primeira coisa que precisamos adicionar é um controle para o próprio contêiner de e-mail. Então recipiente de e-mail, e o que queremos fazer é adicionar um pouco de uma margem para que ele não está tão perto da borda. Então a margem vai ser de dez pixels. Além disso, queremos alterar o layout do formulário dentro. Isso mudará a forma como esses componentes dentro do formam um par. Então, a maneira que fazemos referência que é o formulário de espaço de contêiner de e-mail. E queremos adicionar um pouco de preenchimento de dez pixels. Também queremos alterar o método de exibição. Então a exibição vai ser linho. E, finalmente, a direção flexível vai ser coluna. Agora temos isso. Podemos salvar esse arquivo, voltar ao nosso contêiner de e-mail, Dr. Jay Sx. E precisamos importar esse arquivo CSS. Então importar ponto barra e-mail contêiner pontos CSS. E agora, quando entramos, podemos ver que isso é colocado para fora de uma maneira muito mais agradável. A única coisa que eu quero mudar agora é o fato de que este botão é muito grande. Então, podemos voltar para o nosso código e nosso CSS e adicionar outra coisa que vai ser o botão formulário recipiente de e-mail, que vai fazer referência apenas esse botão e definir a largura para ser um 150 pixels. Isso vai mudar, que enviar e-mail para ser um tamanho muito mais agradável. Sem tudo feito, agora temos um app que não podemos digitar. Sob o botão que podemos clicar. No momento. Isso não faz nada, e é isso que vamos abordar no próximo vídeo, onde vamos adicionar estado a isso para que possamos armazenar esses campos de dados. 9. Como adicionar estado à nossa componente: No último vídeo, criamos esse componente e adicionamos esses campos de entrada onde podemos digitar conteúdo. Mas neste vídeo vamos agora adicionar estado para que possamos pegar esses valores e usá-los para alguma coisa. Então, se entrarmos em nosso aplicativo e nosso contêiner ponto j x x, vamos estar usando ganchos Reagir e reagir estado. Então, na parte superior deste arquivo, queremos criar uma nova variável de estado para o e-mail de destino. E a maneira que fazemos isso com ganchos é dizer que Comcast e, em seguida, declarar um e-mail de destino matriz, conjunto de vírgulas. Destino, e-mail é igual a estados dos EUA, e por enquanto vai ser uma string vazia. Então, o que fizemos nesta linha? Criamos uma variável chamada E-mail de destino, que é o valor que o e-mail possui atualmente. E criamos uma função. E esta função nos permite passar alguns novos dados, que vai atualizar o estado e alterar o valor do nosso e-mail de destino. A maneira que usamos isso é se descermos para o nosso campo de texto aqui, podemos adicionar alguns parâmetros extras. Então aqui, podemos ficar em vez disso mudar o valor. E o valor será e-mail de destino. Isso significa que qualquer que seja esse valor no estado, é o que o valor deste campo de texto também será. Além disso, temos uma capacidade de arte e de mudança. E esta vai ser uma função que é chamada sempre que alguém muda o valor deste. Então essa mudança desencadeia um evento. E o que queremos fazer é definir o e-mail de destino. Então, e ponto alvo pontos valor como esse, e salve isso. Então aqui nós usamos estados dos EUA, mas nós realmente não importamos para baixo. Então, o que precisamos fazer é subir para reagir ao topo das importações. E assim como a importação reage. Nós também podemos importar estado dos EUA. Isso já foi bem sucedido. E embora isso pareça funcionar exatamente da mesma maneira, temos esse valor armazenado no estado, enquanto esse valor é um valor descontrolado que não temos acesso em nosso aplicativo. O que vamos fazer agora é adicionar uma função extra apenas para mostrar pontos. Nós controlamos este estado. E essa função vai ser uma função de envio. Então const, enviar é uma função. E aqui por enquanto, vamos console o estado atual do registro de pontos. E isso vai ser um objeto. Com e-mail de destino. Esta função de envio podemos realmente adicionar ao nosso botão. Assim, bem como uma variante e uma cor, podemos adicionar um clique, que no nosso caso será apenas enviado. Se salvarmos isso e voltarmos ao nosso código, podemos digitar algo em nosso e-mail de destino, e então podemos digitar algo em nosso assunto. E se entrarmos em nosso console e clicar em enviar e-mail, podemos ver que o estado atual tem o e-mail de destino, mas ele não tem um assunto. Portanto, o que temos agora de fazer é repetir este processo. Mas para o assunto e o conteúdo. Então const assunto vírgula conjunto, assunto é igual ao estado dos EUA. E vamos começar com uma corda vazia. Em seguida, também dizemos que texto const é igual e definir texto é igual ao estado de uso. Simplesmente assim. E agora podemos ir para baixo para nossos campos de texto de entrada e ter esses parâmetros extras. Então, aqui podemos definir valor igual a assunto e OnChange é igual a uma função que leva o evento e chama definir assunto. Com o valor do ponto de destino do ponto E. Fazemos a mesma coisa novamente com o campo de texto para conteúdo de e-mail. Então aqui, podemos definir o valor. E esse valor vai ser igual ao texto. E uma mudança é igual ao evento E. E o evento então aciona. Defina o texto, passando o valor do ponto de destino E. Agora que temos todos esses definidos, podemos atualizar este log do console dois como o assunto, bem como o texto. Se entrarmos em nosso terminal, em nosso aplicativo, desculpe, podemos adicionar um, um endereço de e-mail e um conteúdo e clicar em enviar em nosso console no lado direito, podemos ver que temos um e-mail de destino e um texto, mas o assunto está em branco, o que é exatamente o que esperamos. Vamos colocar um pouco de validação aqui para que saibamos que os campos, o cliente inseriu o nosso correto. Então, se não houver um e-mail de destino, vamos adicionar um novo estado. E esse novo estado será uma mensagem de erro. Então erro const, mensagem. Mensagem de erro é igual ao estado dos EUA. E por agora vai começar como uma mensagem em branco. Então, se não houver um e-mail de destino, vamos definir a mensagem de erro dois, endereço de e-mail ausente. Eu só vou capitalizar isso. E então vamos retornar desta função. Por isso, não prossegue mais. Vamos fazer a mesma verificação para o assunto no texto. Então, se não há assunto, e eu vou copiar estes dois assunto e-mail faltando . E, finalmente, se não houver texto de ponto, defina mensagem de erro de texto de e-mail ausente. Agora, mesmo que tenhamos feito isso, nós realmente não usamos essa mensagem de erro em qualquer lugar, é por isso que estamos supondo que essa mensagem de erro atribuída mas nunca usada. Então vamos copiar esse valor da mensagem de erro e voltar para o nosso código. Levante-se no fundo. E pouco antes do nosso botão, vamos adicionar um pouco de código. Vamos adicionar algumas chaves. E então vamos usar uma equação ternária. Nós vamos dizer, isso vai dizer, se houver uma mensagem de erro, vamos mostrar uma mensagem. E isso vai ser um div. Simplesmente assim. E dentro dessa div vai estar a mensagem de erro em si. Nós também vamos adicionar uma classe a isso porque podemos fazer um pouco de estilo em um segundo. Então className é igual a mensagem de erro. Agora, seja equação ternária, você sempre precisa colocar dois pontos no final porque esta é uma declaração if-else. Então, se a mensagem de erro for verdadeira, mostramos esta div else. E neste caso, queremos mostrar nulo, que não vai mostrar nada. Então, se você voltar para o nosso aplicativo e se apertarmos enviar e-mail, agora, nós receberíamos essa div extra, dizendo que estamos faltando nosso endereço de e-mail. Isso é ótimo, pois mostra ao usuário que isso não teve sucesso. E por quê? Se introduzirmos algo no endereço de e-mail e enviá-lo, mudá-lo para assunto de e-mail ausente. Agora, de volta à nossa confirmação. Uma vez que temos tudo isso, se temos o e-mail, os assuntos no texto, queremos definir a mensagem de erro para uma string vazia para que ela não seja mais mostrada. Então, se inserirmos algo no e-mail sobre o conteúdo, estamos perdendo o assunto. Mas agora, se adicionarmos um assunto, a mensagem de erro desaparece. No próximo vídeo, o que faremos é conectar isso à API que fizemos no início do curso. Para que, uma vez que o usuário tenha inserido os detalhes, possamos enviar esse e-mail para nós mesmos. 10. Como conectar nosso componente com nossa API: No último vídeo, criamos nossas reações com nosso estado e adicionamos alguns testes para garantir que o assunto do e-mail de destino em textos fosse preenchido. Neste pouco do vídeo, o que vamos fazer é adicionar axiomas para que possamos realmente enviar essa solicitação para nossa API, que enviará nossa mensagem. Então, após este processo de envio, queremos adicionar algum código extra para enviar a solicitação. A ferramenta que vamos usar para isso é eixo. Então, se voltarmos para a nossa segunda janela de terminal, podemos instalar um novo pacote. Então npm instalar traço, traço salvar selos. Então agora o que precisamos fazer é adicionar algum código extra após essa validação para enviar essa solicitação. Aqui nós vamos fazer ponto axial S post. E o que vamos postar é que vamos postar em nossa URL, que vamos chegar em um segundo. E além disso, nós vamos estar colando um objeto. O objeto é o objeto que esperamos receber em nossa API, que é um dois. E esse será o nosso e-mail de destino. Estamos à espera de ter um assunto. E para nós, podemos apenas dizer que o sujeito é igual a este assunto. Também estamos esperando texto, que novamente, podemos dizer é o texto que armazenamos nos estados. E, finalmente, nós, estamos esperando um de? E nesse caso, você precisa definir o endereço de origem para o endereço de e-mail que você verificou no SES da Amazon, que, no nosso caso, é alguma E/S de ponto de codificação completa. Agora o que precisamos fazer é ter certeza de que importamos o acesso. Então, se você ir para o topo do seu arquivo e importar eixo de axiomas. Agora temos tudo isto a funcionar. Mas o que acontece se isso não for bem sucedido? O que acontece se isso falhar? Bem, podemos adicionar um ponto a isto. E isso só será chamado se essa API tiver sido bem-sucedida. Então, se isso foi bem sucedido, o que queremos fazer é definir as variáveis de volta para strings vazias. Então defina o texto para vazio. Queremos definir o e-mail de destino para vazio. E queremos colocar sujeito ao Mt. Agora que temos isso, queremos adicionar uma coisinha extra agradável. Queremos colocar uma mensagem de sucesso. Então isso significa que adicionamos mais uma coisa no estado. Então, no topo, mensagem de sucesso const, set, mensagem de sucesso é igual a estados dos EUA. E por agora vai ser uma corda vazia. E aqui, podemos colocar uma mensagem de sucesso. E a mensagem pode ser que seu e-mail foi enviado. Agora isso é o que acontece quando as coisas vão bem e ele vai para este ponto bem sucedido, em seguida, bloquear. Mas o que acontece se isso cair? Digamos, o e-mail para o qual você está enviando não existe. Assim, o SES da Amazon não pode enviá-lo. Ou há algum outro problema, como seu URL sendo inválido ou seu lambda estar inativo. Nesse caso, queremos adicionar uma captura. E queremos pegar o erro, que entra nessa função. A primeira coisa que queremos fazer é o erro console.log no post OK CEOs e na mensagem de erro. Isso tornará muito mais fácil quando estamos tentando depurar por que nosso aplicativo pode ter falhado. Então, a primeira coisa que queremos fazer aqui após a mensagem de erro é que queremos definir a mensagem de sucesso para vazia para que ela seja removida. Também queremos definir a mensagem de erro. E neste caso, podemos ir com mensagem de pontos de erro como às vezes há uma mensagem no próprio erro. Ou se não houver, então podemos ir com incapaz de enviar o e-mail. Agora que temos isso, precisamos usar a mensagem de sucesso. E vamos usá-lo de uma maneira muito semelhante à forma como usamos a mensagem de erro. Se rolarmos para baixo até onde temos essa mensagem de erro, o que podemos fazer é criar uma nova linha abaixo disso. Diga que a mensagem de sucesso usando um ternário. Podemos então ter uma div como essa. E dentro desta div, temos uma propriedade dinâmica de mensagem de sucesso. E se isso não existir, vamos dizer “não”. Semelhante a como não queremos a mensagem de erro. Nós também vamos adicionar um nome de classe. Não class_name vai ser mensagem de sucesso também. Então, se salvarmos tudo isso, temos um último pouco de ajustes para fazer, que é entrar em nosso CSS e adicionar algo para definir a diferença entre sucesso e mensagem de erro. O que podemos fazer é dizer pontos mensagem de erro, e mudar a cor para vermelho. Isso só significa que as mensagens de erro aparecem em vermelho são mensagens de sucesso aparecem no bloco normal. De volta ao nosso contêiner de e-mail. Isto é tudo armação. Então nós, tudo o que precisamos fazer é encontrar nossa URL. Isso é o que construímos em nossa API no início deste curso. E colá-lo. Se você precisa encontrar este URL e não sabe como obtê-lo ou se esqueceu o que era. Vou te mostrar uma maneira legal de conseguir isso. No momento, estamos na raiz do curso de e-mail de compartilhamento de habilidades dentro do nosso terminal. Se você ainda estiver em seu aplicativo, então você pode CD para baixo um diretório com barra ponto-ponto. Mas então precisamos CD em API. Agora que estamos na API, podemos fazer informações SLS. E ele vai retirar as informações sobre o sistema que implantamos sem servidor. E aqui vamos nós, temos o nosso ponto de URL de envio de e-mail, apenas para que possamos copiar isso e colar isso lá e clicar em salvar. Então, se agora vamos através do nosso up, podemos inserir nosso endereço de e-mail, que é alguma arte completa codificação ponto IO. Você precisa inserir seu endereço de e-mail. Se você conseguiu as verificações de conta, sua conta não está em algum modo de caixa. Você pode terminar o endereço de e-mail de outras pessoas, mas em nome ou não insira um endereço de e-mail aleatório. Porque se ele for relatado, então você pode perder o direito ao modo livre e você vai acabar de volta em alguns livros. O sujeito. Meu primeiro e-mail do aplicativo. E o conteúdo é, isso é muito legal que você pode enviar um e-mail da minha pilha completa up. Se eu clicar agora em Enviar e-mail, você pode ver que seu e-mail foi enviado. E isso é que todos os campos foram removidos, que é exatamente o que esperamos. Se eu abrir meu e-mail agora, vamos dar uma olhada e ver se eu o recebi. Então, como você pode ver, nós recebemos meu primeiro e-mail por enquanto. E quando você começa a enviar mensagens pela primeira vez, às vezes aparece no Google dizendo que pode ser spam. Isso ocorre porque você não enviou muitos e-mails por meio deste serviço da Amazon. E à medida que enviares mais, isto será removido. Se você clicar em parece seguro, isso ajudará esse processo. Como você pode ver, temos o assunto e o texto que inserimos em nosso aplicativo. Então isso significa que temos o processo de pilha completa, toda a configuração. 11. Encerramento: Parabéns por concluir esta causa sem servidor de pilha completa. Aprendemos como configurar nossas contas da AWS e sem servidor e implantar uma API que funciona com o AWS SDK para permitir que enviemos e-mails em nome de nossos usuários. Com, então, configura um reator e conecte os dois para criar a nossa pilha completa. Se você aprendeu algo novo neste curso, realmente me ajudou. Se você der este curso e classificação, pois ajuda mais desenvolvedores como vocês, aprenda as habilidades e ajude todos a subir de nível como desenvolvedor.