Curso de

www.devcode.la

www.devcode.la

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

 

  • Módulo 1: Introducción

  • Módulo 2: Navegación

  • Módulo 3: Manipulación de datos

  • Módulo 4: Native

  • Módulo 5: Proyecto (ionGram)

MÓDULOS

www.devcode.la

Vamos a crear un clon pequeño de Instagram con las funcionalidades de:

  • Tomar fotos
  • Crear componentes de UI
  • Filtros en fotos
  • Geolocalización
  • Login

PROYECTO

www.devcode.la

 

  • Computador personal.

  • Conocimiento básico en Angular 2+

  • Editor de código. (Recomendado VSCode)

  • Chrome

  • NodeJS

  • Android SDK

  • Xcode (Mac)

REQUESITOS

www.devcode.la

DOCENTE

www.devcode.la

Módulo 1: Introducción

www.devcode.la

¿Qué es ionic?

www.devcode.la

www.devcode.la

www.devcode.la

Web Technologies You Already

Know & Love

www.devcode.la

JavaScript has changed

Ionic 1 was built with ES5

ES6 brings many new features

NG2 is pushing for ES6

Different look, but all JS Classes

www.devcode.la

“I want to build an app!”

www.devcode.la

More Platforms. More Problems.

  • Proficiency in each platform required
  • Entirely separate code bases
  • Timely & expensive development
  • Diminishing returns

www.devcode.la

www.devcode.la

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

www.devcode.la

SO Android IOS
Window
Mac
Linux / Ubuntu

Build

Generando tu primer app

www.devcode.la

www.devcode.la

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

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

www.devcode.la

  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

www.devcode.la

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

www.devcode.la

Modals

www.devcode.la

Tabs

www.devcode.la

Menus

www.devcode.la

Módulo 3: Datos

www.devcode.la

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

SDK for Forms

www.devcode.la

www.devcode.la

www.devcode.la

Formularios y Validaciones

www.devcode.la

REST API

HTTP CLIENT

www.devcode.la

Módulo 4: Native

www.devcode.la

  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

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

www.devcode.la

Build cross platform mobile apps with JavaScript and the Web

Native Progressive Web Apps with HTML, CSS, and JavaScript 

www.devcode.la

Native: Camera

www.devcode.la

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

Native: Geolocation

www.devcode.la

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

Proyecto

www.devcode.la

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

www.devcode.la

Compilación & Distribución

www.devcode.la

  1. Generar Icono y Splash

  2. ID, nombre y versión

  3. Compilación para producción

www.devcode.la

  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

www.devcode.la

www.devcode.la

www.devcode.la

www.devcode.la

Gracias...

Curso de ionic 3

By devcodela

Curso de ionic 3

  • 1,589