Ionic 2 instalación paso a paso y crear hola mundo



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.

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.

cmd cordova

Recordemos que si la instalación la llevas a cabo desde linux o mac debes utilizar sudo delante, la sentencia quedaría así:

cmd cordova linux

Para comprobar que la instalación ha sido exitosa y conocer la versión de cordova que hemos instalado, podemos ejecutar la siguiente sentencia:

cmd cordova -v

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

cmd nuevo proyecto ionic 2

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

ionic serve -l hola mundo

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.

ioniv c 2 hola mundo navegador

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:

codigo fuente ionic 2 hola mundo

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.

ioniv c 2 hola mundo navegadorAnotaciones

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.

Publicaciones relacionadas

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable de los datos: Luis María Jordán Muñoz | Finalidad: Responder a la solicitud que me envíes y ofrecerte información | Legitimación: Tu consentimiento de forma expresa | Destinatario: Webempresa mi proveedor de hosting | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido, para más información, te dejo enlace a mi política de privacidad ... enlace

Ir arriba