Olá, tudo bem? Meu nome é Matheus Alberto, sou instrutor na Alura e quero te desejar boas-vindas a mais um curso de Flutter, onde aprofundaremos em GetX.
Audiodescrição: Matheus Alberto é um homem de pele clara, olhos castanhos e cabelos curtos lisos de cor castanho escuro. Está com uma roupa preta. Ao fundo, estúdio com iluminação baixa. À direita, uma estante com decorações.
O projeto em que vamos trabalhar é o VidFlow, uma aplicação de gerenciamento de vídeos.
Nessa aplicação, vamos lidar com cadastro de pessoas usuárias. Assim, quando alguém cadastrar um nome, e-mail e senha no aplicativo, iremos armazenar as informações desse cadastro no nosso banco de dados.
Posteriormente, essa pessoa poderá realizar um login com o-mail cadastrado. Por isso, também precisamos armazenar as informações da sessão.
Além disso, faremos uma simulação de upload de vídeo para guardá-lo dentro do VidFlow, onde conseguiremos inserir o nome do vídeo e também uma thumbnail, que é uma imagem representativa do vídeo.
Conseguiremos armazenar essas informações e, posteriormente, exibir todos os vídeos armazenados em uma lista.
O GetX é uma ferramenta bastante completa e extensa. Com ela, você poderá separar a lógica da aplicação dentro dos seus controles, fazer requisições para uma API, lidar com as respostas e obter as informações, além de lidar com a interação entre pessoas usuárias e a aplicação.
Para acompanhar esse curso, é importante que você tenha conhecimentos básicos de Flutter, além de algum conhecimento em gerenciamento de estado com MobX e GetX.
Se você gostou da proposta, venha conosco nessa jornada no próximo vídeo. Até breve!
O projeto que vamos desenvolver é o projeto de VidFlow, que já está pré-montado, com as telas e algumas interações já estabelecidas.
No nosso aplicativo, temos a tela de login onde podemos entrar na tela de cadastro de usuário, ao clicar em "Faça seu cadastro", ou na tela de dashboard ao clicar em "Entrar".
A partir da dashboard, também podemos adicionar um vídeo através do botão "Upload de vídeo" que redireciona par tela de cadastro de vídeo. Uma vez cadastrado um vídeo, voltamos para a tela de dashboard.
Basicamente, esse é o fluxo da nossa aplicação.
Para desenvolver as features (funcionalidades) de login, registro, salvar um vídeo e mostrar esses vídeos dentro da dashboard, vamos usar uma API própria, que deixaremos disponível para você na atividade "Preparando Ambiente".
É muito importante que você tenha as versões de
Node
,NPM
eFlutter
nas mesmas versões que deixamos para você na atividade.
Com tudo isso já preparado e a API baixada, vamos abrir o terminal, que é onde vamos rodar essa API.
Já estamos na pasta raiz dessa API. Podemos confirmá-lo utilizando o comando ls -l
para saber o que tem dentro desse diretório.
ls -l
Dentro dele temos duas pastas, db
e node_modules
, e dois arquivos, package-lock.json
e package.json
.
Para rodar essa API, é importante que você tenha esses módulos instalados. Para instalar tudo o que tem dentro desse projeto, basta rodar o comando npm install
.
npm install
No nosso caso, teremos um erro EACCES: permission denied
, porque esse usuário específico não tem acesso para sobrescrever as informações nessa máquina.
No seu computador, provavelmente, deve funcionar. Caso não funcione, você pode tentar rodar o prompt do comando como superusuário, clicando com o botão direito em "Executar como administrador" no Windows.
Para Linux ou Mac, basta escrever sudo npm install
e digitar a senha.
sudo npm install
E aí, ele vai instalar todas as bibliotecas necessárias desse projeto.
Com tudo isso já instalado, o que precisamos fazer para rodar? Primeiramente, precisamos criar o banco de dados dentro da pasta db
, que atualmente está vazia.
Para acessá-la, usaremos o seguinte comando:
cd db
Para criar o banco de dados pelo explorador de arquivos, você poderia criar um novo arquivo e chamá-lo de db.json
.
Enquanto no terminal, podemos usar o comando vim db.json
.
vim db.json
Pode ser que você não tenha instalado o editor vim
sua máquina. Caso esse seja o caso, você pode criar esse arquivo db.json
através do explorador de arquivo. O importante é tê-lo dentro dessa pasta.
Nesse arquivo vazio, precisamos colocar duas propriedades importantes, users
e videos
, que são as rotas que vamos usar para fazer o cadastro de usuários e o cadastro de vídeos.
Seguindo o formato do JSON (JavaScript Object Notation) do arquivo, vamos abrir e fechar chaves.
Colocaremos a primeira propriedade users
entre aspas duplas. Em seguida, adicionaremos dois-pontos e colchetes, pois é uma lista vazia.
Depois, temos a outra propriedade, videos
, também entre aspas duplas seguido de dois-pontos. Ela também será uma lista vazia.
db.json
:
{
"users": [],
"videos": []
}
Com essas duas propriedades inseridas em db.json
, podemos salvar o arquivo e sair do editor com o comando :wq
.
Agora, vamos voltar para a raiz do projeto com o comando:
cd ..
Podemos garantir que estamos na raiz, novamente com ls -l
.
Feito isso, vamos rodar um comando para poder subir a API. O comando será json-server
seguido do arquivo que criamos ./db/db.json
, além do módulo de autenticação com -m ./node_modules/json-server-auth
.
json-server ./db/db.json -m ./node_modules/json-server-auth
Pressionando o "Enter", temos uma mensagem dizendo hi (oi), informando que subiu tudo corretamente. E também teremos as rotas de users
e videos
:
Retorno:
{\^-^/} hi!
Loading ./db/db.json
Done
Loading ./node_modules/json-server-auth
Done
Resources
http://localhost:3000/users
http://localhost:3000/videos
Home
http://localhost:3000
A API já está no ar e está pronta para receber os nossos vídeos e os nossos usuários.
Nossa API já está em execução, mas como saberemos se ela está funcionando?
Poderíamos escrever todos os códigos Flutter que farão as requisições e realizar os testes pelo próprio Flutter. No entanto, podemos cometer erros ao testar dentro do Flutter e, no final, pode ser até culpa da API que não estava funcionando.
Outra ferramenta que podemos usar para testar APIs é o Postman. Ele permite fazer requisições para testar a API, verificando as rotas, os retornos e também as entradas de dados.
Já temos o Postman em funcionamento e, a partir dele, vamos testar algumas rotas.
Caso queira testar as rotas com o Postman conosco, dentro de "Collections", na barra lateral esquerda, você pode criar uma nova requisição clicando no botão "New", na parte superior do Postman.
O tipo de requisição com a qual vamos trabalhar é HTTP.
Em seguida, aparecerá uma página à direita com uma área de trabalho onde teremos um campo de URL para preencher a rota, logo abaixo, contamos com várias abas para definir parâmetros, cabeçalhos, autorização, corpo da requisição e outras configurações. E, na parte inferior, temos um painel de resposta.
A partir dessa área, você pode criar várias requisições e testar cada uma delas separadamente.
Já temos as requisições prontas para testar. Você pode escrevê-las depois com as informações que disponibilizaremos na atividade "Faça como eu fiz".
Agora, vamos explicar qual é o tipo de solicitação que vamos trabalhar, quais são as rotas, o corpo e assim por diante.
A primeira rota é a rota de registro, que é a mais importante. Para poder fazer algum login, precisamos primeiro registrar alguém.
O nosso tipo de requisição para o registro é do tipo POST
.
Podemos alterar o tipo de registro no dropdown à esquerda de onde colocamos a URL. Provavelmente, por padrão, será a solicitação GET
, só precisamos trocá-la para POST
.
Em seguida, temos a URL da nossa solicitação, onde vamos enviar essa solicitação. Nossa API roda na localhost
na porta 3000
e o caminho de registro é /register
.
Requisição POST no Postman:
localhost:3000/register
Note que na API não havia aparecido esse caminho de registro. Isso porque é algo específico da nossa API.
O arquivo db.json
simplesmente guarda as informações, mas a autenticação tem outras rotas que nos permitem também guardar uma nova pessoa usuária e assim por diante.
Dentro de /register
, temos que enviar algumas informações. No corpo da nossa solicitação, na aba "body", vamos escolher o tipo de informação como raw.
E, no campo de texto, vamos escrever um objeto JSON, assim como escrevemos as chaves users
e videos
no arquivo db.json
.
A primeira propriedade que temos é de email
, onde vamos passar um e-mail de exemplo. Nesse caso, será "email@email.com".
A segunda propriedade é password
, onde vamos definir uma senha. Por exemplo, "123123123".
E a terceira e última é user
, ou seja, a pessoa usuária. Para exemplificar, colocamos o nome "Beto".
Corpo da requisição:
{
"email": "email@email.com",
"password": "123123123",
"user": "Beto"
}
No cabeçalho, que está na aba headers, devemos passar apenas o content-type como application/json
.
Cabeçalho da requisição:
Chave | Valor | Descrição |
---|---|---|
Content-Type | application/json | - |
Podemos enviar essa solicitação para a nossa API, clicando no botão "Send" (ou atalho "Ctrl + Enter"). E recebemos uma resposta logo abaixo.
Retorno com status
201 Created
em 110ms:
{
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImVtYWlsQGVtYWlsLmNvbSIsImlkIjoxLCJpYXQiOjE2MTY2NjM2NTIsImV4cCI6MTYxNjc0OTY1Mn0.4Pr0bxkyE-TudBcmHupOmxJ8B0VwkHbWfYZ72S3sXg",
"user": {
"email": "email@email.com",
"user": "Beto",
"id": 1
}
}
Nessa resposta, temos um accessToken
com várias letras e números misturados. Essa será uma informação muito relevante para nós em breve.
E também um objeto chamado user
, onde foi retornado aquilo que enviamos para a API, que é o email
, user
e um id
.
Esse id foi gerado automaticamente para identificar qual é o nome da pessoa usuária. Nesse caso, como foi a primeira entrada, o id
dele será 1.
Se abrimos o terminal, ele captou o nosso envio da API:
POST /register 201 99.934.ms - 280
Temos uma requisição do tipo POST
para a URL /register
e o código de retorno foi 201
. Esse status 201 será muito importante posteriormente, quando formos desenvolver a nossa aplicação em Flutter.
Voltando para o Postman, nossa próxima requisição é de login que também será do tipo POST
. Sua URL será localhost:3000
seguido da rota /login
.
Requisição POST no Postman:
localhost:3000/login
No corpo dessa requisição, só precisamos enviar duas informações: email e senha da pessoa usuária.
Para isso, colocamos no body um JSON com as duas propriedades, email
e password
, com os devidos valores que colocamos no registro.
Corpo da requisição:
{
"email": "email@email.com",
"password": "123123123"
}
E no cabeçalho, também teremos o content-type com valor application/json
.
Cabeçalho da requisição:
Chave | Valor | Descrição |
---|---|---|
Content-Type | application/json | - |
Após enviar a requisição, recebemos um retorno de bem-sucedido.
Retorno com status
200 OK
em 94ms:
{
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImVtYWlsQGVtYWlsLmNvbSIsImlkIjoxLCJpYXQiOjE2MTY2NjM2NTIsImV4cCI6MTYxNjc0OTY1Mn0.uhQYfgBTEQBd2Gjrcxz1OKQqHlN5eXVKcz278K7gT0",
"user": {
"email": "email@email.com",
"user": "Beto",
"id": 1
}
}
Novamente o accessToken
possui várias letras e números misturados. Também temos um objeto de user
, contendo o email
, user
e id
.
Nossa próxima requisição é a de sendVideo
, para poder enviar um vídeo para o nosso banco de dados.
Essa requisição também será do tipo POST
e a URL será localhost:3000/600/videos
.
Esse número 600 é algo muito específico dessa API. Não quer dizer que todas as APIs terão essas rotas com essas mesmas URLs ou até esses mesmos códigos.
Especificamente, essa nossa API trabalha com a rota 600/videos
para poder enviar nossos vídeos. É importante para conseguir associar uma pessoa usuária a um vídeo.
Requisição POST no Postman:
localhost:3000/600/videos
E agora vamos entender o porquê que precisa desse 600.
No corpo dessa requisição, teremos 3 parâmetros também em formato JSON.
Será uma url
, onde colocamos a URL da imagem, por exemplo, imagem.png
. Também definiremos um title
que será o título do nosso vídeo.
Por fim, o terceiro parâmetro é o userId
, que é exatamente o ID da pessoa usuária que recebemos no login.
Lembre-se que no retorno da requisição de login recebemos um objeto user
, em que uma das propriedades era id
. Esse id
deve ser exatamente o mesmo que o userId
. Ou seja, na requisição sendVideo precisaremos colocar userId
como 1.
Corpo da requisição:
{
"url": "imagem.png",
"title": "titulo",
"userId": 1
}
No cabeçalho, agora temos que enviar uma informação extra. Além do content-type, também temos que enviar o authorization.
Sem uma autorização, não conseguimos atrelar exatamente a pessoa usuária àquele vídeo que está sendo enviado. Se tentarmos enviar sem uma autorização, receberíamos uma resposta de "missing token".
Esse token também recebemos na resposta da requisição de login. Devemos copiar o accessToken
, que é uma string cheia de letras e números. Cada token é diferente, por isso, lembre-se de copiar o seu.
Voltando no cabeçalho da solicitação de sendVideo, na coluna de values da linha de authorization, vamos digitar Bearer
com "B" maiúsculo, dar um espaço e colar o accessToken
.
Cabeçalho da requisição:
Chave | Valor | Descrição |
---|---|---|
Content-Type | application/json | - |
Authorization | Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImVtYWlsQGVtYWlsLmNvbSIsImlkIjoxLCJpYXQiOjE2MTY2NjM2NTIsImV4cCI6MTYxNjc0OTY1Mn0.uhQYfgBTEQBd2Gjrcxz1OKQqHlN5eXVKcz278K7gT0 | - |
Após enviar a solicitação com sucesso, recebemos um código de status foi 201
.
Retorno com status
201 Created
em 15ms:
{
"url": "imagem.png",
"title": "titulo",
"userId": 1,
"id": 1
}
A resposta foi a URL da imagem, o título, o ID da pessoa usuária e o ID do vídeo para poder identificá-lo.
E, por último, a requisição de pegar todos os vídeos daquela pessoa usuária, é uma solicitação do tipo GET
.
Não queremos pegar a informação do vídeo de outras pessoas. Queremos pegar apenas daquela que está logada.
Por isso, além de definir a requisição como GET
, vamos passar a URL localhost:3000/videos
seguido de ?userId
igual a 1
, que é o ID da pessoa que cadastramos.
Requisição GET no Postman:
localhost:3000/videos?userId=1
Nesse caso, não teremos um body (corpo). Enquanto o cabeçalho precisará apenas do content-type. Não precisaremos passar autorização.
Cabeçalho da requisição:
Chave | Valor | Descrição |
---|---|---|
Content-Type | application/json | - |
Após enviar a requisição, o tipo do nosso retorno será uma lista contendo apenas o vídeo que enviamos, pois é o único cadastrado.
Retorno com status
200 OK
em 18ms:
[
{
"url": "imagem.png",
"title": "titulo",
"userId": 1,
"id": 1
}
]
Essas são as URLs e os caminhos básicos para poder fazer requisições na nossa API.
O curso Flutter: utilizando pacotes Getx para fazer integração de APIs possui 99 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas