Antes de criticarmos ou falar que algo é ruim, é bom entendermos o motivo pelo qual aquilo existe.

Porque o CORS existe?

O CORS (do inglês cross-origin resource sharing) é um mecanismo que permite que os conteúdos de domínios diferentes sejam compartilhados. Ele existe para evitar que o conteúdo de um determinado domínio seja utilizado por outro sem a autorização do mesmo.

Exemplo: supondo que eu queira exibir os conteúdos do youtube em meu site, faço uma análise das requisições HTTP’s feitas pelo youtube, obtendo os parâmetros da chamada criaria uma UI para usar as informações do youtube, tirando assim proveiro dos dados deles. O CORS impediria que essa ação fosse executada na camada do navegador, ou seja é uma segurança para você!

Como funcionar o CORS?

O CORS vai analisar se o recurso que você tenta carregar está sob o mesmo domínio e porta. Com isso mesmo que você tenha sua API rodando no endereço “http://localhost:8080” e sua aplicação ionic/angular rodando em suas respectivas portas (8100/4200) ao chamar a API com toda certeza vai ter sua requisição bloqueada e vai receber a mensagem de CORS.

Quando você não está sob o mesmo domínio você vai notar na parte de redes que uma requisição http gera 2 outras chamadas. A primeira chamada usa o verbo http OPTIONS, ele é utilizado pelo navegador para perguntar ao  seu servidor/aplicação quais os tipos de requisição sua aplicação permite e é no OPTIONS que você deve informar suas configurações do CORS através de Headers.

Opções para o CORS

1. Access-Control-Allow-Origin: Header utilizado para informar quais domínios você permite que use o seu conteúdo.
2. Access-Control-Allow-Methods: Header utilizado para informar quais verbos http você permite a partir dos domínios liberados.
3. Access-Control-Allow-Headers: Header utilizado para informar quais “Headers” os domínios liberados podem enviar para você.
4. Access-Control-Max-Age: Header utilizado para informar quanto tempo é válido essas configurações de CORS.

O que não devo fazer?

[wp_ad_camp_3]

Bom acho que a primeira coisa que você deve se questionar é: Preciso realmente liberar o CORS em seu ambiente? Mesmo em aplicações ionic a liberação não é necessária. O mesmo para Angular, vendo que em produção o domínio será o mesmo (ou não rs).

Mas vamos lá, supondo que você chegou a conclusão que liberar o CORS é realmente necessário, não faça isso “Access-Control-Allow-Origin: *” ao fazer isso você está simplesmente tirando uma camada de segurança que foi criada para você. Caso você esteja rodando uma aplicação ionic (já compilada), não é necessário liberar o CORS mas caso queira liberar é necessário apenas  permitir o endereço http://localhost:8080/ que é o endereço que o ionic utiliza para carregar sua aplicação compilada ou seja a liberação correta (caso deseje fazer) é “Access-Control-Allow-Origin: http://localhost:8080“.

Outra coisa bem importante é o Access-Control-Max-Age geralmente nos tutoriais ninguém comenta sobre ele. Lembra aquela segunda requisição? A do tipo OPTIONS, então ela é feita quando expira o Access-Control-Max-Age então se você não falar para o navegador que essas definições só mudam de X em X tempos todo e qualquer request que você fizer o seu servidor vai receber duas requisições (cada browser tem seu tempo padrão). Em ambiente de desenvolvimento, geralmente desabilitamos os cache’s e com isso o Access-Control-Max-Age não vai fazer efeito. Mas em ambiente de produção é algo muito importante.

Como assim não preciso liberar o CORS para o ionic?

Sim é isso mesmo, não precisa! E já vou explicar o motivo. Quando você desenvolve seu aplicativo, você geralmente testa seu projeto seu navegador e ele implementa o Same-Origin-Policy por isso que você tem problemas com CORS e acaba fazendo tudo quanto é tipo de liberação. Porém quando o seu aplicativo é compilado para APK ou IPA o ionic de forma nativa consegue desabilitar o CORS da WebView (e eles já fazem isso).

Vale lembrar que para o iOS o ionic sempre usou o UIWebView só que agora eles migraram para o MKWebView e no iOS eles não conseguem desabilitar o CORS nessa webview em especifico =/. Então ou você faz um downgrade da webview, ou você libera o CORS para a origem “http://localhost:8080” ai é uma decisão pessoal, basta acessar a documentação com as melhorias propostas pela MKWebView e colocar na balança.

Para fazer o downgrade da WebView basta colocar o conteúdo abaixo em seu config.xml para a plataforma iOS:

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

E meu ambiente de desenvolvimento, como faço?

Então para você desabilitar a checagem do CORS em seu ambiente de desenvolvimento você pode fazer uso de uma extensão do google chrome mas eu não recomendo, tive muitos problemas com essa extensão. Ela liberou o CORS mas sempre me trouxe problema com encodings em outros sites que eu acessava.

Não quer usar a extensão?

Então vamos lá, o ionic e o angular tem um recurso bem interessante e muito pouco conhecido que tem exatamente essa função (impedir problemas com CORS) são os proxies.  É algo bem simples, mas eles são apenas para ambientes de desenvolvimento. Então não se esqueça de criar uma configuração para seu endpoint  🙂

O que é um proxy? Como ele funciona?

Um proxy basicamente é um serviço intermediário entre você e seu servidor de aplicação, ele recebe sua requisição e repassa ela para o servidor original.

Vamos criar o seguinte cenário: Tenho a url (http://localhost:8888/) rodando um backend, então vamos criar um mapeamento para informar que tudo que for chamado na uri /api seja passado para o backend.

Vamos supor que você esteja desenvolvendo em uma aplicação ionic, ao digitar o endereço http://localhost:8100/api/criar-usuario ele vai redirecionar internamente no processo do ionic serve a requisição para http://localhost:8888/criar-usuario então sua aplicação vai estar chamando uma URL que está no mesmo domínio e na mesma porta assim a Same-Origin-Policy não vai ser aplicada e você pode seguir seu desenvolvimento sem necessidade de liberar o CORS para desenvolver.

Configurando o proxy no ionic

[wp_ad_camp_2]

Para configurar o proxy no ionic basta abrir o arquivo ionic.config.json e criar uma nova propriedade chamada proxies e nela definir seus paths.

Exemplo:

{
	"name": "app-meuapp",
	"app_id": "",
	"type": "ionic-angular",
	"proxies": [{
		"path": "/api",
		"proxyUrl": "http://localhost:8888/"
	}],
	"integrations": {
		"cordova": {}
	}
}

Configurando o proxy no Angular

Para fazer a configuração de seu proxy no Angular o processo é semelhante. Para isso é necessário criar um arquivo JSON com as configurações os paths desejados. Então vamos criar o arquivo proxy.conf.json e vamos colocar o conteúdo abaixo. Após isso basta você inicializar seu projeto com o comando ng serve –proxy-config proxy.conf.json.

Observação: Recomendo que coloque esse comando na chave start do package.json assim você só vai precisar rodar o comando npm start

Conteúdo para o proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

Conclusão

[wp_ad_camp_1]

O CORS é um recurso de segurança muito importante e precisamos gerenciar ele de acordo com as necessidades do nosso projeto, fazendo o uso das técnicas mencionadas nesse post é possível trabalhar sem dor de cabeça e claro ter um desenvolvimento saudável e seguro.

The post Ionic & Angular: Fazendo o CORS seu amigo appeared first on Hiago Silva Souza.

Gulp

O Gulp é um kit de ferramentas para automatizar tarefas massantes/demoradas no fluxo de trabalho do desenvolvimento, com ele é possível automatizar essas tarefas de maneira simples e confiável.

Preparando o ambiente

[wp_ad_camp_3]

Primeiro você deve instalar em seu projeto ionic as dev-dependencies abaixo:

npm install --save-dev gulp run-sequence shelljs

Criando sua KeyStore

A keystore é única, ela é quem garante que você e somente você consiga fornecer uma atualização segura para seus usuários.

Como a KeyStore é gerada uma única vez, não vejo motivos para automatizar no processo do Gulp. A Keystore é o segundo passo do “Publishing your app“. Entre no diretório de sua aplicação e na mesma pasta de seu package.json, execute o comando abaixo informando os seus dados e criando uma senha que você vai usar depois na nossa tarefa do Gulp. Mantenha a mesma senha, tanto para o keystore quanto para o alias.

keytool -genkey -v -keystore chave-distribuicao.keystore -alias ID_DO_SEU_CONFIG_XML -keyalg RSA -keysize 2048 -validity 10000

Note que no comando acima tem a informação ID_DO_SEU_CONFIG_XML essa informação deve ser substituída pelo id que você colocou no seu config.xml, o padrão para os id do config.xml é br.com.seuappsite.app.

Package.Json

[wp_ad_camp_2]

Agora vamos editar nosso package.json, e vamos adicionar um novo valor dentro dos scripts. Crie uma nova chave com o nome “build:release” com o valor “gulp release“.

Gulpfile

Agora precisamos criar um arquivo chamado gulpfile.js no mesmo diretório do seu package.json ele é quem vai fazer todo o trabalho de executar o “ionic cordova build –prod –release”, e os outros passos para assinar e alinhar o seu aplicativo. E o resultado final vai ser o seu APK pronto para distribuição na pasta dist.

Conteúdo do Gulpfile.js:

const gulp = require('gulp'),
      fs = require('fs'),
      path = require('path'),
      runSequence = require('run-sequence'),
      shelljs = require('shelljs'),
      config = {
           pwd: "SENHA_ESCOLHIDA_NA_CHAVE",
           alias: "ID_DO_SEU_CONFIG_XML",
           keystore: "chave-distribuicao.keystore"
      };

gulp.task('release', function () {

    const apks = fs.readdirSync('./dist');
    for(apk of apks) {
        // verificando apks não assinados
        if(apk.indexOf('.apk') > -1) {
            fs.unlinkSync(`./dist/${apk}`);
        }
    }

    if(config.pwd === 'keystore_password' || config.pwd === '') {
        console.error('Edite o gulpfile.js e informe a senha de sua keystore.');
        return shelljs.exit(1);
    }

    runSequence('compilar-release', 'assinar-apk', 'alinhar-apk', function () {

    });
});

/**
 * Compilo com a flag --prod e --release no ionic
 */
gulp.task('compilar-release', function () {
    const out = shelljs.exec('ionic cordova build android --release --prod --no-interactive', {silent:true}).stdout;
    const buildReturn = out.split('Built the following apk(s):');

    // verifico se o build deu certo
    if(buildReturn.length > 1) {
        const apks = buildReturn[1].replace(/\r/, '').replace(/\t/, '').split('\n'),
              realApks = [];
        for(apk of apks) {
            // recupero os apks releases gerados
            if(apk.indexOf('release-unsigned.apk') > -1) {
                realApks.push(apk);
            }
        }

        // verificando se a pasta dist existe.
        if(!fs.existsSync('./dist')) {
            fs.mkdirSync('./dist');
        }

        // movendo apks para a dist
        for(apk of realApks) {
            let splitter = "/";
            if(apk.indexOf("\\") > -1) {
                splitter = "\\";
            }

            let fileName = apk.split(splitter);
            fileName = fileName[fileName.length - 1];

            fs.copyFileSync(apk, './dist/' + fileName);
            fs.unlinkSync(apk);
        }
    } else {
        // erro no build
        shelljs.exit(1);
    }
});

/**
 * Assina o APK com release
 */
gulp.task('assinar-apk', function () {
    const apks = fs.readdirSync('./dist');
    for(apk of apks) {
        // verificando apks não assinados
        if(apk.indexOf('release-unsigned.apk') > -1) {
            let signCommand = `jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ${config.keystore} -storepass ${config.pwd} -keypass ${config.pwd} ./dist/${apk} ${config.alias}`;
            const signCommandResult = shelljs.exec(signCommand, {silent:true}).stdout;
            console.log(signCommandResult);
        }
    }
});

/**
 * Assina o APK com release
 */
gulp.task('alinhar-apk', function () {
    let bdtools = process.env.ANDROID_HOME + path.sep + 'build-tools' + path.sep + fs.readdirSync(process.env.ANDROID_HOME + path.sep + 'build-tools')[0] + path.sep;
    console.log(bdtools);
    const apks = fs.readdirSync('./dist');
    for(apk of apks) {
        // verificando apks não assinados
        if(apk.indexOf('release-unsigned.apk') > -1) {
            let alignCommand = `"${bdtools}zipalign" -v 4 ./dist/${apk} ./dist/${apk.replace('-release-unsigned.apk', '')}.apk`;
            const alignCommandResult = shelljs.exec(alignCommand, {silent:true}).stdout;
            fs.unlinkSync(`./dist/${apk}`);
            console.log(alignCommandResult);
        }
    }
});

Testando

[wp_ad_camp_1]

Agora para gerar e assinar seus apks basta você executar o comando abaixo:

npm run build:release

Obrigado pessoal, espero que o conteúdo seja útil para vocês.

[27/11/2018] Edição: Adicionei na linha 32 do Gulpfile.js o parâmetro –no-interactive para corrigir o problema de travar a compilação pelo fato da CLI do ionic perguntar se você deseja fazer a atualização.

The post Gulp + Ionic: Automatizando Release no Android appeared first on Hiago Silva Souza.

Extensões

[wp_ad_camp_3]

Vamos preparar para que você possa depurar tanto a aplicação no ionic serve (testando em seu browser), como no ionic cordova run android (com a aplicação compilada no Android ou iOS).

Para isso vamos precisar de duas extensões do VSCode para nos ajudar, são elas:

1. Debugger for Chrome (distribuído pela própria Microsoft)
   
2. Cordova Tools
   

Configurando o VSCode

[wp_ad_camp_2]

Após instalar as extensões você pode ir na sessão de debug do vscode (4º ícone da barra lateral esquerda). Lá você clica na engrenagem que fica após o combobox e escolha a opção Cordova.

Logo após isso vai ser criado o arquivo launch.json com diversas opções de debug disponíveis. Porém vamos apagar o conteúdo atual do arquivo e colocar o conteúdo abaixo no lugar.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Depurar no Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/www"
        },
        {
            "name": "Depurar no Android",
            "type": "cordova",
            "request": "attach",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}"
        },
        {
            "name": "Depurar no iOS",
            "type": "cordova",
            "request": "attach",
            "platform": "ios",
            "target": "device",
            "port": 9220,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}"
        }
    ]
}

Ao colocar esse código e salvar feche e abra o seu Visual Studio Code e na sessão de debug você já terá disponível o “Depurar no Chrome”, “Depurar no Android” e “Depurar no iOS”.

Vamos testar?

[wp_ad_camp_1]

Agora é a hora que todos estavam esperando não é mesmo? Vamos fazer 2 testes, o primeiro é depurando usando o próprio google chrome, e o segundo é fazendo a depuração usando o próprio dispositivo.

• Obs: Na imagem não contém o depurar no iOS pois como não tenho um Mac eu removi a opção, mas na empresa eu testei e vai rolar na maçã 😉

Depurando no Browser

Para fazer o debug tanto na aplicação compilada quando no browser primeiro é necessário rodar o comando do ionic responsável pela plataforma desejada. No browser vamos no terminal e executar o comando “ionic serve –nobrowser“. Assim que finalizar o processo de compilação, vá até a opção de debug selecione a opção “Depurar no Chrome“. Assim que o navegador for aberto e o rodapé do seu VSCode estiver laranja, você já está depurando sua aplicação.

Vai fundo, coloque um breakpoint em uma de suas rotinas e seja feliz!

Depurando no Dispositivo

O processo de depuração no dispositivo é bem semelhante ao do browser. Você precisa executar a usando o comando desejado no meu caso “ionic cordova run android -l“. No meu caso vou colocar o -l para fazer o uso do live reload dentro do dispositivo.

Assim que compilar e o aplicativo estiver aberto em seu dispositivo, basta você selecionar a opção “Depurar no Android” ou “Depurar no iOS” e aguardar a barra ficar laranja. Após isso é a mesmo processo do browser! Coloque seus breakpoints e seja mais produtivo no seu trabalho.

Obrigado e espero que tenha gostado! Caso tenha alguma dúvida ou sugestão, pode deixar um comentário informando seu e-mail (não envio spams rs). Valeu!

The post Depurar uma aplicação ionic no VSCode appeared first on Hiago Silva Souza.