Curso de Ionic 3
Curso de Ionic 3
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Hola y bienvenido, en este tutorial aprenderás a desarrollar tu primera aplicación con Ionic 3 desde 0. No hace mucho que salió la versión 3 de este SDK y la verdad que desde los inicios de Ionic 2 todo ha cambiado bastante y lo mejor es que su rendimiento ha mejorado mucho.

Ionic 3 te ayudará a desarrollar aplicaciones móviles híbridas (trabajan bajo un WebView) de forma muy sencilla y con un gran rendimiento, para poder utilizar Ionic antes debes conocer Angular ya que Ionic tiene dependencia total de Angular en este momento.

Para desarrollar tu primera aplicación y poder probarla en el browser primero necesitas cumplir algunos requisitos, aunque todos ellos son muy sencillos, paso a detallar.

  • Tener instalada una versión de Node.js >= 6.10.

:), simplemente eso, con eso tienes suficiente para desarrollar tu primera App con Ionic 3, ahora que ya cumplimos con los requisitos vamos a instalar Ionic y Cordova CLI para poder generar nuestros proyectos e interactuar desde la línea de comandos.

Instalar Ionic 3 CLI

Recomiendo instalar la versión beta de la CLI para tener lo último disponible, para ello podemos ejecutar el siguiente comando en la terminal.

Recuerda ejecutarlo con sudo si lo necesitas, una vez se haya instalado todo correctamente ya tendremos los comandos ionic y cordova a nivel global desde la terminal.

Primera aplicación con Ionic 3

Colócate en el directorio donde desees guardar tu aplicación con Ionic 3 y ejecuta el siguiente comando.

Verás la siguiente pantalla.

Selecciona blank para crear un proyecto en blanco y sigue el proceso respondiendo a las preguntas que la terminal te haga, en un minuto tendrás tu aplicación finalizada.

Si ahora abres tu proyecto verás una estructura similar a la siguiente.

Cómo puedes ver, el directorio importante es el directorio src, aquí es donde pasaremos la mayor parte del tiempo ya que es donde tendremos que crear páginas, componentes, temas o providers entre otros.

Para poder lanzar la aplicación en el browser simplemente debemos ejecutar el siguiente comando.

En unos instantes se abrirá tu navegador y verás la primera aplicación desarrollada con Ionic 3 funcionando.

Ionic 3 viene con una gran cantidad de funcionalidades para facilitarnos la vida en nuestros desarrollos, uno de ellos el comando ionic generate, el cual nos permite desarrollar todo tipo de componentes para nuestra aplicación, para verlos ejecuta el siguiente comando en la terminal y verás lo siguiente.


Las pantallas de una aplicación de Ionic 3 son las páginas (page), así que vamos a crear una para poder modificar la pantalla principal de nuestra aplicación, selecciona page y ponle el nombre holaMundo, verás que dentro del directorio src/pages se ha creado otro directorio llamado hola-mundo.

Si abres el archivo hola-mundo.module.ts y ves que aparece la siguiente línea.

Reemplázala por la siguiente para evitar ese error.

Con esto ya lo tendremos todo funcionando, el archivo que representará una pantalla en nuestra aplicación es el hola-mundo.ts, así que ábrelo y vamos a ver qué contiene.

@IonicPage maneja el registro y visualización de páginas específicas en función de las direcciones URL y acepta un objeto DeepLinkMetadataType para poder configurar la información del componente y el segmento vinculado entre otros.

Para que @IonicPage funcione correctamente debemos utilizar en el módulo relacionado la siguiente línea.


Más abajo de nuestra página simplemente tenemos una clase que está vinculada a un @Component() donde en el constructor tenemos registrados NavController (útil para navegar por la aplicación entre otros) y NavParams (útil para obtener los parámetros que enviamos entre páginas).

Si quieres puedes modificar el archivo hola-mundo.html que es la vista relacionada con esta página y será el contenido a mostrar cuando la visitemos.

Cambiar el RootPage en Ionic 3

Para finalizar este tutorial vamos a cambiar la página principal de la aplicación, es decir, la primera página que se vea cuando abras la app, para ello vamos a abrir el archivo src/app/app.component.ts y vamos a modificar la propiedad rootPage por HolaMundoPage de la siguiente forma.

Si ahora abres la aplicación en el navegador verás que tenemos un error que nos advierte de que no tenemos registrada la página HolaMundoPage, para solventar este problema simplemente vamos a abrir el archivo src/app/app.module.ts y vamos a modificar el código por el siguiente reemplazando HomePage por HolaMundoPage.

Ya tienes tu primera aplicación con Ionic 3 funcionando, espero que te haya parecido interesante el tutorial, si estás interesado en seguir conociendo Ionic 3 te recomiendo el curso que estoy desarrollando desde 0 únicamente con la versión 3 de Ionic para que sea 100% funcional con la última versión.

Curso de Ionic 3 sin versiones anteriores

Accede al curso ahora

El curso de Ionic 3 está en fase de desarrollo y se va a ir actualizando semanalmente con nuevo contenido, puedes empezar ahora si quieres.

En este curso no encontrarás código inservible de versiones anteriores de Ionic, sólo código 100% funcional utilizando la última versión.

En cursosdesarrolloweb.es tenemos cursos completos sobre desarrollo web y desarrollo móvil.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.