Ionic 2 – nuestra primera aplicación con el framework. Construiremos en poco más de 5 minutos el tan conocido hola mundo.
En nuestro post anterior hablábamos acerca de la instalación de node.js y de qué es NPM, hoy vamos a instalar Ionic 2 paso a paso.
Índice
Instalación del paquete Cordova.
Empezamos abriendo una ventana de terminal / consola y en ella vamos a proceder con la instalación del paquete Cordova, recordemos que Cordova es un framework javascript que nos permite invocar la funcionalidad nativa en un dispositivo móvil.
Tecleamos: npm install -g cordova ionic tal y como muestra la siguiente imagen.
Recordemos que si la instalación la llevas a cabo desde linux o mac debes utilizar sudo delante, la sentencia quedaría así:
Para comprobar que la instalación ha sido exitosa y conocer la versión de cordova que hemos instalado, podemos ejecutar la siguiente sentencia:
Creación de proyecto hola mundo
Vamos a ver lo sencillo que es crear un hola mundo en Ionic 2. Ejecutamos en la ventana de comandos la siguiente línea:
ionic start hola-mundo blank --v2
Veremos que se empiezan a descargar paquetes desde github y que posteriormente se instalan en nuestro equipo. Esto realmente son los scripts necesarios para el proyecto.
Ser pacientes, dependiendo de las prestaciones del equipo con el cual trabajéis y de la velocidad de internet de la que dispongáis esto puede demorarse más o menos.
Lo que hemos hecho con la sentencia…
ionic start hola-mundo blank --v2
… es lo siguiente:
ionic: Definimos que es un comando del framework Ionic.
start: Ordenamos que se cree un nuevo proyecto con la estructura de Ionic.
hola-mundo: Es el nombre que le hemos asignado al proyecto.
blank: Indicamos que la plantilla a crear queremos que esté vacía.
–v2: Hacemos uso de la versión 2 de Ionic.
Tipos de plantillas existentes en Ionic 2
A día de hoy, existen tres tipos de plantilla: blank, sidemenu, tabs:
blank: Crea una plantilla vacía.
sidemenu: Crea una plantilla con menú lateral.
tabs: Crea una plantilla con pestañas.
Visualizar proyecto Ionic 2 en nuestro navegador
Para poder ver nuestro proyecto en un navegador, es tan sencillo como acceder al directorio del proyecto, en mi caso «cd hola-mundo» en la línea de comandos. Y ejecutar la sentencia: ionic serve -l
Se os abrirá una ventana de navegador con la ruta http://localhost:8100/ionic-lab en la cual podemos ver el resultado de nuestro proyecto.
Si alguno os preguntáis por qué la ruta de mis proyectos ha cambiado, se debe a que este post lo he creado desde 2 PCs, pero no afecta para nada al resultado final.
Editar scripts con visual studio code
Poco nos queda ya por hacer, ahora vamos a abrir nuestro proyecto con un editor. Recomiendo que utilicéis visual studio code: https://code.visualstudio.com/
Dentro de nuestro proyecto hola-mundo de ionic 2 vamos a acceder al directorio /src/pages/home/home.html y una vez en el cambiaremos lo que tenemos por lo siguiente:
Como podéis ver ionic fuerza un refresco en el explorador cada vez que guardamos cambios en el proyecto.
Y listo, ya tenemos nuestro hola-mundo construido en Ionic 2.
Anotaciones
En el siguiente post haremos un divertido juego muy básico que trata de averiguar qué número es el secreto generado por Ionic. Lo aprendí de un conocido y mejoré para darle más encanto.
Recuerda. si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.