Ionic2 01-introduccion

http://cursosdedesarrollo.com/
Curso de Ionic 2
Unidad Didáctica 01: ¿Qué es Ionic 2?

Índice de contenidos
• Introducción
• Componentes principales
• ¿Y el Control?
• ¿Cómo Empiezo?
• Esto Mola ¿Y Ahora Qué?
• Demo
• ¿Preguntas?
• Conclusiones

Introducción
Ionic 2 es la versión 2 del framework de desarrollo de
aplicaciones multiplataforma
http://ionic.io/

Introducción
¿En qué consiste la multiplataforma?

Introducción
Cordova es el framework que le permite a Ionic que
un mismo desarrollo pueda utilizarse para
empaquetar Apps
https://cordova.apache.org/

Introducción

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…

Introducción
Todos ellos están disponibles a través de los que se
llama Ionic Native
http://ionicframework.com/docs/v2/native/

Introducción
Entonces. ¿Qué aporta Ionic a Cordova?

Introducción
La diferencia son las plantillas y los componentes
visuales que incorpora Ionic

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/

Componentes Principales
¿Qué tipos de componentes tenemos disponibles en
Ionic?

Aplicación Ionic 2 Components
Google Play
App Store

Iconos:
https://ionicframework.com/docs/v2/ionicons/

Para utilizar este tipo de componentes visuales se
utilizan unas etiquetas especiales que ha generado
Ionic
Por ejemplo
<ion-menu>

¿Y el Control?
Con los componentes visuales tenemos la
posibilidad de gestionar la parte visual de la
Aplicación

¿Y el Control?

¿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

¿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

¿Y el Control?
¿Qué características nos ofrece Angular 2 a nivel de
Arquitectura?

¿Y el Control?
Todos los componentes visuales de Ionic 2 están
desarrollados con Angular 2 por lo que pueden se
modiﬁcados creando componentes Angular 2

¿Cómo empiezo?
Lo mejor sería empezar a jugar un poco con
http://ionic.io/products/creator

¿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

¿Cómo empiezo?

¿Cómo empiezo?
También nos permite probar nuestras aplicaciones
en el móvil mediante la app Ionic Creator
App Store
Google Play

¿Cómo empiezo?
Esta aplicación online es de pago en cuanto nos
ponemos a trabajaron poco con ella

Esto Mola ¿Y ahora qué?
Lo suyo sería instalar Ionic en nuestro ordenador.
¿Qué necesitamos?

Descargamos NodeJS
https://nodejs.org/es/download/

Instalamos NodeJS y nos aseguramos que está
seleccionado NPM (NodeJS Package Manager)

Después de la instalación de npm ya nos podemos
poner a instalar los necesario para que funcione
Ionic 2

npm install -g ionic cordova

Una vez instalado el comando de ionic ya podemos
empezar a crear un proyecto nuevo

ionic start Miproyecto tutorial —v2
Esto crea una carpeta nueva llamada MiProyecto con
la plantilla tutorial y con la versión 2 de Ionic

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

Esto nos creará el proyecto y podremos empezar a
trabajar con él con nuestro editor favorito:
Atom, Brackets, Webstorm, etc…

El proyecto tiene la típica estructura de Cordova:
hooks, platforms, plugins, www y conﬁg.xml

El código que más nos interesa ahora estará en www
Allí nos encontraremos los ﬁcheros HTML, CSS y JS
comunes a todas las plataformas del proyecto

Cuando queramos probar el proyecto ejecutaremos:
ionic serve

Demo
Show time

¿Preguntas?
¿Alguna Pregunta?

Conclusiones
Hemos visto cuáles son las
características principales
de Ionic 2

Datos de
Contacto
http://www.cursosdedesarrollo.com
david@cursosdedesarrollo.com

Licencia
David Vaquero Santiago
Esta obra está bajo una
Licencia Creative Commons
Atribución-NoComercial-
CompartirIgual 4.0 Internacional

Ionic2 01-introduccion

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Ionic2 01-introduccion

Semelhante a Ionic2 01-introduccion (20)

Mais de David Vaquero

Mais de David Vaquero (16)

Último

Último (16)

Ionic2 01-introduccion