IONIC Esencial : Creación de aplicaciones móviles / 2017 / Español / GD/

Descubre Ionic, la plataforma de creación de aplicaciones móviles híbridas que utiliza los frameworks más modernos y potentes: Angular, Sass y Cordova. Apps para iOS; Android y Windows con HTML5

Conoce estos frameworks que los componen y aprende a crear fácilmente aplicaciones para iOS, Android y Windows, con su batería de controles para móvil, que te permitirán comunicar tu aplicación con el sistema operativo para usar, por ejemplo, la cámara o la geolocalización.

Introducción Ionic esencial

Antes de avanzar en el curso es imprescindible entender bien en qué consiste la plataforma Ionic y de qué se compone, así que en este capítulo de introducción vamos a explicar un poco los conceptos básicos de Ionic.

Desarrollo móvil híbrido 01:55

Apache Cordova para compilar aplicaciones híbridas 03:40

Angular, MVC y databinding 03:19

Ionic y sus versiones 03:39

Ionic view: ver aplicaciones sin necesidad de instalarlas 02:30

Instalación de Ionic

Ya que Ionic mezcla muchas tecnologías distintas, puede parecer un poco farragosa su instalación. Sin embargo en este capítulo vamos a descubrir que no es tan complicada como pudiera parecer, siguiendo unos cuantos simples pasos.

NPM y las instalaciones. Instalación de NodeJS 02:07

Proceso de instalación de Ionic 02:23

Proceso de instalación y configuración de Java 03:18

Instalación de Android Studio y configuración de Android 05:10

Aplicaciones IOS y compilación con XCode 01:52

La base de Ionic: TypeScript y Angular

Ionic 3 se basa en Angular 4 y este, se basa en TypeScript, lo que supone que, para poder sentirnos ágiles desarrollando con Ionic, necesitamos tener un mínimo de conocimientos de estos. Este capítulo va a ser una introducción a ambos.

Instalación de TypeScript 02:27

Variables y constantes en TypeScript 04:17

Uso de clases de Typescript: javascript orientado a objetos 05:10

Herencia e importación de clases 04:42

Funciones anónimas 03:26

Los decoradores de TypeScript 02:09

Instalación y estructura de Angular 04:43

Elementos de Angular como módulos, componentes o directivas 07:53

Selectores y templates. Databinding 07:29

Tipos de databinding 11:00

Bases de Ionic. Creación de nuestra primera app

Este capítulo lo vamos a dedicar a explicar los conceptos básicos de Ionic: utilizaremos el cli para automatizar tareas, aprenderemos a crear aplicaciones basadas en plantillas y repasaremos la estructura básica de las apps.

El cli de Ionic para automatizar tareas 06:19

Plantillas de inicio de las aplicaciones 05:30

Subir aplicaciones a los servicios de Ionic 03:46

Estructura de archivos en Ionic 05:22

El archivo config.xml 07:07

Depuración de la app. Flujo de trabajo 07:45

Emulación de la app 06:09

Las bases de las aplicaciones Ionic

En este capítulo aprenderemos cómo se cargan las apps de Ionic, cómo se estructuran sus contenidos y cómo se organiza la navegación en la plantilla de aplicaciones basadas en pestañas, que es un buen ejemplo de navegación en app Ionic.

Flujo inicial de la app 06:01

Estructura de las páginas: header, content y footer 02:07

Navegación principal con tabs y el ion-view 05:21

SASS y Ionic: estilos de la aplicación

En la plantilla tabs que hemos instalado se aplica SASS, así que haremos en este capítulo una brevísima introducción a los archivos SCSS y hablaremos de las variables de SASS en Ionic y su uso para personalizar las apps.

Bases de SASS 01:53

Variables de SASS 05:15

Los archivos .scss de las páginas 02:40

Modificación de los colores por defecto de la app de Ionic 06:00

Los botones en Ionic

La forma más habitual de añadir interactividad es usando botones. Ionic ofrece muchas formas de añadir botones que cambian no solo su aspecto sino, incluso, su funcionamiento. En este capítulo vamos a usar botones y botoneras.

Tipos de botones en Ionic 05:19

Ionic y el uso de botones con iconos 06:13

Botoneras: ion-segment. Directiva ngIf 07:29

Personalización del header. Ion-navbar y ion-toolbar 06:05

Rejillas de elementos: ion-grid 05:23

Listados de elementos en Ionic

La función principal de las aplicaciones suele ser mostrar información y, generalmente, esta proviene de listas de elementos, así que dedicaremos un capítulo entero a trabajar con listas de elementos y su forma de dibujarse en la app.

Listas basadas en el componente ion-list 03:58

Formas de mostrar filas en las listas 05:47

Organización de los elementos de las listas 02:55

Listas con imágenes y listas con varios textos 07:41

Botones y otros componentes en los elementos de las listas 05:21

Preparar el navegador para evitar problemas de CORS 03:25

Creación del provider para cargar datos externos 08:29

Infinite scroll. Barras de búsqueda 07:40

Componentes personalizados

No hay por qué limitarse a los componentes de Ionic; otra de las características de esta plataforma es que permite hacer nuestros propios controles e incluso luego reutilizarlo en otros proyectos. En este capítulo haremos un header personalizado y añadiremos también una botonera en dicho header.

Creación y adición de un nuevo componente a las páginas 04:06

Pasando variables al componente 04:02

Navegación secundaria. NavController 06:05

Pasar datos con el NavController: página de detalle 05:29

Aplicación de estilos al nuevo componente 04:57

Formularios y controles de formulario en Ionic

Hasta ahora hemos aprendido a mostrar datos al usuario y a ofrecerle formas de interactuar, pero aún no le hemos dado formas de enviarnos datos a nosotros. Para eso están los formularios y, con Ionic, se hacen muy fácilmente.

Distribución de elementos en formularios. Trabajar en campos 05:25

Listas desplegables en formularios 02:57

Selecciones en formularios: checks, radios y toggles 05:07

Controles de formulario avanzados 04:14

Template driven forms 09:46

Data driven forms 07:34

Otros componentes típicos de Ionic

En este capítulo haremos un breve repaso a algunos de los componentes más típicos, con ejemplos prácticos que nos servirán como ayuda para poder utilizar cualquier otro componente de los muchos que tiene Ionic.

Cards para organizar la información 03:52

Popovers y modals para hacer navegación secundaria 07:14

Prompts y alertas en Ionic 06:38

Otros componentes de Ionic 02:13

Apache Cordova. Despliegue de la app

Vamos a utilizar plugins de Cordova para controlar el teléfono. El último capítulo también se corresponde a la última fase del desarrollo de aplicaciones, que es la compilación de la aplicación y su subida a las tiendas.

Los Plugins de Cordova. Añadiendo plugins 03:39

Trabajo con plugins: geolocalización 07:28

Depuración de la aplicación en el teléfono 03:55

Compilación para Android 05:35

Cómo subir la app a Play Store 03:48

Compilación para IOS 09:03