ionic2 01-introduccion
TRANSCRIPT
http://cursosdedesarrollo.com/
Curso de Ionic 2Unidad Didáctica 01: ¿Qué es Ionic 2?
http://cursosdedesarrollo.com/
Índice de contenidos• Introducción
• Componentes principales
• ¿Y el Control?
• ¿Cómo Empiezo?
• Esto Mola ¿Y Ahora Qué?
• Demo
• ¿Preguntas?
• Conclusiones
http://cursosdedesarrollo.com/
Introducción
Ionic 2 es la versión 2 del framework de desarrollo de aplicaciones multiplataforma
http://ionic.io/
http://cursosdedesarrollo.com/
Introducción
¿En qué consiste la multiplataforma?
http://cursosdedesarrollo.com/
Introducción
Cordova es el framework que le permite a Ionic que un mismo desarrollo pueda utilizarse para
empaquetar Apps
https://cordova.apache.org/
http://cursosdedesarrollo.com/
Introducción
Debido a Cordova podemos utilizar los recursos disponibles en un dispositivo móvil: Galería de Fotos,
Geolocalización, Acelerómetros, Cámara, etc…
http://cursosdedesarrollo.com/
Introducción
Todos ellos están disponibles a través de los que se llama Ionic Native
http://ionicframework.com/docs/v2/native/
http://cursosdedesarrollo.com/
Introducción
Entonces. ¿Qué aporta Ionic a Cordova?
http://cursosdedesarrollo.com/
Introducción
La diferencia son las plantillas y los componentes visuales que incorpora Ionic
http://cursosdedesarrollo.com/
Introducción
La gente de Ionic ha desarrollado estos componentes visuales para facilitar el desarrollos de
los interfaces de Apps
http://ionicframework.com/docs/v2/components/
http://cursosdedesarrollo.com/
Componentes Principales
¿Qué tipos de componentes tenemos disponibles en Ionic?
http://cursosdedesarrollo.com/
Componentes Principales
Aplicación Ionic 2 Components
Google Play
App Store
http://cursosdedesarrollo.com/
Componentes Principales
Iconos:
https://ionicframework.com/docs/v2/ionicons/
http://cursosdedesarrollo.com/
Componentes Principales
Para utilizar este tipo de componentes visuales se utilizan unas etiquetas especiales que ha generado
Ionic
Por ejemplo
<ion-menu>
http://cursosdedesarrollo.com/
¿Y el Control?
Con los componentes visuales tenemos la posibilidad de gestionar la parte visual de la
Aplicación
http://cursosdedesarrollo.com/
¿Y el Control?
Angular 2 es el componente de control que tiene Ionic 2, está escrito en TypeScript una evolución de
Javascript ES5/6
http://cursosdedesarrollo.com/
¿Y el Control?
El compilador de TypeScript compila a Javascript ES5 que es el que usan actualmente los
navegadores y cuando se actualice a ES6 ya estaremos preparados
http://cursosdedesarrollo.com/
¿Y el Control?
¿Qué características nos ofrece Angular 2 a nivel de Arquitectura?
http://cursosdedesarrollo.com/
¿Y el Control?
Todos los componentes visuales de Ionic 2 están desarrollados con Angular 2 por lo que pueden se
modificados creando componentes Angular 2
http://cursosdedesarrollo.com/
¿Cómo empiezo?
Lo mejor sería empezar a jugar un poco con
http://ionic.io/products/creator
http://cursosdedesarrollo.com/
¿Cómo empiezo?
Ésta herramienta online nos permite hacer una pequeña maqueta con la que podemos crear el
esqueleto de una App usando Ionic
http://cursosdedesarrollo.com/
¿Cómo empiezo?
También nos permite probar nuestras aplicaciones en el móvil mediante la app Ionic Creator
App Store
Google Play
http://cursosdedesarrollo.com/
¿Cómo empiezo?
Esta aplicación online es de pago en cuanto nos ponemos a trabajaron poco con ella
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Lo suyo sería instalar Ionic en nuestro ordenador.
¿Qué necesitamos?
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Descargamos NodeJS
https://nodejs.org/es/download/
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Instalamos NodeJS y nos aseguramos que está seleccionado NPM (NodeJS Package Manager)
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Después de la instalación de npm ya nos podemos poner a instalar los necesario para que funcione
Ionic 2
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
npm install -g ionic cordova
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Una vez instalado el comando de ionic ya podemos empezar a crear un proyecto nuevo
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
ionic start Miproyecto tutorial —v2
Esto crea una carpeta nueva llamada MiProyecto con la plantilla tutorial y con la versión 2 de Ionic
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Hay 4 plantillas principales:
tabs: es la plantilla por defecto
sidemenu: tiene un menú lateral
tutorial: plantilla utilizada en el tutorial
blank: plantilla en blanco
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Esto nos creará el proyecto y podremos empezar a trabajar con él con nuestro editor favorito:
Atom, Brackets, Webstorm, etc…
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
El proyecto tiene la típica estructura de Cordova: hooks, platforms, plugins, www y config.xml
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
El código que más nos interesa ahora estará en www
Allí nos encontraremos los ficheros HTML, CSS y JS comunes a todas las plataformas del proyecto
http://cursosdedesarrollo.com/
Esto Mola ¿Y ahora qué?
Cuando queramos probar el proyecto ejecutaremos:
ionic serve
http://cursosdedesarrollo.com/
ConclusionesHemos visto cuáles son las características principales
de Ionic 2
http://cursosdedesarrollo.com/
Datos de Contacto
http://www.cursosdedesarrollo.com [email protected]
http://cursosdedesarrollo.com/
LicenciaDavid Vaquero Santiago
Esta obra está bajo una Licencia Creative Commons
Atribución-NoComercial-CompartirIgual 4.0 Internacional