Resumo do Transcript

para demonstrar como é possível fazer isso agora no esx. Então vamos continuar, fazer os inputs. Vamos fazer esse outro aqui, eu vou recortar esse idade aqui do estado, vou fazer o text input. Vamos adicionar as propriedades. Placeholder, vamos botar quantos anos você tem. Vamos para um estilo, campo de texto que eu fiz. Vamos botar um valor, já recortei, um change text. Vamos fazer a mesma coisa que a gente fez ali. Vamos para o idade, como argumento, vamos setar o state. E vamos só por idade aqui, tá bom? Aí é só isso. Agora vamos mudar esse botão para criar. Em vez de se atualizar input, vamos fazer criar. Info, criar a pessoa talvez. A gente não criou ainda, então vamos criar aqui essa função, por isso que está dando erro. Vamos criar aqui, criar a pessoa. Tá bom? Quando eu clicar, vai chamar essa função aqui. Então, vamos ver se está tudo certo agora. No wireframe, criar o perfil. Tudo ok, né? Deixar assim. Então, quando a gente clicar no criar, a gente vai fazer um pedido HTTP com o método post para o back-end. Se você ver que o código que a gente fez para atualizar input vai ser usando a mesma função fetch. Então, vamos usar fetch. O primeiro argumento é sempre a URL, o r. Então, vamos copiar esse aqui. Mas como é um restful service, serviço rest, usa o rest, padrão rest, então é só fazer a post vai ser na pessoas. Slash, barra pessoas, né? Aí, o segundo argumento vai ser um objeto, tá bom? E esse objeto, primeira coisa, vamos botar o método, vai ser um post. Aí, no outro propriedade, a gente vai botar os headers. Aí, esse header vai dizer que a gente está mandando e aceita JSON, tá bom? Então, vamos botar accept. Application. Deixa eu ver se estou fazendo certo, sempre esqueço. Está aqui, no documentação react native. Accept, application JSON, tá bom? Só olhar a documentação. Botar o content type também vai ser a mesma coisa. E eu esqueci, tem que ser barra. Scoop. Tá bom? Aí, os headers. Aí, tem o body, que é finalmente os dados que a gente quer enviar ao servidor. Nesse caso, a gente vai enviar essa pessoa, o perfil dessa pessoa, que vai ser criada no servidor. Nesse caso, a gente passa um objeto, né? Nesse objeto, a gente pega o objeto JavaScript e transforma o objeto no formato JSON, que é só texto, né? Uma forma de fazer isso é usando o JSON, objeto JSON, que é parte do JavaScript, e chama a função stringify. E o que a stringify faz é pegar o objeto de JavaScript e converte para texto no formato JSON. Você for a seu browser aqui e clica, abrir o console para te dar um exemplo. Por exemplo, pessoa, vou botar aqui var. Essa é um objeto com nome, não, idade, o 3, por exemplo. Está aí pessoa, né? Aí, pessoa é um objeto JavaScript. Então, se você pega o JSON aqui, está vendo aqui esse objeto do JavaScript? Tem duas funções que são os parts e o stringify. E elas são ações opostas, que a gente quer converter o objeto para o formato JSON. Então, o formato JSON.stringify.pesso aqui. Está vendo? Ele retorna uma string com o JSON, formatado no JSON. Então, a gente vai fazer isso aqui. Nesse caso, vamos fazer um objeto e vamos pôr o nome. Vai ser o thisStateName, né? Vamos pôr idade. Que está associada ao text input lá, né? Aqui e aqui. No caso da imagem, eu não estou me preocupando agora, mas a gente pode botar alguma coisa aqui só para dizer que, só para ver se funciona. Vamos botar qualquer coisa aqui. Cadê, vamos copiar dos outros que estão no back-end. Vamos já copiar esse aqui. Você pode botar qualquer imagem que você quiser. Então, está aí. Então, vamos revisar isso de novo. Quando a gente clica no botão criar, a gente vai chamar o fat, função fat. O primeiro argumento é sempre a URL, o local, que a gente vai fazer o pedido de HTTP. E segundo argumento, no caso de fazer um pedido post, a gente vai passar um objeto com o método methodPost e vai passar uns headers de HTTP que vão dizer que é tudo que a gente tem que ver no formato JSON, applicationJSON, accept, e o contentType. Aí depois, mais um que é o body, que vai ser os dados que serão enviados ao servidor. Nesse caso, a gente está enviando nomidade e o avatar aqui da pessoa que a gente criou. Mas como é um objeto JavaScript, a gente tem que converter isso para uma string que está formatada como JSON. A gente usa o objeto JSON, a função stringify desse objeto para fazer isso. Então, quando a gente mandar isso, a gente vai ter que esperar um pouquinho para ver o servidor mandar a resposta. Então, a gente pode tentar fazer isso agora e ver se está funcionando. Aqui o servidor back-end rodando. Vamos ver se vai criar e vou abrir meu DB aqui, o database, para ver se vai criar alguma coisa aqui. Então, vou estar aqui... Criar. Tá bom? O que é que aconteceu? Criou um novo pessoa aqui com o nome George, idade 34. Ele já põe um ID importante, esse fato do JSON Server já adiciona um ID se você não fornecer. E aqui foi o avatar. Tá bom? A gente criou, está na data base. Vamos ver o que aconteceu quando a gente clicou, criar. Vamos voltar para o código, onde está criar o botão. Vamos press criar a pessoa. Tá bom, vamos lá. Criar a pessoa, press, faz o fetch. Vamos fazer de novo a data base. Não sei o que nome pô. Criou, né? Está aí. Entendeu? Até que o servidor tem pedido post. Tá bom? Eu disse só por esse vídeo. Nos próximos vídeos a gente vai aprender a usar os pedidos patch e delete para atualizar um pessoa, os dados de uma pessoa e para delatar uma pessoa. Tá bom? Muito obrigado por assistir. Se você gostou dos vídeos, por favor subscreva. E se tiver alguma pergunta, sugestões ou alguma coisa para falar, por favor deixe comentários. Muito obrigado. Tchau.