⭕️ Usando o ChatGPT para organizar e criar components em Outsystems.

Ultimamente tenho estudado bastante como adiantar / automatizar meu trabalho, para poder ter tempo de estudar mais e testar coisas novas. Visando aplicar o conhecimento high code no cenário low code, diminuindo a barreira de preconceito que alguns pessoas ainda enxergam com esse tecnologia.

# Prompt Time

Antes de mais nada se você ainda não tem uma conta na OPEN API sugiro que o faça agora mesmo que nunca use na vida o que acho muito difícil. Para esse artigo separei dois meio de usar o ChatGPT, o primeiro é para criação e o segundo para organização.

## Testando soluções JS para Outsystems com ChatGPT

Recentemente precisei usar o localStorage do browser para passar alguns parâmetros sem a necessidade de usar input parameter via screen ou inserindo no banco para poder retorna-lo com chave de pesquisa.

É claro que procurei na forge primeiro, mas não me agradou o fato de usar mais um dependência que não é atualizada desde de 2000 e bolinha e que tenho que fazer deploy entre os ambientes até a produção onde só iria usar apenas duas funções.

Ai que entra nosso amigo ChatGPT e o Prompt do PODER. Aqui é pergunte e seja atendido eis aqui meu primeiro comando :

Alguns segundos depois . . .

// Função para salvar um arquivo PDF em base64 no localStorage
function salvarPDFNoLocalStorage(chave, arquivoBase64) {
  localStorage.setItem(chave, arquivoBase64);
}

// Função para obter um arquivo PDF em base64 do localStorage
function obterPDFDoLocalStorage(chave) {
  return localStorage.getItem(chave);
}

// Exemplo de uso

// PDF em base64
const exemploPDFBase64 = 'JVBERi0xLjQKJeLjz9MKMSAw...'; // Coloque aqui o conteúdo do seu arquivo PDF em base64

// Salvando o PDF no localStorage com a chave 'meuPDF'
salvarPDFNoLocalStorage('meuPDF', exemploPDFBase64);

// Obtendo o PDF do localStorage usando a chave 'meuPDF'
const pdfRecuperado = obterPDFDoLocalStorage('meuPDF');

// Verificando se o PDF foi recuperado com sucesso
if (pdfRecuperado) {
  console.log('PDF recuperado com sucesso do localStorage:', pdfRecuperado);
} else {
  console.log('Não foi possível recuperar o PDF do localStorage.');
}

Então aqui obtive um exemplo simples de como implementar aquilo que queria, agora só faltava validar e fazer alguns ajuste.

Para isso recomendo usar o snippets do seu browser que pode ser acessado na aba sources quando habilitar a opção de Inspect com botão direito. A maioria dos browser possui essa função, utilizo bastante para testar e evitar ficar publicando na plataforma desnecessariamente.

Outra recomendação é, após validar o código, incrementa-lo não é um má ideia. Para isso faça utilize o prompt novamente é adicione melhorias no código :

## Organizando soluções JS para Outsystems com ChatGPT

Recentemente a Outsystems modificou o OutsystemsUI para o padrão de APIs, minimizando a complexibilidade do JS dentro da plataforma. Facilitando a manutenção e o uso dos componentes.

E é aqui que entra o X da questão, aplicando padrões de módulos do JS podemos obter o mesmo resultado. No meu exemplo usei o padrão UMD (Universal Module Definition ). Caso queira pesquisar mais sobre o assunto acesse o link : What the heck are CJS, AMD, UMD, and ESM inJavascript?

Sem mais delongas, digite o comando abaixo no prompt do ChatGPT

O retorno da AI será o código abaixo que foi convertido em classe aplicando o padrão de projeto UMD para que possa ser usado como API.

Claro que existe uma analise mais profunda de conceitos que não irei abordar nesse artigo, mas se faz necessário entender e saber caso deseje ir além, então sugiro que o leitor, leia sobre patterns de modulo do JS e sua evolução assim como padrões de projeto tais como factory, que é utilizado no código abaixo.

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // Suporte a AMD
    define([], factory);
  } else if (typeof exports === 'object') {
    // Suporte a CommonJS
    module.exports = factory();
  } else {
    // Navegador global
    root.PDFLocalStorage = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  return (function () {
    // Classe PDFLocalStorage
    function PDFLocalStorage() {}

    // Método para salvar um arquivo PDF em base64 no localStorage
    PDFLocalStorage.prototype.salvarPDFNoLocalStorage = function (chave, arquivoBase64) {
      localStorage.setItem(chave, arquivoBase64);
    };

    // Método para obter um arquivo PDF em base64 do localStorage
    PDFLocalStorage.prototype.obterPDFDoLocalStorage = function (chave) {
      return localStorage.getItem(chave);
    };

    return new PDFLocalStorage();
  })();
}));

Com o código em mãos, basta adiciona-lo como script dentro da plataforma.

Mas onde está a parte de organização ? Calma jovem gafanhoto, aqui onde entra o pulo do gato.

Agora você consegue criar actions onde você pode chamar a classe a qual importou via Script, chamando apenas os métodos e os seus parâmetros, ao invés do código do JS. O que deixa mais flexível a forma que ira usar dentro da plataforma.

A parti daqui o céu é o limite, você pode criar um framework de códigos Utils e coisas afins, além minificar seu código para reduzir o tamanho e assim por diante.

# Conclusão

Com certeza o ChatGPT é uma ferramenta poderosa para nos ajudar na nossa jornada como criadores digitais de soluções.

Porém ainda existe muito a ser explorado nessas águas desconhecidas, contudo o leme do navio ainda é SEU, o que significa que é você que aponta o rumo, pois ele não te livra desse trabalho, no entanto é mais uma forma de deixar ainda mais rápido o processo de desenvolvimento.

Eiiiii me ajuda ai vai !? deixa uma palminhaaaa 👋🏻 e clica em seguir para mais conteúdos legais.