Si alguna vez te has preguntado ¿cómo es la estructura de directorios de Ionic? O ¿Dónde tiene que ir X archivo? Quizás esto sea para ti. Sigue leyendo.
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y hoy aprenderás cómo es el arbol de directorios de Ionic, el porque de cada carpeta y archivo y, en definitiva, donde está cada cosa dentro del proyecto.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Primero, un tutorial en video por si no te gusta leer
La raíz del proyecto
Cómo es un artículo pensado para todos los que se están iniciando en el Framework, vamos a obviar todos los archivos menos:
- La carpeta src:
- Es la que contiene todo el código TS de nuestra aplicación. Aquí es donde vamos a programar.
- El archivo package.json:
- Será el encargado de almacenar las configuraciones y los paquetes que vamos usando en la app.
El resto de los archivos de momento no los vamos a tocar. La mayoría son autogenerados y no será necesario modificarlos.
El directorio APP
La carpeta app va a contener todo el código local de nuestra app. Digamos que podrían ser las páginas, el enrutado, el código TS individual, los servicios, etc… se podría decir que aquí está el alma de la aplicación.
Cómo habrás podido ver en el video, para el ejemplo hemos utilizado la opción “tabs” para crear la base de nuestra app y dentro de esta carpeta se han creado las respectivas carpetas para cada una de ellas, de las tabs (tab1, tab2, tab3).
A parte, se ha creado otra carpeta que se llama “tabs” (en plural) que es, básicamente, el contenedor que va a encargarse de gestionar los componentes que hemos mencionado en el párrafo anterior.
app.routing.module.ts
También tenemos el archivo “app.routing.module.ts” que contendrá las rutas de la app:
Por si no lo sabías, Ionic internamente trabaja con un sistema de rutas muy parecido al de la web. Si abres el archivo te darás cuenta de cómo tienes que ir agregando rutas a nuestra app para ir agregando páginas de la misma.
Por cada una de las rutas que pongas, páginas tendrá tu aplicación.
app.component.html
Dentro de este archivo tenemos el contendor base de toda la app. En la mayoría de los casos no será necesario tocarlo. Pero es importante saber que está ahí y para lo que sirve.
A medida que vayamos avanzando tenemos que ir sabiendo para que vale cada uno de los archivos y la función que hacen. En este caso, saber que la etiqueta “ion-app” es la que contiene la app en si nos permite, a futuro, hacer muchas cosas.
Cosas cómo, por ejemplo, si queremos embeber la app en una web, tenemos que llamar a esta etiqueta desde nuestro html para que se vea.
Por otro lado, “ion-router-outlet” es la etiqueta encargada de pintar el enrutado de la app. Cuando forcemos a Ionic a cambiar de una página a otra, este componente será el encargado de realizar el trabajo.
app.components.scss
En primer lugar, este archivo es un archivo de estilos “Sass”. Un tipo de documento de estilos muy parecido al css que se transformará en css cuando sea compilado. Nos permite escribir css en cascada obviando tener que llamar a las etiquetas que queramos modificar una y otra vez. Cómo, por ejemplo:
div {
background: #ffffff;
}
div h2 {
color: #333333;
}
div h2 span {
font-size: 12px;
}
Si lo hiciésemos con scss sería así:
div{
background: #ffffff;
h2{
color: #030303;
span{
font-size: 12;
}
}
}
Y así ahorraríamos a la larga una gran cantidad de tiempo, recursos y es mucho más sencillo de entender.
En segundo lugar, este archivo, del que estamos hablando en cuestión, es un archivo de estilos global. Vamos, que va a afectar a todas las páginas y componentes de nuestra aplicación. Por eso está definido en el “app.component”. Tranquilo, posteriormente tendremos un archivo individual para componente.
app.component.ts
Es un componente al uso que será el que controle la app.
Nota: Este componente es el que se llama desde la etiqueta “ion-app” que hemos visto en el archivo html. Cómo podrás observar, está totalmente vacío y en la mayoría de los casos se quedará así.
app.module.ts
Bien, este archivo si que es un poco más complejo y si que será necesario que lo vayamos utilizando. Es más, todos los componentes de nuestra app deberían de tener uno para trabajarlo de manera individual.
Cómo pasa con el archivo “app.component.scss”, este es un archivo global. Todo lo que pongamos aquí podrá ser usado desde cualquier lugar de nuestra aplicación.
De momento, solo nos vamos a quedar con dos de los campos que tenemos disponibles aquí:
- imports:
- Nos permite importar servicios y dependencias que vayamos a usar cómo el HttpModule para, posteriormente, usarlos con inyección de dependencias.
- providers:
- Nos permite usar componentes de una forma especifica y con una inicialización definida en nuestra inyección de dependencias.
De igual modo que el “app.component.ts”, no vamos a picar código propio aquí salvo contadas excepciones. Cuando queramos tener alguna variable estática dentro de la app o algo así. Pero cómo más.
La carpeta ASSETS
Cómo su propio nombre indica, es la carpeta donde vamos a poner los recursos de nuestra app. Ya sean imágenes, videos, fuentes, etc…
No será necesario cómo en otros Frameworks, cómo puede ser Flutter, referenciarlos explícitamente desde un archivo externo. Ionic pone a nuestra disposición mecanismos para hacer referencia a estos desde el código TS o el código HTML.
El directorio ENVIRONMENTS
En este directorio se van a guardar los entornos de compilación de la app y sus respectivas configuraciones.
Una herramienta de mucha utilidad si queremos, por ejemplo, que los “console.log” solo aparezcan en Environment de desarrollo, por ejemplo.
Posteriormente haré una guía sobre esto, pero de momento no la tengo hecha así que aquí puedes echar un vistazo más a fondo sobre el tema:
https://www.joshmorony.com/production-development-environment-variables-in-ionic-angular/
La carpeta THEME
Terminando con los directorios, la carpeta Theme contiene todas las variables de estilo de nuestra app. Dichas variables son las que usará el sistema de manera predeterminada para pintar botones, bordes, cajas, la barra de navegación, etc…
Accediendo al archivo podrás ver todos los colores y nombre de las respectivas variables de las que disponemos. No es necesario que las comente aquí, están perfectamente explicadas en el video que puedes ver arriba.
Y ya que he comentado lo del video, pues si te mola el contenido de este, suscríbete al canal dev, que no cuesta nada y a mí me ayuda muchísimo a seguir creando contenido. Lo puedes hacer desde aquí.
global.sccs
Bueno, cómo su nombre indica, también tenemos otro archivo de estilos global aquí. Pero este es un poco diferente dado que no vamos a escribir nada de código propio aquí. Si quereoms CSS global, tenemos que hacerlo en el archivo "app.component.scss" cómo hemos visto más arriba.
Este archivo lo usaremos, sola y exclusivamente, para importar dependencias de estilo externas. Si lo abres, podrás ver que lo único que tiene son imports.
Por ejemplo, si quisiéramos importar alguna fuente de GoogleFonts tendríamos que hacerlo de la siguiente manera:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
Hay que tener cuidado con lo que importas, porque si el dispositivo en cuestión no tiene internet cuando la app es ejecutada, esto no funcionará. Pasa lo mismo que en los navegadores web. Es preferible que la descargues y las metas dentro de la carpeta assets.
Info adicional
Todo el resto de las carpetas y archivos que hemos obviado, o hemos dichos que se autogeneran, es mejor no tocarlos de manera directa si no sabes lo que estás haciendo.
De los archivos de la raíz, a excepción de las carpetas antes mencionadas, no será necesario que toques nada más que el archivo desde el que puedes editar el nombre de la versión, el código de esta y el nombre del paquete. Y nada más.
Algo más que quizás te interese
Mira, el logo es tu puerta de entrada a la ficha de Google Play. Por lo que tener una puerta de una mansión de 20 millones, es mejor que tener una puerta de una cuadra de esas dobles de las que seguro que te acuerdas. Mejor logo equivale a más descargas y, por extensión, más ingresos.
Por esto, hemos creado esta herramienta. Una herramienta en la que podrás evaluar, optimizar y mejorar tu logo basándote en la iformación de todos los logos que hay disponibles en Google Play y sujetados sobre una IA. No te espoileo, entra en el enlace.
Y sin nada más que agregar, me despido ya. Espero haberte ayudado y nos vemos en el siguiente artículo. Hast entonces ¡que vaya bien!