¡Hola de nuevo! Hace unos días escribí una pequeña introducción a Ionic Framework, explicando el proceso de instalación y cómo probar un proyecto.

En este artículo os voy a hablar de uno de los entornos de desarrollo que se pueden utilizar para trabajar con Ionic y vamos a analizar la estructura de un proyecto.

Entorno de Desarrollo

Realmente se puede utilizar cualquier IDE que permita trabajar con proyectos Cordova. Entre otros, tenemos el Eclipse, el Android Studio, NetBeans, Visual Studio, PHPStorm

Para trabajar con estos artículos yo voy a utilizar el WebStorm, ya que estamos hablando de un IDE bastante robusto, completo e intuitivo.

Plantillas de Proyecto

A la hora de crear un proyecto, se le puede especificar una de las plantillas starter predefinidas que tiene Ionic para empezar a trabajar desde ahí.

ionic start ProgramandoConRupert blank

ionic start ProgramandoConRupert tabs

ionic start ProgramandoConRupert sidemenu

Estructura de un proyecto

A modo de introducción para los proyectos de Ionic Framework, vamos a analizar rápidamente los elementos más importantes que nos encontramos en un proyecto básico (blank)

Ficheros

  • bower.json – Dependencias de Bower
  • config.xml – Configuración de Apache Cordova
  • gulpfile.js – Tareas Gulp
  • ionic.project – Configuración de Ionic
  • package.json – Dependencias de Node.js

Carpetas

  • hooks – Hooks de Cordova para ejecutar comandos personalizados
  • plugins – Carpeta donde se instalarán los plugins de Cordova e Ionic
  • scss – Código scss, cuya salida escribirá en www/css
  • www – Archivos de la aplicación: HTML, Javascript y css

Y con esto que hemos visto ya conocemos un poquito más los proyectos de Ionic y los elementos más importantes que nos vamos a encontrar en los proyectos. En los siguientes artículos comenzaremos a trabajar con estos proyectos para empezar a crear aplicaciones móviles.

¡Hasta la próxima!
Rupert.