Vamos falar de Dart no Backend?
Tags: dart, backend, shelf
Published: 2024-04-20 04:07:14

O DART é uma linguagem de programação criada e mantida pela Google em meados de 2011 com o objetivo inicial de ser uma linguagem voltada para WEB com o intuito de substituir o Javascript, como sabemos, a Google falhou miseravelmente nesta missão, pois até recentemente (2017/2018) nem ouvíamos falar de DART, que só ficou conhecido com o desenvolvimento multiplataformas, principalmente mobile, com a vinda do Flutter.

É sabido que além de toda possibilidade e de desenvolvimento multiplataforma (Web, mobile e desktop), também conseguimos desenvolver nosso backend utilizando DART? Isso mesmo, vamos falar do Shelf!

O Shelf é um pacote criado e mantido pelo pessoal da equipe do Dart que facilita a criação e composição dos web servers, de maneira simples conseguimos criar nossas APIs Rest utilizando o protocolo HTTP.

Confira a documentação na página oficial do pub.dev: [https://pub.dev/packages/shelf](https://pub.dev/packages/shelf)

Para iniciar nossa jornada com o Dart no backend, precisaremos primeiro criar um projeto dart, para isto necessitamos apenas digitar no nosso terminal digitar o comendo

> dart create nome_do_projeto

![](https://cdn-images-1.medium.com/max/800/1*D9hm3yLgz2ocbEp52IRgTQ.png)

No nosso pubspec precisaremos adicionar dois pacotes no nosso projeto: o shelf para levantar o servidor e o shelf_route para configuração das rotas dos nossos endpoints

![](https://cdn-images-1.medium.com/max/800/1*b7KDlhxTeKOdQmpw4Mp4GA.png)

Para rodar o servidor inicial basta adicionar o código a seguir

```dart
     void main() async {
	     var server = await shelf_io.serve(
	      (Request request) => Response(200), ‘localhost’, 8080);
	     print(‘Serving at [http://${_server_._address_._host_}:${_server_._port_}');](http://$%7Bserver.address.host%7D:$%7Bserver.port%7D%27%29;)
     }
```

O .server() é o comando de inicialização do nosso webserver, ele contém 3 parâmetros, o primeiro seria o handler que é uma função que será executado a cada requisição no servidor e deve retornar um Response com o código HTTP, o segundo é o endereço que o webserver será executado e o terceiro é a porta que ele irá ser executado

![](https://cdn-images-1.medium.com/max/800/1*yVgdOIQLAnD_8TlqVcI1Mg.png)

Para rodar basta executar o dart run

![](https://cdn-images-1.medium.com/max/800/1*VpBsIOy4Et8WKGvjPSLhJQ.png)

Para conseguirmos **debuggar** com o **F5** no **VS Code** precisamos configurar nosso **launch.json** adicionando a propriedade “**program**” apontando para o arquivo dart contendo nossa **main()**

![](https://cdn-images-1.medium.com/max/800/1*0E1KRqWdVlSTCSuBY_rpMQ.png)

Com isso em um **Client HTTP** como o **Postman** podemos testar nosso serviço, podemos notar que qualquer requisição que fizermos retornará o código 200 como programamos.

![](https://cdn-images-1.medium.com/max/800/1*7hiD_9fmbg41UIgnWUBWMA.png)

Os códigos HTTP podem ser qualquer um existente

![](https://cdn-images-1.medium.com/max/800/0*fI_GswDNmP2SFP6e.png)

Podemos também encapsular o **handle** em uma função e no Response também é possível retornar um corpo

![](https://cdn-images-1.medium.com/max/800/1*g-xvOECBWaXP-jxxz7UmsA.png)

O resultado será o seguinte

![](https://cdn-images-1.medium.com/max/800/1*-2gYK8k5Vq7U-g-Lx63STg.png)

Conseguimos até retornar um HTML caso seja nosso desejo, basta no **body** do Response passar o HTML de retorno e no header passar o **{‘Content-Type’: ‘text/html’}**

![](https://cdn-images-1.medium.com/max/800/1*9VQNstICtGZqr2QDHMrjJA.png)

Se abrirmos em um browser teremos o resultado

![](https://cdn-images-1.medium.com/max/800/1*Zk11cawnKYQGBTd4Z8cmyQ.png)

No nosso Handler temos a propriedade request que lá temos toda a informação da nossa requisição, conseguimos através dela verificar qual foi o endpoint solicitado e retornar conforme a solicitação, também possuímos alguns métodos que irão facilitar retornar o código HTTP desejado como o **ok()** ou o **notFound()**, confira os métodos em [https://pub.dev/documentation/shelf/latest/shelf/Response-class.html](https://pub.dev/documentation/shelf/latest/shelf/Response-class.html)

![](https://cdn-images-1.medium.com/max/800/1*0z1gT0AabvxGWKsY09O_vQ.png)

![](https://cdn-images-1.medium.com/max/800/1*j-ZRMdElsBw8PFBYLOAoYg.png)

![](https://cdn-images-1.medium.com/max/800/1*yA_8slz-aAmCzdoZWpT1Hw.gif)

Ao invés de ficarmos fazendo um monte de if’s para verificar qual o endpoint solicitado existe uma forma muito mais simples de configurarmos essa rotas utilizando o **shelf_router**, já adicionamos ele no nosso projeto no início desse artigo.

Para isso basta criar uma instância do **Router()**, configurar as rotas com os verbos HTTP e adicioná-lo no server.

![](https://cdn-images-1.medium.com/max/800/1*KTqjObjxpMRY1OQPe0t0QQ.png)

O resultado será o seguinte

![](https://cdn-images-1.medium.com/max/800/1*zKhWYiscOLIlZzScNCVnGw.gif)

Podemos também adicionar middlewares que são intermediadores da nossa API que irão gerenciar as entradas e saídas. No exemplo do próprio **Shelf** temos o **logRequests** que irá gerar um log de toda requisição da API.

Para utilizar basta criar uma Pipeline e utilizar o **addMidleware** para adicionar na aplicação

![](https://cdn-images-1.medium.com/max/800/1*25GNW_RUAYqlBDh8Q3_r7A.png)

Com isso a cada requisição irá gerar um log no console

![](https://cdn-images-1.medium.com/max/800/1*4mIQzzIxnhWmlJDpj717sA.png)

também podemos criar nossos próprios middlewares, neste exemplo estou transformando todas as respostas em um **content-type: application/json**

![](https://cdn-images-1.medium.com/max/800/1*ui-oT6gi4Ift8rhQPZceig.png)

No canal oficial do Flutter tem se falado muito sobre o Dart no backend
<a href="https://www.youtube.com/watch?v=AaQzV1LTmo0" target="_blank">
 <img src="https://img.youtube.com/vi/AaQzV1LTmo0/0.jpg" alt="Monorepo (Por Que Essa Estratégia Funciona em Grandes Empresas?) " width="240" height="180" border="10" />
</a>

E se você pretende entrar de cabeça nesse mundo do backend, preparamos um roadmap sobre o que estudar para tornar-se um desenvolvedor backend completo
https://github.com/Flutterando/dart_backend 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil