O desenvolvimento de mobile apps em HTML5
Quando falamos de desenvolvimento, a cada dia que passa é possível notar a existência de um movimento migratório partindo dos criadores de aplicativos web rumo ao campo dos aplicativos mobile. E isso ocorre devido a progressão do desenvolvimento híbrido de aplicações, facilitando o trabalho dos desenvolvedores por meio de frameworks. Desenvover aplicativos híbridos consiste na utilização de linguagens front-end como JavaScript, HTML e CSS, diferente do desenvolvimento nativo, que obrigatoriamente deve ser desenvolvido utilizando os recursos da plataforma para o qual o app está sendo desenvolvido.
Tudo bem, criar apps híbridos é definitivamente um ponto positivo para nós desenvolvedores, certo? Sim! Mas e quanto a interface desse aplicativo? Será que podemos criar uma mesma aplicação hibrida, que possua interfaces semelhantes com aquelas desenvolvidas nativamente??
Para isso foi criado o Ionic, um framework front-end criado pela Drifty, voltado para o desenvolvimento de aplicativos híbridos e que faz uso do HTML em parceria com o AngularJs (já incluindo o JavaScript) e CSS, capaz de criar apps com UI’s dotadas de bom desempenho e fluidez.
O Ionic Framework
O Ionic já mencionado anteriormente é um framework que tem como objetivo, fazer com que as aplicações hibridas desenvolvidas para dispositvos móveis, possam utilizar por meio de outros frameworks como o Cordova (recomendado) ou PhoneGap, recursos de SDK’s nativas. Isso permite que os aplicativos criados em HTML5, CSS e JavaScript tenham seus de custos de desenvolvimento reduzidos - pois é necessário desenvolver o app uma única vez - e sejam compativéis com diversas plataformas ao mesmo tempo, ou seja, aquele mesmo app criado por você, pode ser usado em dispositivos Android, IoS e Windows Phone (É isso mesmo, Windows Phone!), minimizando os problemas de funcionalidade.
Componentes do Ionic
Como instalar o Ionic
Agora que conhecemos o poder do Ionic, vamos aprender a fazer uso deste framework incrível!
Em primeiro lugar, você deve ter o NodeJs instalado em seu computador.
Verifique se o node esta instalado em seu computador rapidamente no terminal digitando o seguinte comando: `node -v`.
Após a verificação e instalação do NodeJs (caso não o possua), vamos a instalação do Cordova. Abra o terminal e digite o seguinte comando:
$ sudo npm install -g cordova
Após a instalação do Cordova com êxito, em seguida iremos instalar o Ionic por meio do seguinte comando, também executado via terminal:
$ sudo npm install -g ionic
Simples, não é? Agora já podemos dar início a um projeto para a criação de um app. Ainda no terminal, digite:
$ ionic start myApp blank
O nome "MyApp" pode ser substituido pelo nome que você deseja dar ao projeto criado.
Apos a execução do comando acima, o Ionic apresenta um help menu com o seguinte layout:
Em seguida será criado um diretório com o nome dado ao projeto, que pode ser acessado pelos comandos $ cd "MyApp" && ls, gerando a listagem de arquivos existentes na pasta criada.
Agora é necessário informar ao Ionic quais plataformas serão usadas e consequentemente configuradas.
Para plataforma Android execute o seguinte comando:
$ ionic platform add android
Para plataforma IoS execute o seguinte comando:
$ ionic platform add ios
Agora vamos testar se o projeto criado está funcionando corretamente.
Para projetos voltados p/ Android execute o seguinte comando:
$ ionic build android
$ ionic emulate android
Para projetos voltados p/ IoS execute o seguinte comando:
$ ionic build ios
$ ionic emulate ios
Criando um app no Ionic
Finalmente, vamos aprender a criar um mobile app no Ionic, utilizando suas ferramentas.
Primeiramente é preciso criar um documento index.html que será a main page do aplicativo desenvolvido. Criaremos esse documento com a seguinte estrutura:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyApp</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet"> <!-- Referência para utilização dos recursos CSS do IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script> <!-- Referência para utilização dos recursos JS e Angular do IONIC -->
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script> <!-- Referência para utilização dos recursos do Cordova -->
</head>
<body>
</body>
</html>
Hora de utilizar as funcionalidades CSS, JavaScript e Angular no nosso projeto!
Uma das várias funcionalidades do Ionic, é a criação de menus laterais, ou Ion-side-menu, oferencendo uma experiência bastante interssante ao usuário no que diz respeito a navegação por menus dentro do app criado.
Para incluir o ion-side menu basta adicionar ao Index.html, dentro da tag o seguinte trecho de código:
<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>
A estrutura de menus do seu app ficará mais ou menos assim:
Ei! Mas não é só isso ok? O Ionic tem diversas funcionalidades desenvolvidas com o AngularJs, junto com a estilização por meio do CSS, que permitem a criação de um mobile app “de respeito”. Então seguem os links para você “curtir” e também “compartilhar”, é claro!
JavaScript Components
CSS Componentes
Agora que você já descobriu a amplitude do Ionic, é hora de dar vida ao seu app, ou seja, transformar o código desenvolvido em algo funcional. Para isso, é necessário criar um arquivo no diretório “MyApp/js” com o nome app.js . Em seguida, insira o seguinte código no arquivo:
angular.module('MyApp', ['ionic'])
Feito isso, volte ao seu arquivo Index.html e antes da tag que referência o Cordova insira o script:
<script src="js/app.js"></script>
Por fim, modifique o <body> do seu Index.html deixando-o com essa estrutura:
<body ng-app="MyApp">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">MyApp</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
</body>
E chega um dos momentos mais importantes… Testar o aplicativo e ver o processo do seu desenvolvimento. Aqui serão apresentadas três formas diferentes para realizar testes durante o desenvolvimento. Vamos as formas de teste!
O primeiro método de teste consiste no Desktop Browser test.
Vá na pasta onde encontra o projeto criado por meio do terminal e digite:
$ ionic serve
Ao executar o comando acima, será criado um servidor local em seu computador, permitindo que você observe o resultado pelo código desenvolvido em HTML, CSS e JavaScript.
O segundo método de teste é realizando a simulação do app com base na plataforma (Ios, Android) desejada.
No terminal, execute a instrução:
$ ionic build "plataforma"
$ ionic emulate "plataforma"
Obs: no campo “plataforma” basta apenas modificar para ios ou android, de acordo com o seu objetivo.
Por fim, existe a possibilidade de testar um aplicativo híbrido diretamente em um ambiente nativo,
ou seja, diretamente em um dispositivo móvel.
Em dispositivos Android, o procedimento é bastante simples.
Basta conectar o dispositivo móvel no desktop/notebook e executar o comando:
$ ionic run android
Chegamos na última etapa de criação como um app no Ionic...
Continuando o processo de desenvolvimento com base no código utilizado neste artigo, usaremos o ng-repeat, por meio do AngularJs para adicionar algumas caracteristicas de plataformas nativas. Com isso, adicione o ng-repeat ao seu código HTML deixando-o com a seguinte estrutura:
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">MyApp</h1>
</ion-header-bar>
<ion-content>
<!-- our list and list items -->
<ion-list>
<ion-item ng-repeat="task in tasks">
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
Agora vamos adicionar um controlador AngularJs ao aplicativo. Na tag “body” do seu HTML adicione o trecho de código:
<body ng-app="MyApp" ng-controller="MyAppCtrl">
Após realizar o passo acima, vá até o arquivo “app.js” para definir o funcionamento do controlador e insira o código:
angular.module('MyApp', ['ionic'])
.controller('MyAppCtrl', function($scope) {
$scope.tasks = [
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
})
Execute o app novamente por meio dos métodos de teste novamente e veja os resultados.
Também podemos adicionar um Modal ao aplicativo, capaz de realizar transições para elementos diferentes do app. No nosso caso, ele permite a mudança de uma “task” para uma “task” diferente. Após o fechamento da tag ion-side-menu, basta adicionar ao código um novo script dessa forma:
<script id="new-task.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
</div>
</script>
O script inserido no código acima, serve para definir o template do app como um Angular template. Nele também estão contidas as ações realizadas após o uso de buttons, com as funções manipuladoras de criação e fechamento de "tasks", juntamente com um form que recebe o nome da tarefa a ser criada, que por sua vez é disparada por meio do button de confirmação
Assim, faz-se necessário gerar um button dentro do ion-side-menu, certo? Certo! Então vamos adiciona-lo deixando o menu desse jeito:
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">MyApp</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content>
<!-- our list and list items -->
<ion-list>
<ion-item ng-repeat="task in tasks">
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
Também é necessário realizar as adições ao código criado para o controlador AngularJs:
.controller('MyAppCtrl', function($scope, $ionicModal) {
// No need for testing data anymore
$scope.tasks = [];
// Create and load the Modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
})
Try it yourself!
Não menos importante, a capacidade de adicionar novos projetos ao app é mencionada pelos criadores do Ionic e faz parte do processo de desenvolvimento no seu primeiro aplicativo. Para habilitar essa funcionalidade, atualize o “Center Content” e o “Left Menu” do Index.html, deixando-os dessa forma:
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleProjects()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title"></h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" ng-click="newProject()">
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
Por fim, é necessário fazer uma última e considerável modificação no arquivo app.js, para habilitar as funcionalidades de criação, carregamento e salvamento de projetos. A versão final do app.js deverá ficar assim:
angular.module('todo', ['ionic'])
/**
* The Projects factory handles saving and loading projects
* from local storage, and also lets us save and load the
* last active project index.
*/
.factory('Projects', function() {
return {
all: function() {
var projectString = window.localStorage['projects'];
if(projectString) {
return angular.fromJson(projectString);
}
return [];
},
save: function(projects) {
window.localStorage['projects'] = angular.toJson(projects);
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveProject']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveProject'] = index;
}
}
})
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
// A utility function for creating a new project
// with the given projectTitle
var createProject = function(projectTitle) {
var newProject = Projects.newProject(projectTitle);
$scope.projects.push(newProject);
Projects.save($scope.projects);
$scope.selectProject(newProject, $scope.projects.length-1);
}
// Load or initialize projects
$scope.projects = Projects.all();
// Grab the last active, or the first project
$scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];
// Called to create a new project
$scope.newProject = function() {
var projectTitle = prompt('Project name');
if(projectTitle) {
createProject(projectTitle);
}
};
// Called to select the given project
$scope.selectProject = function(project, index) {
$scope.activeProject = project;
Projects.setLastActiveIndex(index);
$ionicSideMenuDelegate.toggleLeft(false);
};
// Create our modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope
});
$scope.createTask = function(task) {
if(!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks.push({
title: task.title
});
$scope.taskModal.hide();
// Inefficient, but save all the projects
Projects.save($scope.projects);
task.title = "";
};
$scope.newTask = function() {
$scope.taskModal.show();
};
$scope.closeNewTask = function() {
$scope.taskModal.hide();
}
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};
// Try to create the first project, make sure to defer
// this by using $timeout so everything is initialized
// properly
$timeout(function() {
if($scope.projects.length == 0) {
while(true) {
var projectTitle = prompt('Your first project title:');
if(projectTitle) {
createProject(projectTitle);
break;
}
}
}
}, 1000);
})
Concluindo...
Realizando todos esses passos e por fim atualizando o seu arquivo app.js, você finalmente será capaz executar um app e compreender como funciona o Ionic. além de poder dar início ao processo de desenvolvimento do seu próprio aplicativo híbrido para dispositivos móveis e quão importante é, para desenvolvedores, a utilização de frameworks, que como o Ionic, são em grande maioria OpenSource, prestando um enorme serviço para a comunidade de TI.
Ah, Caso apareça um interesse em ver como alguns recursos do Ionic funcionam, vale a pena dar uma olhada no CodePen
E…
Referências
O que eu preciso saber para começar com Ionic framework?
Aplicativos mobile com AngularJs e Ionic.
Guia do Desenvolvedor Ionic - Github