www.devcode.la

  • Usar sus principales componentes de UI.

  • Entender el sistema de navegación (Pushing and Popping) y sus componentes de Navegación como Tabs, SideMenus, Modals, etc.

  • Manipular datos con ionic, Forms y validaciones.

  • Conectar a recursos nativos como Cámara y Geolocalización.

  • Distribución de tiendas Google Play & App Store

 

OBJETIVOS

www.devcode.la

 

  • Introducción

  • Navegación

  • Manipulación de datos

  • Native

  • Proyecto

Partes

Módulo 1: Introducción

¿Qué es ionic?

www.devcode.la

www.devcode.la

Usa cosas que sabes

El cambio llego con Angular

ES6 trae nuevas caracteristicas

 

“Hay Que hacer una app!”

Problemas de Native

  • Codigo separado y aislado
  • Desarrollo Costoso
  • Retorno Lento

http://showcase.ionicframework.com/apps/top

http://blog.ionicframework.com/tag/built-with/

SDK

www.devcode.la

Preparación de entorno

www.devcode.la

www.devcode.la

SO Android IOS
Window ✓ ✗
Mac ✓ ✓
Linux / Ubuntu ✓ ✗

Compilar

For Android

For IOS

Generando tu primer app

www.devcode.la

www.devcode.la


##Instalar

npm install -g ionic


##Comandos para Empezar 


ionic start appBlank blank --cordova
ionic start appSide sidemenu --cordova
ionic start appTabs tabs --cordova
cd yourApp
ionic serve --labs

Casos de uso

www.devcode.la

www.devcode.la

www.devcode.la

www.devcode.la

www.devcode.la

http://showcase.ionicframework.com/apps/top

http://blog.ionicframework.com/tag/built-with/

Módulo 2: Navegación

  1. 1. Push, Pop y setRoot.
  2. 2. Url parameters.
  3. 3. Tabs, Menus, Modal, Alerts.

www.devcode.la

https://github.com/DevcodeInc/Curso-de-ionic

Push, pop & setRoot

www.devcode.la

ionic start navigationApp blank --cordova
cd navigationApp
ionic g page page1
ionic g page page2
ionic g page page3
goToPage(){
  this.navCtrl.push('YourPage');
}
goBack(){
  this.navCtrl.pop();
}
goBack(){
  this.navCtrl.setRoot('YourPage');
}

Url parameters

this.nav.push('SomethingPage', {
  example1: data1,
  example2: data2
});
...
export class SomethingPage {
  constructor(nav: NavController, navParams: NavParams){
    this.navParams.get('example1');
  }
}
...
@IonicPage({
  name: 'detail-page',
  segment: 'detail/:id'
})
...

Dynamic Links

ionic start nav-components blank --cordova

Nav Components

Alerts

Docs

Modals

Docs

Tabs

Docs

Menus

Docs

Módulo 3: Datos

  1. 1. SDK for forms
  2. 2. Formularios.
  3. 3. REST API.

SDK for Forms

Formularios y Validaciones

REST API

HTTP CLIENT

Módulo 4: Native

  1. 1. ¿Qué es Cordova/Phonegap?
  2. 2. Plugins / Ionic Native
  3. 3. ¿Qué es capacitor?
  4. 4. Camara
  5. 5. Geolocation + Maps
  6.  

 

www.devcode.la

Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy

Build cross platform mobile apps with JavaScript and the Web

Native Progressive Web Apps with HTML, CSS, and JavaScript ​

www.devcode.la

Native: Camera

  1. Crear proyecto
  2. Agregar plataformas
  3. Instalar el plugin
  4. Agregar en AppModule
  5. Implementar
  6. Compilar

Native: Geolocation

  1. Crear proyecto
  2. Agregar plataformas
  3. Instalar el plugin
  4. Agregar en AppModule
  5. Implementar
  6. Compilar

Proyecto

  1. Crear la estructura
  2. Crear modelos
  3. Login & Register
  4. Home
  5. Search
  6. Gallery
  7. Filters
  8. Camera

Compilación & Distribución

  1. Generar Icono y Splash

  2. ID, nombre y versión

  3. Compilación para producción

  1. Generar la Llave

  2. Firmando la App

  3. Comprimiendo la App

  4. Verificar App

  5. Subiendo a Google Play

www.devcode.la

  1. Build

  2. Open XCode

  3. Crear Id

  4. Crear Certificado (CSR)

  5. Crear Provisonal Profile

  6. Upload

Gracias...

Made with Slides.com