Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic2 01-introduccion

911 views

Published on

Presentación inicial del curso de Ionic 2

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Ionic2 01-introduccion

  1. 1. http://cursosdedesarrollo.com/ Curso de Ionic 2 Unidad Didáctica 01: ¿Qué es Ionic 2?
  2. 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
  3. 3. http://cursosdedesarrollo.com/ Introducción Ionic 2 es la versión 2 del framework de desarrollo de aplicaciones multiplataforma http://ionic.io/
  4. 4. http://cursosdedesarrollo.com/ Introducción ¿En qué consiste la multiplataforma?
  5. 5. 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/
  6. 6. http://cursosdedesarrollo.com/ Introducción
  7. 7. 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…
  8. 8. 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/
  9. 9. http://cursosdedesarrollo.com/ Introducción Entonces. ¿Qué aporta Ionic a Cordova?
  10. 10. http://cursosdedesarrollo.com/ Introducción La diferencia son las plantillas y los componentes visuales que incorpora Ionic
  11. 11. http://cursosdedesarrollo.com/ Introducción
  12. 12. 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/
  13. 13. http://cursosdedesarrollo.com/ Componentes Principales ¿Qué tipos de componentes tenemos disponibles en Ionic?
  14. 14. http://cursosdedesarrollo.com/ Componentes Principales Aplicación Ionic 2 Components Google Play App Store
  15. 15. http://cursosdedesarrollo.com/ Componentes Principales
  16. 16. http://cursosdedesarrollo.com/ Componentes Principales
  17. 17. http://cursosdedesarrollo.com/ Componentes Principales
  18. 18. http://cursosdedesarrollo.com/ Componentes Principales Iconos: https://ionicframework.com/docs/v2/ionicons/
  19. 19. http://cursosdedesarrollo.com/ Componentes Principales
  20. 20. http://cursosdedesarrollo.com/ Componentes Principales
  21. 21. http://cursosdedesarrollo.com/ Componentes Principales
  22. 22. 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>
  23. 23. http://cursosdedesarrollo.com/ ¿Y el Control? Con los componentes visuales tenemos la posibilidad de gestionar la parte visual de la Aplicación
  24. 24. http://cursosdedesarrollo.com/ ¿Y el Control?
  25. 25. 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
  26. 26. 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
  27. 27. http://cursosdedesarrollo.com/ ¿Y el Control? ¿Qué características nos ofrece Angular 2 a nivel de Arquitectura?
  28. 28. http://cursosdedesarrollo.com/ ¿Y el Control?
  29. 29. 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
  30. 30. http://cursosdedesarrollo.com/ ¿Y el Control?
  31. 31. http://cursosdedesarrollo.com/ ¿Cómo empiezo? Lo mejor sería empezar a jugar un poco con http://ionic.io/products/creator
  32. 32. 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
  33. 33. http://cursosdedesarrollo.com/ ¿Cómo empiezo?
  34. 34. 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
  35. 35. http://cursosdedesarrollo.com/ ¿Cómo empiezo? Esta aplicación online es de pago en cuanto nos ponemos a trabajaron poco con ella
  36. 36. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? Lo suyo sería instalar Ionic en nuestro ordenador. ¿Qué necesitamos?
  37. 37. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué?
  38. 38. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? Descargamos NodeJS https://nodejs.org/es/download/
  39. 39. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? Instalamos NodeJS y nos aseguramos que está seleccionado NPM (NodeJS Package Manager)
  40. 40. 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
  41. 41. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? npm install -g ionic cordova
  42. 42. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? Una vez instalado el comando de ionic ya podemos empezar a crear un proyecto nuevo
  43. 43. 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
  44. 44. 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
  45. 45. 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…
  46. 46. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? El proyecto tiene la típica estructura de Cordova: hooks, platforms, plugins, www y config.xml
  47. 47. 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
  48. 48. http://cursosdedesarrollo.com/ Esto Mola ¿Y ahora qué? Cuando queramos probar el proyecto ejecutaremos: ionic serve
  49. 49. http://cursosdedesarrollo.com/ Demo Show time
  50. 50. http://cursosdedesarrollo.com/ ¿Preguntas? ¿Alguna Pregunta?
  51. 51. http://cursosdedesarrollo.com/ Conclusiones Hemos visto cuáles son las características principales de Ionic 2
  52. 52. http://cursosdedesarrollo.com/ Datos de Contacto http://www.cursosdedesarrollo.com david@cursosdedesarrollo.com
  53. 53. http://cursosdedesarrollo.com/ Licencia David Vaquero Santiago Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial- CompartirIgual 4.0 Internacional

×