(Mobile) Construindo um Plugin Cordova para Outsystems ⭕️ usando Swift Part 1

Oi seus lindos, esse path particularmente tem sido algo desafiador para mim, pois tive que aprender tanta coisa durante essa jornada que decide documentar. Eu ainda não cheguei no meu objetivo, mas a medida que for avançando vou publicando a continuação desse artigo.

Sem falar que isso não é só mérito meu, Pedro (the big boss) e CEO da OMNUS encarou essa jornada comigo e ambos estamos empenhados aprendendo Swift e CORDOVA, para criarmos funcionalidade totalmente novas para Outsystems no segmento Mobile. Então vamos começar esse role.

Instalando e configurando o CORDOVA / iOS Environment

Todo esse passo a passo inicial é baseado na documentação padrão do CORDOVA , apenas compactei todo esse entendimento nesse pequenos passos que iremos seguir. Primeiro, precisamos instalar o CORDOVA e depois configurar seu ambiente iOS, lembrando que isso, só é possível se você tiver um Mac (Apenas a parte de iOS).

Instalando o Cordova CLI

Para instalar o CORDOVA, basicamente precisamos do Node.js e o gerenciador de pacotes que vem com ele o famoso NPM.

1. Efetue o download e instale o Node.js. Após instalação você sera capaz de chamar o node e npm via linha de comando.
2. Com o Node instalado use o gerenciador de pacotes para instalar o CORDOVA com o seguinte comando :

• OS X e Linux:

$ sudo npm install -g cordova

• Windows

C:\>npm install -g cordova

Instalando Plugman

Com o CORDOVA instalado é hora de usar mais uma vez no npm para instalar o Plugman, que é a ferramenta que utilizaremos para criar nossos Plugins no CORDOVA. Para isso execute o seguinte comando no terminal :

• OS X e Linux:

$ npm install -g plugman

• Windows

C:\>npm install -g plugman

Configurando iOS Environment

Vamos configurar nossos ambiente iOS, mas primeiro precisamos baixar Xcode. Então entre no site da App Store, e procure por Xcode, atualmente esse download está por volta de 15gb, então vai demorar um pouco, paciência.

Após efetuar o download da Xcode é preciso instalar algumas coisitas a mais. Então vamos a elas:

Primeiro se você não tem instalado o Homebrew acesse o site https://brew.sh/ e siga a instruções que basicamente é executar um comando no seu terminal do Mac OS.

Segundo precisamos instalar command line tools do Xcode, para isso no terminal e com o Xcode já instalado rode o seguinte comando no terminal:

$ xcode-select — install

Terceiro precisamos instalar uma nova ferramenta de command line tool chamada ios-deploy que o CORDOVA usa para efetuar sua mágica, para isso rode o seguinte comando no terminal (Lembrando que o brew tem que estar previamente instalado):

$ brew install ios-deploy

Quarto precisamos instalar outra command line tool chamada CocoaPods, essa ferramenta é o gerenciador de pacotes do iOS semelhante ao npm do Node.js pip do Python etc. Para efetuar a instalação efetue o seguinte comando no terminal :

$ sudo gem install cocoapods

Com isso foi concluímos a configuração do nosso ambiente iOS e CORDOVA necessário para o nosso desenvolvimento.

Criando seu Plugin e Configurando o Swift

Vamos a criação do nosso plugin e configuração de Object-C para Swift, lembrando que todos os passos anteriores devem ser executados para que possamos prosseguir sem muitos problemas.

Primeiro, abra o seu terminal em um pasta de sua preferencia e execute o seguinte comando do Plugman, para criar nosso Plugin :

plugman create — name OmnusSwiftDemo — plugin_id cordova-plugin-omnusswiftdemo — plugin_version 1.0.0

Segundo, acesse a pasta criada pelo Plugman e execute o comando abaixo para adicionar a plataforma iOS ao nosso Plugin.

$ cd OmnusSwiftDemo/ 
$ plugman platform add — platform_name ios 

Esse comando criara um pasta ios dentro do src/ com o código de exemplo escrito em Object-C

Terceiro, ainda dentro da pasta execute o seguinte comando no Plugman para criar um arquivo package.json que ira permitir instalar esse plugin no Outsystems e em aplicações CORDOVA para testarmos nossa aplicação.

sudo plugman createpackagejson .

O comando acima ira executar um passo a passo para criação do seu arquivo package.json e o resultado final será esse :

Quarto, agora que executamos todos os passos acima iremos adicionar no arquivo plugin.xml a dependência que ira habilitar o swift para nós. Para isso adicione a seguinte linha no arquivo dentro da tag `<plataform>` :

<dependency id=”cordova-plugin-add-swift-support” version=”2.0.2" />

Quinto, ainda no arquivo Plugin.xml, altere o source-file de OmnusSwiftDemo.m para OmnusSwiftDemo.swift e faça o mesmo no arquivo fisico na para src/.

Sexto, altere o código do seu .swift que está com código em Object-C para Swift conforme exemplo abaixo :

Código gerado pelo Plugman em Object-C

/********* OmnusSwiftDemo.m Cordova Plugin Implementation *******/
#import <Cordova/CDV.h>
@interface OmnusSwiftDemo : CDVPlugin {
// Member variables go here.
}
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end
@implementation OmnusSwiftDemo
- (void)coolMethod:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end

Código reescrito em Swift

//
// OmnusSwiftDemo.swift
// MyApp
//
// Created by Diógenes Dauster on 10/10/22.
//
@objc(PluginSwiftDemo) class OmnusSwiftDemo : CDVPlugin {
@objc(coolMethod:)
func coolMethod(_ command: CDVInvokedUrlCommand) {
let msg = command.arguments[0] as? String ?? "Error"
print(msg)
var pluginResult = CDVPluginResult(
status: CDVCommandStatus_ERROR,
messageAs: msg
)
if msg.count > 0 {
pluginResult = CDVPluginResult(
status: CDVCommandStatus_OK,
messageAs: msg
)
}
self.commandDelegate!.send(
pluginResult,
callbackId: command.callbackId
)
}
}

Com isso terminamos toda nossa configuração e o nosso plugin em swift está pronto para ser testado. Mas antes vamos falar um pouco do JS que está na pasta www que é exatamente o JS que iremos chamar no Outsystems que ira chamar o código nativo através da bridge do CORDOVA.

exec(<successFunction>, <failFunction>, <service_name>, <action>, [<args>]);

Exec empacotará uma solicitação do UIWebView para o lado nativo do iOS, mais ou menos se resumindo a chamar o método de ação na classe de serviço, com os argumentos passados no args Array.

JavaScript exec call service_name e o nome da classe Swift do plug-in devem corresponder.

JavaScript exec call action e o nome da função Swift do plug-in devem corresponder.

Sem isso adicionado, o plugin pode compilar, mas não será acessível pelo CORDOVA.

Testando nosso plugin em uma aplicação CORDOVA

Aqui iremos criar uma aplicação CORDOVA simples, o famoso hello word e veremos se nosso plugin está funcional.

Primeiro, abra o seu termina na pasta onde criamos o plugin, vamos criar uma aplicação CORDOVA rodando o seguinte comando :

cordova create myApp vc.com.omnus.myApp myApp

Segundo, na pasta criada do app acesse e adicione a plataforma ios com o seguinte comando no terminal:

$ cd myApp 
$ cordova platform add ios 

Terceiro, adicione nosso plugin usando o seguinte comando no terminal :

Apontando para uma pasta local

cordova plugin add ../OmnusSwiftDemo

Apontando para uma github publico

cordova plugin add https://github.com/seu_plugin.git

Para configurar a versão mais recente do Swift, adicione o seguinte em config.xml em <platform>

<preference name="UseSwiftLanguageVersion" value="5" />

Agora chegou a hora da verdade, hora de rodar nosso plugin, então mãos a obra.

Primeiro modifique o arquivo index.html que esta dentro do seu app CORDOVA adicionando mais uma elemento html com a classe plugin, conforme imagem abaixo :

Segundo, abra o arquivo index.js ainda na pasta www/js/ e adicione o código chamando nosso plugin :

cordova.plugins.OmnusSwiftDemo.coolMethod("Omnus Swift Demo (Sussego de pai)",
(msg)=> {
let element = document.getElementsByClassName("plugin")[0]
element.textContent = msg
console.log(msg)
},(err)=> {
let element = document.getElementsByClassName("plugin")[0]
element.textContent = err
console.log(err)
}
)

Agora é hora de compilar nosso projeto e botar para rodar. Então abra o seu terminal na pasta do projeto CORDOVA que acabamos de alterar e rode o seguinte comando para buildar o projeto :

$ cordova build ios

Se tudo der certo você ira receber essa mensagem no terminal :

E por ultimo é hora de rodar nosso projeto buildado no emulador do iOS, para isso execute o seguinte comando no terminal :

$ cordova run ios

Esse comando ira iniciar o emulador do iOS na ultima versão, espere o emulador dar o boot e logo em seguida o CORDOVA ira instalar a aplicação buildada no emulador aberto.

E se tudo der certo, que vai dar você vera a mensagem customizada através da chamada do plugin em Swift :

Putssss, muitooo foda né não !!! 👏🏻👏🏻👏🏻👏🏻👏🏻 É para glorificar em pé, obg senhor. Essa é a sensação quando as coisas começam a dar certo seus lindos.

Conclusão

Se você quer algum comportamento que só código nativo é capaz de oferecer, infelizmente você tera que trilhar uma jornada árdua para as terras iOS e Android. Contudo não perca sua fé e continue tentando igual a gente da OMNUS, pois agora depois dessa longa jornada, estamos habito a voar cada vez mais longe, fazendo o que ninguém ousa fazer (Start Trek).

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