Curso de desarrollo de Aplicaciones móviles con Ionic Framework

El nuevo framework open source para crear aplicaciones web móviles híbridas basadas en HTML

Avanzado
20 Horas
Curso Presencial
Curso de desarrollo de Aplicaciones móviles con Ionic Framework

Descripción del curso

Ionic es un framework gratuito y open source para desarrollar aplicaciones híbridas multiplataforma que utiliza HTML5, CSS (generado por SASS) y Cordova como base. Es uno de los framework del momento por utilizar AngularJS para gestionar las aplicaciones, lo que asegura aplicaciones rápidas y escalables. 

Objetivos

El curso se iniciará con una introducción y repaso de los diferentes tipos de aplicaciones móviles: nativas, web e híbridas. Una vez vistas las ventajas/desventajas de cada uno, se explicará qué es Ionic Framework y qué tecnologías utiliza. A continuación se presentarán sus puntos fuertes y qué componentes o herramientas ofrece.

Para comprender el potencial que ofrece Ionic, al final del curso se desarrollará un caso práctico de desarrollo de una aplicación para consultar información sobre las bibliotecas públicas de Euskadi. El ejemplo práctico empezará con la instalación de los requisitos para poner en marcha el framework y acabará con el desarrollo de una aplicación funcional con los elementos más comunes que se utilizan en el desarrollo móvil.

Requisitos

Conocimientos amplios de JavaScript. Es recomendable conocer angularJS.

Orientado a

Desarrolladores web. Desarrolladores de aplicaciones móviles.

Programa

  1. Introducción al desarrollo de aplicaciones móviles con Ionic
    1. Nativas vs. Web vs. Híbridas
    2. Características generales
    3. Optimización y rendimiento
  2. ¿Qué es Ionic Framework?
    1. AngularJS
      1. Directivas / filtros / databinding
      2. Módulos
      3. Inyección de dependencias (DI)
      4. Controladores
      5. Views
      6. $scope
    2. Cordova
      1. Instalación iOS / Ionic platform add ios *Requiere utilizar MacOS 
      2. Instalación Android / Ionic platform Add Android
      3. Introducir ngCordova. Repositorio con plugins preparados para utilizarlos con AngularJS
    3. Sass
      1. partial /import
      2. variables
      3. nesting
      4. @mixing / @extend
      5. operators
    4. Herramientas/Componentes que ofrece Ionic
      1. Componentes CSS
        1. Header
        2. Footer
        3. Botones
        4. Listas
        5. Tarjetas
        6. Formularios
        7. Columnas
      2. Componentes Javascript
        1. Modals
        2. Scroll
        3. Spinner
        4. Action Sheet
        5. Gestos, clicks y taps
        6. Navegación
        7. Pull to refresh
      3. CLI Tools
        1. Start
        2. Development/Testing
        3. Run/Emulate
        4. Icons/Splashscreen
        5. Uploading/Viewing
        6. Enviroment Info
        7. Other browsers
      4. Iconos
  3. Un caso práctico de desarrollo de app con Ionic: aplicación para consultar información sobre bibliotecas públicas de Euskadi
    1. Instalación
    2. Introducción del ironic-starter
    3. Iniciar ironic-starter project
    4. Buenas prácticas
    5. Primeros pasos: añadir header, footer y utilizar Gulp sass
    6. Identificar las principales funcionalidades y crear la estructura necesaria
    7. Añadir los contenidos de las pestañas:
      1. About: elemento card con información sobre la aplicación
      2. Lista de bibliotecas ordenadas por provincia y municipio
    8. Añadir ficha de cada biblioteca
    9. Añadir plugins de cordova para mostrar la ubicación de cada biblioteca