Cria o teu cliente de 9GAG em 15 minutos, com OutSystems

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.

Criação 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 9gagoutsystems2 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 9gagoutsystems3 Container para dentro da página.

Desenhar o ecrã

De modo a centrar o elemento Image que colocámos dentro do Container, seleciona o Container e na propriedade Align escolhe Center.

Opções do container

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 9gagoutsystems6 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 ícones) 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:

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.

Exemplo de JSON de resposta

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 9gagoutsystems10 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.

Adicionar variável local

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 9gagoutsystems12 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 9gagoutsystems14) 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 9gagoutsystems16 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 9gagoutsystems18 na parte superior do Service Studio. Quando a tua aplicação estiver publicada, o ícone muda para azul 9gagoutsystems19.  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

  1. Site oficial da Outsystems: www.outsystems.com
  2. Documentação oficial do IDE da plataforma: www.outsystems.com/help/servicestudio/9.0
  3. API do 9Gag (não oficial): http://k3min.github.io/infinigag/
  4. Site do 9gag: www.9gag.com

Publicado na edição 50 (PDF) da Revista PROGRAMAR.