SlideShare una empresa de Scribd logo
1 de 20
Descargar para leer sin conexión
Aplicaciones
Hibridas
Sergio Iván Mayor
• 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.
• 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 ?
• Modelos.
• Vistas.
• Controladores.
• Servicios y filtros.
• Variables scope.
Conceptos básicos
• Framework gratuito y de código abierto.
• Desarrollo de aplicaciones hibridas.
• Optimizado con AngularJs.
• Corre sobre Cordova.
• 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
• Herramienta de la nube que proporciona diversos
servicios.
– Sincronizar datos de aplicaciones en tiempo real.
– Hosting de aplicaciones.
• Dispone de una API muy potente.
• 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
• 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.
Ya esta la aplicación pero no es
móvil … ¿Que hago?
Historia
• Framework de código abierto.
• Cuenta con muchasAPIS para convertir el desarrollo
web en aplicación hibrida pero con enfoque nativo.
• Permite compilar aplicaciones para muchas
plataformas con un solo desarrollo.
Componentes soportados
• 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.
Trabajo en equipo
… Muchas gracias …
Vamos a la practica.

Más contenido relacionado

La actualidad más candente

AngularJS & Front-End Technologies
AngularJS & Front-End Technologies AngularJS & Front-End Technologies
AngularJS & Front-End Technologies Cristián Cortéz
 
Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2Ignacio Muñoz Vicente
 
Consideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativasConsideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativasSoftware Guru
 
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de IngenieríaNativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de IngenieríaJorge Ventura
 
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones MóvilesLos Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones MóvilesEanMusk
 
Firebase, la suite completa para convertir tu app en un éxito
Firebase, la suite completa para convertir tu app en un éxitoFirebase, la suite completa para convertir tu app en un éxito
Firebase, la suite completa para convertir tu app en un éxitoJorge Ventura
 
Creando apps móviles en React Native
Creando apps móviles en React NativeCreando apps móviles en React Native
Creando apps móviles en React NativeBelatrix Software
 
Kendo UI - Potencia tu Web
Kendo UI - Potencia tu WebKendo UI - Potencia tu Web
Kendo UI - Potencia tu WebDavid Gonzalo
 
PhoneGap 2.1.0 Morelia
PhoneGap 2.1.0 MoreliaPhoneGap 2.1.0 Morelia
PhoneGap 2.1.0 MoreliaDaniel Ramos
 
Introducción al desarrollo de aplicaciones Xamarin
Introducción al desarrollo de aplicaciones XamarinIntroducción al desarrollo de aplicaciones Xamarin
Introducción al desarrollo de aplicaciones XamarinJavier Suárez Ruiz
 
Taller mobile by trustparency
Taller mobile by trustparencyTaller mobile by trustparency
Taller mobile by trustparencytrustparency
 
Desarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta PhonegapDesarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta PhonegapCongresoWeb
 
Visual Studio 2017 Launch Event Sevilla
Visual Studio 2017 Launch Event SevillaVisual Studio 2017 Launch Event Sevilla
Visual Studio 2017 Launch Event SevillaJavier Suárez Ruiz
 

La actualidad más candente (20)

AngularJS & Front-End Technologies
AngularJS & Front-End Technologies AngularJS & Front-End Technologies
AngularJS & Front-End Technologies
 
Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2
 
Consideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativasConsideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativas
 
Apps web vs apps nativas
Apps web vs apps nativasApps web vs apps nativas
Apps web vs apps nativas
 
React native
React nativeReact native
React native
 
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de IngenieríaNativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
 
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones MóvilesLos Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
 
introducción a xamarin
  introducción a xamarin  introducción a xamarin
introducción a xamarin
 
Firebase, la suite completa para convertir tu app en un éxito
Firebase, la suite completa para convertir tu app en un éxitoFirebase, la suite completa para convertir tu app en un éxito
Firebase, la suite completa para convertir tu app en un éxito
 
Creando apps móviles en React Native
Creando apps móviles en React NativeCreando apps móviles en React Native
Creando apps móviles en React Native
 
Kendo UI
Kendo UIKendo UI
Kendo UI
 
Kendo UI - Potencia tu Web
Kendo UI - Potencia tu WebKendo UI - Potencia tu Web
Kendo UI - Potencia tu Web
 
Introduccion a Xamarin
Introduccion a XamarinIntroduccion a Xamarin
Introduccion a Xamarin
 
PhoneGap 2.1.0 Morelia
PhoneGap 2.1.0 MoreliaPhoneGap 2.1.0 Morelia
PhoneGap 2.1.0 Morelia
 
Introducción al desarrollo de aplicaciones Xamarin
Introducción al desarrollo de aplicaciones XamarinIntroducción al desarrollo de aplicaciones Xamarin
Introducción al desarrollo de aplicaciones Xamarin
 
Taller mobile by trustparency
Taller mobile by trustparencyTaller mobile by trustparency
Taller mobile by trustparency
 
Introducción a Kendo UI
Introducción a Kendo UIIntroducción a Kendo UI
Introducción a Kendo UI
 
Introducción a Blazor
Introducción a BlazorIntroducción a Blazor
Introducción a Blazor
 
Desarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta PhonegapDesarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta Phonegap
 
Visual Studio 2017 Launch Event Sevilla
Visual Studio 2017 Launch Event SevillaVisual Studio 2017 Launch Event Sevilla
Visual Studio 2017 Launch Event Sevilla
 

Similar a Ionic y angular.js

Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerrero
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webJulio Alfaro
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web modernoSebastián Rocco
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidadRaelyx Cordero
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !ouuyeah
 
Aplicaciones Autohosted, el nuevo modelo para extender SharePoint online
Aplicaciones Autohosted, el nuevo modelo para extender SharePoint onlineAplicaciones Autohosted, el nuevo modelo para extender SharePoint online
Aplicaciones Autohosted, el nuevo modelo para extender SharePoint onlineMario Cortés Flores
 
Defensa proyecto fin de carrera
Defensa proyecto fin de carreraDefensa proyecto fin de carrera
Defensa proyecto fin de carreraBorja Merino
 
Frameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroFrameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroDanielRosero23
 
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nubeMsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nubeMiguel Tabera
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdfDubiWeb.TK
 
Introducción a Azure App Service - MUG Buenos Aires
Introducción a Azure App Service - MUG Buenos AiresIntroducción a Azure App Service - MUG Buenos Aires
Introducción a Azure App Service - MUG Buenos AiresGuillermo Javier Bellmann
 
Web Service buscador de localizaciones de IP’s
Web Service buscador de localizaciones de IP’sWeb Service buscador de localizaciones de IP’s
Web Service buscador de localizaciones de IP’sPablo Pellegrinet
 
Azure 360º para Desarrolaldores
Azure 360º para DesarrolaldoresAzure 360º para Desarrolaldores
Azure 360º para DesarrolaldoresGermán Küber
 
Desarrollo de aplicaciones saa s con herramientas de software libre
Desarrollo de aplicaciones saa s con herramientas de software libreDesarrollo de aplicaciones saa s con herramientas de software libre
Desarrollo de aplicaciones saa s con herramientas de software libreJonathan Franchesco Torres Baca
 
Azure bootcampo 2019 start up_v1
Azure bootcampo 2019 start up_v1Azure bootcampo 2019 start up_v1
Azure bootcampo 2019 start up_v1fernando sonego
 

Similar a Ionic y angular.js (20)

Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
 
Ruby on Rails y AngularJS
Ruby on Rails y AngularJSRuby on Rails y AngularJS
Ruby on Rails y AngularJS
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web moderno
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
 
Html5 avanzado
Html5 avanzadoHtml5 avanzado
Html5 avanzado
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Aplicaciones Autohosted, el nuevo modelo para extender SharePoint online
Aplicaciones Autohosted, el nuevo modelo para extender SharePoint onlineAplicaciones Autohosted, el nuevo modelo para extender SharePoint online
Aplicaciones Autohosted, el nuevo modelo para extender SharePoint online
 
Defensa proyecto fin de carrera
Defensa proyecto fin de carreraDefensa proyecto fin de carrera
Defensa proyecto fin de carrera
 
Frameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroFrameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-Rosero
 
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nubeMsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf
 
Introducción a Azure App Service - MUG Buenos Aires
Introducción a Azure App Service - MUG Buenos AiresIntroducción a Azure App Service - MUG Buenos Aires
Introducción a Azure App Service - MUG Buenos Aires
 
Web Service buscador de localizaciones de IP’s
Web Service buscador de localizaciones de IP’sWeb Service buscador de localizaciones de IP’s
Web Service buscador de localizaciones de IP’s
 
Azure 360º para Desarrolaldores
Azure 360º para DesarrolaldoresAzure 360º para Desarrolaldores
Azure 360º para Desarrolaldores
 
Desarrollo de aplicaciones saa s con herramientas de software libre
Desarrollo de aplicaciones saa s con herramientas de software libreDesarrollo de aplicaciones saa s con herramientas de software libre
Desarrollo de aplicaciones saa s con herramientas de software libre
 
Presentacion cw2012
Presentacion cw2012Presentacion cw2012
Presentacion cw2012
 
Azure bootcampo 2019 start up_v1
Azure bootcampo 2019 start up_v1Azure bootcampo 2019 start up_v1
Azure bootcampo 2019 start up_v1
 
Integrando AngularJS y drupal
Integrando AngularJS y drupalIntegrando AngularJS y drupal
Integrando AngularJS y drupal
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 

Más de GDG Cali

APIs Mercado Libre
APIs Mercado LibreAPIs Mercado Libre
APIs Mercado LibreGDG Cali
 
Como crear y validar un MVP con Firebase
Como crear y validar un MVP con FirebaseComo crear y validar un MVP con Firebase
Como crear y validar un MVP con FirebaseGDG Cali
 
Menú Animado con Android Wear
Menú Animado con Android Wear Menú Animado con Android Wear
Menú Animado con Android Wear GDG Cali
 
Depuración de dispositivos Android Wear en android con adb
Depuración de dispositivos Android Wear en android con adbDepuración de dispositivos Android Wear en android con adb
Depuración de dispositivos Android Wear en android con adbGDG Cali
 
Mi primera vez con Android Wear
Mi primera vez con Android WearMi primera vez con Android Wear
Mi primera vez con Android WearGDG Cali
 
GdgCali - Realidad Aumentada Con Android - 2015-Sept-04
GdgCali -  Realidad Aumentada Con Android - 2015-Sept-04GdgCali -  Realidad Aumentada Con Android - 2015-Sept-04
GdgCali - Realidad Aumentada Con Android - 2015-Sept-04GDG Cali
 
Realidad virtual con Google Cardboard
Realidad virtual con Google CardboardRealidad virtual con Google Cardboard
Realidad virtual con Google CardboardGDG Cali
 
Keynote Google IO 2015
Keynote Google IO 2015Keynote Google IO 2015
Keynote Google IO 2015GDG Cali
 
Angular.js
Angular.jsAngular.js
Angular.jsGDG Cali
 
Android y aplicaciones médicas
Android y aplicaciones médicasAndroid y aplicaciones médicas
Android y aplicaciones médicasGDG Cali
 
Técnicas ágiles para desarrollo móvil, prototipado y UX
Técnicas ágiles para desarrollo móvil, prototipado y UXTécnicas ágiles para desarrollo móvil, prototipado y UX
Técnicas ágiles para desarrollo móvil, prototipado y UXGDG Cali
 
Guía paso a paso de Arduino
Guía paso a paso de ArduinoGuía paso a paso de Arduino
Guía paso a paso de ArduinoGDG Cali
 
[2015] arduino gdg cali
[2015] arduino gdg cali[2015] arduino gdg cali
[2015] arduino gdg caliGDG Cali
 
Presentacion final drones
Presentacion final dronesPresentacion final drones
Presentacion final dronesGDG Cali
 
Mensajeria push
Mensajeria pushMensajeria push
Mensajeria pushGDG Cali
 
Interoperabilidad en android con APIs REST/JSON
Interoperabilidad en android con APIs REST/JSONInteroperabilidad en android con APIs REST/JSON
Interoperabilidad en android con APIs REST/JSONGDG Cali
 
Android y permisos de gestión
Android y permisos de gestiónAndroid y permisos de gestión
Android y permisos de gestiónGDG Cali
 
Comunidad GDG Cali
Comunidad GDG CaliComunidad GDG Cali
Comunidad GDG CaliGDG Cali
 
Primera App - Laboratorio Android
Primera App - Laboratorio AndroidPrimera App - Laboratorio Android
Primera App - Laboratorio AndroidGDG Cali
 
Segundo laboratorio de Android
Segundo laboratorio de AndroidSegundo laboratorio de Android
Segundo laboratorio de AndroidGDG Cali
 

Más de GDG Cali (20)

APIs Mercado Libre
APIs Mercado LibreAPIs Mercado Libre
APIs Mercado Libre
 
Como crear y validar un MVP con Firebase
Como crear y validar un MVP con FirebaseComo crear y validar un MVP con Firebase
Como crear y validar un MVP con Firebase
 
Menú Animado con Android Wear
Menú Animado con Android Wear Menú Animado con Android Wear
Menú Animado con Android Wear
 
Depuración de dispositivos Android Wear en android con adb
Depuración de dispositivos Android Wear en android con adbDepuración de dispositivos Android Wear en android con adb
Depuración de dispositivos Android Wear en android con adb
 
Mi primera vez con Android Wear
Mi primera vez con Android WearMi primera vez con Android Wear
Mi primera vez con Android Wear
 
GdgCali - Realidad Aumentada Con Android - 2015-Sept-04
GdgCali -  Realidad Aumentada Con Android - 2015-Sept-04GdgCali -  Realidad Aumentada Con Android - 2015-Sept-04
GdgCali - Realidad Aumentada Con Android - 2015-Sept-04
 
Realidad virtual con Google Cardboard
Realidad virtual con Google CardboardRealidad virtual con Google Cardboard
Realidad virtual con Google Cardboard
 
Keynote Google IO 2015
Keynote Google IO 2015Keynote Google IO 2015
Keynote Google IO 2015
 
Angular.js
Angular.jsAngular.js
Angular.js
 
Android y aplicaciones médicas
Android y aplicaciones médicasAndroid y aplicaciones médicas
Android y aplicaciones médicas
 
Técnicas ágiles para desarrollo móvil, prototipado y UX
Técnicas ágiles para desarrollo móvil, prototipado y UXTécnicas ágiles para desarrollo móvil, prototipado y UX
Técnicas ágiles para desarrollo móvil, prototipado y UX
 
Guía paso a paso de Arduino
Guía paso a paso de ArduinoGuía paso a paso de Arduino
Guía paso a paso de Arduino
 
[2015] arduino gdg cali
[2015] arduino gdg cali[2015] arduino gdg cali
[2015] arduino gdg cali
 
Presentacion final drones
Presentacion final dronesPresentacion final drones
Presentacion final drones
 
Mensajeria push
Mensajeria pushMensajeria push
Mensajeria push
 
Interoperabilidad en android con APIs REST/JSON
Interoperabilidad en android con APIs REST/JSONInteroperabilidad en android con APIs REST/JSON
Interoperabilidad en android con APIs REST/JSON
 
Android y permisos de gestión
Android y permisos de gestiónAndroid y permisos de gestión
Android y permisos de gestión
 
Comunidad GDG Cali
Comunidad GDG CaliComunidad GDG Cali
Comunidad GDG Cali
 
Primera App - Laboratorio Android
Primera App - Laboratorio AndroidPrimera App - Laboratorio Android
Primera App - Laboratorio Android
 
Segundo laboratorio de Android
Segundo laboratorio de AndroidSegundo laboratorio de Android
Segundo laboratorio de Android
 

Ionic y angular.js

  • 2.
  • 3. • 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.
  • 4. • 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 ?
  • 5. • Modelos. • Vistas. • Controladores. • Servicios y filtros. • Variables scope. Conceptos básicos
  • 6.
  • 7. • Framework gratuito y de código abierto. • Desarrollo de aplicaciones hibridas. • Optimizado con AngularJs. • Corre sobre Cordova.
  • 8. • 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
  • 9.
  • 10. • Herramienta de la nube que proporciona diversos servicios. – Sincronizar datos de aplicaciones en tiempo real. – Hosting de aplicaciones. • Dispone de una API muy potente.
  • 11. • 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
  • 12.
  • 13. • 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.
  • 14. Ya esta la aplicación pero no es móvil … ¿Que hago?
  • 16. • Framework de código abierto. • Cuenta con muchasAPIS para convertir el desarrollo web en aplicación hibrida pero con enfoque nativo. • Permite compilar aplicaciones para muchas plataformas con un solo desarrollo.
  • 18. • 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.
  • 20. … Muchas gracias … Vamos a la practica.