Tutorial de Ionic – Hola Mundo en 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.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

Ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Anuncios

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.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s