iOS com SwiftUI: fazendo requisições HTTP e conexão com API

Requisição HTTP com apiary - Apresentação

Olá! Boas-vindas ao curso iOS: fazendo requisições HTTP e conexão com API! Eu sou o Ândriu Coelho e serei seu instrutor.

Audiodescrição: Ândriu é um homem de pele clara, cabelo castanho-claro e barba curta. Está com uma camiseta azul-marinho. Ao fundo, uma parede lisa com iluminação degradê do roxo para o azul e uma estante preta com itens decorativos.

Nesse curso, vamos aprender como se conectar às APIs. Daremos continuidade ao projeto Chef Delivery, um aplicativo de entrega de refeições.

Descobriremos como enviar requisições para um servidor e como exibir as respostas na tela.

Começaremos utilizando a requisição HTTP a partir das classes nativas do SwiftUI, como URLsession.

Aprenderemos como funcionam os métodos assíncronos, como assync/await e closuere, que demandam um tempo de espera após o envio da requisição.

Para isso, utilizaremos o Apiary, uma ferramenta de documentação de APIs para criar uma lista de lojas por meio do JSON. Assim, deixaremos de usar os mocks.

Além disso, descobriremos como enviar informações para os servidores por meio do método POST.

Na última etapa do curso conheceremos a biblioteca Alomofire, muito utilizada no SwiftUI e que facilita a criação de requisições.

Pré-requisitos

Para realizar esse curso, é importante que você tenha noção de orientação a objetos.

Também é importante que você tenha concluído os cursos anteriores da formação em Swift, pois construímos o aplicativo desde o início.

Confira todos os cursos de Swift na Formação "Domine a Linguagem Swift"!

Caso você tenha alguma dúvida ou precise de ajuda, acesse a nossa comunidade do Discord e o fórum do curso.

Nos encontramos na primeira aula!

Requisição HTTP com apiary - Conhecendo a demanda e acessando o apiary

Vamos entender quais são as implementações que criaremos no Chef Delivery.

Conhecendo a demanda

Nosso principal objetivo é trazer dinamismo ao aplicativo, isso significa que deixaremos de utilizar as classes mock do projeto.

Ao criar um aplicativo existem duas formas de colocar o projeto em prática.

A primeira é mockando as classes, como fizemos anteriormente. Já a segunda maneira é utilizando uma ferramenta para documentar APIs. Assim, é possível definir alguns contratos que a requisição irá devolver. É isso que faremos nesse curso.

Queremos que o aplicativo faça uma requisição para o servidor, que armazena as informações e as devolve para o aplicativo.

Assim, as informações não ficarão mais estáticas e sim dinâmicas.

Acessando o Apiary

Utilizaremos o Apiary, uma ferramenta que documenta APIs, ou seja, a interface de uma requisição entre o front-end e o back-end.

Começamos acessando o site do Apiary. Depois, efetuamos o login.

Você pode tanto criar uma nova conta quanto utilizar a do GitHub.

Feito isso, somos direcionados para a página de editor, na qual encontramos um código. Vamos analisá-lo para compreender o funcionamento da ferramenta.

## Questions Collection [/questions]

### List All Questions [GET]

+ Response 200 (application/json)

        [
            {
                "question": "Favourite programming language?",
                "published_at": "2015-08-05T08:40:51.620Z",
                "choices": [
                    {
                        "choice": "Swift",
                        "votes": 2048
                    }, {
                        "choice": "Python",
                        "votes": 1024
                    }, {
                        "choice": "Objective-C",
                        "votes": 512
                    }, {
                        "choice": "Ruby",
                        "votes": 256
                    }
                ]
            }
        ]

### Create a New Question [POST]

You may create your own question using this action. It takes a JSON
object containing a question and a collection of answers in the
form of choices.

+ Request (application/json)

        {
            "question": "Favourite programming language?",
            "choices": [
                "Swift",
                "Python",
                "Objective-C",
                "Ruby"
            ]
        }

+ Response 201 (application/json)

    + Headers

            Location: /questions/2

    + Body

            {
                "question": "Favourite programming language?",
                "published_at": "2015-08-05T08:40:51.620Z",
                "choices": [
                    {
                        "choice": "Swift",
                        "votes": 0
                    }, {
                        "choice": "Python",
                        "votes": 0
                    }, {
                        "choice": "Objective-C",
                        "votes": 0
                    }, {
                        "choice": "Ruby",
                        "votes": 0
                    }
                ]
            }

Por padrão, notamos haver uma estrutura. Se compararmos com o Swift, é algo parecido com um array de dicionário com chaves e valores.

Note que é utilizado a nomenclatura JSON, um formato em JavaScript muito utilizado para trafegar informações via API.

No início desse código há coleções de linguagem de programação. Abaixo, encontramos o GET. Em seguida, há o Response, que traz a lista de questões.

Utilizamos o GET quando queremos obter um recurso, como as informações de restaurante home, por exemplo.

No decorrer das aulas, vamos nos aprofundar e entender melhor sobre esse código.

Na lateral direita do navegador, visualizamos as configurações que podem ser feitas no código.

Se, por exemplo, na linha ### List All Questions mudarmos para ### List All Stores, na lateral direita notamos que o título dessa lista muda.

Ao clicar nela, abre uma janela. Em "Request" encontramos dois botões dropdown. Clicamos no primeiro e selecionamos a opção "Mock Server".

Para exemplificar, copiamos a URL que é exibida no topo da janela, abrimos uma nova aba no navegador e colamos. Feito isso, visualizamos a lista de questões presente no código.

Na prática, é isso o que o aplicativo irá receber de uma requisição feita pelo servidor.

Utilizaremos essa URL, chamada de endpoint, para fazer a requisição e obter as informações como resposta.

Nesse momento estamos visualizando informações de questões, que é o modelo pronto da ferramenta.

Porém, nos próximos vídeos, alteraremos essas informações para a lista de restaurantes que temos na home do aplicativo.

A próxima etapa é criarmos a primeira requisição no aplicativo.

Te esperamos no próximo vídeo!

Requisição HTTP com apiary - Iniciando a primeira requisição HTTP com URLSession

Agora, criaremos a primeira requisição HTTP utilizando as informações do vídeo anterior.

Criando a primeira requisição

ContentView

Para isso, no projeto, abrimos o ContentView, a view principal do aplicativo.

Nosso objetivo inicial é criar uma requisição nesse arquivo. Depois, com o avanço do curso separaremos as responsabilidades.

No fim do NavigationView, existe um método chamado onAppear que é iniciado assim que a tela é carregada.

Então, na linha 26, escrevemos .onAppear. Abrimos chaves e dentro chamamos o método fetchData().

//Trecho omitido

        .onAppear {
            fetchData()
        }
                
//Trecho omitido

Em seguida, criamos esse método dentro de body, então na linha 32 escrevemos func fetchData(). Esse é um método para buscar dados no servidor.

Precisamos entender que obtemos informações de uma API por meio da URL. Então, no navegador, na página do Apiary que acessamos no vídeo anterior, copiamos a URL gerada.

Lembrando que cada URL será diferente, pois possu o nome da conta que está logada no site.

Depois, voltamos para nosso projeto. Para criar a URL, abaixo de fetchData(), declaramos a constante Url = URL(). Como parâmetro, passamos uma string adicionamos dois pontos e colamos a URL.

Como não estamos trabalhando com a view no momento, ocultamos apertando "Command + Option + Enter". Para visualizá-la, basta apertar o mesmo comando.

Não queremos trabalhar com variáveis opcionais, ou seja, só queremos dar continuidade do método se conseguir criar a URL. Então, antes de url, escrevemos guard let', que serve para extrair o valor opcional de uma variável.

Após os parênteses, escrevemos else adicionamos chaves e dentro passamos return. Assim, caso não consiga extrair o valor, nada do que definirmos abaixo será feito.

//Trecho omitido

        .onAppear {
            fetchData()
        }
    }
    
    // MARK: - Methods
    
    func fetchData() {
        guard let url = URL(string: "https://private-665e5-matheusperez.apiary-mock.com/questions") else {
            return
        }

//Trecho omitido

O próximo passo é utilizar uma classe que realizará a requisição. Na linha 38, usaremos a classe nativa do SwiftUI que é a URLSession.

Nessa classe, passamos .shared.dataTask(with: url). Em seguida, dentro de chaves, passamos data, _, error in code, são as possíveis informações que podem ser devolvidas.

Agora, vamos inserir as verificações. Na linha abaixo, escrevemos if let error = error.

Apertamos "Enter" e dentro de chaves passamos print (error.localizedDescription). Assim, se ocorrer um erro, extrairemos seu valor e o exibiremos na tela.

Já se não houve erro, seguimos com a implementação, tentando entregar o valor dos dados retornados.

Então, na linha seguinte, escrevemos else if let data = data. Apertamos "Enter" e passamos print(data).

//Trecho omitido

URLSession.shared.dataTask(with: url) { data, _, error in
        if let error = error {
                print(error.localizedDescription)
        }
        else if let data = data {
                print(data)
        }
    }
}

//Trecho omitido

Agora, vamos rodar o projeto para verificarmos se o que desenvolvemos até o momento está funcionando.

Vamos adicionar um breakpoint, ou seja, um ponto de parada que vai pausar a execução do programa em alguma etapa.

Também conhecido como debugar a aplicação, essa é uma forma de verificar o código passo à passo.

Para isso, clicamos em cima do número que indica a linha 39. Repare que a ferramenta mostra uma flecha vermelha apontando para a direita. Isso significa que quando o programa for executado, irá parar nesse trecho.

Em seguida, na barra de menu superior, clicamos no íconde de play para rodar o código.

Repare que a execução do programa não pausou onde definimos. Isso aconteceu, pois precisamos adicionar o método .resume() no fim da abaixo da URLSession.

É o método resume() que faz o envio da requisição app para a API e o servidor.

//Trecho omitido

URLSession.shared.dataTask(with: url) { data, _, error in
        if let error = error {
                print(error.localizedDescription)
        }
        else if let data = data {
                print(data)
        }
    }.resume()
}

//Trecho omitido

Feito isso, clicamos novamente no ícone de play. Ao acessarmos a home do aplicativo, o programa é pausado exatamente na linha 39.

Na lateral inferior esquerda, encontramos alguns botões de comando que podem ser aplicados no breackpoint. Selecionamos a opção para ir para a linha de baixo, indicada pelo ícone de uma seta se curvando para baixo.

Feito isso, notamos que não entra no if let, isso significa que a requisição funcionou. Clicando novamente no mesmo botão, é imprimido o valor, retornando:

496 bytes

Essa é a lista de questões, porém em um formato de bytes, não tão amigável. Isso significa que precisaremos convertê-lo em um formato mais legível.

Feito isso, podemos apagar o breakpoint. Para isso, clicamos novamente na linha 39 e arrastamos para a lateral direita.

É importante lembrar de tirar o breakpoint, caso não, o app sempre será pausado no mesmo trecho.

Feito isso, na lateral inferior esquerda, clicamos no segundo ícone de play para continuar a execução do programa.

No próximo vídeo continuaremos a implementação da requisição e aprenderemos como converter o valor de bytes para JSON.

Até lá!

Sobre o curso iOS com SwiftUI: fazendo requisições HTTP e conexão com API

O curso iOS com SwiftUI: fazendo requisições HTTP e conexão com API possui 136 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de iOS 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:

• Requisição HTTP com apiary
• Requisição com URLsession
• Métodos assíncronos
• Verbo POST
• Requisição com Alamofire