Apps híbridas con AngularJS & Ionic

Agenda

Ionic Intro

apps nativas vs. apps híbridas
¿qué es Ionic?

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

<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>

Listas mas complejas

Directiva en AngularJS
Los botones tienen swipe
Re ordenar
Eliminar

<ion-list>

  <ion-item ng-repeat="item in items" item="item">
    List Item {{ item.id }}
  </ion-item>

</ion-list>

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

<div class="list">
  <div collection-repeat="c in contacts">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

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

<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

Tabs

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

<ion-tabs>

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

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

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

</ion-tabs>

Menu lateral

<ion-side-menus>

  <ion-side-menu-content>

    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-side-menu-content>

  <ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>

    <ion-content>
      ...
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

Slide Box

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

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;
  }
);

<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">My Popover Title</h1>
  </ion-header-bar>
  <ion-content class="padding">
    Hello!
  </ion-content>
</ion-popover-view>

Modal

AngularJS Service
Inline or external template

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

Pull to Refresh

<ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh..." refreshing-text="Refreshing!" refreshing-icon="ion-loading-c">
</ion-refresher>


                          $ 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

$ionic add platform android
$ionic build android

iOS

$ionic add platform ios
$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

Apps híbridas con Ionic & AngularJS

Agenda

Requerimientos

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

Desventajas de las Apps Nativas

Más plataformas, más problemas

Tecnologías web que ya usas y dominas

AngularJS FTW!

Enfoque Nativo

Alto rendimiento

Diseño

Ionicons

Por qué usar Ionic?

Listas

Listas mas complejas

Collection Repeat

Navegación

Tabs

Menu lateral

Slide Box

Action Sheet

Popover

Modal

Pull to Refresh

Demo Time!

App de JSConfUY

https://github.com/startapplabs/jsconfuy

Inicializar el proyecto

Estructura

Navegación

Layout Speakers

Using ionic cards

Layout Venue

Layout Agenda

Using ionic tabs

Acceso a datos

Cordova plugins & more

Sass

Dev tips!

Plataformas

Qué más nos da Ionic?

Mas recursos