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