Introdução ao aplicativo Ionic
Gravando seu aplicativo Ionic
Incluindo conteúdo no aplicativo
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.
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.
Crie um novo projeto MobileFirst denominado ToolsProject e um aplicativo híbrido denominado AmazingApp. Inclua um ambiente Android no aplicativo:
Daqui em diante, execute todos os comandos no diretório IonicProject/apps/AmazingApp .
Incluindo arquivos Ionic em seu aplicativo
É possível também usar Bower e wiredep para instalar o Ionic e suas dependências. Para obter mais informações, consulte o artigo developerWorks Usando Bower e wiredep para acelerar a inclusão de dependência nos aplicativos híbridos do IBM MobileFirst Platform.
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:
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:
O projeto Ionic fornece um pacote conveniente denominado ionic.bundle.js para ajudar a carregar um ambiente básico do Ionic. Ele contém:
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:
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.
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
Figura 2. Barra lateral do aplicativo
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:
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:
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:
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:
Executar o aplicativo pela primeira vez:
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.
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:
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:
Inclua um segundo arquivo, common/views/planets.html:
Inclua um terceiro arquivo, common/views/blackholes.html:
Visualizando seu aplicativo concluído
Visualize seu aplicativo novamente:
Faça download de um projeto MobileFirst Platform de exemplo com o código de trabalho deste arquivo.
Neste tutorial, você aprendeu como usar o Ionic para criar rapidamente um aplicativo híbrido usando o IBM MobileFirst Platform.
Recursos de desenvolvimento móvel
Informações gerais sobre Ionic, incluindo downloads, introdução e fórum.
Criando aplicativos AngularJS
Informações gerais sobre AngularJS, incluindo downloads e introdução.
Usando Bower e wiredep para acelerar a inclusão de dependência nos aplicativos híbridos do IBM MobileFirst Platform
É possível também usar Bower e wiredep para instalar o Ionic e suas dependências. Consulte este artigo developerWorks para obter mais informações.
Zona de desenvolvimento para mobilidade IBM developerWorks
Downloads, tutoriais, informações do produto e outros recursos mais recentes para ajudá-lo a desenvolver aplicativos móveis no âmbito empresarial com uma variedade de ferramentas móveis, incluindo o IBM MobileFirst Platform.
Uma ampla gama de recursos para ajudar você a iniciar o desenvolvimento móvel usando o IBM MobileFirst Platform, incluindo a descrição da plataforma, tutoriais, fóruns e documentação.
Página do produto IBM MobileFirst Platform
Uma visão geral do IBM MobileFirst Platform, incluindo descrições de produtos, estudos de caso, downloads e outros recursos para desenvolvedores.
Centro de informações do IBM MobileFirst Platform
Um único portal para toda a documentação IBM MobileFirst Platform, com informações conceituais, de tarefa e de referência sobre a instalação, configuração e uso do IBM MobileFirst Platform para desenvolvimento e implementação de dispositivos móveis.
recursos developerWorks
Recursos técnicos para desenvolvedores que usam o WebSphere e os produtos de middleware relacionados. Inclui downloads, informações de instruções, recursos de suporte e uma biblioteca técnica gratuita de tutoriais, melhores práticas, IBM Redbooks e manuais de produtos.
Downloads de avaliação sem encargos para os produtos IBM selecionados ® DB2®, Lotus®, Rational®, Tivoli® e WebSphere® .
Eventos técnicos para desenvolvedores
Conferências, seminários e eventos técnicos para aprofundar o seu conhecimento técnico e ajudá-lo a ter sucesso em seus projetos de software.
ArticleID=1025810
ArticleTitle=Usando Ionic para desenvolver rapidamente os aplicativos híbridos do IBM MobileFirst Platform