Um momento
Aula 06
Cursos / CRUD com o Redux (e React Native)
Início a Partir do Projeto Lista de Posts Redux e Atualização com o Xcode

Summary

Resumo do Vídeo sobre API RESTful e Aplicativo com Redux

No vídeo anterior, foi lançada uma API RESTful para o Hiroko, acessível através da URL seunome.hirokoapp.com/posts. Para uso local, é possível rodar a API com o comando npm start em um projeto chamado "fake RESTful API" disponível no GitHub. Alternativamente, é possível utilizar o JSON Server com o comando json-server --watch db.json.

Configurando o Projeto

O vídeo também aborda a configuração do projeto para aqueles que ainda não completaram o curso de introdução ao Redux. O projeto pode ser encontrado no GitHub (github.com/nbkhope), sob o repositório "lista de post API Redux". Para configurá-lo:

  1. Clone o repositório com git clone <link-do-repositório>.
  2. Acesse o diretório do projeto.
  3. Instale as dependências usando npm install.
  4. Atualize o projeto no Xcode ou Android Studio conforme necessário.

Execução do Aplicativo

O apresentador demonstra como abrir o projeto no Xcode. Após abrir o arquivo .xcworkspace e aceitar possíveis atualizações, ele executa o simulador do iPhone com o comando react-native run-ios.

Funcionalidades do Aplicativo

O aplicativo, já finalizado na série anterior, permite visualizar uma lista de posts. As novas funcionalidades a serem implementadas incluem:

  • Criar Novo Post: Um botão que leva a uma nova tela para criar um post.
  • Editar Post: Semelhante à página de novo post, mas pré-preenchida com os dados existentes.
  • Deletar Post: Opção para remover um post da lista.
  • CRUD Completo: O aplicativo passará a realizar todas as operações CRUD (Create, Read, Update, Delete).

O próximo vídeo abordará como configurar o projeto no Android Studio.

Video Transcript

No vídeo passado a gente lançou a nossa API RESTful para o Hiroko. Então se você der um lançamento e está no Hiroko, você pode acessar a API pela sua URL, dependendo do seu nome aqui, ponto Hiroko app ponto com, para acessar as postas, barra postas. Caso você esteja rodando a API localmente, você pode usar o comando NPM in Start no módulo RESTful, fake RESTful API que eu fiz no GitHub. Também pode usar JSON Server comando, ifm ifwatch db.json e vai rodar no seu API do mesmo maneira localmente, tá bom? Nesse caso eu não tenho comando global, por isso que não funcionou, mas se você dar NPM Start no json server vai rodar. Então vamos continuar, a gente agora vai lidar com o aplicativo. Então se você lembra, se você fez o aplicativo, se você fez o aplicativo do introdução ao Redux com React Native, a minha série de vídeos anterior, você já tem o projeto e já dá para continuar, não precisa ver esse vídeo, tá bom? Esse vídeo vai configurar o projeto para aqueles que não fizeram o introdução ao Redux. Então vamos lá. Então se você não tiver o projeto ainda, você pode ir para minha página do GitHub, GitHub.com, barra nbkhope. O nome da repositória é liste de post, se não achar aqui na página principal, você pode clicar em repositores e dar uma busca, lista de post e foi Redux, essa aqui. Tá bom? Esse é o projeto finalizado do meu série de tutoriais chamada introdução ao Redux. Então se você não tem, por favor clone aqui, copiar o link. Deixa eu ver. Vou dar um get clone aqui. Eu só cheguei a casa já, tenho. Não sei o que, não sei o que, ok. Eu vou dar a get clone. Mas se interesse, mas eu vou botar em outro direitório, tá bom? Tá certo? Eu dei outro nome, não precisa, se você quiser dar outro nome, para a parte da só botar como o argumento final. Então eu tenho aqui, liste de post api Redux, vou entrar lá, dar um ls aqui para verificar todos os arquivos, para instalar todas as dependências, digite npm, install, vai dar um tempo aqui. Tá bom? Às vezes os arquivos do Xcode e do Android Studio vão precisar de uma atualizada, então o que eu gosto de fazer é abrir o próprio Xcode ou o Android Studio, abrir o projeto lá e ele vai dar uma verificada e se tiver, requerir uma atualização, eu aceito e salvo o projeto e volto para o meu terminal, tá bom? Então provavelmente vai precisar fazer isso, então já vou abrir no Xcode, no caso do iOS, tá bom? Se você está usando o Android Studio, por favor, pule para outra parte, vídeo próximo vídeo, tá bom? Então vou continuar com o iOS, próximo vídeo Xcode, é o Android Studio. Deixa eu abrir o projeto, abrir. Então vou lá no lista de posts, como é que eu fiz? Lista de posts API e dox e vou entrar na parte do iOS e abrir esse arquivo ponto Xcode proge. A norte que a gente está instalando, as coisas aqui, então eu devia ter esperado. Mas vamos ver, aqui da... Você não acha que está indexando, processando os arquivos, não sei o que. No Xcode, está a gente está usando aqui. Tem um... esse negócio aqui que é uma alerta, ok, terminou aqui. Tô com alerta aqui do projeto, não sei o que. Atualize para as... Recomendo série, então vou clicar aqui duas vezes, vou aceitar, Transform Changes, para atualizar as coisas do projeto. Não sei o que. Processando. Vai demorar um pouco aqui. Depois só vou salvar o projeto e se você quiser já rodar o simulador daqui, você pode clicar nesse botão. Eu não vou rodar daqui, vou rodar da linha de comando. Usando o comando React Native Run iOS. Deixa só ele terminar para eu fechar o Xcode. Tá bom, fechei. React Native Run iOS. Launching iPhone, rodando o simulador do iPhone. Vai demorar um tempo, se você quiser pular o vídeo um pouco. Agora, vamos ver o que vamos fazer para o nosso aplicativo. Você está vendo que a gente tinha isso. Esse aplicativo que a gente tem, que foi finalizado com o curso de um vídeo, que é o que é o que a gente tem que fazer. Você está vendo que a gente tinha isso. Esse aplicativo que a gente tem, que foi finalizado com o curso de introdução ao Redux do meu canal, a gente fez uma lista de posts, quando você clica em um deles, vai para outra cena, essa cena aqui, para ver o post, tem o título e o conteúdo do post. Tem um botão de voltar que volta para essa cena aqui. Agora a gente vai aprimorar o aplicativo, adicionar um botão novo, que vai para essa cena para criar um novo post com título e conteúdo. Um botão de OK que vai criar e voltar para a lista, com o que vai aparecer o novo e tem na lista, post. Tem também um botão de voltar e cancelar, que é a mesma coisa, só voltar para esse cara. E dá ver post, se você criar em um e ver o post, pode editar. Editar vai ser quase a mesma coisa da página de novo post. Vai ter o título, tudo autocompletado. Tem o OK que, quando clicar, vai voltar para ver post. Ou pode deletar o post, que também, com deleto post, volta para a lista de posts. Botão de cancelar e voltar para voltar a cena anterior. Com isso, a gente vai fazer um CRUD com Plats. A gente já tinha feito o R do CRUD e com esse novo, vai fazer o C. E com o editar, vai fazer o U e com o botão dela, vai fazer o D. CRUD, create, read, update, delete. Só voltar ao terminal, para checar o que está aqui. O semulador já abriu, então está tudo OK. Funcionando direitinho. Normalmente demora assim, porque tem que estar com a tela do navegador aberto para ficar rápido. Se você não fica muito rápido quando eu tenho o debugger na mesma, na mesma nível de tela que o semulador. Então, está isso. Próximo vídeo será sobre o Android Studio.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: