Relevância de plataformas low-code — Análise da plataforma OutSystems

Diana Siso
MCTW_TDW
Published in
9 min readFeb 7, 2023

O conceito de desenvolver uma aplicação, seja ela mobile ou web, já não está mais fortemente associado a um processo complexo e longo que envolve a escrita manual de numerosas linhas de código. Atualmente, deparamo-nos com métodos que visam simplificar e automatizar a etapa de escrita de código, exigindo do indivíduo a mínima elaboração de código possível, como por exemplo a utilização de programas low-code, programas que exigem a pouca escrita de código de desenvolvimento.

Antes de continuar, devemos salientar a diferença existente entre low-code e no-code; no primeiro cenário referimo-nos a programas que exigem pouco código e que são utilizados para a construção de aplicações complexas, havendo um maior controle do desenvolvimento da mesma, enquanto que o segundo remete a plataformas que não requerem qualquer escrita de código, ficando a sua utilização centrada apenas em sistemas básicos como o drag and drop, sendo utilizadas para a elaboração de aplicações mais básicas [2]. Nos programas low-code atuais é possível verificar que é dada ao utilizador a opção de utilizar esse sistema básico e simplificado, utilizar o método tradicional de escrita manual de código ou combinar ambos, como é o caso, por exemplo, da plataforma low-code OutSystems [3].

Figura 01. Logótipo da empresa OutSystems.

O funcionamento de alguns dos programas low-code é explicado através da sua interface gráfica que suporta um sistema de drag and drop, onde o sujeito arrasta o elemento desejado para onde o quer, havendo uma forte presença da componente visual durante todo o processo. Desta forma, há uma aceleração de todo o processo de construção de uma aplicação e uma flexibilidade técnica, seja porque indivíduos com experiência na área têm o processo facilitado e o tempo destinado a ele é reduzido, seja porque plataformas low-code permitem uma inclusão de pessoas com não tanta experiência na área, possibilitando que estas consigam participar na construção da aplicação.

Essa componente visual torna o processo mais intuitivo através do feedback constante e permite um desenvolvimento mais rápido de aplicações, podendo direcionar o tempo poupado para outras áreas relevantes e reduzir os custos da implementação. Foi concluído pela Forrester, uma empresa com grande relevância na área de pesquisa de mercado, que o desenvolvimento de uma aplicação projetada em low-code consegue ser até dez (10) vezes mais rápido quando comparado com o desenvolvimento tradicional [1]. Plataformas low-code são ainda fortemente compatíveis com as metodologias de desenvolvimento ágil, onde são solicitadas com frequência alterações do produto, pois permitem rápidas implementações de mudanças.

Todavia, embora a abstração de código possa parecer algo favorável, também apresenta a desvantagem de dificultar a identificação do local onde ocorreu algum erro na aplicação. Além disso, sendo uma tecnologia ainda em desenvolvimento, obviamente apresenta limitações quanto aos recursos e ferramentas disponibilizados para utilização.

Centrada no objetivo de fornecer uma alta performance com pouca escrita manual de código e alto nível de CI/CD, a Outsystems é uma plataform as a service (PaaS) low-code que possui como público-alvo médias e grandes empresas focadas nas áreas de saúde, educação, seguros, governo e bancária, como por exemplo o Santander. Desta forma, a Outsystems oferece uma construção de aplicações mais automatizada nas diferentes camadas de desenvolvimento: frontend, backend e integração.

Um dos pontos fortes da OutSystems é a conexão com sistemas externos, como por exemplo bases de dados MongoDB e PostgreSQL [4]. Outro benefício está relacionado com a Inteligência Artificial (IA) que a plataforma utiliza que, caso o utilizador assim o deseje, completa automaticamente lógicas e workflows e analisa a qualidade do projeto durante todo o seu ciclo de vida, fazendo uso da ferramenta TrueChange para verificação de erros e bugs e análise do impacto de mudanças a realizar.

Além disso, existem mais de setenta (70) templates disponíveis para os utilizadores que, por algum motivo, não pretendem construir do zero uma aplicação responsive. Esses templates permitem que uma aplicação web ou mobile seja desenvolvida em menos de dez (10) minutos. Em adição, a OutSystems também oferece módulos previamente desenvolvidos e extensões prontos a serem integrados no projeto, como por exemplo mapas GPS [5].

Figura 02. Templates fornecidos pela OutSystems divididos em categorias de acordo com o público-alvo da aplicação a ser desenvolvida.

Por último, a OutSystems tem ainda a vantagem de ser possível realizar o deployment da aplicação projetada num único clique, não sendo necessária a existência de um DevOps na equipa de desenvolvimento, pois a própria plataforma assegura a análise de dependências, a infraestrutura e a monitorização da aplicação através de pipelines para CI/CD [6].

Mencionadas as vantagens, verifiquemos como é que esses benefícios se apresentam quando colocados num exemplo prático que pode ser encontrado no próprio site da OutSystems na secção Training — Build an Application, onde a empresa fornece diferentes tutoriais para que o indivíduo aprenda o básico para conseguir trabalhar com a plataforma. Foi escolhido portanto o primeiro tutorial: Employee Directory, onde o objetivo passa por construir rapidamente um diretório para uma organização. [7]

O primeiro passo para trabalhar com a plataforma é o download e a instalação do IDE próprio da OutSystems. Neste caso já temos um ficheiro .oap previamente configurado no que diz respeito aos dispositivos alvo, nome, descrição, cor, logotipo e módulo principal da aplicação. Todavia, se começássemos o projeto do zero, essa configuração seria feita de forma bastante simplificada, sem ser necessário alterar linhas de código para adicionar a imagem logótipo, por exemplo.

Figura 03. Configuração dos aspetos mencionados.

Ao abrir o projeto no módulo principal, um módulo representando uma página página, que já vem previamente no ficheiro .oap, EmployeeDirectory, deparamo-nos com a interface gráfica da plataforma vazia.

Figura 04. Interface gráfica do IDE da OutSystems.

Uma das vantagens mencionadas foi a automatização na camada de integração e neste exemplo prático é possível verificar isso na medida que a plataforma permite a importação de dados para a sua base de dados a partir de, por exemplo, folhas de Excel.

Figura 05. Importação da informação através de ficheiros Excel.

O aspeto mais benéfico deste sistema é o utilizador não precisar de conhecimentos técnicos profundos sobre o funcionamento de bases de dados ou como é que os seus elementos se relacionam. A importação dos ficheiros Excel cria automaticamente tabelas de Entidades com os respetivos atributos e ids, ficando apenas a cargo do utilizador estabelecer a ligação entre as entidades através de linhas. As tabelas da base de dados são apresentadas ao utilizador de forma pouco complexa, sendo a sua interpretação uma tarefa simples.

Figura 06. Visualização da tabela Department da base de dados.

No exemplo analisado, queremos que um funcionário pertença a um (1) departamento, porém um departamento pode ter mais do que um funcionário, pelo que a linha de ligação deve possuir a terminação ramificada do lado do funcionário. Ao seguir esta lógica, é fácil de construir relações one-to-one, one-to-many, many-to-many.

Figura 07. Relação entre as entidades.

Terminada a criação das relações entre as entidades, o utilizador pode preencher manualmente os campos dos novos atributos através de caixas de seleção, sem escrita de código.

Figura 08. Associação de valores aos novos atributos da entidade Employee.

Concluída esta etapa e averiguada a automatização da camada de backend e integração do projeto, analisaremos agora como essa automatização se verifica na camada de frontend. A OutSystems torna o desenvolvimento dessa camada da aplicação mais acessível, também sem a necessidade de escrita de qualquer linha de código, porém com oferta dessa opção caso o utilizador assim o deseje.

Na secção Interface do menu lateral direito, temos componentes comuns, como ecrãs, blocos e ações, que constituem os layouts da aplicação, e os flows da aplicação, ou seja, os redirecionamentos entre módulos. No momento de criação de um novo ecrã, o utilizador pode optar por um template ou por um ficheiro vazio.

Figura 09. Opções fornecidas no momento de criação de um novo ecrã.

A automatização estende-se durante todo o processo de construção da componente visual da aplicação. Ao selecionar qualquer uma das opções apresentadas anteriormente, o utilizador depara-se com o sistema de drag and drop, podendo construir a nova página apenas arrastando os elementos do menu lateral esquerdo para a posição desejada. Os elementos apresentados vão desde simples containers, cujo código seria algo como:

<Container> ... </Container>

até elementos mais complexos, como gráficos, paginação e outras estruturas mais elaboradas a nível de código.

// exemplo de paginação https://www.freecodecamp.org/news/build-a-custom-pagination-component-in-react/

const Pagination = props => {
const {
onPageChange,
totalCount,
siblingCount = 1,
currentPage,
pageSize,
className
} = props;

const paginationRange = usePagination({
currentPage,
totalCount,
siblingCount,
pageSize
});

// If there are less than 2 times in pagination range we shall not render the component
if (currentPage === 0 || paginationRange.length < 2) {
return null;
}

const onNext = () => {
onPageChange(currentPage + 1);
};

const onPrevious = () => {
onPageChange(currentPage - 1);
};

let lastPage = paginationRange[paginationRange.length - 1];
return (
<ul
className={classnames('pagination-container', { [className]: className })}
>
{/* Left navigation arrow */}
<li
className={classnames('pagination-item', {
disabled: currentPage === 1
})}
onClick={onPrevious}
>
<div className="arrow left" />
</li>
{paginationRange.map(pageNumber => {

// If the pageItem is a DOT, render the DOTS unicode character
if (pageNumber === DOTS) {
return <li className="pagination-item dots">&#8230;</li>;
}

// Render our Page Pills
return (
<li
className={classnames('pagination-item', {
selected: pageNumber === currentPage
})}
onClick={() => onPageChange(pageNumber)}
>
{pageNumber}
</li>
);
})}
{/* Right Navigation arrow */}
<li
className={classnames('pagination-item', {
disabled: currentPage === lastPage
})}
onClick={onNext}
>
<div className="arrow right" />
</li>
</ul>
);
};

export default Pagination;
Figura 10. Construção de ecrã através do sistema drag and drop.

Podemos concluir que as plataformas low-code são uma tecnologia bastante poderosa nos dias atuais. No entanto, conseguem atingir o seu potencial máximo quando são utilizadas, não para substituir os métodos tradicionais, mas sim combinadas com eles. Desta forma, garantimos um processo mais intuitivo com um aumento de produtividade, da velocidade e da flexibilidade, ao mesmo tempo que asseguramos a qualidade do produto desenvolvido através do código manual e uma redução de custos de implementação. Por fim, trabalhar com um método WYSIWYG (what you see is what you get) que abstrai o código implementado ao substituí-lo visualmente por componentes gráficas, é uma mais valia para que indivíduos sem experiência na área possam integrar e auxiliar equipas de desenvolvimento de aplicações.

[1] Why You Need To Know About Low-Code, Even If You’re Not Responsible For Software Delivery. (2018, August 8). Retrieved from Forrester website:
https://www.forrester.com/blogs/why-you-need-to-know-about-low-code-even-if-youre-not-responsible-for-software-delivery/

[2] Low Code Vs No Code: What’s the difference between Low-Code No-Code. (n.d.). Retrieved from 20215080.hs-sites.com website: https://kissflow.com/low-code/low-code-vs-no-code/

‌[3] Low-Code Development Platform | OutSystems. (n.d.). Retrieved from www.outsystems.com website: https://www.outsystems.com

[4] Integrate Everything | OutSystems Low-Code Platform. (n.d.). Retrieved February 6, 2023, from www.outsystems.com website: https://www.outsystems.com/low-code-platform/integration/

[5] Do More App Dev in Less Time | OutSystems Low-Code. (n.d.). Retrieved February 6, 2023, from www.outsystems.com website: https://www.outsystems.com/low-code-platform/accelerated-development/

[6] From Dev to Deploy in Minutes with Low-Code | OutSystems Platform. (n.d.). Retrieved February 6, 2023, from www.outsystems.com website: https://www.outsystems.com/low-code-platform/development-deployment/

[7] Course — Training | OutSystems. (n.d.). Retrieved February 7, 2023, from www.outsystems.com website: https://www.outsystems.com/training/courses/198/employee-directory-application/

--

--

Diana Siso
MCTW_TDW
Writer for

A recent graduated in Informatics Engineering with a special interest in mobile application development and frontend development.