ionic y angular.js
TRANSCRIPT
![Page 1: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/1.jpg)
Aplicaciones Hibridas
Sergio Iván Mayor
![Page 2: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/2.jpg)
![Page 3: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/3.jpg)
• Framework javascript basado en el patrón MVC para el frontend de las aplicaciones web.
• Permite crear aplicaciones de pagina única.• Cambio la vida del programador, la visión y
el enfoque de programación en el DOM.• Pertenece al stack llamado MEAN.
![Page 4: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/4.jpg)
• Construir vistas a partir de datos.• Los datos son modificados por vistas.• La aplicación consume datos de una REST
API.• Demasiado javascript en la aplicación.
¿Cuándo usar ?
![Page 5: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/5.jpg)
• Modelos.• Vistas.• Controladores.• Servicios y filtros.• Variables scope.
Conceptos básicos
![Page 6: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/6.jpg)
![Page 7: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/7.jpg)
• Framework gratuito y de código abierto.• Desarrollo de aplicaciones hibridas.• Optimizado con AngularJs.• Corre sobre Cordova.
![Page 8: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/8.jpg)
• Alto rendimiento.• Mínima manipulación del DOM.• Transiciones por Hardware.• AngularJs es su mejor amigo.• Diseño sencillo, funcional y
multiplataforma.
Características de
![Page 9: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/9.jpg)
![Page 10: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/10.jpg)
• Herramienta de la nube que proporciona diversos servicios.– Sincronizar datos de aplicaciones en
tiempo real.– Hosting de aplicaciones.
• Dispone de una API muy potente.
![Page 11: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/11.jpg)
• Facil implementación.• Sincronización instantánea.• Trabaja cuando el dispositivo esta offline.• Los datos se guardan en JSON.• Permite la autenticación con redes sociales.
Características de
![Page 12: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/12.jpg)
![Page 13: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/13.jpg)
• Librería de AngularJS y Firebase para la conexión a este ultimo.
• Se encarga de administrar y tercerizar las conexiones con Firebase desde la aplicación Angularjs.
• Reduce muchas líneas de código para la conexión.
• Aunque integra el framework y el servicio, es necesario instanciar en la app los tres por separado.
![Page 14: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/14.jpg)
Ya esta la aplicación pero no es móvil … ¿Que
hago?
![Page 15: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/15.jpg)
Historia
![Page 16: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/16.jpg)
• Framework de código abierto.• Cuenta con muchas APIS para convertir el
desarrollo web en aplicación hibrida pero con enfoque nativo.
• Permite compilar aplicaciones para muchas plataformas con un solo desarrollo.
![Page 17: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/17.jpg)
Componentes soportados
![Page 18: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/18.jpg)
• Servicio en la nube de Adobe.• Compila la aplicación web en múltiples
plataformas.• Para ingresar, se debe tener cuenta en
Github o en Adobe.• Existen dos planes; uno gratuito y el otro
pago.
![Page 19: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/19.jpg)
Trabajo en equipo
![Page 20: Ionic y angular.js](https://reader035.vdocument.in/reader035/viewer/2022062821/58a0500c1a28ab39648b6b05/html5/thumbnails/20.jpg)
… Muchas gracias …
Vamos a la practica.