Explorando o AppSmith com uma REST API
Tags: tutorial, ledscommunity, appsmith
Published: 2024-02-05 11:33:29

##Introdução
Este artigo tem o objetivo de detalhar algumas partes da manipulação de componentes do AppSmith que fazem uso de uma REST API e de JS, proporcionando um melhor entendimento dessas funcionalidades. Embora a ferramenta AppSmith já esteja bem documentada no [site oficial](https://docs.appsmith.com/), é possível identificar algumas lacunas e pontos que não foram suficientemente detalhados. Assim, este documento surge como uma maneira de preencher essas lacunas.
Além disso, é pressuposto que uma API (pronta e funcional) será utilizada no projeto, sendo este o foco principal.

### 1. Criando Um Novo Projeto
Criar um novo projeto é relativamente simples, apenas clicando no botão

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

Um projeto pode ser importado também, caso você já possua alguma parte pronta de outro projeto AppSmith.

### 2. Utilizando APIs
#####2.1. Configurando DataSource
Antes de realizarmos as queries da API devemos configurar o DataSource nas opções do AppSmith.

![Configurando DataSource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asg2gxjpt93izy32j705.png)

Selecione para criar um novo DataSource e selecione RestAPI para utilizar uma API já criada.


![Configurando DataSource 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kskl1277i27e9cff8wvh.png)

A tela que aparecerá será uma de geração de query:


![Geração de query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxtulp5w2a2geyl07hyt.png)

Caso queira somente realizar uma query em uma API pública basta inserir o link no campo de url, mas caso queira salvar um DataSource que será utilizado constantemente durante o projeto siga os seguintes passos:

Selecione a opção de Authentication

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

E após selecione o botão central de ‘Save as DataSource’

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

Na tela de datasource preencha os dados necessários para a API. A URL inserida deve ser a URL base da API e não a da query que deseja ser feita (ex. uma query http://localhost:1337/api/pessoas tem como o endereço base da API  http://localhost:1337/).

Se a API necessitar de algum tipo de autenticação, essa mesma pode ser realizada pela última opção de Authentication. 

No caso do uso conjunto com o Strapi é necessário uma autenticação por ‘Bearer Token’, ao selecionar essa opção uma nova caixa de texto aparecerá para inserir o token de autenticação do Strapi (para adquirir esse token verifique a documentação do Strapi)

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

Após salvar o DataSource é possível realizar queries de forma mais simples, inserindo somente as rotas de navegação e mantendo a URL base, como no exemplo abaixo utilizando a rota ‘/api/pessoas/’

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

#####2.2. Utilizando APIs em Componentes
Ao se criar um componente como uma tabela é demonstrada a opção de conexão para obtenção de dados.

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

Ao clicar no botão tem-se novamente a opção de realizar uma query, mas desta vez será utilizado como base o DataSource já cadastrado anteriormente.

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

A tela de início não possuirá nada na URL, mas ao clicar no DataSource salvo na aba de Datasources o campo irá se auto preencher com a URL base e com isso basta complementar com a rota desejada.
A partir disto é possível testar a resposta da API clicando em ‘RUN’ e vendo o resultado da query.

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

#####2.3. Utilizando APIs sem Componentes
Queries também podem ser realizadas sem estarem vinculadas a um componente.

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

Selecionando a opção ‘Explorer’ no menu lateral e clicando no simbolo ‘+’ ao lado de ‘Queries/JS’ é possível criar uma query sem estar vinculada a um componente.

### 3. Utilizando componentes

#####3.1. Tabelas
Ao se criar uma tabela e um datasource for escolhido a tabela gerará uma coluna para cada tipo de dado fornecido.

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

Por meio das configurações presentes no menu lateral direito é possível definir o datasource e realizar configurações individuais para cada coluna, não só mudando a visibilidade das mesmas mas também a formatação dos dados presentes em cada.

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

Além das colunas geradas pelo datasource é possível também serem criadas colunas extras com nomes, símbolos e opções configuráveis, como as colunas de ‘Apagar’ e ‘Mais Detalhes’ presentes no exemplo.

#####3.2. Dropdowns
O menu dropdown ao ser adicionado já possui um dataset básico de exemplo. Sendo assim, deve-se altera-lo caso seja desejado utilizar dados do Datasource.

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

É importante sempre definir a ‘Label Key’ e a ‘Value Key’ de forma correta, sendo a ‘Label Key’ o campo que será utilizado para aparecer na listagem do dropdown e o ‘Value Key’ o valor do campo (ex. O objeto coordenador pode ter o nome ‘Bruno’ e o id ‘1’ e ao enviar a informação desse objeto esse id deve ser passado então ‘Bruno’ seria o ‘Label Key’ e o id seria o ‘Value Key’)

#####3.3. Date Pickers
O date picker não necessita de muitas alterações mas é importante verificar se o formato de data que é enviado é similar ao requisitado pela API.

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

O date format deve estar de acordo com o formato utilizado pela API (ex. Se a API requisitar a data em formato yyyy/mm/dd o date picker deve também ser configurado para este date format)

### 4. Redirecionando telas com informações
Ao selecionar um botão é possível atribuir ao mesmo um ação onClick.

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

Para que seja feito um botão de redirecionamento deve ser utilizada a opção ‘Navigate To’, ao seleciona-la é possível ser enviado um parâmetro pela query na aba de ‘Query params’. Utilizando variáveis já presentes no AppSmith é possível por exemplo no caso de uma tabela enviar o id da linha selecionada, nesse caso o id do 
objeto que foi selecionado.

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

Então em outra tela esse parâmetro enviado, nesse caso o id, pode ser utilizado para            realizar uma nova query como no exemplo acima utilizando a variável ‘appsmith.URL.queryParams.key’ para resgatar a key enviada.

### 5. Usando JS
O uso de javascript também é possível no AppSmith, sendo que a criação de um script ocorre na mesma aba de criação de queries.

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

Dessa forma, esses scripts podem ser atribuídos a diversos componentes, como no exemplo abaixo ao ser utilizado para calcular horas de trabalho.

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

## Conclusão
Em resumo, este documento procurou oferecer assistência na configuração do DataSource e na utilização dos componentes, como tabela, dropdown e date picker, disponibilizados pelo AppSmith. Foram fornecidos insights sobre a configuração e a aplicação adequada desses elementos, incluindo detalhes sobre a configuração de queries e o uso de JS para personalizar campos de componentes. Recomenda-se a exploração da documentação oficial e de outros documentos complementares para uma compreensão mais aprofundada e para atender às demandas específicas de projetos. A combinação do AppSmith com APIs representa uma ferramenta robusta para o desenvolvimento ágil e eficaz de aplicativos.