Creando una app en Ionic 3

Gonzalo Carranza
Branch Digital Media
4 min readDec 4, 2018

Ionic es un Framework Open-source y gratuito para desarrollar aplicaciones móviles híbridas multiplataforma que utiliza HTML5, CSS (generado por SASS), JS (AngularJS) y Cordova como base, lo que asegura aplicaciones rápidas y escalables.

Instalación:

Tener instalado Node.js en su versión 6+.

Instalar Ionic 3 CLI.

Creando nuestra primera aplicación

  • Debemos crear una carpeta para guardar nuestro proyecto. En este caso será IonicEjemplo:
  • En la consola nos paramos en la carpeta:
  • Luego escribimos ionic start. Le agregamos un nombre. En ese caso seráNombreProyecto.
  • Al presionar Enter nos preguntará si queremos trabajar con Ionic 4 beta. Le pondremos que NO.
  • En la imagen podemos ver los diferentes tipos proyectos o templates con los que podremos iniciar nuestra app:

Tabs: Genera un proyecto simple con una interfaz de pestañas (tabs).

Blank: Genera un proyecto en blanco.

Sidemenu: Genera un proyecto inicial con un menú lateral con navegación en el área de contenido.

Super: Genera un proyecto inicial con páginas pre-construidas, proveedores y mejores prácticas para el desarrollo en Ionic.

Conference: Genera un proyecto que demuestra una aplicación del mundo real(Alarmas, fecha y hora de una actividad, entre otros).

Tutorial: Genera un proyecto “tutorial” con ciertos elementos ya preestablecido que va junto con la documentación en Ionic.

Aws: Genera un proyecto simple con Amazon Web Service.

  • Vamos a seleccionar blank para crear un proyecto en blanco:
  • Ahora procedemos a abrir nuestro proyecto en el editor. Al abrir la carpeta vas a ver una estructura similar a la siguiente:
  • Ahora para poder lanzar la aplicación y poder visualizarla en nuestro navegador utilizaremos los siguientes comandos:

$ ionic serve

o

$ ionic serve — lab

  • Se abrirá tu navegador y verás la primera aplicación desarrollada con Ionic 3 funcionando.

--

--