Agenda

Objetivo

Introdução App Híbrida

AngularJS

Phonegap/Cordova

Ecossistema Ionic

Referências

Objetivo

Fazer uma breve introdução e entender como funciona o ecossistema do Ionic.

Qual a diferença Nativo x híbrido?

App Nativo

• Desenvolvidos para uma plataforma utilizando a linguagem e as APIs nativas do dispositivo;
• Bibliotecas do S.O do dispositivo;

Híbrido?

App Híbrido

• Site empacotado pelo Cordova
• Acessa WebView
• Acesso nativo a funcionalidades do S.O.

Nativo

• Maior custo
• Utiliza Java, Swifty, C#
• Maior equipe
• Melhor performance(mas nem tanto)

• Mais barato
• Utiliza HTML, CSS, JS
• Desenvolvimento mais rápido
• Multiplataforma

Híbrido

Frameworks

Ionic usa

• HTML5 que se parece com nativo
• Web envolvido por uma camada nativa
• Acesso direto às APIs nativas
• Ambiente de desenvolvimento web familiar

Porque usar?

• Porque é simples, rápido e fácil criar
• Suporte Angular Js
• Suporte Cordova
• SPA com transições de telas

Benefícios

• Curva de aprendizado menor que o nativo;
• Distribuição para múltiplas plataformas utilizando-se um único código
• Baixo custo;
• Desenvolvimento rápido;

Desvantagens

• Performance
• Incompatibilidade entre plugins

Apps feitos com Ionic

Ambiente

• Encapsula a aplicação em HTML, Javascript e CSS em um escopo nativo, com isso podemos acessar as funções do dispositivo via Javascript API.

• Framework front-end web
  • MVC / MVW

• Executa no browser

• Completo para CRUDs

• Separação lógica, alta abstração

• Customização de componentes HTML

• Mantido pela Google

• Controller: Responsavel pelo que a view consome
• Scope: Faz mediação entre View e Controller

Injeção de Dependência

• Criar componentes
• Resolver suas dependências
• Fornece a outros componentes
• Evitar dependências manuais (new)
• A dependência é simplesmente entregue ao componente

meuModulo.controller('MyController', ['$scope', 'greeter', 
    function($scope, greeter) {
          }
]);

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ['$scope', 'greeter'];

someModule.controller('MyController', function($scope, greeter) { // ... }); 

Ionic Framework

Ionic Cli

$ npm install -g cordova ionic
$ ionic start minhaAplicacao tabs
$ cd minhaAplicacao 
$ ionic serve
$ ionic build ios android
$ ionic emulate ios android

Templates

Estrutura ionic

Tasks do Gulp a serem executadas por $ ionic  prepare

Plataformas suportadas pela aplicação. Ex:  android e ios

Plugins utilizados pelo  aplicativo ex: OAuth

Pasta de arquivos sass

Pasta principal do projeto. Htmls, css, js, Libs

Gerencia os pacotes do bower

Contém algumas configurações do projeto

Arquivo com tasks de automatização

Algumas informações do projeto

Dependências do Gulp e de alguns plugins

Ecossistema 

• Ionic CLI
• Componentes
• Ionic Push
• Ionic Platform
• Ionic View
• Ionic Lab

Ionic Lab

ionic serve --lab

Componentes

Componentes

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  <a class="item" href="#">
    Kit Kat
  </a>

  ...

</div>

List

Componentes

Form

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

Componentes

<ion-tabs>

  <ion-tab title="Home" icon="ion-ios-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-ios-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Navigation

Componentes

<ion-spinner></ion-spinner>

<ion-spinner icon="dots"></ion-spinner>

<ion-spinner class="spinner-light"></ion-spinner>

Spinner

Componentes

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      This is a "Facebook" styled Card. The header is created
    from a Thumbnail List item,the content is from a card-body consisting
    of an image and paragraph text. The footer consists of tabs, icons
     aligned left, within the card-footer.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

</div>

Cards

Mais de 700 MIT licenciado font-icons incluídos

ionicons.com

Icones

Ionic View

Compartilhe seus aplicativos

$ ionic upload
$ ionic share email@gmail.com

ngCordova plugins

http://ngcordova.com/docs/plugins/

Push Notification

module.controller('PictureCtrl', function($scope, $cordovaCamera) {

  document.addEventListener("deviceready", function () {

    var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });

  }, false);
});

$ cordova plugin add cordova-plugin-camera

Camera plugin

Gerando APK

Gerando APK

Gerando o certificado

$ keytool -genkey -v -keystore SEU-APP.keystore -alias SEU-APP
 -keyalg RSA -keysize 2048 -validity 10000

Adicionando a plataforma Android ao projeto

$ ionic platform add android
$ cordova build android
	

Assinando o APK

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore 
SEU-APP.keystore android-release-unsigned.apk ondecotar

Alinhando o APK

		
$ zipalign -v 4 android-release-unsigned.apk signed.apk

Gerando APK

Conclusão

• Nativo x Híbrido

• Tipos de Aplicativos

• Arquitetura Ionic

• Ecossistema ionic

• Publicação App

Onde aprender mais?

• https://ionicframework.com/docs/
• www.angularjs.org
• http://www.andrefelizardo.com.br/blog/ionic-creator-exportando-e-gerando-apk/
• http://netcoders.com.br/blog/publicando-um-aplicativo-hibrido-com-ionic-framework-na-google-play/

Obrigada!

Danielle Teixeira

https://slides.com/danielleteixeira/aplicativos_com_ionic/

https://github.com/dannyserena