Como criar um aplicativo para Android e iOS com Ionic Creator e Intel XDK


Este artigo tem o propósito de derrubar toda a mística de como criar aplicativos. Se você chegou até este artigo com certeza está interessado em criar seu próprio app e após ler o artigo, verá que não é necessário pagar por cursos básicos para aprender o que o próprio curso sugere, “o básico”.

Seguindo o passo-a-passo proposto neste artigo, em poucos minutos você terá seu aplicativo instalado em seu dispositivo Android ou iOS e o mais importante, verá como é fácil criar seu primeiro app.

Se você é desenvolvedor WEB e deseja se aventurar em aprender e desenvolver aplicativos, este tutorial será a sua porta de entrada para este universo. Muitos conceitos de Web Developer serão aproveitados por você ao aprender a criar seu próprio app.

Basicamente, temos quase que um mini-curso inteiro nesta publicação e espero que aproveite!

Cordialmente
Prof. Anderson Oliveira

Se quiser copiar este artigo, mantenha os direitos autorais e acrescente também o link desta publicação.


Mini-curso de desenvolvimento de aplicativos

O que vamos aprender neste artigo sobre desenvolvimento de aplicativos?

  • Conceitos de UI e UX.
  • O que é Ionic.
  • Como criar sua primeira aplicação mobile com Ionic.
  • Introdução ao Ionic Creator.
  • Criar a interface de um aplicativo usando o Ionic Cretor.
  • Fazer download do projeto de interface criado no Ionic Cretor.
  • Introdução do Intel XDK.
  • Importar o projeto de interface do Ionic Creator no Intel XDK.
  • Introdução ao Apache Cordova.
  • Plugins do Cordova.
  • Adicionando o plugin cordova-vibration .
  • Adicionando o plugin cordova-notification.
  • Testando a aplicação no App Preview instalado em seu Smartphone ou Tablet.
  • Gerar um pacote de instalação APK para o Android.

Conceitos de UI e UX

Em aplicativos, o conceitos de UI e UX é muito forte, principalmente quando trabalhamos com o Ionic (veremos logo a seguir)

UI é o acrônimo de User Interface, ou, Interface com o usuário.  É tudo aquilo que é perceptível visualmente e induz o usuário a fazer uma interação com o aplicativo.  Pode ser um simples botão, um menu deslizante ou um áudio.

Conceitos de UI - User Interface - Aprenda a desenvolver aplicativos.

Já o UX, é o que está por trás do UI. Enquanto o UI estimula o usuário a tocar o dedo em um botão por exemplo, este botão deve garantir que o resultado do “tocar no botão” seja satisfatório ao usuário, que ele possa obter como resultado exatamente o UI propôs para ele.

Conceitos de UX - User Experience - Crie seu próprio aplicativo

Cabe então ao desenvolvedor conhecer quais as opções de interação que plataforma para qual ele está desenvolvendo oferece, a partir deste conhecimento é possível criar um UI bem amarrado com o UX. Veja um exemplo de comparação entre UI e UX.

UI – User Interface

UX – User Experience

Elementos visuais; botões, imagens. Interação com os elementos visuais.
Define as cores e suas variantes. Define as telas (Wireframe) onde os elementos serão inseridos.
Trabalha o design gráfico do Wireframe criado no UX. Define como as informações serão tratadas dentro do aplicativo.
Define como as informações serão exibidas visualmente dentro do aplicativo. Define a navegação do usuário pelo aplicativo.

Agora que você já compreendeu estes conceitos, vamos conhecer o Ionic, um framework que irá nos ajudar a trabalhar com UI e UX.

O que é Ionic?

O Ionic é um popular framework para desenvolvimento de interface de aplicativos, ele também usa outro dois frameworks para garantir que o desenvolvedor, tanto de UI como de UX, possa focar seus trabalhos usando apenas as soluções propostas pelo Ionic.

Crie aplicativos com Ionic, Angular JS e Cordova

Estes dois framewoks são o AngularJS e o Apache Cordova. O Angular JS é um framework JavaScript que permite criar interações visuais com o usuário, por exemplo, um menu deslizante ou um janela flutuante.

Se você é desenvolver WEB, com certeza deve conhecer BootStrap e JQuery, enquanto o BS é empregado na estilização da interface, o JQuery trabalha as interações do usuário. Basicamente, o mesmo ocorre com o Ionic e o Angular.

já o Apache Cordova, é outro framework Javascript que permite que o seu aplicativo acesse recursos nativos do dispositivo, por exemplo, fazer o Smartphone vibrar, acessar a câmera, ativar o GPS, etc…

Criando minha primeira aplicação mobile com Ionic

Assim como qualquer framework, o desenvolvedor precisa demandar tempo e energia para estudar e compreender o Ionic. No entanto, neste tutorial não iremos estudar o Ionic, deixaremos isso para o Curso Gratuito de desenvolvimento de Aplicativos com Intel XDK e Ionicnão deixe de participar.

O Ionic Creator

O Ionic Creator é um recurso para iniciantes criado pelos próprios desenvolvedores do Ionic. O interessante deste recurso é a agilidade que você ganha para montar as interfaces do seu aplicativo, mesmo desenvolvedores profissionais usam o Ionic Creator para ganhar produtividade.

O Ionic Creator é gratuito para apenas um projeto. Para quem desenvolve vários projetos pode adquirir a versão PRO por 19,90 dólares mensais, o que é relativamente barato se comparado aos preços de aplicativos vendidos no mercado brasileiro.

Vamos encurtar caminho com o Ionic Creator, que oferece os recursos mais triviais do Ionic.

  1. Acesse o site do Ionic Creator.
  2. Crie uma conta gratuitamente preenchendo o formulário.
  3. Após o cadastro, clique em New Project e dê um nome para o seu projeto, o meu se chamará IonAlarme, escolha a opção de layout Blank e clique em Create Project (clique na imagem para expandir).Como criar interfaces com Ionic Creator
  4. Será carregada a interface do Ionic Creator, que é organizada conforme imagem a seguir (clique na imagem para expandir).Criar telas de aplicativos com Ionic Creator
  5. Para montar a interface, basta arrastar os componentes na área de edição representada pelo smartphone;Criar telas de aplicativos com o Arrastar e Soltar do Ionic Creator

Criando a interface do aplicativo usando o Ionic Creator.

Crie a interface como demonstrada na tela, contendo um Header, um Paragraph e dois botões com ícones (localize os ícones na paleta de propriedades);

Interface do aplicativo criado com o Ionic Creator

Fazendo o download dos códigos gerados no Ionic Creator.

Agora vamos fazer o download, clicando no ícone da nuvem existente no menu superior direito do Ionic Creator;

Download do Projeto criado no Ionic Creator.

 

Clique em Download Project Zip.

Aprendendo a usar o Intel XDK

Agora vamos usar os arquivos do projeto para gerar nosso aplicativo usando o Intel XDK.

Intel XDK é um ambiente de desenvolvimento de aplicativos baseados em HTML 5 e Cordova, e através dos recursos de nuvem da Intel, é possível gerar pacotes de instalação do mesmo aplicativo para Android, iOS e Windows Phone, ou seja, um único aplicativo pode funcionar em plataformas diferentes, este conceito é denominado de Cross-Platform , X-Platform ou plataforma cruzada.

Importando o seu projeto do Ionic Creator no Intel XDK

  1. Após fazer o download do projeto do Ionic Creator, descompacte o arquivo .zip
  2.  Crie uma pasta www e arraste para dentro dela todos os arquivos e pastas que foram descompactado, veja o gif.Ionic no Intel XDK
  3. Faça o download da última versão do Intel XDK no site oficial – https://software.intel.com/en-us/intel-xdk e prossiga com a instalação, não se assuste, ela é bem demorada!
  4. Ao executar o Intel XDK pela primeira vez, será necessário criar uma conta no Intel Developer Zone.
  5. Com o Intel XDK em execução, clique em Import Yout HTML 5 Code Base
  6. Na tela seguinte, informe o local onde está a pasta do seu projeto Ionic (clique na imagem para ampliar). Importar projeto do Ionic Creator para o Intel XDK
  7. Clique em Continue.
  8. Informe um nome para o seu projeto e na tela seguinte, deixe marcada a opção HTML 5 + Cordova. Clique novamente em Continue.
  9. Seu projeto já está criado e pronto para ser editado no Intel XDK. Para ver seu aplicativo funcionando, clique na aba SIMULATE existente no menu superior do Intel XDK e em seguida aperte o ícone de play, aguarde alguns minutos para o Intel XDK possa criar os arquivos da aplicação.Como simular um aplicativo no Intel XDK

O resultado será bem legal, veja;Resultado do aplicativo criado no Ionic Creator e importado no Intel XDK

 

O que é Cordova?

Conforme já visto, Cordova é framework JavaScript que permite o acesso aos recursos nativos do dispositivo, por exemplo; acessar a câmera, o GPS, a lista de contatos, etc. Usar Cordova é muito simples pois ele é baseado em uma série de plugins (se já trabalhou com jQuery sabe muito bem o que é isso!)

Como usar os plugins do Cordova, Vibration e Notification.

Note em que nosso aplicativo há dois botões, o Vibrar e o Beepar. O vibrar deve fazer o dispositivo vibrar e o beepar deve emitir um sinal sonoro semelhante ao do WhatsApp quando recebemos alguma notificação.

Estes dois botões serão programados a partir de dois plugins do Cordova que podem ser ativados seguindo os passos;

  1. Clique em Projects, será carregado em um painel da direita diversas propriedades do projeto.Configurações do projeto de desenvolvimento de aplicativo no Intel XDK
  2. No painel de propriedades procure por Plugin Management e clique nele e em seguida, clique em Add Plugin to this Project
  3. Na lista de plugins selecione o plugin Vibration e adicione ao projeto clicando em Add PluginAdicionando plugins do Cordova
  4. Adicione também o plugin Notification repetindo o mesmo passo anterior.Como usar plugins do Cordova

 

Programando os plugins do Cordova

Para aprender a executar os plugins do Cordova, basta seguir os exemplos existentes na documentação destes plugins, você pode obter a documentação clicando em Get Documentation como mostra  a imagem a seguir.

Documentação do plugins Cordova

Além disso, você deve ter conhecimentos básicos de JavaScript, é importante saber criar variáveis, criar funções e passar parâmetros para estas funções.

Agora vamos colocar as mãos na massa.

  1. Clique na aba DEVELOP
  2. No painel Working Files, localize a pasta www e depois a pasta js
  3. Clique sobre ela e clique em New File e dê o nome de funcoes.jsCriando um novo arquivo no Brackets / Intel XDK
  4. Edite o arquivo com os seguintes códigos.
    function Vibrar(tempo)
    {
     navigator.vibrate(tempo);
    }
    
    function Beep(quantidade)
    {
     navigator.notification.beep(quantidade);
    }
  5. Procure agora o arquivo index.html, que se encontra na pasta www
  6. Localize a tag </head> e acrescente o seguinte comando
      <script src="js/funcoes.js"></script>

 

Programando o botão para vibrar o dispositivo.

Localize a pasta templates,  dentro dela existe um único arquivo que contêm toda a estrutura visual da tela do aplicativo. Basicamente, se o seu app tivesse uma outra tela, haveria na pasta templates um segundo arquivo. Cada arquivo dentro da pasta template se refere a uma tela do seu app.

É importante notar que o Ionic separa muito bem a parte de UI da parte UX e sua organização é bem diferente de outros frameworks de estilização existentes no mercado, como o BootStrap por exemplo.

  1. Abra o arquivo que se encontra dentro da pasta templates.
  2. Localize o botão de Vibrar e acrescente dentro da tag um evento onclick para chamar a função Vibrar(), deve-se passar para a função o tempo que durará a vibração e que, de acordo com a sua documentação, 1 segundo é representado pelo valor 1000. Então, se queremos que o dispositivo vibre por 2 segundos, devemos usar Vibrar(2000), ficando assim;
    <button id="page-button1" class="button button-positive  button-block icon-left ion-android-alarm-clock" onclick="Vibrar(2000)">Vibrar</button>
  3. Use o SIMULATE para ver como ficou a aplicação, veja o resultado;Vibrar o dispositivo.

Programando o botão para emitir beeps.

  1. Localize agora o botão Beepar.
  2. Acrescente um evento onclick no botão chamando a função Beep(), a função Beep() deve receber um parâmetro informando quantos beeps você quer que o dispositivo emita quando o botão for pressionado e que, de acordo com a documentação, basta informar um valor inteiro. Se queremos 2 beeps, basta chamar Beep(2), ficando;
    <button id="page-button2" class="button button-positive  button-block icon-left ion-alert-circled"  onclick="Beep(2)">Beepar</button>
  3. Agora, teste novamente no SIMULATE para ver se o beep é disparado. Não se assuste, o beep do Windows é realmente feio.

Nosso aplicativo está pronto! Legal né? Agora vamos testá-lo no nosso dispositivo.

 

Testando o aplicativo no seu smartphone ou tablet

A maneira mais simples de fazer testes é usando o aplicativo Intel App Preview que pode ser baixado nas lojas de aplicativos do seu sistema, seja ele Android, iOS ou Windows Phone.

Meu Smartphone é um LeNovo com Android 6, portanto, vou usar ele como exemplo deste tópico.

  1. Acesse a loja de aplicativos (como eu uso Android, acessei o Google Play), e localize o aplicativo Intel App Preview.
  2. Instale em seu dispositivo.
  3. De volta ao Intel XDK, clique na aba TEST
  4. Clique no botão PUSH FILES e aguarde o seu projeto ser transferido para a nuvem da Intel.
  5. De volta ao seu dispositivo, execute o Intel App Preview e faça o login na sua conta na Intel Developer Zone.
  6. Você deverá ver o seu projeto na lista do App Preview, clique em play e teste.

 

Gerando o pacote de instalação APK para Android

Para enviar um aplicativo para distribuição, você deve assinar digitalmente seu aplicativo com um certificado. Esse certificado pode ser armazenado em sua conta online Intel XDK. Para gerar o certificado, siga os passos a seguir;

  1. Clique no ícone de usuário no canto superior direito da janela do Intel XDK e clique em Create keystore.
    Como criar chaves (Keystore) para Android no Intel XDK
  2. Preencha os dados do formulário a seguir, cujo o campo mais importante é a senha que valida a autenticidade do certificado, portanto, anote a senha em um local seguro e fácil acesso. Aguarde alguns minutos para gerar o certificado.

Gerando o pacote de instalação

  1. Após gerar o certificado, clique na guia BUILD.
  2. Marque o box do Android de modo que ele fique destacado em azul. Como gerar um pacote de instalação APK no Intel XDK
  3. Note que no box há um cadeado com um ponto de interrogação. Isso aparece porque você necessita informar ao Intel XDK qual o certificado de keystore deseja utilizar. Clique no ícone do cadeado.
  4. Selecione o certificado criado na etapa 2 Como gerar um pacote de instalação APK no Intel XDK
  5. Agora clique novamente em Build e clique novamente no cadeado. Informe a senha que você criou para a chave do certificado e clique em Unlock.
  6. Finalmente, clique no botão Start Builds que se encontra no topo da janela do Intel XDK e aguarde alguns minutos para gerar o APK.
  7. Após o término, faça o download do APK e transfira para o seu celular, o APK ficará disponível para download e um link será enviado ao seu e-mail de cadastro.

Conclusão

Se você seguiu todos os passos corretamente, você terá em seu dispositivo um aplicativo desenvolvido por você mesmo e espero que seja o primeiro de muitos.

Para avançar nos estudos, explore os plugins do Cordova e avance seus estudos em JavaScript e para criar interações ainda mais dinâmicas com os usuários do seu aplicativo, aprenda Angular JS

Espero que tenha gostado e bons estudos!

Deixe seu comentário