Criando uma Aplicação Mobile com OutSystems

Criando uma Aplicação Mobile com OutSystems

Os aplicativos móveis podem ser personalizados, permitindo que você defina configurações específicas globais ou de plataforma móvel, atenda aos requisitos de negócios ou melhore a experiência de seus usuários para todos os tamanhos de tela diferentes.

Diferenças entre Web Reactive e Mobile

O aplicativo mobile funciona através de um software instalado no smartphone que roda sem interrupções no sistema operacional, desenvolvido exclusivamente para dispositivos portáteis. No caso do aplicativo web, ao invés do smartphone, ele pode ser baixado no notebook, computador e até smart tv.

Vantagens:

A app web é uma página na internet que pode ser acessada como qualquer outro site em um navegador. Assim, ele tem como vantagem o custo reduzido, acesso liberado em qualquer browser e o funcionamento em todas as plataformas e páginas da web.

No caso da app mobile, todo acesso fica armazenado no dispositivo do smartphone, e pode ser baixado pelo app Store ou Google Play.

Debug em Mobile

Existe 2 formas de fazer debug:

Usamos o nosso browser e ao escolher essa opção vai ser aberto um simulador de um celular e com isso podemos interagir com a nossa app.
Ligarmos por cabo nosso celular ao computador e a OutSystems “instala” uma versão da nossa app para testarmos e fazer nosso debug.

Setup de uma App

Antes de gerar seu aplicativo móvel pela primeira vez, você deve definir configurações específicas de iOS e/ou Android. 

É possível colocarmos nossa app nas respectivas stores (apple e Google), porém para tal é necessário licenças e chaves para criar os ficheiros:

IOS: ficheiro .ipa
Android: ficheiro .apk

Após a criação, será feito o download dos mesmos. Esse setup pode ser feito tanto no Service Center como no Service Studio.

Configurar e gerar um pacote de aplicativo móvel no Service Studio

Para configurar ou gerar seu pacote de aplicativo móvel (iOS ou Android) no Service Studio, faça o seguinte:

Navegue até a tela de detalhes do aplicativo do seu aplicativo móvel.
Selecione a guia Distribuir. As configurações móveis nativas estão na seção Plataformas nativas.
Ao configurar seu aplicativo móvel pela primeira vez para uma determinada plataforma (iOS ou Android), clique no botão Gerar aplicativo Android ou Gerar aplicativo iOS, de acordo com a plataforma. Siga as etapas de configuração para o cenário desejado: distribuir para testes de desenvolvimento, distribuir seu aplicativo para um grupo limitado de usuários finais ou publicar seu aplicativo em Mobile App Stores . Se você já definiu as configurações de iOS ou Android do seu aplicativo móvel, clique no ícone de engrenagem da plataforma correta para alterar sua configuração.
Depois de definir ou alterar as configurações de iOS ou Android do aplicativo móvel, clique em Gerar aplicativo Android ou Gerar aplicativo iOS.

Configurar e gerar um pacote de aplicativo móvel no Service Center

Para configurar ou gerar seu pacote de aplicativo móvel (iOS ou Android) no Service Center, faça o seguinte:

Abra o console Service Center do ambiente ( https://<environmentdomain>/ServiceCenter) e navegue até Factory .
Clique na guia Aplicativos, abra seu aplicativo móvel na lista de aplicativos e selecione a guia Distribuir. As configurações móveis nativas estão na seção Plataformas nativas.

Para configurar seu pacote de aplicativo móvel pela primeira vez ou para alterar a configuração atual para uma determinada plataforma (iOS ou Android), clique no link Configurar para a entrada iOS ou Android. Siga as etapas de configuração para o cenário desejado, descritas nos tópicos listados no final desta página .
Depois de definir ou alterar as configurações de iOS ou Android do aplicativo móvel, clique em Salvar.
No final da página de definições de configuração, selecione a versão MABS que deseja usar para gerar o pacote de aplicativo móvel para a plataforma móvel que está configurando (iOS ou Android) no ambiente atual.
Clique em Guardar e Gerar e aguarde alguns momentos enquanto a OutSystems gera o seu pacote de aplicações móveis.

Agora que você configurou o aplicativo, da próxima vez que precisar gerar um novo pacote de aplicativo móvel, basta clicar no botão Gerar.

Personalizando o nome de domínio do aplicativo móvel

Em alguns casos, pode ser necessário alterar o nome de domínio associado ao seu aplicativo móvel, como quando você tem políticas de segurança internas ditando que diferentes aplicativos móveis devem ter diferentes nomes de domínio associados e certificados SSL.

Você pode personalizar o nome de domínio para cada aplicativo móvel no Service Center. Por padrão, OutSystems usa o hostname definido para o ambiente em Administração > Configuração do Ambiente.

Para definir um nome de domínio diferente para seu aplicativo móvel, faça o seguinte:

Na guia Distribuir, na seção Plataformas nativas , clique no link Alterar na coluna Nome do domínio .

Insira o novo nome de domínio para o aplicativo móvel e clique em Aplicar.
Gere novamente o aplicativo móvel para que as alterações entrem em vigor.

Personalizando o código da versão do aplicativo móvel

O código da versão do aplicativo móvel é um número interno associado à geração do pacote do aplicativo móvel. As lojas de aplicativos usam esse número para determinar se uma versão é mais recente que outra. Veja informações mais detalhadas na documentação do Android e iOS .

Por padrão, OutSystems incrementa o código da versão em um toda vez que gera o pacote de aplicativo móvel.

Em alguns casos, pode ser necessário alterar o código de versão do aplicativo móvel padrão. Por exemplo, se estiver a migrar uma aplicação móvel existente de outro fornecedor de tecnologia para a OutSystems, o código da versão atual da sua aplicação na loja de aplicações é superior ao código da primeira versão da aplicação OutSystems. Neste caso, pode definir o código da versão da sua app móvel OutSystems para um valor diferente.

Para definir um código de versão diferente para seu aplicativo móvel, faça o seguinte:

Na guia Distribuir, na seção Plataformas nativas, clique no link Alterar na coluna Código da entrada iOS ou Android.

Insira o novo código para o aplicativo móvel e clique em Aplicar.

Na próxima vez que você gerar um novo pacote de aplicativo, o código da versão será incrementado em um.

Distribua seu aplicativo como PWA

Um aplicativo da Web progressivo (PWA) fornece uma experiência nativa sem a necessidade de distribuir um aplicativo móvel nativo. PWA é uma tecnologia emergente que combina tecnologias da web existentes com recursos modernos de navegador.

Os principais benefícios dos PWAs:

Mais eficientes de gerenciar, pois não exigem lojas de aplicativos como aplicativos móveis nativos.
Com base na tecnologia do navegador da web que não depende de uma plataforma:
O mesmo aplicativo roda em Android e iOS. Adicionalmente, na OutSystems pode distribuir uma app como PWA e como builds nativos para Android/iOS.
Eles podem ser executados em um navegador da Web com os mesmos recursos off-line de um aplicativo móvel.
Eles atualizam no momento em que você publica as alterações no seu ambiente OutSystems.
Mais leve nos recursos de sistemas dos dispositivos do usuário.
Ao desenvolver PWAs em OutSystems, você obtém todos os benefícios do desenvolvimento low-code. Basta ativar a distribuição PWA do aplicativo.

O PWA em OutSystems é um modo de distribuição para aplicativos móveis. Um aplicativo móvel pertence ao tempo de execução do aplicativo móvel e os modelos de aplicativo padrão desse tipo são aplicativo de telefone e aplicativo de tablet . Selecione-os ao criar um novo aplicativo no Service Studio que deseja oferecer aos usuários como um PWA. Você pode distribuir simultaneamente um aplicativo móvel como um aplicativo móvel nativo e como um PWA.

Criando um aplicativo e habilitando o PWA

Crie um aplicativo móvel e ative a opção Distribuir como PWA nos detalhes do aplicativo.

Comece a criar um novo aplicativo e, na janela Novo aplicativo, selecione o modelo de aplicativo Phone App ou Tablet App.

Adicione uma tela e alguma lógica a ela.
Publique o aplicativo.
Nos detalhes do aplicativo, na guia Distribuir , ative a opção Distribuir como PWA . Para localizar a guia Distribuir , volte para a tela inicial do Service Studio e clique no ícone do aplicativo.

Executando o PWA

Veja como você pode executar seu PWA. Acesse os detalhes do aplicativo no Service Studio e clique na guia Distribuir :

Digitalize o código QR para abrir o PWA no seu dispositivo móvel.
Clique no link para abrir o PWA em um navegador de desktop.

PWA no Android

Siga estas etapas para instalar e executar seu PWA em um dispositivo Android.

Visite o URL do aplicativo no Chrome.
Toque no banner Adicionar (meu aplicativo) à tela inicial.

Depois de ver uma confirmação de que o Android adicionou o atalho à tela inicial, abra o aplicativo como qualquer outro aplicativo instalado de uma loja. Você pode desinstalá-lo como qualquer outro aplicativo Android.

PWA no iOS

Siga estas etapas para instalar e executar seu PWA em um dispositivo iOS.

Visite o URL do aplicativo no Safari.
Toque no botão Compartilhar. O menu de compartilhamento é aberto.

Toque em Adicionar à tela inicial. A tela de confirmação é aberta.

Na tela de confirmação, toque em Adicionar.

Seu aplicativo agora deve estar na tela inicial. Você pode desinstalá-lo como qualquer outro aplicativo iOS.

Você pode usar as configurações no Service Center para configurar seu aplicativo como um aplicativo Web progressivo (PWA). Os PWAs são executados no seu servidor e não exigem distribuição nas lojas de aplicativos.

Para obter mais informações, confira Distribuir como um aplicativo Web progressivo (PWA).

Para definir um aplicativo para a distribuição do PWA no Service Center, faça o seguinte:

Abra o console Service Center do ambiente (https://<environmentdomain>/ServiceCenter) e navegue até Factory .
Clique na guia Aplicativos, abra seu aplicativo móvel na lista de aplicativos e selecione a guia Distribuir. As configurações do PWA estão na seção Progressive Web Application (PWA).

Marque a caixa de seleção Distribuir como PWA e clique em Aplicar.

Autor: Thiago Mari - OutSystems Expert