Tutorial de Ionic – Hola Mundo en Ionic

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el capitulo anterior vimos como instalar ionic y las herramientas de desarrollo que necesitamos para crear aplicaciones multiplataforma con ionic 2.

Ahora vamos a crear nuestra primera aplicaci贸n con Ionic 2, el famoso “hola mundo” que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programaci贸n o framework.

Para crear聽nuestro proyecto “hola mundo” iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

Tras un rato descargando los paquetes necesarios para crear nuestra aplicaci贸n ya estar谩 listo nuestro proyecto.

El comando start de ionic cli (commandline interface) 聽se utiliza 聽para crear (iniciar) un nuevo proyecto, el siguiente par谩metro es el nombre del proyecto, en este caso hola-mundo, el siguiente par谩metro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vac铆a.

Existen tres tipos de plantillas:

  • blank : Crea una plantilla vac铆a.
  • sidemenu: Crea una plantilla con men煤 lateral.
  • tabs: Crea una plantilla con Tabs (Pesta帽as).聽

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto ‘hola-mundo’ que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

Con el par谩metro -l nos muestra como queda nuestra app en las tres plataformas soportadas, es decir, IOS, Android 聽y Windows.

captura-de-pantalla-2016-12-13-a-las-19-21-19
Vista de como quedar铆a nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrar谩 solo una plataforma.

Para ver las posibilidades de ionic podemos crear un proyecto de prueba con plantilla tabs 聽y otro con sidemenu:

ionic start appTabs tabs
Aplicaci贸n con plantilla tabs
Aplicaci贸n con plantilla tabs
ionic start appSide sidemenu
Aplicaci贸n con plantilla sidemenu
Aplicaci贸n con plantilla sidemenu

Como podemos ver sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para a帽adir lo que necesitemos.

En el pr贸ximo capitulo profundizaremos en la estructura de carpetas de una aplicaci贸n con ionic 2 y modificaremos nuestro hola mundo.

 

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

6 comentarios en “Tutorial de Ionic – Hola Mundo en Ionic

  1. Buenos d铆as! Me gustar铆a saber si es posible unificar las tabs y el sidemenu en una misma app para poder dividir y no sobrecargar las tabs. Es decir que para que se vea bien una app con no m谩s de 5 pesta帽as. Y as铆 disponer del men煤.

    Gracias y un saludo

  2. Hola! me interesar铆a introducirme en este mundo!
    Tengo un peque帽o problema, a la hora de poner “ionic serve -l” en mi cmd se me abre el navegador con el localhost de ionic pero en vez de aparecer las tres plataformas, se ve completamente en blanco. no s茅 cu谩l es el problema. Espero haberme explicado. Soy super nuevo en esto asique no s茅 si me falta alg煤n programa pr descargar o algo…
    Muchas gracias.

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.