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, é 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

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.

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

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

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

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

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)

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/’

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.

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.

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.

2.3. Utilizando APIs sem Componentes

Queries também podem ser realizadas sem estarem vinculadas a um componente.

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.

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.

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.

É 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.

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.

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.

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.

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

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.