Olá, tudo bem? Aqui é o Luiz e neste aulão insano eu vou te ensinar a criar uma aplicação simples, porém cheia de coisas bacanas para você aprender e em apenas 45 minutos!
Referências:
– Transcript e fontes da aula: http://184.73.67.74/post/nodemail-envio-de-email-em-reactjs-nodejs-nodemailer/
– Meus cursos: http://184.73.67.74/meus-cursos?utm_source=youtube&utm_medium=link&utm_campaign=cursos&utm_content=nodemail
– Meus livros: http://184.73.67.74/meus-livros?utm_source=youtube&utm_medium=link&utm_campaign=livros&utm_content=nodemail
– Envio de email com Sendgrid: http://184.73.67.74/post/como-enviar-emails-em-node-js-usando-sendgrid/
– Envio de email com AWS: http://184.73.67.74/post/como-enviar-emails-em-node-js-usando-o-aws-ses-amazon/
– Deploy na Umbler: https://help.umbler.com/hc/pt-br/articles/360032787691-Frameworks-JS-na-Umbler?u=wepond1k
– Deploy na Heroku: http://184.73.67.74/post/como-publicar-aplicacao-reactjs-na-heroku/
– Deploy na Digital Ocean: http://184.73.67.74/post/deploy-de-aplicacao-reactjs-na-digital-ocean/
Um abraço e sucesso.
Prof. Luiz
—
o Olá tudo bem Aqui é o Luiz e o vídeo
de hoje é um aulão um escrevendo muita
coisa bacana não vou te mentir aplicação
que tiver resolvendo se ela é bem
pequena mas o desafio de fazer isso em
apenas 45 minutos envolvendo o iett HTML
CSS node Express mucker Kors é claro
muito Jesus Cristo o desafio é grande
Você quer aprender como utilizar todas
as sopinha de letras a tecnologia se
você tem aqui fica aí no vídeo que vai
valer bastante a pena né
[Música]
bom então vamos lá começar a nossa
aplicação coruja que a gente começa
Primeiro passo é que se você não tem o
novo até estar Nossa Máquina você tem
que fazê-lo agora você acessa hoje
atrás. Óleo baixa a versão LT essa
máquina e apenas avance até o fim para
concluir a instalação abrir um terminal
de linha de comando né o dose Windows o
Shell no Linux você digita o comando no
outro espaço menos ver e você verifica a
versão do texto a nossa máquina agora
próximo passo aqui eu vou utilizar o
editor de código visual Studio code você
também baixo ele gratuitamente em
code.do soltos.com baixa a versão para
os seus um profissional que apenas
avança até o final para concluir a
instalação quando terminar você vai
estar na tela de boas-vindas como essa
aqui vamos começar a construção da nossa
aplicação pela parte do front-end nesse
nosso pequeno projeto o front-end vai
ficar separado
e a garantir que a gente possa ter
tecnologias completamente diferentes um
ano outro que a gente possa evoluir eles
de maneira independente e através de
protocolo de comunicação muito claros
que a gente consiga fazer com que um
utilize o outro Claro que o projeto
Pequeno como esse para ver não faz
sentir essa abordagem então aqui o
intuito maior é a aquisição do
conhecimento e a didática do que
exatamente fazer sentido com o senhor é
tão simples né com essa complexidade
soluções mais simples que essa já foram
citadas por exemplo num vídeo aqui do
canal que vou deixar o Card aqui em cima
onde eu falo né que nem sempre Você
precisará react no front não conseguisse
Humberto eu coisa do tipo Tá bom mas
vamos em frente que eu sei que você quer
aprender aqui o iett Note e o disparo do
e-mail se quando eu instalar o node.js
na máquina ele instala junto o npm que a
Jesus pacotes Donald e um dos Comandos
que eu posso usar DNPM É o comando npx
que ele baixa e já executa um pacote
para mim isso é particularmente
interessante quando eu voltei
o que muda constantemente e eu quero
garantir que eu vou ter a última versão
na hora de executar ele aqui no nosso
caso eu vou baixar o cliente prato o
iett traço ERP que a maneira mais
simples de você construir uma lá no
mundo e no rack Aí você coloca no PX
Create Object heap e dá um nome para o
seu F vou chamar aqui por exemplo de
Hello Kitty não enter para confirmar
aqui com e essa né E vai criar para mim
um pratinho Halo Reach esse processo aí
demora um pouquinho tá Que o leque baixa
bastante componente quanto ele tá
baixando mais rapidamente o que que é o
iett mulher que tiver uma biblioteca
JavaScript para criar interfaces de
usuários e escritor na capa do site do
FGTS. Org então basicamente você cria
com o iett aplicações web e interfaces
de aplicações web responsivas na
congestão de estados dando aquele ar
mais profissional mais moderno não é um
componente que reagem a a utilização do
usuário reagir
os dados no back-end talvez você já
tenha ouvido falar de coisas como Ajax
jeito Harry coisa do tipo então
Direction faz aquele mesmo tipo de dia é
feito naquele mesmo tipo de telas
reativas proporcionando a melhor
experiência possível para os nossos
usuários a é um dos três principais
Fênix hoje de interpass é junto com o
engula e com o viu beleza baixou o
crente workshop usou ele para criar um
projeto real tudo zero vamos entrar aqui
no nosso Hello we aqui e dentro dele nós
vamos usar o criar passo start we are
meu concorrente DNPM muito utilizado em
projetos where we are Stardust
equivalente ou não tem um start
é ou não é ele sobe na porta do carro de
três mil aplicação iett que ele foi o
pra gente vamos uma olhada nessa
aplicação Vamos abrir os olhos tudo
could Open folder No meu caso eu salvei
no olho projeto Hello Kitty Manda uma aí
que que ele criou para mim aqui minha
CNC eu vou ter um arquivo app.js que é
justamente a minha aplicação aquela que
a gente tá vendo rodar no Browser tanto
que se eu mudar o texto aqui é apenas um
teste salvar automaticamente vai ser
feito o Reload que vai estar atualizado
minha página lá então como ação na nossa
aplicação é bem simples A gente vai
mexer basicamente nesse arquivo aqui
ep.de vamos começar modificando aqui
então vou apagar esse miolo aqui da
página começar com a nossa Diva aqui
nossa Diva vai ter um Place name chamado
container essa uma classe CSS nessa
utilização na página que a gente vai ter
criar essa calça depois dentro do nosso
EP
Ah tá certo tá esse logo a gente vai
usar ele também beleza dentro da div
container eu vou criar uma tag form é um
formulário HTML dentro do form eu vou
ter uma lei moça que tudo HTML tá gente
que não é específico Lauriete essa
função é porque tá vai fazer ela vai
retornar este HTML que eu tô montando
aqui para ser renderizado lá a página
certo vamo pegar a página aí ele vai
chamar a função dessas falar aqui ou não
linda que delícia ele tá importando o
nosso módulo app não tá chamando ele com
uma tag aqui então nós vamos é somente
vai renderizar o conteúdo retornado pela
função app do nosso até PGS eu falei
boquinha tá escrito e-mail e eu vou
colocar atributo HTML for dela como
sendo e-mail né Ela é uma lei do do
Campo e-mail próximo passo uns colocaram
input
a Type Tex não Campo de teste Teixeira
mesmo que Wade vai ser e nem eu O Dani
vai ser e-mail e o placeholder que
aquele texto que fica visível enquanto
um detonada vai ser Digite o e-mail de
destino certo para quem eu vou estar
enviando o e-mail Claro que se use meias
foram ser enviados para você talvez você
quer usar esse campo com um e-mail de
quem está te enviando a mensagem tá aqui
nosso caso eu vou botar aqui nesse Campo
eu já preenchi um formulário o e-mail
para o carro vou disparar uma mensagem
tá bom aqui embaixo vai repetir algo
muito parecido eu vou ter aqui um Label
com htmlfor nem botar em português aqui
nome
o nome aqui então Eyed nome nome aqui na
é o seu nome
e para que a gente possa ajudar a minha
mensagem né quem está enviando esse
e-mail para para outra pessoa aqui em
baixo vou ter outra Label que é a
mensagem se essa eu vou ter que ir
htmlfor mensagem é que eu vou usar um
táxi área né como ataque específica para
mensagens grandes né com várias linhas
aí DG mensagem
a name mensagem e o Neymar é muito útil
na parte de postagem do formulário para
o backend placeholder Digite sua
mensagem e por último um colocar aqui
mais uma lembrou que é o anexo sim aqui
elas vão se permitir né que seja enviado
mensagem com anexo neste caso a gente
usa o input type File on com Wade anexo
com o name anexo saco com quatro pontos
o e-mail destinatário o seu nome a sua
mensagem e o seu anexo para ser enviado
por fim temos que ter o botão de enviar
né que no caso é assim Mary chama-se seu
limite né que é justamente o botão que
vai submeter todos os dados deste
formulário para o servidor para o nosso
black and o texto dele fica no velho
se você enviar a gente olhar agora
aplicação tá desse jeito aqui ó terrível
a gente não ficou nenhum tipo de estilo
nela ainda você olhar aqui em cima do
Edson JS eu tô no pote não é Peppa um
CSS então é esse o cara que nós vamos
modificar para estilizar nossa página os
apagar assistir uso aqui primeiro vamos
utilizar nossos Campos estão input estou
aqui trazendo todas as tags html no tipo
input filtrando portátil igual a text
então todos os tipos de texto também
quero que pegue todos os impulsos do
Type files
o imposto de upload e que pegue também
techshare esse estilo aqui nesse aplicar
para esses 3 tipos de entulho primeira
coisa largura vai ser 100% segunda coisa
o pede que a margem interna 12 pixels
aborda o estilo border 1px Solid CC
calça clarinho border-radius né que as
bordas arredondadas 4pixels margem tops
no caso seis Pixel do elemento de cima
sempre margem botão não ficar as 16
pixels do elemento de baixo e por fim um
restas vertical e cidades usuário que
ele pode redimensionar os campos para
baixo tá mas não pro lado vamos salvar e
olhando a página já começou a modificar
a problemas abaixo do outro ocupando a
tela toda e etc você não quiser comprar
Aquela toda você pode mudar aqui
pensando torcem por cento para menos por
exemplo se eu colocar aqui por exemplo
quarenta por cento para dar
eu vou passar carro automático
alternativa seria usar você usar o Flex
e dizer que a direção edição abaixo por
exemplo ou ainda você pode dizer que a
rede foi assim por cento mas este
contêiner ao redor aqui ele tem uma
largura que não seja tela toda tá
chegaremos lá próximo estilo utilizar o
botão input type submit background-color
sustenido 4K eph501 verdinho um pãozinho
de verde passar por verdade color que a
cor do texto de dentro do botão Branco
pedem 12px 20px então 12 em cima 20 na
direita tem ter do horário tá pode
colocar T4 valores aqui na frente do
horário cima direita baixo que semana
que pede na margem interna do componente
borda nenhuma nome border-radius
arredondamento de borda quatro fixo e o
cursor Pointer não é a mãozinha
a salvá-la o botão mais feliz a gente eu
também quero colocar aqui um estilo para
quando eu passar o mouse em cima do
botão ali mudar levemente a cor então
input type submit: Rover que quando eu
passar o mouse em cima deve mudar o
nosso background-color ele vai mudar pra
tudo bem eu vou passar o mal tá vendo um
vídeo não parece muito bem mas a gente
conversa um pouco mais escuro é a vir a
mãozinha né e por último Vamos criar a
classe container que aquela que fica na
Divina englobando todo o formulário é um
ponto Contender não é o border-radius
ative vamos arredondar bora então 5
pixels a cor de fundo da dívida que
viram escola vai ser F2
o F2 F2
o cartãozinho é bem clarinho
é quase branco a margem interno pede vai
ser de 20 ficção e a largura máxima Vou
colocar aqui 600 pixels por exemplo
é isso que ia fazer aquele efeito
começou Nei de você dos Campos conseguir
entrar toda a largura hoje que tem por
cento mas dentro do contêiner que eles
estão então ficou assim nós vamos lá dá
para dar mais agitadinho aqui na lateral
né colocando aqui por exemplo né a
largura do simples como 95% tivessem vai
ficou bem mais agradável certo então
temos ou HTML do nosso front aí quando
eu não sou nada não sei se para dormir é
que ainda são HTML você poder ser feito
né uma página completa ml mais um
arquivo com sucesso e agora o próximo
passo é a gente fazer com que as
alterações realizadas na simples né os
valores digitados
e eles estejam persistidos como um
estado erecto e aquele persiste as
informações da tela em estado e que
quando eu clicar no botão de enviar
esses estados sejam enviados para o meu
beck and que a gente não construiu ainda
como é que eu faço isso então vamos
voltar aqui no nosso é pontos aparece
aqui no topo nós vamos fazer num importe
em ilse state entre as chaves from
reality
e esse usestate ele é uma função
utilizada para criar estados e só que a
gente chama de Hulk enviar-te moderno
que é uma função que nos permite
utilizar né estados é feitos e outras
funcionalidades Direct de maneira
funcional sem precisar dentro de uma
classe A em cada objeto tudo mais quer
uma exigência do Yakult no passado vamos
usar esse Hulk e os skate para criar os
nossos estados na verdade você é um
estado só com todos os valores dentro tá
vamos poder falar aqui com Campos e sete
câmpus dentro de um Array para receber o
e os state e dentro de um repente eu
passo o objeto na inicial para o estado
que eu vou guardar Então vamos finalizar
ele com um objeto contendo o nome vazio
o e-mail vazio uma mensagem vazia e um
anexo vazio também então esse objeto
aqui vazio vai ser guardado nesse estado
Campo é como se fosse uma variável mas é
mais complexo que isso internamente né
isso pra ti Campos que a função que eu
vou usar quando quiser alterar esses
valores aqui essas variáveis aqui em que
momento que eu vou querer alterar os
campos não é o estado Campo do Stent
quando os campos do formulário HTML
foram alterados então toda vez que
alteram o campo HTML isso me disse para
um evento certo um evento de mudança
naquele campo que eu vou ter que fazer
aqui é justamente mapear os eventos de
mudança dos Campos para que eles
reflitam na mudança do state isso é
permitir que mesmo sem eu ter submetido
o formulário eu vou te aguardando aqui
no código iett tá haver ações do estado
que tá acontecendo na minha tela um
declarar aqui um function
o rendou em postagens vai receber um
evento si-20 é o evento que aconteceu né
E como eu vou maquiar aí depois para os
eventos de mudança de Campo a partir do
início eu vou poder saber qual é o campo
que disparou o evento e qual é o valor
do campo naquele momento do disparo
Então se Campos é o meu state e esse meu
state um objeto eu poderia chamar Campo.
Nome recebe alguma coisa certo mas se eu
quiser ter apenas uma função para
qualquer alteração de Campo eu posso em
vez disso usar nessa chamada de Array
associativo que JavaScript me permite eu
passo aqui dentro o nome do campo que eu
quero que eu poderia fazer isso aqui né
é isso aqui
isso é o equivalente a isso aqui certo a
diferença que aqui eu posso passar esse
nome da propriedade dinamicamente
traiçoeiramente. Target pontos nele mas
é o nome do campo que para o evento ele
vai saber o que o valor do Campus Party
evento Então event. Target. Vela e após
alteração nenhum dos Campos é o que me
faltado eu tenho que alterar meus dentes
eu vou fazer um chá de Campos
tô passando Campos novamente é como isso
altera o meu state Esse é um conceito
primordial na do reality os estados
droga premia ele padrão ele não guarda
estado nenhum é o que tá vendo na página
submeter a página Tu perde o que tava
nela e o iett para não perder né as
informações entre as aquisições entre as
mudanças que ocorrem na página ele
guarda os estados em vários críticos
onde que isso aqui não é bekend pra
gente tá tudo no front ainda acontecendo
lá no navegador do usuário esse código
aqui Ele atende bem para todos os campos
exceto o de arquivo de upload arquivo só
tem fazer um livro aqui porque assim O
Event. Target. Name for igual ao anexo
só que muda ligeiramente
Olá neste caso é Campo na posição
eventos. Target. Name recebe eventos.
Target. Files na zero
é porque o impulso do tá difícil ele me
traz um ou mais fácil arquivos ela me
traz um velho mas não tenho texto para
mim pegar certo bem como fazer um campo
sem ser um único arquivo vou pegar
sempre na posição zero agora que eu vou
fazer eu vou colocar essa função aqui
como sendo a função que vai ser
disparada no evento de Contém ge dos
meus impulsos ontem dele é disparado
cada vez que o valor do campo é alterado
ou seja cada tecla digitada ele vai
atualizando né o Stitch doherty eu vou
pegar por exemplo compre meio tá aqui a
propriedade com oxe
bom e no igual
e eu vou usar Chaves e passa o nome da
função
e isso vai dizer para o iett não é que
quando foi quando foi realizada outra
nesse Campo chama essa função aqui para
atualizar este state aqui
se fosse mesmo entende eu vou fazer
também no caso de alteração do nome da
mensagem e dou a nexon tá então qualquer
alteração em Campos no formulário eu vou
estar armazenado no meu estado que falta
agora quando eu apertar o submit eu
tenho que pegar o meu estado e enviar
para o meu beck and nós como é que ele
não tá pronto ainda então fazer uma
função provisória que vai jogar no
console as informações que ele encontrou
tudo bem Vamos criar aqui em cima o
function rendou form submit ela também
recebe um evento esse vídeo eu vou dar
aqui um presente de fogo aí a gente
ponto clientes de forma a função que ela
previne do formulário ser submetido por
servidor do jeito tradicional de html tá
perdendo todas as informações de madeira
crua e batendo na rota que a gente
configurar ele aqui no form Action por
exemplo
e eu não vou fazer assim e como eu vou
querer chamar um beck and que é uma
hippie Fest clip node.js eu vou querer
fazer uma ligação e os meus dados antes
de enviar eles eu voltar e 20. Temos de
fogo para evitar assim viu cru né no
formulário para o servidor e também para
evitar que aquela pisc não é tomar ações
legais de aplicações reativas é que a
tela não fica piscando né que as coisas
vão acontecendo de maneira mais fluida
tem o perder os meus dados tô aqui por
enquanto eu vou pegar um console Locke e
vou imprimir Campos né que é a objeto no
meu state conhece renda form submit eu
venho aqui no form
bom e na propriedade onsubmit eu chamo
essa função quando tu for lá que eu tô
medindo na verdade deixar aquela função
ali
Eu salvei se eu ver aqui agora sob o
console aqui para gente seu clicar em
enviar objeto vazio
se eu botar aqui um e-mail a primeira
está preenchido
o nome
é uma mensagem e selecionar o arquivo
falar um ensaio nem um texto né dele é
um objeto tem várias informações do
arquivo beleza tá funcionando e você
chegou até esse ponto do vídeo e ainda
não é inscrito ou um deixou seu like no
vídeo peço que eu faço exatamente agora
que é para não esquecer isso ajuda muito
a divulgar o meu trabalho aqui no
YouTube e também garante que você vai
receber os próximos vídeos assim como
esse aqui que você tá vendo agora beleza
então vamos voltar pro vídeo com isso o
nosso front basicamente está finalizado
só que a gente vai mudar depois essa
questão aqui na gente vai jogar no
console logo a gente vai jogar pro black
and falando no back-end a gente não usa
nós temos aqui criar um outro projeto
todo do zero apenas para o backend E com
isso ter duas aplicações uma aplicação
reaction aplicação node que eu tenho que
fazer dois depois certo isso é
interessante em casa que eu preciso de
escala mas não é tão interessante nos
casos que eu preciso de Economia A então
como a didática é mais importante aqui e
o que exatamente né
e fala eu vou fazer diferente eu vou
criar o nosso Beck and junto aqui essa
aplicação iett a gente a publicar eles
todos juntos Vai facilitar nosso blog
também então que eu vou fazer voltar no
terminal eu devo bate aplicação vou dar
um ar me viu isso vai fazer a compilação
do IEC ainda tem um formato responder
Direction em uma página HTML com
arquivos JavaScript e CSS certo você
olhar aqui olha queria para meu Deus me
traz contas lurex e acaba virando um
site estático do mesmo jeito de fazer lá
nos anos 90 com a sogra atender você tá
Jesus clipe
O que é o pastor de CSS pasta de Jardim
critica inside e já comprimido na vida
que os academia Érica na verdade faz
chama o JavaScript do riacho Beleza
então essa pontinha viu daqui você
poderá hospedar em qualquer provedor de
hospedagem não precisa JS não adianta
nada só para se abriu de jogar lá vai
funcionar agora claro nosso caso aqui
vai ter backing de novo então não vai
ser tão simples assim né voltar ao
corredor parecendo operador com um node
as Beleza o nosso iett compilado Que ela
possa bild
eu vou fazer agora
de dentro da pasta Hello Hello Kitty eu
vou dar um íon anos na ilha parentoni
pênis tal
a Express tô instalando a dependência de
Express que é o websphere MQ muito
popular para node.js serve para gente
construir back-end os muito facilmente
como eu falei vou transformar essa
aplicação tudo uma coisa só não é o iett
e o frontback tá então você faria assim
mesmo alçam do Express no outro projeto
do zero tá bom aqui no canal você
encontra vários tutoriais lá no blog
também de como construir um projeto de
back-end na do zero tem fora aqui do
surf do Halloween e aqui na raiz mesmo
eu vou criar um arquivo server. JF
aconteceu o nosso servidor o nosso Beck
and você chamar ele de aprender
contratar essa também funciona começar
aqui com constipé Fi para receber um
recorde de perto um pacotinho nativo do
node né que tava que a gente manipular
caminho sistema de arquivos com Express
vai receber um e Claire do Express
Aquele pacote que a gente falou para
criar o pé quente e vai conversando pode
criar uma aplicação Express né
a função de Express vocês app minha
aplicação de quem disse que ficar
rodando e aguardando aí que esse sonho
não se eu der aqui é um é ponto Listen
eu passo qual é a porta colocar aqui a
três mil né que é padrão e uma função de
callback Então vai ser executada né
quando quando o servidor terminar de
subir
é só para dizer aqui server start tá o
que que vai ter nesse servidor aqui ele
vai ter duas funções como eu quero tudo
que possa ser feito deployed uma única
vez funciona com aplicação e servidor
ele vai servir como servidor de arquivos
para o site estático compilado Direct e
também vai servir como back-end para o
próprio pronto indirect então como é que
a gente adiciona comportamento um beck
and como é que se preza a gente usa
app.py use e aqui a gente passa úmido eu
vou usar aqui úmida Express. Está tímida
são funções que tratam requisições que
chegam sobre a cliente sabe hora de
ponto use ele é um coringa em qualquer
aquisição que chegar vai ser tratado
para essa função aqui Express contra
estática que ela serve para servir
arquivos estáticos que nosso caso são os
arquivos do frete para chegar na pasta
de arquivo certo eu vou dar um pec.do
passando underline underline Disney me
que a pasta do arquivo
e agora né a pasta do server JS, onde é
que tá na franquia estática na pasta
mild show de bola agora tem que alterar
a configuração da minha aplicação para
que ela subisse serve. JS ao invés do
Yeti direto certo você vir aqui no pack
de ponto Jason eu tenho que acertando
escrito que é os códigos né para
atualizar aplicação vocês a aplicação
compilar etc Então esse que hoje eu
estar tipo sobe recte eu vou mudar ele
para ser o escrito de deve naquele
ambiente desenvolvimento porque
introdução a gente usa os campos
estática sobre a versão de produção para
nossa aplicação que ela vai ser Hinode
César então serve aqui esse arquivinho é
a senhora contratar ela vai botar aqui
para trás não tem problema também
novamente a sua aplicação riet não
precisa desse server.js o cliente para
ela
E agora se você quiser fazer o Deploy de
frontback junto na mesma hospedagem essa
aqui é a alternativa que Tô mostrando
para você agora se eu der aqui yarn
parte seu acessá-lo Carros 3 mil tá do
mesmo jeito que a gente tinha visto
antes certo
e não mudou nada beleza só que
internamente mudou mas estava servindo a
partir do sério quando aparece os
arquivos da pasta bild
eu tenho quanto tiver desenvolvendo eu
vou usar o yarn deve enquanto eu estiver
aí cê tá me produção né Depois de
compilado builder realizado eu vou usar
o early start
e o link está aqui também a função igual
a beleza vou derrubar aqui agora que ele
vai desenvolver o beck and Aliexpress
começou a JS só para servir os arquivos
soviéticos primeiro agora vamos fazer o
comportamento dele de fato a gente quer
que ele faça que é receber as
informações do e disparar para uma
ferramenta de Fábio até componente
disparo de meio para isso pra instalar
mais uma dependência ear pads for node
Mayer e multi eu vou explicar quando for
usar cada um deles vamos voltar aqui
pronto server.js a quinta mexer agora
depois de ter criado Eu mencionei que a
gente funcionava middleware né que são
funções para fazer o tratamento de
requisições
bom então vamos dar um up conto ilse no
medo a e vai ser importada parte do
Empire Wars cara que me torna a função
eu já chamou a função aqui dentro que é
o pior os navegadores possuem um
mecanismo de proteção para evitar que
comportamento do front javscript façam
chamadas Abec and mas eu quero provar
que vende seja chamado de maneira cinco
na confrontos reativos como Direct por
exemplo eu tenho que habilitar o corte
nele por isso que ele falou o pacote e
tá chamando aqui a função do pacote
Corsa eu vou precisar de mais um medo
aqui que é o express.de Jason
o que que essa função faça requisições
que chegaram para um beck and que tem um
no corpo da Inquisição informações no
formato de Jason que o formato bem
Popular aí de apis que ele pega essas
informações que geralmente pela rede
ordem binárias pela internet né e
transforma em Algum objeto Jason já
trago inscritos então isso vai ser útil
para aquisições que nosso form for
enviar os dados do nosso mestre e por
fim Vamos criar o último me dá
importante a ordem tarde tem que vir
antes domingo eu já arquivos usar um
ERP. Post o post ele é uma função no
express para criação de Midas que vão
receber requisições ou tipo post aqui
também que só isso tipo post formulários
enviando dados para mim né eu digo aqui
qual é a rota que eu vou tá atendendo tá
tendo uma rota/Band por exemplo e o
segundo parâmetro é a função que vai
tratar
e essa é assim envio essa chamada a rota
acende todas as funções de Midas ela tem
que ter um parâmetro recarga Quest O
resto eu respondi e o leque se tu quiser
chamar o próximo o próximo vídeo é na
minha cadeia né de melhor se tô aqui
Inicialmente nós vamos chamar um reto.de
Jason de rec.br vou pegar o corpo para o
corpo da requisição e vou retornar a
resposta Como Jesus não tá eu quero
receber eu vou perguntar na tela
basicamente é vou devolver para o
requisitante como é que eu peço está
funcionando vou subir aqui novamente com
milhares tá e vou utilizar uma
ferramenta para teste de riso sonhos
chamada pulseman batiam letamente
imposto próximo ponto com só avança
avança avança e instalar com o posto mas
palavra vocês vão abrir Ele eles vão
poder criar uma requisição do tipo post
como colocar URL onde é que tá o
back-end vocês nosso caso louca
tu viu com a Rota que vocês querem
chamar nosso caso sente-se eu vou mandar
Jason para esta rota eu tenho que vir
aqui em header e adicionar um header
e como tipo content-type o valor
application barra de Jason quer dizer
que a minha eu posto o que ele fazia um
simulador de aquele sonho certo você
mudar Marques estão falando é que a
gente para testar ele vai que são para
simular ela é do tipo de conteúdo Jason
e no bairro dela Vou botar aqui ó que é
o cru eu vou botar o divisão aqui então
nem o que vai ter lá na minha interface
né lá vai ter o que para ter um nome
o Luiz um e-mail contato@
e no estojo. Com.br
é uma mensagem teste e um anexo é por
enquanto não vou clicar em send ele vai
enviar para uma black and silver que a
gente vai funcionando que eu mandei ele
fazer hoje ele só devolver para mim o
mesmo dado que eu sei que eu vivi e no
posto né de um sente Então tá
funcionando beleza e tá me enviando o
mesmo dado que ele tá recebendo se eu
quiser agora que tem que ir são parta do
meu front-end eu vou estar lá no bar que
o nosso servidor e vamos lá novo pacote
e ar é axios Watson biblioteca para
fazer requisições http não cliente http
http o que pode comunicação internet né
tô aquilo que tem que fazer um colchão
pra poder fazer via código JavaScript a
partir nosso front-end fazendo
requisições no nosso pé quente vamos ver
aqui no surf é ponto de S
e vamos aqui em cima da importe em axios
from
o táxi não tem que o Heat ele usa uma
cinta que se mais moderna de JavaScript
e o que o node para o padrão Tá bom
então lá no olho e José Rico ai né aqui
no iate usa Import isso tende a mudar
com o passar do tempo Tatuí para um
formato mais moderno Vamos criar agora
aqui dentro uma função uma function Tão
dentro da função app né
e a outra function Send a fusão de envio
de dados para o meu pé quente vou
começar a decorar não conste forme deita
igual a new form deita porn deita ele é
um um objeto JavaScript para pegar dados
para mim de formulário
e depois eu vou enviar esses dados
formulário Agora tenho que populares
objeto for me deitar com os campos no
meu formulário que estão armazenados no
meu state vou usar aqui um Object. Aqui
de Campos para percorrer todos os campos
não é do meu instante e em cima das 15
do meu objeto Campos eu faço 1 suíte
cond para cada aqui eu faço um form
deita. Aprende de que com o valor de
Campos na que é que eu vou pegar chave
valor chave valor de cada um dos Campos
nas propriedades do meu state chamado
campo contra nós for each na forma
dentro até todos os dados dos Campos do
formulário com isso eu posso usar o
axios que eu importei lá em cima ponto
post para fazer uma HTV post né Em qual
RL em barra Band porque eu botei barra
saindo aqui para fazer posto no mesmo
servidor que ele tá é no mesmo é Candy
que ele tá na rota acende-se um de quem
tiver em outros
e eu vou colocar neles completo aqui no
servidor tá URL pública dele completo e
vão do parâmetro são os dados como
enviar no caso forme deita e o terceiro
paramos são as configurações da
requisição no caso aqui eu preciso
configurar os headers da requisição
cabeçalho para dizer que eu tô enviando
dados que são Campos e que também é um
arquivo certo porque você tá com coração
aqui vamos comprar o headers dentro dos
render Eu tenho um regra começar para
você antes que é o content Type certo
que ele vai ser multipark/forme deita
O que é um formulário que tem Campos e
arquivos
a posição de Ison que eu fosse enviar o
poderia usar quando está application
barra de Jason se fosse o sol formular
inteiro podia ser um x WR Gold
e agora como eu tenho que enviar o
arquivo também ou envio aqui como
multipart/Fabi deita ou entrei
transformar um arquivo no base64 é um
padrão interativos para web falar de um
padrão de apresentação de binários em
texto né brilhantes usar para transferir
arquivos pela web e ter essa conversão
daí na do arquivo que foi feito o upload
press formato depois enviar ué dá muito
mais trabalho essa função que post
quando ela terminar ela vai passar outra
função dela que eu tô usando conselho de
provas se você não conhece produtos dá
uma olhada no vídeo aqui do canal sobre
prometo que eu vou deixar o Card aqui em
cima essa ideia não vai ter um response
e eu vou fazer um Alert com esse
response. Deita tá com os dados da
resposta eu vou jogar um pouco aqui na
tela avisando aconteceu há um ponto
importante que eu venho me esquecendo
esse multipart form deita ele espera que
a gente passa um Bauer que tem um bom
Dri é um marcador de limitador que vai
separar os campos do formulário do dos
bytes do arquivo é que abaixa o celular
que tá baixo do arquivo
e furar eu poderia montar as coisas
corretamente no servidor
Ah então não vou fazer aqui eu vou fazer
a crase e da vou passar aqui um zere
depois um ponto e, igual e vou abrir
aqui não template string chamando for me
deitar. Underline Bonder ainda vou pegar
um limitador já padronizado do próprio
objeto form deita agora no nosso
renofarma submit a chama que a função
send né vejo que me no console é para se
manter o console ali não tem problema
estamos sem depois beleza acontece que
alterei a minha aplicação yet
E como eu tô que está com tudo junto ali
né o Senhorzinho onde eu vou ter que
mandar fazer o bild dela
e antes de poder se você dormiu de novo
né para fazer ultrassom que eu fiz aqui
valer agora sim
Oi Jane status subiu aqui a nossa
aplicação o que ela vai fazer ela tem
que jogar esse nossos dados para o
back-end é que a gente recebendo ele tem
que devolver aqui para mim na tela no
Alert pelo menos informações informar
com Jason certo a funcionou tá imprimi
no console recebeu como retorno um
objeto vamos voltar com o nosso backend
Tá eu já parece um carregar quente do
post e conte upload recebe um recorde de
multa o que que é um útero multa e Leão
pacote para fazer juntamente upload de
arquivos tá então quando eu fizer lá
subiu um arquivo no formato de contato
eu tenho conseguir receber esse arquivo
e salvar ele no back-end para depois
poder disparar ele no e-mail
a multa vai me ajudar com isso tá eu tô
chamando que a função do útero
ferramenta na Como já tô pilote e daí
entre a rota e o midler que trata a
requisição eu vou adicionar um upload
pontos single passando o nome do campo
que vai vir com o arquivo que nosso caso
o nome Campo anexo acorda voltar lá no é
tipo já tá é saber que tem um campo na
impulso do Type fácil com ai dia né com
name anexo
a beleza antes de pegar a requisição
aqui eu vou primeiro pegar os dados
remontar o arquivo no pé quente e daí
aqui dentro da função eu vou poder pegar
as variáveis Então vou poder pegar o
nome de rack. Baile. Nome vou poder
pegar a mensagem de rec.br. Mensagem o
e-mail de rec.br. E-mail e o anexo
depois que o upload. Single faz o
trabalho dele ele vai guardar o anexo
o Henrique. Fahion beleza
e daí sim agora eu vou retornar aqui um
decisão provisoriamente o nome e-mail
a mensagem Alex theuma servidor subir de
novo mulher que não precisa mexer testar
de novo Cruze vou pegar o arquivo aqui
tá aqui ó tá mandando para o beck and
Beck entendeu vendo ou o Jason com os
dados da do formulário de contato não
Tem que ir o arquivo né metal no formato
binário aqui né com isso então frontback
nos comunicando Vector devolvendo tá
tudo certo eu tenho que fazer agora a
última etapa que é o disparo do e-mail
em si
E para isso vamos utilizar o último
pacote a gente tá longe não usou que foi
o node Neila como é que eu vou usar ele
vou voltar aqui nosso projeto criar
dentro do surf esposa com pastinha
Services
oi e daí eu vou colar aqui dentro de
Services 16 ou service. Já tá essa
beleza a gente vai usar aqui dentro
Ludmila quer o pacote mais popular que
tem para node.js visando envio de
e-mails aqui de fazer o envio de e-mail
utilizando uma conta de e-mail sua já
existentes se você quiser soluções mais
profissionais que essa a recomendação e
você utilizar algumas MT peguei isso aí
como o meu Gun sendgrid ou o Amazon o
ABS certo né com serviço sim por meus
serviços da Amazon serviços como esse
você encontra tutoriais lá no meu blog
que eu vou deixar na descrição do vídeo
links para você poder modificar o seu
projeto utilizando as soluções tambor de
mina que tá instalado na minha máquina
vamos lá com 6 ler vai ser um rico aire
G novo e-mail até que eu vou dar um
áudio. EcoSport uma única função que a
gente vai ter nesse arquivo aqui essa
função ela vai passar um e-mail o nome
por mensagem e um anexo
o que vai fazer o disparo do e-mail não
sei vamos começar com as configurações
do smtp é uma concha cntp igual Amei
ler. Create transporte passando objeto
de configurações S MTP MTP o protocolo
para envio de e-mail na internet o host
para botar o rosto ou servidor smtp a
porta geralmente a 587 o seguir pra
variar dependendo do provedor tá
gorduras ketshow provedores que Faustão
falou que nós somos seu provedor de meio
e o Alfie O Alfie é um objeto de
autenticação Olha eu passo ele usa por
exemplo contato@luz toolz.com.br música
é esse meio que eu vou usar para fazer o
envio neste caso esse meu e-mail tá na
âmbar a Anglo é ela é um Provedor de
hospedagem de sites e e-mails muito
fácil de usar muito barato também
Inclusive tem vários tipos de formas
você entrar sem tá pagando nada por
exemplo você criar um e-mail@
o e-mail@são domínio é de graça o
primeiro e-mail com 1 GB de
armazenamento tomou
[email protected] que eu tenho com
eles por exemplo eu não pago nada por
esse meio Claro não é uma solução para
você fazer disparo em massa de e-mail
faz um formato de contato algum e-mail
transacional mais básico vai funcionar
super tranquilamente a plataforma deles
principalmente se hospedaram sua
aplicação Olá também que é perfeitamente
possível que ele suportam pega p e
node.js tô no caso da Andra que vai ser
o host smtp pontuando é ponto com é que
eu vou ter colocar o pés que é a minha
senha lá anda certo essa aqui você não
pode ver definir as configurações RTP é
ordem de configurar Nossa mensagem com
e-mail e sério objeto de configurações
de mensagens com o from quem é que vai
disparar o e-mail aqui você tem que
esperar o e-mail por um e-mail seu
também tá bom eu vou ter parado o
contato@luz toolz.com.br quem é
o meu e-mail aqui no nosso caso a gente
está considerando né que o e-mail que
vai lá no formulário é o e-mail de
destino da pessoa certo então vai ser o
tio para este meio aqui o subject é o
assunto de e-mail Vou colocar aqui tá
entre Crazy e-mail enviado por e daí eu
vou usar que eu tentei Trends para pegar
a variável nome aqui de cima então nome
vai vir o nome da pessoa que te enviou
Active mandar mensagem no assunto na
mesma e por último um teste com a
mensagem em si só que mensagem bonita de
texto opcionalmente a mensagem para o
seu HTML e você quer que seja enviado
como HTML tem um outro campo para pegar
ml tá bom poder mostrar aqui botar o
código HTML aqui quiser com a mensagem
com [ __ ] tudo mais né mas não super
fácil ao campo do texto é bem simples em
Tosco não adianta eu suporte a HTML aqui
e agora aqui fora vamos fazer um teste
sim eu tenho alguma coisa na variável
anexo eu tenho que anexar
Eu juntei mensagem de e-mail arquivo foi
feito pilotos como é que eu faço isso
primeiro no objeto meu eu tenho uma
pedágio chamada a taxa né Tem uns anexos
que eu vou usar ela com a rir Brasil
depois eu faço uma meio conta taxa ponto
puxe para adicionar um anexo esse anexo
Amor Objeto contendo uma propriedade
saiu name eu vou pegar com anexo ponto
original nem tem um cuidado de contente
eu vou pegar com o anexo. Buffer né que
é os bytes ácido arquivo e para
finalizar o envio de emails ele tem que
ser assíncrono e depois que ele
finalizar eu tenho que fechar o
transporte smtp não posso deixar o canal
aberto eu vou fazer esse controle todo
aqui vou dar um retorne o Chrome se para
que seja assim como a prova se ela vai
ter uma função dentro com dois paramos
um resolvi e um redirect vou chamar essa
MTP. Send mail Center pequeno objeto lá
de transportes de cima né passando o
e eu quero esse objeto de mensagem aqui
quando o sendmail terminar ele vai
chamar um ponto dentro com o response eu
vou poder chamar essa MTP. Close para
fechar o canal de comunicação com o
servidor de meio e um return de resolvi
passando o Responde se dá erro ao invés
do de no nós executar o pet novamente o
que é prometo eu falo disso no vídeo
sobre pronomes aqui também no canal só
no caso de erro Eu também fecha a
conexão sempre que está conexão MTP tá
não pode deixar aberto e daí eu chamo o
reject passando o erro beleza fiz aqui
uma hora do meu certo falta só botar
minha senha que obviamente eu vou tirar
aqui né então vamos voltar agora com
nosso sério com JS para fazer a última
alteração do nosso código aqui no na
rota de estende logo depois que eu pego
os campos que eu vou fazer eu vou dar um
rico aire em ponto/SRT
em Celsius/meio cerci e vou chamar a
única função que ele tem naqueles porta
lá no ódio contra esports onde eu passo
o e-mail o nome a mensagem e o anexo
Esta função retorna uma promissora
lembra então ponto dentro no caso de
sucesso eu vou ter mais pão eu vou dar
um resto. Jason essa response se caso de
erro eu vou pegar no pet eu vou ter
objeto Eva deu fazer um responto status
terror
Quem sabe eu não vou tomar esse jeito
genérico aqui
a beleza derrubar mas ele do outro subir
de novo e agora é a hora do vamos ver um
e-mail destino né vou mandar para o meu
e-mail pessoal nome Luiz
a mensagem apenas um teste de envio
em anexo
é uma fotinha que não camponesa
e enviar demorou um pouco ali tá mas
aparentemente foi tá foi aceita por
e-mail tal dados a mensagem ok beleza
Demorou alguns minutinhos mas chegou
aqui no e-mail pessoal a mensagem certo
aqui ó mais Nozinho seus que a gente deu
as informações com ela Ufa acabei coloca
nos comentários se você acabou também
aceita um vídeo bem longo mas outro você
aprendido bastante coisa aqui comigo
nessa correria danada de criança
aplicação Você quer aprender como
publicar essa aplicação dá uma olhada
nesse que são eu vou colocar líquido
tutoriais Como publicar na ambler na
digital Ocean e na riroco calma dessas
três vai ver que é bem tranquilo
publicar como é que eu mais recomendo
glândula porque a mais barata e a mais
simples dos três Você gosta da minha
vida’ tica os materiais aqui do canal
considera a opção de conhecer os meus
cursos completos aqui uma formação
webfoot Tech DS que eu trato junto com
outro
O Astro Direction Gold Tá descript mas
Kelly microsserviços enfim um monte de
coisa legal que tenho certeza que pode
enriquecer aí eu tenho currículo link na
descrição bem como de outros cursos de
outros vivos cá também passou antes de
ir embora não esquece por favor de
deixar o seu like se inscrever no canal
se você ainda não é inscrito me ajuda
muito a divulgar meu trabalho incentivo
a produzir mais vídeos e permite que
você fique sabendo Quando surge novidade
aqui no canal muito obrigado por ter me
aguentado por quase uma hora um abraço e
até a próxima valeu
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.