A OutSystems Platform é uma plataforma de desenvolvimento made in Portugal que te permite desenvolver aplicações web e mobile. As aplicações são programadas visualmente, e publicadas na cloud. Estes dois factores fazem com que consigas entregar as tuas aplicações aos utilizadores muito rapidamente.
Embora seja uma plataforma desenvolvida em Portugal, a OutSystems Platform está em grande crescimento a nível mundial e já é utilizada por algumas das maiores empresas como a Siemens, a Vodafone ou a Mercedes-Benz.
Neste tutorial vamos desenvolver uma aplicação web para memes que apresentará um meme de cada vez. Para obtermos os memes iremos utilizar o 9GAG através de uma API não oficial.
Antes de começarmos
Para podermos começar a desenvolver a nossa aplicação, precisamos de:
- Instalar o IDE da OutSystems Platform, chamado Service Studio. Este IDE é o que nos permite desenvolver e publicar a aplicação;
- Um ambiente na cloud para onde publicar a aplicação. A OutSystems oferece um ambiente na cloud, basta nos registarmos no site.
Se já tens o Service Studio instalado e um ambiente na cloud, podes saltar para a secção “Cria a aplicação”. Caso contrário vamos tratar rapidamente disso.
Obter o IDE e um ambiente na cloud
Primeiro, vamos criar uma conta no site da OutSystems. Para tal acedes a www.outsystems.com/get-started e inseres os dados que são pedidos no formulário. Depois disso carrega em Get Started. Irás receber um email para ativares a tua conta.
Ao carregares em Activate Your Account, irá abrir uma página no teu browser para preencheres com mais alguma informação sobre ti. Apenas o URL e a password para a tua conta são obrigatórios. Uma das informações que te irão ser pedidas será o URL que vais querer usar para as tuas aplicações. Para este tutorial vamos usar “portugal-a-programar”.
Agora que já temos um ambiente na cloud, só nos falta instalar o Service Studio, o IDE que nos permite desenvolver as aplicações. Neste momento o Service Studio só está disponível para Windows.
Para obter o instalador, na barra lateral, carrega em Start e depois em Download the Development Environment. Depois de fazeres download, instala o Service Studio.
Agora temos tudo pronto para começar.
Cria a aplicação
Abre o Service Studio. Cria uma nova aplicação e chama-lhe Memes.
Uma aplicação é constituída por módulos. Num módulo podemos definir o modelo de dados, implementar a lógica e desenhar a UI das nossas aplicações. Para simplificar, a nossa aplicação terá um único módulo. Cria o módulo e dá-lhe o mesmo nome da aplicação.
Desenha o ecrã
Agora que já temos a nossa aplicação criada, vamos tratar de desenhar o ecrã. O nosso ecrã terá a imagem do post do 9GAG e um botão para ir buscar um novo post.
Na tab Interface, seleciona o elemento 
HomePage e nas suas propriedades ativa a opção Anonymous para que não nos tenhas que preocupar com a autenticação quando acedes ao ecrã. De seguida faz duplo clique no elemento HomePage para abrir o ecrã. Vamos adicionar um Container à página. Um Container é um Div em HTML. Arrasta da barra lateral esquerda o elemento 
Container para dentro da página.
De modo a centrar o elemento Image que colocámos dentro do Container, seleciona o Container e na propriedade Align escolhe Center.
Agora vamos inserir a imagem no ecrã. Arrasta da barra lateral esquerda o elemento Image para dentro do container que criámos. Podes fechar a janela que te pede para selecionares a imagem a utilizar, visto que vamos carregar a imagem a partir de um URL.
Nas propriedades da imagem atribui à propriedade Width e Height o valor 500. Desta forma a imagem do post terá sempre o mesmo tamanho.
Falta-nos agora a opção para carregar um novo post. Arrasta da barra lateral esquerda o elemento 
Web Block e coloca-o por baixo do elemento da imagem. Os Web Blocks são elementos que podem ser reutilizados em vários ecrãs. Na janela que aparece logo depois de arrastares, procura por Icon e carrega OK.
Nas propriedades do Icon, atribui à propriedade Name o valor arrow_right (disponível nas sugestões que te são apresentadas) e para a propriedade Size o valor Size_4x, que permitirá aumentarmos o tamanho do Icon.
Vamos agora centrar o Icon, para tal seleciona o seu Container (carrega no Icon e de seguida no elemento Container que aparece na barra inferior do Service Studio 
) e à propriedade Align atribui o valor Center.
Integra com o 9GAG
Para podermos obter os posts do 9GAG vamos usar uma API REST não oficial que podes encontrar na Internet (Infinigag – http://k3min.github.io/infinigag/).
No Service Studio, vai à tab Logic, abre a pasta Integrations e na opção REST carrega com o botão direito do rato e escolhe Consume REST API…. Na janela que aparece de seguida, vamos preencher o pedido HTTP que vai ser feito à API para ir buscar os posts. Preenche os campos sob Method URL com:
- GET, o verbo HTTP que vamos enviar no pedido;
- http://infinigag.eu01.aws.af.cm/{section}/{id}, o URL do método da API.
Precisamos também de inserir um exemplo da resposta JSON retornada pela API, para que o Service Studio crie as estruturas necessárias para recebermos a resposta. Copia o JSON disponível em http://pastebin.com/F7CNpYMz e cola no campo Response.
Clica OK. O Service Studio cria um novo método REST de nome Get, com os parâmetros de input section e id que definimos no URL (dentro das chavetas), e com o parâmetro de saída Response.
Implementa a lógica
Agora precisamos de implementar a lógica para invocar o método da API que importámos, e usar o valor retornado para os elementos ecrã.
Para tal iremos usar uma 
Action. Uma action é como um método em Java ou .NET. Na tab Interface, vai a Screen Flows > Main Flow e faz clique com o botão direito no ecrã Homepage. Seleciona Add Preparation. A ação Preparation é uma ação específica de um ecrã e que corre sempre que o ecrã é carregado.
De seguida, vai à tab Logic e em Integrations > REST e arrasta para o fluxo da ação o método da API (de nome Get). Nos parâmetros de entrada do método coloca:
- section –
trending, para obtermos os posts mais falados no 9GAG; - id –
0, para os posts mais recentes.
Precisamos agora de uma variável para guardar o post que vamos querer apresentar. Da mesma forma que fizemos para adicionar a ação Preparation, sobre o ecrã HomePage, faz right-click e seleciona Add Local Variable.
Nas propriedades desta variável criada, dá-lhe o nome de SelectedPost e o Data Type com o tipo DatumItem.
No fluxo, arrasta um elemento 
Assign e coloca-o por baixo do método da API. Na janela de propriedades do Assign coloca:
- Variable –
SelectedPost, a variável local que criámos; - Value –
Response.Data[ TextToInteger(GeneratePassword(1, false)) ], para aleatoriamente obtermos um dos posts da resposta do método da API.
Agora que temos uma ação que retorna um post aleatório, só nos falta associar o dados do post selecionado ao ecrã, mais concretamente associar a imagem do post ao elemento Image.
De volta ao nosso ecrã HomePage, clica no elemento Image. Define a propriedade Type como External e a propriedade URL com o valor SelectedPost.Images.Large.
Neste momento, quando abrires a página já poderás ver a imagem do post. Mas antes de irmos experimentar, vamos apenas fazer com que carregar um novo post seja possível ao clicar no Icon que inserimos para o efeito.
Para tal, acede ao Container que tem o Icon (clica no Icon e na barra inferior do Service Studio seleciona o elemento Container 
) e na propriedade Destination, escolhe a opção (New Screen Action). Esta opção irá criar uma nova ação chamada OnClick, tal como a outra que criámos anteriormente, mas com o objetivo de ser executada ao carregarmos no Container onde está o Icon.
Vamos agora fazer com esta ação ao ser executada carregue um novo post. No nosso caso bastar-nos-á que esta ação recarregue a página. Para tal, faz double-click sobre a ação OnClick (na árvore de elementos por cima das propriedades) e no seu fluxo adiciona o elemento da barra lateral esquerda 
Destination sobre o último elemento do fluxo.
Na janela que aparecerá de seguida, procura por HomePage, o nosso ecrã e faz OK. Desta forma iremos dizer que a última ação do fluxo será abrir um novo ecrã, que no nosso caso é o mesmo.
Feito isto, podemos publicar para ver o resultado no nosso tutorial. Para publicar, carrega no botão 
na parte superior do Service Studio. Quando a tua aplicação estiver publicada, o ícone muda para azul 
. Clica nesse ícone para acederes à aplicação que foi publicada.
Podes ver na aplicação web que é aberta no teu browser, a imagem do post e a opção para carregar um novo post.
Conclusão
Existem muitas outras funcionalidades que podes explorar e aplicações que podes desenvolver em OutSystems. Espero que com este tutorial tenhas percebido como é fácil desenvolver com a OutSystems Platform.
Segue o tutorial e alguma dúvida ou informação adicional não hesites em contactar-me. Podes obter o código e experimentar o resultado final deste tutorial (com a funcionalidade de poder fazer like/dislike num meme) em http://www.outsystems.com/forge/component/1025/Memes/.
Referências
- Site oficial da Outsystems: www.outsystems.com
- Documentação oficial do IDE da plataforma: www.outsystems.com/help/servicestudio/9.0
- API do 9Gag (não oficial): http://k3min.github.io/infinigag/
- Site do 9gag: www.9gag.com