Ionic Framework Construa aplicativos para todas as plataformas mobile - Casa do Codigo

Ionic Framework Construa aplicativos para todas as plataformas mobile - Casa do...

(Parte 1 de 4)

Table of Contents

ISBN Agradecimentos O autor Prefácio 1. Introdução 1.1 Instalações 1.2 Conclusão 2. Iniciando nossa aplicação 2.1 Command Line Interface e seus comandos básicos 2.2 Criando os artefatos 2.3 Testando a aplicação 2.4 Estrutura de pastas 2.5 Adicionando a plataforma Android 2.6 Compilando e instalando o aplicativo 2.7 Metendo a mão na massa 2.8 Conclusão 2.9 Para saber mais 3. Conhecendo os nossos arquivos 3.1 Um pouco de MVC 3.2 Separando o joio do trigo 3.3 O cardápio e o MVC 3.4 Conclusão

3.5 Para saber mais 4. Completando o menu 4.1 Estados 4.2 Conclusão 4.3 Para saber mais 5. Detalhando os itens 5.1 O protótipo 5.2 Camada de serviços 5.3 Criando os arquivos 5.4 Ordem na casa 5.5 Criando a tela genérica 5.6 Passando um parâmetro 5.7 Recuperando o parâmetro 5.8 Criando o serviço de detalhamento 5.9 Detalhando o item 5.10 Conclusão 5.1 Para saber mais 6. Fazendo pedidos 6.1 Os requisitos do aplicativo 6.2 Uma forma de guardar nossa sessão 6.3 Hora de injetar o value 6.4 Guardando os pedidos 6.5 Conclusão 6.6 Para saber mais 7. A bandeja

7.1 Elementos do modal 7.2 Vamos ter retrabalho 7.3 Editar os itens da bandeja 7.4 A função de confirmar edição 7.5 Exclusão de itens 7.6 Confirmando os pedidos 7.7 Conclusão 7.8 Para saber mais 8. A conta 8.1 Construção do template 8.2 Vamos dividir a conta 8.3 Pagar ou pedir? 8.4 Conclusão 8.5 Para saber mais 9. Usando a câmera 9.1 Instalação do plugin 9.2 Construção de artefatos 9.3 A câmera 9.4 Conclusão 9.5 Para saber mais 10. Recursos 10.1 O Firebase 10.2 Consumindo serviços 10.3 O cardápio modificado 10.4 ionicList

10.5 O ionicActionSheet 10.6 Dialog do ngCordova 10.7 Conclusão 10.8 Para saber mais

Sumário

Impresso e PDF: 978‐85‐5519‐288‐3 EPUB: 978‐85‐5519‐289‐0 MOBI: 978‐85‐5519‐290‐6

Você pode discutir sobre este livro no Fórum da Casa do Código: http://forum.casadocodigo.com.br/.

Caso você deseje submeter alguma errata ou sugestão, acesse:

http://erratas.casadocodigo.com.br.

Agradecimentos

A realização deste projeto tornou‐se possível e real com o apoio e confiança de algumas pessoas. Faço questão de deixar aqui o meu agradecimento a elas.

Em primeiro lugar, quero agradecer ao Adriano Almeida pela oportunidade e confiança na minha obra. À Vivian Matsui que foi fundamental para aprender e continuar aprendendo os macetes de uma boa escrita.

Agradeço à minha família pela paciência e compreensão incondicional, principalmente à minha filha Letícia por ter "cedido" o tempo em que poderíamos estarmos juntos, como também seu colo para descanso e relaxamento em momentos de estresse.

Este parágrafo não é um simples agradecimento, mas um intenso agradecimento e dedicação à memória de meus pais, principalmente minha mãe, falecida no mesmo ano de publicação, por ter deixado o legado de uma boa educação e ter me apoiado e incentivado a estudar TI para seguir a profissão onde me sinto realizado e feliz.

Figura ‐1.1: Adrian Gois

Em 1995 recebi de presente de minha querida e saudosa mãe meu primeiro computador com o SO Windows 95: um ITAUTEC equipado com um processador Pentium que fez me apaixonar à primeira vista pela tecnologia. A partir daí, comecei a ingressar no mundo da internet desde já, pesquisando como programar aquela máquina.

Fiz assim meus primeiros programas na linguagem Clipper e, logo em seguida, comecei a estudar HTML e JavaScript. Depois disto, nunca mais deixei de lado o fascínio por computadores. Assim me tornei bacharel em Ciência da Computação p ela UNIFACS/Salvador‐BA, fundei a empresa ABG TI SOLUTIONS http://www.abgsolucoes.com.br onde obtive experiência em Desenvolvimento de Sistemas em grandes empresas multinacionais, passando por linguagens como Java, JavaScript, C, C++, Delphi, entre outras que permeiam o mundo do desenvolvimento.

Hoje lidero uma equipe de TI em uma fábrica de software com arquiteturas diversas, passando por .NET até Microsoft SharePoint, com contratos em empresas de grande e médio porte. Desenvolvo projetos de aplicativos híbridos, utilizando a tecnologia deste livro.

Prefácio

Já parou para imaginar, enquanto você lê esta pequena frase, quantos smartphones estão sendo utilizados no mundo? Pois bem! Segundo a TeleGeography, em 2015 tínhamos 7,1 bilhões de c hips a tivos no m undo, ou s eja, q uase a q uantidade de habitantes do globo terrestre. Com isso, podemos inferir sobre o grande potencial de mercado que é o de smartphones e telefonia.

Com a invenção dos smartphones, surgiram tanto grandes como descartáveis ideias de aplicativos. No início, tudo era muito restrito ao desenvolvimento destas ideias em uma plataforma e, a partir de seu sucesso ou não, a migração do código para outras plataformas, principalmente na dupla iOS versus Android.

Por conta disto, surgiram os frameworks para compilação híbrida de aplicativos sendo desenvolvidos em uma única linguagem. Hoje, sabe‐se que isso é possível com a mesclagem de HTML, JavaScript e CSS, basicamente.

Dentro destes frameworks, o f oco d esta o bra é Ionic framework. Nele é p ossível u tilizar componentes responsivos e atrativos para o desenvolvimento dos aplicativos, c om a possibilidade d e c ompilação e f ácil i nstalação n as m ais d iversas plataformas – seja Windows Phone, Android, iOS, BlackBerry etc.

O livro é dividido em 10 capítulos, nos quais inicialmente é explanado sobre a instalação e preparação do ambiente de desenvolvimento e, em seguida, um capítulo dedicado a explicar os comandos básicos do framework. Posteriormente, vamos evoluindo na criação e entendimento dos artefatos do aplicativo e, a cada novo capítulo, temos novas inserções de componentes.

Ao final, dedico dois capítulos a recursos extras, como utilização da câmera do dispositivo, consumo de serviços do firebase do Google, entre outros recursos avançados.

Esta leitura levará você em uma viagem ao mundo do desenvolvimento de aplicativos, sem se preocupar com a plataforma nativa à qual ele será destinado, tornando as coisas mais fáceis para manutenção e evolução.

Público‐alvo

Este livro é direcionado aos desenvolvedores que já tenham, pelo menos, uma base em JavaScript, HTML5 e CSS. No decorrer do livro, mesmo o leitor não tendo experiência com as tecnologias que permeiam o Ionic, como AngularJS e Cordova/Phonegap, pretendo fazê‐lo alcançar um nível de conhecimento básico sobre todas elas.

É aconselhável também uma base de conhecimento em lógica de programação, para que se evolua no desenvolvimento de um Caso de uso q ue u tilizaremos c omo e xemplo p ara o s capítulos. Sendo assim, se já programou nessa tríade (HTML, JS e CSS) e quer iniciar no mundo de aplicativos com o Ionic Framework, não se preocupe, você está no lugar certo.

Código‐fonte

Durante a leitura deste livro, desenvolveremos um aplicativo denominado Cardápio Móvel e seu código fonte pode ser clonado através do link:

https://github.com/adriangois/codigo‐livro‐ionicframework.

Introdução

Com o nascimento dos dispositivos inteligentes, surgiu uma grande quantidade de Sistemas Operacionais. Com isso, surgia também a dificuldade em padronizar u ma l inha d e desenvolvimento de aplicações que fossem portáveis ou multiplataforma.

O Java ME, lançado em 1999, foi a plataforma criada da subdivisão do Java 2 (Java 1.2). Com o objetivo de integrar dispositivos limitados em termo de hardware, veio como promessa da já citada padronização, visto que todos os aplicativos rodariam em uma Máquina Virtual (VM – Virtual Machine), não importando em qual sistema/dispositivo estaria hospedado. Tudo isso provido pela portabilidade da tão crescente tecnologia Java.

Com o passar do tempo, em junho de 2007, a Apple Inc viria a anunciar o primeiro SmartPhone com seu iOS como Sistema Operacional Móvel. Consequentemente, o grupo Google criou o Sistema Operacional Android para dispositivos, baseado no núcleo do Linux. Além destes, outros nasceram no mesmo contexto, como por exemplo, Windows Phone e o Blackberry.

Com essa variedade de Sistemas Operacionais em uso no mundo, o leitor deve estar imaginando a dificuldade de agilizar o processo de desenvolvimento e compilação dos aplicativos, a fim de torná‐los portáveis para as distintas plataformas, sem que fosse necessário reprogramar na linguagem de programação nativa de cada dispositivo.

Uma luz no fim do túnel veio com o surgimento do HTML5, em que se criou uma segunda camada, que seria o intermediário entre a linguagem do sistema nativo ( iOS, A ndroid, Windows Phone, BlackBerry etc.) e a aplicação, construída basicamente em HTML5, CSS3 e JavaScript. Esta camada seria responsável pela compilação final do aplicativo, provendo à camada view (JavaScripts, CSS e HTML) os recursos da plataforma nativa (dispositivo para o qual estará sendo compilado).

Surgiu também o PhoneGap com o propósito de facilitar a vida de muitos desenvolvedores, disponibilizando acesso aos diversos hardwares (câmeras, GPS, acelerômetros) nos variados dispositivos móveis. Ou seja, tudo o que estaria disponível somente via linguagem nativa agora é possível acessar por meio de chamadas na linguagem JavaScript.

A imagem a seguir ilustra como funciona, na prática, o PhoneGap. Nele, a entrada é de um conjunto de artefatos na tríade já citada (HTML, CSS e JavaScript), passando por um build que gera no final o aplicativo na plataforma escolhida.

Figura 1.1: Processo de build do PhoneGap

Apesar d e o P honeGap n ão s er o p rincipal f oco d o l ivro, à m edida que formos implementando nosso caso de uso (um aplicativo de Cardápio Móvel que explicaremos mais à frente), nos familiarizaremos com ele utilizando alguns de seus plugins.

Dentro de todo este contexto e aprimorando mais o processo de desenvolvimento, em 2013 nasceu o Ionic Framework, mesclando outros frameworks já existentes, como o PhoneGap citado anteriormente e AngularJS. O Ionic é um open source SDK q ue u sa u m conceito chamado native‐feeling mobile apps, o que quer dizer desenvolvimento de aplicativos móveis com tecnologias web como, HTML, CSS e JavaScript.

O foco do framework é o front view dos aplicativos, ou seja, ele fornece componentes para o desenvolvimento da interface dos aplicativos, não sendo um substituto do PhoneGap (que foca no acesso aos recursos), por exemplo. Na prática, o Ionic nos fornece uma gama de componentes para serem utilizados na view, fazendo o controle através do AngularJS e, por fim, é compilado através do PhoneGap. Esta é a junção de vários frameworks para um fim específico.

No progresso de nossa leitura, vamos ver que, para estender a capacidade do aplicativo, usaremos o Cordova/Phonegap, que possibilita o acesso aos recursos do hardware, através da instalação de plugins. Com isto, nos preocupamos em construir, planejar e executar as tarefas por camadas, separando views, controllers e models. Isto é possível por causa da integração do Ionic com o AngularJS.

Veremos através dos capítulos a construção de uma aplicação de exemplo, a que daremos o nome de Cardápio Móvel, em que o leitor participará do planejamento (através de protótipos), construção, teste e implantação. Veremos também o aplicativo consumindo serviços, através de simulações de webservices e, no final, não mais uma simulação, mas o consumo de u m serviço na n uvem a través d o firebase que será explicado no capítulo Recursos.

A aplicação será baseada na seguinte situação: construiremos um aplicativo que nos forneça uma lista de produtos, com descrição, foto e preço dele. Esta aplicação seria uma forma de o proprietário de um restaurante disponibilizar, através de um serviço hospedado na nuvem, os produtos para os seus cardápios.

Além disto, o aplicativo deve permitir que os usuários façam pedidos, colocando‐os na bandeja, s imilar a u m carrinho de compras m uito u tilizado n os e‐commerces. Ao confirmar a bandeja, o pedido será enviado para o setor responsável q ue a tenderá o consumidor. O usuário também terá a possibilidade de pagar a conta parcial ou total, e/ou pedi‐la que seja encerrada e entregue na mesa.

Nas interfaces da aplicação, serão apresentados alguns componentes CSS do framework, bem como sua extensão AngujarJS, que fornece uma rica biblioteca de JavaScript para que toda a mágica funcione.

A cada nova funcionalidade, apresentaremos um protótipo do que se deseja alcançar ao final da construção. Isto facilitará a compreensão da leitura do capítulo, e se consagrará quando p usermos em p rática o c onhecimento adquirido, c hegando assim ao produto planejado.

O HTML5 chegou e, ao que parece, chegou para ficar como grande padronizador, sendo a linguagem de interfaces. Assim, ele deixa os recursos mais complexos e que estejam fora do contexto de UI (Interface de Usuário), para outras tecnologias e padrões. Vamos explorar este recurso ao máximo e nos familiarizar, pois, por ser o futuro (alguns já o consideram presente), vamos nos preparar agora.

Através dessa sopa de frameworks (Ionic, AngularJS e Phonegap/Cordova) é possível construir um aplicativo portável e funcional, não se preocupando com a sua linguagem de programação nativa, mas sim em desenvolver o visual e a lógica numa linguagem simples e universal na linguagem da web, o HTML.

Para entender melhor como surgiu a ideia de se mesclar tudo em um framework, criar aplicações rápidas e ter a facilidade de compilar para as variadas plataformas existentes, utilizando HTML5, JavaScript e CSS3, basicamente, vamos meter a mão na massa e instalar as ferramentas necessárias para iniciarmos nossa aplicação de exemplo.

Nos concentraremos em uma instalação a mbiente W indows + A ndroid. Isso não impede que o leitor possa trabalhar em outro ambiente e gerar a aplicações para iOS, Windows Phone ou qualquer outro de sua preferência, visto que este é exatamente o propósito do Ionic Framework.

Para iniciarmos o desenvolvimento de nossa aplicação de exemplo, devemos dispor das seguintes ferramentas:

Ionic Framework CLI (até a edição deste livro, a versão mais nova era a 1.3 ou Beta 2, mas vamos trabalhar com o 1.3);

Java Development Kit ‐ JDK (7 ou superior);

Android SDK;

Sublime Text (até a edição deste livro, a versão mais nova era a 3).

Vamos lá?!

1. Comece baixando a JDK no site da Oracle, em http://www.oracle.com/technetwork/java/javase/downloads/jdk8‐downloads‐ 2133151.html. Recomendamos que baixe a versão mais nova. Até a edição deste livro era a 8u102.

2. Tudo p ronto p ara o A ndroid S DK? F aça o d ownload e i nstale e m https://developer.android.com/studio/index.html.

3. Agora vamos ao NodeJS, em https://nodejs.org/en/download/. Instale e vamos partir para nossas dependências.

4. Depois de instalado o NodeJS, abra a linha de comando do Windows, do Linux ou do M ac O S, e i nstale o C ordova e o I onic, com o seguinte c omando: npm install -g cordova ionic.

Se tudo ocorreu bem, já estamos preparados para criarmos nossa primeira aplicação. No próximo capítulo, aprenderemos mais sobre a linha de comando do Ionic e , consequentemente, sobre o comando para gerar uma aplicação que servirá de base em todo o nosso livro. Vamos à diversão!

Para saber mais

1. Sobre as instalações do JDK e Android SDK, acesse http://www.oracle.com/technetwork/pt/java/javase/downloads/index.html E para o Developer Android em https://developer.android.com.

(Parte 1 de 4)

Comentários