Dart: dominando assincronismo e criando comunicação com APIs

Entendendo pacotes e requisições - Apresentação

Olá! Meu nome é Ricarth Lima e serei o instrutor.

Audiodescrição: Ricarth é um homem de pele clara, com cabelo Black Power e barba na cor castanho-escuro. Usa óculos de armação transparente e uma camiseta escura com o logo da Alura. Ao fundo, uma parede lisa com iluminação degrdê do roxo ao azul. Ao lado esquerdo, duas prateleiras na parede, com livros e objetos de decoração.

Boas-vindas ao curso de Dart: Fundamentos de Assincronismo e Comunicação com APIs.

O projeto que desenvolveremos nesse curso será de banco. Precisaremos lidar com as contas desse banco, incluindo o nome da pessoa e o saldo disponível. No entanto, não armazenaremos essas informações localmente em nosso computador ou projeto e sim em servidor externo.

A grande vantagem do nosso projeto é a capacidade de obter dados desse servidor externo e enviar informações para ele. Para isso, usaremos nossos conhecimentos de comunicação com API e assincronismo.

O resultado será um chatbot que, ao clicarmos em "ver contas", por exemplo, ele busca as informações no servidor e as exibe na tela.

Esses conhecimentos de API, Post, Get, comunicação através de Map, JSON, assincronismo e como preparar o Dart para lidar com operações que podem demorar, como manipular o Token e até mesmo criar uma interação com o chatbot, são essenciais no mercado. É fundamental ter domínio sobre esses conceitos, pois são a base para atuar na área.

Os pré-requisitos para este curso incluem o domínio da sintaxe básica de Dart e programação orientada a objetos com Dart.

Com esses conhecimentos, você poderá acompanhar o curso com excelência.

Estamos ansiosos para começar a explorar esse assunto fascinante. Vamos lá?

Entendendo pacotes e requisições - Instalando pacote http

Caso você não tenha uma base de dados no Gist, disponibilizamos uma atividade explicando como fazer o account.json para o Gist. Este arquivo será essencial para os próximos passos.

Com o arquivo em mãos, surge a questão de como trazer essa informação da web para aplicação Dart. É importante destacar que servidores de aplicações, como o GitHub, fornecem algo chamado API, que são interfaces de programação para aplicações.

As APIs permitem que acessemos informações armazenadas em servidores, não por meio do navegador, mas através de nossas aplicações e programas. Elas são uma solução de engenharia de software que possibilita a comunicação com sistemas externos.

Pacotes no Dart e Flutter para integração de APIs

Embora possa parecer complexo integrar informações de um ambiente externo ao nosso sistema, não precisamos nos preocupar com isso. A solução está em pacotes, bibliotecas ou plugins, que variam de nome conforme a linguagem ou stack.

No caso do Dart e Flutter, usamos pacotes. Eles são trechos de código desenvolvidos por terceiros, amplamente testados, que resolvem problemas específicos. Um desses pacotes facilita a obtenção de dados de APIs, como o Gist, e funciona tanto no Dart quanto no Flutter.

Para fazermos isso, primeiro precisamos acessar o accounts.json no Gist. Após, na lateral superior direita da tela, clicamos no botão "Raw", assim, visualizamos o arquivo.

Criando um projeto Dart no VS Code

Agora, criaremos um projeto do zero no VS Code. Para isso, abrimos a ferramenta e pressionamos o botão "F1". Assim, abre a barra de busca, na qual digitamos ">dart". Clicamos na opção "Dart: New Project".

Assim, a ferramenta exibe várias opções de tipos de projeto. Nesse momento, queremos uma aplicação de console que rodará no terminal, então, clicamos em "Console aplication".

Nisso, a ferramenta pede para selecionarmos uma pasta, selecionamos a pasta da formação clicamos no botão "Select a folder to create the project in".

Precisamos definir um nome para o arquivo. Nesse caso, temos preferência por colocar o nome da tecnologia, seguido pelo nome significativo. Nomeamos de dart_assincronismo.

Você pode usar o padrão de nomenclatura que preferir ou o estabelecido pela empresa.

Ao criar o projeto, encontramos a pasta "bin", o arquivo que criamos com a main e a pasta "lib" para futuramente inserirmos arquivos que se comunicarão com a bin.

Faremos agora alguns ajustes. Clicamos no primeiro arquivo chamado dart_assiscronismo.dart, pressionamos "F2" e renomeamos para main.dart.

Feito isso, todo o código que veio nesse arquivo, selecionamos e apagamos. Depois, salvamos o arquivo. Para evitar que erros aconteçam na pasta "test", selecionamos o arquivo dart_assincronismo_test.dart e pressionamos "Delete" para apagar. Faremos o mesmo com o arquivo dart_assincronismo.dart que está na pasta "lib".

Assim, temos apenas o arquivo main.dart. Nele, escrevemos void main(){}, nas chaves, passamos print("Olá, mundo"). Fazemos isso para testar se a limpeza que fizemos funcionou.

Abrimos o terminal com "Ctrl + J" e passamos o comando dart run bin/main.dart.

dart run bin/main.dart

Olá, mundo!

Instalando o pacote HTTP no projeto

Deu certo, temos o retorno que passamos. Mas, para instalar o pacote necessário, passaremos o comando dart pub add http, que adiciona o pacote HTTP ao projeto.

dart pub add http

Feito isso, é baixado e adicionado na nossa aplicação. Já temos o HTTP para usar no código. Para confirmar se ele foi mesmo instalado, no Explorer, acessamos o arquivo pubspec.yaml.

Esse é o arquivo que controla as dependências, ou seja, os pacotes que nosso programa depende no Dart. Se analisarmos a linha 11, notamos que foi adicionado um HTTP. Ele que, em sequência, usaremos para nos comunicarmos com o Gist.

Até o próximo vídeo!

Entendendo pacotes e requisições - Primeira requisição para web

No vídeo anterior, instalamos o pacote http, que nos ajudará a realizar a comunicação com o Gist. Porém, pode surgir a seguinte dúvida: de onde vem esse pacote?

Fizemos a instalação executando um código no terminal e ele foi instalado normalmente, mas isso vem do próprio sdk do Dart ou de algum lugar externo?

Usando pacotes no Dart

Acessando o repositório pub.dev

Com o navegador aberto, acessaremos uma página extremamente importante para pessoas desenvolvedoras que trabalham com Dart e Flutter aberta: o pub.dev.

O pub.dev o repositório oficial de pacotes do Dart e do Flutter, construído pelo Google, que é responsável pelo Flutter e pelo Dart. É neste site que buscamos pacotes (no nosso caso, o http).

Buscando o pacote http

O primeiro pacote listado ao buscarmos por "http" é o http.

Antes do pacote http, temos o pacote recomendado dart:core, mas, normalmente, não focamos diretamente nele. Instalaremos de fato o segundo pacote listado.

Nesta página, encontramos todas as informações sobre o pacote. Entender isso é crucial, pois, conforme surgem necessidades de terceirizar ações, recorremos a esse recurso frequentemente.

Na vida de uma pessoa programadora, é inviável programar tudo do zero. Muitas vezes, programar usando pacotes de outras pessoas é mais rápido e seguro, pois já foi amplamente testado.

O pub.dev serve exatamente para sabermos o que é seguro e o que não é. Por exemplo: podemos pesquisar por uma solução na barra de busca e encontrar vários pacotes diferentes além do http.

Como em uma pesquisa no Google, é necessário saber identificar o que é confiável ou não.

Existem vários parâmetros para identificar isso no pub.dev, como as pontuações no topo do menu lateral direito, que devem ser altas. Falaremos sobre cada uma delas no Para saber mais desta aula.

As plataformas em que o pacote funciona também são importantes. O http, por exemplo, funciona tanto no Dart quanto no Flutter, e, funcionando no Flutter, é compatível com Android, iOS, Linux, MacOS, entre outros sistemas. Isso é muito importante.

Além disso, podemos observar quem desenvolveu? No caso do pacote http, foi a própria equipe dart.dev, que tem o selo de verificação, tornando esse pacote extremamente confiável.

Trata-se de um pacote que faz parte da documentação, mas nem sempre utilizaremos pacotes desenvolvidos pela própria equipe do Dart e do Flutter. Assim, precisamos saber usar o pub.dev para aprender a utilizar os pacotes e verificar a confiabilidade.

Importante! Lembre-se de conferir a atividade Para saber mais para mais detalhes sobre isso.

Importando o pacote http

Feito isso, vamos voltar ao código para usar, de fato, o pacote http. Com o arquivo main.dart aberto, começaremos pela importação do pacote, pois ele ainda não está presente.

No topo do código, faremos um import seguido de http. Dentro do pacote package:http/, há vários arquivos. Nesse caso, queremos importar apenas o arquivo chamado http.dart.

main.dart:

import 'package:http/http.dart';

void main() {
  print("Olá, mundo!");
}

Observação: Nesse momento, o pacote aparecerá em amarelo, pois foi importado, mas ainda não está em uso. Isso é importante pois, ao importar um pacote, o arquivo final fica mais pesado e um pouco mais difícil de carregar. Assim, caso o pacote não esteja sendo usado, há um desperdício de recursos.

Criando a função requestData()

Para usar o pacote, após a função main(), vamos declarar a função requestData(), responsável pela requisição de dados. Ela poderia receber qualquer nome, mas chamaremos dessa forma.

No escopo desta função, começaremos estabelecendo a URL que será utilizada para requisitar os dados, ou seja, para qual URL o pacote irá apontar. Para isso, criaremos uma String chamada url, que, por enquanto, receberá uma string vazia ("").

import 'package:http/http.dart';

void main() {
  print("Olá, mundo!");
}

requestData() {
  String url = "";
}

Para obter a URL, podemos voltar ao navegador, onde temos o arquivo accounts.json aberto no GitHub. Basta copiar o endereço da barra de navegação e compor a String url.

// código omitido

requestData() {
  String url = "https://gist.githubusercontent.com/ricarthlima/a0eb198cb7a70696c4031e7e577de0cd/raw/356ce2c39dfd58d3d2e948d1ad87ea828544f1db/accounts.json";
}

Utilizando o método get()

Agora que temos a url, podemos usar uma função do pacote http chamada get(), que significa pegar, capturar, ou requisitar. A função get() não estaria disponível se não tivéssemos importado a biblioteca http anteriormente. Podemos até mesmo fazer um teste:

1. Criar um projeto do zero;
2. Não importar ou instalar a biblioteca http;
3. E tentar usar a função get().

A função solicita um objeto do tipo Uri, que é a url. Portanto, a URL passada como String não funciona nesse caso. Essa é uma convenção sobre como nos comunicamos usando programação na web: para isso, utilizamos objetos Uri, que basicamente dividem a String em partes.

Por exemplo: o host é quem está no início na URL, enquanto o endpoint está no final. O próprio objeto faz esse trabalho de divisão. No entanto, para não precisarmos fazer a conversão manualmente, existe uma forma automática de trabalhar com isso.

No método get(), em vez de passar url, vamos chamar um objeto Uri, que possui um construtor chamado parse (Uri.parse()). O parse() está preparado para receber uma URL em formato de String e convertê-la para o formato Uri. Com isso, passamos url para parse().

// código omitido

requestData() {
  String url = "https://gist.githubusercontent.com/ricarthlima/a0eb198cb7a70696c4031e7e577de0cd/raw/356ce2c39dfd58d3d2e948d1ad87ea828544f1db/accounts.json";
  get(Uri.parse(url));
}

Para finalizar, precisamos chamar a função requestData() no escopo de main():

Nesta etapa, também podemos comentar a linha do print() de "Olá, mundo!".

import 'package:http/http.dart';

void main() {
  // print("Olá, mundo!");
  requestData();
}

// código omitido

Agora, o método get() é responsável por pegar o que está no arquivo accounts.json nos servidores do GitHub e trazer para a nossa aplicação. Vamos imprimir para verificar se funciona de fato?

Testando o código

Ainda na mesma linha, envolveremos o método get() com um print().

import 'package:http/http.dart';

void main() {
  // print("Olá, mundo!");
  requestData();
}

requestData() {
  String url = "https://gist.githubusercontent.com/ricarthlima/a0eb198cb7a70696c4031e7e577de0cd/raw/356ce2c39dfd58d3d2e948d1ad87ea828544f1db/accounts.json";
  print(get(Uri.parse(url)));
}

Feito isso, vamos abrir o terminal com o atalho "Ctrl + J" e executar o seguinte comando:

dart run bin/main.dart

Como retorno, recebemos a seguinte resposta:

Instance of Future<Response> (ou "Instância de Future<Response>")

Conclusão

Não é exatamente isso que esperávamos. Um ponto positivo é que não houve erro, mas também não recebemos as informações das contas das pessoas usuárias do nosso banco. Portanto, precisamos fazer um tratamento, e o segredo está na palavra "Future" (futuro).

Falaremos sobre isso na sequência!

Sobre o curso Dart: dominando assincronismo e criando comunicação com APIs

O curso Dart: dominando assincronismo e criando comunicação com APIs possui 157 minutos de vídeos, em um total de 63 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:

• Entendendo pacotes e requisições
• Capturando pacotes
• Enviando informações
• Lidando com Streams e modelos
• Serviço e aplicação