starting-with-ionic

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

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: HTML5 que actua como nativo
Web stack encapsulado en una app nativa
Acceso a las capacidades del dispositivo (acelerometro, camara, contactos, etc.)
Entorno de desarrollo familiar (web stack)
Desarrollo de un solo code base

“Hola”

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

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 basicos
Crea estructura del proyecto
Herramientas preconfiguradas: Gulp, Sass, Bower, etc.
Servidor de desarrollo local con LiveReload
Build & run apps

Demo Time!

App de JSConfUY

Inicializar el proyecto

            $ ionic start myapp sidemenu
            $ cd myapp
            $ 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, libs, CSS, imágenes, etc.

Navegación

Layout Speakers

Mostrar listado de speakers de la conf
Skills de cada speaker
Link a charlas del speaker

Using ionic cards

Layout Venue

Donde es la conferencia?
Como llego?

Using google maps

Layout Agenda

Horarios y duracion de los eventos de ambos dias
Info de los eventos

Using ionic tabs

Acceso a datos

$resource, $http
Backend API, local json, BaaS (parse, firebase), etc

Super poderes

Get directions
Social share
Local notifications

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 comenzarionicframework.com/getting-started

Documentaciónionicframework.com/docs

Foro de la comunidadforum.ionicframework.com

Contribuí en GitHubgithub.com/driftyco/ionic

starting-with-ionic

djabif

starting-with-ionic

0 2 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

starting-with-ionic

Apps híbridas con AngularJS & Ionic

Agenda

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

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

Inicializar el proyecto

Estructura

Navegación

Layout Speakers

Using ionic cards

Layout Venue

Using google maps

Layout Agenda

Using ionic tabs

Acceso a datos

Super poderes

Sass

Dev tips!

Plataformas

Qué más nos da Ionic?

Mas recursos

0 2