Resumo do vídeo: Aprendendo React Native

Oi, tudo bem? Vamos lá continuar a aprender React Native? Então, no último vídeo a gente aprendeu como usar o componente text input para fazer uma caixa de text para usar, digitar alguma coisa. A gente vai fazer o que quiser com valor creditado. Agora vamos aprender a fazer uma coisa mais avançada, porque a gente precisa conectar com o servidor, com o back end. A gente tem o nosso aplicativo aqui usando React Native, mas aqui é só o front end. É só o que o pessoal vê, onde é que está os dados, cadê o banco de dados? Está tudo no back end, né? O que a gente vai fazer? A gente vai fazer uma página, uma cena aqui, perfil. Muito simples, a gente vai botar uma imagem do perfil da pessoa, botar o nome e a idade. Emeta o botão aqui, sensível talker, para a gente, quando toca, atualizar com os dados, que vão ser... Os dados vão vir do back end. A gente vai fazer um back end, simular um back end, a gente não vai fazer um back end verdadeiro, mas vamos fazer um negócio aqui usando um módulo do node chamado JSON server. Então, aqui é o wireframe que eu fiz, a gente vai fazer esse negócio. Para fazer a primeira coisa que eu fiz, eu comecei um novo projeto também. Comecei um novo projeto chamado segundo projeto, que a gente estava trabalhando com o primeiro projeto. Então, se você quiser criar de novo, vai React Native Net, segundo projeto. Eu já fiz porque demora um pouco para meu computador, para carregar tudo e gerar os arquivos. Depois de fazer isso, vai aparecer aqui a pasta, segundo projeto. Vai na pasta, no projeto, abre seu editor de texto, vamos editar o index.ios.js. Se você quiser rodar a aplicação, React Native faz run IOS. Para rodar, vai abrir o simulador do Xcode e vai abrir o package manager do React. Então, vai ser assim, vamos lá para o editor de texto, tem o meu átomo já aberto. Estamos no index, doraios.js. Vamos remover essas coisas aqui, que eu não quero saber mais. Vamos ativar o debug aqui, para eu ver o browser. Clica aqui. Aí vai para o Chrome, vai abrir essa tela. Vou clicar em pack, inspecionar para abrir o console aqui, para debug. Vamos também habilitar o Live Reload, para atualizar automaticamente, quando eu salvo o arquivo. Quando eu salvo meu core. Então, se eu fizer uma coisa que mudo, já automaticamente mudo aqui. Então, para começar, antes disso, vamos fazer o back-end falso. O fake back-end. Estou aqui no meu projeto. Eu vou instalar esse módulo chamado JSON Server. Tá bom? Se você quiser instalar global, ponta, conhecim, eu já tenho. Se você quer salvar no seu node modules, diretor node modules, você põe save. E vai salvar a dependência no package JSON. Tá bom? Pode fazer. Deixa eu botar no package JSON. Então, se eu ver aqui o package JSON, as dependências só têm react react native. Mas agora vou adicionar o módulo JSON Server, para a gente simular o back-end. Demorar um pouco aí, vai adicionar aqui. E esse módulo é muito útil. Vai simular o back-end, que você precisa só um arquivo de texto que tem os dados no formato JSON. Vamos começar a fazer um negócio aqui, enquanto esse negócio está rodando. Vamos criar um diretório aqui. Tá bom? No seu projeto, crie um diretório chamado JSON. Vamos criar um arquivo dentro dele, chamado db.json. Tá bom? Aqui vai ser o nosso banco de dados, que vai ser tudo em JSON. No nosso caso, trabalhamos com perfil de pessoas. Então, a gente só precisa do nome da pessoa, da idade e da link para a imagem do perfil. Vamos ver o wireframe de novo, a imagem, o link para imagem, o nome e a idade. Então, o que a gente vai fazer para criar esse back-end? Vamos abrir o objeto do JSON. Vamos pôr pessoas aqui. Vamos botar um array. Vamos criar um objeto para cada pessoa. Vou botar um id e tem que ter JSON. Então, tem que ter essas coisas aqui, porque é JSON. Não se esqueça das caracteres. Vamos botar o nome. Esqueci de novo. Nome, sei lá. Vamos botar. E a idade? Idade, sei lá, insert. Vamos botar o URL. Vamos copiar de local aqui. Memoro um pouco. Escolhe, sei lá. Preciso de HTTPS, senão não vai funcionar React Native. Será que eu acho um HTTPS? É difícil. Aqui, acho que vamos pôs aqui. Vamos quebrar esse time-out. Vou botar as linhas. Tá aí. Vamos botar as pessoas dentro do array. A gente está seguindo RESTful. Hot as RESTful, usando REST. Vai seguir isso para a dron, gente. O JSON saiu e o padrão no REST. Vamos seguir isso. Tem aqui as pessoas no plural. Todas as pessoas dentro do array, cada pessoa é um objeto. JSON, id, nome, idade e o link. Vamos copiar umas três, talvez. Id, dois, três. Não sei. Vou botar RU, 32. Time-out. Vamos deixar tudo no mesmo link, tá bom? Então, assim que a gente já fez o banco de dados, falso. Solpou assim e vamos ver se está funcionando. Vamos voltar ao retornal terminal. Você vê que terminou a instalação. Vamos verificar o package JSON. Aqui, adicionei o JSON Server, as dependências. Tá bom? Agora, vamos rodar. Primeiro de tudo, vai um cd para o JSON. Não se esqueça de fazer isso, senão, se você fizer o comando do JSON Server e não estiver dentro da pasta JSON, vai incluir os seus arquivos no servidor do JSON. Então, por favor, vá para a pasta, o diretório JSON primeiro. Execute o comando JSON Server, a opção dash, dash, watch. If and watch. E o nome do banco de dados, dever JSON. Vamos secutar. Acho que eu esqueci nada aqui. Vamos ver. Nenhum problema, tá bom. Funcionando agora. Então, o back-end vai estar nesse local aqui. Vamos ver o que aqui é. É o RESTful API. Então, API RESTful, tá bom? Isso que o JSON Server faz. API. Mostro aqui que você pode acessar os recursos, pessoas. Aí, clique em pessoas. Pode ver que já retono JSON. A gente vai usar isso do nosso React Native, ok? Agora, já temos os dados. O banco de dados está configurado. Simulado lá. A gente deixa aqui rodando o JSON Server. A gente pode fazer um requerimento, request. Request get para pegar informação. Isso que a gente fez no navegador. A gente fez um get. Barra pessoas. A gente abteu os recursos, informação. Agora, vamos voltar ao nosso React Native. Começar a fazer a aplicação. Já que temos o banco de dados simulado. Já. Vamos... Então, vamos fazer primeiro um pouco de estilo aqui. Se eu botar aqui perfil, aí, ponho imagem, nome e idade. Vamos ver esse negócio aqui. Isso que eu fiz com o GoMockingbird. Então, vamos botar um test, text, perfil. Já está incluído aqui o componente, não importa. Não importa. Perfil. Vamos ver o negócio aqui do Flexbox. O padrão aqui que fiz é o Tattoo do centro. Então, aparecer no centro. O padrão do FlexDirection do Flexbox aqui do React Native é Column. Tá bom? Esse aqui é o padrão. Impressionante digital. Mas é digitaí explícito. Explicito? Você sabe que é isso. No React Web, eu acho que o Flexbox para Web, o padrão é Row. Tá bom? Mas quando você põe coluna, o Axis é o vertical aqui. Então, vai vindo assim. Aí, quando você adiciona mais, o desses vai verticalmente, adicionando, entendeu? Que é o MainAxis. MainAxis do Flexbox.