Flutter: utilizando pacotes Getx para fazer integração de APIs

Conhecendo a API - Apresentação

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 que vamos aprender?

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.

Pré-requisitos

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!

Conhecendo a API - Baixando e rodando a API

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 e Flutter nas mesmas versões que deixamos para você na atividade.

Instalando módulos

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.

Criando banco de dados

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.

Executando a API

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.

Conhecendo a API - Testando a API com Postman

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.

Testando a API com Postman

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.

Rota de registro

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:

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.

Rota de login

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:

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.

Rota de envio de vídeos

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:

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.

Rota de listagem de vídeo

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:

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.

Sobre o curso Flutter: utilizando pacotes Getx para fazer integração de APIs

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:

• Conhecendo a API
• Fazendo o registro de usuário
• Utilizando o GetConnect
• Utilizando o GetStorage
• Realizando ajustes finais