Conteúdo


Usando Ionic para desenvolver rapidamente os aplicativos híbridos do IBM MobileFirst Platform

O Ionic Framework

Ionic é uma estrutura de desenvolvimento móvel de alto desempenho que contém um host de componentes móveis otimizados para ajudar a construir rapidamente aplicativos móveis atraentes e fáceis de usar. Ele inclui recursos comportamentais para navegação móvel otimizada, rolagem, menus laterais e gerenciamento de teclado; módulos de CSS para formulários, botões, listas e layout genérico; e mais de 700 ícones. O Ionic possui recursos adicionais para a criação de aplicativos híbridos que usam a estrutura Apache Cordova, mas eles não são abordados neste tutorial.

O Ionic suporta iOS 6+ e Android 4.0+, abrangendo 98% de dispositivos iOS e 90% de dispositivos Android. Usando essa estrutura, é possível criar rapidamente ambos os aplicativos híbridos simples e complexos.

Pré-requisitos para este tutorial

  • Deve-se ter as ferramentas da linha de comandos do IBM MobileFirst instaladas. Você as usará para criar projetos, aplicativos e ambientes.
  • Como alternativa, é possível ainda usar o IBM MobileFirst Studio. Fazer download do Developer Edition do IBM MobileFirst Studio.
  • Deve-se estar familiarizado com as noções básicas sobre o uso do IBM MobileFirst Platform para criar aplicativos híbridos.

Introdução ao aplicativo Ionic

Crie um novo projeto MobileFirst denominado ToolsProject e um aplicativo híbrido denominado AmazingApp. Inclua um ambiente Android no aplicativo:

mfp create IonicProject
cd IonicProject
mfp add hybrid AmazingApp
cd apps/AmazingApp

Daqui em diante, execute todos os comandos no diretório IonicProject/apps/AmazingApp .

Incluindo arquivos Ionic em seu aplicativo

Faça download da versão mais recente da estrutura Ionic a partir do website do Ionic. Este tutorial usa a Versão 1.0.0-beta14. É possível fazer download dessa versão diretamente.

Crie um novo diretório denominado common/ionic e extraia o arquivo .zip transferido por download nele. Estruture seu diretório comum desta forma:

common
├── css/
├── images/
├── index.html
├── ionic/
│   ├── css/
│   ├── fonts/
│   ├── js/
│   └── version.json
└── js/

O Ionic vem com uma versão em pacote configurável do AngularJS, a qual fornece a maioria de sua funcionalidade inteligente. Para obter informações gerais sobre a estrutura do AngularJS, consulte o website do AngularJS. Para obter um tutorial do AngularJS especialmente bom, consulte o website do Thinkster.

Aumentando index.html

Edite common/index.html para carregar o Ionic e suas dependências:

<html>
<head>
  <!-- pre-existing <head> content here -->
  <!-- New lines to load Ionic CSS -->
  <link rel="stylesheet" href="ionic/css/ionic.css" />
</head>
<body>
  <!-- pre-existing <body> content here -->
  <!-- New lines to load Ionic JS bundle -->
  <script src="ionic/js/ionic.bundle.js"></script>
</body>
</html>

O projeto Ionic fornece um pacote conveniente denominado ionic.bundle.js para ajudar a carregar um ambiente básico do Ionic. Ele contém:

  • ionic.js
  • ionic-angular.js
  • angular/angular.js
  • angular/angular-animate.js
  • angular/angular-sanitize.js
  • angular-ui/angular-ui-router.js

Em vez de carregar ionic.bundle.js, é possível carregar esses arquivos individualmente, os quais podem ser mais fáceis de gerenciar para aplicativos complexos. Se você usar Bower e wiredep, os arquivos individuais serão injetados.

Carregando Ionic e AngularJS

Agora que você incluiu a estrutura Ionic e suas dependências no aplicativo, será necessário iniciá-la. Como o Ionic é um conjunto de extensões para AngularJS, o padrão de carregamento é o mesmo para AngularJS, que é denominado autoinicialização AngularJS. No entanto, é necessário deixar o IBM MobileFirst Platform (MFP) concluir a sua própria sequência de carregamento antes de autoinicializar o AngularJS; isso pode ser feito instruindo o MFP a autoinicializar o AngularJS quando ele estiver pronto. Edite o arquivo js/main.js e ajuste a função wlCommonInit() da seguinte maneira:

function wlCommonInit() {
  // Pre-existing wlCommonInit() content here
  // New lines to bootstrap AngularJS
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['app-main']);
  });
}

Esse código instrui o AngularJS a autoinicializar o aplicativo usando um módulo base denominado App. Ainda não gravou seu aplicativo ou definiu o módulo app-main, portanto, faça isso agora.

Gravando seu aplicativo Ionic

Como o Ionic inclui ótimos recursos para menus laterais e navegação, você criará um aplicativo básico com três visualizações, e entradas do menu lateral para alternar manualmente entre essas visualizações. Certamente, o Ionic possui muitas funções adicionais!

O aplicativo detalhará alguns objetos astronômicos, como planetas e buracos negros. Os dados serão estáticos, mas se você quiser, será possível incluir recursos dinâmicos usando as instalações AngularJS MVC.

Figura 1. Tela inicial do aplicativo
Application home screen
Application home screen
Figura 2. Barra lateral do aplicativo
Application side bar
Application side bar

Criando o módulo do aplicativo

Cada aplicativo AngularJS precisa de um módulo do aplicativo. Você se referiu a um denominado app-main durante a autoinicialização de AngularJS. Crie esse módulo agora. Crie um diretório denominado common/app e um arquivo denominado common/app/app-main.js, em seguida, coloque essa linha de código nele:

angular.module('app-main', ['ionic']);

Essa linha define um módulo app-main com uma única dependência: ionic. Como você definiu o app-main como o seu módulo aplicativo, o ionic será carregado automaticamente como uma de suas dependências. Assegure-se de que ele foi carregado corretamente ajustando index.html:

<body>
<!-- pre-existing <body> content here -->
<!-- New lines to load Ionic JS bundle -->
<script src="ionic/js/ionic.bundle.js"></script>
<!-- Load the application -->
<script src="app/app-main.js"></script>
</body>

Fazendo o aplicativo fazer alguma coisa

Forneça ao seu aplicativo algum conteúdo: Editar index.html e substituir Hello MobileFirst pelo código a seguir:

<!--application UI goes here-->
<!-- Hello MobileFirst -->
<ion-side-menus>
  <ion-side-menu-content>
    <!-- Ionic places our views here-->
    <!-- Configure the global navigation/title bar -->
    <ion-nav-bar class="bar-dark">
      <!-- Default buttons -->
      <ion-nav-buttons side="primary">
        <!-- "Hamburger" menu -->
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
      <!-- Automatic back button -->
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <!-- Contains our views -->
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <!-- Define our left-hand-side menu -->
    <header class="bar bar-header bar-dark">
      <h1 class="title">Amazing Menu!</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/home" class="item-icon-left">
          <i class="icon ion-ios7-home"></i> Home
        </ion-item>
        <ion-item class="item-divider">
          Amazing Things
        </ion-item>
        <ion-item nav-clear menu-close href="#/planets" class="item-icon-left">
          <i class="icon ion-planet"></i> Planets
        </ion-item>
        <ion-item nav-clear menu-close href="#/blackholes" class="item-icon-left">
          <i class="icon ion-funnel"></i> Black Holes
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Também é necessário ajustar as folhas de estilo padrão para que o MFP para que o Ionic funcione adequadamente. Editar common/css/main.css e inclua esta regra:

body {
  position: initial;
}

Executar o aplicativo pela primeira vez:

mfp build
mfp deploy
mfp preview

Se você estiver usando o MFP Studio, construa, implemente e visualize o aplicativo. Ainda não há nenhum conteúdo, mas é possível ver que ao clicar no botão Hamburger abre-se o menu lateral. É possível também deslizar os dedos para abrir e fechar o menu. Esses botões estão inativos, portanto, inclua algum conteúdo.

Incluindo conteúdo no aplicativo

Sua navegação global é definida, mas você ainda não tem qualquer conteúdo. O Ionic organiza seu conteúdo em visualizações e é necessário definir as visualizações antes que ele saiba como mostrá-las. Para fazer isso, edite o arquivo common/app/app-main.js e ajuste-o da seguinte maneira:

angular.module('app-main', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  // Define our views
  $stateProvider.state('home', {
    url: "/home",
    templateUrl: 'views/home.html'
    // If you wanted some AngularJS controller behaviour...
    // controller: "HomeCtrl as ctrl"
  });
  $stateProvider.state('planets', {
    url: "/planets",
    templateUrl: 'views/planets.html'
  });
  $stateProvider.state('blackholes', {
    url: '/blackholes',
    templateUrl: 'views/blackholes.html'
  });
  // Default view to show
  $urlRouterProvider.otherwise('/home');
});

Aqui, você definiu três visualizações. Uma delas (a visualização inicial) é especificada como o padrão.

Definindo o conteúdo da visualização

Crie uma pasta denominadacommon/views e, em seguida, um arquivo denominado common/views/home.html, depois preencha-o com este conteúdo:

<ion-view hide-back-button="true" title="Space!">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/NGC_4414_%28NASA-med%29.jpg">
        </ion-item>
        <ion-item>Full of wonderful things.  Take a look!</ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-icon-right item-icon-left" href="#/planets">
          <i class="icon ion-planet"></i>
          Planets
          <i class="icon ion-ios7-arrow-forward"></i>
        </ion-item>
        <ion-item class="item-icon-right item-icon-left" href="#/blackholes">
          <i class="icon ion-funnel"></i>
          Black Holes
          <i class="icon ion-ios7-arrow-forward"></i>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

Inclua um segundo arquivo, common/views/planets.html:

<ion-view title="Planets">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Jupiter</h2>
          <p>The largest planet in the solar system.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg">
        </ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Saturn</h2>
          <p>The second largest planet in the solar system.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Saturn_PIA06077.jpg">
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

Inclua um terceiro arquivo, common/views/blackholes.html:

<ion-view title="Black Holes">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Black Hole A</h2>
          <p>Simulated view of a black hole (center) in front of the Large
          Magellanic Cloud.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/BH_LMC.png">
        </ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Pictures are hard to find</h2>
          <p>"Well, the thing about a black hole - its main distinguishing
          feature - is it's black. And the thing about space - the colour of
          space, your basic space colour - is black. So how are you supposed
          to see them?" -- Holly, "Red Dwarf"</p>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

Visualizando seu aplicativo concluído

Visualize seu aplicativo novamente:

mfp build
mfp deploy
mfp preview

Faça download de um projeto MobileFirst Platform de exemplo com o código de trabalho deste arquivo.

Conclusão

Neste tutorial, você aprendeu como usar o Ionic para criar rapidamente um aplicativo híbrido usando o IBM MobileFirst Platform.


Recursos para download


Temas relacionados

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Desenvolvimento móvel, WebSphere
ArticleID=1025810
ArticleTitle=Usando Ionic para desenvolver rapidamente os aplicativos híbridos do IBM MobileFirst Platform
publish-date=01222016