Como criar um aplicativo para Android e iOS com Ionic Creator e Intel XDK – Blog da inVettor
Home » Apoio ao Empreendedor » 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!
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.
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.
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.
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 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.
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 Ionic, não deixe de participar.
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.
Acesse o site do Ionic Creator.
Crie uma conta gratuitamente preenchendo o formulário.
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).
Será carregada a interface do Ionic Creator, que é organizada conforme imagem a seguir (clique na imagem para expandir).
Para montar a interface, basta arrastar os componentes na área de edição representada pelo smartphone;
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);
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;
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.
O 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
Após fazer o download do projeto do Ionic Creator, descompacte o arquivo .zip
Crie uma pasta www e arraste para dentro dela todos os arquivos e pastas que foram descompactado, veja o gif.
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!
Ao executar o Intel XDK pela primeira vez, será necessário criar uma conta no Intel Developer Zone.
Com o Intel XDK em execução, clique em Import Yout HTML 5 Code Base
Na tela seguinte, informe o local onde está a pasta do seu projeto Ionic (clique na imagem para ampliar).
Informe um nome para o seu projeto e na tela seguinte, deixe marcada a opção HTML 5 + Cordova. Clique novamente em Continue.
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.
O resultado será bem legal, veja;
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;
Clique em Projects, será carregado em um painel da direita diversas propriedades do projeto.
No painel de propriedades procure por Plugin Management e clique nele e em seguida, clique em Add Plugin to this Project
Na lista de plugins selecione o plugin Vibration e adicione ao projeto clicando em Add Plugin
Adicione também o plugin Notification repetindo o mesmo passo anterior.
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.
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.
Clique na aba DEVELOP
No painel Working Files, localize a pasta www e depois a pasta js
Clique sobre ela e clique em New File e dê o nome de funcoes.js
Edite o arquivo com os seguintes códigos.
function Vibrar(tempo)
navigator.vibrate(tempo);
function Beep(quantidade)
navigator.notification.beep(quantidade);
Procure agora o arquivo index.html, que se encontra na pasta www
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.
Abra o arquivo que se encontra dentro da pasta templates.
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>
Use o SIMULATE para ver como ficou a aplicação, veja o resultado;
Programando o botão para emitir beeps.
Localize agora o botão Beepar.
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>
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.
Acesse a loja de aplicativos (como eu uso Android, acessei o Google Play), e localize o aplicativo Intel App Preview.
Instale em seu dispositivo.
De volta ao Intel XDK, clique na aba TEST
Clique no botão PUSH FILES e aguarde o seu projeto ser transferido para a nuvem da Intel.
De volta ao seu dispositivo, execute o Intel App Preview e faça o login na sua conta na Intel Developer Zone.
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;
Gerando o pacote de instalação
Após gerar o certificado, clique na guia BUILD.
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.
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.
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.
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!
BootStrap é um popular framework CSS utilizado para estilização de sites e aplicativos móveis. Foi criado pela equipe do Twitter como uma forma de […]