Estructura de carpetas

Al generar un nuevo proyecto de Ionic se nos creará una estructura predefinida de carpetas y ficheros que nos permitirán organizar el código de nuestro proyecto. Esta estructura es muy similar a la de un proyecto con Cordova aunque tiene algunas diferencias importantes. A continuación vamos a ver para qué vale cada una de estos elementos.

• hooks/ - Esta carpeta se utiliza para añadir scripts que se ejecutarán cuando se produzcan determinados eventos, como por ejemplo antes o después, de la compilación, etc. Dependiendo de la versión esta carpeta no se incluye por defecto, pero la podemos crear manualmente.

• node_modules/ - Contiene todos los módulos de Ionic y dependencias que nos hemos instalado.

• platforms/ - Contiene el código específico de las plataformas móviles para las cuales se va a compilar, como por ejemplo Android, iOS, etc. Esta carpeta inicialmente no se incluye, pero se creará automáticamente cuando añadamos alguna plataforma destino. El código de esta carpeta es generado y no se ha de modificar manualmente.

• plugins/ - Contiene los plugins de Cordova instalados para las plataformas destino, los cuales se utilizan para añadir funcionalidad como el acceso a las características nativas del móvil. Esta carpeta tampoco se incluye inicialmente pero se creará al añadir plataformas y plugins.

• resources/ - Recursos específicos de las plataformas. Principalmente se utiliza para almacenar los iconos e imágenes de splashscreen que se utilizarán para cada plataforma.

• src/ - Carpeta con el código del proyecto. Igual que en los proyectos de Angular (y a diferencia de Cordova) el código fuente del proyecto se alojará dentro de esta carpeta.

• www/ - Código del proyecto compilado. Tanto al desplegar nuestro proyecto para visualizarlo en el navegador como al compilarlo para una plataforma lo primero que se realiza es transpilar el código de TypeScript y generar el código final en JavaScript que se utilizará. Importante: No hay que modificar el código desde aquí sino en la carpeta "src".

• tslint.json y tsconfig.json - Ficheros de configuración de TypeScript.

• package.json - Fichero de configuración del proyecto Ionic, incluye el nombre del proyecto, la versión, las dependencias, etc.

• ionic.config.json - Fichero de configuración para subir el proyecto a plataformas de desarrollo de Ionic.

• config.xml - Fichero de configuración de Cordova, contiene las opciones de configuración utilizadas cuando se compila el proyecto para las distintas plataformas nativas.

Todas estas carpetas incluirán algunos ficheros de ejemplo con el código base, que dependerá de la plantilla seleccionada. Las carpetas platforms y plugins no vienen por defecto, sino que se crearán una vez añadamos la primera plataforma de compilación.

Como ya hemos visto, la carepta "src" contiene el código fuente principal de la aplicación Ionic. Esta carpeta es donde tendremos que desarrollar la aplicación web de forma centralizada y después utilizarla para la compilación para las distintas plataformas. Dentro de la carpeta src podemos encontrar:

• app/ - Esta carpeta contiene los componentes principales del proyecto de Ionic/Angular que se carga al inicio, aquí encontramos el módulo con la configuración inicial del proyecto, así como el componente app.

• assets/ - Carpeta destinada para los recursos de la aplicación, incluyendo imágenes, vídeos, audio, etc. Por defecto incluirá un icono.

• pages/ - Contiene las páginas de la aplicación, las cuales se irán cargando según se requieran. Cada una de estas páginas en realidad es un componente de Angular.

• providers/ - Proveedores de contenido de la aplicación (o servicios en Angular), los cuales nos servirán para gestionar los datos de la aplicación (tanto almacenados de forma local como remota). Las páginas utilizarán estos proveedores para obtener los datos que necesiten.

• theme/ - En esta carpeta se almacena la configuración de los temas de la aplicación. Para esto se utilizan ficheros con extensión "scss", que son ficheros con código SASS que se generará también junto con la aplicación.

• manifest.json - Configuración del proyecto, como el nombre, la url principal, los iconos y colores para el tema principal, etc.

• index.html - Este es el fichero principal que se abrirá al cargar la aplicación. Aquí tendremos que cargar todo lo necesario y mostrar el contenido de la primera pantalla. Veremos más sobre este fichero en la siguiente sección.

Como ya hemos dicho, la subcarpeta "app" contiene el código de Ionic/Angular que se carga al inicio, aquí encontramos el módulo con la configuración inicial del proyecto, así como el componente app. Esta carpeta por defecto contiene los siguientes archivos:

• app.component.ts - Contiene el código del componente principal de la aplicación. Este componente espera a que se carguen todas las librerías e incluye en su plantilla el componente principal de navegación.

• app.html - Esta es la plantilla que utiliza el componente principal, la cual incluye la etiqueta que carga el controlador de navegación.

• app.module.ts - Módulo principal de la aplicación, incluye todos los imports de módulos, componentes y proveedores que se vayan a utilizar, los configura en la sección de metadatos con la anotación de módulo @NgModule, y crea la clase AppModule con esta configuración. Una vez cargado este módulo se iniciará la carga del componente principal "app.component.ts".

• app.scss - Hoja de estilos SASS asociada al componente principal. Desde aquí podremos configurar estilos que afecten a toda la aplicación.

• main.ts - Este fichero es el que inicia la carga de la aplicación, en primer lugar carga el módulo principal app.module.ts y a continuación inicializa la aplicación.

En las siguientes secciones analizaremos el código básico necesario que tenemos que incluir en el fichero index.html para crear una aplicación con Ionic y los componentes principales que podemos utilizar.