Apps híbridas con Ionic & AngularJS

Agenda

  1. Ionic Intro
    • apps nativas vs. apps híbridas
    • ¿qué es Ionic?
  2. Demo
    • init
    • build
    • deploy
    • showcase
    • dev tips

Requerimientos

https://github.com/startapplabs/jsconfuy#requirements

Desventajas de las Apps Nativas

  • Experiencia requerida para cada plataforma
  • Code base totalmente distinto (Java, Objective C, Swift)
  • Ciclos de desarrollo largos y costosos

Más plataformas, más problemas

Por qué aun seguimos programando para múltiples plataformas?

“Hay alguna alternativa?”
  • Apps híbridas: Web stack encapsulado en una app nativa
  • Acceso a las capacidades del dispositivo (acelerometro, camara, contactos, etc.)
  • Cordova plugins
  • Desarrollo de un solo code base

Tecnologías web que ya usas y dominas

AngularJS FTW!

  • Usado para desarrollo de webapps de gran escala
  • Extiende el vocabulario de HTML
  • Componentes UI son directivas y servicios de angular

Enfoque Nativo

  • Basado en SDKs Nativos
  • Construido para trabajar con Cordova
  • Desarrollas una sola vez, compilas para varias plataformas

Alto rendimiento

  • Animaciones aceleradas por Hardware
  • Mínima manipulación del DOM
  • No usa jquery

Diseño

  • Limpio, sencillo y funcional
  • Usa CSS y SASS
  • Variables - fácil de customizar

Ionicons

Más de 700 íconos con licencia MIT

ionicons.com

“Cómo se integra todo esto?”
Tu App
Ionic
AngularJS
WebView (Cordova)
Native SDK

Por qué usar Ionic?

Componentes de UI

Listas





  

    Candy Bars
  


  
    Butterfinger
  

  
    Kit Kat
  

  ...

Listas mas complejas

  • Directiva en AngularJS
  • Los botones tienen swipe
  • Re ordenar
  • Eliminar



  
    List Item {{ item.id }}

Collection Repeat

  • Similar a Angular ng-repeat
  • Inspirado en UICollectionView de iOS
  • Scroll con miles de items
  • Solo renderea los items visibles
  • Scrolling suave y perfecto



  

    
{{ c.name }}

    
{{ c.email }}

Navegación

  • Usa AngularUI Router
  • Pone el back button cuando es posible
  • Las transiciones toman la direccion de la navegacion
  • Compatible con el back button de Android


  
    Back

Tabs

  • Vistas anidadas
  • Cada tab tiene su propio historial de navegación
  • Estados abstractos en AngularUI Router

Menu lateral




  

    

  

  

    
      
Left Menu

    

    
      ...

Slide Box



  
    Slide 1
  
  
    Slide 2
  
  
    Slide 3

Action Sheet

  • Servicio de AngularJS
  • Inject into controllers

$ionicActionSheet.show({
  titleText: 'Action Sheet Example',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Popover

  • AngularJS Service
  • Inline or external template

$ionicPopover.fromTemplateUrl('popover.html',
  function(popover) {
    $scope.popover = popover;
  }
);


  
    
My Popover Title

  
  
    Hello!

Modal

  • AngularJS Service
  • Inline or external template

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope
}).then(function(modal) {
  $scope.modal = modal;
});

Pull to Refresh





                          $ npm install -g ionic

                           _             _
                          (_)           (_)
                           _  ___  _ __  _  ___
                          | |/ _ \| '_ \| |/ __|
                          | | (_) | | | | | (__
                          |_|\___/|_| |_|_|\___|  CLI
  • Inicializa el proyecto usando templates básicos
  • Crea estructura del proyecto
  • Herramientas preconfiguradas: Gulp, Sass, Bower, etc.
  • Servidor de desarrollo local con LiveReload
  • Build & run apps
  • Otras herramientas

Demo Time!

App de JSConfUY
https://github.com/startapplabs/jsconfuy

Inicializar el proyecto

            $ ionic start jsconfuy sidemenu
            $ cd jsconfuy
            $ ionic setup sass
            $ ionic serve

Estructura


├── bower.json     // dependencias de bower
├── config.xml     // configuraciones de cordova
├── gulpfile.js    // tareas de gulp
├── hooks          // hooks custom de cordova
├── ionic.project  // configuracion de ionic
├── package.json   // dependencias de node
├── platforms      // donde van a estar los builds de iOS/Android respectivamente
├── plugins        // donde se van a instalar los plugins de cordova/ionic
├── scss           // código sass
└── www            // aplicación - JS, HTML, libs, CSS, imágenes, etc.

Navegación

Layout Speakers

  • Mostrar listado de speakers de la conf
  • Link a charla del speaker
  • Link a perfiles sociales



Using ionic cards

Layout Venue

  • Dónde es la conferencia?



Layout Agenda

  • Horarios y duración de los eventos de ambos dias
  • Info de los eventos



Using ionic tabs

Acceso a datos

  • Usando controllers y servicios de angular
  • $resource, $http
  • Backend API, local json, BaaS (parse, firebase), etc

Cordova plugins & more

  • Social share
  • inAppBrowser
  • Ionic UX components
    • loader
    • slidebox

Sass

  • Mixins
  • Variables

Dev tips!

  • Chrome console
  • Remote debugging
  • Ionic live reload
  • Ionic comparison view

Plataformas

  • Android
    1. $ionic add platform android
    2. $ionic build android
  • iOS
    1. $ionic add platform ios
    2. $ionic build ios

Qué más nos da Ionic?

  • Ionic view
  • Ionic push
  • Ionic creator
  • Ionic analytics
  • Ionic deploy

Mas recursos


Guía para comenzar
ionicframework.com/getting-started


Documentación
ionicframework.com/docs


Foro de la comunidad
forum.ionicframework.com


Contribuí en GitHub
github.com/driftyco/ionic